/* =============================================================
   WED-INV — HALAMAN DEPAN
   =============================================================

   Palet ini sengaja berbeda dari ketiga palet lain yang sudah
   ada di proyek ini: bukan nila panel admin, bukan marun panel
   client, dan bukan warna satu pun dari kelima tema undangan.
   Hijau pinus tua dipilih sebagai identitas utama karena terasa
   tenang dan tepercaya -- cocok untuk halaman yang menjual jasa,
   bukan menampilkan undangan itu sendiri.

   Elemen utamanya BUKAN ikon abstrak: kelima kartu tema yang
   sungguhan, masing-masing memakai warna aslinya sendiri, adalah
   produk yang sesungguhnya ditampilkan apa adanya.
   ============================================================= */

:root {
    --bg:           #F3EEE1;
    --ink:          #232620;
    --brand:        #145048;
    --brand-terang: #1F6B60;
    --aksen:        #C1622E;
    --kabur:        #6B6252;
    --garis:        #DDD4BF;
    --kartu:        #FFFFFF;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.bingkai {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    color: var(--brand);
}

p { margin: 0; }

a { color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--aksen);
    outline-offset: 2px;
}


/* =============================================================
   NAVIGASI
   ============================================================= */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(243, 238, 225, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--garis);
}

.nav-isi {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 16px 24px;
    max-width: 1120px;
    margin: 0 auto;
}

.merek-depan {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--brand);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    margin-right: auto;
}

.merek-depan-segel {
    /* Logo sudah membawa bentuknya sendiri (sulur, monogram) --
       tidak perlu lagi bingkai lingkaran tambahan seperti versi
       sebelumnya yang berupa inisial teks polos. */
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.nav-tautan {
    display: flex;
    gap: 22px;
}

.nav-tautan a {
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
}

.nav-tautan a:hover { color: var(--brand); }

.nav-masuk {
    font-size: 13px;
    color: var(--kabur);
    text-decoration: none;
    border-bottom: 1px solid var(--garis);
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 22px;
    color: var(--brand);
    cursor: pointer;
}


/* =============================================================
   HERO
   ============================================================= */

.hero {
    padding: 76px 0 88px;
}

.hero-tata {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.hero-judul {
    font-size: clamp(34px, 4.6vw, 52px);
    letter-spacing: -.01em;
}

.hero-judul em {
    font-style: italic;
    color: var(--aksen);
}

.hero-sub {
    margin-top: 20px;
    font-size: 17px;
    color: var(--kabur);
    max-width: 46ch;
    line-height: 1.65;
}

.hero-aksi {
    display: flex;
    gap: 14px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.tombol-utama {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    background: var(--aksen);
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 600;
}

.tombol-utama:hover { background: #A8531F; }

.tombol-kedua {
    display: inline-flex;
    align-items: center;
    padding: 13px 22px;
    color: var(--brand);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1.5px solid var(--brand);
}

/* --- Tumpukan kartu tema: elemen penanda halaman ini --- */

.tumpukan-tema {
    position: relative;
    height: 400px;
}

.kartu-tema-hero {
    position: absolute;
    width: 208px;
    height: 300px;
    border-radius: 3px;
    box-shadow: 0 18px 40px rgba(35, 38, 32, .18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px;
    font-family: 'Fraunces', Georgia, serif;
    /* WAJIB ADA: kartu ini sekarang bisa berisi foto pratinjau
       tema sungguhan (screenshot). Tanpa overflow:hidden di sini,
       screenshot berproporsi potret (misal 720x1200) akan
       menghitung tinggi otomatis lebih dari 300px lewat aturan
       global "img { height: auto }" dan meluber keluar kartu di
       layar desktop -- merusak efek kartu bertumpuk yang jadi ciri
       khas bagian hero ini. */
    overflow: hidden;
}

.kartu-tema-hero img {
    /* Berlaku di SEMUA ukuran layar, bukan hanya HP. Mengisi
       penuh kartu dan memotong bagian yang tidak muat, bukan
       menambah tinggi kartu mengikuti proporsi foto. */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.kartu-tema-hero .kartu-nama {
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 6px;
}

.kartu-tema-hero .kartu-label {
    font-family: 'Work Sans', sans-serif;
    font-size: 10.5px;
    letter-spacing: .12em;
    opacity: .72;
}

/* Posisi dan kemiringan tiap kartu diatur satu per satu, meniru
   sampel kartu undangan yang dikipas di atas meja -- bukan grid
   seragam berbayang sama, karena kartu ini memang benda nyata
   dengan warna aslinya masing-masing, bukan dekorasi abstrak. */
.kartu-tema-hero:nth-child(1) { left: 0;   top: 40px;  transform: rotate(-7deg); z-index: 1; }
.kartu-tema-hero:nth-child(2) { left: 70px; top: 8px;   transform: rotate(-2deg); z-index: 2; }
.kartu-tema-hero:nth-child(3) { left: 140px; top: 0;    transform: rotate(3deg);  z-index: 3; }
.kartu-tema-hero:nth-child(4) { left: 205px; top: 20px; transform: rotate(8deg);  z-index: 2; }
.kartu-tema-hero:nth-child(5) { left: 260px; top: 60px; transform: rotate(13deg); z-index: 1; }


/* =============================================================
   FITUR
   ============================================================= */

.fitur {
    padding: 64px 0;
    border-top: 1px solid var(--garis);
}

.fitur-judul { font-size: 28px; max-width: 24ch; }

.fitur-daftar {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 40px;
}

.fitur-item { display: flex; gap: 14px; }

.fitur-tanda {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-top: 2px;
}

.fitur-teks h3 {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

.fitur-teks p {
    font-size: 14px;
    color: var(--kabur);
    line-height: 1.55;
}


/* =============================================================
   TEMA
   ============================================================= */

.tema-bagian {
    padding: 64px 0;
    border-top: 1px solid var(--garis);
}

.tema-judul { font-size: 28px; }
.tema-sub { margin-top: 10px; color: var(--kabur); font-size: 15px; max-width: 52ch; }

.grid-tema {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.kartu-tema {
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--garis);
}

.kartu-tema-warna {
    position: relative;
    /* Rasio 3:5 mendekati proporsi screenshot HP sungguhan, jadi
       kotaknya menyesuaikan sendiri di berbagai lebar layar
       (5 kolom di desktop, 2 kolom di HP) tanpa perlu tinggi
       tetap yang sering memotong bagian penting gambar. */
    aspect-ratio: 3 / 5;
    overflow: hidden;
}

@supports not (aspect-ratio: 3 / 5) {
    .kartu-tema-warna { height: 320px; }
}

.kartu-tema-warna img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain, BUKAN cover -- seluruh screenshot harus selalu
       utuh terlihat, tidak terpotong di bagian mana pun. Warna
       latar tema sendiri (diisi lewat inline style di index.php)
       mengisi ruang yang tersisa sebagai bingkai alami, bukan
       kotak putih kosong yang terasa seperti kesalahan. */
    object-fit: contain;
}

.kartu-tema-info { padding: 14px; background: var(--kartu); }

.kartu-tema-info h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

.kartu-tema-info p {
    font-size: 12.5px;
    color: var(--kabur);
    line-height: 1.5;
}


/* =============================================================
   PAKET (tabel perbandingan sungguhan, bukan kartu seragam)
   ============================================================= */

.paket-bagian {
    padding: 64px 0;
    border-top: 1px solid var(--garis);
}

.paket-judul { font-size: 28px; }
.paket-sub { margin-top: 10px; color: var(--kabur); font-size: 15px; }

.tabel-bungkus {
    margin-top: 36px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.tabel-paket {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

table.tabel-paket th, table.tabel-paket td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid var(--garis);
    font-size: 13.5px;
}

table.tabel-paket thead th {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--brand);
    vertical-align: top;
    padding-top: 20px;
}

table.tabel-paket .harga-paket {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--aksen);
    margin-top: 4px;
}

table.tabel-paket .durasi-paket {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--kabur);
    margin-top: 2px;
}

table.tabel-paket tbody th {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}

table.tabel-paket td { color: var(--kabur); text-align: center; }

table.tabel-paket .cek { color: var(--brand); font-weight: 700; }
table.tabel-paket .silang { color: var(--garis); }

.paket-cta-baris td, .paket-cta-baris th {
    border-bottom: 0;
    padding-top: 20px;
}

.tombol-paket {
    display: inline-block;
    padding: 8px 16px;
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 12.5px;
    font-weight: 600;
}

.tombol-paket:hover { background: var(--brand-terang); }


/* =============================================================
   LANGKAH PEMESANAN (sequence sungguhan -- nomor dipakai secara sah)
   ============================================================= */

.langkah-bagian {
    padding: 64px 0;
    border-top: 1px solid var(--garis);
}

.langkah-judul { font-size: 28px; }

.daftar-langkah {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.langkah-nomor {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 34px;
    font-weight: 600;
    color: var(--garis);
    line-height: 1;
    margin-bottom: 10px;
}

.langkah-item h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.langkah-item p {
    font-size: 13.5px;
    color: var(--kabur);
    line-height: 1.55;
}


/* =============================================================
   PENUTUP
   ============================================================= */

.cta-bagian {
    padding: 72px 0;
    background: var(--brand);
    color: #fff;
    text-align: center;
}

.cta-bagian h2 {
    color: #fff;
    font-size: 30px;
    max-width: 26ch;
    margin: 0 auto;
}

.cta-bagian p {
    margin-top: 14px;
    color: rgba(255, 255, 255, .78);
    font-size: 15px;
}

.cta-bagian .tombol-utama { margin-top: 26px; }


/* =============================================================
   KAKI
   ============================================================= */

.kaki-depan {
    padding: 32px 0;
    text-align: center;
    color: var(--kabur);
    font-size: 12.5px;
}

.kaki-depan a { color: var(--kabur); }


/* =============================================================
   LAYAR KECIL
   ============================================================= */

@media (max-width: 860px) {
    .hero-tata { grid-template-columns: 1fr; gap: 48px; }
    .tumpukan-tema { height: 300px; max-width: 340px; margin: 0 auto; }
    .kartu-tema-hero { width: 168px; height: 240px; padding: 16px; }
    .fitur-daftar { grid-template-columns: 1fr; }
    .grid-tema { grid-template-columns: repeat(2, 1fr); }
    .daftar-langkah { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .nav-tautan, .nav-masuk { display: none; }
    .nav-toggle { display: block; }
    .nav.terbuka .nav-tautan {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg);
        padding: 16px 24px 20px;
        border-bottom: 1px solid var(--garis);
        gap: 14px;
    }
    .nav.terbuka .nav-masuk { display: block; margin-top: 4px; }
    .grid-tema { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}