/* ============================================================
   Tema: ukir-jepara

   Seluruh tampilan undangan ada di berkas ini. Strukturnya (HTML) dan
   isinya (database) tidak menyebut satu pun warna atau ukuran — jadi
   tema berikutnya cukup menyalin folder ini, bukan menyalin halaman.

   Dipilih lewat kolom `pasangan.tema`. Halaman memuat berkas ini sebagai
   <link> biasa supaya tidak ada kedipan; kalau database menyebut tema
   lain, href-nya ditukar sebelum sampul dibuka.

   Yang TIDAK boleh masuk ke sini: apa pun yang khas satu pasangan. Nama,
   alamat, tanggal, nomor dompet — semuanya datang dari database.
   ============================================================ */

:root{
  --nila:#131E33;
  --nila-2:#1B2A46;
  --nila-3:#0D1626;
  --jati:#4A3323;
  --kuningan:#C39A5C;
  --kuningan-dim:#8C6A3A;
  --kapur:#EDE7D9;
  --kapur-2:#E2DAC7;
  --daun:#7C8B63;

  --display:'Marcellus', 'Times New Roman', serif;
  --script:'Cormorant', Georgia, serif;
  --body:'Karla', 'Helvetica Neue', Arial, sans-serif;

  --pad:clamp(20px, 6vw, 64px);

  /* ---- setelan gerak, dibaca assets/motion.js ----
     Ditaruh di sini, bukan di berkas konfigurasi tersendiri: temanya toh
     sudah dimuat, jadi tidak perlu permintaan jaringan tambahan, dan
     setelannya ikut tertukar sendiri waktu temanya berganti. */
  --runtun:90ms;     /* jeda antar anak dalam satu wadah */
  --parallax:.18;    /* 0 mematikan parallax */
  --gulir-laju:46px; /* piksel per detik; 0 mematikan gulir otomatis */
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--body);
  background:var(--nila);
  color:var(--kapur);
  line-height:1.7;
  overflow-x:hidden;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden;height:100vh;}

img,svg{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}

/* ============ TIPOGRAFI ============ */
.eyebrow{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  font-weight:500;color:var(--kuningan);
}
.serif{font-family:var(--display);font-weight:400;line-height:1.25;}
.amp{font-family:var(--script);font-style:italic;font-weight:300;color:var(--kuningan);}
.arabic{font-family:'Traditional Arabic','Amiri','Scheherazade New',serif;font-size:clamp(20px,5vw,28px);line-height:2;}

/* ============ ORNAMEN UKIR ============
   Ornamen digambar sekali di <defs> lalu dipanggil dengan <use>.
   Selektor turunan CSS tidak bisa menembus shadow tree <use>, jadi
   warna dan animasinya dijalankan lewat custom property — yang
   justru diwariskan ke dalam. Nilainya dibaca oleh style inline
   pada tiap path di dalam <defs>. */
@property --ukir-off   { syntax:'<number>'; inherits:true; initial-value:0; }
@property --ukir-daun  { syntax:'<number>'; inherits:true; initial-value:.85; }

.ukir{
  --ukir-garis:var(--kuningan);
  --ukir-garis-dim:var(--kuningan-dim);
  --ukir-isi:var(--kuningan);
}
.on-paper .ukir{
  --ukir-garis:var(--jati);
  --ukir-garis-dim:var(--jati);
  --ukir-isi:var(--jati);
  --ukir-daun:.6;
}

/* goresan tergambar saat ornamen masuk layar */
.js .draw{--ukir-off:1;--ukir-daun:0;}
.js .draw.in{
  --ukir-off:0;--ukir-daun:.85;
  transition:--ukir-off 1.6s cubic-bezier(.22,.8,.3,1), --ukir-daun .7s ease .9s;
}
.js .on-paper .draw.in{--ukir-daun:.6;}

.divider{display:block;margin:0 auto;width:min(260px,64vw);opacity:.95;}

/* ============ SAMPUL ============ */
#cover{
  position:fixed;inset:0;z-index:60;
  background:
    radial-gradient(120% 80% at 50% 0%, #22355A 0%, var(--nila) 45%, var(--nila-3) 100%);
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px;text-align:center;
  transition:opacity .9s ease, visibility .9s;
}
#cover.gone{opacity:0;visibility:hidden;pointer-events:none;}
.cover-frame{
  position:relative;width:min(520px,100%);
  padding:clamp(36px,9vw,60px) clamp(20px,6vw,42px);
}
/* Isi sampul menyesuaikan pihak tamu, jadi ditahan sebentar sampai
   variannya diketahui. Tanpa JS, kelas .js tidak pernah dipasang dan
   sampul tampil apa adanya. */
.js .cover-frame{opacity:0;transition:opacity .5s ease;}
.js .cover-frame.siap{opacity:1;}
.corner{position:absolute;width:clamp(58px,16vw,84px);height:auto;}
.c-tl{top:0;left:0;}
.c-tr{top:0;right:0;transform:scaleX(-1);}
.c-bl{bottom:0;left:0;transform:scaleY(-1);}
.c-br{bottom:0;right:0;transform:scale(-1,-1);}

.cover-basmalah{font-size:13px;letter-spacing:.2em;color:var(--kuningan);margin-bottom:20px;}
.cover-label{margin-bottom:14px;}
.cover-names{
  font-family:var(--display);
  font-size:clamp(30px,9vw,54px);
  letter-spacing:.06em;line-height:1.15;margin:6px 0 4px;
}
.cover-names .amp{display:block;font-size:.72em;margin:2px 0;}
.cover-date{
  margin-top:18px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(237,231,217,.7);
}
.cover-to{
  margin-top:34px;padding-top:22px;
  border-top:1px solid rgba(195,154,92,.28);
  font-size:12.5px;color:rgba(237,231,217,.66);letter-spacing:.04em;
}
.cover-guest{
  display:block;margin-top:6px;font-family:var(--display);
  font-size:clamp(18px,5vw,24px);color:var(--kapur);letter-spacing:.04em;
}
.btn-open{
  margin-top:26px;
  background:var(--kuningan);color:var(--nila-3);
  border:none;border-radius:2px;
  padding:15px 34px;
  font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  cursor:pointer;transition:background .3s, transform .3s, box-shadow .3s;
  box-shadow:0 10px 30px -12px rgba(195,154,92,.8);
}
.btn-open:hover{background:#D9AF6E;transform:translateY(-2px);}
.btn-open:active{transform:translateY(0);}

/* ============ SEKSI ============ */
section{padding:clamp(64px,14vw,110px) var(--pad);position:relative;}
.wrap{max-width:660px;margin:0 auto;}
.center{text-align:center;}
.on-paper{background:var(--kapur);color:var(--nila);}
.on-paper .eyebrow{color:var(--kuningan-dim);}
.on-paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(94deg,transparent 0 3px,rgba(74,51,35,.028) 3px 4px);
}
.on-paper > *{position:relative;}

.reveal{opacity:0;transform:translateY(26px);}
.reveal.in{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.22,.8,.3,1);}

/* Runtun — anak-anak satu wadah muncul bergiliran, bukan serempak.
   --i diisi assets/motion.js. Ini cuma penundaan: tidak ada animasi
   tambahan yang ikut berjalan, jadi biayanya nol. */
[data-runtun] .reveal.in{transition-delay:calc(var(--i,0) * var(--runtun,0ms));}
[data-runtun] .draw.in{transition-delay:calc(var(--i,0) * var(--runtun,0ms));}

/* Parallax hanya menggeser; `will-change` memberinya lapisan sendiri
   supaya menggesernya tidak memaksa peramban mengecat ulang tetangganya. */
[data-parallax]{will-change:transform;}
@media (prefers-reduced-motion:reduce){
  [data-parallax]{will-change:auto;transform:none!important;}
}

/* ---------- SILSILAH ----------
   Grid, bukan pohon. Di lebar HP jadi dua kolom; foto bundar dengan
   rasio tetap supaya barisnya rata walau fotonya bermacam ukuran, dan
   supaya ruangnya sudah dipesan sebelum gambarnya turun. */
.silsilah-sisi + .silsilah-sisi{margin-top:clamp(34px,8vw,48px);}
.silsilah-judul{
  font-family:var(--display);font-size:clamp(15px,4vw,18px);
  letter-spacing:.04em;color:var(--jati);margin-bottom:18px;
}
.silsilah-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:clamp(16px,4vw,26px);max-width:520px;margin:0 auto;
}
.silsilah-orang{margin:0;}
.silsilah-foto{
  width:clamp(76px,22vw,104px);height:clamp(76px,22vw,104px);
  border-radius:50%;object-fit:cover;margin:0 auto 10px;
  border:1px solid rgba(74,51,35,.28);
  background:var(--kapur-2);
}
.silsilah-kosong{
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 38%, rgba(74,51,35,.16) 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 96%, rgba(74,51,35,.16) 0 34%, transparent 35%),
    var(--kapur-2);
}
.silsilah-peran{
  display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kuningan-dim);margin-bottom:4px;
}
.silsilah-nama{
  display:block;font-family:var(--display);font-size:14.5px;line-height:1.4;
  color:var(--nila);
}
/* .divider tidak membawa jarak atas sendiri, jadi tanpa ini daun
   ornamennya menempel ke baris nama terakhir. */
#silsilahIsi{margin-bottom:clamp(30px,7vw,44px);}

/* HERO ATAS */
#mulai{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:radial-gradient(110% 70% at 50% 100%, #22355A 0%, var(--nila) 55%, var(--nila-3) 100%);
  text-align:center;
}
.hero-arabic{color:var(--kuningan);margin-bottom:26px;}
.hero-salam{font-size:13.5px;letter-spacing:.06em;color:rgba(237,231,217,.75);max-width:520px;}
.hero-verse{
  font-family:var(--script);font-size:clamp(17px,4.4vw,21px);font-style:italic;font-weight:400;
  line-height:1.75;margin:28px auto 14px;max-width:540px;color:var(--kapur);
}
.hero-source{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--kuningan);}

/* MEMPELAI */
.pair{display:grid;gap:clamp(38px,9vw,54px);margin-top:44px;}
.person-name{
  font-family:var(--display);font-size:clamp(24px,6.4vw,34px);
  letter-spacing:.04em;line-height:1.2;margin-bottom:10px;
}
.person-role{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--kuningan-dim);margin-bottom:14px;}
.person-parents{font-size:14px;line-height:1.85;color:rgba(19,30,51,.72);}
.person-parents strong{font-weight:500;color:var(--nila);}
.alm{font-size:11.5px;letter-spacing:.08em;color:var(--kuningan-dim);}
.pair-amp{font-family:var(--script);font-style:italic;font-size:40px;color:var(--kuningan-dim);line-height:1;}

/* COUNTDOWN */
#hitung{background:linear-gradient(180deg,var(--nila-3),var(--nila));text-align:center;}
.count-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(6px,2.4vw,16px);margin:36px auto 0;max-width:480px;
}
.count-box{
  border:1px solid rgba(195,154,92,.3);
  padding:clamp(12px,3.4vw,18px) 4px;
  background:rgba(195,154,92,.05);
}
.count-num{
  font-family:var(--display);font-size:clamp(24px,7.4vw,38px);
  color:var(--kuningan);line-height:1;font-variant-numeric:tabular-nums;
}
/* Angka bergulir. Kotaknya memotong, isinya bergerak — jadi yang
   dianimasikan cuma transform dan opacity. */
.count-num{overflow:hidden;}
.count-num .angka{display:block;will-change:transform;}

.count-lbl{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,231,217,.55);margin-top:8px;}
.count-done{font-family:var(--display);font-size:clamp(20px,5.4vw,28px);color:var(--kuningan);margin-top:30px;}

/* ACARA */
.event{
  border:1px solid rgba(74,51,35,.22);
  padding:clamp(24px,6vw,34px);
  text-align:center;background:rgba(255,255,255,.32);
}
.event + .event{margin-top:20px;}
.event-name{font-family:var(--display);font-size:clamp(21px,5.6vw,27px);letter-spacing:.05em;}
.event-line{width:34px;height:1px;background:var(--kuningan-dim);margin:14px auto;}
.event-when{font-size:15px;font-weight:500;letter-spacing:.02em;}
.event-time{font-size:14px;color:rgba(19,30,51,.7);margin-top:4px;}
/* alamat menempel di kartu acara hanya bila acaranya tidak satu tempat */
.event-tempat{
  font-family:var(--display);font-size:clamp(16px,4.2vw,19px);
  letter-spacing:.03em;margin-top:18px;
}
.event-alamat{font-size:13.5px;color:rgba(19,30,51,.7);max-width:320px;margin:6px auto 0;}
.event .btn{margin-top:16px;}
.place{margin-top:34px;text-align:center;}
.place-name{font-family:var(--display);font-size:clamp(18px,4.8vw,22px);margin-bottom:8px;}
.place-addr{font-size:14px;color:rgba(19,30,51,.72);max-width:340px;margin:0 auto;}
.btn{
  display:inline-block;border:1px solid var(--kuningan-dim);background:transparent;
  color:var(--jati);text-decoration:none;border-radius:2px;
  padding:13px 26px;margin-top:20px;
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;transition:background .3s,color .3s;
}
.btn:hover{background:var(--jati);color:var(--kapur);border-color:var(--jati);}

/* HADIAH */
#hadiah .note{font-size:14px;color:rgba(237,231,217,.72);max-width:440px;margin:16px auto 0;}
.rek{
  border:1px solid rgba(195,154,92,.3);background:rgba(195,154,92,.05);
  padding:22px clamp(18px,5vw,26px);margin-top:20px;text-align:center;
}
.rek-bank{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--kuningan);}
.rek-no{
  font-family:var(--display);font-size:clamp(21px,5.6vw,26px);letter-spacing:.09em;
  margin:10px 0 6px;color:var(--kapur);
}
.rek-an{font-size:12.5px;color:rgba(237,231,217,.66);letter-spacing:.05em;}
.btn-copy{
  margin-top:16px;background:transparent;border:1px solid rgba(195,154,92,.5);
  color:var(--kuningan);border-radius:2px;padding:10px 22px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;transition:background .3s,color .3s;
}
.btn-copy:hover{background:var(--kuningan);color:var(--nila-3);}
.btn-copy.ok{background:var(--daun);border-color:var(--daun);color:var(--nila-3);}

/* UCAPAN */
.field{margin-top:16px;text-align:left;}
.field label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--kuningan-dim);margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.5);
  border:1px solid rgba(74,51,35,.25);border-radius:2px;
  padding:12px 14px;font-size:15px;font-weight:300;color:var(--nila);
  transition:border-color .25s, background .25s;
}
.field textarea{min-height:110px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--kuningan-dim);background:#fff;
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--jati) 50%),linear-gradient(135deg,var(--jati) 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px;background-repeat:no-repeat;}
.form-note{font-size:12px;color:rgba(19,30,51,.55);margin-top:12px;}
.form-msg{font-size:13px;margin-top:12px;min-height:20px;}
.form-msg.err{color:#9C3B2E;}
.form-msg.ok{color:#4C6B3C;}

.ucapan-list{margin-top:34px;display:grid;gap:14px;text-align:left;}
.ucapan{border-left:2px solid var(--kuningan-dim);padding:2px 0 2px 16px;}
.ucapan-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;}
.ucapan-nama{font-family:var(--display);font-size:17px;letter-spacing:.03em;}
.ucapan-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--daun);border:1px solid rgba(124,139,99,.5);padding:2px 7px;border-radius:2px;}
.ucapan-teks{font-size:14.5px;color:rgba(19,30,51,.78);margin-top:5px;white-space:pre-wrap;overflow-wrap:anywhere;}
.ucapan-waktu{font-size:11px;color:rgba(19,30,51,.45);margin-top:5px;letter-spacing:.05em;}
.state{font-size:13.5px;color:rgba(19,30,51,.55);margin-top:28px;text-align:center;}

/* PENUTUP */
#penutup{
  background:radial-gradient(110% 80% at 50% 0%, #22355A 0%, var(--nila) 50%, var(--nila-3) 100%);
  text-align:center;padding-bottom:clamp(70px,16vw,120px);
}
.close-text{font-size:14.5px;color:rgba(237,231,217,.75);max-width:480px;margin:0 auto;}
.close-names{
  font-family:var(--display);font-size:clamp(26px,7.4vw,40px);
  letter-spacing:.06em;margin:26px 0 8px;
}
.credit{margin-top:44px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(237,231,217,.32);}

/* ============ MUSIK LATAR ============ */
/* Tombol gulir otomatis — sebaris dengan tombol musik, duduk di atasnya. */
#btnGulir{
  position:fixed;right:clamp(14px,4vw,26px);
  bottom:calc(clamp(14px,4vw,26px) + 62px);z-index:50;
  width:52px;height:52px;border-radius:50%;
  background:var(--nila-3);border:1px solid rgba(195,154,92,.55);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6);
  transition:transform .3s, border-color .3s, opacity .5s;
}
#btnGulir.show{display:flex;}
#btnGulir:hover{transform:scale(1.06);border-color:var(--kuningan);}
#btnGulir:focus-visible{outline:2px solid var(--kuningan);outline-offset:3px;}
#btnGulir svg{width:24px;height:24px;}
#btnGulir path,#btnGulir rect{fill:var(--kuningan);}
#btnGulir .ikon-jeda{display:none;}
#btnGulir[aria-pressed="true"] .ikon-main{display:none;}
#btnGulir[aria-pressed="true"] .ikon-jeda{display:block;}
#btnGulir[aria-pressed="true"]{border-color:var(--kuningan);}

/* Gulir otomatis tidak ditawarkan sama sekali kalau pengguna minta
   gerak dikurangi — menawarkannya lalu tidak menjalankannya lebih
   membingungkan daripada tidak ada tombolnya. */
@media (prefers-reduced-motion:reduce){
  #btnGulir,#btnGulir.show{display:none;}
}

#btnMusik{
  position:fixed;right:clamp(14px,4vw,26px);bottom:clamp(14px,4vw,26px);z-index:50;
  width:52px;height:52px;border-radius:50%;
  background:var(--nila-3);border:1px solid rgba(195,154,92,.55);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6);
  transition:transform .3s, border-color .3s, opacity .5s;
}
#btnMusik.show{display:flex;}
#btnMusik:hover{transform:scale(1.06);border-color:var(--kuningan);}
#btnMusik svg{width:26px;height:26px;}
#btnMusik .disc{stroke:var(--kuningan);fill:none;stroke-width:1.2;}
#btnMusik .pin{fill:var(--kuningan);}
#btnMusik .spin{transform-origin:50% 50%;animation:putar 9s linear infinite;animation-play-state:paused;}
#btnMusik.on .spin{animation-play-state:running;}
#btnMusik .bar{stroke:var(--kuningan);stroke-width:1.6;stroke-linecap:round;opacity:0;transition:opacity .3s;}
#btnMusik.off .bar{opacity:1;}
@keyframes putar{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){#btnMusik .spin{animation:none;}}

h2.title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(25px,6.6vw,36px);letter-spacing:.05em;margin-top:12px;
}
.lead{font-size:14.5px;margin-top:14px;color:rgba(19,30,51,.7);max-width:470px;margin-left:auto;margin-right:auto;}
#hitung .lead,#hadiah .lead{color:rgba(237,231,217,.7);}
.gap{height:clamp(26px,7vw,40px);}

@media (min-width:720px){
  .pair{grid-template-columns:1fr auto 1fr;align-items:center;text-align:center;}
  .rek-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  .rek-grid .rek{margin-top:0;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal.in{opacity:1;transform:none;transition:none;}
  [data-runtun] .reveal.in,[data-runtun] .draw.in{transition-delay:0s;}
  .count-num .angka{will-change:auto;}
  .js .draw,.js .draw.in{--ukir-off:0;--ukir-daun:.85;transition:none;}
  .js .on-paper .draw,.js .on-paper .draw.in{--ukir-daun:.6;}
  #cover,.js .cover-frame{transition:none;}
}
:focus-visible{outline:2px solid var(--kuningan);outline-offset:3px;}