/* =========================================================================
   Tema Boho Terracotta — Sasanti
   Terracotta & Sand. Hangat, membumi, bernuansa gurun: jendela lengkung,
   matahari terbit, pampas dan daun palem kering. Seluruh ornamen dipasang
   lewat mask-image, jadi warnanya ikut token.
   Warna hanya boleh dari blok token.
   ========================================================================= */

/* --- Font self-hosted ---------------------------------------------------- */
/* Fraunces untuk nama dan judul: serif "old style" dengan sumbu SOFT yang
   dibulatkan penuh — sudut hurufnya lunak, wataknya hangat dan sedikit retro.
   Sengaja berbeda dari kedua tema lain: bukan huruf sambung seperti Melayu
   Gold, bukan serif klasik tipis seperti Rustic Olive.
   Sumbu SOFT dikunci di 100 saat berkas diambil, jadi tidak perlu
   font-variation-settings. Sumbu opsz tetap variabel: huruf yang sama lebih
   kokoh di ukuran kecil dan lebih ramping di ukuran judul.
   Jost untuk teks isi: sans geometris yang bersih, penyeimbang Fraunces. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/fraunces-soft-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fraunces-soft-italic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jost-variable.woff2') format('woff2');
}

/* --- Design token -------------------------------------------------------- */
/* Seluruh pasangan teks-latar DIUKUR, bukan ditaksir (lihat NOTES.md):
     teks di atas dasar / permukaan          12.52 / 11.13
     teks-redup di atas dasar / permukaan     6.46 /  5.74
     judul di atas dasar / permukaan          6.07 /  5.40
     penting di atas dasar / permukaan        8.18 /  7.27
     aksen di atas dasar / permukaan          5.71 /  5.08
     teks tombol di atas terracotta           6.07
   --ornamen dan --pasir sengaja TIDAK untuk teks: terracotta muda yang
   memberi watak pada ornamen hanya 3,2:1 di atas krem, dan aksen di atas
   pasir jatuh ke 4,41:1. Keduanya milik bidang dan garis hias. */
:root {
  --dasar:        #FAF3EA;   /* krem susu */
  --permukaan:    #F3E5D3;   /* pasir muda — kartu dan panel */
  --pasir:        #EAD5BC;   /* pasir — bidang hias, bukan latar teks */
  --garis:        #E0C6A8;
  --teks:         #3B2920;   /* cokelat tanah gelap, bukan hitam */
  --teks-redup:   #6E5244;
  --judul:        #984225;   /* terracotta tua — nama, judul seksi */
  --penting:      #7A3419;   /* terracotta pekat — teks kecil menonjol */
  --aksen:        #8A5236;   /* tanah liat — ampersand, galat */
  --ornamen:      #C4704A;   /* terracotta muda — ornamen saja */
  --fokus:        #984225;

  --tombol-latar:       #984225;
  --tombol-latar-hover: #7A3419;
  --tombol-teks:        #FAF3EA;

  /* Warna bilah browser (meta theme-color). Milik tema, bukan data klien.
     Cover memakai pasir muda, isi memakai krem susu: bilah ikut berpindah
     zona saat undangan dibuka. */
  --warna-bilah-cover: #F3E5D3;
  --warna-bilah-isi:   #FAF3EA;

  /* Turunan */
  --lightbox:     rgba(43, 29, 22, .96);
  --kilau:        rgba(152, 66, 37, .08);
  --bayang:       rgba(59, 41, 32, .14);

  /* Tipografi */
  --font-nama:    'Fraunces', Georgia, 'Times New Roman', serif;
  --font-teks:    'Jost', system-ui, -apple-system, sans-serif;

  /* Skala tipe — modular 1.25 */
  --t-xs:  0.8rem;   --t-sm:  1rem;     --t-md:  1.25rem;
  --t-lg:  1.563rem; --t-xl:  1.953rem; --t-2xl: 2.441rem;

  /* Ritme spasi — kelipatan 8 */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px;
  --s-4: 40px; --s-5: 64px; --s-6: 96px;

  /* Bentuk. Lengkung dipakai di mana-mana: foto, panel mempelai, ubin
     hitung mundur. 999px membuat puncaknya setengah lingkaran penuh berapa
     pun lebar elemennya. */
  --radius:        14px;
  --radius-kecil:  6px;
  --lengkung:      999px 999px var(--radius-kecil) var(--radius-kecil);
  --lebar-isi:     34rem;
  --tinggi-pembatas: 1.9rem;
}

/* --- Dasar --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--dasar);
  color: var(--teks);
  font-family: var(--font-teks);
  font-size: var(--t-sm);          /* 16px — jangan pernah di bawah ini */
  font-weight: 400;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.cover-terkunci { overflow: hidden; height: 100vh; height: 100dvh; }
body.kunci-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-nama); font-weight: 400; margin: 0; }
p { margin: 0 0 var(--s-2); }
a { color: var(--penting); }

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: var(--radius-kecil);
}

.lewati-ke-isi {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tombol-latar); color: var(--tombol-teks);
  padding: var(--s-1) var(--s-2); font-weight: 600; text-decoration: none;
}
.lewati-ke-isi:focus { left: var(--s-2); top: var(--s-2); }

.kotak-salin {
  position: fixed; left: -9999px; top: 0;
  width: 1px; height: 1px; opacity: 0; border: 0;
}

/* --- Ringkasan tanpa JavaScript ------------------------------------------ */
#ringkasan-darurat {
  display: none;
  max-width: var(--lebar-isi);
  margin: 0 auto;
  padding: var(--s-4) var(--s-3);
  text-align: center;
}
#ringkasan-darurat h1 {
  font-size: 2.4rem; color: var(--judul); margin-bottom: var(--s-3);
}
#ringkasan-darurat strong { color: var(--penting); font-weight: 600; }

/* --- Cover --------------------------------------------------------------- */
/* Grid satu kolom, bukan flex: foto lengkung, sinar matahari di belakangnya,
   dan rangkaian pampas di kakinya menempati SEL YANG SAMA dan saling
   bertumpuk. Ketiganya lalu bergerak sebagai satu kesatuan pada ukuran layar
   apa pun, tanpa position:absolute yang harus menebak letak lengkungnya.

   --lengkung-lebar adalah satu-satunya ukuran. Sinar, pampas, dan ruang di
   atas lengkung seluruhnya turunan darinya. */
#cover {
  position: fixed; inset: 0; z-index: 50;
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: space-evenly;
  justify-items: center;
  padding: var(--s-2) var(--s-3);
  text-align: center;
  overflow: hidden;
  background-color: var(--permukaan);
  /* Menambal celah viewport dengan warna yang sama: cover fixed inset:0
     menyisir large viewport sementara tingginya dikunci dvh, dan selisihnya
     menyingkap apa pun di bawahnya. */
  box-shadow: 0 0 0 100vmax var(--permukaan);

  --lengkung-lebar: min(52vw, 13.5rem, 23vh);
  --lengkung-lebar: min(52vw, 13.5rem, 23svh);
}
#cover[hidden] { display: none; }

.cover-latar,
#cover::before,
#cover::after { grid-row: 1; grid-column: 1; align-self: start; }

/* Jendela lengkung berisi foto. Ruang di atasnya disediakan lewat margin,
   supaya sinar matahari punya tempat dan tidak terpotong tepi layar. */
.cover-latar {
  position: relative; z-index: 1;
  width: var(--lengkung-lebar);
  aspect-ratio: 3 / 4;
  margin-top: calc(var(--lengkung-lebar) * .45);
  border-radius: var(--lengkung);
  overflow: hidden;
  background: var(--pasir);
  /* Garis ganda mengikuti lengkung: cincin warna latar, lalu garis
     terracotta. box-shadow, bukan outline — outline baru mengikuti
     border-radius di Safari 16.4, bayangan mengikutinya di semua browser. */
  box-shadow: 0 0 0 7px var(--permukaan), 0 0 0 8px var(--ornamen);
}
#cover-foto { width: 100%; height: 100%; object-fit: cover; }
#cover-foto.foto-gagal { display: none; }
.cover-latar.foto-gagal { background: var(--pasir); }

/* Sinar matahari terbit di belakang puncak lengkung. Pusat sinar di berkas
   SVG berimpit dengan pusat setengah lingkaran lengkung bila lebarnya
   tepat 1,9 kali lebar lengkung. */
#cover::after {
  content: ''; z-index: 0; pointer-events: none;
  width: calc(var(--lengkung-lebar) * 1.9);
  aspect-ratio: 400 / 230;
  background-color: var(--ornamen);
  opacity: .8;
  -webkit-mask: url('ornaments/sunburst.svg') no-repeat center top / contain;
          mask: url('ornaments/sunburst.svg') no-repeat center top / contain;
}

/* Pampas dan daun palem di kaki lengkung, menutup kedua sudut bawahnya.
   Letak atasnya dihitung: ruang sinar + tinggi lengkung - tinggi rangkaian,
   lalu diturunkan sedikit supaya batangnya tumbuh dari bawah tepi foto. */
#cover::before {
  content: ''; z-index: 2; pointer-events: none;
  width: calc(var(--lengkung-lebar) * 1.6);
  aspect-ratio: 480 / 200;
  margin-top: calc(var(--lengkung-lebar) * 1.17);
  background-color: var(--judul);
  -webkit-mask: url('ornaments/pampas-spray.svg') no-repeat center / contain;
          mask: url('ornaments/pampas-spray.svg') no-repeat center / contain;
}

.cover-blok { max-width: 24rem; width: 100%; }
.cover-blok-nama { grid-row: 2; margin-top: var(--s-2); }
.cover-blok-tamu { grid-row: 3; }

.cover-pratanda {
  font-size: var(--t-xs); letter-spacing: .32em; text-transform: uppercase;
  color: var(--teks-redup); margin-bottom: var(--s-1);
}
.cover-nama {
  font-size: clamp(2.2rem, 10.5vw, 3.3rem);
  line-height: 1.05; color: var(--judul); margin: 0;
  overflow-wrap: break-word;
}
.cover-nama .amper {
  display: block; font-style: italic; font-size: .56em;
  color: var(--aksen); margin: .06em 0 0;
}
.cover-kepada {
  font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase;
  color: var(--teks-redup); margin-bottom: 2px;
}
.cover-sapaan { color: var(--teks); margin-bottom: 2px; }
.cover-tamu-nama {
  font-family: var(--font-nama); font-style: italic; font-size: var(--t-md);
  color: var(--penting); line-height: 1.35; margin-bottom: var(--s-2);
}
.cover-catatan {
  font-size: var(--t-xs); color: var(--teks-redup); margin: var(--s-1) 0 0;
}

/* Cover terangkat pelan saat undangan dibuka, foto lengkungnya sedikit
   mendekat — seperti melangkah masuk lewat pintunya. */
body.cover-selesai #cover {
  opacity: 0; pointer-events: none;
  transition: opacity .7s ease-out;
}
body.cover-selesai .cover-latar {
  transform: scale(1.04);
  transition: transform .7s ease-out;
}

/* --- Tombol -------------------------------------------------------------- */
/* Pil penuh. Tema lain bersudut; di sini semuanya membulat. */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px var(--s-4);
  font-family: var(--font-teks); font-size: .9375rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--tombol-latar); border-radius: 999px;
  background: transparent; color: var(--penting);
  cursor: pointer; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.aksi-utama {
  background: var(--tombol-latar); color: var(--tombol-teks);
  border-color: var(--tombol-latar);
}
.aksi-utama:hover:not(:disabled) { background: var(--tombol-latar-hover); }
#tombol-amplop, #muat-ucapan, .acara-peta, .acara-kalender, .rekening-salin, .kontak-tautan {
  border-color: var(--garis); color: var(--penting);
}
#tombol-amplop:hover:not(:disabled), #muat-ucapan:hover:not(:disabled),
.acara-peta:hover:not(:disabled), .acara-kalender:hover:not(:disabled), .rekening-salin:hover:not(:disabled),
.kontak-tautan:hover:not(:disabled) { background: var(--kilau); }
#muat-ucapan, .acara-peta, .acara-kalender, .rekening-salin, .kontak-tautan {
  font-size: var(--t-xs); padding: 10px var(--s-3); min-height: 44px;
}
.tombol:disabled { opacity: .55; cursor: default; }
/* display di atas mengalahkan [hidden] bawaan browser. Tanpa baris ini
   #muat-ucapan yang disembunyikan mesin tetap tampil sebagai tombol kosong. */
.tombol[hidden] { display: none; }

/* --- Seksi dan pembatas -------------------------------------------------- */
main { display: block; }

.seksi {
  max-width: var(--lebar-isi);
  margin: 0 auto;
  padding: var(--s-5) var(--s-3);
  text-align: center;
}

/* Dua kipas palem kecil saling membelakangi, dengan garis ke kedua sisi.
   Satu motif di tengah, tidak diulang mendatar seperti kedua tema lain. */
.pembatas, .pembatas-kaki {
  display: block;
  width: calc(100% - var(--s-3) * 2); max-width: 30rem;
  height: var(--tinggi-pembatas);
  margin: var(--s-2) auto;
  background-color: var(--ornamen);
  -webkit-mask: url('ornaments/palm-divider.svg') no-repeat center / contain;
          mask: url('ornaments/palm-divider.svg') no-repeat center / contain;
}
.pembatas-kaki { opacity: .6; margin-bottom: var(--s-4); }

.judul-seksi {
  font-size: clamp(1.7rem, 8vw, 2.5rem);
  color: var(--judul); line-height: 1.15;
  margin-bottom: var(--s-3);
  overflow-wrap: break-word;
}
/* Matahari terbit kecil DI ATAS tiap judul. Pseudo-element, jadi tidak ada
   elemen kosong yang tertinggal bila tema lain tidak menginginkannya. */
.judul-seksi::before {
  content: ''; display: block;
  width: 4.25rem; height: 1.6rem; margin: 0 auto var(--s-2);
  background-color: var(--ornamen);
  -webkit-mask: url('ornaments/heading-sun.svg') no-repeat center / contain;
          mask: url('ornaments/heading-sun.svg') no-repeat center / contain;
}
/* "Bismillahirrahmanirrahim" satu kata 24 huruf, dan Fraunces lebih lebar
   daripada serif tipis. Pada 8vw ia meluber di layar 320px; 6,4vw membuatnya
   muat dengan sisa. overflow-wrap tetap jadi jaring pengaman. */
.seksi-pembuka .judul-seksi { font-size: clamp(1.25rem, 6.4vw, 2.1rem); }

.subjudul {
  font-family: var(--font-teks); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--teks-redup); margin-bottom: var(--s-2);
}
.paragraf { color: var(--teks-redup); }
.salam { font-family: var(--font-nama); font-style: italic; color: var(--teks); font-size: var(--t-md); }

/* --- Layar pertama ------------------------------------------------------- */
/* Seksinya setinggi layar dikurangi pembatas beserta jaraknya, supaya
   pembatas pertama jatuh tepat di tepi bawah layar. */
.seksi-foto-pembuka {
  min-height: calc(100vh - var(--tinggi-pembatas) - var(--s-2) * 2);
  min-height: calc(100svh - var(--tinggi-pembatas) - var(--s-2) * 2);
  padding-top: var(--s-4);
  padding-bottom: var(--s-3);
  display: flex; flex-direction: column; justify-content: center;
}
.foto-pembuka, .penutup-foto {
  width: min(70%, 18rem); margin: 0 auto var(--s-4);
  aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--lengkung);
  background: var(--pasir);
  box-shadow: 0 0 0 8px var(--dasar), 0 0 0 9px var(--ornamen);
}
.foto-pembuka img, .penutup-foto img { width: 100%; height: 100%; object-fit: cover; }
.pembuka-pratanda {
  font-size: var(--t-xs); letter-spacing: .32em; text-transform: uppercase;
  color: var(--teks-redup); margin-bottom: var(--s-1);
}
.pembuka-nama {
  font-size: clamp(2.1rem, 10vw, 3.1rem); line-height: 1.1;
  color: var(--judul); margin-bottom: var(--s-3);
  overflow-wrap: break-word;
}
.pembuka-nama .amper { display: block; font-size: .5em; color: var(--aksen); font-style: italic; }
/* Tanggal di dalam pil bergaris, sejajar dengan bentuk tombol. */
.pembuka-tanggal {
  align-self: center;
  padding: 6px var(--s-3);
  border: 1px solid var(--garis); border-radius: 999px;
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--teks); margin: 0;
}

/* --- Pembuka: logo, ayat ------------------------------------------------- */
.logo-pembuka { width: min(42%, 9rem); margin: 0 auto var(--s-3); }
.logo-pembuka img { width: 100%; height: auto; }
.ayat { margin: 0 0 var(--s-3); padding: 0; }
.ayat-terjemahan {
  font-family: var(--font-nama); font-style: italic;
  font-size: 1.0625rem; color: var(--teks-redup);
  margin-bottom: var(--s-1);
}
.ayat-sumber {
  display: block; font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--penting); font-style: normal;
}

/* --- Mempelai ------------------------------------------------------------ */
/* Kedua mempelai di dalam SATU panel berpuncak lengkung — pintu besar yang
   memuat keduanya. Dimungkinkan K5: dua seksi yang dulu bersaudara tidak
   bisa diberi satu bidang bersama lewat CSS. */
.seksi-mempelai {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--permukaan);
  border-radius: var(--lengkung);
  max-width: none;
  margin: var(--s-1) max(var(--s-2), calc((100% - 40rem) / 2)) var(--s-3);
  padding: var(--s-6) var(--s-3) var(--s-4);
}
.seksi-mempelai > div + h2 { margin-top: var(--s-4); }
.seksi-mempelai .judul-seksi {
  font-size: clamp(1.5rem, 6.4vw, 2rem);
  margin-bottom: var(--s-2);
}

.mempelai-item { display: block; }
/* Potret bundar di dalam panel lengkung: dua matahari di bawah satu pintu. */
.mempelai-foto-bingkai {
  width: min(58%, 12rem); margin: var(--s-1) auto var(--s-3);
  aspect-ratio: 1; overflow: hidden;
  border-radius: 50%;
  background: var(--pasir);
  box-shadow: 0 0 0 6px var(--dasar), 0 0 0 7px var(--ornamen);
}
.mempelai-foto-bingkai img { width: 100%; height: 100%; object-fit: cover; }
.mempelai-nama {
  font-family: var(--font-nama); font-weight: 500;
  font-size: clamp(1.4rem, 5.6vw, 1.85rem);
  color: var(--judul); line-height: 1.25; margin-bottom: var(--s-1);
  overflow-wrap: break-word;
}
.mempelai-urutan, .mempelai-ortu {
  color: var(--teks-redup); font-size: var(--t-xs); margin-bottom: 4px;
}
.mempelai-ortu { color: var(--teks); font-size: var(--t-sm); }
.mempelai-ig {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; font-size: var(--t-xs); letter-spacing: .08em;
  text-decoration: none;
}
.mempelai-ig:hover { text-decoration: underline; }

/* --- Hitung mundur ------------------------------------------------------- */
/* Empat ubin berpuncak lengkung — jendela kecil berderet. */
.countdown {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-1); max-width: 24rem; margin: 0 auto;
}
.cd-blok {
  background: var(--permukaan);
  border-radius: var(--lengkung);
  padding: var(--s-4) 4px var(--s-2);
}
.cd-angka {
  display: block; font-family: var(--font-nama); font-size: var(--t-xl);
  color: var(--judul); line-height: 1;
}
.cd-label {
  display: block; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teks-redup); margin-top: 6px;
}
.cd-tiba { font-family: var(--font-nama); font-style: italic; font-size: var(--t-lg); color: var(--judul); margin: 0; }

/* --- Acara --------------------------------------------------------------- */
/* Kartu dengan garis dalam — bingkai ganda ala kertas undangan cetak.
   Bayangan inset, bukan outline, supaya garisnya mengikuti sudut membulat
   di semua browser. */
#daftar-acara { display: grid; gap: var(--s-3); }
.acara-item {
  background: var(--permukaan); border-radius: var(--radius);
  padding: var(--s-4) var(--s-3);
  box-shadow: inset 0 0 0 8px var(--permukaan), inset 0 0 0 9px var(--garis);
}
.acara-jenis {
  font-family: var(--font-nama); font-size: var(--t-lg);
  color: var(--judul); margin-bottom: var(--s-1);
}
.acara-tanggal { color: var(--teks); margin-bottom: 2px; }
.acara-jam {
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--penting); margin-bottom: var(--s-2);
}
.acara-tempat { font-weight: 600; margin-bottom: 2px; }
.acara-alamat { font-size: var(--t-xs); color: var(--teks-redup); margin-bottom: var(--s-2); }
/* Peta dan kalender berdampingan bila muat. Di ponsel keduanya bertumpuk,
   dan lebar minimum yang sama membuat tumpukannya sejajar, bukan berundak. */
.acara-peta, .acara-kalender { margin: 4px; min-width: 13rem; }

/* --- Galeri -------------------------------------------------------------- */
#galeri {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1);
}
.galeri-item { margin: 0; }
.galeri-item.lebar { grid-column: span 1; }
.galeri-item.penuh { grid-column: 1 / -1; }
.galeri-tombol {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: var(--radius); overflow: hidden;
}
.galeri-tombol img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 2 / 3; transition: transform .5s ease;
}
.galeri-item.lebar .galeri-tombol img { aspect-ratio: 4 / 3; }
/* Foto selebar penuh berpuncak lengkung, menggemakan jendela di cover. */
.galeri-item.penuh .galeri-tombol { border-radius: var(--lengkung); }
.galeri-item.penuh .galeri-tombol img { aspect-ratio: 4 / 5; }
.galeri-tombol:hover img { transform: scale(1.04); }
.foto-kosong {
  display: grid; place-items: center; background: var(--permukaan);
  border: 1px dashed var(--garis); color: var(--teks-redup);
  font-size: var(--t-xs);
}

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: var(--lightbox);
  display: grid; place-items: center;
}
.lightbox[hidden] { display: none; }
.lb-panggung { margin: 0; padding: var(--s-3); }
#lb-foto { max-width: 100%; max-height: 78vh; max-height: 78dvh; border-radius: var(--radius-kecil); }
.lb-tutup, .lb-nav {
  position: absolute; background: none; border: 0; cursor: pointer;
  color: var(--dasar); font-size: 2.2rem; line-height: 1;
  min-width: 48px; min-height: 48px;
}
.lb-tutup { top: var(--s-2); right: var(--s-2); }
.lb-prev { left: var(--s-1); top: 50%; transform: translateY(-50%); }
.lb-next { right: var(--s-1); top: 50%; transform: translateY(-50%); }

/* --- RSVP ---------------------------------------------------------------- */
.rsvp-formulir {
  text-align: left;
  background: var(--permukaan); border-radius: var(--radius);
  padding: var(--s-4) var(--s-3);
  box-shadow: inset 0 0 0 8px var(--permukaan), inset 0 0 0 9px var(--garis);
}
.baris { margin-bottom: var(--s-2); }
.baris label, .baris legend {
  display: block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--teks-redup); margin-bottom: 6px;
}
fieldset.baris { border: 0; margin: 0 0 var(--s-2); padding: 0; }
input[type="text"], input[type="number"], textarea {
  width: 100%; font: inherit; color: var(--teks);
  background: var(--dasar);
  border: 1px solid var(--garis); border-radius: 10px;
  padding: 10px var(--s-2); min-height: 44px;
}
textarea { resize: vertical; }
.pilihan { display: grid; gap: 6px; }
.pilihan label {
  display: flex; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: var(--t-sm); color: var(--teks); margin: 0; min-height: 44px;
}
.pilihan input { accent-color: var(--tombol-latar); }
.penghitung { font-size: var(--t-xs); color: var(--teks-redup); text-align: right; margin: 4px 0 0; }
.galat-field { font-size: var(--t-xs); color: var(--aksen); margin: 4px 0 0; }
.pesan-form { font-size: var(--t-xs); color: var(--teks-redup); margin-top: var(--s-2); }
.pesan-form.galat { color: var(--penting); }
.pesan-form.sukses { color: var(--teks); }
#kirim-rsvp { width: 100%; }
.terima-kasih { text-align: center; padding: var(--s-3) 0; }

.ucapan-wadah { margin-top: var(--s-4); text-align: left; }
.daftar-ucapan { list-style: none; margin: 0 0 var(--s-2); padding: 0; }
.ucapan-item {
  border-left: 2px solid var(--ornamen);
  padding: 2px 0 2px var(--s-2); margin-bottom: var(--s-3);
}
.ucapan-nama { font-weight: 600; color: var(--penting); margin-bottom: 2px; }
.ucapan-teks { color: var(--teks); margin-bottom: 2px; }
.ucapan-waktu { font-size: var(--t-xs); color: var(--teks-redup); margin: 0; }
.kosong { color: var(--teks-redup); font-size: var(--t-xs); }

/* --- Amplop -------------------------------------------------------------- */
#panel-amplop { margin-top: var(--s-3); text-align: left; }
#panel-amplop[hidden] { display: none; }
/* Dianimasikan hanya saat dibuka; tanpa blur, tanpa opacity untuk menyembunyikan. */
#panel-amplop.membuka { animation: buka-panel .35s ease-out; }
@keyframes buka-panel {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.rekening-item {
  background: var(--permukaan); border-radius: var(--radius);
  padding: var(--s-3);
  margin-bottom: var(--s-2);
  box-shadow: inset 0 0 0 6px var(--permukaan), inset 0 0 0 7px var(--garis);
}
.rekening-bank {
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--teks-redup); margin-bottom: 2px;
}
.rekening-nomor {
  font-family: var(--font-teks); font-size: var(--t-md); font-weight: 600;
  letter-spacing: .06em; color: var(--penting); margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.rekening-atas-nama { font-size: var(--t-xs); color: var(--teks-redup); margin-bottom: var(--s-1); }
.kado-blok { border-top: 1px solid var(--garis); padding-top: var(--s-2); }
.kado-judul {
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--teks-redup); margin-bottom: 4px;
}

/* --- Penutup dan kaki ---------------------------------------------------- */
.logo-wadah { width: min(36%, 7rem); margin: 0 auto var(--s-2); }
.logo-wadah[hidden] { display: none; }
.penutup-nama {
  font-family: var(--font-nama); font-size: var(--t-xl);
  color: var(--judul); line-height: 1.2; margin: var(--s-2) 0 0;
  overflow-wrap: break-word;
}
.penutup-nama .amper { color: var(--aksen); font-style: italic; }

.kaki {
  max-width: var(--lebar-isi); margin: 0 auto;
  padding: var(--s-4) var(--s-3) var(--s-2);
  text-align: center;
}
.catatan-personal { font-size: var(--t-xs); color: var(--teks-redup); text-align: justify; }
.blok-kontak { margin: var(--s-3) 0; }
.blok-kontak[hidden] { display: none; }
.kontak-pengantar { font-size: var(--t-xs); color: var(--teks-redup); margin-bottom: var(--s-1); }
.kaki-tanda {
  font-family: var(--font-nama); font-size: var(--t-sm);
  color: var(--teks-redup); font-style: italic; margin: var(--s-3) 0 0;
}

/* Kredit Sasanti. Ditahan tetap kecil dan tenang: ia penanda pembuat, bukan
   bagian dari undangan. Warnanya --teks-redup, yang sudah diukur di blok
   token di atas, jadi ia tidak memperkenalkan pasangan warna baru. */
.kredit { margin: var(--s-2) 0 0; font-size: var(--t-xs); }
.kredit a { color: var(--teks-redup); text-decoration: none; border-bottom: 1px solid var(--garis); }
.kredit a:hover { color: var(--penting); }

/* --- Kontrol musik ------------------------------------------------------- */
.tombol-musik {
  position: fixed; right: var(--s-2); bottom: var(--s-2); z-index: 60;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: var(--tombol-latar);
  color: var(--tombol-teks); cursor: pointer;
  box-shadow: 0 0 0 4px var(--dasar), 0 3px 12px var(--bayang);
}
.tombol-musik[hidden] { display: none; }
.tombol-musik svg { width: 20px; height: 20px; }
.tombol-musik .ikon-jeda { display: none; }
.tombol-musik.berputar .ikon-main { display: none; }
.tombol-musik.berputar .ikon-jeda { display: block; }

/* =========================================================================
   Gerak — satu kali saja, dan patuh pada preferensi pengguna
   ========================================================================= */
/* Mesin hanya menandai keadaan dengan .reveal; watak geraknya dipilih di sini.
   Nilai awal transform lewat custom property, bukan aturan transform yang
   saling menimpa — selektor ber-id akan menang atas .reveal.tampil dan
   elemennya tidak pernah sampai ke posisi akhir. */
.ada-js .reveal { opacity: 0; transform: var(--reveal-awal, translateY(18px)); }

/* Watak Boho Terracotta: foto lengkung terbuka dari bawah ke atas seperti
   tirai yang dinaikkan. Batas klip di posisi akhir dilebarkan 24px ke luar
   kotak — inset(0) akan ikut memotong garis ganda yang digambar bayangan. */
.ada-js .foto-pembuka.reveal,
.ada-js .penutup-foto.reveal { clip-path: inset(35% -24px -24px -24px); }
.ada-js .foto-pembuka.reveal.tampil,
.ada-js .penutup-foto.reveal.tampil {
  clip-path: inset(-24px -24px -24px -24px);
  transition: opacity .9s ease-out, clip-path 1.2s cubic-bezier(.22, .68, .28, 1);
}
.ada-js .seksi-mempelai { --reveal-awal: translateY(28px); }

.ada-js .reveal.tampil {
  opacity: 1; transform: none;
  transition: opacity .8s ease-out,
              transform .8s cubic-bezier(.22, .68, .28, 1);
}

/* =========================================================================
   Layar lebih lebar
   ========================================================================= */
@media (min-width: 40rem) {
  :root { --lebar-isi: 44rem; }

  /* Mempelai berdampingan di bawah satu lengkung lebar. */
  .seksi-mempelai { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
  .seksi-mempelai > div + h2 { margin-top: 0; }
  .seksi-mempelai #j-mempelai-1 { grid-column: 1; grid-row: 1; }
  .seksi-mempelai #kartu-mempelai-1 { grid-column: 1; grid-row: 2; }
  .seksi-mempelai #j-mempelai-2 { grid-column: 2; grid-row: 1; }
  .seksi-mempelai #kartu-mempelai-2 { grid-column: 2; grid-row: 2; }

  #daftar-acara { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  #galeri { grid-template-columns: repeat(3, 1fr); }
  .galeri-item.lebar { grid-column: span 2; }
}

/* =========================================================================
   Layar sangat pendek
   ========================================================================= */
@media (max-height: 640px) {
  #cover {
    --lengkung-lebar: min(40vw, 9.5rem, 19vh);
    --lengkung-lebar: min(40vw, 9.5rem, 19svh);
  }
  .cover-nama { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .cover-tamu-nama { margin-bottom: var(--s-1); }
  .seksi-foto-pembuka { padding-top: var(--s-2); padding-bottom: var(--s-2); }
  .foto-pembuka { width: min(56%, 13rem); margin-bottom: var(--s-3); }
}

/* Blok mendatar sengaja ditaruh SESUDAH blok layar pendek. Di 800x360
   keduanya cocok sekaligus, dan yang belakangan menang (NOTES.md). */
/* =========================================================================
   Orientasi mendatar
   =========================================================================
   Dimiringkan, cover satu kolom tidak muat: tombol "Buka Undangan" jatuh di
   bawah lipatan. Karena itu cover jadi DUA kolom — jendela lengkung di kiri,
   nama dan tombol di kanan — dan cover-nya sendiri bisa digulir sebagai
   jaring pengaman terakhir. */
@media (orientation: landscape) and (max-height: 480px) {
  #cover {
    grid-template-columns: auto minmax(0, 24rem);
    grid-template-rows: 1fr auto auto 1fr;
    align-content: center; justify-content: center;
    column-gap: var(--s-5);
    padding: var(--s-1) var(--s-4);
    overflow-y: auto;
    --lengkung-lebar: min(21vw, 10rem, 44vh);
    --lengkung-lebar: min(21vw, 10rem, 44svh);
  }
  .cover-latar,
  #cover::before,
  #cover::after { grid-column: 1; grid-row: 1 / -1; }
  .cover-blok-nama { grid-column: 2; grid-row: 2; margin: 0 0 var(--s-2); }
  .cover-blok-tamu { grid-column: 2; grid-row: 3; }
  .cover-blok { max-width: 24rem; }

  /* Nama jadi SATU baris: "&" yang berdiri sendiri menghabiskan dua baris
     penuh — paling mahal di ruang yang paling sempit. */
  .cover-nama { font-size: clamp(1.6rem, 4.6vw, 2.2rem); line-height: 1.2; }
  .cover-nama .amper { display: inline; font-size: .6em; margin: 0 .2em; }
  .cover-pratanda { margin-bottom: 4px; }
  .cover-tamu-nama { font-size: var(--t-sm); margin-bottom: var(--s-1); }
  .cover-catatan { margin-top: 4px; }
}

/* =========================================================================
   Gerak diredam
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ada-js .reveal { opacity: 1; transform: none; transition-delay: 0s !important; }
  .ada-js .foto-pembuka.reveal,
  .ada-js .penutup-foto.reveal { clip-path: none; }
  .galeri-tombol:hover img { transform: none; }
}