/* =====================================================================
   TEMA — latar belakang, gaya kartu, dan penyesuaian huruf
   ---------------------------------------------------------------------
   Dimuat setelah site.css. Semuanya bekerja dengan menimpa variabel
   CSS, sehingga satu berkas ini cukup untuk semua kombinasi.
   ===================================================================== */

/* =========================================================
   1 · LATAR BELAKANG
   ========================================================= */

/* --- Blush Romantis (bawaan) --- */
body[data-bg="blush"]{
  --cream:#fff8f4; --cream-2:#fdeee8; --card:#fffdfb;
  --ink:#3a2430; --ink-soft:#6d5260;
}

/* --- Kebun Tulip (template Jinju) --- */
body[data-bg="tulip"]{
  --cream:#fff6f9; --cream-2:#fdeaf0; --card:#fffcfd;
  --ink:#42202f; --ink-soft:#7d4c60;
  --line:color-mix(in srgb,var(--accent) 22%,transparent);
}
body[data-bg="tulip"] .bg-wrap::before{
  background:
    radial-gradient(48% 40% at 14% 6%,  color-mix(in srgb,#f7a8c0 52%,transparent) 0%, transparent 62%),
    radial-gradient(46% 38% at 86% 12%, color-mix(in srgb,#e8446e 30%,transparent) 0%, transparent 60%),
    /* Semburat hijau di bawah: kesan tanah kebun tempat tulipnya tumbuh */
    radial-gradient(74% 42% at 50% 106%,color-mix(in srgb,#8fc27a 34%,transparent) 0%, transparent 66%),
    linear-gradient(172deg,#fff6f9 0%,#fde3ec 46%,#fbd3e2 78%,#f6e8e0 100%);
}

/* --- Senja Hangat --- */
body[data-bg="sunset"]{
  --cream:#fff6ef; --cream-2:#fbe3d6; --card:#fffcf9;
  --ink:#3d2333; --ink-soft:#75505f;
}
body[data-bg="sunset"] .bg-wrap::before{
  background:
    radial-gradient(52% 44% at 18% 4%,  color-mix(in srgb,#f0a35e 46%,transparent) 0%, transparent 64%),
    radial-gradient(48% 42% at 84% 10%, color-mix(in srgb,#d1697a 42%,transparent) 0%, transparent 62%),
    radial-gradient(72% 52% at 50% 104%,color-mix(in srgb,#8e5b93 34%,transparent) 0%, transparent 68%),
    linear-gradient(178deg,#ffeede 0%,#fbd9c6 42%,#f3c3c9 74%,#e9c0d4 100%);
}

/* --- Langit Malam --- */
body[data-bg="night"]{
  --cream:#12101f; --cream-2:#191631; --card:#211d3a;
  --ink:#f2edff; --ink-soft:#b5abd4;
  --line:color-mix(in srgb,var(--accent) 34%,transparent);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 14px 40px rgba(0,0,0,.45);
  --shadow-lg:0 30px 80px rgba(0,0,0,.55);
}
body[data-bg="night"] .bg-wrap::before{
  background:
    radial-gradient(46% 38% at 14% 6%,  color-mix(in srgb,var(--accent) 30%,transparent) 0%, transparent 62%),
    radial-gradient(44% 40% at 86% 14%, color-mix(in srgb,var(--accent2) 26%,transparent) 0%, transparent 60%),
    radial-gradient(70% 50% at 50% 104%,color-mix(in srgb,#3b2f6e 60%,transparent) 0%, transparent 70%),
    linear-gradient(176deg,#0f0d1c 0%,#1a1733 46%,#221d3d 100%);
}
body[data-bg="night"] .bg-grain{opacity:.14;mix-blend-mode:overlay}
body[data-bg="night"] .polaroid{background:#f6f2ff}
body[data-bg="night"] .polaroid figcaption{color:#6d5f86}
body[data-bg="night"] .gb-card,
body[data-bg="night"] .cd-cell,
body[data-bg="night"] .age-badge,
body[data-bg="night"] .fbtn{background:color-mix(in srgb,var(--card) 82%,transparent)}

/* --- Taman Pagi --- */
body[data-bg="garden"]{
  --cream:#f9fbf3; --cream-2:#e8f0dd; --card:#fdfefa;
  --ink:#25321f; --ink-soft:#5a6b4f;
}
body[data-bg="garden"] .bg-wrap::before{
  background:
    radial-gradient(48% 40% at 12% 6%,  color-mix(in srgb,#7a9e6b 34%,transparent) 0%, transparent 62%),
    radial-gradient(46% 40% at 88% 12%, color-mix(in srgb,#dcb86a 36%,transparent) 0%, transparent 60%),
    radial-gradient(66% 50% at 50% 102%,color-mix(in srgb,#a8c48f 32%,transparent) 0%, transparent 68%),
    linear-gradient(172deg,#fbfdf6 0%,#eaf2e0 50%,#f7faf1 100%);
}

/* --- Kertas Vintage --- */
body[data-bg="paper"]{
  --cream:#f7f0e3; --cream-2:#ebdfc9; --card:#fdf8ee;
  --ink:#3a2c1e; --ink-soft:#7a6851;
  --line:rgba(120,90,60,.22);
}
body[data-bg="paper"] .bg-wrap::before{
  background:
    radial-gradient(50% 42% at 16% 8%,  color-mix(in srgb,#c9a06a 30%,transparent) 0%, transparent 62%),
    radial-gradient(46% 40% at 86% 14%, color-mix(in srgb,#a9714f 22%,transparent) 0%, transparent 60%),
    linear-gradient(174deg,#f9f3e7 0%,#eee0c8 52%,#f5ecdc 100%);
}
body[data-bg="paper"] .bg-grain{opacity:.62}

/* --- Aurora (bergerak pelan) --- */
body[data-bg="aurora"]{
  --cream:#0e1a1c; --cream-2:#132528; --card:#1a2f31;
  --ink:#eafaf6; --ink-soft:#a8ccc5;
  --line:color-mix(in srgb,var(--accent) 36%,transparent);
  --shadow-sm:0 2px 10px rgba(0,0,0,.32);
  --shadow-md:0 14px 40px rgba(0,0,0,.42);
  --shadow-lg:0 30px 80px rgba(0,0,0,.52);
}
body[data-bg="aurora"] .bg-wrap::before{
  background:
    radial-gradient(52% 40% at 20% 8%,  color-mix(in srgb,#6fc9a8 40%,transparent) 0%, transparent 62%),
    radial-gradient(50% 42% at 82% 16%, color-mix(in srgb,#9b7fe0 40%,transparent) 0%, transparent 62%),
    radial-gradient(64% 46% at 50% 100%,color-mix(in srgb,#4f8fd6 34%,transparent) 0%, transparent 68%),
    linear-gradient(176deg,#0b1719 0%,#122528 48%,#16302f 100%);
  animation:auroraDrift 22s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  from{transform:translate3d(-3%,-2%,0) scale(1.04)}
  to  {transform:translate3d(3%,2%,0)   scale(1.12)}
}
/* Di HP, drift ini berada tepat di bawah .bg-grain yang ber-mix-blend-mode,
   sehingga memaksa blending layar penuh 60fps selama halaman terbuka.
   Butiran dan warnanya tetap sama; hanya pergeseran 22 detiknya yang
   berhenti — di layar 6 inci nyaris tak terlihat. */
@media (max-width:640px){
  body[data-bg="aurora"] .bg-wrap::before{animation:none}
}
body[data-bg="aurora"] .bg-grain{opacity:.16;mix-blend-mode:overlay}
body[data-bg="aurora"] .polaroid{background:#f2fbf8}
body[data-bg="aurora"] .polaroid figcaption{color:#5c7c76}
body[data-bg="aurora"] .gb-card,
body[data-bg="aurora"] .cd-cell,
body[data-bg="aurora"] .age-badge,
body[data-bg="aurora"] .fbtn{background:color-mix(in srgb,var(--card) 82%,transparent)}

/* --- Laut Tenang --- */
body[data-bg="ocean"]{
  --cream:#f2fbfc; --cream-2:#dcf0f3; --card:#fbfeff;
  --ink:#123338; --ink-soft:#4a6f76;
}
body[data-bg="ocean"] .bg-wrap::before{
  background:
    radial-gradient(48% 40% at 14% 6%,  color-mix(in srgb,#5aa9b8 34%,transparent) 0%, transparent 62%),
    radial-gradient(46% 40% at 88% 14%, color-mix(in srgb,#f0a3b8 30%,transparent) 0%, transparent 60%),
    radial-gradient(68% 50% at 50% 104%,color-mix(in srgb,#7fc9c1 34%,transparent) 0%, transparent 68%),
    linear-gradient(174deg,#f6fdfe 0%,#dff2f4 52%,#f2fafb 100%);
}

/* --- Putih Minimalis --- */
/* Krem hangat bernuansa earth tone — untuk ucapan yang perlu terasa
   resmi: undangan, syukuran, acara kantor. Sengaja duduk di antara
   "paper" yang kecokelatan seperti kertas tua dan "mono" yang putih
   dingin: cukup hangat untuk terasa ramah, cukup netral untuk terasa
   serius. Tidak ada satu pun warna merah muda di sini. */
body[data-bg="formal"]{
  --cream:#f6f2ea; --cream-2:#e9e2d5; --card:#fdfbf7;
  --ink:#2f2a24; --ink-soft:#6d6459;
  --line:rgba(90,78,62,.20);
}

body[data-bg="mono"]{
  --cream:#fcfbfc; --cream-2:#f4f1f3; --card:#ffffff;
  --ink:#2c2429; --ink-soft:#6f6469;
  --line:rgba(0,0,0,.09);
}
body[data-bg="mono"] .bg-wrap::before{
  background:
    radial-gradient(44% 36% at 14% 6%,  color-mix(in srgb,var(--accent) 10%,transparent) 0%, transparent 62%),
    radial-gradient(42% 36% at 86% 12%, color-mix(in srgb,var(--accent2) 10%,transparent) 0%, transparent 60%),
    linear-gradient(178deg,#ffffff 0%,#f6f4f5 60%,#fdfcfd 100%);
}
body[data-bg="mono"] .bg-grain{opacity:.14}

/* --- Gambar latar unggahan sendiri --- */
body[data-bgimage="1"] .bg-photo{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.34;
}
body[data-bgimage="1"] .bg-wrap::before{opacity:.82}
body[data-bg="night"][data-bgimage="1"] .bg-photo,
body[data-bg="aurora"][data-bgimage="1"] .bg-photo{opacity:.26}

/* =========================================================
   2 · GAYA KARTU
   ========================================================= */

/* --- Kertas: tepi bergerigi + tekstur --- */
body[data-card="paper"] .letter,
body[data-card="paper"] .gb-card,
body[data-card="paper"] .notice-card{
  border-radius:4px;
  background-image:
    linear-gradient(var(--card),var(--card)),
    repeating-linear-gradient(0deg,transparent 0 27px,color-mix(in srgb,var(--accent) 8%,transparent) 27px 28px);
  background-blend-mode:normal;
  box-shadow:var(--shadow-md),0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);
}
body[data-card="paper"] .letter::after{
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;
  background:
    radial-gradient(circle at 6px -3px,transparent 7px,var(--card) 7.5px) repeat-x 0 0/14px 10px;
  filter:drop-shadow(0 3px 3px rgba(90,40,60,.08));
}
body[data-card="paper"] .polaroid{border-radius:2px}

/* --- Kaca buram --- */
body[data-card="glass"] .letter,
body[data-card="glass"] .gb-card,
body[data-card="glass"] .video-frame,
body[data-card="glass"] .notice-card{
  background:color-mix(in srgb,var(--card) 62%,transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
}
body[data-card="glass"] .polaroid{
  background:color-mix(in srgb,var(--card) 84%,transparent);
  backdrop-filter:blur(8px);
}

/* --- Bingkai undangan --- */
body[data-card="frame"] .letter,
body[data-card="frame"] .notice-card{
  border-radius:2px;
  outline:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  outline-offset:-9px;
  box-shadow:var(--shadow-sm);
}
body[data-card="frame"] .gb-card{border-radius:2px}
body[data-card="frame"] .polaroid{
  border-radius:0;padding:14px 14px 46px;
  outline:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  outline-offset:-6px;
}

/* =========================================================
   3 · PENYESUAIAN HURUF
   ========================================================= */

/* Italiana & DM Serif hanya punya satu ketebalan */
body[data-font="elegant"] .sec-title,
body[data-font="elegant"] .cover h1,
body[data-font="elegant"] .hero .who{font-weight:400;letter-spacing:.01em}
body[data-font="elegant"] .cover .name-script,
body[data-font="elegant"] .hero .greet{font-weight:500;letter-spacing:.02em}
body[data-font="modern"] .sec-title,
body[data-font="modern"] .cover h1,
body[data-font="modern"] .hero .who{font-weight:400}

/* Caveat & Dancing Script lebih pendek — perbesar sedikit */
body[data-font="soft"] .cover .name-script,
body[data-font="modern"] .cover .name-script{font-size:clamp(2.6rem,10.5vw,4.8rem);line-height:1.18}
body[data-font="soft"] .hero .greet,
body[data-font="modern"] .hero .greet{line-height:1.15}

/* =========================================================
   4 · PANEL GANTI TEMA (untuk pengunjung)
   ========================================================= */

.theme-panel{
  position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:70;
  width:min(310px,calc(100vw - 32px));
  background:color-mix(in srgb,var(--card) 94%,transparent);
  backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);
  padding:16px;
  display:none;
  max-height:min(72vh,calc(100dvh - 150px));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.theme-panel.is-open{display:block;animation:tpIn .28s cubic-bezier(.2,.8,.25,1) both}
@keyframes tpIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

.theme-panel h4{
  margin:0 0 3px;font-family:var(--sans);font-size:.9rem;font-weight:700;color:var(--ink);
}
.theme-panel p.tp-sub{margin:0 0 13px;font-size:.76rem;color:var(--ink-soft);line-height:1.5}

.tp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.tp-item{
  border:1px solid var(--line);border-radius:13px;padding:9px;cursor:pointer;
  background:color-mix(in srgb,var(--card) 60%,transparent);
  display:grid;gap:7px;text-align:left;font:inherit;color:var(--ink);
  transition:border-color .18s,transform .18s;
}
.tp-item:hover{transform:translateY(-2px)}
.tp-item.is-on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.tp-swatch{height:38px;border-radius:8px;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.tp-swatch span{position:absolute}
.tp-name{font-size:.72rem;font-weight:600;line-height:1.3}

.tp-reset{
  margin-top:11px;width:100%;padding:9px;border-radius:11px;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);
  font:inherit;font-size:.76rem;font-weight:600;cursor:pointer;
}
.tp-reset:hover{color:var(--accent);border-color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  body[data-bg="aurora"] .bg-wrap::before{animation:none}
}

/* =====================================================================
   4 · PEMBEDA STRUKTURAL PER PRESET
   ---------------------------------------------------------------------
   Sampai sekarang seluruh berkas ini hanya menimpa variabel warna.
   Akibatnya sepuluh preset punya SATU tata letak, dan sepuluh pilihan
   terasa seperti satu pilihan yang dicat ulang.

   Pembandingnya jelas: di proyek undangan sebelah, tema yang paling
   terasa berbeda butuh 68 aturan CSS dan NOL komponen baru. Yang
   membuatnya beda bukan warnanya, melainkan perataan, garis, dan
   irama jaraknya.

   body[data-theme] sudah dicetak view.php sejak lama tapi belum pernah
   dipakai satu aturan pun, jadi ini kait yang sudah ada, bukan yang
   baru dibuat.

   SPESIFISITAS: body[data-theme="x"] .sec-head bernilai (0,2,1) dan
   mengalahkan .sec-head (0,1,0) tanpa !important. Jangan naikkan lagi
   tanpa perlu — di berkas galeri, selektor yang terlalu spesifik
   pernah mematikan seluruh bentuk bingkai foto tanpa gejala apa pun.

   Foto SENGAJA tidak disentuh di sini. .gph-media sudah jadi medan
   rebutan antara data-layout dan data-frame, dan menambah pemain
   ketiga di sana adalah cara paling cepat mengulang bug itu.
   ===================================================================== */

/* --- Formal Elegan: undangan cetak --------------------------------
   Judul kecil berhuruf besar renggang dengan garis rangkap di
   bawahnya, dan jarak antarbagian dilebarkan. Undangan cetak memang
   bernapas lebih lambat daripada halaman web. */
body[data-theme="formal"] .sec-head{margin-bottom:52px}
body[data-theme="formal"] .sec-title{
  font-size:clamp(1.05rem,2.8vw,1.5rem);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
}
body[data-theme="formal"] .sec-head::after{
  content:"";display:block;width:64px;height:3px;margin:18px auto 0;
  border-top:1px solid currentColor;border-bottom:1px solid currentColor;
  opacity:.34;
}
body[data-theme="formal"] .sec-sub{margin-top:18px;font-style:italic}

/* --- Kertas Vintage: surat yang diketik ---------------------------
   Semuanya rata kiri, karena surat tidak pernah rata tengah. Garis
   pendek di bawah judul menirukan garis bawah mesin tik, dan ukuran
   judulnya diturunkan supaya tidak berteriak. */
body[data-theme="vintage"] .sec-head{text-align:left;margin-bottom:30px}
body[data-theme="vintage"] .sec-title{
  font-size:clamp(1.25rem,3.2vw,1.7rem);letter-spacing:.05em;
}
body[data-theme="vintage"] .sec-head::after{
  content:"";display:block;width:132px;height:2px;margin:14px 0 0;
  background:currentColor;opacity:.24;
}
body[data-theme="vintage"] .sec-sub{margin-left:0;margin-right:0;max-width:54ch}

/* --- Pesta Meriah: buku tempel ------------------------------------
   Rata kiri dan judul yang jauh lebih tebal serta rapat. Nada pesta
   datang dari huruf yang berani, bukan dari confetti saja — dan
   confetti-nya memang sudah ada sebagai butiran. */
body[data-theme="pesta"] .sec-head{text-align:left;margin-bottom:30px}
body[data-theme="pesta"] .sec-title{font-weight:800;letter-spacing:-.035em}
body[data-theme="pesta"] .sec-sub{margin-left:0;margin-right:0;max-width:50ch}

/* Rata kiri dikembalikan ke tengah di layar sempit untuk ketiganya:
   di 390px kolomnya sudah sesempit teksnya sendiri, jadi perataan
   tidak lagi terbaca sebagai pilihan, cuma sebagai ketimpangan. */
@media (max-width:520px){
  body[data-theme="vintage"] .sec-head,
  body[data-theme="pesta"] .sec-head{text-align:center}
  body[data-theme="vintage"] .sec-head::after{margin-left:auto;margin-right:auto}
}