{"id":1,"date":"2026-07-07T02:25:56","date_gmt":"2026-07-07T02:25:56","guid":{"rendered":"http:\/\/coba.invilove.my.id\/?p=1"},"modified":"2026-07-07T08:52:37","modified_gmt":"2026-07-07T08:52:37","slug":"hello-world","status":"publish","type":"post","link":"https:\/\/coba.invilove.my.id\/hello-world\/","title":{"rendered":"Hello world!"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1\" class=\"elementor elementor-1\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b5a17a e-flex e-con-boxed e-con e-parent\" data-id=\"8b5a17a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fb3a9ba elementor-widget elementor-widget-shortcode\" data-id=\"fb3a9ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/cdn.datatables.net\/1.13.1\/css\/jquery.dataTables.min.css\"\/>\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/cdn.datatables.net\/buttons\/2.4.0\/css\/buttons.dataTables.min.css\"\/>\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/cdn.datatables.net\/responsive\/2.5.0\/css\/responsive.dataTables.min.css\"\/>\n    \n    <style>\n        #invilove-rekap-table-wrapper {\n            background: transparent;\n            padding: 10px 0;\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            color: #1e293b;\n        }\n        .invilove-rekap-title {\n            text-align: center;\n            font-weight: 600;\n            font-size: 1.4rem;\n            letter-spacing: -0.5px;\n            margin-bottom: 25px;\n        }\n        .invilove-rekap-title a { color: #0f172a; text-decoration: none; transition: opacity 0.2s; }\n        .invilove-rekap-title a:hover { opacity: 0.7; }\n        \n        \/* GRID CARD DEKSTOP *\/\n        .invilove-card-count {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n            gap: 15px;\n            margin-bottom: 35px;\n        }\n        .invilove-count-box {\n            background: rgba(255, 255, 255, 0.6);\n            backdrop-filter: blur(10px);\n            -webkit-backdrop-filter: blur(10px);\n            border: 1px solid #e2e8f0;\n            border-radius: 12px;\n            padding: 16px 12px;\n            text-align: center;\n            box-shadow: 0 1px 3px rgba(0,0,0,0.02);\n        }\n        .invilove-count-box span.count-num { font-size: 1.6rem; font-weight: 700; color: #0f172a; display: block; line-height: 1.2; }\n        .invilove-count-box span.count-lbl { font-size: 0.75rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-top: 4px; }\n        \n        .hide-ragu-box { display: none !important; }\n\n        \/* RE-RESTRUKTURISASI CONTAINER DATATABLES *\/\n        .dataTables_wrapper { display: flex; flex-direction: column; gap: 15px; }\n        \n        \/* Baris Kontrol Atas (Flexbox Penyeimbang) *\/\n        @media screen and (min-width: 768px) {\n            .invilove-controls-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 15px; }\n            .invilove-controls-top-right { display: flex; align-items: center; margin-left: auto; }\n        }\n\n        \/* STYLING KONTROL: BUTTONS DOWNLOAD *\/\n        button.dt-button {\n            background: #0f172a !important; color: #ffffff !important; border: 1px solid #0f172a !important;\n            border-radius: 6px !important; padding: 8px 18px !important; font-size: 0.8rem !important; font-weight: 500 !important;\n            box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; margin: 0 !important; transition: all 0.2s ease;\n        }\n        button.dt-button:hover { background: #334155 !important; border-color: #334155 !important; transform: translateY(-1px); }\n        \n        \/* FIX STYLING TEKS: SHOW ENTRIES TEXT & DROPDOWN *\/\n        .dataTables_wrapper .dataTables_length { \n            font-size: 0.85rem !important; \n            font-weight: 600 !important; \n            color: #475569 !important; \n            display: inline-flex !important; \n            align-items: center !important;\n            font-family: inherit !important;\n        }\n        .dataTables_wrapper .dataTables_length select { \n            padding: 8px 36px 8px 14px !important; \n            border: 1px solid #cbd5e1 !important; \n            background: #ffffff !important; \n            border-radius: 6px !important; \n            font-size: 0.85rem !important; \n            font-weight: 600 !important;\n            color: #0f172a !important;\n            outline: none !important; \n            margin: 0 8px !important; \n            cursor: pointer !important; \n            transition: all 0.2s ease-in-out !important;\n            box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important; \n            font-family: inherit !important;\n            appearance: none !important; \n            -webkit-appearance: none !important;\n            background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'><\/polyline><\/svg>\") !important;\n            background-repeat: no-repeat !important; \n            background-position: right 12px center !important; \n            background-size: 14px !important;\n        }\n        .dataTables_wrapper .dataTables_length select:focus { border-color: #0f172a !important; box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important; }\n\n        \/* DESAIN WARNA TABEL PREMIUM *\/\n        table.dataTable.cell-border { border: 1px solid #cbd5e1 !important; border-collapse: collapse !important; margin-top: 15px !important; margin-bottom: 15px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.01); }\n        \n        \/* Header Solid Gelap Kontras Tinggi *\/\n        table.dataTable thead th { \n            background-color: #0f172a !important; color: #ffffff !important; font-weight: 600; \n            border: 1px solid #334155 !important; border-bottom: 3px solid #1e293b !important;\n            text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; padding: 14px 12px !important;\n        }\n        \n        \/* Baris Belang Abu Cerah Bersih *\/\n        table.dataTable th, table.dataTable td { border: 1px solid #cbd5e1 !important; padding: 14px 15px !important; font-size: 0.88rem; }\n        table.dataTable tbody tr.odd { background-color: #ffffff !important; }\n        table.dataTable tbody tr.even { background-color: #f4f6f8 !important; }  \n        table.dataTable tbody tr:hover { background-color: #eaede2 !important; } \n        table.dataTable tbody td:last-child { text-align: left !important; color: #1e293b; line-height: 1.5; font-weight: 500; }\n\n        \/* Baris Kontrol Bawah (Pagination) *\/\n        .dataTables_wrapper .dataTables_info { font-size: 0.85rem; color: #64748b; padding-top: 10px; font-weight: 500; }\n        .dataTables_wrapper .dataTables_paginate { padding-top: 8px; display: inline-flex; gap: 4px; }\n        .dataTables_wrapper .dataTables_paginate .paginate_button {\n            border: 1px solid #cbd5e1 !important; background: #ffffff !important; color: #334155 !important;\n            border-radius: 6px !important; padding: 6px 14px !important; font-size: 0.8rem !important; transition: all 0.2s;\n            font-weight: 500; cursor: pointer;\n        }\n        .dataTables_wrapper .dataTables_paginate .paginate_button.current, \n        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\n            background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; font-weight: 600;\n        }\n        .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {\n            background: #f1f5f9 !important; color: #0f172a !important; border-color: #94a3b8 !important;\n        }\n\n        \/* LAYOUT MOBILE RESPONSIVE CARD COUNTER *\/\n        @media screen and (max-width: 576px) {\n            .invilove-card-count.no-ragu-active { grid-template-columns: repeat(2, 1fr); }\n            .invilove-card-count.no-ragu-active .invilove-count-box:nth-child(1) { grid-column: span 2; }\n            .invilove-card-count.has-ragu-active { grid-template-columns: repeat(2, 1fr); }\n            \n            \/* Kontrol Atas Mobile *\/\n            .invilove-controls-top { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }\n            .invilove-controls-top-right { width: 100%; display: flex; justify-content: center; margin: 0; }\n            \n            \/* Kontrol Bawah Mobile *\/\n            .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { text-align: center !important; margin: 0 auto; display: block; }\n            .dataTables_wrapper .dataTables_paginate { display: flex; justify-content: center; margin-top: 10px; }\n        }\n    <\/style>\n\n    <div id=\"invilove-rekap-table-wrapper\">\n        <div class=\"invilove-rekap-title\">\n            <a href=\"https:\/\/coba.invilove.my.id\/hello-world\/\">Hello world!<\/a>\n        <\/div>\n\n        <div class=\"invilove-card-count no-ragu-active\">\n            <div class=\"invilove-count-box\">\n                <span class=\"count-num\">0<\/span>\n                <span class=\"count-lbl\">Ucapan<\/span>\n            <\/div>\n            <div class=\"invilove-count-box\">\n                <span class=\"count-num\">0<\/span>\n                <span class=\"count-lbl\">Hadir<\/span>\n            <\/div>\n            <div class=\"invilove-count-box\">\n                <span class=\"count-num\">0<\/span>\n                <span class=\"count-lbl\">Tidak Hadir<\/span>\n            <\/div>\n            <div class=\"invilove-count-box hide-ragu-box\">\n                <span class=\"count-num\">0<\/span>\n                <span class=\"count-lbl\">Masih Ragu<\/span>\n            <\/div>\n        <\/div>\n\n        <!-- Container Struktur DOM Pembersih Elemen DataTables -->\n        <div class=\"invilove-controls-top\" id=\"inviloveControlsTopRow\"><\/div>\n\n        <table id=\"inviloveListUcapan\" class=\"display dataTable cell-border\" style=\"width:100%\">\n            <thead>\n                <tr>\n                    <th>Nama Tamu<\/th>\n                    <th>Kehadiran<\/th>\n                    <th>Jumlah Hadir<\/th>\n                    <th>Ucapan<\/th> <!-- Perubahan teks th: \"Ucapan\" -->\n                <\/tr>\n            <\/thead>\n            <tbody>\n                <!-- Suntikan JSON -->\n            <\/tbody>\n        <\/table>\n    <\/div>\n\n    <script type=\"text\/javascript\">\n        jQuery(document).ready(function($){\n            var table = $('#inviloveListUcapan').DataTable({\n                paging: true,\n                fixedHeader: true,\n                iDisplayLength: 25,\n                order: [],\n                searching: false, \n                \/\/ Logika Bahasa: Melokalkan pesan error data kosong bawaan DataTables\n                language: {\n                    emptyTable: \"Belum ada ucapan.\"\n                },\n                data: [],\n                columnDefs: [\n                    { targets: [0, 1, 2, 3], className: \"dt-head-center\" },\n                    { targets: [1, 2], className: 'dt-body-center' }\n                ],\n                columns: [\n                    { data: 'author_name', width: \"20%\" },\n                    { data: 'kehadiran', width: \"15%\" },\n                    { data: 'jumlah_orang', width: \"15%\" },\n                    { data: 'content', width: \"50%\" },\n                ],\n                responsive: true,\n                dom: 'Blfrtip',\n                buttons: [\n                    {\n                        extend: 'pdf',\n                        pageSize: 'A4',\n                        orientation: 'landscape',\n                        filename: 'Data_RSVP_hello-world',\n                        title: 'Data RSVP: Hello world!',\n                        customize : function(doc) {\n                            doc.content[1].table.widths = [ '20%', '15%', '15%', '50%'];\n                        }\n                    },\n                    'csv', 'excel', 'copy'\n                ],\n                initComplete: function() {\n                    var $topRow = $('#inviloveControlsTopRow');\n                    var $buttons = $('.dt-buttons').detach();\n                    var $length = $('.dataTables_length').detach();\n                    \n                    $topRow.append($buttons);\n                    \n                    var $rightControls = $('<div class=\"invilove-controls-top-right\"><\/div>');\n                    $rightControls.append($length);\n                    $topRow.append($rightControls);\n                }\n            });\n        });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_canvas","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/coba.invilove.my.id\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coba.invilove.my.id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coba.invilove.my.id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coba.invilove.my.id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coba.invilove.my.id\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":9,"href":"https:\/\/coba.invilove.my.id\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/coba.invilove.my.id\/wp-json\/wp\/v2\/posts\/1\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/coba.invilove.my.id\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coba.invilove.my.id\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coba.invilove.my.id\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}