{"id":7291,"date":"2025-09-18T10:58:31","date_gmt":"2025-09-18T03:58:31","guid":{"rendered":"https:\/\/labamu.co.id\/articles\/"},"modified":"2025-12-22T14:28:06","modified_gmt":"2025-12-22T07:28:06","slug":"articles","status":"publish","type":"page","link":"https:\/\/labamu.co.id\/en\/articles\/","title":{"rendered":"Articles"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7291\" class=\"elementor elementor-7291 elementor-524\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b0ede63 e-flex e-con-boxed e-con e-parent\" data-id=\"b0ede63\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_bottom&quot;:&quot;wave-brush&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 283.5 27.8\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M283.5,9.7c0,0-7.3,4.3-14,4.6c-6.8,0.3-12.6,0-20.9-1.5c-11.3-2-33.1-10.1-44.7-5.7\ts-12.1,4.6-18,7.4c-6.6,3.2-20,9.6-36.6,9.3C131.6,23.5,99.5,7.2,86.3,8c-1.4,0.1-6.6,0.8-10.5,2c-3.8,1.2-9.4,3.8-17,4.7\tc-3.2,0.4-8.3,1.1-14.2,0.9c-1.5-0.1-6.3-0.4-12-1.6c-5.7-1.2-11-3.1-15.8-3.7C6.5,9.2,0,10.8,0,10.8V0h283.5V9.7z M260.8,11.3\tc-0.7-1-2-0.4-4.3-0.4c-2.3,0-6.1-1.2-5.8-1.1c0.3,0.1,3.1,1.5,6,1.9C259.7,12.2,261.4,12.3,260.8,11.3z M242.4,8.6\tc0,0-2.4-0.2-5.6-0.9c-3.2-0.8-10.3-2.8-15.1-3.5c-8.2-1.1-15.8,0-15.1,0.1c0.8,0.1,9.6-0.6,17.6,1.1c3.3,0.7,9.3,2.2,12.4,2.7\tC239.9,8.7,242.4,8.6,242.4,8.6z M185.2,8.5c1.7-0.7-13.3,4.7-18.5,6.1c-2.1,0.6-6.2,1.6-10,2c-3.9,0.4-8.9,0.4-8.8,0.5\tc0,0.2,5.8,0.8,11.2,0c5.4-0.8,5.2-1.1,7.6-1.6C170.5,14.7,183.5,9.2,185.2,8.5z M199.1,6.9c0.2,0-0.8-0.4-4.8,1.1\tc-4,1.5-6.7,3.5-6.9,3.7c-0.2,0.1,3.5-1.8,6.6-3C197,7.5,199,6.9,199.1,6.9z M283,6c-0.1,0.1-1.9,1.1-4.8,2.5s-6.9,2.8-6.7,2.7\tc0.2,0,3.5-0.6,7.4-2.5C282.8,6.8,283.1,5.9,283,6z M31.3,11.6c0.1-0.2-1.9-0.2-4.5-1.2s-5.4-1.6-7.8-2C15,7.6,7.3,8.5,7.7,8.6\tC8,8.7,15.9,8.3,20.2,9.3c2.2,0.5,2.4,0.5,5.7,1.6S31.2,11.9,31.3,11.6z M73,9.2c0.4-0.1,3.5-1.6,8.4-2.6c4.9-1.1,8.9-0.5,8.9-0.8\tc0-0.3-1-0.9-6.2-0.3S72.6,9.3,73,9.2z M71.6,6.7C71.8,6.8,75,5.4,77.3,5c2.3-0.3,1.9-0.5,1.9-0.6c0-0.1-1.1-0.2-2.7,0.2\tC74.8,5.1,71.4,6.6,71.6,6.7z M93.6,4.4c0.1,0.2,3.5,0.8,5.6,1.8c2.1,1,1.8,0.6,1.9,0.5c0.1-0.1-0.8-0.8-2.4-1.3\tC97.1,4.8,93.5,4.2,93.6,4.4z M65.4,11.1c-0.1,0.3,0.3,0.5,1.9-0.2s2.6-1.3,2.2-1.2s-0.9,0.4-2.5,0.8C65.3,10.9,65.5,10.8,65.4,11.1\tz M34.5,12.4c-0.2,0,2.1,0.8,3.3,0.9c1.2,0.1,2,0.1,2-0.2c0-0.3-0.1-0.5-1.6-0.4C36.6,12.8,34.7,12.4,34.5,12.4z M152.2,21.1\tc-0.1,0.1-2.4-0.3-7.5-0.3c-5,0-13.6-2.4-17.2-3.5c-3.6-1.1,10,3.9,16.5,4.1C150.5,21.6,152.3,21,152.2,21.1z\"\/>\n\t<path class=\"elementor-shape-fill\" d=\"M269.6,18c-0.1-0.1-4.6,0.3-7.2,0c-7.3-0.7-17-3.2-16.6-2.9c0.4,0.3,13.7,3.1,17,3.3\tC267.7,18.8,269.7,18,269.6,18z\"\/>\n\t<path class=\"elementor-shape-fill\" d=\"M227.4,9.8c-0.2-0.1-4.5-1-9.5-1.2c-5-0.2-12.7,0.6-12.3,0.5c0.3-0.1,5.9-1.8,13.3-1.2\tS227.6,9.9,227.4,9.8z\"\/>\n\t<path class=\"elementor-shape-fill\" d=\"M204.5,13.4c-0.1-0.1,2-1,3.2-1.1c1.2-0.1,2,0,2,0.3c0,0.3-0.1,0.5-1.6,0.4\tC206.4,12.9,204.6,13.5,204.5,13.4z\"\/>\n\t<path class=\"elementor-shape-fill\" d=\"M201,10.6c0-0.1-4.4,1.2-6.3,2.2c-1.9,0.9-6.2,3.1-6.1,3.1c0.1,0.1,4.2-1.6,6.3-2.6\tS201,10.7,201,10.6z\"\/>\n\t<path class=\"elementor-shape-fill\" d=\"M154.5,26.7c-0.1-0.1-4.6,0.3-7.2,0c-7.3-0.7-17-3.2-16.6-2.9c0.4,0.3,13.7,3.1,17,3.3\tC152.6,27.5,154.6,26.8,154.5,26.7z\"\/>\n\t<path class=\"elementor-shape-fill\" d=\"M41.9,19.3c0,0,1.2-0.3,2.9-0.1c1.7,0.2,5.8,0.9,8.2,0.7c4.2-0.4,7.4-2.7,7-2.6\tc-0.4,0-4.3,2.2-8.6,1.9c-1.8-0.1-5.1-0.5-6.7-0.4S41.9,19.3,41.9,19.3z\"\/>\n\t<path class=\"elementor-shape-fill\" d=\"M75.5,12.6c0.2,0.1,2-0.8,4.3-1.1c2.3-0.2,2.1-0.3,2.1-0.5c0-0.1-1.8-0.4-3.4,0\tC76.9,11.5,75.3,12.5,75.5,12.6z\"\/>\n\t<path class=\"elementor-shape-fill\" d=\"M15.6,13.2c0-0.1,4.3,0,6.7,0.5c2.4,0.5,5,1.9,5,2c0,0.1-2.7-0.8-5.1-1.4\tC19.9,13.7,15.7,13.3,15.6,13.2z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8739fbb elementor-widget elementor-widget-shortcode\" data-id=\"8739fbb\" 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\">        <style>\n            .mySwiper {\n                width: 100vw !important;\n                margin-left: calc(-50vw + 50%) !important;\n                margin-right: calc(-50vw + 50%) !important;\n                position: relative !important;\n                left: 0% !important;\n                right: 50% !important;\n            }\n\n            .mySwiper h2 {\n                font-size: 40px;\n                font-weight: 600;\n            }\n\n            .mySwiper p {\n                font-size: 16px;\n                font-weight: 400;\n            }\n\n            @media (max-width: 768px) {\n                .mySwiper h2 {\n                    font-size: 20px !important;\n                }\n                .mySwiper p {\n                    font-size: 12px !important;\n                }\n            }\n        <\/style>\n        <div class=\"swiper mySwiper\">\n            <div class=\"swiper-wrapper\">\n                                    <div class=\"swiper-slide\" style=\"background-image:url('https:\/\/labamu.co.id\/wp-content\/uploads\/2026\/04\/akuntansi-petty-cash-sederhana-dengan-aplikasi-labamu-pos-1024x765.webp'); background-size:cover; background-position:center; height:80vh; position:relative; overflow:hidden; width:100%;\">\n                        <div style=\"background:rgba(0,0,0,0.5); position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; color:#fff; padding:50px;\">\n                            <h2>The Secret to Managing Petty Cash is the Newest MSME Business Operational Efficiency Solution<\/h2>\n                            <p><\/p>\n                            <a href=\"https:\/\/labamu.co.id\/en\/article\/the-secret-to-managing-petty-cash-is-the-newest-msme-business-operational-efficiency-solution\/\" class=\"btn-baca\" style=\"border:1px solid #fff; color:#fff; padding:10px 20px; border-radius:6px; text-decoration:none; margin-top:10px; transition:all 0.3s ease;\">Baca Selengkapnya<\/a>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"swiper-slide\" style=\"background-image:url('https:\/\/labamu.co.id\/wp-content\/uploads\/2026\/03\/Manajemen-Risiko-Finansial-Cover-1024x723.jpg'); background-size:cover; background-position:center; height:80vh; position:relative; overflow:hidden; width:100%;\">\n                        <div style=\"background:rgba(0,0,0,0.5); position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; color:#fff; padding:50px;\">\n                            <h2>Risk Management in the Digital Economy Era: Smart Strategies to Face All Challenges<\/h2>\n                            <p><\/p>\n                            <a href=\"https:\/\/labamu.co.id\/en\/article\/risk-management-in-the-digital-economy-era-smart-strategies-to-face-all-challenges\/\" class=\"btn-baca\" style=\"border:1px solid #fff; color:#fff; padding:10px 20px; border-radius:6px; text-decoration:none; margin-top:10px; transition:all 0.3s ease;\">Baca Selengkapnya<\/a>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"swiper-slide\" style=\"background-image:url('https:\/\/labamu.co.id\/wp-content\/uploads\/2026\/03\/Media-Sosial-Tanpa-Followers-Cover-1024x723.jpg'); background-size:cover; background-position:center; height:80vh; position:relative; overflow:hidden; width:100%;\">\n                        <div style=\"background:rgba(0,0,0,0.5); position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; color:#fff; padding:50px;\">\n                            <h2>Social Media for Business: The Secret Weapon to Increase Sales Multifold<\/h2>\n                            <p><\/p>\n                            <a href=\"https:\/\/labamu.co.id\/en\/article\/social-media-for-business-the-secret-weapon-to-increase-sales-multifold\/\" class=\"btn-baca\" style=\"border:1px solid #fff; color:#fff; padding:10px 20px; border-radius:6px; text-decoration:none; margin-top:10px; transition:all 0.3s ease;\">Baca Selengkapnya<\/a>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"swiper-slide\" style=\"background-image:url('https:\/\/labamu.co.id\/wp-content\/uploads\/2026\/03\/Customer-Retention-Cover-1024x723.jpg'); background-size:cover; background-position:center; height:80vh; position:relative; overflow:hidden; width:100%;\">\n                        <div style=\"background:rgba(0,0,0,0.5); position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; color:#fff; padding:50px;\">\n                            <h2>Customer Retention vs. Customer Acquisition: Should You Focus on New Customers or Keep the Existing Ones?<\/h2>\n                            <p><\/p>\n                            <a href=\"https:\/\/labamu.co.id\/en\/article\/customer-retention-vs-customer-acquisition-should-you-focus-on-new-customers-or-keep-the-existing-ones\/\" class=\"btn-baca\" style=\"border:1px solid #fff; color:#fff; padding:10px 20px; border-radius:6px; text-decoration:none; margin-top:10px; transition:all 0.3s ease;\">Baca Selengkapnya<\/a>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"swiper-slide\" style=\"background-image:url('https:\/\/labamu.co.id\/wp-content\/uploads\/2026\/03\/Up-Selling-Artinya-Cover-1024x723.jpg'); background-size:cover; background-position:center; height:80vh; position:relative; overflow:hidden; width:100%;\">\n                        <div style=\"background:rgba(0,0,0,0.5); position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; color:#fff; padding:50px;\">\n                            <h2>What Is Upselling? A Proven Strategy to Increase Your Business Transaction Value<\/h2>\n                            <p><\/p>\n                            <a href=\"https:\/\/labamu.co.id\/en\/article\/what-is-upselling-a-proven-strategy-to-increase-your-business-transaction-value\/\" class=\"btn-baca\" style=\"border:1px solid #fff; color:#fff; padding:10px 20px; border-radius:6px; text-decoration:none; margin-top:10px; transition:all 0.3s ease;\">Baca Selengkapnya<\/a>\n                        <\/div>\n                    <\/div>\n                            <\/div>\n            <div class=\"swiper-pagination\"><\/div>\n        <\/div>\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<div class=\"elementor-element elementor-element-3efac51 e-flex e-con-boxed elementor-invisible e-con e-parent\" data-id=\"3efac51\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInLeft&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a07de1f elementor-widget elementor-widget-html\" data-id=\"a07de1f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n    \/* Wrapper *\/\n    \n    .post-grid-wrapper {\n        max-width: 1200px;\n        margin: 0 auto;\n        font-family: sans-serif;\n    }\n    \/* Dropdown + search *\/\n    \n    .post-filter {\n        margin-bottom: 20px;\n        display: flex;\n        justify-content: space-between;\n        \/* kiri - kanan *\/\n        align-items: center;\n        flex-wrap: wrap;\n        \/* biar turun ke bawah di layar kecil *\/\n        gap: 20px;\n    }\n    \/* Kiri *\/\n    \n    .filter-left {\n        display: flex;\n        align-items: center;\n        gap: 15px;\n    }\n    \/* Kanan *\/\n    \n    .filter-right {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n    }\n    \n    .post-filter label {\n        font-size: 0.95rem;\n        margin: 0;\n        color: #333;\n        white-space: nowrap;\n    }\n    \/* Dropdown *\/\n    \n    .post-filter select {\n        padding: 8px 12px;\n        border-radius: 6px;\n        border: 1px solid #ccc;\n        font-size: 0.95rem;\n        background: #fff;\n    }\n    \n    .search-wrapper {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    width: 100%;\n    max-width: 280px; \/* control size *\/\n  }\n  \n  .search-wrapper input {\n    width: 100%;\n    padding: 10px 38px 10px 14px; \/* extra space for icon *\/\n    border-radius: 8px;\n    border: 1px solid #dcdcdc;\n    font-size: 0.95rem;\n    background: #fff;\n    color: #333;\n    transition: all 0.25s ease;\n    box-shadow: 0 1px 2px rgba(0,0,0,0.05);\n  }\n  \n  .search-wrapper input::placeholder {\n    color: #999;\n    font-size: 0.9rem;\n  }\n  \n  .search-wrapper input:hover {\n    border-color: #aaa;\n    background: #fafafa;\n  }\n  \n  .search-wrapper input:focus {\n    border-color: #006bff;\n    background: #fff;\n    box-shadow: 0 0 0 3px rgba(0,107,255,0.2);\n    outline: none;\n  }\n  \n  .search-wrapper .search-icon {\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #777;\n    font-size: 1rem;\n    pointer-events: none; \/* so clicks still focus input *\/\n  }\n    \/* Grid layout *\/\n    \n    .post-grid {\n        --gap: 20px;\n        display: grid;\n        gap: var(--gap);\n        grid-template-columns: repeat(1, 1fr);\n    }\n    \n    @media (min-width: 600px) {\n        .post-grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n    }\n    \n    @media (min-width: 960px) {\n        .post-grid {\n            grid-template-columns: repeat(3, 1fr);\n        }\n    }\n    \/* Card style *\/\n    \n    .post-card {\n        background: #fff;\n        border-radius: 12px;\n        overflow: hidden;\n        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);\n        display: flex;\n        flex-direction: column;\n        transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n    \n    .post-card:hover {\n        transform: translateY(-4px);\n        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);\n    }\n    \n    .post-card img {\n        width: 100%;\n        aspect-ratio: 16\/9;\n        object-fit: cover;\n        display: block;\n    }\n    \n    .post-card .card-body {\n        padding: 18px;\n        text-align: center;\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n    }\n    \n    .post-card h3 {\n        margin: 0;\n        font-size: 1.2rem;\n        font-weight: 600;\n        color: #111;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        \/* maksimal 2 baris *\/\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n    \n    .post-card .excerpt {\n        font-size: 0.95rem;\n        color: #444;\n        flex-grow: 1;\n    }\n    \n    .post-card .readmore a {\n        display: inline-block;\n        padding: 10px 20px;\n        border: 1px solid #ccc;\n        border-radius: 6px;\n        text-decoration: none;\n        color: #111;\n        background: #fff;\n        font-size: 0.9rem;\n        transition: background 0.2s, color 0.2s;\n    }\n    \n    .post-card .readmore a:first-child {\n        background: #fff;\n        color: #111;\n    }\n    \n    .post-card .readmore a:first-child:hover {\n        background: #006bff;\n        color: #fff;\n        border-color: #006bff;\n    }\n    \n    .post-card .readmore .btn-register {\n        background: #006bff;\n        color: #fff;\n        border-color: #006bff;\n    }\n    \n    .post-card .readmore .btn-register.disabled {\n        background: #ccc;\n        color: #fff;\n        border-color: #ccc;\n        cursor: not-allowed;\n    }\n\n    .loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 6px;\n  padding: 20px;\n  font-size: 16px;\n  font-weight: 500;\n  color: #555;\n}\n\n.loading span {\n  width: 10px;\n  height: 10px;\n  background: #0073e6;\n  border-radius: 50%;\n  display: inline-block;\n  animation: bounce 0.6s infinite alternate;\n}\n\n.loading span:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.loading span:nth-child(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes bounce {\n  from { transform: translateY(0); opacity: 0.6; }\n  to   { transform: translateY(-8px); opacity: 1; }\n}\n    \n    .error {\n        text-align: center;\n        padding: 20px;\n        color: #666;\n    }\n    \/* Status buttons *\/\n    \n    \/* Label *\/\n  .filter-label {\n    font-size: 14px;\n    color: #333;\n  }\n  \n  \/* Select box *\/\n  .filter-select {\n    padding: 10px 14px;\n    border: 1px solid #ccc;\n    border-radius: 8px;\n    background: #fff;\n    font-size: 14px;\n    color: #333;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    appearance: none; \/* remove default arrow *\/\n    background-image: url(\"data:image\/svg+xml;charset=US-ASCII,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%23666' stroke-width='2' d='M6 9l6 6 6-6'\/%3e%3c\/svg%3e\");\n    background-repeat: no-repeat;\n    background-position: right 12px center;\n    background-size: 12px;\n  }\n  \n  .filter-select:hover {\n    border-color: #999;\n  }\n  \n  .filter-select:focus {\n    border-color: #006bff;\n    box-shadow: 0 0 0 3px rgba(0,107,255,0.2);\n    outline: none;\n  }\n  \n    \/* Pagination *\/\n  .pagination {\n  margin-top: 20px;\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  }\n  \n  .pagination button {\n  padding: 8px 14px;\n  border: 1px solid #ccc;\n  background: #fff;\n  color: #000;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 0.9rem;\n  transition: background 0.2s, color 0.2s;\n  }\n  \n  .pagination button.active {\n  background: #006bff;\n  color: #fff;\n  border-color: #006bff;\n  }\n  \n  .pagination button:disabled {\n  opacity: 0.5;\n  cursor: default;\n  }\n  <\/style>\n  \n  <div class=\"post-grid-wrapper\">\n    <!-- Filter -->\n    <div class=\"post-filter\">\n        <div class=\"filter-left\">\n            <label for=\"categoryFilter\" class=\"filter-label\">Filter By Category<\/label>\n            <select id=\"categoryFilter\" class=\"filter-select\">\n            <option value=\"\">All<\/option>\n          <\/select>\n        <\/div>\n  \n        <div class=\"filter-right\">\n            <label for=\"searchBox\">Find Article<\/label>\n            <div class=\"search-wrapper\">\n                <input type=\"text\" id=\"searchBox\" placeholder=\"Find article...\" \/>\n                <span class=\"search-icon\">\ud83d\udd0d<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n  \n    <!-- Grid -->\n    <div id=\"postGrid\">\n        <div class=\"loading\">Loading...<\/div>\n        \n    <\/div>\n    <!-- Pagination -->\n    <div id=\"pagination\" class=\"pagination\"><\/div>\n  <\/div>\n  \n  <script>\n    (function(){\n  const gridContainer = document.getElementById(\"postGrid\");\n  const filterSelect = document.getElementById(\"categoryFilter\");\n  const searchBox = document.getElementById(\"searchBox\");\n  const pagination = document.getElementById(\"pagination\");\n  \n  const baseUrl = \"\/wp-json\/wp\/v2\";\n  const postsPerPage = 6;\n  let currentPage = 1;\n  let totalPages = 1;\n  \n  \/\/ helper\n  function stripHtml(html){\n    const tmp = document.createElement(\"div\");\n    tmp.innerHTML = html;\n    return tmp.textContent || tmp.innerText || \"\";\n  }\n  function truncate(str, n){\n    return str.length > n ? str.slice(0, n).trim() + \"\u2026\" : str;\n  }\n  \n  \/\/ fetch categories\n  function loadCategories() {\n    \/\/ Tambahkan kategori \"Semua\" dulu kalau perlu\n    \/\/ option default sudah ada\n\n    \/\/ Tambahkan parent category (35)\n    const parentOption = document.createElement(\"option\");\n    parentOption.value = 35;\n    parentOption.textContent = \"All Main Categories\";\n    filterSelect.appendChild(parentOption);\n\n    \/\/ Load child categories\n    fetch(`${baseUrl}\/categories?parent=35&per_page=50&lang=en`)\n        .then(res => res.json())\n        .then(cats => {\n        cats.forEach(cat => {\n            const opt = document.createElement(\"option\");\n            opt.value = cat.id;\n            opt.textContent = cat.name;\n            filterSelect.appendChild(opt);\n        });\n        });\n    }\n  \n  \/\/ render pagination buttons\n  function renderPagination() {\n  pagination.innerHTML = \"\";\n  if (totalPages <= 1) return;\n\n  const createBtn = (text, page, disabled = false, active = false) => {\n    const btn = document.createElement(\"button\");\n    btn.textContent = text;\n    if (disabled) btn.disabled = true;\n    if (active) btn.classList.add(\"active\");\n    if (!disabled && !active && page) {\n      btn.onclick = () => loadPosts(filterSelect.value, searchBox.value.trim(), page);\n    }\n    return btn;\n  };\n\n  const addEllipsis = () => {\n    const span = document.createElement(\"span\");\n    span.textContent = \"...\";\n    span.style.padding = \"8px 12px\";\n    span.style.color = \"#777\";\n    pagination.appendChild(span);\n  };\n\n  \/\/ Prev Button\n  pagination.appendChild(\n    createBtn(\"\u00ab Previous\", currentPage - 1, currentPage === 1)\n  );\n\n  let pages = [];\n\n  \/\/ always show page 1\n  pages.push(1);\n\n  \/\/ show around current page\n  for (let i = currentPage - 2; i <= currentPage + 2; i++) {\n    if (i > 1 && i < totalPages) pages.push(i);\n  }\n\n  \/\/ always show last page\n  pages.push(totalPages);\n\n  \/\/ remove duplicate & sort\n  pages = [...new Set(pages)].sort((a, b) => a - b);\n\n  \/\/ render pages with ellipsis\n  let prev = 0;\n  pages.forEach(p => {\n    if (p - prev > 1) addEllipsis();\n\n    pagination.appendChild(\n      createBtn(p, p, false, p === currentPage)\n    );\n\n    prev = p;\n  });\n\n  \/\/ Next Button\n  pagination.appendChild(\n    createBtn(\"Next \u00bb\", currentPage + 1, currentPage === totalPages)\n  );\n}\n  \n  \/\/ fetch posts\n  async function loadPosts(catId = \"\", searchTerm = \"\", page = 1) {\n    gridContainer.innerHTML = `\n        <div class=\"loading\">\n            <span><\/span><span><\/span><span><\/span>\n        <\/div>\n        `;\n    currentPage = page;\n  \n    let url = `${baseUrl}\/posts?lang=en&per_page=${postsPerPage}&page=${page}&_embed`;\n  \n    if (catId) {\n        \/\/ user memilih kategori tertentu\n        url += `&categories=${catId}`;\n        } else {\n        try {\n            const resCats = await fetch(`${baseUrl}\/categories?parent=35&per_page=50&lang=en`);\n            const cats = await resCats.json();\n            const ids = [35, ...cats.map(c => c.id)].join(\",\");\n            url += `&categories=${ids}`;\n        } catch (err) {\n            gridContainer.innerHTML = `<div class=\"loading\"><span><\/span><span><\/span><span><\/span><\/div>`;\n            return;\n        }\n    }\n  \n    if (searchTerm) {\n      url += `&search=${encodeURIComponent(searchTerm)}`;\n    }\n  \n    try {\n      const res = await fetch(url);\n      if (!res.ok) throw new Error(\"Gagal mengambil data postingan\");\n      const posts = await res.json();\n  \n      totalPages = parseInt(res.headers.get(\"X-WP-TotalPages\")) || 1;\n  \n      if (posts.length === 0) {\n        gridContainer.innerHTML = '<div class=\"error\">Tidak ada postingan yang ditemukan.<\/div>';\n        pagination.innerHTML = \"\";\n        return;\n      }\n  \n      const grid = document.createElement(\"div\");\n      grid.className = \"post-grid\";\n  \n      posts.forEach(post => {\n        let thumb = \"\";\n        try {\n          const fm = post._embedded[\"wp:featuredmedia\"][0];\n          thumb = fm?.source_url || \"\";\n        } catch (e) {}\n  \n        let excerpt = stripHtml(post.excerpt?.rendered || post.content?.rendered || \"\");\n        excerpt = truncate(excerpt, 100);\n  \n        const card = document.createElement(\"div\");\n        card.className = \"post-card\";\n        card.innerHTML = `\n          ${thumb ? `<img decoding=\"async\" src=\"${thumb}\" alt=\"${post.title.rendered}\">` : \"\"}\n          <div class=\"card-body\">\n            <h3>${post.title.rendered}<\/h3>\n            <div class=\"excerpt\">${excerpt}<\/div>\n            <div class=\"readmore\"><a href=\"${post.link}\">Read More<\/a><\/div>\n          <\/div>\n        `;\n        grid.appendChild(card);\n      });\n  \n      gridContainer.innerHTML = \"\";\n      gridContainer.appendChild(grid);\n  \n      renderPagination();\n  \n    } catch (err) {\n      gridContainer.innerHTML = `<<div class=\"loading\">\n            <span><\/span><span><\/span><span><\/span>\n        <\/div>`;\n      pagination.innerHTML = \"\";\n    }\n  }\n  \n  \/\/ init\n  loadCategories();\n  loadPosts();\n  \n  filterSelect.addEventListener(\"change\", () => {\n    loadPosts(filterSelect.value, searchBox.value.trim(), 1);\n  });\n  \n  let typingTimer;\n  searchBox.addEventListener(\"input\", () => {\n    clearTimeout(typingTimer);\n    typingTimer = setTimeout(() => {\n      loadPosts(filterSelect.value, searchBox.value.trim(), 1);\n    }, 500);\n  });\n  })();\n  <\/script>\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":"<p>Filter By Category All Find Article \ud83d\udd0d Loading&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-7291","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/pages\/7291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/comments?post=7291"}],"version-history":[{"count":17,"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/pages\/7291\/revisions"}],"predecessor-version":[{"id":14331,"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/pages\/7291\/revisions\/14331"}],"wp:attachment":[{"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/media?parent=7291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}