@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Great+Vibes&display=swap');
:root  {
  --maroon-950:#210309;
  --maroon-900:#39070d;
  --maroon-800:#520d17;
  --maroon-700:#6a1722;
  --gold:#d8b66a;
  --gold-light:#f4df9b;
  --cream:#fff7e8;
  --cream-muted:#e7d7bd;
  --glass:rgba(45,5,12,.78);
  --line:rgba(224,190,112,.52);
  --shadow:0 24px 70px rgba(0,0,0,.28);
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:18px
}
body {
  margin:0;
  background:radial-gradient(ellipse at 50% 0%,#6a1722 0%,#39070d 42%,#210309 100%);
  color:var(--cream);
  font-family:'Cormorant Garamond',serif;
  font-size:19px;
  line-height:1.6;
  min-height:100vh
}
body:before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(circle at 15% 20%,rgba(226,186,95,.08),transparent 27%),radial-gradient(circle at 85% 70%,rgba(226,186,95,.06),transparent 28%)
}
[hidden] {
  display:none!important
}
button,input,select,textarea {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit
}
.gold-dust {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.4;
  background-image:radial-gradient(2px 2px at 15% 22%,#f4df9b 45%,transparent 60%),radial-gradient(1px 1px at 70% 35%,#f4df9b 45%,transparent 60%),radial-gradient(2px 2px at 82% 75%,#d8b66a 45%,transparent 60%),radial-gradient(1px 1px at 32% 82%,#f4df9b 45%,transparent 60%);
  background-size:230px 260px;
  animation:dust 18s linear infinite
}
@keyframes dust {
  to {
    background-position:230px 260px
  }
}
.cover {
  position:relative;
  z-index:1;
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:56px 22px 38px;
  overflow:hidden;
  background:radial-gradient(ellipse at center,rgba(105,19,31,.58),rgba(35,3,9,.95)),linear-gradient(145deg,#5b101b,#260309)
}
.cover:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(218,182,106,.05),transparent)
}
.cover-frame {
  position:absolute;
  inset:18px;
  border:1px solid var(--line);
  outline:1px solid rgba(224,190,112,.16);
  outline-offset:7px;
  pointer-events:none
}
.corner {
  position:absolute;
  color:var(--gold);
  font-size:44px;
  top:20px;
  line-height:1
}
.corner-tl {
  left:26px
}
.corner-tr {
  right:26px;
  transform:scaleX(-1)
}
.wayang {
  position:absolute;
  top:42%;
  font-size:clamp(80px,14vw,180px);
  color:rgba(221,185,107,.08);
  font-family:serif;
  pointer-events:none
}
.wayang-left {
  left:2%
}
.wayang-right {
  right:2%
}
.cover-content {
  position:relative;
  z-index:2;
  width:min(100%,690px);
  padding:24px 0
}
.eyebrow {
  font-family:Cinzel,serif;
  font-size:clamp(10px,2vw,13px);
  letter-spacing:.19em;
  color:var(--gold-light);
  margin:0 0 14px
}
.ornament {
  color:var(--gold);
  letter-spacing:.4em;
  margin:8px 0
}
h1,h2,h3,p {
  margin-top:0
}
.cover h1 {
  font-size:clamp(55px,11vw,100px);
  line-height:.94;
  font-weight:500;
  margin:14px 0 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,3vw,24px);
  flex-wrap:wrap;
  color:var(--gold-light)
}
.cover h1 span {
  font-family:'Great Vibes',cursive;
  font-weight:400
}
.cover h1 i {
  font-family:'Cormorant Garamond',serif;
  font-size:.55em;
  font-weight:400;
  color:var(--cream-muted)
}
.date-line {
  font-size:18px;
  color:var(--cream-muted);
  letter-spacing:.05em
}
.gold-rule,.thin-rule {
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  width:min(260px,70%);
  margin:23px auto
}
.guest-label {
  margin:0;
  color:var(--cream-muted);
  font-size:17px
}
.guest-name {
  font-family:'Cinzel',serif;
  color:var(--gold-light);
  font-size:clamp(19px,4vw,25px);
  margin:0 auto 8px;
  overflow-wrap:anywhere
}
.small-note {
  max-width:420px;
  margin:0 auto 22px;
  color:#f1e3ce;
  font-size:18px
}
.gold-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px solid #f4df9b;
  border-radius:3px;
  padding:13px 25px;
  background:linear-gradient(135deg,#f1d68b,#c49a4b);
  color:#3b0a10;
  text-decoration:none;
  font-family:Cinzel,serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.2);
  transition:transform .2s,filter .2s
}
.gold-button:hover {
  transform:translateY(-2px);
  filter:brightness(1.06)
}
.scroll-hint {
  font:10px Cinzel,serif;
  letter-spacing:.15em;
  color:#c9ad79;
  margin:25px 0 0
}
.scroll-hint span {
  font-size:18px
}
.share-builder {
  width:min(100%,430px);
  margin:24px auto 0;
  padding:16px;
  border:1px solid rgba(224,190,112,.35);
  background:rgba(28,3,8,.48);
  text-align:left
}
.share-title {
  text-align:center;
  color:var(--gold-light);
  font:11px Cinzel,serif;
  letter-spacing:.08em;
  margin:0 0 10px
}
.share-controls,.share-actions {
  display:flex;
  gap:8px
}
.share-controls input,.share-result input {
  min-width:0;
  width:100%;
  background:#fff8ed;
  border:1px solid #d9bd7e;
  border-radius:2px;
  color:#351016;
  padding:9px 10px;
  font-size:15px
}
.share-button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  white-space:nowrap;
  background:#6a1722;
  border:1px solid var(--gold);
  color:#fff3d7;
  padding:8px 12px;
  font:11px Cinzel,serif;
  text-decoration:none;
  cursor:pointer
}
.share-result {
  margin-top:12px
}
.share-result input {
  margin-bottom:8px
}
.share-actions>* {
  flex:1
}
.share-help {
  font-size:14px;
  line-height:1.35;
  color:#d8c7ab;
  margin:9px 0 0
}
main {
  position:relative;
  z-index:1;
  overflow:hidden
}
.section {
  position:relative;
  text-align:center;
  padding:82px 22px;
  max-width:100%;
  background:transparent
}
.section:nth-child(even) {
  background:linear-gradient(180deg,rgba(77,11,21,.38),rgba(39,4,10,.24))
}
.section:before {
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  height:1px;
  width:min(78%,620px);
  background:linear-gradient(90deg,transparent,rgba(216,182,106,.42),transparent)
}
.section>* {
  position:relative
}
.section h2 {
  font-size:clamp(35px,7vw,54px);
  font-weight:500;
  line-height:1.1;
  color:var(--cream);
  margin:0 0 26px
}
.section h2 em {
  font-family:'Great Vibes',cursive;
  font-size:1.22em;
  color:var(--gold-light);
  font-weight:400
}
.batik-mark {
  font-size:28px;
  color:var(--gold);
  margin-bottom:18px
}
.body-copy {
  max-width:650px;
  margin:0 auto;
  color:#e9d9c3;
  font-size:21px
}
.signature {
  font-family:'Great Vibes',cursive;
  font-size:38px;
  color:var(--gold-light);
  margin-top:22px
}
.couple-grid {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:24px;
  align-items:center;
  max-width:850px;
  margin:36px auto
}
.person {
  padding:26px 18px;
  border:1px solid rgba(216,182,106,.32);
  background:linear-gradient(150deg,rgba(103,20,33,.48),rgba(31,3,9,.5));
  box-shadow:var(--shadow)
}
.portrait {
  width:126px;
  height:126px;
  border-radius:50%;
  margin:0 auto 18px;
  border:1px solid var(--gold);
  display:grid;
  place-items:center;
  position:relative;
  background:radial-gradient(circle,#7a2630,#2b050b);
  box-shadow:0 0 0 6px rgba(216,182,106,.07)
}
.portrait b {
  font:60px 'Great Vibes',cursive;
  color:var(--gold-light);
  font-weight:400
}
.portrait span {
  position:absolute;
  top:4px;
  right:14px;
  color:var(--gold)
}
.person-role {
  font:10px Cinzel,serif;
  letter-spacing:.16em;
  color:var(--gold);
  margin-bottom:6px
}
.person h3,.event-card h3,.location-card h3 {
  font-size:27px;
  font-weight:500;
  color:var(--gold-light);
  margin-bottom:12px
}
.person p:last-child {
  color:#e6d7c3
}
.person strong {
  color:#fff3df
}
.ampersand {
  font:45px 'Great Vibes',cursive;
  color:var(--gold)
}
.verse {
  max-width:650px;
  margin:35px auto 0;
  color:#e9d9c3;
  font-style:italic;
  font-size:21px
}
.verse span {
  display:inline-block;
  margin-top:10px;
  color:var(--gold);
  font-size:15px
}
.event-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  max-width:850px;
  margin:35px auto
}
.event-card,.location-card {
  border:1px solid rgba(216,182,106,.4);
  background:linear-gradient(150deg,rgba(95,16,29,.68),rgba(35,3,9,.75));
  padding:30px 24px;
  box-shadow:var(--shadow)
}
.event-symbol {
  color:var(--gold);
  font-size:32px
}
.event-card h3 {
  margin:8px 0
}
.event-date {
  color:var(--gold-light);
  font-weight:600
}
.event-card p {
  margin-bottom:8px;
  color:#eadbc5
}
.event-place {
  line-height:1.5
}
.thin-rule {
  margin:20px auto;
  width:75%
}
.count-title {
  font:12px Cinzel,serif;
  letter-spacing:.14em;
  color:var(--gold-light);
  margin:36px 0 18px
}
.countdown {
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:25px
}
.countdown div {
  min-width:76px;
  padding:12px 14px;
  border:1px solid rgba(216,182,106,.42);
  background:rgba(24,2,7,.48)
}
.countdown b {
  display:block;
  font:27px Cinzel,serif;
  color:var(--gold-light)
}
.countdown span {
  font-size:14px;
  color:#e7d7bd
}
.inline-button {
  margin-top:12px
}
.timeline {
  max-width:650px;
  margin:35px auto 0;
  text-align:left
}
.timeline article {
  display:grid;
  grid-template-columns:52px 1fr;
  gap:18px;
  position:relative;
  padding-bottom:30px
}
.timeline article:not(:last-child):after {
  content:"";
  position:absolute;
  left:25px;
  top:48px;
  bottom:0;
  width:1px;
  background:rgba(216,182,106,.45)
}
.timeline-dot {
  width:50px;
  height:50px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--gold-light);
  font:12px Cinzel,serif;
  background:#3b0710;
  z-index:1
}
.story-year {
  font:11px Cinzel,serif;
  letter-spacing:.12em;
  color:var(--gold);
  margin:0 0 4px
}
.timeline h3 {
  font-size:25px;
  color:var(--gold-light);
  margin:0 0 4px;
  font-weight:500
}
.timeline article p:last-child {
  color:#e8d8c2;
  margin-bottom:0
}
.gallery-grid {
  max-width:900px;
  margin:35px auto 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px
}
.gallery-tile {
  min-height:210px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border:1px solid rgba(216,182,106,.55);
  background:radial-gradient(ellipse at center,rgba(142,61,67,.65),rgba(37,4,10,.9));
  color:var(--gold-light);
  box-shadow:var(--shadow)
}
.gallery-tile span {
  font-size:40px
}
.gallery-tile p {
  font:12px Cinzel,serif;
  letter-spacing:.13em;
  margin:12px 0 0
}
.location-card {
  max-width:620px;
  margin:32px auto 0
}
.map-art {
  height:190px;
  position:relative;
  overflow:hidden;
  background-color:#3d1820;
  background-image:linear-gradient(30deg,transparent 47%,rgba(221,188,119,.28) 48%,rgba(221,188,119,.28) 50%,transparent 51%),linear-gradient(120deg,transparent 42%,rgba(221,188,119,.2) 43%,rgba(221,188,119,.2) 45%,transparent 46%),repeating-linear-gradient(0deg,transparent 0 32px,rgba(255,255,255,.04) 33px 34px);
  margin-bottom:24px
}
.map-pin {
  position:absolute;
  left:50%;
  top:43%;
  transform:translate(-50%,-50%);
  font-size:44px;
  color:var(--gold-light);
  text-shadow:0 3px 12px #210309
}
.map-label {
  position:absolute;
  left:0;
  right:0;
  bottom:18px;
  font:11px Cinzel,serif;
  letter-spacing:.15em;
  color:#f8e8c5
}
.map-road {
  position:absolute;
  height:2px;
  background:rgba(244,223,155,.45);
  width:130%;
  left:-15%;
  transform:rotate(-19deg)
}
.road-a {
  top:28%
}
.road-b {
  top:65%;
  transform:rotate(22deg)
}
.road-c {
  top:47%;
  transform:rotate(76deg)
}
.location-card p {
  color:#e8d8c2
}
#rsvpForm {
  max-width:540px;
  margin:32px auto 0;
  text-align:left;
  display:grid;
  gap:16px
}
#rsvpForm label {
  display:grid;
  gap:6px;
  color:var(--gold-light);
  font-size:17px
}
#rsvpForm input,#rsvpForm select,#rsvpForm textarea {
  width:100%;
  padding:12px 13px;
  background:#fff8ed;
  border:1px solid #d5b777;
  border-radius:2px;
  color:#321016;
  outline:none
}
#rsvpForm input:focus,#rsvpForm select:focus,#rsvpForm textarea:focus {
  box-shadow:0 0 0 3px rgba(216,182,106,.2)
}
#rsvpForm button {
  justify-self:center;
  margin-top:5px
}
.footer {
  padding-bottom:55px
}
.footer h2 {
  font-size:clamp(31px,6vw,47px)
}
.footer>p:not(.eyebrow):not(.footer-date) {
  max-width:560px;
  margin:0 auto;
  color:#e8d8c2
}
.footer-date {
  color:var(--gold-light);
  margin:10px 0
}
.footer-ornament {
  color:var(--gold);
  letter-spacing:.12em;
  margin:25px 0 10px
}
.footer small {
  font-size:13px;
  color:#cdbb9c
}
.music-toggle {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:10;
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#5c101b;
  border:1px solid var(--gold);
  color:var(--gold-light);
  font-size:23px;
  box-shadow:0 5px 22px #160207;
  cursor:pointer
}
.reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease
}
.reveal.visible {
  opacity:1;
  transform:translateY(0)
}
.invitation-unlocked {
  animation:unlock .65s ease both
}
@keyframes unlock {
  from {
    opacity:.3
  }
  to {
    opacity:1
  }
}
@media(max-width:640px) {
  .cover {
    padding:42px 22px 32px
  }
  .cover-frame {
    inset:12px;
    outline-offset:4px
  }
  .corner {
    top:13px;
    font-size:32px
  }
  .corner-tl {
    left:18px
  }
  .corner-tr {
    right:18px
  }
  .cover h1 {
    gap:7px
  }
  .date-line {
    font-size:16px
  }
  .section {
    padding:62px 18px
  }
  .couple-grid {
    grid-template-columns:1fr;
    gap:15px;
    max-width:390px
  }
  .ampersand {
    font-size:35px;
    line-height:1
  }
  .person {
    padding:22px 15px
  }
  .event-grid {
    grid-template-columns:1fr;
    max-width:430px
  }
  .gallery-grid {
    grid-template-columns:1fr;
    max-width:400px
  }
  .gallery-tile {
    min-height:150px
  }
  .share-controls {
    flex-direction:column
  }
  .share-controls .share-button {
    padding:11px
  }
  .share-actions {
    flex-direction:column
  }
  .countdown {
    gap:7px
  }
  .countdown div {
    min-width:65px;
    padding:9px 10px
  }
  .wayang {
    top:12%;
    font-size:90px
  }
  .body-copy {
    font-size:19px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    transition-duration:.01ms!important
  }
}
/* BACKGROUND FOTO UNDANGAN */
body  {
  position: relative;
  background:
  linear-gradient(
  rgba(33, 3, 9, 0.78),
  rgba(57, 7, 13, 0.84)
  ),
  url("images/undangan2.png") center center / cover fixed no-repeat;
  background-color: #210309;
  color: var(--cream);
}
/* Background foto pada halaman sampul */
.cover  {
  background:
  linear-gradient(
  rgba(57, 7, 13, 0.58),
  rgba(33, 3, 9, 0.82)
  ),
  url("images/sampul.JPG") center center / cover no-repeat;
}
/* Halaman isi tetap menyatu dengan background */
main  {
  position: relative;
  z-index: 1;
  background: transparent;
}
/* Lapisan elegan untuk menjaga keterbacaan tulisan */
.section:nth-child(even)  {
  background: rgba(57, 7, 13, 0.30);
}
/* Tampilan HP */
@media (max-width: 640px)  {
  body  {
    background-attachment: scroll;
  }
  .cover  {
    background-position: center center;
  }
}
/* =========================================================
   BACKGROUND FOTO PER BAGIAN
   Sampul sengaja tetap memakai images/undangan2.png.
   Untuk mengganti foto bagian lain, ubah URL pada selector terkait.
   Lapisan merah transparan menjaga teks tetap mudah dibaca.
========================================================= */
#invitation .section  {
  background-image: linear-gradient(rgba(42, 4, 11, .76), rgba(42, 4, 11, .82)), url("images/undangan2.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
#invitation .intro  {
  background-image: linear-gradient(rgba(42, 4, 11, .72), rgba(42, 4, 11, .80)), url("images/undangan2.png");
}
#invitation .couple  {
  background-image: linear-gradient(rgba(42, 4, 11, .72), rgba(42, 4, 11, .80)), url("images/undangan2.png");
}
#invitation .events  {
  background-image: linear-gradient(rgba(42, 4, 11, .72), rgba(42, 4, 11, .80)), url("images/undangan2.png");
}
#invitation .story  {
  background-image: linear-gradient(rgba(42, 4, 11, .72), rgba(42, 4, 11, .80)), url("images/undangan2.png");
}
#invitation .gallery  {
  background-image: linear-gradient(rgba(42, 4, 11, .72), rgba(42, 4, 11, .80)), url("images/undangan2.png");
}
#invitation .location  {
  background-image: linear-gradient(rgba(42, 4, 11, .72), rgba(42, 4, 11, .80)), url("images/undangan2.png");
}
#invitation .rsvp  {
  background-image: linear-gradient(rgba(42, 4, 11, .72), rgba(42, 4, 11, .80)), url("images/undangan2.png");
}
#invitation .gift  {
  background-image: linear-gradient(rgba(42, 4, 11, .72), rgba(42, 4, 11, .80)), url("images/undangan2.png");
}
#invitation .footer  {
  background-image: linear-gradient(rgba(42, 4, 11, .72), rgba(42, 4, 11, .84)), url("images/undangan2.png");
}
.gift-grid  {
  width: min(100%, 760px);
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.gift-card  {
  padding: 28px 20px;
  border: 1px solid rgba(216,182,106,.48);
  background: rgba(31,3,9,.68);
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}
.gift-icon  {
  color: var(--gold-light);
  font-size: 38px;
  line-height: 1.2;
}
.gift-card h3  {
  color: var(--gold-light);
  font-weight: 500;
  margin: 10px 0;
}
.gift-bank, .gift-account, .gift-owner  {
  margin: 8px 0;
}
.gift-account  {
  font-family: Cinzel, serif;
  font-size: 21px;
  letter-spacing: .06em;
  color: var(--gold-light);
}
.gift-copy  {
  margin-top: 12px;
}
.gift-note  {
  font-size: 14px;
  opacity: .85;
  margin: 22px auto 0;
  max-width: 650px;
}
@media(max-width:640px)  {
  .gift-grid  {
    grid-template-columns: 1fr;
    max-width: 430px;
  }
}
/* Sampul tidak disentuh agar desain pembuka tetap seperti semula. */
#cover[hidden]  {
  display: none !important;
}
/* Buku tamu / daftar ucapan */
.guestbook  {
  width: min(100%, 680px);
  margin: 34px auto 0;
  text-align: left;
}
.guestbook h3  {
  color: var(--gold-light);
  text-align: center;
  font-family: Cinzel, serif;
  font-weight: 500;
  font-size: clamp(18px, 4vw, 24px);
  margin-bottom: 8px;
}
.guestbook-intro  {
  text-align: center;
  opacity: .85;
  margin: 0 0 20px;
}
.guestbook-list  {
  display: grid;
  gap: 13px;
}
.guestbook-item  {
  padding: 17px 18px;
  border: 1px solid rgba(216,182,106,.38);
  background: rgba(31,3,9,.62);
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.guestbook-item-head  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.guestbook-item h4  {
  margin: 0;
  color: var(--gold-light);
  font-size: 16px;
  font-weight: 600;
}
.guestbook-status  {
  font-size: 11px;
  border: 1px solid rgba(216,182,106,.45);
  border-radius: 30px;
  padding: 4px 9px;
  color: var(--gold-light);
}
.guestbook-item p  {
  margin: 12px 0;
  line-height: 1.7;
  white-space: pre-wrap;
}
.guestbook-item small  {
  opacity: .7;
  font-size: 11px;
}
.guestbook-empty  {
  text-align: center;
  padding: 22px 14px;
  border: 1px dashed rgba(216,182,106,.4);
  opacity: .8;
}
/* =========================================================
   RESPONSIVE MOBILE & TABLET — Rika dan Wildan
   Menjaga desain maroon-emas, sampul asli, dan seluruh fitur.
========================================================= */
html, body  {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
img, video, iframe, svg, canvas  {
  max-width: 100%;
}
button, a, input, select, textarea  {
  touch-action: manipulation;
}
button, .gold-button, .share-button, .gift-copy  {
  min-height: 44px;
}
@media (min-width: 641px) and (max-width: 900px)  {
  .cover  {
    padding: 48px 28px 36px;
  }
  .cover-content  {
    width: min(100%, 650px);
  }
  .section  {
    padding: 70px 26px;
  }
  .couple-grid  {
    gap: 14px;
  }
  .person  {
    padding: 22px 14px;
  }
  .gallery-grid  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .event-grid  {
    gap: 16px;
  }
}
@media (max-width: 640px)  {
  body  {
    font-size: 17px;
    line-height: 1.55;
  }
  .cover  {
    min-height: 100svh;
    min-height: 100dvh;
    padding: max(38px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
  }
  .cover-frame  {
    inset: 12px;
    outline-offset: 3px;
  }
  .cover-content  {
    width: 100%;
    max-width: 100%;
    padding: 22px 3px;
  }
  .cover h1  {
    font-size: clamp(43px, 12vw, 68px);
    line-height: 1.02;
    gap: 5px 10px;
    margin: 15px 0 18px;
  }
  .cover h1 span  {
    overflow-wrap: anywhere;
  }
  .eyebrow  {
    letter-spacing: .14em;
    font-size: 10px;
  }
  .date-line  {
    font-size: 15px;
    line-height: 1.5;
  }
  .guest-label  {
    font-size: 15px;
  }
  .guest-name  {
    font-size: clamp(17px, 5vw, 22px);
  }
  .small-note  {
    font-size: 16px;
    line-height: 1.5;
    padding: 0 4px;
  }
  .gold-button  {
    max-width: 100%;
    padding: 13px 18px;
    font-size: 11px;
  }
  .share-builder  {
    width: 100%;
    padding: 13px 11px;
    margin-top: 20px;
  }
  .share-controls, .share-actions  {
    width: 100%;
  }
  .share-controls input, .share-result input  {
    font-size: 16px;
    min-height: 44px;
  }
  .share-button  {
    min-height: 44px;
    white-space: normal;
  }
  .section  {
    padding: 54px 16px;
  }
  .section h2  {
    font-size: clamp(30px, 9vw, 43px);
    margin-bottom: 20px;
    overflow-wrap: anywhere;
  }
  .body-copy, .verse  {
    font-size: 18px;
    line-height: 1.65;
  }
  .couple-grid  {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    width: 100%;
  }
  .person  {
    min-width: 0;
    padding: 22px 14px;
  }
  .person h3, .event-card h3, .location-card h3  {
    font-size: 24px;
    overflow-wrap: anywhere;
  }
  .portrait  {
    width: 108px;
    height: 108px;
  }
  .portrait b  {
    font-size: 52px;
  }
  .ampersand  {
    font-size: 31px;
  }
  .event-grid  {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    width: 100%;
  }
  .event-card, .location-card  {
    padding: 23px 16px;
    min-width: 0;
  }
  .countdown  {
    gap: 7px;
  }
  .countdown div  {
    flex: 1 1 62px;
    min-width: 0;
    max-width: 90px;
    padding: 9px 5px;
  }
  .countdown b  {
    font-size: clamp(19px, 6vw, 25px);
  }
  .countdown span  {
    font-size: 12px;
  }
  .timeline  {
    width: 100%;
  }
  .timeline article  {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
  }
  .timeline-dot  {
    width: 40px;
    height: 40px;
    font-size: 10px;
  }
  .timeline article:not(:last-child):after  {
    left: 20px;
    top: 40px;
  }
  .timeline h3  {
    font-size: 22px;
    overflow-wrap: anywhere;
  }
  .gallery-grid  {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
  }
  .gallery-tile  {
    min-height: 160px;
  }
  .map-art  {
    height: 155px;
  }
  #rsvpForm  {
    width: 100%;
    gap: 13px;
  }
  #rsvpForm label  {
    font-size: 16px;
  }
  #rsvpForm input, #rsvpForm select, #rsvpForm textarea  {
    min-width: 0;
    font-size: 16px;
    /* mencegah auto-zoom pada Safari iPhone */
    padding: 12px;
    border-radius: 5px;
  }
  #rsvpForm button  {
    justify-self: stretch;
    width: 100%;
  }
  .guestbook  {
    width: 100%;
  }
  .guestbook-item  {
    padding: 14px 13px;
  }
  .guestbook-item-head  {
    align-items: flex-start;
  }
  .guestbook-item p  {
    overflow-wrap: anywhere;
  }
  .gift-grid  {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 13px;
  }
  .gift-card  {
    min-width: 0;
    padding: 22px 15px;
  }
  .gift-account  {
    font-size: clamp(17px, 5vw, 21px);
    letter-spacing: .02em;
    overflow-wrap: anywhere;
  }
  .footer  {
    padding-bottom: max(70px, calc(55px + env(safe-area-inset-bottom)));
  }
  .music-toggle  {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
  }
}
@media (max-width: 360px)  {
  .cover  {
    padding-left: 15px;
    padding-right: 15px;
  }
  .cover h1  {
    font-size: clamp(39px, 11.5vw, 48px);
  }
  .section  {
    padding-left: 13px;
    padding-right: 13px;
  }
  .section h2  {
    font-size: 29px;
  }
  .corner  {
    font-size: 27px;
  }
  .corner-tl  {
    left: 16px;
  }
  .corner-tr  {
    right: 16px;
  }
  .countdown div  {
    flex-basis: 54px;
  }

}


/* =========================================================
   AKSESIBILITAS: KURANGI ANIMASI
========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   FOTO MEMPELAI - MAROON GOLD
   Mempertahankan bingkai elegan dan responsif
========================================================= */
#mempelai .portrait {
  position: relative;
  width: min(100%, 250px);
  aspect-ratio: 3 / 4;
  height: auto;
  margin: 0 auto 20px;
  overflow: hidden;
  border: 2px solid var(--gold);
  border-radius: 130px 130px 12px 12px;
  background: radial-gradient(circle, #7a2630, #2b050b);
  box-shadow: 0 0 0 6px rgba(216, 182, 106, 0.07);
  box-sizing: border-box;
}

#mempelai .portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Sembunyikan ornamen inisial lama saat foto tersedia */
#mempelai .portrait img ~ b,
#mempelai .portrait img ~ span {
  display: none;
}

/* =========================================================
   RESPONSIVE FOTO MEMPELAI
========================================================= */
@media (max-width: 640px) {
  #mempelai .portrait {
    width: min(100%, 220px);
    aspect-ratio: 3 / 4;
    height: auto;
    border-radius: 110px 110px 10px 10px;
  }
}

@media (max-width: 360px) {
  #mempelai .portrait {
    width: min(100%, 190px);
  }
}


/* =====================================
   GALERI CINTA — FOTO MAROON GOLD
===================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.gallery-tile {
  position: relative;
  min-height: 240px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--gold, #d8b66a);
  background: #42151d;
  box-sizing: border-box;
}

/* Foto memenuhi seluruh kotak */
.gallery-tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
  z-index: -2;
}

/* Lapisan gelap agar teks terbaca */
.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(30, 0, 7, 0.05) 20%,
    rgba(30, 0, 7, 0.25) 45%,
    rgba(30, 0, 7, 0.85) 100%
  );
  z-index: -1;
  pointer-events: none;
}

.gallery-tile:hover > img {
  transform: scale(1.06);
}

/* Tulisan di bagian bawah foto */
.gallery-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 24px 16px;
  text-align: center;
  color: #f5d98b;
}

.gallery-caption span {
  display: block;
  font-size: 32px;
  margin-bottom: 12px;
}

.gallery-caption p {
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #f5d98b;
}

/* Tampilan desktop */
@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .gallery-tile {
    min-height: 280px;
  }

  .gallery-tile.tile-three {
    grid-column: 1 / -1;
  }
}

/* Mengurangi animasi jika diperlukan */
@media (prefers-reduced-motion: reduce) {
  .gallery-tile > img {
    transition: none;
  }
}





/* =========================================================
   PREMIUM MOTION PACK — SCROLL, DEPTH & MICRO INTERACTIONS
========================================================= */
:root {
  --motion-ease: cubic-bezier(.2,.75,.25,1);
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 1000;
  pointer-events: none;
  background: rgba(244,223,155,.10);
}
.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg,#b8893e,#fff0b5,#d8b66a);
  box-shadow: 0 0 12px rgba(244,223,155,.7);
  transition: width .08s linear;
}
.cover-content { animation: cover-arrive 1.15s var(--motion-ease) both; }
.cover-frame { animation: frame-glow 5s ease-in-out infinite alternate; }
.corner { animation: corner-float 5s ease-in-out infinite; }
.corner-tr { animation-delay: -2.5s; }
.wayang { animation: wayang-drift 9s ease-in-out infinite alternate; }
.wayang-right { animation-delay: -4s; }
@keyframes cover-arrive {
  from { opacity: 0; transform: translateY(28px) scale(.975); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes frame-glow {
  from { box-shadow: 0 0 0 rgba(244,223,155,0); }
  to { box-shadow: inset 0 0 38px rgba(244,223,155,.08), 0 0 30px rgba(244,223,155,.10); }
}
@keyframes corner-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(5deg); } }
@keyframes wayang-drift { from { transform: translateY(-10px) rotate(-3deg); } to { transform: translateY(12px) rotate(3deg); } }

.reveal {
  opacity: 0;
  transform: translate3d(0,54px,0) scale(.985);
  filter: blur(3px);
  transition: opacity .9s var(--motion-ease), transform .95s var(--motion-ease), filter .9s ease;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}
.reveal .person, .reveal .event-card, .reveal .location-card,
.reveal .gift-card, .reveal .gallery-tile {
  transition: transform .75s var(--motion-ease), opacity .75s ease, box-shadow .45s ease;
}
.reveal:not(.visible) .person,
.reveal:not(.visible) .event-card,
.reveal:not(.visible) .location-card,
.reveal:not(.visible) .gift-card,
.reveal:not(.visible) .gallery-tile {
  opacity: 0;
  transform: translateY(30px) scale(.97);
}
.reveal.visible .person, .reveal.visible .event-card,
.reveal.visible .gift-card, .reveal.visible .gallery-tile {
  animation: card-rise .8s var(--motion-ease) both;
}
.reveal.visible .person:nth-child(2),
.reveal.visible .event-card:nth-child(2),
.reveal.visible .gift-card:nth-child(2),
.reveal.visible .gallery-tile:nth-child(2) { animation-delay: .12s; }
.reveal.visible .person:nth-child(3),
.reveal.visible .event-card:nth-child(3),
.reveal.visible .gallery-tile:nth-child(3) { animation-delay: .22s; }
@keyframes card-rise {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.person:hover, .event-card:hover, .gift-card:hover, .location-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 28px 70px rgba(0,0,0,.42), 0 0 24px rgba(216,182,106,.10);
}
.portrait img { transition: transform 1s var(--motion-ease), filter .7s ease; }
.person:hover .portrait img { transform: scale(1.055); filter: saturate(1.08); }
.gallery-tile > img { transition: transform 1.1s var(--motion-ease), filter .8s ease; }
.gallery-tile:hover > img { transform: scale(1.09); filter: saturate(1.12); }
.gold-button, .share-button {
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--motion-ease), box-shadow .3s ease, filter .3s ease;
}
.gold-button:before {
  content: "";
  position: absolute;
  top: -80%;
  left: -45%;
  width: 35%;
  height: 260%;
  transform: rotate(25deg);
  background: rgba(255,255,255,.36);
  transition: left .7s ease;
}
.gold-button:hover:before { left: 125%; }
.gold-button:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.3), 0 0 20px rgba(244,223,155,.18); }
.music-toggle {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  font-family: Arial, sans-serif;
  transition: transform .3s ease, box-shadow .3s ease;
}
.music-toggle:hover { transform: scale(1.09); }
.music-toggle.is-playing { animation: music-pulse 2.2s ease-in-out infinite; }
@keyframes music-pulse {
  0%,100% { box-shadow: 0 5px 22px #160207, 0 0 0 0 rgba(244,223,155,.25); }
  50% { box-shadow: 0 5px 22px #160207, 0 0 0 9px rgba(244,223,155,0); }
}

/* Buku ucapan — hanya nama dan pesan, tanpa RSVP/WhatsApp */
.wish-form {
  width: min(100%, 570px);
  margin: 34px auto 0;
  display: grid;
  gap: 17px;
  text-align: left;
}
.wish-form label {
  display: grid;
  gap: 8px;
  color: var(--gold-light);
  font-size: 18px;
}
.wish-form input, .wish-form textarea {
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(216,182,106,.7);
  border-radius: 7px;
  color: #321016;
  background: rgba(255,248,237,.97);
  outline: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.wish-form input:focus, .wish-form textarea:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 4px rgba(216,182,106,.18), 0 12px 28px rgba(0,0,0,.18);
  transform: translateY(-2px);
}
.wish-form textarea { resize: vertical; min-height: 120px; }
.wish-form button { justify-self: center; min-width: 190px; }
.form-feedback {
  min-height: 22px;
  margin: 0;
  text-align: center;
  color: var(--gold-light);
  font-size: 16px;
}
.guestbook-item {
  animation: wish-appear .55s var(--motion-ease) both;
}
@keyframes wish-appear {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.guestbook-status { white-space: nowrap; }
.guestbook-item p { color: #f3e5d1; }

@media (max-width: 640px) {
  .reveal { transform: translate3d(0,35px,0) scale(.99); }
  .wish-form { gap: 13px; }
  .wish-form button { width: 100%; }
  .music-toggle { z-index: 1001; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
}


/* =========================================================
   SIGNATURE EDITION — RIKA & WILDAN
   Layout editorial, cinematic transitions, layered scroll motion
========================================================= */
:root{
  --gold:#e5c77f;--gold-light:#fff0c2;--cream:#fff9ef;
  --panel:rgba(35,5,12,.72);--panel-line:rgba(229,199,127,.30);
  --deep-shadow:0 28px 90px rgba(10,0,3,.48)
}
body{background:#1b0308;color:var(--cream);font-size:20px;letter-spacing:.01em}
body:before{z-index:0;opacity:.8;background:radial-gradient(ellipse at 12% 12%,rgba(193,119,72,.15),transparent 34%),radial-gradient(ellipse at 88% 45%,rgba(124,27,44,.24),transparent 38%),linear-gradient(180deg,rgba(27,3,8,.2),rgba(18,1,5,.88))}
.gold-dust{z-index:2;opacity:.28;mix-blend-mode:screen;animation:dust 28s linear infinite}
.scroll-progress{height:3px;z-index:1000;background:rgba(255,255,255,.08)}
.scroll-progress span{background:linear-gradient(90deg,#9c6a36,#fff0b8,#c58b42);box-shadow:0 0 12px rgba(255,218,145,.65)}
.cover{min-height:100svh;padding:clamp(35px,6vh,76px) 22px;background:linear-gradient(180deg,rgba(20,1,6,.26),rgba(24,2,8,.80)),url('images/sampul.JPG') center 42%/cover no-repeat;isolation:isolate}
.cover:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(87,14,28,.12),rgba(16,1,5,.72) 78%)}
.cover:after{inset:12px;border:1px solid rgba(245,220,160,.42);background:linear-gradient(110deg,transparent 20%,rgba(255,239,194,.08) 48%,transparent 70%);animation:coverSheen 9s ease-in-out infinite}
@keyframes coverSheen{0%,100%{transform:translateX(-3%);opacity:.35}50%{transform:translateX(3%);opacity:.9}}
.cover-frame{inset:25px;border:1px solid rgba(245,220,160,.58);outline:1px solid rgba(245,220,160,.15);outline-offset:8px}
.cover-content{position:relative;z-index:3;width:min(100%,760px);padding:clamp(28px,5vw,58px) clamp(18px,4vw,48px);border:1px solid rgba(245,220,160,.32);background:linear-gradient(145deg,rgba(37,4,12,.70),rgba(20,2,7,.44));box-shadow:0 25px 100px rgba(0,0,0,.34);backdrop-filter:blur(8px);animation:coverRise 1.2s cubic-bezier(.2,.75,.2,1) both}
@keyframes coverRise{from{opacity:0;transform:translateY(42px) scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.cover .eyebrow{letter-spacing:.36em;font-size:11px;color:#f1d99d}
.cover h1{font-size:clamp(66px,10vw,116px);line-height:.94;margin:22px 0 26px;text-shadow:0 8px 30px rgba(0,0,0,.48)}
.cover h1 span{display:inline-block;animation:nameFloat 5s ease-in-out infinite}
.cover h1 span:last-child{animation-delay:.6s}
@keyframes nameFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.cover h1 i{font-size:.48em;color:var(--gold);padding:0 12px}
.ornament{color:var(--gold-light);letter-spacing:.55em;font-size:20px}
.date-line{font-size:clamp(17px,2.5vw,23px);letter-spacing:.12em;color:#f7e7c5}
.gold-rule{width:90px;height:1px;margin:24px auto;background:linear-gradient(90deg,transparent,var(--gold-light),transparent)}
.guest-label{color:#e8cf98;letter-spacing:.15em;font-size:14px}
.guest-name{font-size:clamp(23px,3vw,30px);color:#fff1cf;margin:0 0 12px}
.small-note{max-width:470px;margin:0 auto 24px;color:#eadcc9;font-size:18px}
.gold-button{border:1px solid #f4dda5;border-radius:100px;background:linear-gradient(135deg,#f5dfaa 0%,#c3944e 45%,#edcf8d 100%);color:#321019;font:600 12px Cinzel,serif;letter-spacing:.15em;padding:16px 29px;box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.65);transition:transform .35s,box-shadow .35s,filter .35s}
.gold-button:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.38),0 0 28px rgba(229,199,127,.22);filter:brightness(1.06)}
.section{position:relative;isolation:isolate;max-width:none;padding:clamp(76px,10vw,132px) max(22px,calc((100vw - 1120px)/2));overflow:hidden;background:transparent}
.section:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(135deg,rgba(42,5,14,.92),rgba(22,2,8,.94)),url('images/undangan2.png') center/cover fixed;opacity:.9}
.section:after{content:"";position:absolute;z-index:-1;left:50%;top:0;transform:translateX(-50%);width:min(76%,760px);height:1px;background:linear-gradient(90deg,transparent,rgba(229,199,127,.55),transparent)}
.section:nth-of-type(even):before{background:linear-gradient(135deg,rgba(19,2,7,.91),rgba(58,9,19,.89)),url('images/undangan.png') center/cover fixed}
.section .eyebrow{font:500 10px Cinzel,serif;letter-spacing:.32em;color:#e8c982;margin-bottom:18px}
.section h2{font:400 clamp(43px,6.3vw,76px)/1.04 'Cormorant Garamond',serif;letter-spacing:-.025em;margin:0 auto 28px;color:#fff7e8}
.section h2 em{font-family:'Great Vibes',cursive;font-size:1.12em;color:var(--gold-light);font-weight:400}
.body-copy{max-width:690px;margin:0 auto;color:#e8dac8;font-size:clamp(19px,2vw,23px);line-height:1.85}
.intro{text-align:center;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.batik-mark{font-size:30px;color:var(--gold);margin-bottom:25px;filter:drop-shadow(0 0 15px rgba(229,199,127,.25))}
.signature{font:clamp(40px,6vw,58px) 'Great Vibes',cursive;color:var(--gold-light);margin-top:24px}
.couple-grid{max-width:1000px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(16px,4vw,48px);margin:55px auto 40px}
.person{position:relative;padding:34px 25px 30px;border:1px solid var(--panel-line);background:linear-gradient(150deg,rgba(91,20,33,.48),rgba(22,3,8,.78));box-shadow:var(--deep-shadow);backdrop-filter:blur(5px);transition:transform .55s, border-color .55s}
.person:hover{transform:translateY(-10px);border-color:rgba(255,225,159,.75)}
.person:before{content:"";position:absolute;inset:9px;border:1px solid rgba(229,199,127,.14);pointer-events:none}
.portrait{width:clamp(150px,17vw,210px);height:clamp(150px,17vw,210px);padding:7px;border:1px solid var(--gold);box-shadow:0 0 0 7px rgba(229,199,127,.07),0 18px 48px rgba(0,0,0,.4);margin:0 auto 24px}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.person-role{font:10px Cinzel,serif;letter-spacing:.24em;color:var(--gold)}
.person h3{font:clamp(34px,4vw,46px) 'Great Vibes',cursive;color:#fff0c5;margin:8px 0 14px}
.person p:not(.person-role){font-size:18px;color:#e8dac8;line-height:1.75}
.person strong{color:#fff1d1;font-weight:600}
.ampersand{font:clamp(56px,7vw,86px) 'Great Vibes',cursive;color:var(--gold-light);text-shadow:0 0 30px rgba(229,199,127,.28)}
.verse{max-width:720px;margin:35px auto 0;color:#eadcc9;font-size:clamp(21px,2.5vw,27px);line-height:1.65;font-style:italic}
.verse span{font:11px Cinzel,serif;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.event-grid{max-width:950px;gap:24px;margin:48px auto 36px}
.event-card,.location-card,.gift-card{position:relative;border:1px solid var(--panel-line);border-radius:3px;background:linear-gradient(145deg,rgba(78,13,27,.65),rgba(22,2,8,.82));padding:clamp(28px,4vw,46px);box-shadow:var(--deep-shadow);backdrop-filter:blur(7px);transition:transform .55s,border-color .55s}
.event-card:hover,.location-card:hover,.gift-card:hover{transform:translateY(-8px);border-color:rgba(255,226,162,.72)}
.event-card:before,.location-card:before,.gift-card:before{content:"";position:absolute;inset:10px;border:1px solid rgba(229,199,127,.13);pointer-events:none}
.event-symbol,.gift-icon{font-size:42px;color:var(--gold-light);margin-bottom:14px}
.event-card h3,.location-card h3,.gift-card h3{font:400 34px 'Cormorant Garamond',serif;color:#fff0c7}
.event-date{color:var(--gold-light);letter-spacing:.04em}
.count-title{font:11px Cinzel,serif;letter-spacing:.28em;color:var(--gold-light);margin:54px 0 22px}
.countdown{gap:12px}
.countdown div{min-width:95px;padding:17px 14px;border:1px solid rgba(229,199,127,.45);background:rgba(21,2,7,.7);box-shadow:0 10px 28px rgba(0,0,0,.22)}
.countdown b{font:32px Cinzel,serif;color:#ffedbd}
.countdown span{font:10px Cinzel,serif;letter-spacing:.15em;color:#d9c39c}
.location-card{max-width:760px;margin:44px auto 0;padding:22px}
.map-art{height:250px;border:1px solid rgba(229,199,127,.2);filter:saturate(.8)}
#rsvpForm{max-width:680px;margin:40px auto 0;padding:clamp(22px,4vw,38px);border:1px solid var(--panel-line);background:linear-gradient(145deg,rgba(78,13,27,.55),rgba(18,2,7,.83));box-shadow:var(--deep-shadow);border-radius:4px}
#rsvpForm label{font:11px Cinzel,serif;letter-spacing:.12em;color:#f0d99f}
#rsvpForm input,#rsvpForm textarea{border:1px solid rgba(229,199,127,.48);border-radius:3px;background:rgba(255,249,239,.97);color:#321019;padding:15px 16px;font:17px 'Cormorant Garamond',serif;transition:box-shadow .3s,border-color .3s}
#rsvpForm input:focus,#rsvpForm textarea:focus{border-color:#f0d99f;box-shadow:0 0 0 4px rgba(229,199,127,.15)}
#rsvpForm button{min-width:190px}
.form-feedback{color:#f5dfaa;text-align:center;font-size:16px}
.guestbook{max-width:760px;margin:55px auto 0}
.guestbook h3{font:400 clamp(30px,4vw,42px) 'Cormorant Garamond',serif;color:#fff0c7}
.guestbook-item{border:1px solid rgba(229,199,127,.25);border-left:3px solid #c79b58;border-radius:2px;background:linear-gradient(110deg,rgba(68,10,23,.66),rgba(20,2,8,.78));padding:21px 24px;box-shadow:0 12px 30px rgba(0,0,0,.2);animation:wishIn .65s both}
@keyframes wishIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.guestbook-item h4{font:600 17px Cinzel,serif;color:#f6dfa8}
.guestbook-item p{font-size:20px;color:#f3e6d4;line-height:1.65}
.guestbook-status{border-color:rgba(229,199,127,.35);color:#e8cc8d}
.gift-grid{max-width:900px;gap:24px}
.gift-card{padding:35px 28px}
.gift-account{font-size:25px}
.gallery-grid{max-width:1000px;grid-template-columns:1.1fr .9fr .9fr;grid-auto-rows:clamp(230px,30vw,370px);gap:17px;margin:48px auto 0}
.gallery-tile{position:relative;min-height:0;overflow:hidden;border:1px solid rgba(229,199,127,.38);background:#26040c;box-shadow:var(--deep-shadow)}
.gallery-tile:first-child{grid-row:span 1}
.gallery-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .7s;filter:brightness(.82) saturate(.82)}
.gallery-tile:hover img{transform:scale(1.09);filter:brightness(.98) saturate(1)}
.gallery-tile:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(15,1,5,.86));pointer-events:none}
.gallery-caption{position:absolute;z-index:2;bottom:20px;left:20px;right:20px;align-items:flex-start}
.gallery-caption span{font-size:23px;color:var(--gold-light)}
.gallery-caption p{font:11px Cinzel,serif;letter-spacing:.25em;color:#fff0c7}
.footer{padding-bottom:110px;text-align:center}
.footer h2{font:400 clamp(39px,6vw,70px)/1.08 'Cormorant Garamond',serif;color:#fff4dc}
.footer-date{font:13px Cinzel,serif;letter-spacing:.2em;color:var(--gold-light)}
.music-toggle{right:25px;bottom:25px;width:54px;height:54px;border:1px solid #f3d995;background:linear-gradient(145deg,#7b1b2a,#30050e);color:#ffedc0;box-shadow:0 10px 35px rgba(0,0,0,.5);font-size:24px;transition:transform .3s}
.music-toggle:hover{transform:scale(1.08)}
.music-toggle.is-playing{animation:musicPulse 2.2s ease-in-out infinite}
@keyframes musicPulse{50%{box-shadow:0 0 0 9px rgba(229,199,127,.08),0 0 28px rgba(229,199,127,.35)}}
.reveal{opacity:0;transform:translateY(54px) scale(.985);filter:blur(5px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.05s cubic-bezier(.2,.7,.2,1),filter 1s}
.reveal.visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.person.reveal,.event-card.reveal,.gallery-tile.reveal{transition-delay:var(--reveal-delay,0ms)}
.quick-nav{position:fixed;z-index:30;left:50%;bottom:22px;transform:translate(-50%,22px);display:flex;align-items:center;gap:5px;padding:7px;border:1px solid rgba(229,199,127,.36);border-radius:100px;background:rgba(25,3,9,.82);backdrop-filter:blur(16px);box-shadow:0 14px 40px rgba(0,0,0,.38);opacity:0;pointer-events:none;transition:opacity .45s,transform .45s}
.quick-nav.is-visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.quick-nav a{display:flex;align-items:center;gap:7px;padding:10px 15px;border-radius:100px;text-decoration:none;color:#f4e5c9;font:10px Cinzel,serif;letter-spacing:.08em;transition:background .25s,color .25s}
.quick-nav a:hover,.quick-nav a.active{background:linear-gradient(135deg,#f2d99e,#c2934e);color:#321019}
.quick-nav span{font-size:14px}
@media(max-width:760px){
 .cover{padding:28px 17px}.cover-content{padding:32px 17px}.cover-frame{inset:17px}.cover h1{font-size:clamp(55px,14vw,82px)}
 .section{padding:76px 20px}.section:before,.section:nth-of-type(even):before{background-attachment:scroll}
 .couple-grid{grid-template-columns:1fr;max-width:430px;gap:15px}.ampersand{line-height:.9}.person{padding:28px 18px}
 .event-grid{grid-template-columns:1fr;max-width:500px}.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:230px}.gallery-tile:first-child{grid-column:span 2}
 .gift-grid{grid-template-columns:1fr;max-width:500px}.countdown div{min-width:68px;flex:1}.quick-nav{bottom:12px;width:max-content;max-width:calc(100vw - 20px);gap:0}.quick-nav a{padding:10px 11px;font-size:9px}.quick-nav a span{display:none}
 .music-toggle{right:14px;bottom:78px;width:48px;height:48px}
}
@media(max-width:390px){.quick-nav a{padding:10px 9px;letter-spacing:0}.gallery-grid{grid-auto-rows:190px}.section{padding-left:15px;padding-right:15px}}
@media(prefers-reduced-motion:reduce){.cover-content,.cover h1 span,.gold-dust,.music-toggle.is-playing{animation:none!important}.reveal{opacity:1;transform:none;filter:none;transition:none}}


/* =========================================================
   FINAL POLISH — foto asli, layout foto, dan peta sungguhan
   Menghapus panel blur pada sampul agar foto sampul terlihat utuh.
========================================================= */
.cover{
  background:
    linear-gradient(180deg,rgba(24,2,8,.24) 0%,rgba(35,3,10,.38) 48%,rgba(20,1,6,.62) 100%),
    url("images/sampul.JPG") center 42% / cover no-repeat !important;
  background-color:#210309;
}
.cover:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(22,1,6,.12),transparent 35%,transparent 65%,rgba(22,1,6,.12));
}
.cover:after{
  inset:18px !important;
  border:1px solid rgba(235,201,125,.48);
  background:none !important;
}
.cover-frame{
  z-index:1;
  inset:18px;
  outline:1px solid rgba(235,201,125,.20);
}
.cover-content{
  width:min(100%,760px);
  padding:clamp(24px,4vw,42px) clamp(18px,4vw,38px) !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.cover-content:before,.cover-content:after{display:none !important}
.cover .eyebrow,.cover .date-line,.cover .guest-label,.cover .guest-name,.cover .small-note{
  text-shadow:0 2px 12px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.9);
}
.cover h1{text-shadow:0 4px 18px rgba(0,0,0,.9),0 1px 4px #210309}
.cover .ornament{text-shadow:0 2px 12px #210309}
.cover .gold-rule{box-shadow:0 1px 12px rgba(0,0,0,.6)}
.share-builder{
  background:rgba(31,3,9,.38) !important;
  border-color:rgba(229,199,127,.38) !important;
  backdrop-filter:none !important;
}

/* Foto mempelai kembali ke bentuk arch seperti desain awal,
   tanpa crop lingkaran pada versi Signature sebelumnya. */
#mempelai .portrait{
  width:clamp(190px,22vw,245px) !important;
  height:auto !important;
  aspect-ratio:3/4 !important;
  padding:7px !important;
  border-radius:130px 130px 12px 12px !important;
  overflow:hidden;
  background:rgba(30,3,9,.42);
  box-shadow:0 0 0 7px rgba(229,199,127,.07),0 18px 48px rgba(0,0,0,.38);
}
#mempelai .portrait img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  border-radius:124px 124px 7px 7px !important;
}
#mempelai .person{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Galeri editorial: satu foto utama dan dua foto pendamping,
   seluruh foto tampil penuh proporsional tanpa kotak kosong. */
.gallery-grid{
  max-width:1040px !important;
  display:grid !important;
  grid-template-columns:1.18fr .82fr !important;
  grid-template-rows:repeat(2,minmax(210px,clamp(220px,25vw,310px))) !important;
  grid-auto-flow:row;
  gap:18px !important;
  align-items:stretch;
}
.gallery-tile{
  min-height:0 !important;
  width:100%;
  height:100%;
  border-radius:4px;
}
.gallery-tile:first-child{
  grid-column:1;
  grid-row:1 / span 2;
}
.gallery-tile:nth-child(2){
  grid-column:2;
  grid-row:1;
}
.gallery-tile:nth-child(3){
  grid-column:2;
  grid-row:2;
}
.gallery-tile img{
  object-fit:cover !important;
  object-position:center 35%;
}
.gallery-tile:after{
  background:linear-gradient(180deg,transparent 48%,rgba(15,1,5,.78)) !important;
}
.gallery-caption{left:22px;bottom:18px}
.gallery-caption p{margin-bottom:0}

/* Peta Google Maps asli, bukan ilustrasi garis dekoratif. */
.real-map-wrap{
  position:relative;
  width:100%;
  height:clamp(270px,38vw,410px);
  overflow:hidden;
  border:1px solid rgba(229,199,127,.48);
  margin:0 auto 26px;
  background:#eee;
  box-shadow:0 16px 42px rgba(0,0,0,.30);
}
.real-map{
  display:block;
  width:100%;
  height:100%;
  border:0;
  filter:none;
}
.location-card{max-width:820px !important}
.map-art{display:none !important}

@media(max-width:760px){
  .cover{
    background-position:center center !important;
    background-attachment:scroll !important;
  }
  .cover-content{
    padding:34px 12px !important;
  }
  #mempelai .portrait{
    width:min(72vw,245px) !important;
  }
  .gallery-grid{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:clamp(240px,72vw,340px) clamp(175px,52vw,230px) !important;
    gap:11px !important;
  }
  .gallery-tile:first-child{
    grid-column:1 / -1;
    grid-row:1;
  }
  .gallery-tile:nth-child(2){
    grid-column:1;
    grid-row:2;
  }
  .gallery-tile:nth-child(3){
    grid-column:2;
    grid-row:2;
  }
  .real-map-wrap{height:300px}
}
@media(max-width:390px){
  .gallery-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:repeat(3,230px) !important;
  }
  .gallery-tile:first-child,.gallery-tile:nth-child(2),.gallery-tile:nth-child(3){
    grid-column:1;
    grid-row:auto;
  }
  .real-map-wrap{height:260px}
}


/* SHADING SAMPUL BURGUNDY LEMBUT — foto tetap terlihat jelas */
#cover.cover{
  position:relative;
  isolation:isolate;
  background-image:
    linear-gradient(180deg, rgba(65, 8, 15, .22) 0%, rgba(65, 8, 15, .28) 48%, rgba(35, 4, 9, .40) 100%),
    linear-gradient(90deg, rgba(90, 12, 20, .10), rgba(70, 8, 16, .06) 50%, rgba(90, 12, 20, .10)),
    url("images/sampul.JPG") !important;
  background-position:center 42% !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-color:#2b1115 !important;
}
#cover.cover:before{
  z-index:0 !important;
  background:
    radial-gradient(ellipse at center, rgba(100, 25, 35, .04) 0%, rgba(35, 8, 13, .16) 100%),
    linear-gradient(180deg, rgba(75, 10, 18, .04), rgba(25, 4, 8, .12)) !important;
  pointer-events:none;
}
#cover .cover-content{position:relative;z-index:3}
#cover .cover-frame{z-index:2}
#cover .corner,#cover .wayang{z-index:3}


/* MUSIC: sembunyikan tombol pada sampul, tampilkan setelah Buka Undangan diklik */
body.invitation-locked .music-toggle {
  display: none !important;
}
body:not(.invitation-locked) .music-toggle {
  display: grid;
}

/* Dua rekening dalam satu kartu Wedding Gift */
.gift-account-item + .gift-account-item {
  margin-top: 18px;
}
.gift-account-item .thin-rule {
  width: 72%;
  margin: 18px auto;
}
.gift-account-item .gift-copy {
  margin-top: 8px;
}


/* Buku ucapan: carousel horizontal dan kontrol pengantin (versi demo lokal). */
.guestbook-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0 12px}
.guestbook-hint{font-size:12px;opacity:.78;text-align:center}
.guestbook-list{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 2px 18px;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(216,182,106,.65) transparent}
.guestbook-list .guestbook-item{flex:0 0 min(82%, 460px);min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;align-self:stretch}
.guestbook-list .guestbook-empty{flex:0 0 100%}
.guestbook-admin{text-align:center;margin-top:8px}
.guestbook-admin .form-feedback{font-size:13px}
.guestbook-delete{align-self:flex-start;margin-top:16px;padding:8px 12px;border:1px solid #d77b7b;border-radius:5px;background:#54111b;color:#fff0e8;cursor:pointer}
@media(max-width:600px){.guestbook-list .guestbook-item{flex-basis:88%;padding:15px}.guestbook-controls{gap:8px}}