@php
    $bride = $invitation->bride ?? [
        'name' => 'Metta Dewi Anggraeni, S.E',
        'nickname' => 'Metta',
        'parents' => 'Bapak Hendra Wijaya & Ibu Lina Kusuma',
        'photo' => 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80',
        'instagram' => '@mettadewi',
    ];
    $groom = $invitation->groom ?? [
        'name' => 'Surya Wijaya Kusuma, S.T',
        'nickname' => 'Surya',
        'parents' => 'Bapak Budi Santoso & Ibu Maya Sari',
        'photo' => 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=600&q=80',
        'instagram' => '@suryawijaya',
    ];
    $coverPhoto = $invitation->cover_photo ?? 'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=800&q=80';
    $events = $invitation->events ?? [
        [
            'title' => 'Pemberkahan Perkawinan',
            'date' => '2026-12-20',
            'start_time' => '09:00',
            'end_time' => '11:00',
            'timezone' => 'WIB',
            'venue' => 'Vihara Dhamma Sukha',
            'address' => 'Jl. Gajah Mada No. 12, Jakarta',
            'maps_url' => 'https://maps.google.com',
        ],
        [
            'title' => 'Resepsi Pernikahan',
            'date' => '2026-12-20',
            'start_time' => '18:00',
            'end_time' => '21:00',
            'timezone' => 'WIB',
            'venue' => 'Lotus Ballroom',
            'address' => 'Jl. Kenanga No. 5, Jakarta',
            'maps_url' => 'https://maps.google.com',
        ],
    ];
    $primaryEvent = $events[0] ?? null;
    $eventDate = $primaryEvent['date'] ?? '2026-12-20';
    $eventTime = $primaryEvent['start_time'] ?? '09: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' => 'Metta Dewi Anggraeni',
            'name' => 'Metta Dewi Anggraeni',
        ],
        [
            'bank_name' => 'Bank Mandiri',
            'bank' => 'Bank Mandiri',
            'account_number' => '9876543210',
            'number' => '9876543210',
            'account_holder' => 'Surya Wijaya Kusuma',
            'name' => 'Surya Wijaya Kusuma',
        ],
    ];
    $hasGifts = !empty($gifts) || !empty($invitation->qris_image_url) || !empty($invitation->qris_image);

    $stories = $invitation->stories ?? [
        [
            'year' => '2019',
            'title' => 'Pertama Bertemu',
            'story' => 'Kami bertemu dalam kegiatan pemuda vihara. Awalnya hanya saling sapa, tanpa tahu cerita ini baru dimulai.',
        ],
        [
            'year' => '2021',
            'title' => 'Mulai Dekat',
            'story' => 'Obrolan demi obrolan dan kebaktian bersama membuat kami saling mengerti, dan perlahan tumbuh rasa nyaman.',
        ],
        [
            'year' => '2025',
            'title' => 'Lamaran',
            'story' => 'Kedua keluarga bertemu, menyampaikan niat baik, dan saling merestui untuk melangkah lebih jauh.',
        ],
        [
            'year' => '2026',
            'title' => 'Pemberkahan Perkawinan',
            'story' => 'Dengan hati penuh syukur, kami mengikat janji di hadapan Triratna dan memohon doa restu Anda.',
        ],
    ];

    $defaultQuoteText = 'Bila suami dan istri ingin bertemu kembali dalam kehidupan mendatang, hendaklah keduanya setara dalam keyakinan, kemoralan, kemurahan hati, dan kebijaksanaan.';
    $defaultQuoteSource = 'Samajīvī Sutta · Aṅguttara Nikāya 4.55';
    $quoteText = !empty($invitation->quote) ? $invitation->quote : $defaultQuoteText;
    $quoteSource = !empty($invitation->quote_author) ? $invitation->quote_author : $defaultQuoteSource;

    $wishes = $invitation->wishes ?? [
        (object)[
            'name' => 'Keluarga Besar Vihara Dhamma',
            'attendance' => 'hadir',
            'message' => 'Selamat menempuh hidup baru Metta & Surya. Semoga selalu dilimpahi kebahagiaan dan kedamaian. Sādhu.',
            'created_at' => now()->subHours(2),
        ],
        (object)[
            'name' => 'Upasaka Hendra & Keluarga',
            'attendance' => 'hadir',
            'message' => 'Sukhi hotu. Semoga cinta kasih selalu menaungi bahtera rumah tangga kalian.',
            '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 Pemberkahan Perkawinan | {{ $bride['nickname'] ?? 'Metta' }} &amp; {{ $groom['nickname'] ?? 'Surya' }}</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=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,600&family=Nunito+Sans:wght@300;400;600&display=swap" rel="stylesheet">
  
  <style>
/* ============ VARIABEL WARNA (saffron, marun, krem, teratai) ============ */
:root {
  --saffron: #f4a21f;
  --saffron-deep: #d9770a;
  --maroon: #6b1a24;
  --maroon-deep: #3a0c13;
  --gold: #d4a63e;
  --gold-light: #f5de9a;
  --gold-dark: #97701a;
  --lotus: #ee8fae;
  --lotus-deep: #c85f84;
  --lotus-light: #fde9ef;
  --cream: #fffaf0;
  --cream2: #fbf0dc;
  --ink: #4a3a34;
  --muted: #86756c;

  --font-serif: "Fraunces", serif;
  --font-sans: "Nunito Sans", sans-serif;

  --gold-grad: linear-gradient(135deg, var(--gold-dark), var(--gold-light) 40%, var(--gold) 60%, var(--gold-dark));
}

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

body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.04rem;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.85;
  overflow-x: hidden;
}

.section { padding: 100px 20px; position: relative; overflow: hidden; }
.cream   { background: var(--cream); }
.pink    { background: linear-gradient(180deg, #fff, var(--lotus-light)); }
.saffron { background: linear-gradient(160deg, var(--saffron), var(--saffron-deep)); color: #fff8ea; }
.maroon  { background: linear-gradient(180deg, var(--maroon), var(--maroon-deep)); color: #f4e4cf; }
.center { text-align: center; }
.container { max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; }
.narrow { max-width: 640px; }

.kicker { font-size: .72rem; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: var(--lotus-deep); margin-bottom: 8px; }
.saffron .kicker { color: #fff1cc; }
.maroon .kicker { color: var(--gold); }
.title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 5.5vw, 2.8rem);
  color: var(--maroon);
  text-align: center;
  line-height: 1.3;
  margin-bottom: 50px;
}
.saffron .title { color: #fff; }
.maroon .title { color: var(--gold-light); }

.btn {
  display: inline-block;
  padding: 13px 36px;
  background: linear-gradient(135deg, var(--lotus), var(--lotus-deep));
  color: #fff;
  border: 0;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: .3s;
  box-shadow: 0 8px 22px rgba(200,95,132,.35);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.maroon .btn { background: var(--gold-grad); color: var(--maroon-deep); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.btn.small { padding: 8px 22px; font-size: .64rem; margin-top: 12px; }
.saffron .btn.small { background: var(--maroon); box-shadow: 0 6px 16px rgba(58,12,19,.35); }

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

.mini { width: 56px; margin: 0 auto 16px; display: block; overflow: visible; animation: spin 60s linear infinite; }
.orn { width: 200px; height: auto; margin: 10px auto; display: block; overflow: visible; }
.wm { position: absolute; right: -90px; top: 50%; width: 360px; transform: translateY(-50%); opacity: .16; pointer-events: none; animation: spin 120s linear infinite; }
.wm-l { right: auto; left: -110px; }
@keyframes spin { to { transform: rotate(360deg); } }
.wm { animation-name: spinwm; }
@keyframes spinwm { from { transform: translateY(-50%) rotate(0); } to { transform: translateY(-50%) rotate(360deg); } }

.garland { position: absolute; top: 0; width: clamp(180px, 42vw, 440px); pointer-events: none; overflow: visible; z-index: 1; transform-origin: 50% 0; animation: swing 7s ease-in-out infinite alternate; }
.gl { left: 0; }
.gr { right: 0; transform: scaleX(-1); animation-name: swing2; }
@keyframes swing  { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
@keyframes swing2 { from { transform: scaleX(-1) rotate(-.8deg); } to { transform: scaleX(-1) rotate(.8deg); } }

/* COVER OVERLAY */
#coverOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px 90px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, #fff7dc 0%, rgba(255,243,214,0) 60%),
    radial-gradient(circle at 50% 110%, rgba(244,162,31,.55), transparent 55%),
    linear-gradient(180deg, #fff9ee, #fdecd0);
  transition: opacity .8s ease, visibility .8s ease;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: grid; place-items: center;
  text-align: center;
  padding: 120px 20px 90px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, #fff7dc 0%, rgba(255,243,214,0) 60%),
    radial-gradient(circle at 50% 110%, rgba(244,162,31,.45), transparent 55%),
    linear-gradient(180deg, #fff9ee, #fdecd0);
}
.hero-inner { position: relative; z-index: 3; width: 100%; max-width: 540px; margin: 0 auto; }
.salam { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.9rem; color: var(--saffron-deep); line-height: 1.2; }
.salam-dark { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--lotus-deep); margin-bottom: 20px; }
.eyebrow { font-weight: 600; letter-spacing: .45em; text-transform: uppercase; font-size: .74rem; margin: 4px 0 28px; color: var(--maroon); }

.cover-wrap { position: relative; width: min(240px, 60vw); aspect-ratio: 1; margin: 0 auto 70px; }
.halo { position: absolute; left: 50%; top: 50%; width: 158%; transform: translate(-50%, -50%); opacity: .3; animation: spinc 100s linear infinite; z-index: 0; overflow: visible; }
@keyframes spinc { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.cover-photo {
  position: relative; z-index: 2;
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  border: 6px solid #fff;
  outline: 2px solid var(--gold);
  outline-offset: 5px;
  background: linear-gradient(160deg, #f9c9d8, #f7dcae);
  display: grid; place-items: center;
  color: var(--maroon); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(150,80,40,.3);
}
.cover-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lotus { position: absolute; left: 50%; overflow: visible; pointer-events: none; transform: translateX(-50%); filter: drop-shadow(0 8px 10px rgba(150,70,100,.25)); }
.cover-wrap .lb { bottom: -64px; width: 170%; z-index: 1; }
.cover-wrap .lf { bottom: -74px; width: 170%; z-index: 3; }

.names { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(2.8rem, 10vw, 4.8rem); line-height: 1.2; color: var(--maroon); }
.names i { font-style: normal; font-size: .6em; padding: 0 .1em; color: var(--gold-dark); }
.names.small { font-size: clamp(2.4rem, 7vw, 3.6rem); color: var(--gold-light); }
.names.small i { color: var(--lotus); }
.date { font-weight: 600; font-size: .98rem; letter-spacing: .3em; text-transform: uppercase; margin: 4px 0 16px; color: var(--saffron-deep); }
.guest { font-size: .98rem; color: var(--muted); margin-bottom: 26px; }
.guest b { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--maroon); font-weight: 600; }

.countdown { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.countdown div {
  width: 96px; height: 108px;
  border-radius: 18px;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 8px 24px rgba(180,80,10,.25);
  display: grid; place-content: center;
}
.countdown b { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 2.3rem; color: #fff; line-height: 1.1; }
.countdown span { font-size: .66rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: #fff1cc; }

.quote { font-family: var(--font-serif); font-size: 1.22rem; font-style: italic; line-height: 2; color: var(--ink); }
.source { margin-top: 14px; font-size: .85rem; font-weight: 600; letter-spacing: .18em; color: var(--maroon); }
.pepatah { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.55rem; color: var(--maroon); margin-top: 24px; }
.arti { font-size: .92rem; color: var(--muted); font-style: italic; }

.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-wrap { position: relative; width: 220px; aspect-ratio: 1; margin: 0 auto 30px; }
.photo {
  position: absolute; left: 50%; top: 50%;
  width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4px solid #fff;
  outline: 2px solid var(--lotus);
  outline-offset: 4px;
  background: linear-gradient(160deg, #fde2eb, #f9c9d8);
  display: grid; place-items: center;
  color: var(--maroon); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(150,70,100,.2);
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-wrap .lotus { bottom: -30px; width: 130%; z-index: 2; }
.person h3 { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.7rem; color: var(--maroon); line-height: 1.3; }
.role { font-size: .72rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--lotus-deep); margin: 4px 0 10px; }
.person p { color: var(--muted); }
.and { font-family: var(--font-serif); font-style: italic; font-size: 3.4rem; color: var(--lotus-deep); align-self: center; line-height: 1; }

.events { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.card {
  position: relative;
  border-radius: 22px;
  background: rgba(58,12,19,.75);
  border: 1px solid rgba(212,166,62,.4);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  padding: 50px 30px 40px;
  color: #f7ebe0;
  text-align: center;
}
.card-icon { width: 44px; margin: 0 auto 14px; display: block; overflow: visible; animation: spin 40s linear infinite; }
.card-icon.lot { animation: none; width: 80px; }
.card h3 { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.8rem; color: var(--gold-light); margin-bottom: 8px; line-height: 1.2; }
.card .when { font-weight: 600; font-size: 1.2rem; }
.card .time { font-size: .88rem; font-weight: 600; letter-spacing: .15em; color: var(--gold); margin-bottom: 12px; }
.card .where { color: #eedbd0; }

.timeline { position: relative; margin-top: 10px; }
.timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: linear-gradient(var(--lotus), var(--saffron), var(--maroon));
}
.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-dot {
  position: absolute; top: 22px; right: -16px; width: 32px; height: 32px;
  background: var(--cream); border-radius: 50%; display: grid; place-items: center; z-index: 2;
}
.t-item:nth-child(even) .t-dot { right: auto; left: -16px; }
.t-dot svg { width: 100%; height: 100%; animation: spin 16s linear infinite; }
.t-box { background: #fff; border: 1px solid #ebd7bf; border-radius: 16px; padding: 20px 24px; box-shadow: 0 8px 22px rgba(100,50,20,.08); }
.t-year { font-size: .78rem; font-weight: 600; letter-spacing: .3em; color: var(--saffron-deep); }
.t-box h3 { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.45rem; color: var(--maroon); margin: 2px 0 6px; line-height: 1.3; }
.t-box p { color: var(--muted); line-height: 1.75; font-size: 1rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 210px; gap: 14px; }
.g {
  background: linear-gradient(135deg, #fde3ec, #fad4b2);
  border: 4px solid #fff;
  border-radius: 16px;
  display: grid; place-items: center;
  color: var(--maroon); font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  overflow: hidden; transition: transform .5s;
  box-shadow: 0 6px 18px rgba(150,70,100,.15);
}
.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(58,12,19,.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 #fff; border-radius: 12px; }

.gifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 34px; }
.gift {
  border-radius: 16px;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 8px 24px rgba(180,80,10,.25);
  display: grid; gap: 2px; justify-items: center;
  padding: 26px 16px;
  color: #fff;
}
.gift strong { font-size: .75rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #fff1cc; }
.gift span { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.4rem; color: #fff; }
.gift em { color: #fbf0dc; font-style: normal; }

.rsvp { display: grid; gap: 22px; }
.rsvp label { display: grid; gap: 6px; font-size: .72rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--maroon); text-align: left; }
.rsvp input, .rsvp select, .rsvp textarea {
  width: 100%; padding: 12px 14px;
  font-family: var(--font-sans); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink);
  background: #fff;
  border: 1px solid #dfc7b0;
  border-radius: 10px; outline: none; transition: .3s;
}
.rsvp textarea { resize: vertical; }
.rsvp input:focus, .rsvp select:focus, .rsvp textarea:focus { border-color: var(--lotus-deep); box-shadow: 0 0 0 4px rgba(200,95,132,.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: #fff; border-left: 5px solid var(--lotus-deep); border-radius: 6px; padding: 16px 20px; box-shadow: 0 6px 16px rgba(100,50,20,.08); text-align: left; }
.wish strong { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.35rem; color: var(--maroon); }
.wish small { margin-left: 8px; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--saffron-deep); }
.wish p { color: var(--muted); line-height: 1.7; }

.footer {
  position: relative;
  text-align: center;
  padding: 130px 20px 80px;
  overflow: hidden;
  color: #f4e4cf;
  background: linear-gradient(180deg, var(--maroon), var(--maroon-deep));
}
.footer-in { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; }
.copy { font-style: italic; color: #eedbd0; }
.thanks { margin-top: 14px; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.4rem; color: var(--gold-light); }

.stupa { position: absolute; bottom: 0; width: 90px; height: auto; pointer-events: none; opacity: .25; overflow: visible; }
.s1 { left: 4%; }
.s2 { right: 4%; }
.s3 { left: 50%; transform: translateX(-50%); width: 130px; opacity: .12; }

.music-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lotus), var(--lotus-deep));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  border: 1px solid var(--lotus-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: 74px; height: 86px; }
  .countdown b { font-size: 1.8rem; }
  .countdown span { font-size: .5rem; letter-spacing: .12em; }
  .gallery .g.wide { grid-column: span 1; }
  .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-dot, .t-item:nth-child(even) .t-dot { left: -2px; right: auto; }
}

@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 Buddhis: teratai, Dharmachakra, daun bodhi, stupa ====== -->
  <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="#f5de9a"/>
        <stop offset=".5" stop-color="#d4a63e"/>
        <stop offset="1" stop-color="#97701a"/>
      </linearGradient>
      <radialGradient id="gLot" cx=".5" cy="1" r="1">
        <stop offset="0" stop-color="#ee8fae"/>
        <stop offset=".5" stop-color="#f8c3d3"/>
        <stop offset="1" stop-color="#fff3f6"/>
      </radialGradient>
      <radialGradient id="gLotW" cx=".5" cy="1" r="1">
        <stop offset="0" stop-color="#f5a9c1"/>
        <stop offset=".45" stop-color="#fde0e9"/>
        <stop offset="1" stop-color="#ffffff"/>
      </radialGradient>
      <linearGradient id="gLeaf" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#8db878"/>
        <stop offset="1" stop-color="#5f8a50"/>
      </linearGradient>

      <path id="lpet" d="M0 0 C-30 -20 -34 -70 0 -120 C34 -70 30 -20 0 0Z"/>
      <g id="petB">
        <use href="#lpet" fill="url(#gLot)" stroke="#e58aa8" stroke-width="1.2"/>
        <path d="M0 -8 V-92" stroke="#d96b8f" stroke-opacity=".4" stroke-width="1.4" fill="none"/>
      </g>
      <g id="petF">
        <use href="#lpet" fill="url(#gLotW)" stroke="#f0b3c6" stroke-width="1.2"/>
        <path d="M0 -8 V-92" stroke="#e58aa8" stroke-opacity=".35" stroke-width="1.2" fill="none"/>
      </g>

      <symbol id="lotusBack" viewBox="0 0 300 150" style="overflow:visible">
        <g transform="translate(150 140)">
          <use href="#petB" transform="rotate(-78)"/>
          <use href="#petB" transform="rotate(78)"/>
          <use href="#petB" transform="rotate(-52)"/>
          <use href="#petB" transform="rotate(52)"/>
          <use href="#petB" transform="rotate(-26)"/>
          <use href="#petB" transform="rotate(26)"/>
          <use href="#petB" transform="rotate(0)"/>
        </g>
      </symbol>
      <symbol id="lotusFront" viewBox="0 0 300 150" style="overflow:visible">
        <g transform="translate(150 140)">
          <use href="#petF" transform="rotate(-64) scale(.8)"/>
          <use href="#petF" transform="rotate(64) scale(.8)"/>
          <use href="#petF" transform="rotate(-38) scale(.8)"/>
          <use href="#petF" transform="rotate(38) scale(.8)"/>
          <use href="#petF" transform="rotate(-13) scale(.8)"/>
          <use href="#petF" transform="rotate(13) scale(.8)"/>
        </g>
      </symbol>
      <symbol id="lotus" viewBox="0 0 300 150" style="overflow:visible">
        <use href="#lotusBack"/>
        <use href="#lotusFront"/>
      </symbol>

      <g id="spk">
        <path d="M50 14 V40" stroke="url(#gGold)" stroke-width="3.5" stroke-linecap="round"/>
        <circle cx="50" cy="12" r="3.4" fill="url(#gGold)"/>
      </g>
      <symbol id="chakra" viewBox="0 0 100 100" style="overflow:visible">
        <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gGold)" stroke-width="5"/>
        <circle cx="50" cy="50" r="37" fill="none" stroke="url(#gGold)" stroke-width="1.5"/>
        <use href="#spk"/>
        <use href="#spk" transform="rotate(45 50 50)"/>
        <use href="#spk" transform="rotate(90 50 50)"/>
        <use href="#spk" transform="rotate(135 50 50)"/>
        <use href="#spk" transform="rotate(180 50 50)"/>
        <use href="#spk" transform="rotate(225 50 50)"/>
        <use href="#spk" transform="rotate(270 50 50)"/>
        <use href="#spk" transform="rotate(315 50 50)"/>
        <circle cx="50" cy="50" r="10" fill="url(#gGold)"/>
        <circle cx="50" cy="50" r="4" fill="#fff3d0"/>
      </symbol>

      <symbol id="bodhi" viewBox="0 0 40 66" style="overflow:visible">
        <path d="M20 0 C34 0 42 12 38 26 C35 36 26 40 21 48 C20 52 20 58 21 64 C19 58 19 52 19 48 C14 40 5 36 2 26 C-2 12 6 0 20 0Z" fill="url(#gLeaf)" stroke="#4f7a42" stroke-width="1"/>
        <path d="M20 4 V50" stroke="#e8f2dc" stroke-opacity=".7" stroke-width="1.2"/>
        <path d="M20 14 L10 20 M20 14 L30 20 M20 26 L9 32 M20 26 L31 32 M20 38 L13 42 M20 38 L27 42" stroke="#e8f2dc" stroke-opacity=".5" stroke-width="1" fill="none"/>
      </symbol>

      <symbol id="garland" viewBox="0 0 300 110" style="overflow:visible">
        <path d="M0 6 Q150 76 300 6" fill="none" stroke="url(#gGold)" stroke-width="2.4"/>
        <g fill="url(#gGold)">
          <circle cx="30"  cy="18.6" r="3.4"/><circle cx="75"  cy="32.2" r="3.4"/>
          <circle cx="120" cy="39.6" r="3.4"/><circle cx="165" cy="40.6" r="3.4"/>
          <circle cx="210" cy="35.4" r="3.4"/><circle cx="255" cy="23.8" r="3.4"/>
        </g>
        <use href="#bodhi" x="19"  y="22" width="22" height="36"/>
        <use href="#bodhi" x="64"  y="36" width="22" height="36"/>
        <use href="#bodhi" x="109" y="43" width="22" height="36"/>
        <use href="#bodhi" x="154" y="44" width="22" height="36"/>
        <use href="#bodhi" x="199" y="39" width="22" height="36"/>
        <use href="#bodhi" x="244" y="27" width="22" height="36"/>
      </symbol>

      <symbol id="stupa" viewBox="0 0 120 150" style="overflow:visible">
        <g fill="url(#gGold)" stroke="#8a6414" stroke-width=".8">
          <rect x="10" y="124" width="100" height="14"/>
          <rect x="18" y="112" width="84" height="12"/>
          <rect x="26" y="100" width="68" height="12"/>
          <path d="M30 100 C30 56 90 56 90 100Z"/>
          <rect x="50" y="44" width="20" height="12"/>
          <rect x="44" y="36" width="32" height="4"/>
          <rect x="50" y="28" width="20" height="4"/>
          <rect x="55" y="20" width="10" height="4"/>
          <path d="M60 20 V6"/>
          <circle cx="60" cy="5" r="3"/>
        </g>
        <g fill="#6b4a0c" fill-opacity=".45">
          <path d="M60 66 L64 72 L60 78 L56 72Z"/>
          <path d="M46 74 L50 80 L46 86 L42 80Z"/>
          <path d="M74 74 L78 80 L74 86 L70 80Z"/>
        </g>
      </symbol>

      <symbol id="ornament" viewBox="0 0 200 30" style="overflow:visible">
        <g fill="none" stroke="url(#gGold)" stroke-width="1.8" stroke-linecap="round">
          <path d="M8 15 H78 M122 15 H192"/>
        </g>
        <g transform="translate(100 24) scale(.12)"><use href="#lotus" x="-150" y="-140" width="300" height="150"/></g>
        <circle cx="86" cy="15" r="2.4" fill="url(#gGold)"/><circle cx="114" cy="15" r="2.4" fill="url(#gGold)"/>
      </symbol>
    </defs>
  </svg>

  <!-- ============ MODAL COVER OVERLAY ============ -->
  <div id="coverOverlay">
    <svg class="garland gl" viewBox="0 0 300 110"><use href="#garland"/></svg>
    <svg class="garland gr" viewBox="0 0 300 110"><use href="#garland"/></svg>
    <div class="hero-inner">
      <p class="salam">Namo Buddhaya</p>
      <p class="eyebrow">Pemberkahan Perkawinan</p>

      <div class="cover-wrap">
        <svg class="halo" viewBox="0 0 100 100"><use href="#chakra"/></svg>
        <svg class="lotus lb" viewBox="0 0 300 150"><use href="#lotusBack"/></svg>
        <figure class="cover-photo">
          <img src="{{ $coverPhoto }}" alt="Foto {{ $bride['nickname'] }} &amp; {{ $groom['nickname'] }}">
        </figure>
        <svg class="lotus lf" viewBox="0 0 300 150"><use href="#lotusFront"/></svg>
      </div>

      <h1 class="names">{{ $bride['nickname'] }} <i>&amp;</i> {{ $groom['nickname'] }}</h1>
      <svg class="orn" viewBox="0 0 200 30"><use href="#ornament"/></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>

  <!-- ============ COVER HERO ============ -->
  <header class="hero" id="home">
    <svg class="garland gl" viewBox="0 0 300 110"><use href="#garland"/></svg>
    <svg class="garland gr" viewBox="0 0 300 110"><use href="#garland"/></svg>

    <div class="hero-inner">
      <p class="salam">Namo Buddhaya</p>
      <p class="eyebrow">Pemberkahan Perkawinan</p>

      <div class="cover-wrap">
        <svg class="halo" viewBox="0 0 100 100"><use href="#chakra"/></svg>
        <svg class="lotus lb" viewBox="0 0 300 150"><use href="#lotusBack"/></svg>
        <figure class="cover-photo">
          <img src="{{ $coverPhoto }}" alt="Foto {{ $bride['nickname'] }} &amp; {{ $groom['nickname'] }}">
        </figure>
        <svg class="lotus lf" viewBox="0 0 300 150"><use href="#lotusFront"/></svg>
      </div>

      <h1 class="names">{{ $bride['nickname'] }} <i>&amp;</i> {{ $groom['nickname'] }}</h1>
      <svg class="orn" viewBox="0 0 200 30"><use href="#ornament"/></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>
  </header>

  <!-- ============ 1. COUNTDOWN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown'))
  <section class="section saffron center" id="section-countdown">
    <div id="countdown"></div>
    <svg class="wm" viewBox="0 0 100 100"><use href="#chakra"/></svg>
    <div class="container reveal">
      <p class="kicker">Save The Date</p>
      <h2 class="title">Menghitung Hari</h2>
      <div class="countdown">
        <div><b id="d">00</b><span>Hari</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 100 100"><use href="#chakra"/></svg>
      <p class="salam-dark">Namo Buddhaya, Namo Dhammaya, Namo Sanghaya</p>
      <p class="quote">“{!! nl2br(e($quoteText)) !!}”</p>
      <p class="source">— {{ $quoteSource }}</p>
      <svg class="orn" viewBox="0 0 200 30"><use href="#ornament"/></svg>
      <p class="pepatah">Sabbe satta bhavantu sukhitatta</p>
      <p class="arti">Semoga semua makhluk berbahagia.</p>
    </div>
  </section>
  @endif

  <!-- ============ 3. INFORMASI PENGANTIN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('couple'))
  <section class="section pink" id="section-couple">
    <div id="pengantin"></div>
    <div class="container">
      <p class="kicker center reveal">Mempelai</p>
      <h2 class="title reveal">Dua Hati, Satu Tujuan</h2>
      <div class="couple">
        <article class="person reveal">
          <div class="photo-wrap">
            <figure class="photo">
              <img src="{{ $bride['photo'] ?? 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80' }}" alt="{{ $bride['name'] }}">
            </figure>
            <svg class="lotus lf" viewBox="0 0 300 150"><use href="#lotus"/></svg>
          </div>
          <h3>{{ $bride['name'] }}</h3>
          <p class="role">Mempelai Wanita</p>
          <p>Putri dari<br>{{ $bride['parents'] ?? 'Bapak & Ibu' }}</p>
        </article>

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

        <article class="person reveal">
          <div class="photo-wrap">
            <figure class="photo">
              <img src="{{ $groom['photo'] ?? 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=600&q=80' }}" alt="{{ $groom['name'] }}">
            </figure>
            <svg class="lotus lf" viewBox="0 0 300 150"><use href="#lotus"/></svg>
          </div>
          <h3>{{ $groom['name'] }}</h3>
          <p class="role">Mempelai Pria</p>
          <p>Putra dari<br>{{ $groom['parents'] ?? 'Bapak & Ibu' }}</p>
        </article>
      </div>
    </div>
  </section>
  @endif

  <!-- ============ 4. JADWAL ACARA ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('event'))
  <section class="section maroon" 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-icon" viewBox="0 0 100 100"><use href="#chakra"/></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'] ?? '09: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>
    </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-dot"><svg viewBox="0 0 100 100"><use href="#chakra"/></svg></div>
          <div class="t-box">
            <span class="t-year">{{ $st['year'] ?? '' }}</span>
            <h3>{{ $st['title'] ?? '' }}</h3>
            <p>{{ $st['story'] ?? ($st['content'] ?? ($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 pink" 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

  <!-- ============ 6B. LIVE STREAMING ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('streaming'))
    @include('templates.sections.streaming')
  @endif

  <!-- ============ 7. INFO TANDA KASIH ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gift'))
  @if($hasGifts)
  <section class="section saffron center" id="section-gift">
    <div id="hadiah"></div>
    <svg class="wm wm-l" viewBox="0 0 100 100"><use href="#chakra"/></svg>
    <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>
      
      @if(session('wish_success'))
        <div style="margin: 16px 0; padding: 12px 16px; background: #e8f5e9; border: 1px solid #81c784; color: #2e7d32; border-radius: 12px; font-size: 13px; text-align: center;">
          {{ session('wish_success') }}
        </div>
      @elseif(session('wish_error'))
        <div style="margin: 16px 0; padding: 12px 16px; background: #ffebee; border: 1px solid #e57373; color: #c62828; border-radius: 12px; font-size: 13px; text-align: center;">
          {{ session('wish_error') }}
        </div>
      @endif

      <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">
    <svg class="garland gl" viewBox="0 0 300 110"><use href="#garland"/></svg>
    <svg class="garland gr" viewBox="0 0 300 110"><use href="#garland"/></svg>
    <div class="footer-in reveal">
      <svg class="mini light" viewBox="0 0 100 100"><use href="#chakra"/></svg>
      <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="orn" viewBox="0 0 200 30"><use href="#ornament"/></svg>
      <p class="copy">Semoga semua makhluk berbahagia. Sabbe satta bhavantu sukhitatta.</p>
      <p class="thanks">Sādhu · Sādhu · Sādhu</p>
    </div>
    <svg class="stupa s1" viewBox="0 0 120 150"><use href="#stupa"/></svg>
    <svg class="stupa s2" viewBox="0 0 120 150"><use href="#stupa"/></svg>
    <svg class="stupa s3" viewBox="0 0 120 150"><use href="#stupa"/></svg>

    <!-- Official Janoer Koening Branding Footer -->
    <div style="margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); 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, #f5de9a); 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-20T09: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>