{"id":193,"date":"2026-05-10T06:19:05","date_gmt":"2026-05-10T06:19:05","guid":{"rendered":"https:\/\/invitastory.shop\/?page_id=193"},"modified":"2026-05-10T07:20:54","modified_gmt":"2026-05-10T07:20:54","slug":"template-2","status":"publish","type":"page","link":"https:\/\/invitastory.shop\/index.php\/template-2\/","title":{"rendered":"Template 2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"193\" class=\"elementor elementor-193\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50580f8 e-con e-atomic-element e-div-block-base e-50580f8-afde339 \" data-id=\"50580f8\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"50580f8\">\n    \t\t<div class=\"elementor-element elementor-element-8d934cd elementor-widget elementor-widget-html\" data-id=\"8d934cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* 1. KUNCI SCROLL TOTAL *\/\r\n    html.no-scroll, body.no-scroll { \r\n        overflow: hidden !important; \r\n        height: 100vh !important; \r\n        position: fixed !important;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* 2. COVER SECTION *\/\r\n    #cover-invitation {\r\n        position: fixed;\r\n        top: 0; left: 0;\r\n        width: 100%; height: 100vh;\r\n        background: #ffffff;\r\n        z-index: 999999;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);\r\n    }\r\n\r\n    .hide-cover { transform: translateY(-100%); pointer-events: none; }\r\n\r\n    .content-cover { \r\n        text-align: center; \r\n        position: relative;\r\n        z-index: 10;\r\n        font-family: 'Montserrat', sans-serif; \r\n        color: #4a4a4a; \r\n        padding: 20px;\r\n    }\r\n\r\n    .orn-cover { position: absolute; width: 25%; max-width: 250px; z-index: 1; pointer-events: none; }\r\n    .top-l { top: 0; left: 0; }\r\n    .top-r { top: 0; right: 0; }\r\n    .bottom-l { bottom: 0; left: 0; }\r\n    .bottom-r { bottom: 0; right: 0; transform: scaleX(-1); }\r\n\r\n    .names-cv { font-family: 'Great Vibes', cursive; font-size: 50px; color: #5d7a6a; margin: 15px 0; }\r\n    \r\n    .date-cv { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 20px 0; font-family: 'Playfair Display'; }\r\n    .date-cv span { border-right: 1px solid #4a4a4a; padding-right: 15px; font-size: 14px; }\r\n    .date-cv span:last-child { border-right: none; }\r\n\r\n    .btn-buka {\r\n        background-color: #5d7a6a; \r\n        color: white !important; \r\n        border: none;\r\n        padding: 12px 30px; \r\n        border-radius: 8px; \r\n        cursor: pointer; \r\n        display: inline-flex; \r\n        align-items: center; \r\n        gap: 8px; \r\n        font-size: 14px;\r\n        z-index: 20;\r\n    }\r\n\r\n    \/* 3. MAIN CONTENT *\/\r\n    #main-content { opacity: 0; transition: opacity 1s ease; }\r\n    .show-main { opacity: 1 !important; }\r\n\r\n    \/* 4. NAVBAR (Sticky) *\/\r\n    #sticky-navbar {\r\n        position: fixed;\r\n        bottom: -100px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        width: 90%;\r\n        max-width: 400px;\r\n        background: rgba(255, 255, 255, 0.9);\r\n        backdrop-filter: blur(10px);\r\n        display: flex;\r\n        justify-content: space-around;\r\n        padding: 15px;\r\n        border-radius: 25px;\r\n        box-shadow: 0 5px 25px rgba(0,0,0,0.1);\r\n        z-index: 9999;\r\n        transition: bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n    #sticky-navbar.show-nav { bottom: 20px; }\r\n\r\n    \/* 5. MUSIC CONTROL (Floating) *\/\r\n    #music-control {\r\n        position: fixed;\r\n        top: 20px;\r\n        right: 20px;\r\n        width: 45px;\r\n        height: 45px;\r\n        background: rgba(93, 122, 106, 0.8);\r\n        color: white;\r\n        border-radius: 50%;\r\n        display: none; \/* Muncul setelah klik buka *\/\r\n        justify-content: center;\r\n        align-items: center;\r\n        cursor: pointer;\r\n        z-index: 10000;\r\n        font-size: 20px;\r\n    }\r\n    .spin { animation: spin 4s linear infinite; }\r\n    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\r\n<\/style>\r\n\r\n<div id=\"cover-invitation\">\r\n    <img decoding=\"async\" src=\"URL_WATERCOLOR_L\" class=\"orn-cover top-l\">\r\n    <img decoding=\"async\" src=\"URL_BUNGA_R\" class=\"orn-cover top-r\">\r\n    <img decoding=\"async\" src=\"URL_BUNGA_L\" class=\"orn-cover bottom-l\">\r\n    <img decoding=\"async\" src=\"URL_WATERCOLOR_R\" class=\"orn-cover bottom-r\">\r\n\r\n    <div class=\"content-cover\">\r\n        <p style=\"text-transform: uppercase; letter-spacing: 3px; font-size: 11px;\">Undangan Pernikahan<\/p>\r\n        <h1 class=\"names-cv\">Kania & Bagas<\/h1>\r\n        \r\n        <div class=\"date-cv\">\r\n            <span>Sabtu<\/span>\r\n            <span style=\"font-size: 24px; font-weight: bold;\">28<\/span>\r\n            <span>Maret <br> 2026<\/span>\r\n        <\/div>\r\n\r\n        <p style=\"font-size: 13px; margin-bottom: 5px;\">Kepada:<\/p>\r\n        <h3 id=\"nama-tamu-cv\" style=\"margin-bottom: 25px; font-weight: 600;\">Tamu Undangan<\/h3>\r\n\r\n        <button class=\"btn-buka\" onclick=\"bukaUndangan()\">\r\n            \ud83d\udce9 Buka Undangan\r\n        <\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n<div id=\"main-content\">\r\n    <\/div>\r\n\r\n<nav id=\"sticky-navbar\">\r\n    <a href=\"#\" style=\"text-decoration:none\">\ud83c\udfe0<\/a>\r\n    <a href=\"#section-story\" style=\"text-decoration:none\">\u2764\ufe0f<\/a>\r\n    <a href=\"#section-galeri\" style=\"text-decoration:none\">\ud83d\uddbc\ufe0f<\/a>\r\n    <a href=\"#section-kado\" style=\"text-decoration:none\">\ud83c\udf81<\/a>\r\n<\/nav>\r\n\r\n<audio id=\"myAudio\" loop>\r\n    <source src=\"https:\/\/invitastory.shop\/wp-content\/uploads\/2026\/05\/Jazz-Standards-Medley-Fly-Me-To-The-Moon-Autumn-Leaves-Misty-L.O.V.E.-More-Mild-Nawin-MKEpPhefcxU.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n\r\n<div id=\"music-control\" class=\"spin\" onclick=\"toggleMusic()\">\r\n    <span id=\"music-icon\">\ud83c\udfb5<\/span>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ Ambil Nama Tamu dari URL\r\n    const urlParams = new URLSearchParams(window.location.search);\r\n    const guest = urlParams.get('to');\r\n    if (guest) {\r\n        document.getElementById('nama-tamu-cv').innerText = guest;\r\n    }\r\n\r\n    function bukaUndangan() {\r\n        \/\/ 1. Scroll ke atas\r\n        window.scrollTo(0, 0);\r\n\r\n        \/\/ 2. Buka kunci scroll\r\n        document.body.classList.remove('no-scroll');\r\n        document.documentElement.classList.remove('no-scroll');\r\n        \r\n        \/\/ 3. Animasi Cover & Main Content\r\n        document.getElementById('cover-invitation').classList.add('hide-cover');\r\n        document.getElementById('main-content').classList.add('show-main');\r\n        document.getElementById('sticky-navbar').classList.add('show-nav');\r\n\r\n        \/\/ 4. PUTAR MUSIK\r\n        const audio = document.getElementById('myAudio');\r\n        const musicCtrl = document.getElementById('music-control');\r\n        \r\n        audio.play();\r\n        musicCtrl.style.display = 'flex'; \/\/ Tampilkan tombol bulat musik\r\n    }\r\n\r\n    function toggleMusic() {\r\n        const audio = document.getElementById('myAudio');\r\n        const musicCtrl = document.getElementById('music-control');\r\n        const icon = document.getElementById('music-icon');\r\n\r\n        if (audio.paused) {\r\n            audio.play();\r\n            icon.innerText = \"\ud83c\udfb5\";\r\n            musicCtrl.classList.add('spin');\r\n        } else {\r\n            audio.pause();\r\n            icon.innerText = \"\ud83d\udd07\";\r\n            musicCtrl.classList.remove('spin');\r\n        }\r\n    }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-d9a44f3 e-con e-atomic-element e-div-block-base e-d9a44f3-ac80bf4 \" data-id=\"d9a44f3\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"d9a44f3\">\n    \t\t<div class=\"elementor-element elementor-element-40de604 elementor-widget elementor-widget-html\" data-id=\"40de604\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* SECTION HEADER UTAMA (GAMBAR YANG KAMU KIRIM) *\/\r\n    .section-header-opened {\r\n        position: relative;\r\n        width: 100%;\r\n        min-height: 100vh;\r\n        background-color: #ffffff;\r\n        text-align: center;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        font-family: 'Montserrat', sans-serif;\r\n    }\r\n\r\n    \/* Background Watercolor Hijau Sage di atas & bawah *\/\r\n    .bg-watercolor-wrap {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: 1;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .bg-img-top {\r\n        width: 100%;\r\n        opacity: 0.8;\r\n    }\r\n\r\n    \/* Foto Bunga Besar di Atas *\/\r\n    .flower-top {\r\n        position: relative;\r\n        z-index: 3;\r\n        width: 100%;\r\n        max-width: 500px;\r\n        margin-top: -30px; \/* Menyesuaikan posisi bunga agar agak ke atas *\/\r\n    }\r\n\r\n    \/* Konten Teks *\/\r\n    .header-content-box {\r\n        position: relative;\r\n        z-index: 4;\r\n        margin-top: 20px;\r\n        color: #4a4a4a;\r\n    }\r\n\r\n    .title-undangan {\r\n        font-size: 14px;\r\n        letter-spacing: 2px;\r\n        text-transform: none;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .names-main {\r\n        font-family: 'Great Vibes', cursive;\r\n        font-size: 60px;\r\n        color: #2d4a3e;\r\n        line-height: 1.2;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .date-main {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: 16px;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    \/* COUNTDOWN STYLE SESUAI GAMBAR *\/\r\n    .countdown-container {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 15px;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .cd-box {\r\n        text-align: center;\r\n    }\r\n\r\n    .cd-number {\r\n        width: 45px;\r\n        height: 45px;\r\n        background-color: #5d7a6a;\r\n        color: white;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-weight: 600;\r\n        font-size: 16px;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    .cd-text {\r\n        font-size: 11px;\r\n        color: #666;\r\n    }\r\n\r\n    .recipient-info {\r\n        font-size: 14px;\r\n        margin-top: 20px;\r\n    }\r\n\r\n    .recipient-name {\r\n        font-weight: 700;\r\n        font-size: 18px;\r\n        margin-top: 5px;\r\n        display: block;\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .names-main { font-size: 45px; }\r\n        .flower-top { max-width: 100%; }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"section-header-opened\">\r\n    <div class=\"bg-watercolor-wrap\">\r\n        <img decoding=\"async\" src=\"URL_SAGE_WATERCOLOR_TOP\" class=\"bg-img-top\">\r\n    <\/div>\r\n\r\n    <img decoding=\"async\" src=\"URL_BUNGA_BESAR_ATAS\" class=\"flower-top\">\r\n\r\n    <div class=\"header-content-box\">\r\n        <p class=\"title-undangan\">Undangan Pernikahan<\/p>\r\n        <h1 class=\"names-main\">Kania <br> & <br> Bagas<\/h1>\r\n        \r\n        <div class=\"date-main\">\r\n            <p>Sabtu<\/p>\r\n            <p>28 \u2022 03 \u2022 2026<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"countdown-container\">\r\n            <div class=\"cd-box\">\r\n                <div class=\"cd-number\" id=\"main-days\">00<\/div>\r\n                <div class=\"cd-text\">Hari<\/div>\r\n            <\/div>\r\n            <div class=\"cd-box\">\r\n                <div class=\"cd-number\" id=\"main-hours\">00<\/div>\r\n                <div class=\"cd-text\">Jam<\/div>\r\n            <\/div>\r\n            <div class=\"cd-box\">\r\n                <div class=\"cd-number\" id=\"main-minutes\">00<\/div>\r\n                <div class=\"cd-text\">Menit<\/div>\r\n            <\/div>\r\n            <div class=\"cd-box\">\r\n                <div class=\"cd-number\" id=\"main-seconds\">00<\/div>\r\n                <div class=\"cd-text\">Detik<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"recipient-info\">\r\n            <p>Kepada:<\/p>\r\n            <span class=\"recipient-name\" id=\"nama-tamu-main-section\">Caca<\/span>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n    \/\/ Update nama tamu secara otomatis jika ada parameter 'to' di URL\r\n    const params = new URLSearchParams(window.location.search);\r\n    const guestName = params.get('to');\r\n    if (guestName) {\r\n        document.getElementById('nama-tamu-main-section').innerText = guestName;\r\n    }\r\n\r\n    \/\/ Timer Hitung Mundur\r\n    const weddingDate = new Date(\"March 28, 2026 09:00:00\").getTime();\r\n    setInterval(function() {\r\n        const skrg = new Date().getTime();\r\n        const selisih = weddingDate - skrg;\r\n\r\n        if (selisih > 0) {\r\n            document.getElementById(\"main-days\").innerText = Math.floor(selisih \/ (1000 * 60 * 60 * 24)).toString().padStart(2, '0');\r\n            document.getElementById(\"main-hours\").innerText = Math.floor((selisih % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60)).toString().padStart(2, '0');\r\n            document.getElementById(\"main-minutes\").innerText = Math.floor((selisih % (1000 * 60 * 60)) \/ (1000 * 60)).toString().padStart(2, '0');\r\n            document.getElementById(\"main-seconds\").innerText = Math.floor((selisih % (1000 * 60)) \/ 1000).toString().padStart(2, '0');\r\n        }\r\n    }, 1000);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-345f170 e-con e-atomic-element e-div-block-base e-345f170-34a2102 \" data-id=\"345f170\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"345f170\">\n    \t\t<div class=\"elementor-element elementor-element-5737325 elementor-widget elementor-widget-html\" data-id=\"5737325\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* Section Mempelai *\/\r\n    .section-mempelai {\r\n        padding: 60px 20px;\r\n        background-color: #ffffff;\r\n        text-align: center;\r\n        font-family: 'Montserrat', sans-serif;\r\n    }\r\n\r\n    .mempelai-intro {\r\n        font-size: 13px;\r\n        letter-spacing: 1px;\r\n        color: #666;\r\n        margin-bottom: 40px;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    .mempelai-wrapper {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 30px;\r\n    }\r\n\r\n    .mempelai-card {\r\n        width: 100%;\r\n        max-width: 400px;\r\n    }\r\n\r\n    .photo-frame {\r\n        width: 180px;\r\n        height: 180px;\r\n        margin: 0 auto 20px;\r\n        border-radius: 50%;\r\n        border: 5px solid #f0f2f0;\r\n        overflow: hidden;\r\n        box-shadow: 0 10px 20px rgba(0,0,0,0.05);\r\n    }\r\n\r\n    .photo-frame img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n    }\r\n\r\n    .mempelai-name {\r\n        font-family: 'Great Vibes', cursive;\r\n        font-size: 38px;\r\n        color: #2d4a3e;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    .parent-name {\r\n        font-size: 14px;\r\n        color: #777;\r\n        font-style: italic;\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    .social-link {\r\n        display: inline-block;\r\n        width: 35px;\r\n        height: 35px;\r\n        line-height: 35px;\r\n        background: #5d7a6a;\r\n        color: #fff !important;\r\n        border-radius: 50%;\r\n        margin: 0 5px;\r\n        font-size: 14px;\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .mempelai-separator {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: 40px;\r\n        font-style: italic;\r\n        color: #5d7a6a;\r\n        margin: 10px 0;\r\n    }\r\n\r\n    @media (min-width: 768px) {\r\n        .mempelai-wrapper {\r\n            flex-direction: row;\r\n            justify-content: center;\r\n            align-items: flex-start;\r\n            gap: 80px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n\r\n<section class=\"section-mempelai\">\r\n    <div class=\"mempelai-intro\">\r\n        Maha suci Allah yang telah menciptakan mahluk-Nya berpasang-pasangan. <br>\r\n        Ya Allah, izinkanlah kami merangkai kasih sayang yang Kau ciptakan di antara kami.\r\n    <\/div>\r\n\r\n    <div class=\"mempelai-wrapper\">\r\n        <div class=\"mempelai-card\">\r\n            <div class=\"photo-frame\">\r\n                <img decoding=\"async\" src=\"URL_FOTO_PENGANTIN_WANITA\" alt=\"Kania Almira\">\r\n            <\/div>\r\n            <h2 class=\"mempelai-name\">Kania Almira<\/h2>\r\n            <p class=\"parent-name\">Putri Bapak Samsudin & Ibu Amina<\/p>\r\n            <div class=\"social-box\">\r\n                <a href=\"#\" class=\"social-link\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"mempelai-separator\">&<\/div>\r\n\r\n        <div class=\"mempelai-card\">\r\n            <div class=\"photo-frame\">\r\n                <img decoding=\"async\" src=\"URL_FOTO_PENGANTIN_PRIA\" alt=\"Bagas Adikarya\">\r\n            <\/div>\r\n            <h2 class=\"mempelai-name\">Bagas Adikarya<\/h2>\r\n            <p class=\"parent-name\">Putra Bapak Khomarudin & Ibu Sumiati<\/p>\r\n            <div class=\"social-box\">\r\n                <a href=\"#\" class=\"social-link\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-f09025b e-con e-atomic-element e-div-block-base e-f09025b-aa57686 \" data-id=\"f09025b\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"f09025b\">\n    \t\t<div class=\"elementor-element elementor-element-ebcea68 elementor-widget elementor-widget-html\" data-id=\"ebcea68\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* Section Acara *\/\r\n    .section-acara {\r\n        padding: 50px 20px;\r\n        background-color: #ffffff;\r\n        text-align: center;\r\n        font-family: 'Montserrat', sans-serif;\r\n        position: relative;\r\n    }\r\n\r\n    \/* Ornamen Atas sesuai Gambar *\/\r\n    .acara-flower-top {\r\n        width: 100%;\r\n        max-width: 500px;\r\n        margin-top: -30px;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .acara-title {\r\n        font-family: 'Great Vibes', cursive;\r\n        font-size: 45px;\r\n        color: #5d7a6a;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .acara-intro {\r\n        font-size: 13px;\r\n        color: #666;\r\n        max-width: 320px;\r\n        margin: 0 auto 40px;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    \/* Card Acara *\/\r\n    .event-card {\r\n        margin-bottom: 50px;\r\n    }\r\n\r\n    .event-type {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: 32px;\r\n        font-weight: 700;\r\n        color: #2d4a3e;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .event-info {\r\n        font-size: 14px;\r\n        color: #444;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    .event-location {\r\n        font-weight: 600;\r\n        margin-top: 10px;\r\n    }\r\n\r\n    .event-address {\r\n        font-size: 12px;\r\n        color: #777;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    \/* Tombol Aksi *\/\r\n    .btn-group {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        margin-top: 15px;\r\n    }\r\n\r\n    .btn-action {\r\n        background-color: #5d7a6a;\r\n        color: #fff !important;\r\n        padding: 8px 15px;\r\n        border-radius: 5px;\r\n        text-decoration: none;\r\n        font-size: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .btn-action:hover {\r\n        background-color: #2d4a3e;\r\n    }\r\n\r\n    \/* Live Streaming *\/\r\n    .live-stream-box {\r\n        margin-top: 60px;\r\n        padding-top: 30px;\r\n        border-top: 1px solid #eee;\r\n    }\r\n\r\n    .live-title {\r\n        font-family: 'Great Vibes', cursive;\r\n        font-size: 35px;\r\n        color: #5d7a6a;\r\n    }\r\n\r\n    .live-desc {\r\n        font-size: 12px;\r\n        color: #777;\r\n        max-width: 300px;\r\n        margin: 10px auto 20px;\r\n    }\r\n\r\n    .btn-live {\r\n        background-color: #5d7a6a;\r\n        color: white !important;\r\n        padding: 10px 25px;\r\n        border-radius: 8px;\r\n        text-decoration: none;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        font-weight: 600;\r\n    }\r\n<\/style>\r\n\r\n<section class=\"section-acara\">\r\n    <img decoding=\"async\" src=\"URL_BUNGA_ATAS_ACARA\" class=\"acara-flower-top\">\r\n\r\n    <h2 class=\"acara-title\">Acara<\/h2>\r\n    <p class=\"acara-intro\">Kami bermaksud untuk mengundang saudara\/(i) dalam acara pernikahan kami pada:<\/p>\r\n\r\n    <div class=\"event-card\">\r\n        <h3 class=\"event-type\">Akad Nikah<\/h3>\r\n        <p class=\"event-info\">Sabtu, 28 Maret 2026<\/p>\r\n        <p class=\"event-info\">09:00 - 10:00 WIB<\/p>\r\n        <p class=\"event-info event-location\">Kediaman Mempelai Wanita<\/p>\r\n        <p class=\"event-address\">Jl. Soekarno Hatta No. 1 Bandung<\/p>\r\n        \r\n        <div class=\"btn-group\">\r\n            <a href=\"#\" class=\"btn-action\"><i class=\"far fa-calendar-alt\"><\/i> Simpan Tanggal<\/a>\r\n            <a href=\"#\" class=\"btn-action\"><i class=\"fas fa-map-marker-alt\"><\/i> Navigasi Map<\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"event-card\">\r\n        <h3 class=\"event-type\">Resepsi<\/h3>\r\n        <p class=\"event-info\">Sabtu, 28 Maret 2026<\/p>\r\n        <p class=\"event-info\">11:00 - 13:00 WIB<\/p>\r\n        <p class=\"event-info event-location\">eL Hotel Royale Bandung<\/p>\r\n        <p class=\"event-address\">Jl. Merdeka No. 2 Bandung<\/p>\r\n        \r\n        <div class=\"btn-group\">\r\n            <a href=\"#\" class=\"btn-action\"><i class=\"far fa-calendar-alt\"><\/i> Simpan Tanggal<\/a>\r\n            <a href=\"#\" class=\"btn-action\"><i class=\"fas fa-map-marker-alt\"><\/i> Navigasi Map<\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"live-stream-box\">\r\n        <h3 class=\"live-title\">Live Streaming<\/h3>\r\n        <p class=\"live-desc\">Acara ini akan disiarkan langsung melalui media internet. Silahkan klik tombol dibawah ini untuk membuka saluran live streaming.<\/p>\r\n        <a href=\"#\" class=\"btn-live\"><i class=\"fas fa-broadcast-tower\"><\/i> Live Streaming<\/a>\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-6249212 e-con e-atomic-element e-div-block-base e-6249212-86b04a5 \" data-id=\"6249212\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"6249212\">\n    \t\t<div class=\"elementor-element elementor-element-2e5b5e1 elementor-widget elementor-widget-html\" data-id=\"2e5b5e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* Section Kisah Cinta *\/\r\n    .section-kisah {\r\n        padding: 60px 20px;\r\n        background-color: #fdfdfd;\r\n        font-family: 'Montserrat', sans-serif;\r\n        text-align: center;\r\n        position: relative;\r\n    }\r\n\r\n    .kisah-title {\r\n        font-family: 'Great Vibes', cursive;\r\n        font-size: 45px;\r\n        color: #5d7a6a;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    \/* Garis Timeline Tengah *\/\r\n    .timeline {\r\n        position: relative;\r\n        max-width: 600px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .timeline::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        bottom: 0;\r\n        left: 20px; \/* Posisi garis di kiri untuk mobile *\/\r\n        width: 2px;\r\n        background: #e0e0e0;\r\n    }\r\n\r\n    \/* Item Timeline *\/\r\n    .timeline-item {\r\n        position: relative;\r\n        margin-bottom: 40px;\r\n        padding-left: 50px; \/* Jarak dari garis *\/\r\n        text-align: left;\r\n    }\r\n\r\n    \/* Icon Bulat di Garis *\/\r\n    .timeline-dot {\r\n        position: absolute;\r\n        left: 11px;\r\n        top: 0;\r\n        width: 20px;\r\n        height: 20px;\r\n        background-color: #5d7a6a;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        z-index: 2;\r\n    }\r\n\r\n    .timeline-dot i {\r\n        color: white;\r\n        font-size: 10px;\r\n    }\r\n\r\n    \/* Card Kisah *\/\r\n    .kisah-card {\r\n        background: white;\r\n        border-radius: 15px;\r\n        overflow: hidden;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n        border: 1px solid #eee;\r\n    }\r\n\r\n    .kisah-img {\r\n        width: 100%;\r\n        height: 200px;\r\n        object-fit: cover;\r\n    }\r\n\r\n    .kisah-content {\r\n        padding: 20px;\r\n    }\r\n\r\n    .kisah-label {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: 18px;\r\n        font-weight: 700;\r\n        color: #2d4a3e;\r\n        margin-bottom: 10px;\r\n        display: block;\r\n        text-align: center;\r\n    }\r\n\r\n    .kisah-text {\r\n        font-size: 12px;\r\n        color: #666;\r\n        line-height: 1.6;\r\n        text-align: justify;\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .kisah-img { height: 160px; }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"section-kisah\">\r\n    <h2 class=\"kisah-title\">Kisah Cinta<\/h2>\r\n\r\n    <div class=\"timeline\">\r\n        \r\n        <div class=\"timeline-item\">\r\n            <div class=\"timeline-dot\"><i class=\"fas fa-heart\"><\/i><\/div>\r\n            <div class=\"kisah-card\">\r\n                <img decoding=\"async\" src=\"URL_FOTO_PERTEMUAN\" class=\"kisah-img\" alt=\"Pertemuan Pertama\">\r\n                <div class=\"kisah-content\">\r\n                    <span class=\"kisah-label\">Pertemuan Pertama<\/span>\r\n                    <p class=\"kisah-text\">\r\n                        Pertama kali kami bertemu saat menjadi anggota sebuah organisasi di kampus. Kebetulan kami berada di divisi yang sama, yang menjadikan kami lebih akrab. Dari diskusi yang serius hingga tawa lepas karena lelucon yang garing, momen-momen itu perlahan menumbuhkan benih cinta yang tak terduga di antara kami.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"timeline-item\">\r\n            <div class=\"timeline-dot\"><i class=\"fas fa-heart\"><\/i><\/div>\r\n            <div class=\"kisah-card\">\r\n                <img decoding=\"async\" src=\"URL_FOTO_LAMARAN\" class=\"kisah-img\" alt=\"Lamaran\">\r\n                <div class=\"kisah-content\">\r\n                    <span class=\"kisah-label\">Lamaran<\/span>\r\n                    <p class=\"kisah-text\">\r\n                        Walaupun kami sempat menjalani hubungan jarak jauh selama 2 tahun terakhir, namun hal itu bukan menjadi halangan untuk hubungan kami. Justru kami menjadi semakin yakin satu sama lain. Oleh karena itu kami memutuskan untuk menjalin hubungan lebih serius.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-2400566 e-con e-atomic-element e-div-block-base e-2400566-9c927c0 \" data-id=\"2400566\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"2400566\">\n    \t\t<div class=\"elementor-element elementor-element-cb1ac47 elementor-widget elementor-widget-html\" data-id=\"cb1ac47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* SECTION GALERI *\/\r\n    .section-galeri {\r\n        padding: 60px 20px;\r\n        background-color: #ffffff;\r\n        text-align: center;\r\n        font-family: 'Montserrat', sans-serif;\r\n    }\r\n\r\n    .galeri-title {\r\n        font-family: 'Great Vibes', cursive;\r\n        font-size: 45px;\r\n        color: #5d7a6a;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .galeri-subtitle {\r\n        font-size: 13px;\r\n        color: #777;\r\n        margin-bottom: 40px;\r\n        letter-spacing: 1px;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    \/* GRID LAYOUT *\/\r\n    .galeri-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 10px;\r\n        max-width: 800px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .galeri-item {\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 8px;\r\n        aspect-ratio: 1 \/ 1;\r\n        background-color: #f0f2f0;\r\n    }\r\n\r\n    \/* Membuat salah satu foto lebih besar (fitur estetik) *\/\r\n    .galeri-item.wide {\r\n        grid-column: span 2;\r\n        aspect-ratio: 16 \/ 9;\r\n    }\r\n\r\n    .galeri-img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transition: transform 0.5s ease;\r\n        display: block;\r\n    }\r\n\r\n    .galeri-item:hover .galeri-img {\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    \/* FOOTER QUOTE *\/\r\n    .galeri-quote {\r\n        margin-top: 40px;\r\n        font-family: 'Playfair Display', serif;\r\n        font-style: italic;\r\n        font-size: 14px;\r\n        color: #5d7a6a;\r\n        line-height: 1.6;\r\n        max-width: 500px;\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n\r\n    @media (min-width: 768px) {\r\n        .galeri-grid {\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 15px;\r\n        }\r\n        .galeri-item.wide {\r\n            grid-column: span 2;\r\n            grid-row: span 2;\r\n            aspect-ratio: auto;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"section-galeri\">\r\n    <h2 class=\"galeri-title\">Our Gallery<\/h2>\r\n    <p class=\"galeri-subtitle\">Momen Berbahagia Kami<\/p>\r\n\r\n    <div class=\"galeri-grid\">\r\n        <div class=\"galeri-item wide\">\r\n            <img decoding=\"async\" src=\"URL_FOTO_1\" class=\"galeri-img\" alt=\"Gallery 1\">\r\n        <\/div>\r\n        \r\n        <div class=\"galeri-item\">\r\n            <img decoding=\"async\" src=\"URL_FOTO_2\" class=\"galeri-img\" alt=\"Gallery 2\">\r\n        <\/div>\r\n\r\n        <div class=\"galeri-item\">\r\n            <img decoding=\"async\" src=\"URL_FOTO_3\" class=\"galeri-img\" alt=\"Gallery 3\">\r\n        <\/div>\r\n\r\n        <div class=\"galeri-item\">\r\n            <img decoding=\"async\" src=\"URL_FOTO_4\" class=\"galeri-img\" alt=\"Gallery 4\">\r\n        <\/div>\r\n\r\n        <div class=\"galeri-item\">\r\n            <img decoding=\"async\" src=\"URL_FOTO_5\" class=\"galeri-img\" alt=\"Gallery 5\">\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"galeri-quote\">\r\n        \"Love doesn't make the world go 'round. Love is what makes the ride worthwhile.\"\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-f7be518 e-con e-atomic-element e-div-block-base e-f7be518-595794b \" data-id=\"f7be518\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"f7be518\">\n    \t\t<div class=\"elementor-element elementor-element-706cd0d elementor-widget elementor-widget-html\" data-id=\"706cd0d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* SECTION RSVP & KADO *\/\r\n    .section-gift {\r\n        padding: 60px 20px;\r\n        background-color: #ffffff;\r\n        text-align: center;\r\n        font-family: 'Montserrat', sans-serif;\r\n        color: #4a4a4a;\r\n    }\r\n\r\n    .gift-title {\r\n        font-family: 'Great Vibes', cursive;\r\n        font-size: 50px;\r\n        color: #5d7a6a;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    \/* RSVP Button *\/\r\n    .btn-rsvp {\r\n        background-color: #5d7a6a;\r\n        color: white !important;\r\n        width: 100%;\r\n        max-width: 400px;\r\n        padding: 20px;\r\n        border-radius: 12px;\r\n        text-decoration: none;\r\n        display: inline-flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 10px;\r\n        margin-bottom: 60px;\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .btn-rsvp:hover { background-color: #4a6356; }\r\n\r\n    \/* Digital Gift Content *\/\r\n    .gift-desc {\r\n        font-size: 13px;\r\n        line-height: 1.8;\r\n        max-width: 500px;\r\n        margin: 0 auto 40px;\r\n    }\r\n\r\n    .bank-card {\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .bank-logo { height: 30px; margin-bottom: 10px; }\r\n    .bank-name { font-weight: bold; font-size: 16px; color: #5d7a6a; margin-bottom: 5px; }\r\n    .acc-owner { font-size: 14px; margin-bottom: 5px; }\r\n    \r\n    .acc-number {\r\n        font-size: 14px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 8px;\r\n        color: #777;\r\n    }\r\n\r\n    .copy-icon {\r\n        cursor: pointer;\r\n        color: #5d7a6a;\r\n        transition: 0.2s;\r\n    }\r\n\r\n    \/* Alamat Kado *\/\r\n    .shipping-box {\r\n        margin-top: 50px;\r\n    }\r\n\r\n    .shipping-title { font-weight: bold; margin-bottom: 15px; }\r\n    \r\n    .address-card {\r\n        border: 1px dashed #5d7a6a;\r\n        padding: 20px;\r\n        border-radius: 8px;\r\n        max-width: 400px;\r\n        margin: 0 auto;\r\n        font-size: 14px;\r\n        color: #5d7a6a;\r\n    }\r\n\r\n<\/style>\r\n\r\n<section class=\"section-gift\">\r\n    <h2 class=\"gift-title\">RSVP<\/h2>\r\n    <a href=\"https:\/\/wa.me\/NOMOR_WA_KAMU\" class=\"btn-rsvp\">\r\n        <svg width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\r\n        <span style=\"font-weight: bold;\">Konfirmasi Kehadiran<\/span>\r\n    <\/a>\r\n\r\n    <h2 class=\"gift-title\">Kado<\/h2>\r\n    <p class=\"gift-desc\">\r\n        Doa restu anda merupakan karunia yang sangat berarti bagi kedua mempelai. Namun jika memberi adalah ungkapan tanda kasih anda, anda dapat menggunakan fitur berikut\r\n    <\/p>\r\n\r\n    <div class=\"bank-card\">\r\n        <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2e\/BRI_Logo.svg\" class=\"bank-logo\" alt=\"BRI\">\r\n        <p class=\"bank-name\">Bank BRI<\/p>\r\n        <p class=\"acc-owner\">Nama Rekening: <br> <strong>Kania Almira<\/strong><\/p>\r\n        <div class=\"acc-number\">\r\n            <span id=\"norek1\">12345678<\/span>\r\n            <svg class=\"copy-icon\" onclick=\"copyText('norek1')\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path><\/svg>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"bank-card\">\r\n        <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/id\/thumb\/a\/a0\/Bank_Syariah_Indonesia_logo.svg\/1200px-Bank_Syariah_Indonesia_logo.svg.png\" class=\"bank-logo\" alt=\"BSI\">\r\n        <p class=\"bank-name\">Bank BSI<\/p>\r\n        <p class=\"acc-owner\">Nama Rekening: <br> <strong>Bagas Adikarya<\/strong><\/p>\r\n        <div class=\"acc-number\">\r\n            <span id=\"norek2\">87654321<\/span>\r\n            <svg class=\"copy-icon\" onclick=\"copyText('norek2')\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path><\/svg>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"shipping-box\">\r\n        <p class=\"shipping-title\">Kirim Kado Ke Alamat<\/p>\r\n        <p style=\"font-size: 12px; margin-bottom: 15px;\">Anda juga dapat mengirimkan melalui alamat berikut:<\/p>\r\n        <div class=\"address-card\">\r\n            Jl. Dr. Setiabudi No. 250, Bandung\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n    function copyText(id) {\r\n        const text = document.getElementById(id).innerText;\r\n        navigator.clipboard.writeText(text).then(() => {\r\n            alert(\"Nomor rekening berhasil disalin: \" + text);\r\n        });\r\n    }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-e040c38 e-con e-atomic-element e-div-block-base e-e040c38-d5f16c4 \" data-id=\"e040c38\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"e040c38\">\n    \t\t<div class=\"elementor-element elementor-element-93775fd elementor-widget elementor-widget-html\" data-id=\"93775fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* SECTION UCAPAN & DOA *\/\r\n    .section-wishes {\r\n        padding: 60px 20px;\r\n        background-color: #ffffff;\r\n        text-align: center;\r\n        font-family: 'Montserrat', sans-serif;\r\n    }\r\n\r\n    .wishes-title {\r\n        font-family: 'Great Vibes', cursive;\r\n        font-size: 50px;\r\n        color: #5d7a6a;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    \/* Form Styling *\/\r\n    .wishes-form {\r\n        max-width: 500px;\r\n        margin: 0 auto 40px;\r\n        text-align: left;\r\n    }\r\n\r\n    .input-field {\r\n        width: 100%;\r\n        padding: 15px;\r\n        margin-bottom: 15px;\r\n        border: none;\r\n        border-radius: 8px;\r\n        background-color: #f0f4f1; \/* Hijau sangat muda *\/\r\n        font-family: 'Montserrat', sans-serif;\r\n        font-size: 14px;\r\n        color: #4a4a4a;\r\n        outline: none;\r\n    }\r\n\r\n    textarea.input-field {\r\n        height: 120px;\r\n        resize: none;\r\n    }\r\n\r\n    .btn-kirim {\r\n        width: 100%;\r\n        background-color: #5d7a6a;\r\n        color: white;\r\n        border: none;\r\n        padding: 15px;\r\n        border-radius: 8px;\r\n        font-weight: bold;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .btn-kirim:hover { background-color: #4a6356; }\r\n\r\n    \/* Daftar Ucapan (Comment Box) *\/\r\n    .wishes-display {\r\n        max-width: 500px;\r\n        margin: 0 auto;\r\n        max-height: 400px;\r\n        overflow-y: auto;\r\n        text-align: left;\r\n        padding-right: 10px;\r\n    }\r\n\r\n    .wish-card {\r\n        background-color: #f0f4f1;\r\n        padding: 20px;\r\n        border-radius: 12px;\r\n        margin-bottom: 15px;\r\n        position: relative;\r\n    }\r\n\r\n    .wish-name {\r\n        font-weight: bold;\r\n        font-size: 15px;\r\n        color: #5d7a6a;\r\n        margin-bottom: 5px;\r\n        display: block;\r\n    }\r\n\r\n    .wish-time {\r\n        font-size: 10px;\r\n        color: #999;\r\n        display: block;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .wish-text {\r\n        font-size: 13px;\r\n        line-height: 1.6;\r\n        color: #4a4a4a;\r\n    }\r\n\r\n    \/* Custom Scrollbar *\/\r\n    .wishes-display::-webkit-scrollbar { width: 5px; }\r\n    .wishes-display::-webkit-scrollbar-track { background: #f1f1f1; }\r\n    .wishes-display::-webkit-scrollbar-thumb { background: #5d7a6a; border-radius: 10px; }\r\n<\/style>\r\n\r\n<section class=\"section-wishes\">\r\n    <h2 class=\"wishes-title\">Ucapan & Doa<\/h2>\r\n\r\n    <div class=\"wishes-form\">\r\n        <input type=\"text\" id=\"nama-pengirim\" class=\"input-field\" placeholder=\"Nama Anda\" readonly>\r\n        \r\n        <textarea id=\"pesan-doa\" class=\"input-field\" placeholder=\"Tulis ucapan & doa...\"><\/textarea>\r\n        \r\n        <button class=\"btn-kirim\" onclick=\"kirimUcapan()\">\r\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 1 1-7.6-11.7 8.5 8.5 0 0 1 8.5 7.9z\"><\/path><path d=\"M12 8v4l3 3\"><\/path><\/svg>\r\n            Kirim Ucapan\r\n        <\/button>\r\n    <\/div>\r\n\r\n    <div class=\"wishes-display\" id=\"container-ucapan\">\r\n        <div class=\"wish-card\">\r\n            <span class=\"wish-name\">Caca<\/span>\r\n            <span class=\"wish-time\">\ud83d\udd52 Jumat, 07 November 2025 06:08:13<\/span>\r\n            <p class=\"wish-text\">Happy wedding Kania & Bagas \u2764\ufe0f Semangat menempuh hidup baru!<\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n    \/\/ Ambil nama dari URL untuk kolom Nama\r\n    const urlCari = new URLSearchParams(window.location.search);\r\n    const namaTamu = urlCari.get('to') || \"Tamu Undangan\";\r\n    document.getElementById('nama-pengirim').value = namaTamu;\r\n\r\n    function kirimUcapan() {\r\n        const nama = document.getElementById('nama-pengirim').value;\r\n        const pesan = document.getElementById('pesan-doa').value;\r\n        const container = document.getElementById('container-ucapan');\r\n\r\n        if (pesan.trim() === \"\") {\r\n            alert(\"Silahkan tulis doa Anda terlebih dahulu.\");\r\n            return;\r\n        }\r\n\r\n        \/\/ Ambil waktu sekarang\r\n        const sekarang = new Date();\r\n        const waktuStr = sekarang.toLocaleString('id-ID', { dateStyle: 'full', timeStyle: 'short' });\r\n\r\n        \/\/ Template ucapan baru\r\n        const ucapanBaru = `\r\n            <div class=\"wish-card\">\r\n                <span class=\"wish-name\">${nama}<\/span>\r\n                <span class=\"wish-time\">\ud83d\udd52 ${waktuStr}<\/span>\r\n                <p class=\"wish-text\">${pesan}<\/p>\r\n            <\/div>\r\n        `;\r\n\r\n        \/\/ Masukkan ke paling atas daftar\r\n        container.insertAdjacentHTML('afterbegin', ucapanBaru);\r\n\r\n        \/\/ Reset kolom pesan\r\n        document.getElementById('pesan-doa').value = \"\";\r\n        alert(\"Terima kasih atas doa restunya!\");\r\n    }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-f02a5ac e-con e-atomic-element e-div-block-base e-f02a5ac-a85af93 \" data-id=\"f02a5ac\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"f02a5ac\">\n    \t\t<div class=\"elementor-element elementor-element-fa28c21 elementor-widget elementor-widget-html\" data-id=\"fa28c21\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* SECTION FOOTER & TERIMA KASIH *\/\r\n    .section-footer {\r\n        position: relative;\r\n        padding: 80px 20px 40px;\r\n        background-color: #ffffff;\r\n        text-align: center;\r\n        font-family: 'Montserrat', sans-serif;\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* Ornamen Bunga Atas (Sesuai Gambar) *\/\r\n    .flower-footer {\r\n        width: 100%;\r\n        max-width: 500px;\r\n        margin-bottom: 30px;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .thanks-text {\r\n        font-size: 14px;\r\n        line-height: 1.8;\r\n        color: #4a4a4a;\r\n        max-width: 600px;\r\n        margin: 0 auto 40px;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .closing-names {\r\n        font-family: 'Great Vibes', cursive;\r\n        font-size: 32px;\r\n        color: #2d4a3e;\r\n        margin-bottom: 60px;\r\n    }\r\n\r\n    \/* KREDIT \/ WATERMARK *\/\r\n    .watermark-area {\r\n        border-top: 1px solid #eeeeee;\r\n        padding-top: 30px;\r\n        font-size: 12px;\r\n        color: #888;\r\n        line-height: 2;\r\n    }\r\n\r\n    .brand-name {\r\n        font-weight: bold;\r\n        color: #5d7a6a;\r\n        display: block;\r\n        font-size: 14px;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    .made-with {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 5px;\r\n    }\r\n\r\n    .heart-icon { color: #e74c3c; animation: beat 1s infinite alternate; }\r\n    @keyframes beat { to { transform: scale(1.2); } }\r\n\r\n    \/* Background Watercolor Soft di Bawah *\/\r\n    .bg-footer-watercolor {\r\n        position: absolute;\r\n        bottom: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        opacity: 0.5;\r\n        z-index: 1;\r\n        pointer-events: none;\r\n    }\r\n<\/style>\r\n\r\n<section class=\"section-footer\">\r\n    <img decoding=\"async\" src=\"URL_BUNGA_BESAR_ATAS\" class=\"flower-footer\" alt=\"Flower Ornament\">\r\n\r\n    <div class=\"thanks-text\">\r\n        Atas kehadiran saudara\/(i) & Do'a restunya, <br>\r\n        kami ucapkan terimakasih\r\n    <\/div>\r\n\r\n    <div class=\"thanks-info\">\r\n        <p style=\"font-size: 13px; margin-bottom: 10px;\">Hormat Kami<\/p>\r\n        <h2 class=\"closing-names\">Kania & Bagas<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"watermark-area\">\r\n        <span class=\"brand-name\">Kania & Bagas E-Invitation<\/span>\r\n        <div class=\"made-with\">\r\n            Made with <span class=\"heart-icon\">\u2764\ufe0f<\/span> somewhere in the world\r\n        <\/div>\r\n        <div>Powered by <strong>InvitaStory<\/strong><\/div>\r\n    <\/div>\r\n\r\n    <img decoding=\"async\" src=\"URL_SAGE_WATERCOLOR_BOTTOM\" class=\"bg-footer-watercolor\">\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-cfbf115 e-con e-atomic-element e-div-block-base e-cfbf115-5466ced \" data-id=\"cfbf115\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"cfbf115\">\n    \t\t<div class=\"elementor-element elementor-element-ba2228f elementor-widget elementor-widget-html\" data-id=\"ba2228f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* 1. NAVBAR CONTAINER *\/\r\n    #sticky-navbar {\r\n        position: fixed;\r\n        bottom: -100px; \/* Sembunyi di awal *\/\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        width: 90%;\r\n        max-width: 400px;\r\n        background: rgba(255, 255, 255, 0.9);\r\n        backdrop-filter: blur(10px);\r\n        display: flex;\r\n        justify-content: space-around;\r\n        align-items: center;\r\n        padding: 10px 5px;\r\n        border-radius: 20px 20px 20px 20px;\r\n        box-shadow: 0 -5px 20px rgba(0,0,0,0.1);\r\n        z-index: 9999;\r\n        transition: bottom 0.5s ease-in-out;\r\n    }\r\n\r\n    \/* Munculkan navbar *\/\r\n    #sticky-navbar.show-nav {\r\n        bottom: 20px;\r\n    }\r\n\r\n    \/* 2. STYLE ICON *\/\r\n    .nav-item {\r\n        color: #5d7a6a;\r\n        text-decoration: none;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        transition: 0.3s;\r\n        padding: 8px;\r\n        border-radius: 12px;\r\n    }\r\n\r\n    .nav-item svg {\r\n        width: 22px;\r\n        height: 22px;\r\n        stroke-width: 1.5;\r\n    }\r\n\r\n    \/* Efek Aktif (Warna Hijau Sage Gelap) *\/\r\n    .nav-item.active {\r\n        background-color: #5d7a6a;\r\n        color: white;\r\n    }\r\n\r\n    .nav-item:hover {\r\n        transform: translateY(-3px);\r\n    }\r\n<\/style>\r\n\r\n<nav id=\"sticky-navbar\">\r\n    <a href=\"#section-acara\" class=\"nav-item active\" onclick=\"setActive(this)\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"><\/path><polyline points=\"9 22 9 12 15 12 15 22\"><\/polyline><\/svg>\r\n    <\/a>\r\n    \r\n    <a href=\"#section-story\" class=\"nav-item\" onclick=\"setActive(this)\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"><\/path><\/svg>\r\n    <\/a>\r\n\r\n    <a href=\"#section-galeri\" class=\"nav-item\" onclick=\"setActive(this)\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"><\/circle><polyline points=\"21 15 16 10 5 21\"><\/polyline><\/svg>\r\n    <\/a>\r\n\r\n    <a href=\"#section-kado\" class=\"nav-item\" onclick=\"setActive(this)\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 12 20 22 4 22 4 12\"><\/polyline><rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"><\/rect><line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"><\/line><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"><\/path><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"><\/path><\/svg>\r\n    <\/a>\r\n\r\n    <a href=\"#section-ucapan\" class=\"nav-item\" onclick=\"setActive(this)\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"><\/path><\/svg>\r\n    <\/a>\r\n<\/nav>\r\n\r\n<script>\r\n    \/\/ 1. Integrasi dengan fungsi Buka Undangan (Update fungsi startInvitation kamu sebelumnya)\r\n    \/\/ Pastikan fungsi startInvitation di kode Cover kamu ditambahkan baris ini:\r\n    function startInvitation() {\r\n        \/\/ ... (kode scroll & animasi cover yang tadi) ...\r\n        \r\n        \/\/ Munculkan Navbar\r\n        document.getElementById('sticky-navbar').classList.add('show-nav');\r\n    }\r\n\r\n    \/\/ 2. Fungsi Klik Aktif\r\n    function setActive(el) {\r\n        const items = document.querySelectorAll('.nav-item');\r\n        items.forEach(item => item.classList.remove('active'));\r\n        el.classList.add('active');\r\n    }\r\n\r\n    \/\/ 3. (Opsional) Musik Otomatis saat Buka Undangan\r\n    \/\/ Jika kamu punya file musik, panggil audio.play() di dalam startInvitation()\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33fd554 elementor-widget elementor-widget-html\" data-id=\"33fd554\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<audio id=\"myAudio\" loop>\r\n    <source src=\"URL_LINK_MUSIK_KAMU.mp3\" type=\"audio\/mpeg\">\r\n    Browser kamu tidak mendukung elemen audio.\r\n<\/audio>\r\n\r\n<div id=\"music-control\" onclick=\"toggleMusic()\">\r\n    <span id=\"music-icon\">\ud83c\udfb5<\/span>\r\n<\/div>\r\n\r\n<style>\r\n    #music-control {\r\n        position: fixed;\r\n        top: 20px;\r\n        right: 20px;\r\n        width: 40px;\r\n        height: 40px;\r\n        background: rgba(93, 122, 106, 0.8);\r\n        color: white;\r\n        border-radius: 50%;\r\n        display: none; \/* Sembunyi dulu, muncul setelah undangan dibuka *\/\r\n        justify-content: center;\r\n        align-items: center;\r\n        cursor: pointer;\r\n        z-index: 10000;\r\n        animation: spin 3s linear infinite;\r\n    }\r\n\r\n    @keyframes spin {\r\n        from { transform: rotate(0deg); }\r\n        to { transform: rotate(360deg); }\r\n    }\r\n\r\n    .music-paused {\r\n        animation-play-state: paused !important;\r\n    }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Undangan Pernikahan Kania &#038; Bagas Sabtu 28 Maret 2026 Kepada: Tamu Undangan \ud83d\udce9 Buka Undangan \ud83c\udfe0 \u2764\ufe0f \ud83d\uddbc\ufe0f \ud83c\udf81 \ud83c\udfb5 Undangan Pernikahan Kania &#038; Bagas Sabtu 28 \u2022 03 \u2022 2026 00 Hari 00 Jam 00 Menit 00 Detik Kepada: Caca Maha suci Allah yang telah menciptakan mahluk-Nya berpasang-pasangan. Ya Allah, izinkanlah kami merangkai kasih [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-193","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/invitastory.shop\/index.php\/wp-json\/wp\/v2\/pages\/193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/invitastory.shop\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/invitastory.shop\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/invitastory.shop\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/invitastory.shop\/index.php\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":65,"href":"https:\/\/invitastory.shop\/index.php\/wp-json\/wp\/v2\/pages\/193\/revisions"}],"predecessor-version":[{"id":264,"href":"https:\/\/invitastory.shop\/index.php\/wp-json\/wp\/v2\/pages\/193\/revisions\/264"}],"wp:attachment":[{"href":"https:\/\/invitastory.shop\/index.php\/wp-json\/wp\/v2\/media?parent=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}