Katalog Produk - WILDES PACKAGING<\/title>\r\n \r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Quicksand:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Quicksand', 'sans-serif'], \/\/ Font Body (Fun)\r\n serif: ['Playfair Display', 'serif'], \/\/ Font Heading (Beauty\/Elegan)\r\n },\r\n colors: {\r\n brand: {\r\n dark: '#0a2e1b', \r\n primary: '#165c37', \r\n light: '#2a945d', \r\n accent: '#e6c875',\r\n blush: '#fdf8f6' \/\/ Tambahan warna blush pink untuk kesan kosmetik\r\n },\r\n whatsapp: {\r\n default: '#25D366',\r\n hover: '#128C7E'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n body {\r\n font-family: 'Quicksand', sans-serif;\r\n background-color: #fdf8f6; \/* Warna blush pink muda *\/\r\n overflow-x: hidden;\r\n }\r\n \r\n .fade-in { animation: fadeIn 0.8s ease-out forwards; }\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .hide-scrollbar::-webkit-scrollbar { display: none; }\r\n .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\r\n\r\n \/* Animasi Modal & Drawer *\/\r\n .modal-enter { animation: modalFadeIn 0.3s ease-out forwards; }\r\n .modal-content-enter { animation: modalScaleUp 0.3s ease-out forwards; }\r\n \r\n \/* Drawer Keranjang *\/\r\n .drawer-open { transform: translateX(0) !important; }\r\n .overlay-open { opacity: 1 !important; pointer-events: auto !important; }\r\n\r\n \/* Toast Notification *\/\r\n .toast-enter { animation: slideInRight 0.4s ease-out forwards; }\r\n .toast-exit { animation: slideOutRight 0.4s ease-in forwards; }\r\n\r\n @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n @keyframes modalScaleUp { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }\r\n @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }\r\n @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }\r\n <\/style>\r\n\r\n \r\n <script type=\"application\/ld+json\">\r\n {\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@graph\": [\r\n {\r\n \"@type\": \"LocalBusiness\",\r\n \"name\": \"WILDES PACKAGING JAKARTA\",\r\n \"image\": \"https:\/\/creatsigndev.com\/Willy\/wp-content\/uploads\/2026\/10\/WhatsApp-Image-2026-10-19-at-13.03.16.webp\",\r\n \"@id\": \"https:\/\/wildespackaging.com\",\r\n \"url\": \"https:\/\/wildespackaging.com\",\r\n \"telephone\": \"+6289688304659\",\r\n \"email\": \"wildessuksesindonesia@gmail.com\",\r\n \"description\": \"Katalog lengkap supplier custom kemasan kosmetik atau skincare.\",\r\n \"address\": {\r\n \"@type\": \"PostalAddress\",\r\n \"streetAddress\": \"Rukan Boulevard, Jl. Taman Palem Mutiara No.28 Blok i-1\",\r\n \"addressLocality\": \"Cengkareng\",\r\n \"addressRegion\": \"Jakarta Barat\",\r\n \"postalCode\": \"11730\",\r\n \"addressCountry\": \"ID\"\r\n }\r\n }\r\n ]\r\n }\r\n <\/script>\r\n<\/head>\r\n<body class=\"antialiased text-gray-700\">\r\n\r\n <nav class=\"absolute top-0 left-0 w-full z-40 px-6 py-6 lg:px-12 flex justify-between items-center bg-gradient-to-b from-black\/60 to-transparent\">\r\n <div class=\"text-white font-serif font-bold text-2xl tracking-wider\">\r\n WILDES<span class=\"text-brand-accent\">.<\/span>\r\n <\/div>\r\n <div class=\"flex gap-6\">\r\n <a href=\"index.html\" class=\"text-white hover:text-brand-accent transition-colors duration-300 text-sm font-semibold flex items-center gap-2\">\r\n <i class=\"fas fa-home\"><\/i> Beranda\r\n <\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n <section class=\"relative w-full h-[45vh] min-h-[350px] flex items-center justify-center overflow-hidden bg-brand-dark\">\r\n <div class=\"absolute inset-0 bg-cover bg-center bg-no-repeat opacity-40 transform scale-105\" \r\n style=\"background-image: url('https:\/\/creatsigndev.com\/Willy\/wp-content\/uploads\/2026\/10\/WhatsApp-Image-2026-10-19-at-13.07.55.webp');\">\r\n <\/div>\r\n <div class=\"absolute inset-0 bg-gradient-to-t from-brand-blush via-brand-dark\/70 to-transparent\"><\/div>\r\n \r\n <div class=\"relative z-10 text-center px-6 mt-16 fade-in max-w-4xl mx-auto\">\r\n <span class=\"inline-block py-1.5 px-4 rounded-full bg-brand-light\/30 border border-brand-light\/50 text-brand-accent text-xs font-bold tracking-[0.2em] uppercase mb-4 shadow-sm backdrop-blur-sm\">\r\n Koleksi Eksklusif\r\n <\/span>\r\n <h1 class=\"text-4xl md:text-5xl lg:text-6xl font-serif font-bold text-white mb-4 leading-tight\">\r\n Eksplorasi <span class=\"text-brand-accent italic\">Keindahan<\/span> Kemasan\r\n <\/h1>\r\n <p class=\"text-gray-200 max-w-2xl mx-auto text-lg font-medium leading-relaxed\">\r\n Pilih berbagai varian kemasan kosmetik yang siap dikustomisasi untuk mewakili pesona brand Anda.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-12 md:py-16 relative min-h-screen\">\r\n <div class=\"max-w-[1400px] mx-auto px-6 sm:px-12 lg:px-8\">\r\n \r\n \r\n <div class=\"mb-12 sticky top-0 z-30 bg-brand-blush\/90 backdrop-blur-md py-4 -mx-6 px-6 sm:mx-0 sm:px-0\">\r\n <div class=\"flex overflow-x-auto hide-scrollbar gap-3 pb-2\" id=\"categoryFilterContainer\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"emptyState\" class=\"hidden text-center py-20\">\r\n <div class=\"text-6xl text-brand-light\/30 mb-4\"><i class=\"fas fa-box-open\"><\/i><\/div>\r\n <h3 class=\"text-2xl font-serif font-bold text-brand-dark mb-2\">Produk Tidak Ditemukan<\/h3>\r\n <p class=\"text-gray-500 font-medium\">Silakan pilih kategori lainnya.<\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"productGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8\">\r\n \r\n <\/div>\r\n\r\n \r\n <div id=\"loadMoreContainer\" class=\"hidden text-center mt-16 pb-8\">\r\n <button id=\"loadMoreBtn\" class=\"inline-flex items-center gap-3 bg-white text-brand-primary border-2 border-brand-primary px-8 py-3.5 rounded-full font-bold text-sm md:text-base transition-all duration-300 shadow-sm hover:bg-brand-primary hover:text-white hover:shadow-lg hover:-translate-y-1\">\r\n <i class=\"fas fa-spinner\" id=\"loadMoreIcon\"><\/i>\r\n <span>Tampilkan Lebih Banyak<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <button onclick=\"toggleCart()\" class=\"fixed bottom-8 right-8 z-40 bg-brand-primary hover:bg-brand-dark text-white w-16 h-16 rounded-full shadow-[0_10px_25px_rgba(22,92,55,0.4)] hover:shadow-[0_15px_35px_rgba(22,92,55,0.6)] flex items-center justify-center transition-all duration-300 hover:-translate-y-2 focus:outline-none group\">\r\n <i class=\"fas fa-shopping-bag text-2xl group-hover:scale-110 transition-transform\"><\/i>\r\n <span id=\"cartBadge\" class=\"absolute -top-2 -right-2 bg-brand-accent text-brand-dark w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shadow-md border-2 border-white transform scale-0 transition-transform duration-300\">0<\/span>\r\n <\/button>\r\n\r\n \r\n <div id=\"cartOverlay\" onclick=\"toggleCart()\" class=\"fixed inset-0 bg-brand-dark\/40 backdrop-blur-sm z-[50] opacity-0 pointer-events-none transition-opacity duration-300\"><\/div>\r\n\r\n \r\n <div id=\"cartDrawer\" class=\"fixed top-0 right-0 h-full w-full sm:w-[450px] bg-white shadow-2xl z-[60] transform translate-x-full transition-transform duration-500 ease-in-out flex flex-col rounded-l-3xl overflow-hidden\">\r\n \r\n \r\n <div class=\"px-6 py-5 bg-brand-blush border-b border-gray-100 flex justify-between items-center\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 bg-brand-primary\/10 rounded-full flex items-center justify-center text-brand-primary\">\r\n <i class=\"fas fa-box-open text-lg\"><\/i>\r\n <\/div>\r\n <h2 class=\"text-xl font-serif font-bold text-brand-dark\">Pilihan Anda<\/h2>\r\n <\/div>\r\n <button onclick=\"toggleCart()\" class=\"w-10 h-10 bg-white rounded-full flex items-center justify-center text-gray-500 hover:text-red-500 hover:bg-red-50 transition-colors shadow-sm border border-gray-100\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"cartItemsContainer\" class=\"flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50\/50 hide-scrollbar\">\r\n \r\n <div class=\"h-full flex flex-col items-center justify-center text-center opacity-50\">\r\n <i class=\"fas fa-shopping-basket text-5xl mb-4 text-gray-300\"><\/i>\r\n <p class=\"font-medium text-gray-500\">Belum ada produk yang dipilih.<\/p>\r\n <p class=\"text-sm text-gray-400 mt-1\">Eksplorasi katalog kami dan pilih kemasan impian Anda.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-6 bg-white border-t border-gray-100 shadow-[0_-10px_30px_rgba(0,0,0,0.02)]\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <span class=\"text-gray-500 font-medium text-sm\">Total Varian:<\/span>\r\n <span id=\"cartTotalItems\" class=\"font-bold text-brand-dark text-lg\">0 Produk<\/span>\r\n <\/div>\r\n <button onclick=\"checkoutWa()\" class=\"w-full inline-flex items-center justify-center gap-3 bg-whatsapp-default hover:bg-whatsapp-hover text-white px-6 py-4 rounded-2xl font-bold text-lg transition-all duration-300 shadow-[0_8px_20px_rgba(37,211,102,0.3)] hover:-translate-y-1\">\r\n <i class=\"fab fa-whatsapp text-2xl\"><\/i>\r\n <span>Kirim Pesanan via WA<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"toastContainer\" class=\"fixed top-24 right-6 z-[70] flex flex-col gap-3\"><\/div>\r\n\r\n \r\n <div id=\"productModal\" class=\"hidden fixed inset-0 z-[80] overflow-y-auto\">\r\n <div id=\"modalBackdrop\" class=\"fixed inset-0 bg-brand-dark\/60 backdrop-blur-sm transition-opacity\"><\/div>\r\n <div class=\"min-h-screen px-4 text-center flex items-center justify-center relative z-10\">\r\n <div id=\"modalContentPanel\" class=\"bg-white rounded-3xl max-w-xl w-full p-8 text-left shadow-2xl relative my-8 overflow-hidden transform transition-all border border-brand-primary\/10\">\r\n <button onclick=\"closeModal()\" class=\"absolute top-6 right-6 w-10 h-10 bg-gray-50 hover:bg-red-50 text-gray-500 hover:text-red-500 border border-gray-100 rounded-full flex items-center justify-center transition-colors z-10\">\r\n <i class=\"fas fa-times text-lg\"><\/i>\r\n <\/button>\r\n \r\n <div class=\"w-full h-72 bg-brand-blush rounded-2xl overflow-hidden mb-6 cursor-pointer group relative border border-brand-primary\/5\" onclick=\"openLightbox(document.getElementById('modalImage').src, document.getElementById('modalTitle').textContent)\">\r\n <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"Product Image\" class=\"w-full h-full object-cover\">\r\n <div class=\"absolute inset-0 bg-brand-dark\/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white text-sm font-bold gap-2 backdrop-blur-[2px]\">\r\n <i class=\"fas fa-search-plus text-xl\"><\/i> Perbesar Gambar\r\n <\/div>\r\n <\/div>\r\n \r\n <span id=\"modalCategory\" class=\"inline-block bg-brand-accent\/20 text-brand-dark border border-brand-accent\/50 text-xs font-bold px-4 py-1.5 rounded-full mb-3\"><\/span>\r\n <h3 id=\"modalTitle\" class=\"text-2xl font-serif font-bold text-brand-dark mb-4 leading-snug\"><\/h3>\r\n \r\n <div class=\"space-y-4 text-gray-600 font-medium leading-relaxed mb-8\">\r\n <p id=\"modalDesc1\"><\/p>\r\n <p id=\"modalDesc2\"><\/p>\r\n <\/div>\r\n \r\n <div class=\"flex gap-4\">\r\n <button id=\"modalAddBtn\" class=\"flex-1 inline-flex items-center justify-center gap-2 bg-brand-primary hover:bg-brand-dark text-white py-3.5 rounded-xl font-bold transition-all shadow-md hover:shadow-lg hover:-translate-y-1\">\r\n <i class=\"fas fa-cart-plus\"><\/i> Tambahkan ke Pilihan\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"lightboxModal\" class=\"hidden fixed inset-0 z-[100] bg-black\/95 backdrop-blur-md flex items-center justify-center p-4\">\r\n <button onclick=\"closeLightbox()\" class=\"absolute top-6 right-6 w-12 h-12 bg-white\/10 hover:bg-white\/20 text-white rounded-full flex items-center justify-center transition-colors text-xl\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/button>\r\n <div class=\"max-w-5xl max-h-[90vh] flex flex-col items-center\">\r\n <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"Full Image\" class=\"max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl mb-4 border border-white\/10\">\r\n <p id=\"lightboxCaption\" class=\"text-white text-center font-serif font-medium text-xl tracking-wide\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Database Produk (150+ item sesuai data)\r\n const productsData = [\r\n \/\/ TUBE\r\n { cat: \"Tube\", name: \"Roll On Tube 30 ml 50 ml kemasan kosmetik custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2025\/07\/a40711ab-6374-4a03-a813-aacdab4543f2.webp\" },\r\n { cat: \"Tube\", name: \"Kemasan kosmetik tube kosong eyeliner\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2025\/07\/6990ed7a-aa5c-49d7-9a89-7e39331489d5.webp\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Lip Cream 3ml 5ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/25.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom Lip Serum \/ Lip Balm 3ml 5ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/24.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Silicon Brush 100ml 200ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/23.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom karakter 30ml 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/22.png\" },\r\n { cat: \"Tube\", name: \"Tube Airless Pump Custom 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/21.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Aluminium massage 10g 15g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/20.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Rolled Ball 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/19.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom Oval - Screw cap 30ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/18-1.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom Pink Matte - Fliptop Cap 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/17-2.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Screw lids 50ml 100ml 150ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/16-2.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Rolling Massage 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/15-2.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Unique Cap 20ml 30ml 50ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/14-3.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom Rose Gold 50ml 100ml 120ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/13-3.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom Karakter - Acrylic Cap 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/12-4.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Fliptop Cap 60ml-120ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/11-3.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Screw Cap\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/8-4.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Eye Cream long nozzle\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/6-4.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom with Acrylic cap 100ml 120ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/9-1.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Screw Cap 50ml 100ml 150ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/7-1.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Fliptop Cap 30ml 80ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/4-1.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Eye cream 10ml 15ml 30ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/3-4.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - with ball massage 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/2-7.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom with Long Nozzle 10ml 15ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/10-1.png\" },\r\n { cat: \"Tube\", name: \"Tube Pump Custom - BB CC Cream 15ml 30ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/1-6.png\" },\r\n \/\/ SKINCARE SETS\r\n { cat: \"Skincare Sets\", name: \"Kemasan skincare custom warna\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/9.png\" },\r\n { cat: \"Skincare Sets\", name: \"Packaging Skincare sets Custom \/ Kemasan skincare unik\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/8.png\" },\r\n { cat: \"Skincare Sets\", name: \"Packaging skincare \/ kemasan skincare custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/7.png\" },\r\n { cat: \"Skincare Sets\", name: \"Packaging Skincare sets \/ Kemasan skincare custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/6-1.png\" },\r\n { cat: \"Skincare Sets\", name: \"Kemasan Skincare sets Frosted \/ Packaging skincare sets\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/5-1.png\" },\r\n { cat: \"Skincare Sets\", name: \"Custom Kemasan Skincare sets Transparan\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/4-1.png\" },\r\n { cat: \"Skincare Sets\", name: \"Packaging Skincare sets custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/3-1.png\" },\r\n { cat: \"Skincare Sets\", name: \"Custom Skincare Bottle sets\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/2-1.png\" },\r\n { cat: \"Skincare Sets\", name: \"Packaging Skincare sets Custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/1-1.png\" },\r\n \/\/ JAR PLASTIC\r\n { cat: \"Jar Plastic\", name: \"Plastic Jar Frosted 5g 10g 20g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/17-1.png\" },\r\n { cat: \"Jar Plastic\", name: \"Plastic Jar list silver 5g 10g 15g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/16-1.png\" },\r\n { cat: \"Jar Plastic\", name: \"Plastic Jar Custom clear matte 20g 30g 50g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/15-1.png\" },\r\n { cat: \"Jar Plastic\", name: \"Plastic Jar Custom Mask 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/14-2.png\" },\r\n { cat: \"Jar Plastic\", name: \"Plastic Jar Custom matte 10g 20g 30g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/13-2.png\" },\r\n { cat: \"Jar Plastic\", name: \"Plastic Jar Custom clear 50g 100g 150g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/12-3.png\" },\r\n \/\/ JAR KACA\r\n { cat: \"Jar Kaca\", name: \"Glass Jar Custom 20g 30g 50g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/6.png\" },\r\n { cat: \"Jar Kaca\", name: \"Glass Jar square 10g 20g 30g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/5.png\" },\r\n \/\/ JAR AKRILIK\r\n { cat: \"Jar Akrilik\", name: \"Acrylic Jar Custom Flower Gold 10g 12g 20g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/6-2.png\" },\r\n { cat: \"Jar Akrilik\", name: \"Acrylic Jar Custom Crown 12g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/2-8.png\" },\r\n \/\/ LIP CREAM & LIPSTICK\r\n { cat: \"Lip Kosmetik\", name: \"Kemasan Lipstick Custom Gold\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2025\/07\/3.jpg\" },\r\n { cat: \"Lip Kosmetik\", name: \"Botol Lip Cream Custom Bentuk unik\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/15.png\" },\r\n { cat: \"Lip Kosmetik\", name: \"Botol Lip Cream mini Custom unik 2ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/12.png\" },\r\n { cat: \"Lip Kosmetik\", name: \"Botol Lip Cream Custom Gradasi 5ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/5.png\" },\r\n \/\/ MAKEUP BOX \/ CUSHION\r\n { cat: \"Makeup Box\", name: \"Empty case eyeshadow 12 warna\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2025\/07\/e26f0142-8754-447e-bda9-3bc34b6865ab.webp\" },\r\n { cat: \"Makeup Box\", name: \"Tempat bedak tabur custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/6-2.png\" },\r\n { cat: \"Makeup Box\", name: \"Kemasan Cushion Custom Green\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/8-2.png\" },\r\n \/\/ BOX PACKAGING\r\n { cat: \"Box Packaging\", name: \"Custom Box tube Sunscreen BB Glow\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2024\/05\/4.png\" },\r\n { cat: \"Box Packaging\", name: \"Box skincare customized - Soft brown\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2024\/05\/3.png\" },\r\n \/\/ AIRLESS BOTTLE\r\n { cat: \"Airless Bottle\", name: \"New Product Custom Airless Bottle\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2025\/07\/1.jpg\" },\r\n { cat: \"Airless Bottle\", name: \"Airless Bottle Custom Clear 15ml-100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/10.png\" },\r\n { cat: \"Airless Bottle\", name: \"Airless Bottle Purple Matte\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/8.png\" },\r\n \/\/ BOTTLE PUMP & SPRAY\r\n { cat: \"Bottle\", name: \"Glass Bottle Pump Amber gradasi\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/12-5.png\" },\r\n { cat: \"Bottle\", name: \"Glass Bottle Kotak Custom Pump\/Spray\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/10-4.png\" },\r\n { cat: \"Bottle\", name: \"Botol Spray 50ml 100ml kemasan custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2025\/07\/9416d356-dba2-4442-b7ff-7c5693777e13.webp\" },\r\n { cat: \"Bottle\", name: \"Botol Spray Customized Colorful\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2024\/01\/16.png\" },\r\n \/\/ PERFUME & SERUM\r\n { cat: \"Perfume\", name: \"Botol Parfum Custom 30ml 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/15-3.png\" },\r\n { cat: \"Perfume\", name: \"Botol Parfum Custom Elegant 120ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/14-4.png\" },\r\n { cat: \"Serum\", name: \"Botol Serum Kotak Custom 10ml 20ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/23-1.png\" },\r\n { cat: \"Serum\", name: \"Botol Serum Dropper Custom 10ml-30ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/18-2.png\" }\r\n ];\r\n\r\n \/\/ System Data\r\n const categories = [\"Semua Kategori\", ...new Set(productsData.map(p => p.cat))];\r\n const waNumber = \"6289688304659\";\r\n let cart = []; \/\/ Array untuk menyimpan keranjang belanja\r\n\r\n \/\/ Elements\r\n const filterContainer = document.getElementById('categoryFilterContainer');\r\n const gridContainer = document.getElementById('productGrid');\r\n const emptyState = document.getElementById('emptyState');\r\n const loadMoreContainer = document.getElementById('loadMoreContainer');\r\n \r\n let activeCategory = \"Semua Kategori\";\r\n let currentVisibleCount = 12;\r\n const itemsPerLoad = 12;\r\n let currentFilteredProducts = [];\r\n\r\n function toggleCart() {\r\n const drawer = document.getElementById('cartDrawer');\r\n const overlay = document.getElementById('cartOverlay');\r\n drawer.classList.toggle('drawer-open');\r\n overlay.classList.toggle('overlay-open');\r\n if(drawer.classList.contains('drawer-open')) renderCartItems();\r\n }\r\n\r\n function showToast(message) {\r\n const toastContainer = document.getElementById('toastContainer');\r\n const toast = document.createElement('div');\r\n toast.className = \"bg-brand-dark text-white px-6 py-4 rounded-xl shadow-2xl flex items-center gap-3 toast-enter border border-brand-accent\/30 backdrop-blur-md\";\r\n toast.innerHTML = `<i class=\"fas fa-check-circle text-brand-accent text-xl\"><\/i> <span class=\"font-bold\">${message}<\/span>`;\r\n \r\n toastContainer.appendChild(toast);\r\n \r\n setTimeout(() => {\r\n toast.classList.replace('toast-enter', 'toast-exit');\r\n setTimeout(() => toast.remove(), 400); \/\/ Wait for exit animation\r\n }, 3000);\r\n }\r\n\r\n window.addToCart = function(encodedName, imgUrl, encodedCat) {\r\n const name = decodeURIComponent(encodedName);\r\n const cat = decodeURIComponent(encodedCat);\r\n \r\n \/\/ Cek apakah item sudah ada di keranjang\r\n const existingItem = cart.find(item => item.name === name);\r\n if(existingItem) {\r\n existingItem.qty += 1;\r\n } else {\r\n cart.push({ name, img: imgUrl, cat, qty: 1 });\r\n }\r\n \r\n updateCartBadge();\r\n showToast(\"Produk berhasil ditambahkan!\");\r\n \r\n \/\/ Jika modal sedang terbuka, tambahkan feedback visual\r\n const modal = document.getElementById('productModal');\r\n if(!modal.classList.contains('hidden')) {\r\n closeModal();\r\n }\r\n };\r\n\r\n function updateCartBadge() {\r\n const badge = document.getElementById('cartBadge');\r\n const totalQty = cart.reduce((sum, item) => sum + item.qty, 0);\r\n badge.textContent = totalQty;\r\n \r\n if(totalQty > 0) {\r\n badge.classList.remove('scale-0');\r\n badge.classList.add('scale-100');\r\n } else {\r\n badge.classList.remove('scale-100');\r\n badge.classList.add('scale-0');\r\n }\r\n }\r\n\r\n window.changeQty = function(index, delta) {\r\n if(cart[index]) {\r\n cart[index].qty += delta;\r\n if(cart[index].qty <= 0) {\r\n cart.splice(index, 1); \/\/ Hapus item jika qty 0\r\n }\r\n updateCartBadge();\r\n renderCartItems();\r\n }\r\n };\r\n\r\n function renderCartItems() {\r\n const container = document.getElementById('cartItemsContainer');\r\n const totalText = document.getElementById('cartTotalItems');\r\n \r\n totalText.textContent = `${cart.length} Varian (${cart.reduce((s, i) => s + i.qty, 0)} Pcs)`;\r\n \r\n if(cart.length === 0) {\r\n container.innerHTML = `\r\n <div class=\"h-full flex flex-col items-center justify-center text-center opacity-50\">\r\n <i class=\"fas fa-shopping-basket text-5xl mb-4 text-gray-300\"><\/i>\r\n <p class=\"font-medium text-gray-500\">Belum ada produk yang dipilih.<\/p>\r\n <p class=\"text-sm text-gray-400 mt-1\">Pilih kemasan impian Anda dari katalog.<\/p>\r\n <\/div>`;\r\n return;\r\n }\r\n\r\n container.innerHTML = '';\r\n cart.forEach((item, index) => {\r\n const div = document.createElement('div');\r\n div.className = \"bg-white p-4 rounded-2xl shadow-sm border border-gray-100 flex gap-4 items-center group relative\";\r\n div.innerHTML = `\r\n <div class=\"w-20 h-20 bg-brand-blush rounded-xl overflow-hidden shrink-0 border border-brand-primary\/5\">\r\n <img decoding=\"async\" src=\"${item.img}\" alt=\"${item.name}\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"flex-1\">\r\n <p class=\"text-xs text-brand-light font-bold mb-1 uppercase tracking-wider\">${item.cat}<\/p>\r\n <h4 class=\"font-bold text-brand-dark text-sm leading-tight mb-3 line-clamp-2\">${item.name}<\/h4>\r\n <div class=\"flex items-center gap-3\">\r\n <button onclick=\"changeQty(${index}, -1)\" class=\"w-7 h-7 rounded-lg bg-gray-100 hover:bg-brand-primary hover:text-white flex items-center justify-center transition-colors\"><i class=\"fas fa-minus text-xs\"><\/i><\/button>\r\n <span class=\"font-bold text-brand-dark w-4 text-center\">${item.qty}<\/span>\r\n <button onclick=\"changeQty(${index}, 1)\" class=\"w-7 h-7 rounded-lg bg-brand-light\/20 text-brand-primary hover:bg-brand-primary hover:text-white flex items-center justify-center transition-colors\"><i class=\"fas fa-plus text-xs\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"changeQty(${index}, -${item.qty})\" class=\"absolute top-4 right-4 text-gray-300 hover:text-red-500 transition-colors\">\r\n <i class=\"fas fa-trash-alt\"><\/i>\r\n <\/button>\r\n `;\r\n container.appendChild(div);\r\n });\r\n }\r\n\r\n window.checkoutWa = function() {\r\n if(cart.length === 0) {\r\n showToast(\"Keranjang Anda masih kosong!\");\r\n return;\r\n }\r\n\r\n let text = \"Halo *WILDES PACKAGING*,\\nSaya tertarik untuk memesan \/ konsultasi produk berikut:\\n\\n\";\r\n \r\n cart.forEach((item, i) => {\r\n text += `${i+1}. *${item.name}*\\n`;\r\n text += ` - Kategori: ${item.cat}\\n`;\r\n text += ` - Jumlah Estimasi: ${item.qty} pcs\\n`;\r\n text += ` - Gambar: ${item.img}\\n\\n`;\r\n });\r\n \r\n text += \"Mohon info detail harganya ya. Terima kasih.\";\r\n \r\n const waUrl = `https:\/\/wa.me\/${waNumber}?text=${encodeURIComponent(text)}`;\r\n window.open(waUrl, '_blank');\r\n };\r\n\r\n function renderFilters() {\r\n if (!filterContainer) return;\r\n filterContainer.innerHTML = '';\r\n categories.forEach(cat => {\r\n const btn = document.createElement('button');\r\n const isActive = cat === activeCategory;\r\n btn.className = `whitespace-nowrap px-6 py-2.5 rounded-full text-sm font-bold transition-all duration-300 border shadow-sm ${isActive ? 'bg-brand-primary text-white border-brand-primary' : 'bg-white text-gray-500 border-gray-200 hover:border-brand-primary hover:text-brand-primary'}`;\r\n btn.textContent = cat;\r\n btn.onclick = () => {\r\n activeCategory = cat;\r\n renderFilters();\r\n renderProducts(true);\r\n };\r\n filterContainer.appendChild(btn);\r\n });\r\n }\r\n\r\n function renderProducts(reset = true) {\r\n if (!gridContainer) return;\r\n if (reset) {\r\n gridContainer.innerHTML = '';\r\n currentVisibleCount = itemsPerLoad;\r\n currentFilteredProducts = activeCategory === \"Semua Kategori\" \r\n ? productsData \r\n : productsData.filter(p => p.cat === activeCategory);\r\n }\r\n \r\n const startIndex = reset ? 0 : currentVisibleCount - itemsPerLoad;\r\n const endIndex = currentVisibleCount;\r\n const productsToRender = currentFilteredProducts.slice(startIndex, endIndex);\r\n\r\n if (currentFilteredProducts.length === 0) {\r\n gridContainer.classList.add('hidden');\r\n if (emptyState) emptyState.classList.remove('hidden');\r\n if (loadMoreContainer) loadMoreContainer.classList.add('hidden');\r\n } else {\r\n gridContainer.classList.remove('hidden');\r\n if (emptyState) emptyState.classList.add('hidden');\r\n\r\n productsToRender.forEach((product, index) => {\r\n const delay = (index % itemsPerLoad) * 50; \r\n const card = document.createElement('div');\r\n card.className = \"bg-white rounded-3xl overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.04)] border border-brand-primary\/5 hover:shadow-[0_20px_40px_rgba(22,92,55,0.1)] transition-all duration-300 hover:-translate-y-2 flex flex-col opacity-0 fade-in\";\r\n card.style.animationDelay = `${delay}ms`;\r\n\r\n card.innerHTML = `\r\n <div class=\"relative w-full pt-[100%] bg-brand-blush overflow-hidden group cursor-pointer\" onclick=\"openLightbox('${product.img}', '${product.name.replace(\/'\/g, \"\\\\'\")}')\">\r\n <img decoding=\"async\" src=\"${product.img}\" alt=\"${product.name}\" class=\"absolute inset-0 w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700\" loading=\"lazy\">\r\n <div class=\"absolute top-4 left-4 bg-white\/90 backdrop-blur-sm text-brand-dark text-xs font-bold px-3 py-1.5 rounded-full shadow-sm border border-brand-primary\/10\">\r\n ${product.cat}\r\n <\/div>\r\n <div class=\"absolute inset-0 bg-brand-dark\/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white text-sm font-bold gap-2 backdrop-blur-[2px]\">\r\n <i class=\"fas fa-search-plus text-xl\"><\/i> Full Image\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 flex flex-col flex-grow\">\r\n <h3 class=\"text-[1.1rem] font-bold text-gray-800 mb-4 line-clamp-2 leading-snug flex-grow\" title=\"${product.name}\">\r\n ${product.name}\r\n <\/h3>\r\n <div class=\"flex flex-col gap-3 mt-auto\">\r\n <button onclick=\"addToCart('${encodeURIComponent(product.name)}', '${product.img}', '${encodeURIComponent(product.cat)}')\" class=\"w-full inline-flex items-center justify-center gap-2 bg-brand-primary hover:bg-brand-dark text-white px-4 py-3 rounded-xl font-bold text-sm transition-all shadow-[0_4px_15px_rgba(22,92,55,0.2)] hover:shadow-[0_8px_20px_rgba(22,92,55,0.4)] hover:-translate-y-0.5\">\r\n <i class=\"fas fa-cart-plus text-lg\"><\/i> Pilih Produk\r\n <\/button>\r\n <button onclick=\"openModal('${encodeURIComponent(product.name)}', '${encodeURIComponent(product.cat)}', '${product.img}')\" class=\"w-full inline-flex items-center justify-center gap-2 bg-brand-blush hover:bg-brand-light\/20 text-brand-primary border border-brand-primary\/20 px-4 py-3 rounded-xl font-bold text-sm transition-colors\">\r\n <i class=\"fas fa-info-circle\"><\/i> Info Detail\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n gridContainer.appendChild(card);\r\n });\r\n\r\n if (loadMoreContainer) {\r\n if (currentVisibleCount < currentFilteredProducts.length) {\r\n loadMoreContainer.classList.remove('hidden');\r\n } else {\r\n loadMoreContainer.classList.add('hidden');\r\n }\r\n }\r\n }\r\n }\r\n\r\n \/\/ Event Listener untuk Load More\r\n document.getElementById('loadMoreBtn').addEventListener('click', () => {\r\n const loadMoreIcon = document.getElementById('loadMoreIcon');\r\n loadMoreIcon.classList.remove('fa-spinner');\r\n loadMoreIcon.classList.add('fa-circle-notch', 'fa-spin');\r\n \r\n setTimeout(() => {\r\n currentVisibleCount += itemsPerLoad;\r\n renderProducts(false);\r\n loadMoreIcon.classList.remove('fa-circle-notch', 'fa-spin');\r\n loadMoreIcon.classList.add('fa-spinner');\r\n }, 400);\r\n });\r\n\r\n window.openLightbox = function(imgUrl, captionText) {\r\n const modal = document.getElementById('lightboxModal');\r\n document.getElementById('lightboxImg').src = imgUrl;\r\n document.getElementById('lightboxCaption').textContent = captionText;\r\n modal.classList.remove('hidden');\r\n document.body.style.overflow = 'hidden';\r\n };\r\n\r\n window.closeLightbox = function() {\r\n document.getElementById('lightboxModal').classList.add('hidden');\r\n document.body.style.overflow = '';\r\n };\r\n\r\n window.openModal = function(encodedName, encodedCat, imgUrl) {\r\n const modal = document.getElementById('productModal');\r\n const name = decodeURIComponent(encodedName);\r\n const cat = decodeURIComponent(encodedCat);\r\n \r\n document.getElementById('modalImage').src = imgUrl;\r\n document.getElementById('modalImage').alt = name;\r\n document.getElementById('modalTitle').textContent = name;\r\n document.getElementById('modalCategory').textContent = cat;\r\n \r\n \/\/ Generate deskripsi elegan\r\n document.getElementById('modalDesc1').textContent = `Balut keindahan formula produk Anda dengan ${name}. Didesain khusus untuk industri kecantikan, kemasan kategori ${cat} ini menyajikan harmoni sempurna antara estetika mewah dan perlindungan optimal, memastikan kualitas produk Anda tetap terjaga sempurna.`;\r\n document.getElementById('modalDesc2').textContent = `Struktur desainnya dapat dikustomisasi penuh sesuai dengan karakter brand Anda. Memberikan sentuhan eksklusif di setiap genggaman konsumen, menciptakan pengalaman unboxing yang tak terlupakan dan meningkatkan daya tarik visual produk Anda di pasaran.`;\r\n \r\n \/\/ Update Add to Cart button in Modal\r\n const btnAdd = document.getElementById('modalAddBtn');\r\n btnAdd.onclick = () => addToCart(encodedName, imgUrl, encodedCat);\r\n\r\n modal.classList.remove('hidden');\r\n document.body.style.overflow = 'hidden';\r\n \r\n document.getElementById('modalBackdrop').classList.add('modal-enter');\r\n document.getElementById('modalContentPanel').classList.add('modal-content-enter');\r\n };\r\n\r\n window.closeModal = function() {\r\n const modal = document.getElementById('productModal');\r\n modal.classList.add('hidden');\r\n if(!document.getElementById('cartDrawer').classList.contains('drawer-open')) {\r\n document.body.style.overflow = ''; \/\/ Jangan kembalikan overflow jika drawer cart terbuka\r\n }\r\n document.getElementById('modalBackdrop').classList.remove('modal-enter');\r\n document.getElementById('modalContentPanel').classList.remove('modal-content-enter');\r\n };\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n renderFilters();\r\n renderProducts(true);\r\n updateCartBadge();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Katalog Produk – WILDES PACKAGING WILDES. Beranda Koleksi Eksklusif Eksplorasi Keindahan Kemasan Pilih berbagai varian kemasan kosmetik yang siap dikustomisasi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-60","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":13,"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/pages\/60\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/media?parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n Katalog Produk - WILDES PACKAGING<\/title>\r\n \r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Quicksand:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Quicksand', 'sans-serif'], \/\/ Font Body (Fun)\r\n serif: ['Playfair Display', 'serif'], \/\/ Font Heading (Beauty\/Elegan)\r\n },\r\n colors: {\r\n brand: {\r\n dark: '#0a2e1b', \r\n primary: '#165c37', \r\n light: '#2a945d', \r\n accent: '#e6c875',\r\n blush: '#fdf8f6' \/\/ Tambahan warna blush pink untuk kesan kosmetik\r\n },\r\n whatsapp: {\r\n default: '#25D366',\r\n hover: '#128C7E'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n body {\r\n font-family: 'Quicksand', sans-serif;\r\n background-color: #fdf8f6; \/* Warna blush pink muda *\/\r\n overflow-x: hidden;\r\n }\r\n \r\n .fade-in { animation: fadeIn 0.8s ease-out forwards; }\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .hide-scrollbar::-webkit-scrollbar { display: none; }\r\n .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\r\n\r\n \/* Animasi Modal & Drawer *\/\r\n .modal-enter { animation: modalFadeIn 0.3s ease-out forwards; }\r\n .modal-content-enter { animation: modalScaleUp 0.3s ease-out forwards; }\r\n \r\n \/* Drawer Keranjang *\/\r\n .drawer-open { transform: translateX(0) !important; }\r\n .overlay-open { opacity: 1 !important; pointer-events: auto !important; }\r\n\r\n \/* Toast Notification *\/\r\n .toast-enter { animation: slideInRight 0.4s ease-out forwards; }\r\n .toast-exit { animation: slideOutRight 0.4s ease-in forwards; }\r\n\r\n @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n @keyframes modalScaleUp { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }\r\n @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }\r\n @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }\r\n <\/style>\r\n\r\n \r\n <script type=\"application\/ld+json\">\r\n {\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@graph\": [\r\n {\r\n \"@type\": \"LocalBusiness\",\r\n \"name\": \"WILDES PACKAGING JAKARTA\",\r\n \"image\": \"https:\/\/creatsigndev.com\/Willy\/wp-content\/uploads\/2026\/10\/WhatsApp-Image-2026-10-19-at-13.03.16.webp\",\r\n \"@id\": \"https:\/\/wildespackaging.com\",\r\n \"url\": \"https:\/\/wildespackaging.com\",\r\n \"telephone\": \"+6289688304659\",\r\n \"email\": \"wildessuksesindonesia@gmail.com\",\r\n \"description\": \"Katalog lengkap supplier custom kemasan kosmetik atau skincare.\",\r\n \"address\": {\r\n \"@type\": \"PostalAddress\",\r\n \"streetAddress\": \"Rukan Boulevard, Jl. Taman Palem Mutiara No.28 Blok i-1\",\r\n \"addressLocality\": \"Cengkareng\",\r\n \"addressRegion\": \"Jakarta Barat\",\r\n \"postalCode\": \"11730\",\r\n \"addressCountry\": \"ID\"\r\n }\r\n }\r\n ]\r\n }\r\n <\/script>\r\n<\/head>\r\n<body class=\"antialiased text-gray-700\">\r\n\r\n <nav class=\"absolute top-0 left-0 w-full z-40 px-6 py-6 lg:px-12 flex justify-between items-center bg-gradient-to-b from-black\/60 to-transparent\">\r\n <div class=\"text-white font-serif font-bold text-2xl tracking-wider\">\r\n WILDES<span class=\"text-brand-accent\">.<\/span>\r\n <\/div>\r\n <div class=\"flex gap-6\">\r\n <a href=\"index.html\" class=\"text-white hover:text-brand-accent transition-colors duration-300 text-sm font-semibold flex items-center gap-2\">\r\n <i class=\"fas fa-home\"><\/i> Beranda\r\n <\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n <section class=\"relative w-full h-[45vh] min-h-[350px] flex items-center justify-center overflow-hidden bg-brand-dark\">\r\n <div class=\"absolute inset-0 bg-cover bg-center bg-no-repeat opacity-40 transform scale-105\" \r\n style=\"background-image: url('https:\/\/creatsigndev.com\/Willy\/wp-content\/uploads\/2026\/10\/WhatsApp-Image-2026-10-19-at-13.07.55.webp');\">\r\n <\/div>\r\n <div class=\"absolute inset-0 bg-gradient-to-t from-brand-blush via-brand-dark\/70 to-transparent\"><\/div>\r\n \r\n <div class=\"relative z-10 text-center px-6 mt-16 fade-in max-w-4xl mx-auto\">\r\n <span class=\"inline-block py-1.5 px-4 rounded-full bg-brand-light\/30 border border-brand-light\/50 text-brand-accent text-xs font-bold tracking-[0.2em] uppercase mb-4 shadow-sm backdrop-blur-sm\">\r\n Koleksi Eksklusif\r\n <\/span>\r\n <h1 class=\"text-4xl md:text-5xl lg:text-6xl font-serif font-bold text-white mb-4 leading-tight\">\r\n Eksplorasi <span class=\"text-brand-accent italic\">Keindahan<\/span> Kemasan\r\n <\/h1>\r\n <p class=\"text-gray-200 max-w-2xl mx-auto text-lg font-medium leading-relaxed\">\r\n Pilih berbagai varian kemasan kosmetik yang siap dikustomisasi untuk mewakili pesona brand Anda.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-12 md:py-16 relative min-h-screen\">\r\n <div class=\"max-w-[1400px] mx-auto px-6 sm:px-12 lg:px-8\">\r\n \r\n \r\n <div class=\"mb-12 sticky top-0 z-30 bg-brand-blush\/90 backdrop-blur-md py-4 -mx-6 px-6 sm:mx-0 sm:px-0\">\r\n <div class=\"flex overflow-x-auto hide-scrollbar gap-3 pb-2\" id=\"categoryFilterContainer\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"emptyState\" class=\"hidden text-center py-20\">\r\n <div class=\"text-6xl text-brand-light\/30 mb-4\"><i class=\"fas fa-box-open\"><\/i><\/div>\r\n <h3 class=\"text-2xl font-serif font-bold text-brand-dark mb-2\">Produk Tidak Ditemukan<\/h3>\r\n <p class=\"text-gray-500 font-medium\">Silakan pilih kategori lainnya.<\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"productGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8\">\r\n \r\n <\/div>\r\n\r\n \r\n <div id=\"loadMoreContainer\" class=\"hidden text-center mt-16 pb-8\">\r\n <button id=\"loadMoreBtn\" class=\"inline-flex items-center gap-3 bg-white text-brand-primary border-2 border-brand-primary px-8 py-3.5 rounded-full font-bold text-sm md:text-base transition-all duration-300 shadow-sm hover:bg-brand-primary hover:text-white hover:shadow-lg hover:-translate-y-1\">\r\n <i class=\"fas fa-spinner\" id=\"loadMoreIcon\"><\/i>\r\n <span>Tampilkan Lebih Banyak<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <button onclick=\"toggleCart()\" class=\"fixed bottom-8 right-8 z-40 bg-brand-primary hover:bg-brand-dark text-white w-16 h-16 rounded-full shadow-[0_10px_25px_rgba(22,92,55,0.4)] hover:shadow-[0_15px_35px_rgba(22,92,55,0.6)] flex items-center justify-center transition-all duration-300 hover:-translate-y-2 focus:outline-none group\">\r\n <i class=\"fas fa-shopping-bag text-2xl group-hover:scale-110 transition-transform\"><\/i>\r\n <span id=\"cartBadge\" class=\"absolute -top-2 -right-2 bg-brand-accent text-brand-dark w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shadow-md border-2 border-white transform scale-0 transition-transform duration-300\">0<\/span>\r\n <\/button>\r\n\r\n \r\n <div id=\"cartOverlay\" onclick=\"toggleCart()\" class=\"fixed inset-0 bg-brand-dark\/40 backdrop-blur-sm z-[50] opacity-0 pointer-events-none transition-opacity duration-300\"><\/div>\r\n\r\n \r\n <div id=\"cartDrawer\" class=\"fixed top-0 right-0 h-full w-full sm:w-[450px] bg-white shadow-2xl z-[60] transform translate-x-full transition-transform duration-500 ease-in-out flex flex-col rounded-l-3xl overflow-hidden\">\r\n \r\n \r\n <div class=\"px-6 py-5 bg-brand-blush border-b border-gray-100 flex justify-between items-center\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 bg-brand-primary\/10 rounded-full flex items-center justify-center text-brand-primary\">\r\n <i class=\"fas fa-box-open text-lg\"><\/i>\r\n <\/div>\r\n <h2 class=\"text-xl font-serif font-bold text-brand-dark\">Pilihan Anda<\/h2>\r\n <\/div>\r\n <button onclick=\"toggleCart()\" class=\"w-10 h-10 bg-white rounded-full flex items-center justify-center text-gray-500 hover:text-red-500 hover:bg-red-50 transition-colors shadow-sm border border-gray-100\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"cartItemsContainer\" class=\"flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50\/50 hide-scrollbar\">\r\n \r\n <div class=\"h-full flex flex-col items-center justify-center text-center opacity-50\">\r\n <i class=\"fas fa-shopping-basket text-5xl mb-4 text-gray-300\"><\/i>\r\n <p class=\"font-medium text-gray-500\">Belum ada produk yang dipilih.<\/p>\r\n <p class=\"text-sm text-gray-400 mt-1\">Eksplorasi katalog kami dan pilih kemasan impian Anda.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-6 bg-white border-t border-gray-100 shadow-[0_-10px_30px_rgba(0,0,0,0.02)]\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <span class=\"text-gray-500 font-medium text-sm\">Total Varian:<\/span>\r\n <span id=\"cartTotalItems\" class=\"font-bold text-brand-dark text-lg\">0 Produk<\/span>\r\n <\/div>\r\n <button onclick=\"checkoutWa()\" class=\"w-full inline-flex items-center justify-center gap-3 bg-whatsapp-default hover:bg-whatsapp-hover text-white px-6 py-4 rounded-2xl font-bold text-lg transition-all duration-300 shadow-[0_8px_20px_rgba(37,211,102,0.3)] hover:-translate-y-1\">\r\n <i class=\"fab fa-whatsapp text-2xl\"><\/i>\r\n <span>Kirim Pesanan via WA<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"toastContainer\" class=\"fixed top-24 right-6 z-[70] flex flex-col gap-3\"><\/div>\r\n\r\n \r\n <div id=\"productModal\" class=\"hidden fixed inset-0 z-[80] overflow-y-auto\">\r\n <div id=\"modalBackdrop\" class=\"fixed inset-0 bg-brand-dark\/60 backdrop-blur-sm transition-opacity\"><\/div>\r\n <div class=\"min-h-screen px-4 text-center flex items-center justify-center relative z-10\">\r\n <div id=\"modalContentPanel\" class=\"bg-white rounded-3xl max-w-xl w-full p-8 text-left shadow-2xl relative my-8 overflow-hidden transform transition-all border border-brand-primary\/10\">\r\n <button onclick=\"closeModal()\" class=\"absolute top-6 right-6 w-10 h-10 bg-gray-50 hover:bg-red-50 text-gray-500 hover:text-red-500 border border-gray-100 rounded-full flex items-center justify-center transition-colors z-10\">\r\n <i class=\"fas fa-times text-lg\"><\/i>\r\n <\/button>\r\n \r\n <div class=\"w-full h-72 bg-brand-blush rounded-2xl overflow-hidden mb-6 cursor-pointer group relative border border-brand-primary\/5\" onclick=\"openLightbox(document.getElementById('modalImage').src, document.getElementById('modalTitle').textContent)\">\r\n <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"Product Image\" class=\"w-full h-full object-cover\">\r\n <div class=\"absolute inset-0 bg-brand-dark\/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white text-sm font-bold gap-2 backdrop-blur-[2px]\">\r\n <i class=\"fas fa-search-plus text-xl\"><\/i> Perbesar Gambar\r\n <\/div>\r\n <\/div>\r\n \r\n <span id=\"modalCategory\" class=\"inline-block bg-brand-accent\/20 text-brand-dark border border-brand-accent\/50 text-xs font-bold px-4 py-1.5 rounded-full mb-3\"><\/span>\r\n <h3 id=\"modalTitle\" class=\"text-2xl font-serif font-bold text-brand-dark mb-4 leading-snug\"><\/h3>\r\n \r\n <div class=\"space-y-4 text-gray-600 font-medium leading-relaxed mb-8\">\r\n <p id=\"modalDesc1\"><\/p>\r\n <p id=\"modalDesc2\"><\/p>\r\n <\/div>\r\n \r\n <div class=\"flex gap-4\">\r\n <button id=\"modalAddBtn\" class=\"flex-1 inline-flex items-center justify-center gap-2 bg-brand-primary hover:bg-brand-dark text-white py-3.5 rounded-xl font-bold transition-all shadow-md hover:shadow-lg hover:-translate-y-1\">\r\n <i class=\"fas fa-cart-plus\"><\/i> Tambahkan ke Pilihan\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"lightboxModal\" class=\"hidden fixed inset-0 z-[100] bg-black\/95 backdrop-blur-md flex items-center justify-center p-4\">\r\n <button onclick=\"closeLightbox()\" class=\"absolute top-6 right-6 w-12 h-12 bg-white\/10 hover:bg-white\/20 text-white rounded-full flex items-center justify-center transition-colors text-xl\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/button>\r\n <div class=\"max-w-5xl max-h-[90vh] flex flex-col items-center\">\r\n <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"Full Image\" class=\"max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl mb-4 border border-white\/10\">\r\n <p id=\"lightboxCaption\" class=\"text-white text-center font-serif font-medium text-xl tracking-wide\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Database Produk (150+ item sesuai data)\r\n const productsData = [\r\n \/\/ TUBE\r\n { cat: \"Tube\", name: \"Roll On Tube 30 ml 50 ml kemasan kosmetik custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2025\/07\/a40711ab-6374-4a03-a813-aacdab4543f2.webp\" },\r\n { cat: \"Tube\", name: \"Kemasan kosmetik tube kosong eyeliner\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2025\/07\/6990ed7a-aa5c-49d7-9a89-7e39331489d5.webp\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Lip Cream 3ml 5ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/25.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom Lip Serum \/ Lip Balm 3ml 5ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/24.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Silicon Brush 100ml 200ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/23.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom karakter 30ml 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/22.png\" },\r\n { cat: \"Tube\", name: \"Tube Airless Pump Custom 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/21.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Aluminium massage 10g 15g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/20.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Rolled Ball 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/19.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom Oval - Screw cap 30ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/18-1.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom Pink Matte - Fliptop Cap 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/17-2.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Screw lids 50ml 100ml 150ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/16-2.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Rolling Massage 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/15-2.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Unique Cap 20ml 30ml 50ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/14-3.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom Rose Gold 50ml 100ml 120ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/13-3.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom Karakter - Acrylic Cap 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/12-4.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Fliptop Cap 60ml-120ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/11-3.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Screw Cap\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/8-4.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Eye Cream long nozzle\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/6-4.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom with Acrylic cap 100ml 120ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/9-1.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Screw Cap 50ml 100ml 150ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/7-1.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Fliptop Cap 30ml 80ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/4-1.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - Eye cream 10ml 15ml 30ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/3-4.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom - with ball massage 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/2-7.png\" },\r\n { cat: \"Tube\", name: \"Tube Custom with Long Nozzle 10ml 15ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/10-1.png\" },\r\n { cat: \"Tube\", name: \"Tube Pump Custom - BB CC Cream 15ml 30ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/1-6.png\" },\r\n \/\/ SKINCARE SETS\r\n { cat: \"Skincare Sets\", name: \"Kemasan skincare custom warna\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/9.png\" },\r\n { cat: \"Skincare Sets\", name: \"Packaging Skincare sets Custom \/ Kemasan skincare unik\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/8.png\" },\r\n { cat: \"Skincare Sets\", name: \"Packaging skincare \/ kemasan skincare custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/7.png\" },\r\n { cat: \"Skincare Sets\", name: \"Packaging Skincare sets \/ Kemasan skincare custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/6-1.png\" },\r\n { cat: \"Skincare Sets\", name: \"Kemasan Skincare sets Frosted \/ Packaging skincare sets\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/5-1.png\" },\r\n { cat: \"Skincare Sets\", name: \"Custom Kemasan Skincare sets Transparan\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/4-1.png\" },\r\n { cat: \"Skincare Sets\", name: \"Packaging Skincare sets custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/3-1.png\" },\r\n { cat: \"Skincare Sets\", name: \"Custom Skincare Bottle sets\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/2-1.png\" },\r\n { cat: \"Skincare Sets\", name: \"Packaging Skincare sets Custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/1-1.png\" },\r\n \/\/ JAR PLASTIC\r\n { cat: \"Jar Plastic\", name: \"Plastic Jar Frosted 5g 10g 20g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/17-1.png\" },\r\n { cat: \"Jar Plastic\", name: \"Plastic Jar list silver 5g 10g 15g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/16-1.png\" },\r\n { cat: \"Jar Plastic\", name: \"Plastic Jar Custom clear matte 20g 30g 50g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/15-1.png\" },\r\n { cat: \"Jar Plastic\", name: \"Plastic Jar Custom Mask 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/14-2.png\" },\r\n { cat: \"Jar Plastic\", name: \"Plastic Jar Custom matte 10g 20g 30g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/13-2.png\" },\r\n { cat: \"Jar Plastic\", name: \"Plastic Jar Custom clear 50g 100g 150g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/12-3.png\" },\r\n \/\/ JAR KACA\r\n { cat: \"Jar Kaca\", name: \"Glass Jar Custom 20g 30g 50g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/6.png\" },\r\n { cat: \"Jar Kaca\", name: \"Glass Jar square 10g 20g 30g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/5.png\" },\r\n \/\/ JAR AKRILIK\r\n { cat: \"Jar Akrilik\", name: \"Acrylic Jar Custom Flower Gold 10g 12g 20g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/6-2.png\" },\r\n { cat: \"Jar Akrilik\", name: \"Acrylic Jar Custom Crown 12g\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/2-8.png\" },\r\n \/\/ LIP CREAM & LIPSTICK\r\n { cat: \"Lip Kosmetik\", name: \"Kemasan Lipstick Custom Gold\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2025\/07\/3.jpg\" },\r\n { cat: \"Lip Kosmetik\", name: \"Botol Lip Cream Custom Bentuk unik\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/15.png\" },\r\n { cat: \"Lip Kosmetik\", name: \"Botol Lip Cream mini Custom unik 2ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/12.png\" },\r\n { cat: \"Lip Kosmetik\", name: \"Botol Lip Cream Custom Gradasi 5ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/5.png\" },\r\n \/\/ MAKEUP BOX \/ CUSHION\r\n { cat: \"Makeup Box\", name: \"Empty case eyeshadow 12 warna\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2025\/07\/e26f0142-8754-447e-bda9-3bc34b6865ab.webp\" },\r\n { cat: \"Makeup Box\", name: \"Tempat bedak tabur custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/11\/6-2.png\" },\r\n { cat: \"Makeup Box\", name: \"Kemasan Cushion Custom Green\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/8-2.png\" },\r\n \/\/ BOX PACKAGING\r\n { cat: \"Box Packaging\", name: \"Custom Box tube Sunscreen BB Glow\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2024\/05\/4.png\" },\r\n { cat: \"Box Packaging\", name: \"Box skincare customized - Soft brown\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2024\/05\/3.png\" },\r\n \/\/ AIRLESS BOTTLE\r\n { cat: \"Airless Bottle\", name: \"New Product Custom Airless Bottle\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2025\/07\/1.jpg\" },\r\n { cat: \"Airless Bottle\", name: \"Airless Bottle Custom Clear 15ml-100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/10.png\" },\r\n { cat: \"Airless Bottle\", name: \"Airless Bottle Purple Matte\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/07\/8.png\" },\r\n \/\/ BOTTLE PUMP & SPRAY\r\n { cat: \"Bottle\", name: \"Glass Bottle Pump Amber gradasi\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/12-5.png\" },\r\n { cat: \"Bottle\", name: \"Glass Bottle Kotak Custom Pump\/Spray\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/10-4.png\" },\r\n { cat: \"Bottle\", name: \"Botol Spray 50ml 100ml kemasan custom\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2025\/07\/9416d356-dba2-4442-b7ff-7c5693777e13.webp\" },\r\n { cat: \"Bottle\", name: \"Botol Spray Customized Colorful\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2024\/01\/16.png\" },\r\n \/\/ PERFUME & SERUM\r\n { cat: \"Perfume\", name: \"Botol Parfum Custom 30ml 50ml 100ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/15-3.png\" },\r\n { cat: \"Perfume\", name: \"Botol Parfum Custom Elegant 120ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/14-4.png\" },\r\n { cat: \"Serum\", name: \"Botol Serum Kotak Custom 10ml 20ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/23-1.png\" },\r\n { cat: \"Serum\", name: \"Botol Serum Dropper Custom 10ml-30ml\", img: \"https:\/\/wildespackaging.com\/wp-content\/uploads\/2023\/08\/18-2.png\" }\r\n ];\r\n\r\n \/\/ System Data\r\n const categories = [\"Semua Kategori\", ...new Set(productsData.map(p => p.cat))];\r\n const waNumber = \"6289688304659\";\r\n let cart = []; \/\/ Array untuk menyimpan keranjang belanja\r\n\r\n \/\/ Elements\r\n const filterContainer = document.getElementById('categoryFilterContainer');\r\n const gridContainer = document.getElementById('productGrid');\r\n const emptyState = document.getElementById('emptyState');\r\n const loadMoreContainer = document.getElementById('loadMoreContainer');\r\n \r\n let activeCategory = \"Semua Kategori\";\r\n let currentVisibleCount = 12;\r\n const itemsPerLoad = 12;\r\n let currentFilteredProducts = [];\r\n\r\n function toggleCart() {\r\n const drawer = document.getElementById('cartDrawer');\r\n const overlay = document.getElementById('cartOverlay');\r\n drawer.classList.toggle('drawer-open');\r\n overlay.classList.toggle('overlay-open');\r\n if(drawer.classList.contains('drawer-open')) renderCartItems();\r\n }\r\n\r\n function showToast(message) {\r\n const toastContainer = document.getElementById('toastContainer');\r\n const toast = document.createElement('div');\r\n toast.className = \"bg-brand-dark text-white px-6 py-4 rounded-xl shadow-2xl flex items-center gap-3 toast-enter border border-brand-accent\/30 backdrop-blur-md\";\r\n toast.innerHTML = `<i class=\"fas fa-check-circle text-brand-accent text-xl\"><\/i> <span class=\"font-bold\">${message}<\/span>`;\r\n \r\n toastContainer.appendChild(toast);\r\n \r\n setTimeout(() => {\r\n toast.classList.replace('toast-enter', 'toast-exit');\r\n setTimeout(() => toast.remove(), 400); \/\/ Wait for exit animation\r\n }, 3000);\r\n }\r\n\r\n window.addToCart = function(encodedName, imgUrl, encodedCat) {\r\n const name = decodeURIComponent(encodedName);\r\n const cat = decodeURIComponent(encodedCat);\r\n \r\n \/\/ Cek apakah item sudah ada di keranjang\r\n const existingItem = cart.find(item => item.name === name);\r\n if(existingItem) {\r\n existingItem.qty += 1;\r\n } else {\r\n cart.push({ name, img: imgUrl, cat, qty: 1 });\r\n }\r\n \r\n updateCartBadge();\r\n showToast(\"Produk berhasil ditambahkan!\");\r\n \r\n \/\/ Jika modal sedang terbuka, tambahkan feedback visual\r\n const modal = document.getElementById('productModal');\r\n if(!modal.classList.contains('hidden')) {\r\n closeModal();\r\n }\r\n };\r\n\r\n function updateCartBadge() {\r\n const badge = document.getElementById('cartBadge');\r\n const totalQty = cart.reduce((sum, item) => sum + item.qty, 0);\r\n badge.textContent = totalQty;\r\n \r\n if(totalQty > 0) {\r\n badge.classList.remove('scale-0');\r\n badge.classList.add('scale-100');\r\n } else {\r\n badge.classList.remove('scale-100');\r\n badge.classList.add('scale-0');\r\n }\r\n }\r\n\r\n window.changeQty = function(index, delta) {\r\n if(cart[index]) {\r\n cart[index].qty += delta;\r\n if(cart[index].qty <= 0) {\r\n cart.splice(index, 1); \/\/ Hapus item jika qty 0\r\n }\r\n updateCartBadge();\r\n renderCartItems();\r\n }\r\n };\r\n\r\n function renderCartItems() {\r\n const container = document.getElementById('cartItemsContainer');\r\n const totalText = document.getElementById('cartTotalItems');\r\n \r\n totalText.textContent = `${cart.length} Varian (${cart.reduce((s, i) => s + i.qty, 0)} Pcs)`;\r\n \r\n if(cart.length === 0) {\r\n container.innerHTML = `\r\n <div class=\"h-full flex flex-col items-center justify-center text-center opacity-50\">\r\n <i class=\"fas fa-shopping-basket text-5xl mb-4 text-gray-300\"><\/i>\r\n <p class=\"font-medium text-gray-500\">Belum ada produk yang dipilih.<\/p>\r\n <p class=\"text-sm text-gray-400 mt-1\">Pilih kemasan impian Anda dari katalog.<\/p>\r\n <\/div>`;\r\n return;\r\n }\r\n\r\n container.innerHTML = '';\r\n cart.forEach((item, index) => {\r\n const div = document.createElement('div');\r\n div.className = \"bg-white p-4 rounded-2xl shadow-sm border border-gray-100 flex gap-4 items-center group relative\";\r\n div.innerHTML = `\r\n <div class=\"w-20 h-20 bg-brand-blush rounded-xl overflow-hidden shrink-0 border border-brand-primary\/5\">\r\n <img decoding=\"async\" src=\"${item.img}\" alt=\"${item.name}\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"flex-1\">\r\n <p class=\"text-xs text-brand-light font-bold mb-1 uppercase tracking-wider\">${item.cat}<\/p>\r\n <h4 class=\"font-bold text-brand-dark text-sm leading-tight mb-3 line-clamp-2\">${item.name}<\/h4>\r\n <div class=\"flex items-center gap-3\">\r\n <button onclick=\"changeQty(${index}, -1)\" class=\"w-7 h-7 rounded-lg bg-gray-100 hover:bg-brand-primary hover:text-white flex items-center justify-center transition-colors\"><i class=\"fas fa-minus text-xs\"><\/i><\/button>\r\n <span class=\"font-bold text-brand-dark w-4 text-center\">${item.qty}<\/span>\r\n <button onclick=\"changeQty(${index}, 1)\" class=\"w-7 h-7 rounded-lg bg-brand-light\/20 text-brand-primary hover:bg-brand-primary hover:text-white flex items-center justify-center transition-colors\"><i class=\"fas fa-plus text-xs\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"changeQty(${index}, -${item.qty})\" class=\"absolute top-4 right-4 text-gray-300 hover:text-red-500 transition-colors\">\r\n <i class=\"fas fa-trash-alt\"><\/i>\r\n <\/button>\r\n `;\r\n container.appendChild(div);\r\n });\r\n }\r\n\r\n window.checkoutWa = function() {\r\n if(cart.length === 0) {\r\n showToast(\"Keranjang Anda masih kosong!\");\r\n return;\r\n }\r\n\r\n let text = \"Halo *WILDES PACKAGING*,\\nSaya tertarik untuk memesan \/ konsultasi produk berikut:\\n\\n\";\r\n \r\n cart.forEach((item, i) => {\r\n text += `${i+1}. *${item.name}*\\n`;\r\n text += ` - Kategori: ${item.cat}\\n`;\r\n text += ` - Jumlah Estimasi: ${item.qty} pcs\\n`;\r\n text += ` - Gambar: ${item.img}\\n\\n`;\r\n });\r\n \r\n text += \"Mohon info detail harganya ya. Terima kasih.\";\r\n \r\n const waUrl = `https:\/\/wa.me\/${waNumber}?text=${encodeURIComponent(text)}`;\r\n window.open(waUrl, '_blank');\r\n };\r\n\r\n function renderFilters() {\r\n if (!filterContainer) return;\r\n filterContainer.innerHTML = '';\r\n categories.forEach(cat => {\r\n const btn = document.createElement('button');\r\n const isActive = cat === activeCategory;\r\n btn.className = `whitespace-nowrap px-6 py-2.5 rounded-full text-sm font-bold transition-all duration-300 border shadow-sm ${isActive ? 'bg-brand-primary text-white border-brand-primary' : 'bg-white text-gray-500 border-gray-200 hover:border-brand-primary hover:text-brand-primary'}`;\r\n btn.textContent = cat;\r\n btn.onclick = () => {\r\n activeCategory = cat;\r\n renderFilters();\r\n renderProducts(true);\r\n };\r\n filterContainer.appendChild(btn);\r\n });\r\n }\r\n\r\n function renderProducts(reset = true) {\r\n if (!gridContainer) return;\r\n if (reset) {\r\n gridContainer.innerHTML = '';\r\n currentVisibleCount = itemsPerLoad;\r\n currentFilteredProducts = activeCategory === \"Semua Kategori\" \r\n ? productsData \r\n : productsData.filter(p => p.cat === activeCategory);\r\n }\r\n \r\n const startIndex = reset ? 0 : currentVisibleCount - itemsPerLoad;\r\n const endIndex = currentVisibleCount;\r\n const productsToRender = currentFilteredProducts.slice(startIndex, endIndex);\r\n\r\n if (currentFilteredProducts.length === 0) {\r\n gridContainer.classList.add('hidden');\r\n if (emptyState) emptyState.classList.remove('hidden');\r\n if (loadMoreContainer) loadMoreContainer.classList.add('hidden');\r\n } else {\r\n gridContainer.classList.remove('hidden');\r\n if (emptyState) emptyState.classList.add('hidden');\r\n\r\n productsToRender.forEach((product, index) => {\r\n const delay = (index % itemsPerLoad) * 50; \r\n const card = document.createElement('div');\r\n card.className = \"bg-white rounded-3xl overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.04)] border border-brand-primary\/5 hover:shadow-[0_20px_40px_rgba(22,92,55,0.1)] transition-all duration-300 hover:-translate-y-2 flex flex-col opacity-0 fade-in\";\r\n card.style.animationDelay = `${delay}ms`;\r\n\r\n card.innerHTML = `\r\n <div class=\"relative w-full pt-[100%] bg-brand-blush overflow-hidden group cursor-pointer\" onclick=\"openLightbox('${product.img}', '${product.name.replace(\/'\/g, \"\\\\'\")}')\">\r\n <img decoding=\"async\" src=\"${product.img}\" alt=\"${product.name}\" class=\"absolute inset-0 w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700\" loading=\"lazy\">\r\n <div class=\"absolute top-4 left-4 bg-white\/90 backdrop-blur-sm text-brand-dark text-xs font-bold px-3 py-1.5 rounded-full shadow-sm border border-brand-primary\/10\">\r\n ${product.cat}\r\n <\/div>\r\n <div class=\"absolute inset-0 bg-brand-dark\/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white text-sm font-bold gap-2 backdrop-blur-[2px]\">\r\n <i class=\"fas fa-search-plus text-xl\"><\/i> Full Image\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 flex flex-col flex-grow\">\r\n <h3 class=\"text-[1.1rem] font-bold text-gray-800 mb-4 line-clamp-2 leading-snug flex-grow\" title=\"${product.name}\">\r\n ${product.name}\r\n <\/h3>\r\n <div class=\"flex flex-col gap-3 mt-auto\">\r\n <button onclick=\"addToCart('${encodeURIComponent(product.name)}', '${product.img}', '${encodeURIComponent(product.cat)}')\" class=\"w-full inline-flex items-center justify-center gap-2 bg-brand-primary hover:bg-brand-dark text-white px-4 py-3 rounded-xl font-bold text-sm transition-all shadow-[0_4px_15px_rgba(22,92,55,0.2)] hover:shadow-[0_8px_20px_rgba(22,92,55,0.4)] hover:-translate-y-0.5\">\r\n <i class=\"fas fa-cart-plus text-lg\"><\/i> Pilih Produk\r\n <\/button>\r\n <button onclick=\"openModal('${encodeURIComponent(product.name)}', '${encodeURIComponent(product.cat)}', '${product.img}')\" class=\"w-full inline-flex items-center justify-center gap-2 bg-brand-blush hover:bg-brand-light\/20 text-brand-primary border border-brand-primary\/20 px-4 py-3 rounded-xl font-bold text-sm transition-colors\">\r\n <i class=\"fas fa-info-circle\"><\/i> Info Detail\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n gridContainer.appendChild(card);\r\n });\r\n\r\n if (loadMoreContainer) {\r\n if (currentVisibleCount < currentFilteredProducts.length) {\r\n loadMoreContainer.classList.remove('hidden');\r\n } else {\r\n loadMoreContainer.classList.add('hidden');\r\n }\r\n }\r\n }\r\n }\r\n\r\n \/\/ Event Listener untuk Load More\r\n document.getElementById('loadMoreBtn').addEventListener('click', () => {\r\n const loadMoreIcon = document.getElementById('loadMoreIcon');\r\n loadMoreIcon.classList.remove('fa-spinner');\r\n loadMoreIcon.classList.add('fa-circle-notch', 'fa-spin');\r\n \r\n setTimeout(() => {\r\n currentVisibleCount += itemsPerLoad;\r\n renderProducts(false);\r\n loadMoreIcon.classList.remove('fa-circle-notch', 'fa-spin');\r\n loadMoreIcon.classList.add('fa-spinner');\r\n }, 400);\r\n });\r\n\r\n window.openLightbox = function(imgUrl, captionText) {\r\n const modal = document.getElementById('lightboxModal');\r\n document.getElementById('lightboxImg').src = imgUrl;\r\n document.getElementById('lightboxCaption').textContent = captionText;\r\n modal.classList.remove('hidden');\r\n document.body.style.overflow = 'hidden';\r\n };\r\n\r\n window.closeLightbox = function() {\r\n document.getElementById('lightboxModal').classList.add('hidden');\r\n document.body.style.overflow = '';\r\n };\r\n\r\n window.openModal = function(encodedName, encodedCat, imgUrl) {\r\n const modal = document.getElementById('productModal');\r\n const name = decodeURIComponent(encodedName);\r\n const cat = decodeURIComponent(encodedCat);\r\n \r\n document.getElementById('modalImage').src = imgUrl;\r\n document.getElementById('modalImage').alt = name;\r\n document.getElementById('modalTitle').textContent = name;\r\n document.getElementById('modalCategory').textContent = cat;\r\n \r\n \/\/ Generate deskripsi elegan\r\n document.getElementById('modalDesc1').textContent = `Balut keindahan formula produk Anda dengan ${name}. Didesain khusus untuk industri kecantikan, kemasan kategori ${cat} ini menyajikan harmoni sempurna antara estetika mewah dan perlindungan optimal, memastikan kualitas produk Anda tetap terjaga sempurna.`;\r\n document.getElementById('modalDesc2').textContent = `Struktur desainnya dapat dikustomisasi penuh sesuai dengan karakter brand Anda. Memberikan sentuhan eksklusif di setiap genggaman konsumen, menciptakan pengalaman unboxing yang tak terlupakan dan meningkatkan daya tarik visual produk Anda di pasaran.`;\r\n \r\n \/\/ Update Add to Cart button in Modal\r\n const btnAdd = document.getElementById('modalAddBtn');\r\n btnAdd.onclick = () => addToCart(encodedName, imgUrl, encodedCat);\r\n\r\n modal.classList.remove('hidden');\r\n document.body.style.overflow = 'hidden';\r\n \r\n document.getElementById('modalBackdrop').classList.add('modal-enter');\r\n document.getElementById('modalContentPanel').classList.add('modal-content-enter');\r\n };\r\n\r\n window.closeModal = function() {\r\n const modal = document.getElementById('productModal');\r\n modal.classList.add('hidden');\r\n if(!document.getElementById('cartDrawer').classList.contains('drawer-open')) {\r\n document.body.style.overflow = ''; \/\/ Jangan kembalikan overflow jika drawer cart terbuka\r\n }\r\n document.getElementById('modalBackdrop').classList.remove('modal-enter');\r\n document.getElementById('modalContentPanel').classList.remove('modal-content-enter');\r\n };\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n renderFilters();\r\n renderProducts(true);\r\n updateCartBadge();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Katalog Produk – WILDES PACKAGING WILDES. Beranda Koleksi Eksklusif Eksplorasi Keindahan Kemasan Pilih berbagai varian kemasan kosmetik yang siap dikustomisasi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-60","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":13,"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/pages\/60\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/creatsigndev.com\/Willy\/wp-json\/wp\/v2\/media?parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}