/* Modern Vows — editorial names and a quiet photographic panel, refined
   4 October 2026. The panel uses the same cover and focal point as preview. */

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../../aset/font/Figtree-latin.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'DM Serif Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../../aset/font/DMSerifDisplay-italic.woff2') format('woff2');
}

/* Modern Vows — asymmetric editorial typography, softened by a serif
   ampersand and vows. Photography and a single fine rule carry the page. */
:root {
    --font-display: 'Figtree', system-ui, sans-serif;
    --font-body: 'Figtree', system-ui, sans-serif;
    --font-label: 'Figtree', system-ui, sans-serif;
    --radius: 0; --radius-btn: 0;
    --paper-texture: url('../../aset/undangan/shared/cotton-paper-v3.webp?ver=2.41.0');
    --paper-wash: color-mix(in srgb, var(--c-bg) 84%, transparent);
    --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M25 15h50' stroke='black'/%3E%3C/svg%3E");
}
:root:is([data-palet="navy"], [data-palet="zamrud"], [data-palet="arang"]) { --paper-wash: color-mix(in srgb, var(--c-bg) 91%, transparent); }
body.undangan-body, #undangan-isi {
    background-color: var(--c-bg);
    background-image: linear-gradient(var(--paper-wash), var(--paper-wash)), var(--paper-texture);
    background-size: auto, 560px auto;
}
.gate { --cover-ink: var(--c-ink); }
.gate::before, .gate.has-photo::before { background: linear-gradient(var(--paper-wash), var(--paper-wash)), var(--paper-texture) center / 560px auto, var(--c-bg); animation: none; }
.gate::after { background: none; }
.gate .invitation-art, .hero .invitation-art, .penutup .invitation-art { display: none; }
.gate-inner { padding: 36px 34px; align-items: stretch; justify-content: flex-start; justify-content: safe center; gap: 18px; text-align: left; }
.gate.has-photo .gate-inner { text-shadow: none; }
.seal { display: none; }
/* Reorder the decorative panel between names and recipient without changing
   the semantic text order or the photo-preview message boundary. */
.gate-bawah { display: contents; }
.gate-bawah > * { flex: none; }
.date-art { display: block; font: 400 24px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--c-gold-teks); }
.gate .date-art { order: 0; align-self: stretch; text-align: right; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); }
.cover-names, .hero-names { font-size: clamp(42px, 12.8vw, 60px); font-weight: 300; line-height: 1.13; letter-spacing: -.035em; padding: 0; text-align: left; }
.gate .cover-names { order: 1; margin: 0; }
.cover-names .amp { font-family: 'DM Serif Display', Georgia, serif; font-size: .63em; font-weight: 400; font-style: italic; line-height: 1.15; margin: 6px 0; color: var(--c-gold-teks); }
.gate-visual { display: none; }
.gate.has-photo .gate-visual {
    order: 2; display: block; flex: none; width: 100%; height: 182px;
    background: var(--cover-image) var(--foto-preview-position, 50% 50%) / cover no-repeat;
    filter: grayscale(1); pointer-events: none;
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    .gate.has-photo .gate-visual { background-image: var(--cover-image-set, var(--cover-image)); }
}
.cover-date { font-size: 16px; letter-spacing: .015em; line-height: 1.5; }
.gate .cover-date, .gate .tgl-hijriah { order: 3; }
.gate-tamu { order: 4; padding: 4px 0 0; margin: 0; border: 0; background: none; text-align: left; backdrop-filter: none; -webkit-backdrop-filter: none; }
.gate-tamu-label { color: var(--c-ink-soft); opacity: 1; font-size: 14px; letter-spacing: .025em; text-transform: none; }
.gate .guest-name { font: 400 18px/1.3 var(--font-body); color: var(--c-ink); }
.gate .btn-open { order: 5; align-self: flex-start; background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-ink); box-shadow: none; margin-top: 0; min-height: 48px; padding-inline: 28px; }
.gate .btn-open:hover, .gate .btn-open:focus-visible { background: var(--c-accent); color: var(--c-accent-ink); }
.gate .tgl-hijriah { color: var(--c-ink-soft); }
.hero { display: flex; flex-direction: column; min-height: 680px; padding: 44px 32px 60px; text-align: left; }
.hero-copy { order: 0; }
.hero .date-art { display: block; text-align: right; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); font-size: 24px; }
.hero-names { margin: 0; }
.hero-tanggal { justify-content: flex-start; margin-top: 22px; }
.hero-tanggal p { font-size: 16px; color: var(--c-ink); letter-spacing: .015em; }
.hero-tanggal i { display: none; }
.hero-hijriah { text-align: left; }
.hero-arch { order: 1; margin: 30px 0 0; width: 100%; border: 0; padding: 0; border-radius: 0; }
.hero-arch-foto { height: 248px; border-radius: 0; }
.hero-arch-foto img { width: 100%; height: 100%; margin: 0; object-fit: cover; filter: grayscale(1); }
.hero.without-photo { justify-content: center; min-height: 620px; }
.section { padding: 72px 32px 80px; text-align: left; }
.section + .section::before { width: calc(100% - 64px); background: var(--c-line); }
.section-title, .label-atas { text-align: left; }
.section-title { font: 500 26px/1.2 var(--font-body); letter-spacing: -.025em; }
.section-title::after, .label-atas::after { display: none; }
.mempelai-nama, .penutup-nama { font-weight: 500; letter-spacing: -.025em; }
.mempelai-card { text-align: left; border-top: 1px solid var(--c-line); padding-block: 26px; }
.arch-inisial { display: block; width: auto; height: auto; margin: 0 0 14px; border: 0; border-radius: 0; background: none; font: 400 58px/1 var(--font-display); color: var(--c-gold-teks); }
.mempelai-nama { font-size: clamp(28px, 7.8vw, 34px); font-weight: 400; }
.mempelai-amp { font-family: 'DM Serif Display', Georgia, serif; font-style: italic; font-size: 32px; margin-block: 20px; }
.salam .acara-diamond, .acara-diamond { display: none; }
.salam-teks, .prose, .salam-ayat p { text-align: left; }
.salam-ayat p, .penutup-teks { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-style: italic; font-size: 19px; line-height: 1.7; }
.cd-num { font-weight: 400; }
.acara-card { padding: 28px 0; border: 0; border-top: 1px solid var(--c-line); background: transparent; box-shadow: none; text-align: left; }
.acara-jenis { font-style: normal; font-weight: 500; }
.acara-tanggal { font-weight: 500; }
.lokasi-nama { font-weight: 600; }
.galeri-bingkai { padding: 0; border: 0; border-radius: 0; }
.galeri-slider { border-radius: 0; height: 400px; }
.galeri-sel { border-radius: 0; }
.galeri-dots { justify-content: flex-start; }
.galeri-hint { text-align: left; }
.kisah-foto::after { display: none; }
.love-story .prose::before { display: none; }
.kisah-timeline { margin-inline: 0; }
.penutup .ornament { display: none; }
.penutup { padding-top: 90px; padding-bottom: 100px; }
.penutup .btn { margin-top: 12px; }
.turut { margin-left: 0; }
.turut::before { margin-left: 0; }
@media (max-width: 375px) { .hero { padding-inline: 28px; } .gate-inner { padding-inline: 30px; } .hero-arch-foto { height: 220px; } }
@media (max-height: 760px) {
    .gate-inner { padding-block: 28px; gap: 14px; }
    .gate.has-photo .gate-visual { height: 138px; }
    .gate .cover-names { font-size: 42px; }
}
@media (max-height: 600px) {
    .gate-inner { justify-content: flex-start; padding-block: 24px; gap: 14px; }
    .gate.has-photo .gate-visual { display: none; }
    .gate .date-art { font-size: 20px; padding-bottom: 12px; }
    .gate .cover-names { font-size: 34px; }
}