@php
    $bride = $invitation->bride ?? [
        'name' => 'Sari Puspitasari, S.Pd',
        'nickname' => 'Sari',
        'parents' => 'Bapak H. Asep Sunandar & Ibu Hj. Euis Kartini',
        'photo' => 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80',
        'instagram' => '@saripuspita',
    ];
    $groom = $invitation->groom ?? [
        'name' => 'Raka Nugraha, S.T',
        'nickname' => 'Raka',
        'parents' => 'Bapak H. Dadang Suryana & Ibu Hj. Neneng Rohaeti',
        'photo' => 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=600&q=80',
        'instagram' => '@rakanugraha',
    ];
    $coverPhoto = $invitation->cover_photo ?? 'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=800&q=80';
    $events = $invitation->events ?? [
        [
            'title' => 'Akad Nikah (Ijab Qabul)',
            'date' => '2026-12-20',
            'start_time' => '08:00',
            'end_time' => '10:00',
            'timezone' => 'WIB',
            'venue' => 'Masjid Al-Ikhlas',
            'address' => 'Jl. Braga No. 12, Bandung',
            'maps_url' => 'https://maps.google.com',
        ],
        [
            'title' => 'Resepsi Pernikahan',
            'date' => '2026-12-20',
            'start_time' => '11:00',
            'end_time' => '14:00',
            'timezone' => 'WIB',
            'venue' => 'Sasana Kujang Hall',
            'address' => 'Jl. Asia Afrika No. 5, Bandung',
            'maps_url' => 'https://maps.google.com',
        ],
    ];
    $primaryEvent = $events[0] ?? null;
    $eventDate = $primaryEvent['date'] ?? '2026-12-20';
    $eventTime = $primaryEvent['start_time'] ?? '08:00';
    $carbonDate = \Carbon\Carbon::parse($eventDate);
    $formattedDate = $carbonDate->locale('id')->isoFormat('dddd, D MMMM Y');

    $galleries = $invitation->gallery ?? [
        'https://images.unsplash.com/photo-1583939003579-730e3918a45a?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1522673607200-164d1b6ce486?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1520854221256-17451cc331bf?auto=format&fit=crop&w=600&q=80',
    ];

    $rawBankAccounts = !empty($invitation->bank_accounts) ? $invitation->bank_accounts : (!empty($invitation->gifts) ? $invitation->gifts : null);
    if (empty($rawBankAccounts) && !empty($invitation->bank_name)) {
        $rawBankAccounts = [
            [
                'bank_name' => $invitation->bank_name,
                'bank' => $invitation->bank_name,
                'account_number' => $invitation->bank_account ?? '',
                'number' => $invitation->bank_account ?? '',
                'account_holder' => $invitation->bank_holder ?? 'Mempelai',
                'name' => $invitation->bank_holder ?? 'Mempelai',
            ]
        ];
    }
    $gifts = !empty($rawBankAccounts) ? $rawBankAccounts : [
        [
            'bank_name' => 'Bank BCA',
            'bank' => 'Bank BCA',
            'account_number' => '1234567890',
            'number' => '1234567890',
            'account_holder' => 'Sari Puspitasari',
            'name' => 'Sari Puspitasari',
        ],
        [
            'bank_name' => 'Bank Mandiri',
            'bank' => 'Bank Mandiri',
            'account_number' => '9876543210',
            'number' => '9876543210',
            'account_holder' => 'Raka Nugraha',
            'name' => 'Raka Nugraha',
        ],
    ];
    $hasGifts = !empty($gifts) || !empty($invitation->qris_image_url) || !empty($invitation->qris_image);

    $stories = $invitation->stories ?? [
        [
            'year' => '2019',
            'title' => 'Pertama Bertemu',
            'story' => 'Kami bertemu di sebuah acara kampus. Awalnya hanya saling sapa, tanpa tahu cerita ini baru dimulai.',
        ],
        [
            'year' => '2021',
            'title' => 'Mulai Dekat',
            'story' => 'Obrolan demi obrolan membuat kami saling mengerti, dan perlahan tumbuh rasa nyaman.',
        ],
        [
            'year' => '2025',
            'title' => 'Neundeun Omong & Ngalamar',
            'story' => 'Kedua keluarga bertemu, menyampaikan niat baik, dan saling merestui untuk melangkah lebih jauh.',
        ],
        [
            'year' => '2026',
            'title' => 'Hari Bahagia',
            'story' => 'Dengan niat tulus dan doa orang tua, kami melangkah ke jenjang pernikahan dan memohon doa restu Anda.',
        ],
    ];

    $defaultQuoteText = 'Dan di antara tanda-tanda kekuasaan-Nya ialah Dia menciptakan untukmu pasangan-pasangan dari jenismu sendiri, supaya kamu merasa tenteram kepadanya, dan dijadikan-Nya di antaramu rasa kasih dan sayang.';
    $defaultQuoteSource = 'QS. Ar-Rum : 21';
    $quoteText = !empty($invitation->quote) ? $invitation->quote : $defaultQuoteText;
    $quoteSource = !empty($invitation->quote_author) ? $invitation->quote_author : $defaultQuoteSource;

    $wishes = $invitation->wishes ?? [
        (object)[
            'name' => 'Keluarga Besar Kang Dadang',
            'attendance' => 'hadir',
            'message' => 'Wilujeng nikah neng Sari & cep Raka. Mugi sakinah mawaddah warahmah, langgeng dugi ka pakot-kot.',
            'created_at' => now()->subHours(2),
        ],
        (object)[
            'name' => 'Teh Nina & Kang Asep',
            'attendance' => 'hadir',
            'message' => 'Barakallahu lakuma wa baraka alaika wa jamaa bainakuma fii khoir. Selamat ya!',
            'created_at' => now()->subDay(),
        ]
    ];
@endphp
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Undangan Pernikahan Adat Sunda | {{ $bride['nickname'] ?? 'Sari' }} &amp; {{ $groom['nickname'] ?? 'Raka' }}</title>
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Italiana&family=Marcellus&display=swap" rel="stylesheet">
  
  <style>
/* ============ VARIABEL WARNA (hijau zamrud, emas, krem) ============ */
:root {
  --emerald: #0f4c3f;
  --emerald-deep: #0a342b;
  --emerald-soft: #2f6b57;
  --gold: #d1a74c;
  --gold-light: #f3dc92;
  --gold-dark: #9a7228;
  --cream: #f8f2e3;
  --cream2: #efe6cf;
  --red: #a8452f;
  --ink: #33403a;
  --muted: #6f7a73;

  --font-title: "Cinzel", serif;
  --font-names: "Italiana", serif;
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "Marcellus", serif;

  --gold-grad: linear-gradient(135deg, var(--gold-dark), var(--gold-light) 40%, var(--gold) 60%, var(--gold-dark));
  --cut: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);

  --mega-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='%23d1a74c' stroke-width='1.2' opacity='.28'%3E%3Cpath d='M8 62 C0 62 0 46 12 46 C12 32 28 28 36 36 C40 22 62 20 68 36 C84 32 94 48 82 54 C92 56 90 62 80 62Z'/%3E%3Cpath transform='translate(46 45) scale(.78) translate(-46 -45)' d='M8 62 C0 62 0 46 12 46 C12 32 28 28 36 36 C40 22 62 20 68 36 C84 32 94 48 82 54 C92 56 90 62 80 62Z'/%3E%3Cpath transform='translate(46 45) scale(.56) translate(-46 -45)' d='M8 62 C0 62 0 46 12 46 C12 32 28 28 36 36 C40 22 62 20 68 36 C84 32 94 48 82 54 C92 56 90 62 80 62Z'/%3E%3C/g%3E%3C/svg%3E");
  --mega-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='%232f6b57' stroke-width='1.1' opacity='.14'%3E%3Cpath d='M8 62 C0 62 0 46 12 46 C12 32 28 28 36 36 C40 22 62 20 68 36 C84 32 94 48 82 54 C92 56 90 62 80 62Z'/%3E%3Cpath transform='translate(46 45) scale(.78) translate(-46 -45)' d='M8 62 C0 62 0 46 12 46 C12 32 28 28 36 36 C40 22 62 20 68 36 C84 32 94 48 82 54 C92 56 90 62 80 62Z'/%3E%3Cpath transform='translate(46 45) scale(.56) translate(-46 -45)' d='M8 62 C0 62 0 46 12 46 C12 32 28 28 36 36 C40 22 62 20 68 36 C84 32 94 48 82 54 C92 56 90 62 80 62Z'/%3E%3C/g%3E%3C/svg%3E");
  --melati: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='%23fff' stroke='%23d8cdb0' stroke-width='.8'%3E%3Cellipse cx='12' cy='6.5' rx='3' ry='5'/%3E%3Cellipse cx='12' cy='6.5' rx='3' ry='5' transform='rotate(72 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='3' ry='5' transform='rotate(144 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='3' ry='5' transform='rotate(216 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='3' ry='5' transform='rotate(288 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.8' fill='%23e8c547'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.85;
  overflow-x: hidden;
}

.section { padding: 100px 20px; position: relative; overflow: hidden; }
.cream  { background: var(--mega-green), var(--cream); }
.cream2 { background: var(--mega-green), var(--cream2); }
.dark   { background: var(--mega-gold), linear-gradient(180deg, var(--emerald), var(--emerald-deep)); color: #e8e3cf; }
.center { text-align: center; }
.container { max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; }
.narrow { max-width: 640px; }

.kicker { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .4em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.dark .kicker { color: var(--gold); }
.title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  color: var(--emerald);
  text-align: center;
  letter-spacing: .06em;
  margin-bottom: 50px;
}
.dark .title { color: var(--gold); }

.btn {
  display: inline-block;
  padding: 13px 36px;
  background: var(--gold-grad);
  color: var(--emerald-deep);
  border: 0;
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  clip-path: var(--cut);
  transition: .3s;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-2px); }
.btn.small { padding: 8px 22px; font-size: .66rem; margin-top: 12px; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s ease, transform 1.1s ease; }
.reveal.show { opacity: 1; transform: none; }

.mini { width: 52px; margin: 0 auto 16px; display: block; overflow: visible; filter: drop-shadow(0 3px 5px rgba(15,76,63,.3)); }
.ukir { width: 190px; height: auto; margin: 10px auto; display: block; overflow: visible; }
.ukir.dark { margin: 20px auto; }

.melati-row { position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 4; background: var(--melati) repeat-x center / 24px 24px; border-bottom: 2px solid var(--gold); background-color: var(--emerald-deep); }
.melati-row.bottom { top: auto; bottom: 0; border-bottom: 0; border-top: 2px solid var(--gold); }

.ogee { background: var(--gold-grad); clip-path: url(#ogee); padding: 5px; }
.ogee-in {
  position: relative; width: 100%; height: 100%;
  clip-path: url(#ogee);
  background: linear-gradient(160deg, var(--emerald-soft), var(--emerald-deep));
  display: grid; place-items: center;
  color: var(--gold-light); font-family: var(--font-sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  overflow: hidden;
}
.ogee-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* COVER OVERLAY (MODAL BUKA UNDANGAN) */
#coverOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px 90px;
  color: #e8e3cf;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(47,107,87,.65), transparent 62%),
    var(--mega-gold),
    linear-gradient(180deg, var(--emerald), var(--emerald-deep));
  transition: opacity .8s ease, visibility .8s ease;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: grid; place-items: center;
  text-align: center;
  padding: 100px 20px 110px;
  color: #e8e3cf;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(47,107,87,.55), transparent 62%),
    var(--mega-gold),
    linear-gradient(180deg, var(--emerald), var(--emerald-deep));
}
.hero-inner { position: relative; z-index: 3; width: 100%; max-width: 540px; margin: 0 auto; }
.salam { font-family: var(--font-names); font-size: 2.2rem; color: var(--gold); letter-spacing: .08em; line-height: 1.2; }
.salam-dark { font-family: var(--font-serif); font-style: italic; font-size: 1.35rem; color: var(--emerald); margin-bottom: 20px; }
.eyebrow { font-family: var(--font-sans); letter-spacing: .45em; text-transform: uppercase; font-size: .78rem; margin: 2px 0 64px; }

.cover-wrap { position: relative; width: min(250px, 62vw); margin: 0 auto 36px; }
.cover-photo { width: 100%; aspect-ratio: 4 / 5; filter: drop-shadow(0 14px 20px rgba(0,0,0,.45)); }
.siger { position: absolute; left: 50%; top: -52px; width: 78%; transform: translateX(-50%); overflow: visible; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.ronce { position: absolute; top: -6px; width: 54px; height: auto; overflow: visible; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); transform-origin: 50% 0; animation: swing 6s ease-in-out infinite alternate; }
.rl { left: -38px; }
.rr { right: -38px; animation-delay: -3s; }
@keyframes swing { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

.names { font-family: var(--font-names); font-weight: 400; font-size: clamp(3rem, 11vw, 5.4rem); line-height: 1.15; }
.names, .and { color: var(--gold); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.names i { font-style: normal; font-size: .6em; padding: 0 .1em; }
.names.small { font-size: clamp(2.6rem, 8vw, 3.8rem); }
.date { font-family: var(--font-sans); font-size: 1.05rem; letter-spacing: .25em; text-transform: uppercase; margin: 4px 0 16px; color: var(--gold-light); }
.guest { font-size: 1rem; color: #c3c8b6; margin-bottom: 26px; }
.guest b { font-family: var(--font-title); font-size: 1.1rem; color: #fff; letter-spacing: .04em; }

.countdown { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.countdown div {
  position: relative; isolation: isolate;
  width: 108px; height: 136px;
  display: grid; place-content: center; padding-top: 22px;
  background: var(--gold-grad);
  clip-path: url(#ogee);
}
.countdown div::before { content: ""; position: absolute; inset: 3px; background: var(--emerald-deep); clip-path: url(#ogee); z-index: -1; }
.countdown b { display: block; font-family: var(--font-names); font-weight: 400; font-size: 2.5rem; line-height: 1.1; color: var(--gold-light); }
.countdown span { font-family: var(--font-sans); font-size: .66rem; letter-spacing: .25em; text-transform: uppercase; color: #c3c8b6; }

.quote { font-size: 1.32rem; font-style: italic; line-height: 1.95; }
.source { margin-top: 14px; font-family: var(--font-sans); letter-spacing: .2em; font-size: .85rem; color: var(--red); }
.pepatah { font-family: var(--font-names); font-size: 1.6rem; color: var(--emerald); }

.couple { display: flex; align-items: flex-start; justify-content: center; gap: 30px; flex-wrap: wrap; text-align: center; }
.person { flex: 1 1 270px; max-width: 330px; }
.photo { width: 210px; aspect-ratio: 4 / 5; margin: 0 auto 26px; filter: drop-shadow(0 12px 18px rgba(10,52,43,.35)); }
.person h3 { font-family: var(--font-names); font-weight: 400; font-size: 1.9rem; color: var(--emerald); line-height: 1.3; }
.role { font-family: var(--font-sans); letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; color: var(--red); margin: 4px 0 10px; }
.person p { color: var(--muted); }
.and { font-family: var(--font-names); font-size: 3.6rem; align-self: center; line-height: 1; }

.events { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.card {
  position: relative; isolation: isolate;
  padding: 76px 30px 44px;
  background: var(--gold-grad);
  clip-path: var(--cut);
  color: var(--ink);
  text-align: center;
}
.card::before { content: ""; position: absolute; inset: 3px; background: var(--cream); clip-path: var(--cut); z-index: -1; }
.card-flower { position: absolute; top: 20px; left: 50%; width: 44px; transform: translateX(-50%); overflow: visible; }
.card h3 { font-family: var(--font-names); font-weight: 400; font-size: 2.1rem; color: var(--emerald); margin-bottom: 8px; line-height: 1.2; }
.card .when { font-weight: 600; font-size: 1.2rem; }
.card .time { font-family: var(--font-sans); letter-spacing: .15em; color: var(--red); margin-bottom: 12px; }
.card .where { color: var(--muted); }
.adat { text-align: center; margin-top: 34px; font-style: italic; color: var(--gold-light); }

.timeline { position: relative; margin-top: 10px; }
.timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 24px; margin-left: -12px;
  background: var(--melati) repeat-y center / 24px 24px, linear-gradient(var(--emerald-soft), var(--emerald-soft)) center / 2px 100% no-repeat;
}
.t-item { position: relative; width: 50%; padding: 0 44px 40px 0; }
.t-item:nth-child(even) { margin-left: 50%; padding: 0 0 40px 44px; }
.t-box { background: #fffdf6; border: 2px solid var(--gold); border-radius: 18px 18px 18px 4px; padding: 20px 24px; box-shadow: 6px 6px 0 rgba(15,76,63,.85); }
.t-item:nth-child(even) .t-box { border-radius: 18px 18px 4px 18px; }
.t-year { font-family: var(--font-sans); font-size: .78rem; letter-spacing: .3em; color: var(--red); }
.t-box h3 { font-family: var(--font-names); font-weight: 400; font-size: 1.6rem; color: var(--emerald); margin: 2px 0 6px; line-height: 1.3; }
.t-box p { color: var(--muted); line-height: 1.75; font-size: 1.05rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 210px; gap: 14px; }
.g {
  background: linear-gradient(135deg, var(--emerald-soft), var(--emerald-deep));
  border: 3px solid var(--gold);
  border-radius: 18px;
  outline: 1px solid var(--gold-dark);
  outline-offset: -9px;
  display: grid; place-items: center;
  color: var(--gold-light); font-family: var(--font-sans); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  overflow: hidden; transition: transform .5s;
}
.g:hover { transform: translateY(-4px); }
.g img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.g.tall { grid-row: span 2; }
.g.wide { grid-column: span 2; }
.hint { text-align: center; margin-top: 18px; font-size: .85rem; color: var(--muted); }

.lightbox { position: fixed; inset: 0; z-index: 99; background: rgba(8,28,23,.94); display: none; place-items: center; padding: 20px; cursor: zoom-out; }
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: 92vh; border: 3px solid var(--gold); border-radius: 12px; }

.gifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 34px; }
.gift {
  position: relative; isolation: isolate;
  display: grid; gap: 2px; justify-items: center;
  padding: 28px 16px;
  background: var(--gold-grad);
  clip-path: var(--cut);
  color: var(--ink);
}
.gift::before { content: ""; position: absolute; inset: 3px; background: var(--cream); clip-path: var(--cut); z-index: -1; }
.gift strong { font-family: var(--font-sans); font-weight: 400; font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--red); }
.gift span { font-family: var(--font-title); font-weight: 700; font-size: 1.3rem; letter-spacing: .06em; color: var(--emerald); }
.gift em { color: var(--muted); }

.rsvp { display: grid; gap: 22px; }
.rsvp label { display: grid; gap: 6px; font-family: var(--font-sans); font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--emerald-soft); text-align: left; }
.rsvp input, .rsvp select, .rsvp textarea {
  width: 100%; padding: 12px 14px;
  font-family: var(--font-serif); font-size: 1.12rem; letter-spacing: 0; text-transform: none; color: var(--ink);
  background: #fffdf6;
  border: 2px solid var(--gold);
  border-radius: 10px; outline: none; transition: .3s;
}
.rsvp textarea { resize: vertical; }
.rsvp input:focus, .rsvp select:focus, .rsvp textarea:focus { border-color: var(--emerald-soft); box-shadow: 0 0 0 4px rgba(47,107,87,.18); }
.rsvp .btn { justify-self: center; margin-top: 8px; }

.wishes { margin-top: 40px; display: grid; gap: 14px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
.wish { background: #fffdf6; border-left: 5px solid var(--emerald-soft); border-radius: 6px; padding: 16px 20px; box-shadow: 0 6px 16px rgba(15,76,63,.1); text-align: left; }
.wish strong { font-family: var(--font-names); font-weight: 400; font-size: 1.4rem; color: var(--emerald); }
.wish small { margin-left: 8px; font-family: var(--font-sans); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); }
.wish p { color: var(--muted); line-height: 1.7; }

.footer {
  position: relative;
  text-align: center;
  padding: 150px 20px 80px;
  overflow: hidden;
  color: #e8e3cf;
  background: var(--mega-gold), linear-gradient(180deg, var(--emerald-deep), #06241d);
}
.siger-foot { position: absolute; left: 50%; top: 44px; width: min(240px, 60vw); transform: translateX(-50%); }
.footer-in { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; padding-top: 36px; }
.copy { font-style: italic; color: #c3c8b6; }
.thanks { margin-top: 14px; font-family: var(--font-title); letter-spacing: .3em; text-transform: uppercase; font-size: .85rem; color: var(--gold); }

/* Floating music button */
.music-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-grad);
  color: var(--emerald-deep);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  border: 1px solid var(--gold-light);
  cursor: pointer;
  transition: transform .3s ease;
}
.music-btn:hover { transform: scale(1.1); }
.hidden { display: none !important; }

@media (max-width: 700px) {
  .section { padding: 80px 18px; }
  .hero { padding-top: 90px; }
  .and { width: 100%; font-size: 2.8rem; }
  .countdown div { width: 76px; height: 98px; padding-top: 14px; }
  .countdown b { font-size: 1.7rem; }
  .countdown span { font-size: .5rem; letter-spacing: .12em; }
  .gallery .g.wide { grid-column: span 1; }
  .rl { left: -28px; width: 44px; }
  .rr { right: -28px; width: 44px; }
  .timeline::before { left: 14px; margin-left: 0; }
  .t-item, .t-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 32px 50px; }
  .t-item:nth-child(even) .t-box { border-radius: 18px 18px 18px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
  </style>
</head>
<body>
  @include('templates.partials.preview-banner')

  <!-- ====== Ornamen Sunda: siger, roncé melati, bingkai ogee ====== -->
  <svg width="0" height="0" style="position:absolute" aria-hidden="true">
    <defs>
      <linearGradient id="gGold" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#f3dc92"/>
        <stop offset=".5" stop-color="#d1a74c"/>
        <stop offset="1" stop-color="#9a7228"/>
      </linearGradient>

      <clipPath id="ogee" clipPathUnits="objectBoundingBox">
        <path d="M0 1 V0.38 C0 0.22 0.38 0.2 0.5 0 C0.62 0.2 1 0.22 1 0.38 V1Z"/>
      </clipPath>

      <symbol id="melati" viewBox="0 0 40 40" style="overflow:visible">
        <g fill="#fff" stroke="#d8cdb0" stroke-width="1">
          <ellipse cx="20" cy="10" rx="6" ry="10"/>
          <ellipse cx="20" cy="10" rx="6" ry="10" transform="rotate(72 20 20)"/>
          <ellipse cx="20" cy="10" rx="6" ry="10" transform="rotate(144 20 20)"/>
          <ellipse cx="20" cy="10" rx="6" ry="10" transform="rotate(216 20 20)"/>
          <ellipse cx="20" cy="10" rx="6" ry="10" transform="rotate(288 20 20)"/>
        </g>
        <circle cx="20" cy="20" r="3.2" fill="#e8c547"/>
      </symbol>

      <symbol id="ronce" viewBox="0 0 60 300" style="overflow:visible">
        <path d="M30 0 C45 40 15 80 30 120 C45 160 15 200 30 240" stroke="#2f6b57" stroke-width="1.6" fill="none" opacity=".85"/>
        <g fill="#2f6b57" opacity=".85">
          <ellipse cx="42" cy="26"  rx="9" ry="3.5" transform="rotate(35 42 26)"/>
          <ellipse cx="17" cy="62"  rx="9" ry="3.5" transform="rotate(-35 17 62)"/>
          <ellipse cx="42" cy="104" rx="9" ry="3.5" transform="rotate(35 42 104)"/>
          <ellipse cx="17" cy="146" rx="9" ry="3.5" transform="rotate(-35 17 146)"/>
          <ellipse cx="42" cy="186" rx="9" ry="3.5" transform="rotate(35 42 186)"/>
          <ellipse cx="17" cy="222" rx="9" ry="3.5" transform="rotate(-35 17 222)"/>
        </g>
        <use href="#melati" x="19" y="-5"  width="22" height="22"/>
        <use href="#melati" x="26" y="29"  width="22" height="22"/>
        <use href="#melati" x="14" y="65"  width="22" height="22"/>
        <use href="#melati" x="19" y="99"  width="22" height="22"/>
        <use href="#melati" x="27" y="139" width="22" height="22"/>
        <use href="#melati" x="13" y="179" width="22" height="22"/>
        <use href="#melati" x="19" y="215" width="22" height="22"/>
        <use href="#melati" x="12" y="240" width="36" height="36"/>
        <ellipse cx="30" cy="288" rx="4.5" ry="9" fill="#fffdf4" stroke="#d8cdb0"/>
      </symbol>

      <path id="sp" d="M0 0 C-10 -20 -8 -50 0 -78 C8 -50 10 -20 0 0Z"/>
      <g id="spt">
        <use href="#sp" fill="url(#gGold)" stroke="#8a6420" stroke-width="1"/>
        <path d="M0 -6 V-66" stroke="#8a6420" stroke-opacity=".5" stroke-width="1"/>
        <circle cx="0" cy="-82" r="3.4" fill="#f7e3a5" stroke="#9a7228" stroke-width=".8"/>
      </g>
      <symbol id="siger" viewBox="0 0 300 120" style="overflow:visible">
        <g transform="translate(150 98)">
          <use href="#spt" transform="rotate(-72) scale(.62)"/>
          <use href="#spt" transform="rotate(72) scale(.62)"/>
          <use href="#spt" transform="rotate(-54) scale(.72)"/>
          <use href="#spt" transform="rotate(54) scale(.72)"/>
          <use href="#spt" transform="rotate(-36) scale(.84)"/>
          <use href="#spt" transform="rotate(36) scale(.84)"/>
          <use href="#spt" transform="rotate(-18) scale(.94)"/>
          <use href="#spt" transform="rotate(18) scale(.94)"/>
          <use href="#spt" transform="rotate(0) scale(1.1)"/>
        </g>
        <path d="M22 92 C0 90 -2 56 16 52" fill="none" stroke="url(#gGold)" stroke-width="5" stroke-linecap="round"/>
        <path d="M278 92 C300 90 302 56 284 52" fill="none" stroke="url(#gGold)" stroke-width="5" stroke-linecap="round"/>
        <path d="M20 100 C80 114 220 114 280 100 L284 88 C220 102 80 102 16 88Z" fill="url(#gGold)" stroke="#8a6420" stroke-width="1"/>
        <g fill="#f7e3a5" stroke="#9a7228" stroke-width=".8">
          <circle cx="60" cy="101" r="3.4"/><circle cx="105" cy="104" r="3.4"/><circle cx="150" cy="105" r="3.8"/>
          <circle cx="195" cy="104" r="3.4"/><circle cx="240" cy="101" r="3.4"/>
        </g>
      </symbol>

      <symbol id="ukir" viewBox="0 0 200 30" style="overflow:visible">
        <g fill="none" stroke="url(#gGold)" stroke-width="2" stroke-linecap="round">
          <path d="M92 15 C82 15 74 3 58 5 C44 7 40 23 54 25 C66 27 68 14 58 13"/>
          <path d="M108 15 C118 15 126 3 142 5 C156 7 160 23 146 25 C134 27 132 14 142 13"/>
          <path d="M50 15 H8 M150 15 H192"/>
        </g>
        <path d="M100 6 L109 15 L100 24 L91 15Z" fill="url(#gGold)"/>
      </symbol>
    </defs>
  </svg>

  <!-- ============ MODAL COVER OVERLAY ============ -->
  <div id="coverOverlay">
    <div class="melati-row"></div>
    <div class="hero-inner">
      <p class="salam">Sampurasun</p>
      <p class="eyebrow">Pernikahan Adat Sunda</p>

      <div class="cover-wrap">
        <svg class="ronce rl" viewBox="0 0 60 300"><use href="#ronce"/></svg>
        <svg class="ronce rr" viewBox="0 0 60 300"><use href="#ronce"/></svg>
        <div class="ogee cover-photo">
          <figure class="ogee-in">
            <img src="{{ $coverPhoto }}" alt="Foto {{ $bride['nickname'] }} &amp; {{ $groom['nickname'] }}">
          </figure>
        </div>
        <svg class="siger" viewBox="0 0 300 120"><use href="#siger"/></svg>
      </div>

      <h1 class="names">{{ $bride['nickname'] }} <i>&amp;</i> {{ $groom['nickname'] }}</h1>
      <svg class="ukir" viewBox="0 0 200 30"><use href="#ukir"/></svg>
      <p class="date">{{ $formattedDate }}</p>
      <p class="guest">Kepada Yth.<br><b>{{ $guestName ?? 'Bapak / Ibu / Saudara/i' }}</b></p>
      <button type="button" onclick="openInvitation()" class="btn">Buka Undangan</button>
    </div>
    <div class="melati-row bottom"></div>
  </div>

  <!-- ============ COVER HERO ============ -->
  <header class="hero" id="home">
    <div class="melati-row"></div>

    <div class="hero-inner">
      <p class="salam">Sampurasun</p>
      <p class="eyebrow">Pernikahan Adat Sunda</p>

      <div class="cover-wrap">
        <svg class="ronce rl" viewBox="0 0 60 300"><use href="#ronce"/></svg>
        <svg class="ronce rr" viewBox="0 0 60 300"><use href="#ronce"/></svg>
        <div class="ogee cover-photo">
          <figure class="ogee-in">
            <img src="{{ $coverPhoto }}" alt="Foto {{ $bride['nickname'] }} &amp; {{ $groom['nickname'] }}">
          </figure>
        </div>
        <svg class="siger" viewBox="0 0 300 120"><use href="#siger"/></svg>
      </div>

      <h1 class="names">{{ $bride['nickname'] }} <i>&amp;</i> {{ $groom['nickname'] }}</h1>
      <svg class="ukir" viewBox="0 0 200 30"><use href="#ukir"/></svg>
      <p class="date">{{ $formattedDate }}</p>
      <p class="guest">Kepada Yth.<br><b>{{ $guestName ?? 'Bapak / Ibu / Saudara/i' }}</b></p>
      <a href="#countdown" class="btn">Lihat Acara</a>
    </div>

    <div class="melati-row bottom"></div>
  </header>

  <!-- ============ 1. COUNTDOWN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown'))
  <section class="section dark center" id="section-countdown">
    <div id="countdown"></div>
    <div class="container reveal">
      <p class="kicker">Wilujeng Sumping</p>
      <h2 class="title">Menghitung Hari</h2>
      <div class="countdown">
        <div><b id="d">00</b><span>Poé</span></div>
        <div><b id="h">00</b><span>Jam</span></div>
        <div><b id="m">00</b><span>Menit</span></div>
        <div><b id="s">00</b><span>Detik</span></div>
      </div>
    </div>
  </section>
  @endif

  <!-- ============ 2. QUOTES / AYAT SUCI ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('quote'))
  <section class="section cream center" id="section-quote">
    <div id="ayat"></div>
    <div class="container narrow reveal">
      <svg class="mini" viewBox="0 0 40 40"><use href="#melati"/></svg>
      <p class="salam-dark">Assalamu'alaikum Warahmatullahi Wabarakatuh</p>
      <p class="quote">“{!! nl2br(e($quoteText)) !!}”</p>
      <p class="source">— {{ $quoteSource }}</p>
      <svg class="ukir dark" viewBox="0 0 200 30"><use href="#ukir"/></svg>
      <p class="pepatah">“Silih asih, silih asah, silih asuh.”</p>
    </div>
  </section>
  @endif

  <!-- ============ 3. INFORMASI PENGANTIN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('couple'))
  <section class="section cream2" id="section-couple">
    <div id="pengantin"></div>
    <div class="container">
      <p class="kicker center reveal">Pangantén</p>
      <h2 class="title reveal">Mempelai</h2>
      <div class="couple">
        <article class="person reveal">
          <div class="ogee photo">
            <figure class="ogee-in">
              <img src="{{ $groom['photo'] ?? 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=600&q=80' }}" alt="{{ $groom['name'] }}">
            </figure>
          </div>
          <h3>{{ $groom['name'] }}</h3>
          <p class="role">Mempelai Pria</p>
          <p>Putra dari<br>{{ $groom['parents'] ?? 'Bapak & Ibu' }}</p>
        </article>

        <div class="and reveal">&amp;</div>

        <article class="person reveal">
          <div class="ogee photo">
            <figure class="ogee-in">
              <img src="{{ $bride['photo'] ?? 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80' }}" alt="{{ $bride['name'] }}">
            </figure>
          </div>
          <h3>{{ $bride['name'] }}</h3>
          <p class="role">Mempelai Wanita</p>
          <p>Putri dari<br>{{ $bride['parents'] ?? 'Bapak & Ibu' }}</p>
        </article>
      </div>
    </div>
  </section>
  @endif

  <!-- ============ 4. JADWAL ACARA ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('event'))
  <section class="section dark" id="section-event">
    <div id="jadwal"></div>
    <div class="container">
      <p class="kicker center reveal">Rangkaian Acara</p>
      <h2 class="title reveal">Jadwal Acara</h2>
      <div class="events">
        @foreach($events as $event)
        <article class="card reveal">
          <svg class="card-flower" viewBox="0 0 40 40"><use href="#melati"/></svg>
          <h3>{{ $event['title'] }}</h3>
          <p class="when">{{ \Carbon\Carbon::parse($event['date'])->locale('id')->isoFormat('dddd, D MMMM Y') }}</p>
          <p class="time">{{ $event['start_time'] ?? '08:00' }} – {{ $event['end_time'] ?? 'Selesai' }} {{ $event['timezone'] ?? 'WIB' }}</p>
          <p class="where"><strong>{{ $event['venue'] }}</strong><br>{{ $event['address'] }}</p>
          @if(!empty($event['maps_url']))
          <div style="margin-top:16px;">
            <a class="btn small" href="{{ $event['maps_url'] }}" target="_blank" rel="noopener">Peta Lokasi</a>
          </div>
          @endif
        </article>
        @endforeach
      </div>
      <p class="adat reveal">Prosesi adat: Ngeuyeuk Seureuh · Nincak Endog · Sawér · Huap Lingkung · Sungkeman</p>
    </div>
  </section>
  @endif

  <!-- ============ 5. KISAH CINTA (TIMELINE) ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('story'))
  @if(!empty($stories) && count($stories) > 0)
  <section class="section cream" id="section-story">
    <div id="kisah"></div>
    <div class="container narrow">
      <p class="kicker center reveal">Our Story</p>
      <h2 class="title reveal">Kisah Cinta</h2>
      <div class="timeline">
        @foreach($stories as $st)
        <div class="t-item reveal">
          <div class="t-box">
            <span class="t-year">{{ $st['year'] ?? '' }}</span>
            <h3>{{ $st['title'] ?? '' }}</h3>
            <p>{{ $st['story'] ?? ($st['description'] ?? '') }}</p>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif
  @endif

  <!-- ============ 6. GALERI FOTO ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gallery'))
  @if(!empty($galleries) && count($galleries) > 0)
  <section class="section cream2" id="section-gallery">
    <div id="galeri"></div>
    <div class="container">
      <p class="kicker center reveal">Moments</p>
      <h2 class="title reveal">Galeri Foto</h2>
      <div class="gallery">
        @foreach($galleries as $index => $img)
        <div class="g {{ $index % 3 === 1 ? 'tall' : '' }} reveal">
          <img src="{{ $img }}" alt="Galeri {{ $index + 1 }}">
        </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif
  @endif

  <!-- ============ 7. INFO TANDA KASIH ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gift'))
  @if($hasGifts)
  <section class="section dark center" id="section-gift">
    <div id="hadiah"></div>
    <div class="container narrow reveal">
      <p class="kicker">Hadiah Pernikahan</p>
      <h2 class="title">Tanda Kasih</h2>
      <p>Doa restu Anda adalah hadiah terindah bagi kami. Bila berkenan memberi tanda kasih secara digital, silakan klik tombol di bawah:</p>
      
      <div style="text-align: center; margin: 24px 0 12px;">
        <button type="button" onclick="toggleGiftAccordion(this)" class="btn">
          <span class="gift-btn-label">Kirim Hadiah / Buka Rekening</span>
        </button>
      </div>

      <div id="gift-accordion-content" class="gift-box-wrapper hidden" style="margin-top: 20px;">
        <div class="gifts">
          @foreach($gifts as $i => $gift)
          <div class="gift">
            <strong>{{ $gift['bank_name'] ?? $gift['bank'] ?? 'Bank' }}</strong>
            <span id="rek_{{ $loop->index }}">{{ $gift['account_number'] ?? $gift['number'] ?? '-' }}</span>
            <em>a.n. {{ $gift['account_holder'] ?? $gift['name'] ?? '-' }}</em>
            <button type="button" class="btn small" onclick="copyGiftNumber('rek_{{ $loop->index }}', this)">Salin Rekening</button>
          </div>
          @endforeach
        </div>

        @if(!empty($invitation->qris_image_url) || !empty($invitation->qris_image))
        <div class="gift" style="margin-top: 20px; text-align: center;">
          <strong>QRIS Tanda Kasih</strong>
          <img src="{{ $invitation->qris_image_url ?: $invitation->qris_image }}" alt="QRIS" style="max-width: 200px; margin: 12px auto; border-radius: 12px; display: block;">
          <em>a.n. {{ $invitation->groom_nickname ?? $invitation->groom_name ?? 'Mempelai' }} &amp; {{ $invitation->bride_nickname ?? $invitation->bride_name ?? 'Mempelai' }}</em>
        </div>
        @endif
      </div>
    </div>
  </section>
  @endif
  @endif

  <!-- ============ 8. RSVP & UCAPAN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('wishes'))
  <section class="section cream" id="section-wishes">
    <div id="rsvp"></div>
    <div class="container narrow">
      <p class="kicker center reveal">Konfirmasi</p>
      <h2 class="title reveal">RSVP &amp; Ucapan</h2>
      
      <form class="rsvp reveal" id="rsvpForm" action="{{ route('invitation.wish', $invitation->slug ?? 'demo') }}" method="POST">
        @csrf
        <label>Nama Lengkap
          <input type="text" name="name" placeholder="Nama lengkap Anda" value="{{ $guestName ?? '' }}" required>
        </label>
        <label>Kehadiran
          <select name="attendance" required>
            <option value="hadir">Hadir</option>
            <option value="tidak_hadir">Tidak Hadir</option>
            <option value="ragu">Masih Ragu</option>
          </select>
        </label>
        <label>Jumlah Tamu
          <input type="number" name="guest_count" min="1" max="5" value="1">
        </label>
        <label>Ucapan &amp; Doa
          <textarea name="message" rows="4" placeholder="Tulis ucapan dan doa restu untuk kedua mempelai..." required></textarea>
        </label>
        <button type="submit" class="btn">Kirim Doa Restu</button>
      </form>

      <div class="wishes" id="wishes">
        @foreach($wishes as $w)
        <div class="wish">
          <strong>{{ $w->name }}</strong>
          <small>{{ ucfirst($w->attendance ?? 'hadir') }}</small>
          <p>{{ $w->message }}</p>
        </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif

  <!-- ============ 9. PENUTUP (FOOTER) ============ -->
  <footer class="footer">
    <div class="melati-row"></div>
    <svg class="siger siger-foot" viewBox="0 0 300 120"><use href="#siger"/></svg>
    <div class="footer-in reveal">
      <p>Merupakan kehormatan dan kebahagiaan bagi kami apabila Bapak/Ibu/Saudara/i berkenan hadir dan memberikan doa restu.</p>
      <h2 class="names small">{{ $bride['nickname'] }} <i>&amp;</i> {{ $groom['nickname'] }}</h2>
      <svg class="ukir" viewBox="0 0 200 30"><use href="#ukir"/></svg>
      <p class="copy">Wassalamu'alaikum Warahmatullahi Wabarakatuh</p>
      <p class="thanks">Hatur Nuhun · Rampés</p>
    </div>
    <div class="melati-row bottom"></div>

    <!-- Official Janoer Koening Branding Footer -->
    <div style="margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); text-align: center; position: relative; z-index: 5;">
      <a href="http://janoerkoening.com" target="_blank" rel="noopener noreferrer" style="display: inline-block; text-decoration: none;">
        <img src="{{ asset('assets/brand/logo.png') }}" alt="Janoer Koening" style="height: 30px; width: auto; margin: 0 auto; opacity: 0.85;">
      </a>
      <p style="font-size: 11px; margin-top: 8px; letter-spacing: 0.08em; color: var(--gold-light, #f3dc92); text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">Digital Wedding Invitation by Janoer Koening</p>
    </div>
  </footer>

  <!-- Lightbox galeri -->
  <div class="lightbox" id="lightbox"><img alt="Galeri Preview"></div>

  <!-- Background Music -->
  @if(!empty($invitation->audio_url))
  <audio id="bgMusic" src="{{ $invitation->audio_url }}" preload="auto" loop></audio>
  <button id="musicToggle" class="music-btn" aria-label="Toggle Music" onclick="toggleMusic()">
    <svg id="musicIcon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
    </svg>
  </button>
  @endif

  <script>
    // Countdown
    const eventTimeStr = "{{ $eventDate }}T{{ $eventTime }}:00";
    const weddingDate = new Date(eventTimeStr).getTime() || new Date("2026-12-20T08:00:00").getTime();
    const pad = n => String(n).padStart(2, "0");
    function tick() {
      const diff = Math.max(0, weddingDate - Date.now());
      const dEl = document.getElementById("d");
      if (dEl) {
        dEl.textContent = pad(Math.floor(diff / 864e5));
        document.getElementById("h").textContent = pad(Math.floor(diff % 864e5 / 36e5));
        document.getElementById("m").textContent = pad(Math.floor(diff % 36e5 / 6e4));
        document.getElementById("s").textContent = pad(Math.floor(diff % 6e4 / 1e3));
      }
    }
    tick(); setInterval(tick, 1000);

    // Animasi scroll
    const io = new IntersectionObserver(es => {
      es.forEach(e => { if (e.isIntersecting) { e.target.classList.add("show"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach(el => io.observe(el));

    // Salin nomor rekening & accordion
    function toggleGiftAccordion(btn) {
      const content = document.getElementById('gift-accordion-content');
      if (!content) return;
      const isHidden = content.classList.contains('hidden') || content.style.display === 'none';
      if (isHidden) {
        content.classList.remove('hidden');
        content.style.display = 'block';
        if (btn) {
          const label = btn.querySelector('.gift-btn-label');
          if (label) label.textContent = 'Tutup Rekening';
        }
      } else {
        content.classList.add('hidden');
        content.style.display = 'none';
        if (btn) {
          const label = btn.querySelector('.gift-btn-label');
          if (label) label.textContent = 'Kirim Hadiah / Buka Rekening';
        }
      }
    }

    function copyGiftNumber(elId, btn) {
      const el = document.getElementById(elId);
      if (!el) return;
      const text = el.innerText.trim();
      navigator.clipboard.writeText(text).then(() => {
        const orig = btn.innerText;
        btn.innerText = 'Tersalin ✓';
        setTimeout(() => { btn.innerText = orig; }, 2000);
      }).catch(() => {
        prompt('Salin nomor rekening:', text);
      });
    }

    // Lightbox
    const lb = document.getElementById("lightbox");
    document.querySelectorAll(".g img").forEach(img => {
      img.addEventListener("click", () => { lb.querySelector("img").src = img.src; lb.classList.add("open"); });
    });
    if (lb) {
      lb.addEventListener("click", () => lb.classList.remove("open"));
    }

    // Audio & Cover modal
    let isPlaying = false;
    const bgMusic = document.getElementById("bgMusic");

    function updateMusicIcon() {
      const icon = document.getElementById("musicIcon");
      if (!icon) return;
      if (isPlaying) {
        icon.innerHTML = '<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>';
      } else {
        icon.innerHTML = '<path d="M4.27 3L3 4.27l9 9v.28c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4v-1.73l4 4V21h-2v-3.73l2.73 2.73 1.27-1.27L4.27 3zM12 7V3h6v4h-6z"/>';
      }
    }

    function toggleMusic() {
      if (!bgMusic) return;
      if (isPlaying) {
        bgMusic.pause();
        isPlaying = false;
      } else {
        bgMusic.play();
        isPlaying = true;
      }
      updateMusicIcon();
    }

    function openInvitation() {
      const cov = document.getElementById("coverOverlay");
      if (cov) {
        cov.style.opacity = "0";
        cov.style.visibility = "hidden";
        setTimeout(() => cov.style.display = "none", 800);
      }
      if (bgMusic) {
        bgMusic.play().then(() => {
          isPlaying = true;
          updateMusicIcon();
        }).catch(() => {});
      }
    }
  
        // Toggle Gift Box / Rekening & QRIS
        function toggleGiftBox(btn) {
            let wrapper = null;
            if (btn) {
                const section = btn.closest('section') || btn.closest('.theme-card') || btn.parentElement.parentElement;
                if (section) {
                    wrapper = section.querySelector('.gift-box-wrapper') || section.querySelector('#gift-accordion-content') || section.querySelector('#gift-accordion');
                }
            }
            if (!wrapper) {
                wrapper = document.querySelector('.gift-box-wrapper') || document.getElementById('gift-accordion-content') || document.getElementById('gift-accordion');
            }
            if (!wrapper) return;

            const isHidden = wrapper.classList.contains('hidden') || wrapper.style.display === 'none' || window.getComputedStyle(wrapper).display === 'none';
            const label = btn ? (btn.querySelector('.gift-btn-label') || btn.querySelector('span')) : null;

            if (isHidden) {
                wrapper.classList.remove('hidden');
                wrapper.style.display = 'block';
                if (label) {
                    if (!btn.getAttribute('data-orig-text')) {
                        btn.setAttribute('data-orig-text', label.innerHTML);
                    }
                    label.innerHTML = 'Tutup Detail Rekening &amp; QRIS';
                }
            } else {
                wrapper.classList.add('hidden');
                wrapper.style.display = 'none';
                if (label) {
                    const orig = btn.getAttribute('data-orig-text') || 'Kirim Hadiah / Buka Rekening &amp; QRIS';
                    label.innerHTML = orig;
                }
            }
            if (window.lucide && typeof lucide.createIcons === 'function') {
                lucide.createIcons();
            }
        }
        function toggleGiftAccordion(btn) {
            toggleGiftBox(btn);
        }
</script>
</body>
</html>