/* ============================================================
   FREE LAYOUTS — identitas bentuk tiap tema FREE.
   Tema 02, 03, 04, 06, 07, 09, 11, 12, 15, 16 sebelumnya hanya
   ganti palet + bunga dari tema-01. File ini memberi tiap tema
   bentuknya sendiri: bingkai foto sampul, foto mempelai + story,
   tampilan tanggal. Urutan section + nav SAMA seperti tema-01.
   Pola: sama seperti premium-layouts.css —
   override per [data-tema], global.css tidak diubah.
   Aturan desain: tanpa uppercase, tanpa letter-spacing, tanpa bold.
   Pelajaran dari ronde premium: sembunyikan KETIGA lapisan
   heksagon (frame::before/::after, .cover-section-photo::before,
   .cover-photo::before) di tiap tema; ellipse di kotak persegi
   jadi lingkaran, jadi oval butuh kotak tidak persegi.
   ============================================================ */

/* ==================== TEMA-02 TAMAN — Lingkaran ==================== */

/* Bingkai sampul lingkaran. */
html[data-tema="tema-02"] .cover-photo-frame {
    clip-path: ellipse(50% 50% at 50% 50%);
}
html[data-tema="tema-02"] .cover-photo-frame::before,
html[data-tema="tema-02"] .cover-photo-frame::after { display: none; }

/* Lapisan heksagon emas di belakang bingkai (wrapper) ikut disembunyikan. */
html[data-tema="tema-02"] .cover-photo::before { display: none; }

/* Bunga di sekeliling foto sampul (section), sama seperti cover modal:
   kanan-atas + kiri-bawah (bawah dibalik vertikal: 2 lili atas, 1 bawah). */
html[data-tema="tema-02"] .cover-section-photo::before {
    content: '';
    position: absolute;
    width: 50%;
    height: auto;
    aspect-ratio: 584 / 430;
    top: 2.5%;
    right: 5%;
    background-image: url('../images/flower-bouquet-taman.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    clip-path: none;
    transform: rotate(27deg);
    opacity: 0.95;
    z-index: 3;
    pointer-events: none;
    filter: var(--ornament-filter);
}
html[data-tema="tema-02"] .cover-section-photo::after {
    content: '';
    position: absolute;
    width: 50%;
    height: auto;
    aspect-ratio: 584 / 430;
    bottom: 2.5%;
    left: 5%;
    background-image: url('../images/flower-bouquet-taman.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    clip-path: none;
    transform: rotate(27deg) scaleX(-1) scaleY(-1);
    opacity: 0.95;
    z-index: 3;
    pointer-events: none;
    filter: var(--ornament-filter);
}

/* Ornamen sudut atas-kiri + bawah-kanan dihilangkan (modal + semua
   section). Divider tengah + background bunga modal dibiarkan. */
html[data-tema="tema-02"] .cover-ornament-tl,
html[data-tema="tema-02"] .cover-ornament-br,
html[data-tema="tema-02"] .section-ornament-tl,
html[data-tema="tema-02"] .section-ornament-br { display: none; }

/* Jarak atas section ber-divider dirapatkan seperti section acara:
   gambar divider dipotong bagian transparannya (atas 25% + bawah 22%
   dari file aslinya kosong) supaya bunganya tidak jauh dari tepi atas. */
html[data-tema="tema-02"] .flower-divider {
    height: 64px;
    object-fit: cover;
    object-position: center;
    margin-bottom: 0.5rem;
}

/* Galeri: konten jangan di tengah vertikal (kartu min-height 100vh
   bikin judul jauh dari tepi atas) — ratakan ke atas seperti acara,
   dan kartu dibuat seukuran isi supaya jarak atas-bawah sinkron
   tanpa ruang kosong berlebih di bawah. */
html[data-tema="tema-02"] #section-gallery .section-card {
    justify-content: flex-start;
    min-height: 0;
}

/* Mempelai + Cerita: bawah kartu masih berlebih (terukur 85px /
   122px) karena min-height 100vh + konten di tengah vertikal —
   samakan dengan galeri: kartu seukuran isi. */
html[data-tema="tema-02"] #section-couple .section-card,
html[data-tema="tema-02"] #section-story .section-card {
    min-height: 0;
}

/* Mempelai: 85px di atas ternyata bukan dari min-height, melainkan
   margin bawah teks penutup (.section-text, spacing-xl) + padding
   kartu — hilangkan margin elemen terakhir supaya bawah kartu
   tinggal padding saja seperti galeri/acara. */
html[data-tema="tema-02"] #section-couple .section-inner > :last-child {
    margin-bottom: 0;
}

/* Bunga sampul kiri-bawah di modal: posisi + sudutnya tetap seperti awal
   (27deg), tapi dibalik vertikal — 2 lili di atas, 1 lili di bawah. */
html[data-tema="tema-02"] .cover-photo-floral-bl {
    transform: rotate(27deg) scaleX(-1) scaleY(-1);
}

/* Foto mempelai + story ikut lingkaran. */
html[data-tema="tema-02"] .couple-photo::before { display: none; }
html[data-tema="tema-02"] .couple-card-img {
    clip-path: ellipse(50% 50% at 50% 50%);
}
html[data-tema="tema-02"] .story-node::before { display: none; }
html[data-tema="tema-02"] .story-node-img {
    clip-path: ellipse(50% 50% at 50% 50%);
}

/* Tanggal dalam pita lembut tanpa garis. */
html[data-tema="tema-02"] .cover-date-display {
    background: rgb(var(--rgb-primary-light) / 0.16);
    border-radius: 8px;
    padding: 0.5rem 0.25rem;
}
html[data-tema="tema-02"] .cover-date-display .date-part,
html[data-tema="tema-02"] .cover-date-display .date-center { border: none; }

/* ==================== TEMA-03 BIRU SENJA — Berlian ==================== */

/* Bingkai sampul berlian (belah ketupat). */
html[data-tema="tema-03"] .cover-photo-frame {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
html[data-tema="tema-03"] .cover-photo-frame::before,
html[data-tema="tema-03"] .cover-photo-frame::after { display: none; }

/* Lapisan heksagon emas di belakang bingkai (wrapper) ikut disembunyikan. */
html[data-tema="tema-03"] .cover-section-photo::before { display: none; }
html[data-tema="tema-03"] .cover-photo::before { display: none; }

/* Foto mempelai + story ikut berlian. */
html[data-tema="tema-03"] .couple-photo::before { display: none; }
html[data-tema="tema-03"] .couple-card-img {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
html[data-tema="tema-03"] .story-node::before { display: none; }
html[data-tema="tema-03"] .story-node-img {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Tanggal dalam kotak garis putus-putus. */
html[data-tema="tema-03"] .cover-date-display {
    border: 1px dashed var(--color-primary);
    border-radius: 8px;
    padding: 0.5rem 0.25rem;
}
html[data-tema="tema-03"] .cover-date-display .date-part,
html[data-tema="tema-03"] .cover-date-display .date-center { border: none; }

/* ==================== TEMA-04 TANAH — Trapesium ==================== */

/* Bingkai sampul trapesium (menyempit ke bawah). */
html[data-tema="tema-04"] .cover-photo-frame {
    clip-path: polygon(0% 0%, 100% 0%, 86% 100%, 14% 100%);
}
html[data-tema="tema-04"] .cover-photo-frame::before,
html[data-tema="tema-04"] .cover-photo-frame::after { display: none; }

/* Lapisan heksagon emas di belakang bingkai (wrapper) ikut disembunyikan. */
html[data-tema="tema-04"] .cover-section-photo::before { display: none; }
html[data-tema="tema-04"] .cover-photo::before { display: none; }

/* Foto mempelai + story ikut trapesium. */
html[data-tema="tema-04"] .couple-photo::before { display: none; }
html[data-tema="tema-04"] .couple-card-img {
    clip-path: polygon(0% 0%, 100% 0%, 86% 100%, 14% 100%);
}
html[data-tema="tema-04"] .story-node::before { display: none; }
html[data-tema="tema-04"] .story-node-img {
    clip-path: polygon(0% 0%, 100% 0%, 86% 100%, 14% 100%);
}

/* Tanggal dalam pita penuh warna utama, teks krem. */
html[data-tema="tema-04"] .cover-date-display {
    background: var(--color-primary);
    border-radius: 8px;
    padding: 0.5rem 0.25rem;
}
html[data-tema="tema-04"] .cover-date-display .date-part,
html[data-tema="tema-04"] .cover-date-display .date-center { border: none; }
html[data-tema="tema-04"] .cover-date-display .date-day,
html[data-tema="tema-04"] .cover-date-display .date-number,
html[data-tema="tema-04"] .cover-date-display .date-month,
html[data-tema="tema-04"] .cover-date-display .date-year { color: var(--color-cream); }

/* ==================== TEMA-06 MELATI — Lingkaran ==================== */

/* Bingkai sampul lingkaran penuh. */
html[data-tema="tema-06"] .cover-photo-frame {
    clip-path: ellipse(50% 50% at 50% 50%);
}
html[data-tema="tema-06"] .cover-photo-frame::before,
html[data-tema="tema-06"] .cover-photo-frame::after { display: none; }

/* Lapisan heksagon emas di belakang bingkai (wrapper) ikut disembunyikan. */
html[data-tema="tema-06"] .cover-section-photo::before { display: none; }
html[data-tema="tema-06"] .cover-photo::before { display: none; }

/* Foto mempelai + story ikut lingkaran. */
html[data-tema="tema-06"] .couple-photo::before { display: none; }
html[data-tema="tema-06"] .couple-card-img {
    clip-path: ellipse(50% 50% at 50% 50%);
}
html[data-tema="tema-06"] .story-node::before { display: none; }
html[data-tema="tema-06"] .story-node-img {
    clip-path: ellipse(50% 50% at 50% 50%);
}

/* Angka tanggal di dalam cincin. */
html[data-tema="tema-06"] .cover-date-display .date-part,
html[data-tema="tema-06"] .cover-date-display .date-center { border: none; }
html[data-tema="tema-06"] .cover-date-display .date-number {
    width: 84px;
    height: 84px;
    border: 2px solid var(--color-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================== TEMA-07 SAKURA — Blob organik ==================== */

/* Bingkai sampul blob organik (lengkung tak beraturan, lembut). */
html[data-tema="tema-07"] .cover-photo-frame {
    clip-path: none;
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
}
html[data-tema="tema-07"] .cover-photo-frame::before,
html[data-tema="tema-07"] .cover-photo-frame::after { display: none; }

/* Lapisan heksagon emas di belakang bingkai (wrapper) ikut disembunyikan. */
html[data-tema="tema-07"] .cover-section-photo::before { display: none; }
html[data-tema="tema-07"] .cover-photo::before { display: none; }

/* Foto mempelai + story ikut blob. */
html[data-tema="tema-07"] .couple-photo::before { display: none; }
html[data-tema="tema-07"] .couple-card-img {
    clip-path: none;
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
}
html[data-tema="tema-07"] .story-node::before { display: none; }
html[data-tema="tema-07"] .story-node-img {
    clip-path: none;
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
}

/* Tanggal: angka + bulan di dalam lingkaran lembut. */
html[data-tema="tema-07"] .cover-date-display .date-part { border: none; }
html[data-tema="tema-07"] .cover-date-display .date-center {
    width: 102px;
    height: 102px;
    border: 2px solid var(--color-primary-light);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
html[data-tema="tema-07"] .cover-date-display .date-center .date-number {
    font-size: 2.5rem;
    line-height: 1;
}
html[data-tema="tema-07"] .cover-date-display .date-center .date-month {
    line-height: 1.1;
}

/* ==================== TEMA-09 MATAHARI — Oktagon ==================== */

/* Bingkai sampul oktagon (matahari bersegi delapan). */
html[data-tema="tema-09"] .cover-photo-frame {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
html[data-tema="tema-09"] .cover-photo-frame::before,
html[data-tema="tema-09"] .cover-photo-frame::after { display: none; }

/* Lapisan heksagon emas di belakang bingkai (wrapper) ikut disembunyikan. */
html[data-tema="tema-09"] .cover-section-photo::before { display: none; }
html[data-tema="tema-09"] .cover-photo::before { display: none; }

/* Foto mempelai + story ikut oktagon. */
html[data-tema="tema-09"] .couple-photo::before { display: none; }
html[data-tema="tema-09"] .couple-card-img {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
html[data-tema="tema-09"] .story-node::before { display: none; }
html[data-tema="tema-09"] .story-node-img {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* Tanggal dalam pil gradasi emas. */
html[data-tema="tema-09"] .cover-date-display {
    background: linear-gradient(90deg, rgb(var(--rgb-gold) / 0.3), rgb(var(--rgb-gold) / 0.12));
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}
html[data-tema="tema-09"] .cover-date-display .date-part,
html[data-tema="tema-09"] .cover-date-display .date-center { border: none; }

/* ==================== TEMA-11 JAWA — Pentagon pendopo ==================== */

/* Bingkai sampul pentagon (atap pendopo). */
html[data-tema="tema-11"] .cover-photo-frame {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
html[data-tema="tema-11"] .cover-photo-frame::before,
html[data-tema="tema-11"] .cover-photo-frame::after { display: none; }

/* Lapisan heksagon emas di belakang bingkai (wrapper) ikut disembunyikan. */
html[data-tema="tema-11"] .cover-section-photo::before { display: none; }
html[data-tema="tema-11"] .cover-photo::before { display: none; }

/* Foto mempelai + story ikut pentagon. */
html[data-tema="tema-11"] .couple-photo::before { display: none; }
html[data-tema="tema-11"] .couple-card-img {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
html[data-tema="tema-11"] .story-node::before { display: none; }
html[data-tema="tema-11"] .story-node-img {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* Tanggal diapit garis emas, angka emas. */
html[data-tema="tema-11"] .cover-date-display {
    border-top: 2px solid var(--color-gold);
    border-bottom: 2px solid var(--color-gold);
    padding: 0.25rem 0;
}
html[data-tema="tema-11"] .cover-date-display .date-part,
html[data-tema="tema-11"] .cover-date-display .date-center { border: none; }
html[data-tema="tema-11"] .cover-date-display .date-number { color: var(--color-gold); }

/* ==================== TEMA-12 SUNDA — Oval lebar ==================== */

/* Bingkai sampul oval melebar (kotak tidak persegi, jadi bukan lingkaran). */
html[data-tema="tema-12"] .cover-photo-frame {
    width: 88%;
    height: 74%;
    clip-path: ellipse(50% 50% at 50% 50%);
}
html[data-tema="tema-12"] .cover-photo-frame::before,
html[data-tema="tema-12"] .cover-photo-frame::after { display: none; }

/* Lapisan heksagon emas di belakang bingkai (wrapper) ikut disembunyikan. */
html[data-tema="tema-12"] .cover-section-photo::before { display: none; }
html[data-tema="tema-12"] .cover-photo::before { display: none; }

/* Foto mempelai + story ikut oval lebar (posisi condong ke atas agar wajah aman). */
html[data-tema="tema-12"] .couple-photo::before { display: none; }
html[data-tema="tema-12"] .couple-card-img {
    width: 96%;
    height: 82%;
    clip-path: ellipse(50% 50% at 50% 50%);
    object-position: center 25%;
}
html[data-tema="tema-12"] .story-node::before { display: none; }
html[data-tema="tema-12"] .story-node-img {
    width: 56px;
    height: 44px;
    clip-path: ellipse(50% 50% at 50% 50%);
    object-position: center 25%;
}

/* Tanggal minimal: tanpa garis, jarak antar bagian lebih lega. */
html[data-tema="tema-12"] .cover-date-display { gap: 1.5rem; }
html[data-tema="tema-12"] .cover-date-display .date-part,
html[data-tema="tema-12"] .cover-date-display .date-center { border: none; }

/* ==================== TEMA-15 SYAR'I HIJAU — Mihrab ==================== */

/* Bingkai sampul mihrab (lengkung runcing menyempit). */
html[data-tema="tema-15"] .cover-photo-frame {
    clip-path: polygon(50% 0%, 88% 18%, 88% 100%, 12% 100%, 12% 18%);
}
html[data-tema="tema-15"] .cover-photo-frame::before,
html[data-tema="tema-15"] .cover-photo-frame::after { display: none; }

/* Lapisan heksagon emas di belakang bingkai (wrapper) ikut disembunyikan. */
html[data-tema="tema-15"] .cover-section-photo::before { display: none; }
html[data-tema="tema-15"] .cover-photo::before { display: none; }

/* Foto mempelai + story ikut mihrab. */
html[data-tema="tema-15"] .couple-photo::before { display: none; }
html[data-tema="tema-15"] .couple-card-img {
    clip-path: polygon(50% 0%, 88% 18%, 88% 100%, 12% 100%, 12% 18%);
}
html[data-tema="tema-15"] .story-node::before { display: none; }
html[data-tema="tema-15"] .story-node-img {
    clip-path: polygon(50% 0%, 88% 18%, 88% 100%, 12% 100%, 12% 18%);
}

/* Tanggal dalam bingkai ganda (garis + outline). */
html[data-tema="tema-15"] .cover-date-display {
    border: 1px solid var(--color-primary);
    outline: 1px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 8px;
    padding: 0.5rem 0.25rem;
}
html[data-tema="tema-15"] .cover-date-display .date-part,
html[data-tema="tema-15"] .cover-date-display .date-center { border: none; }

/* ==================== TEMA-16 SYAR'I PUTIH — Pita ==================== */

/* Bingkai sampul pita (ujung bawah meruncing ke tengah). */
html[data-tema="tema-16"] .cover-photo-frame {
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 50% 100%, 0% 88%);
}
html[data-tema="tema-16"] .cover-photo-frame::before,
html[data-tema="tema-16"] .cover-photo-frame::after { display: none; }

/* Lapisan heksagon emas di belakang bingkai (wrapper) ikut disembunyikan. */
html[data-tema="tema-16"] .cover-section-photo::before { display: none; }
html[data-tema="tema-16"] .cover-photo::before { display: none; }

/* Foto mempelai + story ikut pita. */
html[data-tema="tema-16"] .couple-photo::before { display: none; }
html[data-tema="tema-16"] .couple-card-img {
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 50% 100%, 0% 88%);
}
html[data-tema="tema-16"] .story-node::before { display: none; }
html[data-tema="tema-16"] .story-node-img {
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 50% 100%, 0% 88%);
}

/* Tanggal tersusun vertikal (hari, angka + bulan, tahun), tanpa garis. */
html[data-tema="tema-16"] .cover-date-display {
    flex-direction: column;
    align-items: center;
    gap: 0;
}
html[data-tema="tema-16"] .cover-date-display .date-part,
html[data-tema="tema-16"] .cover-date-display .date-center { border: none; }