/* =========================================================================
   Undangan Pernikahan Digital — Shara & Ardi
   Arah desain mengikuti undangan cetak: suntiang & tanjak di puncak cover,
   pita pucuk rebung di kaki halaman. Warna hanya boleh dari blok token.
   ========================================================================= */

/* --- Font self-hosted ---------------------------------------------------- */
/* Work Sans mengikuti situs referensi yang dikirim keluarga. Parisienne dipilih
   Tangerine dipilih keluarga. Huruf-hurufnya jauh lebih tipis dan lapang
   daripada font sambung sebelumnya, jadi setiap ukuran di bawah ini dinaikkan
   agar tetap seimbang dengan teks di sekitarnya.
   Amiri dan Plus Jakarta Sans dibuang: tidak ada lagi yang memakainya sejak
   teks Arab dihapus. */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/work-sans-variable.woff2') format('woff2');
}
/* Dua bobot: Tangerine sangat tipis pada bobot 400, dan di ukuran judul ia
   nyaris hilang di atas krem. Bobot 700 dipakai untuk judul seksi dan label,
   bobot 400 untuk nama besar yang memang punya ruang. */
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/tangerine-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/tangerine-700.woff2') format('woff2');
}

/* --- Design token -------------------------------------------------------- */
/* Dua zona warna, bukan dua tema.

   Isi halaman memakai palet krem yang mendekati undangan cetak. Cover memakai
   palet gelap — versi itu yang disetujui keluarga karena fotonya tampil paling
   jelas di atas gelap. Karena custom property mewarisi ke bawah, cukup
   deklarasikan ulang tokennya pada #cover; seluruh aturan di bawah tidak perlu
   tahu apa pun soal ini.

   Nama token semantik, bukan nama warna, supaya tetap masuk akal di dua zona.

   Ambang kontras: 4.5:1 untuk teks biasa, 3.0:1 untuk teks >=24px dan cincin
   fokus. --judul HANYA untuk teks >=24px; --penting untuk teks 16-20px.
   --emas dipakai untuk ornamen dekoratif saja (aria-hidden, bukan teks), jadi
   boleh selembut cetakan; cincin fokus punya --fokus sendiri yang lebih pekat.
   tools/uji.mjs memverifikasi kedua zona. */
:root {
  /* ==== Isi halaman: krem, mengikuti undangan cetak ==== */
  --dasar:        #FDF8E7;   /* krem kertas */
  --permukaan:    #FFFCF2;   /* permukaan kartu */
  --garis:        #E4D5AC;
  --emas:         #C9A03C;   /* ornamen — dekoratif, meniru emas cetakan */
  --emas-tua:     #A67C2E;   /* garis tipis ornamen */
  --fokus:        #8A6520;   /* cincin fokus, 4.99:1 */
  --teks:         #3A352C;   /* abu hangat, seperti teks cetakan */
  --teks-redup:   #645C4C;
  --judul:        #A67C2E;   /* judul & nama mempelai, teks besar, 3.56:1 */
  --penting:      #7E5B1C;   /* nomor rekening, tautan, teks kecil menonjol */
  --aksen:        #8C2A1A;

  /* Panel isi: krem 88% di atas pola bunga. Angka itu bukan selera — pada
     kepekatan ini, judul emas masih 3.33:1 bahkan di atas piksel pola yang
     paling gelap, sedikit di atas ambang 3.0. Lebih tipis dari ini judulnya
     mulai gagal terbaca. */
  --panel:        rgba(253, 248, 231, .88);

  --tombol-latar:       #3A352C;
  --tombol-latar-hover: #2A2620;
  --tombol-teks:        #FDF8E7;

  /* Turunan */
  --tirai:        rgba(253, 248, 231, .68);
  --tirai-pekat:  rgba(253, 248, 231, .95);
  --lightbox:     rgba(35, 27, 12, .96);   /* foto paling jelas di latar gelap */
  --kilau:        rgba(201, 160, 60, .12);
  --kilau-tipis:  rgba(201, 160, 60, .06);
  --bayang:       rgba(58, 53, 44, .18);
  --putih-samar:  rgba(58, 53, 44, .04);

  /* Tipografi */
  --font-nama:    'Tangerine', 'Segoe Script', cursive;   /* nama & judul seksi */
  --font-teks:    'Work Sans', 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;

  --radius: 4px;
  --lebar-isi: 34rem;
}

/* ==== Cover: gelap hangat, emas dominan ====
   Zona ini disetujui apa adanya, jadi nilainya tidak diubah. */
#cover {
  --dasar:        #1A1410;
  --permukaan:    #2A211A;
  --garis:        #3D3025;
  --emas:         #E3B23C;
  --emas-tua:     #A67C2E;
  --fokus:        #E3B23C;
  --teks:         #F5EEDF;
  --teks-redup:   #CDBFA6;
  --judul:        #E3B23C;
  --penting:      #E3B23C;
  --aksen:        #BE5039;   /* versi krem terlalu gelap di atas permukaan ini */

  --tombol-latar:       #E3B23C;
  --tombol-latar-hover: #C89A2E;
  --tombol-teks:        #1A1410;

  --tirai:        rgba(26, 20, 16, .70);
  --tirai-pekat:  rgba(26, 20, 16, .95);
  --kilau:        rgba(227, 178, 60, .14);
  --kilau-tipis:  rgba(227, 178, 60, .07);
  --bayang:       rgba(0, 0, 0, .40);
}

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

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

body {
  margin: 0;
  /* Pola bunga dari keluarga. background-attachment dibiarkan scroll:
     'fixed' membuat iOS Safari tersendat saat menggulir. */
  background-color: var(--dasar);
  background-image: url('img/latar.webp');
  background-repeat: repeat;
  background-size: 340px auto;
  color: var(--teks);
  font-family: var(--font-teks);
  font-size: var(--t-sm);          /* 16px — jangan pernah di bawah ini */
  line-height: 1.7;
  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-teks); font-weight: 500; 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);
}

.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;
  background: var(--panel);
  padding: var(--s-4) var(--s-3);
  text-align: center;
}
#ringkasan-darurat h1 {
  font-family: var(--font-nama); font-size: 2.6rem; color: var(--judul);
  letter-spacing: .08em; margin-bottom: var(--s-3);
}
#ringkasan-darurat strong { color: var(--penting); font-weight: 600; }

/* =========================================================================
   COVER
   ========================================================================= */
#cover {
  position: fixed; inset: 0; z-index: 50;
  background-image: none;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  /* Padding atas jauh lebih besar dari bawah. Dengan isi yang ditengahkan,
     selisih itu menggeser blok teks turun — sekaligus melebarkan jarak ke
     ornamen di atasnya dan memangkas ruang kosong di bawahnya. Keduanya
     keluhan yang sama, dan satu angka ini menyelesaikan dua-duanya. */
  padding: 18vh var(--s-3) var(--s-4);
  padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
  text-align: center;
  overflow: hidden;
  background-color: var(--dasar);
}

.cover-latar { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cover-latar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--tirai) 0%, var(--tirai) 45%, var(--tirai-pekat) 100%);
}
/* Tanpa pembesaran sama sekali. Versi sebelumnya membuat gambar 134% lebih
   tinggi supaya wajah turun, tapi efek sampingnya foto terpotong 47% di sisi
   kiri-kanan dan terasa seperti di-zoom di ponsel. Sekarang wajah dibuat
   terlihat dengan menggeser blok teksnya ke bawah, bukan dengan memperbesar
   fotonya. */
#cover-foto {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
/* Saat foto belum tersedia, latar tetap layak pandang, bukan ikon rusak. */
#cover-foto.foto-gagal { display: none; }
.cover-latar.foto-gagal {
  background:
    radial-gradient(circle at 50% 30%, var(--kilau), transparent 60%),
    linear-gradient(160deg, var(--permukaan) 0%, var(--dasar) 70%);
}

/* Suntiang + tanjak kembali ke cover, di atas tulisan "The Wedding of".
   Ukurannya dikecilkan dan jaraknya ke tulisan di bawahnya dirapatkan atas
   permintaan keluarga. */
.orn-kepala {
  position: absolute; top: calc(4.5vh + 8px); left: 50%;
  transform: translateX(-50%);
  width: min(34vw, 6.8rem);
  pointer-events: none;
}
.orn-kepala img { width: 100%; height: auto; }

.cover-isi { max-width: 26rem; }

.cover-pratanda {
  font-size: var(--t-xs); letter-spacing: .28em; text-transform: uppercase;
  color: var(--teks-redup); margin-bottom: var(--s-2);
}
.cover-nama {
  font-family: var(--font-nama);
  font-size: 4.6rem; line-height: 1.05; letter-spacing: .02em;
  color: var(--judul); margin-bottom: 0;
}
.cover-nama .amper {
  display: block; font-size: 2.6rem; line-height: 1;
  color: var(--emas-tua); margin: .1em 0;
}
.cover-tamu { margin-bottom: var(--s-2); margin-top: var(--s-2); }
.cover-kepada { font-size: var(--t-xs); color: var(--teks-redup); margin-bottom: 2px; }
.cover-sapaan {
  font-size: var(--t-xs); letter-spacing: .06em;
  color: var(--teks-redup); margin-bottom: 6px;
}
.cover-tamu-nama {
  font-size: var(--t-md); font-weight: 500;
  color: var(--teks); margin: 0;
  overflow-wrap: anywhere;
}

.cover-catatan {
  font-size: var(--t-xs); color: var(--teks-redup);
  margin: var(--s-1) 0 0;
}

/* Cover mengangkat dan sedikit membesar saat keluar, seperti tirai dibuka. */
body.cover-selesai #cover {
  opacity: 0; transform: translateY(-40px) scale(1.06);
  transition: opacity .8s ease-out, transform .8s ease-out;
  pointer-events: none;
}

/* Isi undangan masuk perlahan setelah cover pergi. */
@keyframes isi-masuk {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
body.cover-selesai #utama { animation: isi-masuk .9s .15s ease-out both; }

/* Sempat ada lapisan ::before untuk memudarkan pola bunga saat undangan
   dibuka. Dibuang: lapisan itu justru menutupi polanya, dan versi yang
   benar mengharuskan latar jadi position:fixed — yang membuat iOS Safari
   tersendat saat menggulir. Transisi cover dan isi sudah cukup. */

/* =========================================================================
   Tombol
   ========================================================================= */
.tombol {
  font-family: var(--font-teks); font-size: var(--t-sm); font-weight: 600;
  min-height: 44px; padding: 12px var(--s-3);
  border-radius: var(--radius); cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.tombol-utama {
  background: var(--tombol-latar); color: var(--tombol-teks);
  border: 1px solid var(--tombol-latar);
  letter-spacing: .06em;
}
.tombol-utama:hover:not(:disabled) {
  background: var(--tombol-latar-hover); border-color: var(--tombol-latar-hover);
}
.tombol-garis {
  background: transparent; color: var(--penting);
  border: 1px solid var(--emas-tua);
}
.tombol-garis:hover:not(:disabled) { background: var(--kilau); }
.tombol.kecil { font-size: var(--t-xs); padding: 10px var(--s-2); }
.tombol:disabled { opacity: .6; cursor: default; }

/* =========================================================================
   Kerangka isi
   ========================================================================= */
/* Seluruh isi duduk di atas panel krem, dengan pola bunga terlihat di kedua
   tepinya — cara yang sama dipakai situs referensi. Tanpa panel ini, teks emas
   tidak lolos ambang kontras di atas pola. */
main {
  display: block;
  width: calc(100% - 3rem);
  max-width: 44rem;
  margin: 0 auto;
  background: var(--panel);
  box-shadow: 0 0 20px var(--bayang);
}

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

.judul-seksi {
  /* Tegak bersambung, sama dengan font nama mempelai — permintaan keluarga
     untuk setiap judul seksi. Huruf sambung butuh ukuran lebih besar agar
     terbaca, dan tidak boleh dikapitalkan: bentuk sambungnya rusak. */
  font-family: var(--font-nama);
  font-size: clamp(2.1rem, 8.4vw, 2.8rem);
  color: var(--judul);
  letter-spacing: 0; text-transform: none;
  font-weight: 700; line-height: 1.2; margin-bottom: var(--s-3);
}
.judul-kecil {
  font-family: var(--font-nama); font-weight: 700;
  font-size: 2.1rem; color: var(--judul);
  letter-spacing: 0; margin-bottom: var(--s-2);
}

/* Pembatas antar seksi. Diletakkan di luar .seksi supaya membentang penuh
   dari tepi ke tepi panel — di dalam seksi ia terpotong padding kiri-kanan dan
   terlihat seperti terputus. Petak dan cara mengulangnya sama persis dengan
   pita di kaki halaman, jadi keduanya terasa satu keluarga. */
.pita-seksi {
  display: block; width: 100%; height: 2.4rem;
  background: url('img/orn-pita.webp') repeat-x center bottom / auto 100%;
  opacity: .9;
  margin: var(--s-3) 0;
}


.paragraf { color: var(--teks-redup); font-weight: 350; }
.salam { color: var(--teks); font-size: 0.875rem; font-weight: 350; }

/* --- Foto & logo pembuka ------------------------------------------------- */
/* Foto pembuka berbingkai oval bergaris emas, mengikuti contoh yang dikirim
   keluarga — bukan kotak. Cincin emasnya dibuat dari border pada wadah plus
   sedikit padding, jadi ada jarak tipis antara garis dan fotonya. Bentuknya
   sama dengan bingkai foto mempelai supaya seluruh halaman konsisten. */
.seksi-foto-pembuka { padding-top: var(--s-3); padding-bottom: var(--s-4); }
.foto-pembuka {
  width: min(74%, 19rem); margin: 0 auto;
  aspect-ratio: 3 / 4;
  padding: 6px;
  border: 1px solid var(--emas);
  border-radius: 50%;
}
.foto-pembuka img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
}

/* --- Logo pembuka -------------------------------------------------------- */
/* Tanpa aspect-ratio paksa: logonya nyaris persegi dan akan terpotong buruk
   kalau dijejalkan ke bingkai tegak. */
.seksi-pembuka { padding-top: var(--s-3); }
.logo-pembuka { margin-bottom: var(--s-3); }
.logo-pembuka img { width: min(48%, 10.5rem); height: auto; margin: 0 auto; }

/* Nama di bawah foto pembuka, sejajar satu baris. */
.pembuka-pratanda {
  font-size: var(--t-xs); letter-spacing: .28em; text-transform: uppercase;
  color: var(--teks-redup); margin: var(--s-4) 0 var(--s-2);
}
.pembuka-nama {
  font-family: var(--font-nama);
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  line-height: 1.15; color: var(--judul); margin: 0 0 var(--s-2);
}
.pembuka-nama .amper { color: var(--emas-tua); margin: 0 .2em; }
.pembuka-tanggal {
  font-size: var(--t-sm); letter-spacing: .14em;
  color: var(--teks); margin: var(--s-2) 0 0;
}

/* --- Pembuka ------------------------------------------------------------- */
/* Bismillah dikecilkan atas permintaan keluarga: dari --t-lg (25px) ke --t-md
   (20px). Karena tidak lagi tergolong teks besar, warnanya turun ke --penting
   yang memenuhi ambang 4.5:1. */
/* Bismillah tetap huruf biasa dan kecil, tidak ikut tegak bersambung.
   Kata ini panjang dan bukan nama; dalam huruf sambung ia jadi sangat lebar
   dan justru terasa besar lagi — persis yang diminta keluarga untuk dihindari. */
.seksi-pembuka .judul-seksi {
  font-family: var(--font-teks);
  font-size: 0.8125rem;
  color: var(--penting);
  letter-spacing: .16em;
  font-weight: 400;
  text-transform: uppercase;
}

.ayat { margin: 0 0 var(--s-4); padding: 0; }
/* Terjemahan dikecilkan lagi atas permintaan keluarga: 16px -> 15px.
   Ini di bawah lantai 16px yang diminta PRD demi tamu berusia lanjut, jadi
   sengaja berhenti di sini dan tidak diturunkan lagi. */
.ayat-terjemahan {
  color: var(--teks); font-style: italic;
  font-size: 0.9375rem; line-height: 1.75;
}
.ayat-sumber {
  display: block; font-style: normal; font-size: var(--t-xs);
  letter-spacing: .16em; color: var(--teks-redup);
}

/* --- Mempelai ------------------------------------------------------------ */
.mempelai-tunggal { display: block; }

.mempelai-kartu { display: block; }
/* Oval, bukan persegi — permintaan keluarga. Rasio 3:4 dengan wajah di
   sepertiga atas, karena bagian bawah oval terpotong lengkung. */
.mempelai-foto-bingkai {
  width: 100%; max-width: 15rem; margin: 0 auto var(--s-3);
  aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--garis);
  background: linear-gradient(160deg, var(--permukaan) 0%, var(--dasar) 100%);
}
.mempelai-foto-bingkai img { width: 100%; height: 100%; object-fit: cover; }
/* Nama harus muat satu baris. clamp() menskalakan dengan lebar layar supaya
   "Shara Novia Annas, S.Tr.Par." tetap sebaris di layar 360px maupun tablet,
   tanpa memaksa nowrap yang bisa meluber keluar panel. */
.mempelai-nama {
  font-family: var(--font-nama); font-weight: 700;
  font-size: clamp(1.5rem, 6.2vw, 2.1rem);
  color: var(--judul); letter-spacing: .01em;
  margin-bottom: var(--s-1); line-height: 1.35;
  white-space: nowrap;
}
.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 ------------------------------------------------------- */
.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: 1px solid var(--garis);
  border-radius: var(--radius); padding: var(--s-2) 4px;
}
.cd-angka {
  display: block; font-size: var(--t-lg); font-weight: 600;
  color: var(--judul); line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.cd-label {
  display: block; font-size: var(--t-xs); letter-spacing: .1em;
  color: var(--teks-redup); text-transform: uppercase;
}
.cd-tiba {
  font-family: var(--font-nama); font-weight: 700; font-size: 2.6rem;
  color: var(--penting); letter-spacing: .08em;
}

/* --- Acara --------------------------------------------------------------- */
.acara-grid { display: grid; gap: var(--s-3); }

.kartu {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: var(--s-3);
  text-align: center;
}
.acara-jenis {
  font-size: var(--t-md); font-weight: 600;
  color: var(--penting); letter-spacing: .1em; margin-bottom: var(--s-2);
}
.acara-tanggal { font-weight: 600; margin-bottom: 2px; }
.acara-jam { color: var(--teks); margin-bottom: var(--s-2); }
.acara-tempat { font-weight: 600; margin-bottom: 2px; }
.acara-alamat { color: var(--teks-redup); font-size: var(--t-xs); margin-bottom: var(--s-2); }
.acara-peta { display: inline-block; text-decoration: none; }

/* --- Galeri -------------------------------------------------------------- */
/* Susunan mosaik seperti contoh yang dikirim keluarga: tiap baris berisi satu
   foto sempit dan satu foto lebar, dan sisi yang lebar berganti tiap baris.

   Tingginya sengaja dibuat sama persis: dengan tiga kolom, foto sempit selebar
   1/3 pada rasio 2:3 setinggi 0.5x lebar grid, dan foto lebar selebar 2/3 pada
   rasio 4:3 juga setinggi 0.5x. Jadi barisnya rata tanpa perlu masonry. */
.galeri-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1);
}
.galeri-item { margin: 0; grid-column: span 1; }
.galeri-item.lebar { grid-column: span 2; }
.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;
  line-height: 0;
}
.galeri-tombol img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, var(--permukaan) 0%, var(--dasar) 100%);
  transition: transform .4s ease;
}
.galeri-item.lebar .galeri-tombol img { aspect-ratio: 4 / 3; }
.galeri-item.penuh .galeri-tombol img { aspect-ratio: 3 / 2; }
.galeri-tombol:hover img { transform: scale(1.04); }
.galeri-tombol:hover img { transform: scale(1.04); }

/* Penanda foto yang belum diisi — tampil rapi, bukan ikon rusak. */
.foto-kosong {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(circle at 50% 40%, var(--kilau-tipis), transparent 65%),
    linear-gradient(160deg, var(--permukaan) 0%, var(--dasar) 100%);
  border: 1px dashed var(--garis);
  border-radius: var(--radius);
  color: var(--teks-redup); font-size: var(--t-xs);
  letter-spacing: .1em; text-align: center; padding: var(--s-1);
}
.mempelai-foto-bingkai .foto-kosong,
.penutup-foto .foto-kosong { aspect-ratio: auto; width: 100%; height: 100%; border: 0; }

/* --- 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 .3s ease-out;
}
@keyframes buka-panel {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.rekening-kartu {
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: var(--s-3);
  margin-bottom: var(--s-2); text-align: center;
}
.rekening-bank {
  font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--teks-redup); margin-bottom: 4px;
}
.rekening-nomor {
  font-size: var(--t-md); font-weight: 600;
  color: var(--penting); letter-spacing: .12em;
  font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.rekening-atas-nama { font-size: var(--t-xs); color: var(--teks); margin-bottom: var(--s-2); }
.kado-blok {
  border: 1px dashed var(--garis); border-radius: var(--radius);
  padding: var(--s-3); text-align: center;
}
.kado-judul { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--teks-redup); margin-bottom: 4px; }

/* --- Formulir ------------------------------------------------------------ */
.kartu-form { text-align: left; }
.baris { margin-bottom: var(--s-3); border: 0; padding: 0; }
.baris > label, .baris > legend {
  display: block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--teks-redup); margin-bottom: var(--s-1); padding: 0;
}
input[type="text"], input[type="number"], textarea {
  width: 100%; min-height: 44px;
  padding: 10px var(--s-2);
  font-family: var(--font-teks); font-size: var(--t-sm);
  color: var(--teks);
  background: var(--dasar);
  border: 1px solid var(--garis); border-radius: var(--radius);
}
textarea { resize: vertical; line-height: 1.6; }
input:focus, textarea:focus { border-color: var(--emas-tua); }

.pilihan { display: grid; gap: var(--s-1); }
.pilihan label {
  display: flex; align-items: center; gap: var(--s-1);
  min-height: 44px; padding: 0 var(--s-2);
  border: 1px solid var(--garis); border-radius: var(--radius);
  cursor: pointer;
}
.pilihan input { accent-color: var(--emas); width: 18px; height: 18px; }
.pilihan label:has(input:checked) { border-color: var(--emas); background: var(--kilau-tipis); }

.penghitung {
  font-size: var(--t-xs); color: var(--teks-redup);
  text-align: right; margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
}
.galat-field { font-size: var(--t-xs); color: var(--penting); margin: 4px 0 0; }
.pesan-form {
  margin: var(--s-2) 0 0; padding: var(--s-2);
  border-radius: var(--radius); font-size: var(--t-xs); line-height: 1.6;
}
.pesan-form.galat { border: 1px solid var(--aksen); background: var(--putih-samar); color: var(--teks); }
.pesan-form.sukses { border: 1px solid var(--emas-tua); color: var(--teks); }
#kirim-rsvp { width: 100%; }

.terima-kasih { text-align: center; padding: var(--s-2) 0; }
.terima-kasih .judul-kecil { color: var(--penting); }

/* --- Daftar ucapan ------------------------------------------------------- */
.ucapan-wadah { margin-top: var(--s-4); }
.daftar-ucapan { list-style: none; margin: 0 0 var(--s-2); padding: 0; text-align: left; }
.ucapan-item {
  border-bottom: 1px solid var(--garis);
  padding: var(--s-2) 0;
}
.ucapan-nama { font-weight: 600; color: var(--penting); font-size: var(--t-sm); margin-bottom: 2px; }
.ucapan-waktu { font-size: var(--t-xs); color: var(--teks-redup); margin-bottom: 4px; }
.ucapan-teks { color: var(--teks); margin: 0; overflow-wrap: anywhere; }
.kosong { color: var(--teks-redup); font-size: var(--t-xs); }

/* --- Penutup ------------------------------------------------------------- */
.penutup-foto {
  width: 100%; max-width: 20rem; margin: 0 auto var(--s-3);
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--garis);
}
.penutup-foto img { width: 100%; height: 100%; object-fit: cover; }
.penutup-nama {
  font-family: var(--font-nama); font-size: 3.6rem;
  color: var(--judul); letter-spacing: .02em; margin-top: var(--s-3);
  line-height: 1.3;
}
.penutup-nama .amper { color: var(--emas-tua); margin: 0 var(--s-1); }

/* Logo monogram. Ukurannya ditahan supaya tidak bersaing dengan nama mempelai. */
.logo-wadah { margin: 0 auto var(--s-4); }
.logo-wadah[hidden] { display: none; }
.logo-wadah img {
  width: min(60%, 11rem); height: auto; margin: 0 auto;
  /* Latar putihnya sudah benar-benar dibuang saat konversi, jadi tidak perlu
     mix-blend-mode — trik itu tidak jalan konsisten di semua browser. */
}

/* Pita pucuk rebung di kaki halaman, dari aset yang sama.
   Petaknya berulang mulus, jadi cukup diulang lewat background dan tidak perlu
   elemen apa pun — motifnya tidak pernah teregang di lebar layar mana pun. */
.pita-pucuk {
  height: 3.5rem; width: 100%; display: block;
  background: url('img/orn-pita.webp') repeat-x center bottom / auto 100%;
  pointer-events: none;
}

.kaki {
  max-width: var(--lebar-isi); margin: 0 auto;
  text-align: center; padding: var(--s-3) var(--s-3) var(--s-5);
  font-size: var(--t-xs); color: var(--teks-redup);
}
.kaki p { margin: 0; }

/* Catatan bahwa undangan bersifat personal. Nadanya minta maaf, jadi
   dibiarkan tenang: tanpa kotak, tanpa warna peringatan. */
.catatan-personal {
  border-top: 1px solid var(--garis);
  padding-top: var(--s-3);
  margin-bottom: var(--s-3) !important;
  line-height: 1.8; text-align: justify;
  /* Tanpa hyphens, teks rata kanan-kiri di kolom sempit meninggalkan celah
     antar kata yang lebar. */
  hyphens: auto;
}

.blok-kontak { margin-bottom: var(--s-3); }
.blok-kontak[hidden] { display: none; }
.kontak-pengantar { margin-bottom: var(--s-1) !important; }

/* =========================================================================
   Lightbox
   ========================================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: var(--lightbox);
  padding: var(--s-4) var(--s-2);
}
.lightbox[hidden] { display: none; }
.lb-panggung { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
#lb-foto {
  max-width: 100%; max-height: 78vh; max-height: 78dvh;
  margin: 0 auto; object-fit: contain;
}
#lb-keterangan {
  margin-top: var(--s-2); font-size: var(--t-xs); color: var(--teks-redup);
}
.lb-tutup {
  position: absolute; top: var(--s-2); right: var(--s-2);
  width: 44px; height: 44px; font-size: var(--t-lg); line-height: 1;
  background: transparent; color: var(--teks);
  border: 1px solid var(--garis); border-radius: 50%; cursor: pointer;
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; font-size: var(--t-lg); line-height: 1;
  background: transparent; color: var(--teks);
  border: 1px solid var(--garis); border-radius: 50%; cursor: pointer;
}
.lb-prev { left: var(--s-2); }
.lb-next { right: var(--s-2); }

/* =========================================================================
   Kontrol musik
   ========================================================================= */
.tombol-musik {
  position: fixed; z-index: 60;
  right: var(--s-2);
  bottom: max(var(--s-2), env(safe-area-inset-bottom));
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--permukaan); color: var(--penting);
  border: 1px solid var(--emas-tua); border-radius: 50%;
  box-shadow: 0 2px 12px var(--bayang);
  cursor: pointer;
}
.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
   ========================================================================= */
/* Setiap elemen masuk sekali saat seksinya mendekati layar. Arah masuknya
   dibedakan supaya tiap seksi terasa punya gerakan sendiri, bukan satu pola
   yang diulang dari atas ke bawah:
     reveal        naik dari bawah   — teks dan judul
     reveal-kiri   masuk dari kiri   — kartu/foto sisi kiri
     reveal-kanan  masuk dari kanan  — kartu/foto sisi kanan
     reveal-zoom   membesar pelan    — foto besar dan logo
   Jeda bertingkat antar elemen dalam satu seksi diatur JavaScript. */
.ada-js .reveal       { opacity: 0; transform: translateY(30px); }
.ada-js .reveal-kiri  { opacity: 0; transform: translateX(-36px); }
.ada-js .reveal-kanan { opacity: 0; transform: translateX(36px); }
.ada-js .reveal-zoom  { opacity: 0; transform: scale(.92); }

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

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

  .cover-nama { font-size: 3.05rem; }
  .acara-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .seksi { padding: var(--s-5) var(--s-3); }
}

/* =========================================================================
   prefers-reduced-motion — matikan seluruh gerak
   ========================================================================= */
@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,
  .ada-js .reveal-kiri,
  .ada-js .reveal-kanan,
  .ada-js .reveal-zoom { opacity: 1; transform: none; transition-delay: 0s !important; }
  .galeri-tombol:hover img { transform: none; }
  body.cover-selesai #utama { animation: none; }
}