/* KasihKata — tampilan tema dari "mesin tema" (src/themes.js).
   .kc = sampul undangan. Dipakai di undangan asli (layar penuh) dan sebagai gambar mini (.kc-mini)
   di galeri tema, editor, beranda, dan Pembuat Tema. Semua ukuran memakai "em" supaya bisa diperkecil. */

.kc {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-family: var(--t-font-body); font-size: 16px; line-height: 1.5;
  min-height: 100vh; min-height: 100dvh; padding: 3em 1.8em; color: var(--kc-ink, var(--t-ink));
  background: var(--t-bg);
}
.kc *, .kc *::before, .kc *::after { box-sizing: border-box; }
.kc-inner { position: relative; z-index: 2; width: 100%; max-width: 25em; display: flex; flex-direction: column; align-items: center; }
.kc p { margin: 0; }
.kc-eyebrow { font-size: .72em; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 1.1em !important; opacity: .88; }
.kc .kc-names { font-family: var(--t-font-name, var(--t-font-head)); font-weight: 500; font-size: 2.75em; line-height: 1.12; margin: 0 0 .25em; color: var(--kc-name, inherit); overflow-wrap: anywhere; }
.kc-amp { display: block; font-size: .55em; line-height: 1.4; opacity: .85; }
.kc-div { display: block; width: 9em; height: 1.5em; margin: .5em auto .9em; background: var(--kc-orn, var(--t-accent));
  -webkit-mask: var(--orn-divider) center / contain no-repeat; mask: var(--orn-divider) center / contain no-repeat; }
.kc-date { font-size: .92em; letter-spacing: .05em; margin-bottom: 2.1em !important; }
.kc-to { font-size: .8em; opacity: .88; margin-bottom: 1.5em !important; }
.kc-to strong { display: block; font-family: var(--t-font-head); font-size: 1.4em; font-weight: 600; margin-top: .25em; opacity: 1; }
.kc-open {
  display: inline-flex; align-items: center; gap: .5em; border: 0; border-radius: 999px; padding: .95em 1.9em; cursor: pointer;
  font: 600 .9em var(--t-font-body); background: var(--kc-btn-bg, var(--t-accent)); color: var(--kc-btn-ink, var(--t-on-accent, #fff));
  box-shadow: 0 .6em 1.5em rgba(0,0,0,.16); transition: transform .15s;
}
.kc-open:hover { transform: translateY(-2px); }
.kc-photo { display: none; }

/* hiasan sudut (mask SVG, warnanya mengikuti tema) */
.kc-orn { position: absolute; z-index: 1; width: var(--kc-orn-w, 46%); max-width: 300px; aspect-ratio: 1; display: none; pointer-events: none;
  background: var(--kc-orn, var(--t-accent));
  -webkit-mask: var(--orn-corner) 0 0 / contain no-repeat; mask: var(--orn-corner) 0 0 / contain no-repeat; }
.kc-mini .kc-orn { max-width: none; }
.kc-tl { top: 0; left: 0; }
.kc-tr { top: 0; right: 0; transform: scaleX(-1); }
.kc-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.kc-br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* ---------------- Klasik & Bingkai: latar penuh gelap / foto ---------------- */
[data-layout="klasik"] .kc, [data-layout="bingkai"] .kc {
  --kc-ink: #fff; --kc-orn: rgba(255, 236, 196, .78); --kc-btn-bg: #fff; --kc-btn-ink: #1d1714;
  background-image: linear-gradient(180deg, rgba(15,12,10,.18), rgba(15,12,10,.5)), linear-gradient(160deg, var(--t-cover-dark), var(--t-cover-2, var(--t-accent)));
  background-size: cover; background-position: center;
}
[data-layout="klasik"] .kc[data-has-photo], [data-layout="bingkai"] .kc[data-has-photo] {
  background-image: linear-gradient(180deg, rgba(15,12,10,.35), rgba(15,12,10,.74)), var(--kc-photo);
}
[data-layout="klasik"] .kc-tl, [data-layout="klasik"] .kc-br { display: block; --kc-orn-w: 44%; opacity: .8; }
[data-layout="bingkai"] .kc-orn { display: block; --kc-orn-w: 30%; opacity: .85; }
[data-layout="bingkai"] .kc-inner {
  border: 1px solid rgba(255,255,255,.6); outline: 1px solid rgba(255,255,255,.3); outline-offset: .55em;
  padding: 3.4em 1.5em 3em; border-radius: .25em; background: rgba(0,0,0,.08);
}

/* ---------------- Terang: kertas cerah, foto bulat ---------------- */
[data-layout="terang"] .kc {
  --kc-name: var(--t-accent); --kc-orn: var(--t-accent);
  background: radial-gradient(circle at 50% 42%, var(--t-surface) 0, var(--t-bg) 72%);
}
[data-layout="terang"] .kc-tl, [data-layout="terang"] .kc-br { display: block; --kc-orn-w: 56%; }
[data-layout="terang"] .kc-eyebrow { color: var(--t-muted); opacity: 1; }
[data-layout="terang"] .kc[data-has-photo] .kc-photo {
  display: block; width: 9.5em; aspect-ratio: 1; border-radius: 50%; margin-bottom: 1.4em;
  background: var(--kc-photo) center / cover; border: .35em solid var(--t-surface); box-shadow: 0 0 0 1px var(--t-accent), 0 .8em 1.8em rgba(0,0,0,.12);
}

/* ---------------- Lengkung: jendela kubah ---------------- */
[data-layout="lengkung"] .kc { --kc-name: var(--t-accent); --kc-orn: var(--t-accent); background: var(--t-bg); }
[data-layout="lengkung"] .kc-tl, [data-layout="lengkung"] .kc-tr { display: block; --kc-orn-w: 36%; }
[data-layout="lengkung"] .kc-photo {
  display: block; position: relative; width: 13.5em; height: 17.5em; margin-bottom: 1.6em;
  border-radius: 6.75em 6.75em .8em .8em; border: .32em solid var(--t-surface);
  background: var(--kc-photo, linear-gradient(165deg, var(--t-cover-dark), var(--t-cover-2, var(--t-accent)))) center / cover;
  box-shadow: 0 0 0 1px var(--t-line), 0 1.2em 2.4em rgba(0,0,0,.14);
}
[data-layout="lengkung"] .kc:not([data-has-photo]) .kc-photo::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 7em; height: 1.4em; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.85); -webkit-mask: var(--orn-divider) center / contain no-repeat; mask: var(--orn-divider) center / contain no-repeat;
}
[data-layout="lengkung"] .kc-eyebrow { color: var(--t-muted); opacity: 1; }
[data-layout="lengkung"] .kc-names { font-size: 2.4em; }
[data-layout="lengkung"] .kc-date { margin-bottom: 1.5em !important; }

/* ---------------- Modern: huruf besar rata kiri ---------------- */
[data-layout="modern"] .kc { background: var(--t-surface); justify-content: flex-start; align-items: stretch; padding: 0; text-align: left; }
[data-layout="modern"] .kc-photo {
  display: block; flex: 0 0 46%; min-height: 46vh; width: 100%;
  background: var(--kc-photo, linear-gradient(160deg, var(--t-cover-dark), var(--t-cover-2, var(--t-accent)))) center / cover;
}
[data-layout="modern"] .kc-inner { align-items: flex-start; max-width: none; padding: 2.2em 2em 2.4em; flex: 1; justify-content: center; }
[data-layout="modern"] .kc-eyebrow { color: var(--t-accent); opacity: 1; display: flex; align-items: center; gap: .8em; }
[data-layout="modern"] .kc-eyebrow::before { content: ''; width: 2.2em; height: 1px; background: currentColor; }
[data-layout="modern"] .kc-names { font-family: var(--t-font-head); font-size: 3.1em; line-height: 1.02; font-weight: 600; color: var(--t-ink); }
[data-layout="modern"] .kc-amp { color: var(--t-accent); font-size: .5em; margin: .2em 0; }
[data-layout="modern"] .kc-div { display: none; }
[data-layout="modern"] .kc-date { font-size: 1em; border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line); padding: .6em 0; margin: .6em 0 1.6em !important; width: 100%; }
[data-layout="modern"] .kc-open { --kc-btn-bg: var(--t-ink); --kc-btn-ink: var(--t-surface); border-radius: .35em; }

/* ---------------- Foto penuh: foto sampul satu layar, tulisan di bawah di atas gradasi ---------------- */
[data-layout="foto"] .kc {
  --kc-ink: #fff; --kc-name: #fff; --kc-orn: rgba(255, 255, 255, .85); --kc-btn-bg: #fff; --kc-btn-ink: #1d1714;
  justify-content: flex-end; padding: 3em 1.8em 3.4em;
  background-color: var(--t-cover-dark, #1d1714);
  background-image: linear-gradient(180deg, rgba(10, 8, 8, 0) 30%, rgba(10, 8, 8, .3) 55%, rgba(10, 8, 8, .8) 100%), linear-gradient(160deg, var(--t-cover-dark), var(--t-cover-2, var(--t-accent)));
  background-size: cover; background-position: center 28%;
}
[data-layout="foto"] .kc[data-has-photo] {
  background-image: linear-gradient(180deg, rgba(10, 8, 8, .18) 0, rgba(10, 8, 8, 0) 20%, rgba(10, 8, 8, 0) 40%, rgba(10, 8, 8, .5) 62%, rgba(10, 8, 8, .86) 100%), var(--kc-photo);
}
[data-layout="foto"] .kc-names { font-size: 2.6em; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
[data-layout="foto"] .kc-amp { display: inline; font-size: .62em; margin: 0 .22em; vertical-align: .1em; }
[data-layout="foto"] .kc-quote { display: none; } /* kutipan tampil di bagian pembuka setelah undangan dibuka */
[data-layout="foto"] .kc-eyebrow, [data-layout="foto"] .kc-date, [data-layout="foto"] .kc-to { text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
[data-layout="foto"] .kc-date { margin-bottom: 1.4em !important; }
[data-layout="foto"] .kc-to { margin-bottom: 1.2em !important; }

/* ---------------- Versi mini (galeri, editor, beranda) ---------------- */
.kc-thumb { container-type: inline-size; position: relative; overflow: hidden; border-radius: inherit; }
.kc-mini { font-size: 3.15cqw; min-height: 0; aspect-ratio: 9 / 14; padding: 2.6em 1.4em; pointer-events: none; }
.kc-mini .kc-names { font-size: 2.5em; }
.kc-mini .kc-open { box-shadow: none; padding: .8em 1.6em; }
[data-layout="modern"] .kc-mini { padding: 0; }
[data-layout="modern"] .kc-mini .kc-photo { min-height: 0; flex-basis: 40%; }
[data-layout="modern"] .kc-mini .kc-inner { padding: 1.6em 1.5em; }
[data-layout="lengkung"] .kc-mini .kc-photo { width: 11em; height: 13.5em; margin-bottom: 1.1em; }
[data-layout="lengkung"] .kc-mini .kc-to, [data-layout="lengkung"] .kc-mini .kc-open { display: none; }
.kc-badge-new { position: absolute; top: 8px; left: 8px; z-index: 5; background: #fff; color: #b3556b; font: 700 10px/1 system-ui, sans-serif;
  padding: 5px 8px; border-radius: 999px; letter-spacing: .04em; box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* ---------------- Isi undangan untuk tema mesin ---------------- */
html[data-ornament] .ki-eyebrow-sm::after {
  content: ''; display: block; width: 120px; height: 20px; margin: 8px auto 0; background: var(--t-accent);
  -webkit-mask: var(--orn-divider) center / contain no-repeat; mask: var(--orn-divider) center / contain no-repeat;
}
html[data-ornament] .ki-hero h1 { font-family: var(--t-font-name); font-weight: 500; font-size: 2.4rem; color: var(--t-accent); }
html[data-ornament] .ki-hero { position: relative; overflow: hidden; }
html[data-ornament] .ki-hero::before, html[data-ornament] .ki-hero::after {
  content: ''; position: absolute; width: 34%; max-width: 160px; aspect-ratio: 1; background: var(--t-accent); opacity: .55; pointer-events: none;
  -webkit-mask: var(--orn-corner) 0 0 / contain no-repeat; mask: var(--orn-corner) 0 0 / contain no-repeat;
}
html[data-ornament] .ki-hero::before { top: 0; left: 0; }
html[data-ornament] .ki-hero::after { bottom: 0; right: 0; transform: scale(-1, -1); }
html[data-ornament] .ki-hero > * { position: relative; z-index: 1; }
html[data-ornament] .ki-amp { font-family: var(--t-font-name); font-style: normal; font-size: 1.8rem; }
html[data-ornament] .ki-wrap { background: var(--t-surface); }

/* Bingkai: tiap bagian dalam bingkai ganda */
html[data-layout="bingkai"] #ki-content > section {
  margin: 14px; border: 1px solid var(--t-line); border-radius: 6px;
  box-shadow: inset 0 0 0 5px var(--t-surface), inset 0 0 0 6px var(--t-line);
}
/* Modern: rata kiri */
html[data-layout="modern"] #ki-content > section { text-align: left; }
html[data-layout="modern"] .ki-eyebrow-sm::after { margin-left: 0; width: 90px; -webkit-mask-position: left center; mask-position: left center; }
html[data-layout="modern"] .ki-countdown, html[data-layout="modern"] .ki-rsvp-summary { justify-content: flex-start; }
html[data-layout="modern"] .ki-hero h1 { font-family: var(--t-font-head); color: var(--t-ink); font-weight: 600; }
/* Lengkung & terang: kartu acara membulat */
html[data-layout="lengkung"] .ki-event-card { border-radius: 90px 90px 18px 18px; padding-top: 34px; }

@media (prefers-reduced-motion: reduce) { .kc-open { transition: none; } }

/* Tema lama (tanpa data-ornament) tidak punya gambar hiasan: sembunyikan tempatnya */
.kc-thumb:not([data-ornament]) .kc-orn, .kc-thumb:not([data-ornament]) .kc-div { display: none !important; }

/* ---------------- Ilustrasi: latar gambar lukis (AI) ----------------
   Gambar tampil utuh (contain) di tengah; sisa layar diisi versi buram gambar yang sama. */
.kc-frame { display: none; }
[data-layout="ilustrasi"] .kc { --kc-name: var(--t-accent); background: var(--t-bg); padding: 4.5em 3em; }
[data-layout="ilustrasi"] .kc::before {
  content: ''; position: absolute; inset: -30px; z-index: 0; background: var(--kc-art) center / cover no-repeat;
  filter: blur(18px) saturate(1.05); opacity: .6;
}
[data-layout="ilustrasi"] .kc-frame { display: block; position: absolute; inset: 0; z-index: 1; background: var(--kc-art) center / contain no-repeat; }
[data-layout="ilustrasi"] .kc-mini::before { display: none; }
[data-layout="ilustrasi"] .kc-mini .kc-frame { background-image: var(--kc-art-sm, var(--kc-art)); background-size: cover; }
[data-layout="ilustrasi"] .kc-mini { padding: 3em 2em; }
[data-layout="ilustrasi"] .kc-orn { display: none !important; }
[data-layout="ilustrasi"] .kc-inner { max-width: 19em; }
[data-layout="ilustrasi"] .kc-eyebrow { color: var(--t-muted); opacity: 1; }
[data-layout="ilustrasi"] .kc[data-has-photo] .kc-photo {
  display: block; position: relative; z-index: 2; width: 8.5em; aspect-ratio: 1; border-radius: 50%; margin-bottom: 1.2em;
  background: var(--kc-photo) center / cover; border: .3em solid var(--t-surface); box-shadow: 0 0 0 1px var(--t-accent), 0 .8em 1.8em rgba(0,0,0,.14);
}
/* isi undangan: bagian "simpan tanggal" & penutup memakai gambar yang sama */
html[data-layout="ilustrasi"] .ki-hero, html[data-layout="ilustrasi"] .ki-footer {
  background: var(--t-bg) var(--kc-art) center / cover no-repeat; padding-top: 90px; padding-bottom: 90px;
}
html[data-layout="ilustrasi"] .ki-hero::before, html[data-layout="ilustrasi"] .ki-hero::after { display: none; }
html[data-layout="ilustrasi"] .ki-footer { color: var(--t-ink); font-size: 13px; }

.kc-quote { font-size: .78em; font-style: italic; opacity: .88; margin-bottom: 1.4em !important; max-width: 22em; }
[data-layout="ilustrasi"] .kc { font-size: 15px; padding-top: 5em; padding-bottom: 5em; }
[data-layout="ilustrasi"] .kc-mini { font-size: 3.15cqw; }
[data-layout="ilustrasi"] .kc .kc-names { font-size: 2.45em; }
[data-layout="ilustrasi"] .kc-quote { display: none; }
[data-layout="ilustrasi"] .kc-date { margin-bottom: 1.6em !important; }
.ki-hero-quote { font-size: 13px; font-style: italic; color: var(--t-muted); max-width: 300px; margin: 14px auto 0; }

.kc-open .ic { flex: none; }

/* ---------------- Ilustrasi: isi undangan ikut bergambar ----------------
   Gambar lukisan menjadi "bingkai" tetap di belakang isi (tidak ikut menggulir),
   ditutup lapisan warna kertas supaya tulisan tetap mudah dibaca. */
html[data-layout="ilustrasi"] body { background: var(--t-bg); }
html[data-layout="ilustrasi"] .ki-wrap { background: transparent; isolation: isolate; }
html[data-layout="ilustrasi"] .ki-wrap::before {
  content: ''; position: fixed; z-index: -1; top: 0; bottom: 0; left: 50%; width: min(480px, 100%); transform: translateX(-50%);
  background: linear-gradient(color-mix(in srgb, var(--t-surface) 62%, transparent), color-mix(in srgb, var(--t-surface) 62%, transparent)), var(--kc-art) center / cover no-repeat;
  pointer-events: none;
}
html[data-layout="ilustrasi"] #ki-content > section:not(.ki-hero) {
  margin: 0 22px; padding-left: 22px; padding-right: 22px; border-bottom: 0;
  background: color-mix(in srgb, var(--t-surface) 90%, transparent); backdrop-filter: blur(2px);
}
html[data-layout="ilustrasi"] #ki-content > section:not(.ki-hero) + section:not(.ki-hero) { border-top: 1px solid var(--t-line); }
html[data-layout="ilustrasi"] #ki-content > section.ki-couple { border-radius: 18px 18px 0 0; margin-top: 22px; }
html[data-layout="ilustrasi"] #ki-content > section:not(.ki-hero):last-of-type { border-radius: 0 0 18px 18px; margin-bottom: 22px; }
html[data-layout="ilustrasi"] .ki-hero, html[data-layout="ilustrasi"] .ki-footer { background: transparent; }
html[data-layout="ilustrasi"] .ki-hero { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }

/* Sampul bergambar layar penuh: isi ditempatkan di bagian gambar yang kosong.
   --kc-safe = seberapa jauh (0..1 dari atas) gambar masih kosong sebelum hiasan bawah.
   Ukuran huruf ikut tinggi layar, jadi di HP pendek pun tulisan tidak menimpa hiasan. */
[data-layout="ilustrasi"] .kc:not(.kc-mini) {
  --kc-ah: min(100dvh, min(480px, 100vw) * 1.7778);
  --kc-top: max(0px, (100dvh - var(--kc-ah)) / 2);
  --kc-room: calc((var(--kc-safe, .8) - .08) * var(--kc-ah));
  padding-top: calc(var(--kc-top) + var(--kc-ah) * .08);
  padding-bottom: max(2em, 100dvh - var(--kc-top) - var(--kc-safe, .8) * var(--kc-ah));
  font-size: clamp(11.5px, var(--kc-room) / 29, 15px);
}
[data-layout="ilustrasi"] .kc:not(.kc-mini):has(.kc-amp) { font-size: clamp(11.5px, var(--kc-room) / 33, 15px); }
/* gambar mini (galeri): isi naik sedikit untuk gambar dengan hiasan besar di bawah */
[data-layout="ilustrasi"] .kc-mini { padding-bottom: calc(3em + var(--kc-lift, 0em) * .8); }

/* Tema anime: lukisan latar penuh warna & awan besar, jadi isi sampul diberi panel kaca buram supaya nama & tanggal selalu terbaca */
[data-template^="ilu-anime-"] .kc:not(.kc-mini) .kc-inner {
  padding: 1.5em 1.3em 1.7em; border-radius: 1.6em;
  background: color-mix(in srgb, var(--t-surface) 66%, transparent);
  -webkit-backdrop-filter: blur(7px) saturate(1.1); backdrop-filter: blur(7px) saturate(1.1);
  box-shadow: 0 10px 34px rgba(20, 20, 50, .16), inset 0 0 0 1px color-mix(in srgb, var(--t-accent) 20%, transparent);
}