{"id":1304,"date":"2026-06-04T03:17:38","date_gmt":"2026-06-04T03:17:38","guid":{"rendered":"https:\/\/rumahprogramintegra.com\/?page_id=1304"},"modified":"2026-06-04T03:19:57","modified_gmt":"2026-06-04T03:19:57","slug":"elementor-1304","status":"publish","type":"page","link":"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/","title":{"rendered":"Elementor #1304"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n STITCH & CO \u2014 Konveksi Premium<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --bg: #f5f0e8;\r\n --fg: #1a1a1a;\r\n --muted: #8a8275;\r\n --accent: #c8963e;\r\n --accent-hover: #b5832f;\r\n --card: #ffffff;\r\n --border: #e0d8cc;\r\n --dark: #0f1f1a;\r\n --dark-mid: #1a3c34;\r\n --green: #2d6a4f;\r\n }\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n html { scroll-behavior: smooth; }\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--bg);\r\n color: var(--fg);\r\n overflow-x: hidden;\r\n }\r\n h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }\r\n\r\n \/* Scrollbar *\/\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: var(--bg); }\r\n ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }\r\n\r\n \/* Header *\/\r\n .header-scrolled {\r\n background: rgba(15, 31, 26, 0.97) !important;\r\n backdrop-filter: blur(12px);\r\n box-shadow: 0 2px 20px rgba(0,0,0,0.3);\r\n }\r\n\r\n \/* Hero *\/\r\n #heroCanvas {\r\n position: absolute; inset: 0;\r\n width: 100%; height: 100%;\r\n pointer-events: none;\r\n }\r\n .hero-pattern {\r\n position: absolute; inset: 0;\r\n background-image: \r\n radial-gradient(circle at 20% 50%, rgba(200,150,62,0.08) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 20%, rgba(45,106,79,0.12) 0%, transparent 50%),\r\n repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(200,150,62,0.03) 40px, rgba(200,150,62,0.03) 41px);\r\n }\r\n\r\n \/* Animasi masuk *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: opacity 0.7s ease, transform 0.7s ease;\r\n }\r\n .reveal.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* Kartu produk *\/\r\n .product-card {\r\n background: var(--card);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n transition: transform 0.35s ease, box-shadow 0.35s ease;\r\n }\r\n .product-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 20px 50px rgba(0,0,0,0.1);\r\n }\r\n .product-card .img-wrap {\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n .product-card .img-wrap img {\r\n transition: transform 0.5s ease;\r\n width: 100%; height: 260px; object-fit: cover;\r\n }\r\n .product-card:hover .img-wrap img {\r\n transform: scale(1.08);\r\n }\r\n .product-card .badge {\r\n position: absolute; top: 12px; left: 12px;\r\n background: var(--accent);\r\n color: #fff;\r\n font-size: 11px; font-weight: 600;\r\n padding: 4px 10px;\r\n border-radius: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* Ukuran pill *\/\r\n .size-pill {\r\n display: inline-flex; align-items: center; justify-content: center;\r\n width: 38px; height: 32px;\r\n border: 1.5px solid var(--border);\r\n border-radius: 8px;\r\n font-size: 12px; font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n background: transparent;\r\n color: var(--fg);\r\n }\r\n .size-pill:hover { border-color: var(--accent); color: var(--accent); }\r\n .size-pill.active {\r\n background: var(--accent);\r\n border-color: var(--accent);\r\n color: #fff;\r\n }\r\n\r\n \/* Quantity stepper *\/\r\n .qty-stepper {\r\n display: inline-flex; align-items: center;\r\n border: 1.5px solid var(--border);\r\n border-radius: 10px;\r\n overflow: hidden;\r\n }\r\n .qty-stepper button {\r\n width: 34px; height: 34px;\r\n border: none; background: transparent;\r\n cursor: pointer; font-size: 16px; font-weight: 600;\r\n color: var(--fg);\r\n transition: background 0.2s;\r\n }\r\n .qty-stepper button:hover { background: var(--bg); }\r\n .qty-stepper input {\r\n width: 50px; height: 34px;\r\n border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border);\r\n text-align: center; font-size: 14px; font-weight: 600;\r\n font-family: 'DM Sans', sans-serif;\r\n background: transparent;\r\n color: var(--fg);\r\n -moz-appearance: textfield;\r\n }\r\n .qty-stepper input::-webkit-inner-spin-button,\r\n .qty-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }\r\n\r\n \/* Tombol utama *\/\r\n .btn-primary {\r\n background: var(--accent);\r\n color: #fff;\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 10px;\r\n font-weight: 600;\r\n font-family: 'DM Sans', sans-serif;\r\n font-size: 14px;\r\n cursor: pointer;\r\n transition: all 0.25s ease;\r\n display: inline-flex; align-items: center; gap: 8px;\r\n }\r\n .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }\r\n .btn-primary:active { transform: scale(0.97); }\r\n .btn-primary.added {\r\n background: var(--green) !important;\r\n pointer-events: none;\r\n }\r\n\r\n \/* Filter tab *\/\r\n .filter-tab {\r\n padding: 8px 20px;\r\n border-radius: 30px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n border: 1.5px solid var(--border);\r\n background: transparent;\r\n color: var(--muted);\r\n transition: all 0.25s ease;\r\n font-family: 'DM Sans', sans-serif;\r\n }\r\n .filter-tab:hover { border-color: var(--accent); color: var(--accent); }\r\n .filter-tab.active {\r\n background: var(--dark);\r\n border-color: var(--dark);\r\n color: #fff;\r\n }\r\n\r\n \/* Cart sidebar *\/\r\n .cart-overlay {\r\n position: fixed; inset: 0;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 998;\r\n opacity: 0; pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n }\r\n .cart-overlay.open { opacity: 1; pointer-events: all; }\r\n .cart-sidebar {\r\n position: fixed; top: 0; right: 0; bottom: 0;\r\n width: 420px; max-width: 100vw;\r\n background: var(--card);\r\n z-index: 999;\r\n transform: translateX(100%);\r\n transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);\r\n display: flex; flex-direction: column;\r\n box-shadow: -10px 0 40px rgba(0,0,0,0.15);\r\n }\r\n .cart-sidebar.open { transform: translateX(0); }\r\n\r\n \/* Modal *\/\r\n .modal-overlay {\r\n position: fixed; inset: 0;\r\n background: rgba(0,0,0,0.6);\r\n z-index: 1000;\r\n display: flex; align-items: center; justify-content: center;\r\n opacity: 0; pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n padding: 20px;\r\n }\r\n .modal-overlay.open { opacity: 1; pointer-events: all; }\r\n .modal-box {\r\n background: var(--card);\r\n border-radius: 20px;\r\n max-width: 600px; width: 100%;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n transform: scale(0.9) translateY(30px);\r\n transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);\r\n padding: 36px;\r\n }\r\n .modal-overlay.open .modal-box {\r\n transform: scale(1) translateY(0);\r\n }\r\n\r\n \/* Form *\/\r\n .form-input {\r\n width: 100%;\r\n padding: 12px 16px;\r\n border: 1.5px solid var(--border);\r\n border-radius: 10px;\r\n font-size: 14px;\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--bg);\r\n color: var(--fg);\r\n transition: border-color 0.2s;\r\n outline: none;\r\n }\r\n .form-input:focus { border-color: var(--accent); }\r\n .form-input.error { border-color: #d44; }\r\n .form-label {\r\n display: block;\r\n font-size: 13px; font-weight: 600;\r\n margin-bottom: 6px;\r\n color: var(--fg);\r\n }\r\n\r\n \/* Payment radio *\/\r\n .pay-option {\r\n display: flex; align-items: center; gap: 12px;\r\n padding: 12px 16px;\r\n border: 1.5px solid var(--border);\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n .pay-option:hover { border-color: var(--accent); }\r\n .pay-option.selected { border-color: var(--accent); background: rgba(200,150,62,0.06); }\r\n .pay-option input[type=\"radio\"] { accent-color: var(--accent); }\r\n\r\n \/* Toast *\/\r\n .toast-container {\r\n position: fixed; top: 90px; right: 20px;\r\n z-index: 9999;\r\n display: flex; flex-direction: column; gap: 10px;\r\n }\r\n .toast {\r\n padding: 14px 20px;\r\n border-radius: 12px;\r\n font-size: 14px; font-weight: 500;\r\n color: #fff;\r\n box-shadow: 0 8px 30px rgba(0,0,0,0.15);\r\n animation: toastIn 0.4s ease, toastOut 0.4s ease 2.6s forwards;\r\n display: flex; align-items: center; gap: 10px;\r\n max-width: 360px;\r\n }\r\n .toast.success { background: var(--green); }\r\n .toast.error { background: #c0392b; }\r\n .toast.info { background: var(--dark-mid); }\r\n\r\n @keyframes toastIn {\r\n from { opacity: 0; transform: translateX(60px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n @keyframes toastOut {\r\n from { opacity: 1; transform: translateX(0); }\r\n to { opacity: 0; transform: translateX(60px); }\r\n }\r\n\r\n \/* Testimonial card *\/\r\n .testi-card {\r\n background: var(--card);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: 28px;\r\n position: relative;\r\n transition: transform 0.3s;\r\n }\r\n .testi-card:hover { transform: translateY(-4px); }\r\n .testi-card::before {\r\n content: '\\201C';\r\n font-family: 'Playfair Display', serif;\r\n font-size: 80px;\r\n color: var(--accent);\r\n opacity: 0.15;\r\n position: absolute;\r\n top: -10px; left: 16px;\r\n line-height: 1;\r\n }\r\n\r\n \/* Stat counter *\/\r\n .stat-item {\r\n text-align: center;\r\n padding: 24px 16px;\r\n }\r\n .stat-num {\r\n font-family: 'Playfair Display', serif;\r\n font-size: 42px;\r\n font-weight: 900;\r\n color: var(--accent);\r\n line-height: 1;\r\n }\r\n\r\n \/* Kategori card *\/\r\n .cat-card {\r\n border-radius: 16px;\r\n overflow: hidden;\r\n position: relative;\r\n height: 180px;\r\n cursor: pointer;\r\n transition: transform 0.3s;\r\n }\r\n .cat-card:hover { transform: scale(1.03); }\r\n .cat-card img {\r\n width: 100%; height: 100%; object-fit: cover;\r\n transition: transform 0.5s;\r\n }\r\n .cat-card:hover img { transform: scale(1.1); }\r\n .cat-card .cat-overlay {\r\n position: absolute; inset: 0;\r\n background: linear-gradient(to top, rgba(15,31,26,0.85) 0%, rgba(15,31,26,0.2) 100%);\r\n display: flex; align-items: flex-end;\r\n padding: 20px;\r\n }\r\n\r\n \/* Cart item *\/\r\n .cart-item {\r\n display: flex; gap: 14px;\r\n padding: 16px 0;\r\n border-bottom: 1px solid var(--border);\r\n animation: fadeInUp 0.3s ease;\r\n }\r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* Back to top *\/\r\n #backToTop {\r\n position: fixed; bottom: 30px; right: 30px;\r\n width: 48px; height: 48px;\r\n border-radius: 50%;\r\n background: var(--dark);\r\n color: var(--accent);\r\n border: 2px solid var(--accent);\r\n display: flex; align-items: center; justify-content: center;\r\n cursor: pointer;\r\n z-index: 900;\r\n opacity: 0; pointer-events: none;\r\n transition: all 0.3s ease;\r\n font-size: 18px;\r\n }\r\n #backToTop.visible { opacity: 1; pointer-events: all; }\r\n #backToTop:hover { background: var(--accent); color: #fff; }\r\n\r\n \/* Floating thread decoration *\/\r\n .thread-deco {\r\n position: absolute;\r\n width: 120px; height: 120px;\r\n border: 2px solid rgba(200,150,62,0.1);\r\n border-radius: 50%;\r\n animation: floatSpin 20s linear infinite;\r\n }\r\n @keyframes floatSpin {\r\n 0% { transform: rotate(0deg) translateY(0); }\r\n 50% { transform: rotate(180deg) translateY(-15px); }\r\n 100% { transform: rotate(360deg) translateY(0); }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .reveal { transition: none; opacity: 1; transform: none; }\r\n .product-card, .testi-card, .cat-card { transition: none; }\r\n .thread-deco { animation: none; }\r\n #heroCanvas { display: none; }\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .stat-num { font-size: 28px; }\r\n .modal-box { padding: 24px; }\r\n .product-card .img-wrap img { height: 200px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Toast Container -->\r\n<div class=\"toast-container\" id=\"toastContainer\"><\/div>\r\n\r\n<!-- Header -->\r\n<header id=\"mainHeader\" class=\"fixed top-0 left-0 right-0 z-50 transition-all duration-300\" style=\"background: transparent;\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between\">\r\n <a href=\"#\" class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 rounded-lg flex items-center justify-center\" style=\"background: var(--accent);\">\r\n <i class=\"fa-solid fa-scissors text-white text-lg\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-white font-bold text-lg tracking-wide\" style=\"font-family: 'Playfair Display', serif;\">STITCH & CO<\/span>\r\n <span class=\"block text-xs text-white\/50 -mt-1\">Konveksi Premium<\/span>\r\n <\/div>\r\n <\/a>\r\n <nav class=\"hidden md:flex items-center gap-8\">\r\n <a href=\"#products\" class=\"text-white\/70 hover:text-white text-sm font-medium transition-colors\">Produk<\/a>\r\n <a href=\"#categories\" class=\"text-white\/70 hover:text-white text-sm font-medium transition-colors\">Kategori<\/a>\r\n <a href=\"#whyUs\" class=\"text-white\/70 hover:text-white text-sm font-medium transition-colors\">Keunggulan<\/a>\r\n <a href=\"#testimonials\" class=\"text-white\/70 hover:text-white text-sm font-medium transition-colors\">Testimoni<\/a>\r\n <\/nav>\r\n <div class=\"flex items-center gap-4\">\r\n <button onclick=\"openCart()\" class=\"relative text-white hover:text-[var(--accent)] transition-colors\" aria-label=\"Buka keranjang\">\r\n <i class=\"fa-solid fa-bag-shopping text-xl\"><\/i>\r\n <span id=\"cartBadge\" class=\"absolute -top-2 -right-2 w-5 h-5 rounded-full text-white text-[11px] font-bold flex items-center justify-center hidden\" style=\"background: var(--accent);\">0<\/span>\r\n <\/button>\r\n <button onclick=\"toggleMobileMenu()\" class=\"md:hidden text-white text-xl\" aria-label=\"Menu\">\r\n <i class=\"fa-solid fa-bars\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <!-- Mobile menu -->\r\n <div id=\"mobileMenu\" class=\"md:hidden hidden px-4 pb-4\">\r\n <div class=\"rounded-xl p-4 flex flex-col gap-3\" style=\"background: rgba(15,31,26,0.95); backdrop-filter: blur(12px);\">\r\n <a href=\"#products\" onclick=\"closeMobileMenu()\" class=\"text-white\/80 hover:text-white text-sm font-medium py-2\">Produk<\/a>\r\n <a href=\"#categories\" onclick=\"closeMobileMenu()\" class=\"text-white\/80 hover:text-white text-sm font-medium py-2\">Kategori<\/a>\r\n <a href=\"#whyUs\" onclick=\"closeMobileMenu()\" class=\"text-white\/80 hover:text-white text-sm font-medium py-2\">Keunggulan<\/a>\r\n <a href=\"#testimonials\" onclick=\"closeMobileMenu()\" class=\"text-white\/80 hover:text-white text-sm font-medium py-2\">Testimoni<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/header>\r\n\r\n<!-- Hero Section -->\r\n<section id=\"hero\" class=\"relative min-h-screen flex items-center overflow-hidden\" style=\"background: var(--dark);\">\r\n <canvas id=\"heroCanvas\"><\/canvas>\r\n <div class=\"hero-pattern\"><\/div>\r\n <div class=\"thread-deco\" style=\"top: 15%; right: 10%;\"><\/div>\r\n <div class=\"thread-deco\" style=\"bottom: 20%; left: 5%; width: 80px; height: 80px; animation-direction: reverse;\"><\/div>\r\n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 py-32 w-full\">\r\n <div class=\"max-w-2xl\">\r\n <span class=\"inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-widest uppercase mb-6\" style=\"background: rgba(200,150,62,0.15); color: var(--accent); border: 1px solid rgba(200,150,62,0.3);\">\r\n Konveksi Terpercaya Sejak 2016\r\n <\/span>\r\n <h1 class=\"text-white text-4xl sm:text-5xl lg:text-6xl font-black leading-tight mb-6\">\r\n Jahitan Berkualitas,<br>\r\n <span style=\"color: var(--accent);\">Harga Bersahabat<\/span>\r\n <\/h1>\r\n <p class=\"text-white\/60 text-lg sm:text-xl leading-relaxed mb-10 max-w-lg\">\r\n Produksi kaos, kemeja, jaket, seragam, dan berbagai kebutuhan garmen Anda. Minim order 12 pcs, pengiriman ke seluruh Indonesia.\r\n <\/p>\r\n <div class=\"flex flex-wrap gap-4\">\r\n <a href=\"#products\" class=\"btn-primary text-base px-8 py-3.5\">\r\n <i class=\"fa-solid fa-shirt\"><\/i> Lihat Katalog\r\n <\/a>\r\n <a href=\"#cta\" class=\"inline-flex items-center gap-2 px-8 py-3.5 rounded-xl text-base font-semibold border-2 border-white\/20 text-white hover:border-white\/40 hover:bg-white\/5 transition-all\">\r\n <i class=\"fa-brands fa-whatsapp text-lg\"><\/i> Pesan Custom\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Wave divider -->\r\n <div class=\"absolute bottom-0 left-0 right-0\">\r\n <svg viewBox=\"0 0 1440 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M0 50L48 45C96 40 192 30 288 33C384 36 480 52 576 58C672 64 768 60 864 52C960 44 1056 32 1152 30C1248 28 1344 36 1392 40L1440 44V100H1392C1344 100 1248 100 1152 100C1056 100 960 100 864 100C768 100 672 100 576 100C480 100 384 100 288 100C192 100 96 100 48 100H0V50Z\" fill=\"var(--bg)\"\/>\r\n <\/svg>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Stats -->\r\n<section class=\"py-4\" style=\"background: var(--bg);\">\r\n <div class=\"max-w-5xl mx-auto px-4 grid grid-cols-2 md:grid-cols-4\">\r\n <div class=\"stat-item reveal\">\r\n <div class=\"stat-num\" data-target=\"5200\">0<\/div>\r\n <div class=\"text-sm mt-2\" style=\"color: var(--muted);\">Pesanan Selesai<\/div>\r\n <\/div>\r\n <div class=\"stat-item reveal\">\r\n <div class=\"stat-num\" data-target=\"240\">0<\/div>\r\n <div class=\"text-sm mt-2\" style=\"color: var(--muted);\">Klien Bisnis<\/div>\r\n <\/div>\r\n <div class=\"stat-item reveal\">\r\n <div class=\"stat-num\" data-target=\"8\">0<\/div>\r\n <div class=\"text-sm mt-2\" style=\"color: var(--muted);\">Tahun Pengalaman<\/div>\r\n <\/div>\r\n <div class=\"stat-item reveal\">\r\n <div class=\"stat-num\" data-target=\"55\">0<\/div>\r\n <div class=\"text-sm mt-2\" style=\"color: var(--muted);\">Tenaga Jahit<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Kategori -->\r\n<section id=\"categories\" class=\"py-20 px-4 sm:px-6\" style=\"background: var(--bg);\">\r\n <div class=\"max-w-7xl mx-auto\">\r\n <div class=\"text-center mb-12 reveal\">\r\n <span class=\"text-xs font-semibold tracking-widest uppercase\" style=\"color: var(--accent);\">Kategori<\/span>\r\n <h2 class=\"text-3xl sm:text-4xl font-bold mt-2\" style=\"color: var(--fg);\">Jenis Produk Kami<\/h2>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 reveal\">\r\n <div class=\"cat-card\" onclick=\"filterProducts('kaos')\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/catkaos\/400\/300\" alt=\"Kaos\">\r\n <div class=\"cat-overlay\"><span class=\"text-white font-semibold text-sm\">Kaos<\/span><\/div>\r\n <\/div>\r\n <div class=\"cat-card\" onclick=\"filterProducts('kemeja')\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/catkemeja\/400\/300\" alt=\"Kemeja\">\r\n <div class=\"cat-overlay\"><span class=\"text-white font-semibold text-sm\">Kemeja<\/span><\/div>\r\n <\/div>\r\n <div class=\"cat-card\" onclick=\"filterProducts('jaket')\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/catjaket\/400\/300\" alt=\"Jaket\">\r\n <div class=\"cat-overlay\"><span class=\"text-white font-semibold text-sm\">Jaket<\/span><\/div>\r\n <\/div>\r\n <div class=\"cat-card\" onclick=\"filterProducts('seragam')\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/catseragam\/400\/300\" alt=\"Seragam\">\r\n <div class=\"cat-overlay\"><span class=\"text-white font-semibold text-sm\">Seragam<\/span><\/div>\r\n <\/div>\r\n <div class=\"cat-card\" onclick=\"filterProducts('celana')\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/catcelana\/400\/300\" alt=\"Celana\">\r\n <div class=\"cat-overlay\"><span class=\"text-white font-semibold text-sm\">Celana<\/span><\/div>\r\n <\/div>\r\n <div class=\"cat-card\" onclick=\"filterProducts('lainnya')\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/catlain\/400\/300\" alt=\"Lainnya\">\r\n <div class=\"cat-overlay\"><span class=\"text-white font-semibold text-sm\">Lainnya<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Produk -->\r\n<section id=\"products\" class=\"py-20 px-4 sm:px-6\" style=\"background: linear-gradient(180deg, var(--bg) 0%, #ede7db 100%);\">\r\n <div class=\"max-w-7xl mx-auto\">\r\n <div class=\"text-center mb-8 reveal\">\r\n <span class=\"text-xs font-semibold tracking-widest uppercase\" style=\"color: var(--accent);\">Katalog<\/span>\r\n <h2 class=\"text-3xl sm:text-4xl font-bold mt-2\" style=\"color: var(--fg);\">Produk Unggulan<\/h2>\r\n <p class=\"mt-3 max-w-lg mx-auto\" style=\"color: var(--muted);\">Harga per pcs, minimal order 12 pcs per item. Bisa custom sablon, bordir, dan label.<\/p>\r\n <\/div>\r\n <!-- Filter -->\r\n <div class=\"flex flex-wrap justify-center gap-2 mb-10 reveal\" id=\"filterTabs\">\r\n <button class=\"filter-tab active\" onclick=\"filterProducts('semua')\">Semua<\/button>\r\n <button class=\"filter-tab\" onclick=\"filterProducts('kaos')\">Kaos<\/button>\r\n <button class=\"filter-tab\" onclick=\"filterProducts('kemeja')\">Kemeja<\/button>\r\n <button class=\"filter-tab\" onclick=\"filterProducts('jaket')\">Jaket<\/button>\r\n <button class=\"filter-tab\" onclick=\"filterProducts('seragam')\">Seragam<\/button>\r\n <button class=\"filter-tab\" onclick=\"filterProducts('celana')\">Celana<\/button>\r\n <button class=\"filter-tab\" onclick=\"filterProducts('lainnya')\">Lainnya<\/button>\r\n <\/div>\r\n <!-- Grid produk -->\r\n <div id=\"productGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Keunggulan -->\r\n<section id=\"whyUs\" class=\"py-20 px-4 sm:px-6\" style=\"background: var(--dark);\">\r\n <div class=\"max-w-7xl mx-auto\">\r\n <div class=\"text-center mb-14 reveal\">\r\n <span class=\"text-xs font-semibold tracking-widest uppercase\" style=\"color: var(--accent);\">Mengapa Kami<\/span>\r\n <h2 class=\"text-3xl sm:text-4xl font-bold mt-2 text-white\">Keunggulan Stitch & Co<\/h2>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n <div class=\"reveal p-6 rounded-2xl border border-white\/10 hover:border-[var(--accent)]\/40 transition-colors\" style=\"background: rgba(255,255,255,0.03);\">\r\n <div class=\"w-14 h-14 rounded-xl flex items-center justify-center mb-5\" style=\"background: rgba(200,150,62,0.12);\">\r\n <i class=\"fa-solid fa-gem text-xl\" style=\"color: var(--accent);\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg mb-2\">Bahan Premium<\/h3>\r\n <p class=\"text-white\/50 text-sm leading-relaxed\">Hanya menggunakan kain pilihan seperti cotton combed 30s, lacoste CVC, dan fleece import.<\/p>\r\n <\/div>\r\n <div class=\"reveal p-6 rounded-2xl border border-white\/10 hover:border-[var(--accent)]\/40 transition-colors\" style=\"background: rgba(255,255,255,0.03);\">\r\n <div class=\"w-14 h-14 rounded-xl flex items-center justify-center mb-5\" style=\"background: rgba(200,150,62,0.12);\">\r\n <i class=\"fa-solid fa-ruler-combined text-xl\" style=\"color: var(--accent);\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg mb-2\">Jahitan Rapi<\/h3>\r\n <p class=\"text-white\/50 text-sm leading-relaxed\">Dikerjakan oleh 55+ penjahit berpengalaman dengan standar jahit rantai dan overdeck presisi.<\/p>\r\n <\/div>\r\n <div class=\"reveal p-6 rounded-2xl border border-white\/10 hover:border-[var(--accent)]\/40 transition-colors\" style=\"background: rgba(255,255,255,0.03);\">\r\n <div class=\"w-14 h-14 rounded-xl flex items-center justify-center mb-5\" style=\"background: rgba(200,150,62,0.12);\">\r\n <i class=\"fa-solid fa-truck-fast text-xl\" style=\"color: var(--accent);\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg mb-2\">Tepat Waktu<\/h3>\r\n <p class=\"text-white\/50 text-sm leading-relaxed\">Produksi 7-14 hari kerja sesuai quantity. Garansi on-time atau diskon 10%.<\/p>\r\n <\/div>\r\n <div class=\"reveal p-6 rounded-2xl border border-white\/10 hover:border-[var(--accent)]\/40 transition-colors\" style=\"background: rgba(255,255,255,0.03);\">\r\n <div class=\"w-14 h-14 rounded-xl flex items-center justify-center mb-5\" style=\"background: rgba(200,150,62,0.12);\">\r\n <i class=\"fa-solid fa-tags text-xl\" style=\"color: var(--accent);\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg mb-2\">Harga Bersaing<\/h3>\r\n <p class=\"text-white\/50 text-sm leading-relaxed\">Langsung dari konveksi tanpa perantara. Diskon khusus untuk order di atas 100 pcs.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Testimoni -->\r\n<section id=\"testimonials\" class=\"py-20 px-4 sm:px-6\" style=\"background: var(--bg);\">\r\n <div class=\"max-w-7xl mx-auto\">\r\n <div class=\"text-center mb-14 reveal\">\r\n <span class=\"text-xs font-semibold tracking-widest uppercase\" style=\"color: var(--accent);\">Testimoni<\/span>\r\n <h2 class=\"text-3xl sm:text-4xl font-bold mt-2\" style=\"color: var(--fg);\">Apa Kata Klien Kami<\/h2>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n <div class=\"testi-card reveal\">\r\n <div class=\"flex items-center gap-1 mb-4\">\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <\/div>\r\n <p class=\"text-sm leading-relaxed mb-6\" style=\"color: var(--muted);\">Kualitas jahitan rapi, bahan sesuai permintaan. Sudah 3 kali order kaos untuk toko saya dan selalu puas. Sablonnya juga tahan lama.<\/p>\r\n <div class=\"flex items-center gap-3\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/person1\/80\/80\" class=\"w-10 h-10 rounded-full object-cover\" alt=\"Budi\">\r\n <div>\r\n <div class=\"font-semibold text-sm\">Budi Santoso<\/div>\r\n <div class=\"text-xs\" style=\"color: var(--muted);\">Owner, Toko Baju Berkah<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card reveal\">\r\n <div class=\"flex items-center gap-1 mb-4\">\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <\/div>\r\n <p class=\"text-sm leading-relaxed mb-6\" style=\"color: var(--muted);\">Seragam karyawan kami 200 pcs dibuatkan di sini. Hasilnya bagus, ukuran akurat, dan pengiriman tepat waktu. Sangat profesional.<\/p>\r\n <div class=\"flex items-center gap-3\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/person2\/80\/80\" class=\"w-10 h-10 rounded-full object-cover\" alt=\"Sari\">\r\n <div>\r\n <div class=\"font-semibold text-sm\">Sari Dewi<\/div>\r\n <div class=\"text-xs\" style=\"color: var(--muted);\">HR Manager, PT Nusantara<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card reveal\">\r\n <div class=\"flex items-center gap-1 mb-4\">\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <i class=\"fa-solid fa-star-half-stroke text-sm\" style=\"color: var(--accent);\"><\/i>\r\n <\/div>\r\n <p class=\"text-sm leading-relaxed mb-6\" style=\"color: var(--muted);\">Harga kompetitif untuk kualitas sebaik ini. Jaket hoodie dan windbreaker untuk komunitas motor kami jadi keren banget. Recommended!<\/p>\r\n <div class=\"flex items-center gap-3\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/person3\/80\/80\" class=\"w-10 h-10 rounded-full object-cover\" alt=\"Ahmad\">\r\n <div>\r\n <div class=\"font-semibold text-sm\">Ahmad Rizki<\/div>\r\n <div class=\"text-xs\" style=\"color: var(--muted);\">Ketua, Komunitas Rider<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- CTA Custom Order -->\r\n<section id=\"cta\" class=\"py-20 px-4 sm:px-6 relative overflow-hidden\" style=\"background: linear-gradient(135deg, var(--dark-mid) 0%, var(--dark) 100%);\">\r\n <div class=\"absolute inset-0 opacity-10\" style=\"background-image: repeating-linear-gradient(45deg, transparent, transparent 30px, var(--accent) 30px, var(--accent) 31px);\"><\/div>\r\n <div class=\"relative z-10 max-w-3xl mx-auto text-center reveal\">\r\n <h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-4\">Punya Desain Sendiri?<\/h2>\r\n <p class=\"text-white\/60 text-lg mb-8 leading-relaxed\">Kirim desain Anda, kami yang produksi. Bebas pilih bahan, warna, sablon, bordir, dan cutting sesuai keinginan. Konsultasi gratis!<\/p>\r\n <a href=\"https:\/\/wa.me\/6281234567890?text=Halo%20Stitch%20%26%20CO%2C%20saya%20ingin%20konsultasi%20pemesanan%20custom.\" target=\"_blank\" class=\"inline-flex items-center gap-3 px-10 py-4 rounded-xl text-lg font-semibold transition-all hover:scale-105\" style=\"background: #25d366; color: #fff;\">\r\n <i class=\"fa-brands fa-whatsapp text-2xl\"><\/i> Hubungi via WhatsApp\r\n <\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Footer -->\r\n<footer class=\"py-14 px-4 sm:px-6\" style=\"background: #0a1510; color: rgba(255,255,255,0.5);\">\r\n <div class=\"max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10\">\r\n <div class=\"md:col-span-1\">\r\n <div class=\"flex items-center gap-3 mb-4\">\r\n <div class=\"w-9 h-9 rounded-lg flex items-center justify-center\" style=\"background: var(--accent);\">\r\n <i class=\"fa-solid fa-scissors text-white text-sm\"><\/i>\r\n <\/div>\r\n <span class=\"text-white font-bold\" style=\"font-family: 'Playfair Display', serif;\">STITCH & CO<\/span>\r\n <\/div>\r\n <p class=\"text-sm leading-relaxed\">Konveksi terpercaya untuk kebutuhan garmen Anda. Kualitas premium, harga bersahabat.<\/p>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-semibold text-sm mb-4\">Navigasi<\/h4>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li><a href=\"#hero\" class=\"hover:text-white transition-colors\">Beranda<\/a><\/li>\r\n <li><a href=\"#products\" class=\"hover:text-white transition-colors\">Produk<\/a><\/li>\r\n <li><a href=\"#whyUs\" class=\"hover:text-white transition-colors\">Keunggulan<\/a><\/li>\r\n <li><a href=\"#testimonials\" class=\"hover:text-white transition-colors\">Testimoni<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-semibold text-sm mb-4\">Layanan<\/h4>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li>Sablon Kaos<\/li>\r\n <li>Bordir Logo<\/li>\r\n <li>Custom Seragam<\/li>\r\n <li>Jaket Komunitas<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-semibold text-sm mb-4\">Kontak<\/h4>\r\n <ul class=\"space-y-3 text-sm\">\r\n <li class=\"flex items-center gap-2\"><i class=\"fa-solid fa-location-dot\" style=\"color: var(--accent);\"><\/i> Jl. Garmen No. 45, Bandung<\/li>\r\n <li class=\"flex items-center gap-2\"><i class=\"fa-solid fa-phone\" style=\"color: var(--accent);\"><\/i> 0812-3456-7890<\/li>\r\n <li class=\"flex items-center gap-2\"><i class=\"fa-solid fa-envelope\" style=\"color: var(--accent);\"><\/i> info@stitchco.id<\/li>\r\n <\/ul>\r\n <div class=\"flex gap-3 mt-5\">\r\n <a href=\"#\" class=\"w-9 h-9 rounded-lg border border-white\/10 flex items-center justify-center hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors\" aria-label=\"Instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-9 h-9 rounded-lg border border-white\/10 flex items-center justify-center hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors\" aria-label=\"TikTok\"><i class=\"fa-brands fa-tiktok\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-9 h-9 rounded-lg border border-white\/10 flex items-center justify-center hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors\" aria-label=\"Facebook\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"max-w-7xl mx-auto mt-12 pt-6 border-t border-white\/10 text-center text-xs\">\r\n © 2024 Stitch & Co. Semua hak dilindungi.\r\n <\/div>\r\n<\/footer>\r\n\r\n<!-- Cart Overlay -->\r\n<div class=\"cart-overlay\" id=\"cartOverlay\" onclick=\"closeCart()\"><\/div>\r\n\r\n<!-- Cart Sidebar -->\r\n<aside class=\"cart-sidebar\" id=\"cartSidebar\">\r\n <div class=\"flex items-center justify-between p-5 border-b\" style=\"border-color: var(--border);\">\r\n <h3 class=\"text-lg font-bold\" style=\"font-family: 'Playfair Display', serif;\">Keranjang<\/h3>\r\n <button onclick=\"closeCart()\" class=\"w-9 h-9 rounded-lg flex items-center justify-center hover:bg-gray-100 transition-colors\" aria-label=\"Tutup keranjang\">\r\n <i class=\"fa-solid fa-xmark text-lg\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"flex-1 overflow-y-auto px-5\" id=\"cartItems\">\r\n <!-- Isi keranjang dirender oleh JS -->\r\n <\/div>\r\n <div class=\"p-5 border-t\" style=\"border-color: var(--border);\" id=\"cartFooter\">\r\n <!-- Total dan tombol checkout -->\r\n <\/div>\r\n<\/aside>\r\n\r\n<!-- Checkout Modal -->\r\n<div class=\"modal-overlay\" id=\"checkoutOverlay\">\r\n <div class=\"modal-box\" id=\"checkoutModal\">\r\n <div class=\"flex items-center justify-between mb-6\">\r\n <h3 class=\"text-xl font-bold\" style=\"font-family: 'Playfair Display', serif;\">Checkout<\/h3>\r\n <button onclick=\"closeCheckout()\" class=\"w-9 h-9 rounded-lg flex items-center justify-center hover:bg-gray-100 transition-colors\" aria-label=\"Tutup checkout\">\r\n <i class=\"fa-solid fa-xmark text-lg\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <form id=\"checkoutForm\" onsubmit=\"submitOrder(event)\" novalidate>\r\n <!-- Info pemesan -->\r\n <div class=\"mb-6\">\r\n <h4 class=\"text-sm font-bold mb-4 flex items-center gap-2\"><span class=\"w-6 h-6 rounded-full flex items-center justify-center text-xs text-white\" style=\"background: var(--accent);\">1<\/span> Data Pemesan<\/h4>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div class=\"sm:col-span-2\">\r\n <label class=\"form-label\">Nama Lengkap <span class=\"text-red-500\">*<\/span><\/label>\r\n <input type=\"text\" class=\"form-input\" id=\"coName\" placeholder=\"Masukkan nama lengkap\" required>\r\n <\/div>\r\n <div>\r\n <label class=\"form-label\">Nomor WhatsApp <span class=\"text-red-500\">*<\/span><\/label>\r\n <input type=\"tel\" class=\"form-input\" id=\"coPhone\" placeholder=\"08xxxxxxxxxx\" required>\r\n <\/div>\r\n <div>\r\n <label class=\"form-label\">Email<\/label>\r\n <input type=\"email\" class=\"form-input\" id=\"coEmail\" placeholder=\"email@contoh.com\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Alamat -->\r\n <div class=\"mb-6\">\r\n <h4 class=\"text-sm font-bold mb-4 flex items-center gap-2\"><span class=\"w-6 h-6 rounded-full flex items-center justify-center text-xs text-white\" style=\"background: var(--accent);\">2<\/span> Alamat Pengiriman<\/h4>\r\n <div class=\"space-y-4\">\r\n <div>\r\n <label class=\"form-label\">Alamat Lengkap <span class=\"text-red-500\">*<\/span><\/label>\r\n <textarea class=\"form-input\" id=\"coAddress\" rows=\"2\" placeholder=\"Jalan, nomor rumah, RT\/RW\" required><\/textarea>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"form-label\">Kota\/Kabupaten <span class=\"text-red-500\">*<\/span><\/label>\r\n <input type=\"text\" class=\"form-input\" id=\"coCity\" placeholder=\"Kota Anda\" required>\r\n <\/div>\r\n <div>\r\n <label class=\"form-label\">Kode Pos <span class=\"text-red-500\">*<\/span><\/label>\r\n <input type=\"text\" class=\"form-input\" id=\"coPostal\" placeholder=\"40123\" required>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Pembayaran -->\r\n <div class=\"mb-6\">\r\n <h4 class=\"text-sm font-bold mb-4 flex items-center gap-2\"><span class=\"w-6 h-6 rounded-full flex items-center justify-center text-xs text-white\" style=\"background: var(--accent);\">3<\/span> Metode Pembayaran<\/h4>\r\n <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-3\" id=\"paymentOptions\">\r\n <label class=\"pay-option\"><input type=\"radio\" name=\"payment\" value=\"BCA\" required><span class=\"text-sm font-medium\">Transfer BCA<\/span><\/label>\r\n <label class=\"pay-option\"><input type=\"radio\" name=\"payment\" value=\"Mandiri\"><span class=\"text-sm font-medium\">Transfer Mandiri<\/span><\/label>\r\n <label class=\"pay-option\"><input type=\"radio\" name=\"payment\" value=\"BRI\"><span class=\"text-sm font-medium\">Transfer BRI<\/span><\/label>\r\n <label class=\"pay-option\"><input type=\"radio\" name=\"payment\" value=\"GoPay\"><span class=\"text-sm font-medium\">GoPay<\/span><\/label>\r\n <label class=\"pay-option\"><input type=\"radio\" name=\"payment\" value=\"OVO\"><span class=\"text-sm font-medium\">OVO<\/span><\/label>\r\n <label class=\"pay-option\"><input type=\"radio\" name=\"payment\" value=\"COD\"><span class=\"text-sm font-medium\">COD<\/span><\/label>\r\n <\/div>\r\n <\/div>\r\n <!-- Ringkasan -->\r\n <div class=\"mb-6\">\r\n <h4 class=\"text-sm font-bold mb-4 flex items-center gap-2\"><span class=\"w-6 h-6 rounded-full flex items-center justify-center text-xs text-white\" style=\"background: var(--accent);\">4<\/span> Ringkasan Pesanan<\/h4>\r\n <div class=\"rounded-xl p-4 space-y-3\" style=\"background: var(--bg);\" id=\"checkoutSummary\">\r\n <!-- Diisi JS -->\r\n <\/div>\r\n <\/div>\r\n <!-- Catatan -->\r\n <div class=\"mb-6\">\r\n <label class=\"form-label\">Catatan Tambahan<\/label>\r\n <textarea class=\"form-input\" id=\"coNotes\" rows=\"2\" placeholder=\"Contoh: warna dominan hitam, sablon depan belakang...\"><\/textarea>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn-primary w-full justify-center text-base py-3.5\">\r\n <i class=\"fa-solid fa-lock\"><\/i> Pesan Sekarang\r\n <\/button>\r\n <p class=\"text-center text-xs mt-3\" style=\"color: var(--muted);\">Dengan memesan, Anda menyetujui syarat & ketentuan yang berlaku.<\/p>\r\n <\/form>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- Success Modal -->\r\n<div class=\"modal-overlay\" id=\"successOverlay\">\r\n <div class=\"modal-box text-center\" style=\"max-width: 480px;\">\r\n <div class=\"w-20 h-20 rounded-full mx-auto mb-6 flex items-center justify-center\" style=\"background: rgba(45,106,79,0.1);\">\r\n <i class=\"fa-solid fa-circle-check text-4xl\" style=\"color: var(--green);\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-2xl font-bold mb-2\" style=\"font-family: 'Playfair Display', serif;\">Pesanan Berhasil!<\/h3>\r\n <p class=\"text-sm mb-4\" style=\"color: var(--muted);\">Pesanan Anda telah diterima dan sedang kami proses.<\/p>\r\n <div class=\"rounded-xl p-4 mb-6 inline-block\" style=\"background: var(--bg);\">\r\n <div class=\"text-xs\" style=\"color: var(--muted);\">Nomor Pesanan<\/div>\r\n <div class=\"text-xl font-bold mt-1\" style=\"color: var(--accent); font-family: 'Playfair Display', serif;\" id=\"orderNumber\">STC-2024-0000<\/div>\r\n <\/div>\r\n <p class=\"text-sm mb-6\" style=\"color: var(--muted);\">Tim kami akan menghubungi Anda via WhatsApp dalam 1x24 jam untuk konfirmasi detail pesanan dan pembayaran.<\/p>\r\n <div class=\"flex flex-col sm:flex-row gap-3 justify-center\">\r\n <a id=\"waLink\" href=\"#\" target=\"_blank\" class=\"btn-primary justify-center\">\r\n <i class=\"fa-brands fa-whatsapp\"><\/i> Hubungi WhatsApp\r\n <\/a>\r\n <button onclick=\"closeSuccess()\" class=\"px-6 py-3 rounded-xl font-semibold border-2 transition-colors hover:bg-gray-50\" style=\"border-color: var(--border); color: var(--fg);\">\r\n Kembali Belanja\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- Back to Top -->\r\n<button id=\"backToTop\" onclick=\"window.scrollTo({top:0})\" aria-label=\"Kembali ke atas\">\r\n <i class=\"fa-solid fa-chevron-up\"><\/i>\r\n<\/button>\r\n\r\n<script>\r\n \/\/ ===================== DATA PRODUK =====================\r\n const products = [\r\n { id: 1, name: \"Kaos Oblong Combed 30s\", category: \"kaos\", price: 35000, image: \"https:\/\/picsum.photos\/seed\/kaos1\/400\/400\", sizes: [\"S\",\"M\",\"L\",\"XL\",\"XXL\",\"3XL\"], desc: \"Cotton combed 30s, jahit rantai, nyaman dipakai sehari-hari.\" },\r\n { id: 2, name: \"Kaos Oversize Premium\", category: \"kaos\", price: 45000, image: \"https:\/\/picsum.photos\/seed\/kaos2\/400\/400\", sizes: [\"M\",\"L\",\"XL\",\"XXL\",\"3XL\"], desc: \"Cotton combed 24s tebal, cutting oversize trendy.\" },\r\n { id: 3, name: \"Polo Shirt Lacoste CVC\", category: \"kaos\", price: 75000, image: \"https:\/\/picsum.photos\/seed\/polo1\/400\/400\", sizes: [\"S\",\"M\",\"L\",\"XL\",\"XXL\"], desc: \"Lacoste CVC 20s, kerah halus, cocok untuk seragam kasual.\" },\r\n { id: 4, name: \"Kemeja Kerja Slim Fit\", category: \"kemeja\", price: 85000, image: \"https:\/\/picsum.photos\/seed\/kemeja1\/400\/400\", sizes: [\"S\",\"M\",\"L\",\"XL\",\"XXL\"], desc: \"Kain katun stretch, slim fit, cocok untuk seragam kantor.\" },\r\n { id: 5, name: \"Kemeja Batik Modern\", category: \"kemeja\", price: 95000, image: \"https:\/\/picsum.photos\/seed\/kemeja2\/400\/400\", sizes: [\"S\",\"M\",\"L\",\"XL\",\"XXL\"], desc: \"Batik printing premium, motif kontemporer, nyaman digunakan.\" },\r\n { id: 6, name: \"Jaket Hoodie Fleece\", category: \"jaket\", price: 120000, image: \"https:\/\/picsum.photos\/seed\/jaket1\/400\/400\", sizes: [\"S\",\"M\",\"L\",\"XL\",\"XXL\"], desc: \"Fleece tebal, hoodie+kantong kangaroo, bordir\/sablon tersedia.\" },\r\n { id: 7, name: \"Jaket Windbreaker\", category: \"jaket\", price: 95000, image: \"https:\/\/picsum.photos\/seed\/jaket2\/400\/400\", sizes: [\"S\",\"M\",\"L\",\"XL\",\"XXL\"], desc: \"Taslan waterproof, ringan, cocok untuk outdoor dan komunitas.\" },\r\n { id: 8, name: \"Jaket Bomber Premium\", category: \"jaket\", price: 135000, image: \"https:\/\/picsum.photos\/seed\/jaket3\/400\/400\", sizes: [\"M\",\"L\",\"XL\",\"XXL\"], desc: \"Ribbon parasut, fill dakron, look stylish dan hangat.\" },\r\n { id: 9, name: \"Seragam Kantor Pria\", category: \"seragam\", price: 110000, image: \"https:\/\/picsum.photos\/seed\/seragam1\/400\/400\", sizes: [\"S\",\"M\",\"L\",\"XL\",\"XXL\"], desc: \"Setelan kemeja+celana, bahan american drill, rapi dan profesional.\" },\r\n { id: 10, name: \"Seragam Olahraga\", category: \"seragam\", price: 65000, image: \"https:\/\/picsum.photos\/seed\/seragam2\/400\/400\", sizes: [\"S\",\"M\",\"L\",\"XL\",\"XXL\"], desc: \"Dryfit jersey, celana training, sablon nomor dan nama pemain.\" },\r\n { id: 11, name: \"Celana Cargo Tactical\", category: \"celana\", price: 90000, image: \"https:\/\/picsum.photos\/seed\/celana1\/400\/400\", sizes: [\"28\",\"29\",\"30\",\"31\",\"32\",\"33\",\"34\",\"36\"], desc: \"Ripstop, 6 kantong, jahit double, kuat dan tahan lama.\" },\r\n { id: 12, name: \"Jas Almamater\", category: \"lainnya\", price: 175000, image: \"https:\/\/picsum.photos\/seed\/jas1\/400\/400\", sizes: [\"S\",\"M\",\"L\",\"XL\",\"XXL\"], desc: \"Satin + drill, bordir logo sekolah\/kampus, standar akademik.\" },\r\n ];\r\n\r\n \/\/ ===================== STATE =====================\r\n let cart = [];\r\n let activeFilter = 'semua';\r\n \/\/ State pemilihan ukuran & qty per produk (di UI)\r\n let selectedSizes = {};\r\n let selectedQty = {};\r\n\r\n \/\/ ===================== FORMAT RUPIAH =====================\r\n function formatRupiah(num) {\r\n return 'Rp ' + num.toLocaleString('id-ID');\r\n }\r\n\r\n \/\/ ===================== TOAST =====================\r\n function showToast(message, type = 'info') {\r\n const container = document.getElementById('toastContainer');\r\n const toast = document.createElement('div');\r\n toast.className = `toast ${type}`;\r\n const icons = { success: 'fa-circle-check', error: 'fa-circle-exclamation', info: 'fa-circle-info' };\r\n toast.innerHTML = `<i class=\"fa-solid ${icons[type] || icons.info}\"><\/i> ${message}`;\r\n container.appendChild(toast);\r\n setTimeout(() => toast.remove(), 3200);\r\n }\r\n\r\n \/\/ ===================== RENDER PRODUK =====================\r\n function renderProducts(filter = 'semua') {\r\n activeFilter = filter;\r\n \/\/ Update tab aktif\r\n document.querySelectorAll('.filter-tab').forEach(tab => {\r\n tab.classList.toggle('active', tab.textContent.trim().toLowerCase() === filter || (filter === 'semua' && tab.textContent.trim() === 'Semua'));\r\n });\r\n\r\n const grid = document.getElementById('productGrid');\r\n const filtered = filter === 'semua' ? products : products.filter(p => p.category === filter);\r\n\r\n if (filtered.length === 0) {\r\n grid.innerHTML = `<div class=\"col-span-full text-center py-16\" style=\"color: var(--muted);\"><i class=\"fa-solid fa-box-open text-4xl mb-4 block opacity-40\"><\/i><p>Tidak ada produk di kategori ini.<\/p><\/div>`;\r\n return;\r\n }\r\n\r\n grid.innerHTML = filtered.map(p => {\r\n const sizes = selectedSizes[p.id] || '';\r\n const qty = selectedQty[p.id] || 12;\r\n return `\r\n <div class=\"product-card reveal visible\">\r\n <div class=\"img-wrap\">\r\n <img decoding=\"async\" src=\"${p.image}\" alt=\"${p.name}\" loading=\"lazy\">\r\n <span class=\"badge\">${p.category}<\/span>\r\n <\/div>\r\n <div class=\"p-5\">\r\n <h3 class=\"font-bold text-base mb-1\" style=\"font-family: 'Playfair Display', serif;\">${p.name}<\/h3>\r\n <p class=\"text-xs mb-3 leading-relaxed\" style=\"color: var(--muted);\">${p.desc}<\/p>\r\n <div class=\"text-lg font-bold mb-3\" style=\"color: var(--accent);\">${formatRupiah(p.price)}<span class=\"text-xs font-normal\" style=\"color: var(--muted);\">\/pcs<\/span><\/div>\r\n <div class=\"mb-3\">\r\n <div class=\"text-xs font-semibold mb-1.5\" style=\"color: var(--muted);\">Ukuran:<\/div>\r\n <div class=\"flex flex-wrap gap-1.5\" id=\"sizes-${p.id}\">\r\n ${p.sizes.map(s => `<button type=\"button\" class=\"size-pill ${sizes === s ? 'active' : ''}\" onclick=\"selectSize(${p.id}, '${s}')\">${s}<\/button>`).join('')}\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"qty-stepper\">\r\n <button type=\"button\" onclick=\"changeQty(${p.id}, -1)\">-<\/button>\r\n <input type=\"number\" id=\"qty-${p.id}\" value=\"${qty}\" min=\"12\" onchange=\"setQty(${p.id}, this.value)\">\r\n <button type=\"button\" onclick=\"changeQty(${p.id}, 1)\">+<\/button>\r\n <\/div>\r\n <button type=\"button\" class=\"btn-primary text-xs px-4 py-2.5\" id=\"addBtn-${p.id}\" onclick=\"addToCart(${p.id})\">\r\n <i class=\"fa-solid fa-cart-plus\"><\/i> Tambah\r\n <\/button>\r\n <\/div>\r\n <div class=\"text-[11px] mt-2\" style=\"color: var(--muted);\"><i class=\"fa-solid fa-circle-info\"><\/i> Min. order 12 pcs<\/div>\r\n <\/div>\r\n <\/div>`;\r\n }).join('');\r\n }\r\n\r\n function selectSize(id, size) {\r\n selectedSizes[id] = size;\r\n \/\/ Update tampilan pill\r\n const container = document.getElementById(`sizes-${id}`);\r\n if (container) {\r\n container.querySelectorAll('.size-pill').forEach(pill => {\r\n pill.classList.toggle('active', pill.textContent === size);\r\n });\r\n }\r\n }\r\n\r\n function changeQty(id, delta) {\r\n const input = document.getElementById(`qty-${id}`);\r\n let val = parseInt(input.value) || 12;\r\n val = Math.max(12, val + delta);\r\n input.value = val;\r\n selectedQty[id] = val;\r\n }\r\n\r\n function setQty(id, val) {\r\n let n = parseInt(val) || 12;\r\n n = Math.max(12, n);\r\n const input = document.getElementById(`qty-${id}`);\r\n input.value = n;\r\n selectedQty[id] = n;\r\n }\r\n\r\n function filterProducts(cat) {\r\n renderProducts(cat);\r\n \/\/ Scroll ke produk jika dari kategori klik\r\n if (cat !== 'semua') {\r\n document.getElementById('products').scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n }\r\n }\r\n\r\n \/\/ ===================== KERANJANG =====================\r\n function addToCart(productId) {\r\n const product = products.find(p => p.id === productId);\r\n if (!product) return;\r\n const size = selectedSizes[productId];\r\n if (!size) {\r\n showToast('Pilih ukuran terlebih dahulu!', 'error');\r\n return;\r\n }\r\n const qty = selectedQty[productId] || 12;\r\n\r\n \/\/ Cek apakah item sama (id + ukuran) sudah ada di keranjang\r\n const existingIdx = cart.findIndex(c => c.id === productId && c.size === size);\r\n if (existingIdx >= 0) {\r\n cart[existingIdx].qty += qty;\r\n } else {\r\n cart.push({ id: productId, size: size, qty: qty });\r\n }\r\n\r\n \/\/ Animasi tombol\r\n const btn = document.getElementById(`addBtn-${productId}`);\r\n if (btn) {\r\n btn.classList.add('added');\r\n btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i> Ditambahkan';\r\n setTimeout(() => {\r\n btn.classList.remove('added');\r\n btn.innerHTML = '<i class=\"fa-solid fa-cart-plus\"><\/i> Tambah';\r\n }, 1200);\r\n }\r\n\r\n updateCartUI();\r\n showToast(`${product.name} (${size}) x${qty} ditambahkan ke keranjang`, 'success');\r\n }\r\n\r\n function removeFromCart(index) {\r\n cart.splice(index, 1);\r\n updateCartUI();\r\n renderCartSidebar();\r\n }\r\n\r\n function updateCartQty(index, delta) {\r\n cart[index].qty = Math.max(12, cart[index].qty + delta);\r\n updateCartUI();\r\n renderCartSidebar();\r\n }\r\n\r\n function getCartTotal() {\r\n return cart.reduce((sum, item) => {\r\n const product = products.find(p => p.id === item.id);\r\n return sum + (product ? product.price * item.qty : 0);\r\n }, 0);\r\n }\r\n\r\n function getCartCount() {\r\n return cart.reduce((sum, item) => sum + item.qty, 0);\r\n }\r\n\r\n function updateCartUI() {\r\n const badge = document.getElementById('cartBadge');\r\n const count = getCartCount();\r\n if (count > 0) {\r\n badge.classList.remove('hidden');\r\n badge.textContent = count > 99 ? '99+' : count;\r\n } else {\r\n badge.classList.add('hidden');\r\n }\r\n }\r\n\r\n function renderCartSidebar() {\r\n const container = document.getElementById('cartItems');\r\n const footer = document.getElementById('cartFooter');\r\n\r\n if (cart.length === 0) {\r\n container.innerHTML = `\r\n <div class=\"flex flex-col items-center justify-center h-full py-16\" style=\"color: var(--muted);\">\r\n <i class=\"fa-solid fa-bag-shopping text-5xl mb-4 opacity-20\"><\/i>\r\n <p class=\"font-medium\">Keranjang masih kosong<\/p>\r\n <p class=\"text-xs mt-1\">Yuk mulai pilih produk!<\/p>\r\n <\/div>`;\r\n footer.innerHTML = '';\r\n return;\r\n }\r\n\r\n container.innerHTML = cart.map((item, i) => {\r\n const p = products.find(pr => pr.id === item.id);\r\n if (!p) return '';\r\n const subtotal = p.price * item.qty;\r\n return `\r\n <div class=\"cart-item\">\r\n <img decoding=\"async\" src=\"${p.image}\" alt=\"${p.name}\" class=\"w-16 h-16 rounded-lg object-cover flex-shrink-0\">\r\n <div class=\"flex-1 min-w-0\">\r\n <h4 class=\"text-sm font-semibold truncate\">${p.name}<\/h4>\r\n <div class=\"text-xs mt-0.5\" style=\"color: var(--muted);\">Ukuran: ${item.size}<\/div>\r\n <div class=\"text-xs font-bold mt-1\" style=\"color: var(--accent);\">${formatRupiah(p.price)} x ${item.qty}<\/div>\r\n <div class=\"flex items-center justify-between mt-2\">\r\n <div class=\"qty-stepper\" style=\"transform: scale(0.85); transform-origin: left;\">\r\n <button type=\"button\" onclick=\"updateCartQty(${i}, -1)\">-<\/button>\r\n <input type=\"number\" value=\"${item.qty}\" min=\"12\" onchange=\"cart[${i}].qty=Math.max(12,parseInt(this.value)||12);updateCartUI();renderCartSidebar();\">\r\n <button type=\"button\" onclick=\"updateCartQty(${i}, 1)\">+<\/button>\r\n <\/div>\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"text-sm font-bold\">${formatRupiah(subtotal)}<\/span>\r\n <button onclick=\"removeFromCart(${i})\" class=\"text-red-400 hover:text-red-600 transition-colors\" aria-label=\"Hapus item\">\r\n <i class=\"fa-solid fa-trash-can text-sm\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n }).join('');\r\n\r\n const total = getCartTotal();\r\n footer.innerHTML = `\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <span class=\"font-medium\" style=\"color: var(--muted);\">Total (${getCartCount()} pcs)<\/span>\r\n <span class=\"text-xl font-bold\" style=\"color: var(--accent);\">${formatRupiah(total)}<\/span>\r\n <\/div>\r\n <button onclick=\"openCheckout()\" class=\"btn-primary w-full justify-center py-3.5 text-base\">\r\n <i class=\"fa-solid fa-credit-card\"><\/i> Checkout\r\n <\/button>\r\n <button onclick=\"clearCart()\" class=\"w-full text-center text-xs font-medium mt-3 py-2 rounded-lg hover:bg-red-50 text-red-400 hover:text-red-600 transition-colors\">\r\n Kosongkan Keranjang\r\n <\/button>`;\r\n }\r\n\r\n function clearCart() {\r\n cart = [];\r\n updateCartUI();\r\n renderCartSidebar();\r\n showToast('Keranjang dikosongkan', 'info');\r\n }\r\n\r\n function openCart() {\r\n renderCartSidebar();\r\n document.getElementById('cartOverlay').classList.add('open');\r\n document.getElementById('cartSidebar').classList.add('open');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeCart() {\r\n document.getElementById('cartOverlay').classList.remove('open');\r\n document.getElementById('cartSidebar').classList.remove('open');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n \/\/ ===================== CHECKOUT =====================\r\n function openCheckout() {\r\n if (cart.length === 0) {\r\n showToast('Keranjang masih kosong!', 'error');\r\n return;\r\n }\r\n closeCart();\r\n setTimeout(() => {\r\n renderCheckoutSummary();\r\n document.getElementById('checkoutOverlay').classList.add('open');\r\n document.body.style.overflow = 'hidden';\r\n }, 300);\r\n }\r\n\r\n function closeCheckout() {\r\n document.getElementById('checkoutOverlay').classList.remove('open');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n function renderCheckoutSummary() {\r\n const summary = document.getElementById('checkoutSummary');\r\n const total = getCartTotal();\r\n let html = cart.map(item => {\r\n const p = products.find(pr => pr.id === item.id);\r\n if (!p) return '';\r\n return `<div class=\"flex justify-between text-sm\"><span class=\"truncate mr-4\">${p.name} <span style=\"color:var(--muted);\">(${item.size}) x${item.qty}<\/span><\/span><span class=\"font-semibold whitespace-nowrap\">${formatRupiah(p.price * item.qty)}<\/span><\/div>`;\r\n }).join('');\r\n html += `<div class=\"border-t pt-3 mt-3 flex justify-between font-bold\" style=\"border-color: var(--border);\"><span>Total<\/span><span style=\"color: var(--accent);\">${formatRupiah(total)}<\/span><\/div>`;\r\n summary.innerHTML = html;\r\n }\r\n\r\n function submitOrder(e) {\r\n e.preventDefault();\r\n \/\/ Validasi\r\n const fields = [\r\n { id: 'coName', label: 'Nama' },\r\n { id: 'coPhone', label: 'No. WhatsApp' },\r\n { id: 'coAddress', label: 'Alamat' },\r\n { id: 'coCity', label: 'Kota' },\r\n { id: 'coPostal', label: 'Kode Pos' }\r\n ];\r\n let valid = true;\r\n fields.forEach(f => {\r\n const el = document.getElementById(f.id);\r\n if (!el.value.trim()) {\r\n el.classList.add('error');\r\n valid = false;\r\n } else {\r\n el.classList.remove('error');\r\n }\r\n });\r\n\r\n \/\/ Validasi pembayaran\r\n const payment = document.querySelector('input[name=\"payment\"]:checked');\r\n if (!payment) {\r\n valid = false;\r\n showToast('Pilih metode pembayaran!', 'error');\r\n }\r\n\r\n if (!valid) {\r\n showToast('Lengkapi semua data yang wajib diisi!', 'error');\r\n return;\r\n }\r\n\r\n \/\/ Buat nomor pesanan\r\n const orderNum = 'STC-2024-' + String(Math.floor(1000 + Math.random() * 9000));\r\n document.getElementById('orderNumber').textContent = orderNum;\r\n\r\n \/\/ Buat pesan WhatsApp\r\n const name = document.getElementById('coName').value.trim();\r\n const phone = document.getElementById('coPhone').value.trim();\r\n const address = document.getElementById('coAddress').value.trim();\r\n const city = document.getElementById('coCity').value.trim();\r\n const postal = document.getElementById('coPostal').value.trim();\r\n const notes = document.getElementById('coNotes').value.trim();\r\n const total = getCartTotal();\r\n\r\n let waMsg = `*PESANAN BARU - ${orderNum}*\\n\\n`;\r\n waMsg += `*Pemesan:* ${name}\\n*WhatsApp:* ${phone}\\n`;\r\n waMsg += `*Alamat:* ${address}, ${city} ${postal}\\n`;\r\n waMsg += `*Pembayaran:* ${payment.value}\\n\\n*Detail Pesanan:*\\n`;\r\n cart.forEach(item => {\r\n const p = products.find(pr => pr.id === item.id);\r\n if (p) waMsg += `- ${p.name} (${item.size}) x${item.qty} = ${formatRupiah(p.price * item.qty)}\\n`;\r\n });\r\n waMsg += `\\n*Total: ${formatRupiah(total)}*`;\r\n if (notes) waMsg += `\\n\\n*Catatan:* ${notes}`;\r\n\r\n document.getElementById('waLink').href = `https:\/\/wa.me\/6281234567890?text=${encodeURIComponent(waMsg)}`;\r\n\r\n \/\/ Tutup checkout, buka success\r\n closeCheckout();\r\n setTimeout(() => {\r\n document.getElementById('successOverlay').classList.add('open');\r\n document.body.style.overflow = 'hidden';\r\n }, 300);\r\n\r\n \/\/ Reset form dan keranjang\r\n document.getElementById('checkoutForm').reset();\r\n document.querySelectorAll('.pay-option').forEach(o => o.classList.remove('selected'));\r\n cart = [];\r\n updateCartUI();\r\n }\r\n\r\n function closeSuccess() {\r\n document.getElementById('successOverlay').classList.remove('open');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n \/\/ Payment option styling\r\n document.querySelectorAll('.pay-option input').forEach(radio => {\r\n radio.addEventListener('change', () => {\r\n document.querySelectorAll('.pay-option').forEach(o => o.classList.remove('selected'));\r\n radio.closest('.pay-option').classList.add('selected');\r\n });\r\n });\r\n\r\n \/\/ Hapus error saat mengetik\r\n document.querySelectorAll('.form-input').forEach(input => {\r\n input.addEventListener('input', () => input.classList.remove('error'));\r\n });\r\n\r\n \/\/ ===================== MOBILE MENU =====================\r\n function toggleMobileMenu() {\r\n document.getElementById('mobileMenu').classList.toggle('hidden');\r\n }\r\n function closeMobileMenu() {\r\n document.getElementById('mobileMenu').classList.add('hidden');\r\n }\r\n\r\n \/\/ ===================== HEADER SCROLL =====================\r\n const header = document.getElementById('mainHeader');\r\n const backToTop = document.getElementById('backToTop');\r\n window.addEventListener('scroll', () => {\r\n const scrollY = window.scrollY;\r\n header.classList.toggle('header-scrolled', scrollY > 60);\r\n backToTop.classList.toggle('visible', scrollY > 600);\r\n }, { passive: true });\r\n\r\n \/\/ ===================== SCROLL REVEAL =====================\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n }\r\n });\r\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\r\n\r\n function observeReveals() {\r\n document.querySelectorAll('.reveal:not(.visible)').forEach(el => observer.observe(el));\r\n }\r\n\r\n \/\/ ===================== STAT COUNTER =====================\r\n function animateCounters() {\r\n document.querySelectorAll('.stat-num[data-target]').forEach(el => {\r\n const target = parseInt(el.dataset.target);\r\n const duration = 2000;\r\n const start = performance.now();\r\n function tick(now) {\r\n const elapsed = now - start;\r\n const progress = Math.min(elapsed \/ duration, 1);\r\n \/\/ Ease out cubic\r\n const ease = 1 - Math.pow(1 - progress, 3);\r\n el.textContent = Math.floor(target * ease).toLocaleString('id-ID') + '+';\r\n if (progress < 1) requestAnimationFrame(tick);\r\n }\r\n requestAnimationFrame(tick);\r\n });\r\n }\r\n\r\n \/\/ Observer khusus untuk stat counter\r\n const statObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n animateCounters();\r\n statObserver.disconnect();\r\n }\r\n });\r\n }, { threshold: 0.3 });\r\n statObserver.observe(document.querySelector('.stat-item'));\r\n\r\n \/\/ ===================== HERO CANVAS PARTICLES =====================\r\n (function initHeroCanvas() {\r\n const canvas = document.getElementById('heroCanvas');\r\n const ctx = canvas.getContext('2d');\r\n let particles = [];\r\n let w, h;\r\n\r\n function resize() {\r\n w = canvas.width = canvas.offsetWidth;\r\n h = canvas.height = canvas.offsetHeight;\r\n }\r\n\r\n function createParticles() {\r\n particles = [];\r\n const count = Math.min(60, Math.floor(w * h \/ 15000));\r\n for (let i = 0; i < count; i++) {\r\n particles.push({\r\n x: Math.random() * w,\r\n y: Math.random() * h,\r\n size: Math.max(0.5, 1 + Math.random() * 2),\r\n speedY: -(0.15 + Math.random() * 0.35),\r\n speedX: (Math.random() - 0.5) * 0.3,\r\n opacity: 0.15 + Math.random() * 0.4\r\n });\r\n }\r\n }\r\n\r\n function draw() {\r\n ctx.clearRect(0, 0, w, h);\r\n particles.forEach(p => {\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, Math.max(0.5, p.size), 0, Math.PI * 2);\r\n ctx.fillStyle = `rgba(200, 150, 62, ${p.opacity})`;\r\n ctx.fill();\r\n\r\n p.x += p.speedX;\r\n p.y += p.speedY;\r\n\r\n \/\/ Reset jika keluar layar\r\n if (p.y < -10) {\r\n p.y = h + 10;\r\n p.x = Math.random() * w;\r\n }\r\n if (p.x < -10) p.x = w + 10;\r\n if (p.x > w + 10) p.x = -10;\r\n });\r\n requestAnimationFrame(draw);\r\n }\r\n\r\n \/\/ Cek prefers-reduced-motion\r\n const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n resize();\r\n createParticles();\r\n if (!prefersReduced) draw();\r\n window.addEventListener('resize', () => { resize(); createParticles(); });\r\n })();\r\n\r\n \/\/ ===================== INIT =====================\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \/\/ Set default qty\r\n products.forEach(p => { selectedQty[p.id] = 12; });\r\n renderProducts('semua');\r\n observeReveals();\r\n \/\/ Re-observe setelah render produk\r\n setTimeout(observeReveals, 100);\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>STITCH & CO \u2014 Konveksi Premium STITCH & CO Konveksi Premium Produk Kategori Keunggulan Testimoni 0 Produk Kategori Keunggulan Testimoni […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","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":""},"blockartPostFeaturedMedia":{"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"blockartPostAuthor":{"name":"admin","avatar":"https:\/\/secure.gravatar.com\/avatar\/e8060d62c1cf8df2e308efb7a63ad0ad?s=96&d=mm&r=g"},"blockartPostCommentsNumber":false,"blockartPostExcerpt":"STITCH & CO \u2014 Konveksi Premium STITCH & CO Konveksi Premium Produk Kategori Keunggulan Testimoni 0 Produk Kategori Keunggulan Testimoni […]","blockartPostCategories":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Elementor #1304 - Rumah Program Integra<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementor #1304 - Rumah Program Integra\" \/>\n<meta property=\"og:description\" content=\"STITCH & CO \u2014 Konveksi Premium STITCH & CO Konveksi Premium Produk Kategori Keunggulan Testimoni 0 Produk Kategori Keunggulan Testimoni […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/\" \/>\n<meta property=\"og:site_name\" content=\"Rumah Program Integra\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-04T03:19:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/picsum.photos\/seed\/catkaos\/400\/300\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/\",\"url\":\"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/\",\"name\":\"Elementor #1304 - Rumah Program Integra\",\"isPartOf\":{\"@id\":\"https:\/\/rumahprogramintegra.com\/#website\"},\"datePublished\":\"2026-06-04T03:17:38+00:00\",\"dateModified\":\"2026-06-04T03:19:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rumahprogramintegra.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor #1304\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rumahprogramintegra.com\/#website\",\"url\":\"https:\/\/rumahprogramintegra.com\/\",\"name\":\"Rumah Program Integra\",\"description\":\"Integrate All Your Business\",\"publisher\":{\"@id\":\"https:\/\/rumahprogramintegra.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rumahprogramintegra.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/rumahprogramintegra.com\/#organization\",\"name\":\"Rumah Program Integra\",\"url\":\"https:\/\/rumahprogramintegra.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rumahprogramintegra.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/rumahprogramintegra.com\/wp-content\/uploads\/2023\/10\/RPIlogo-2.png\",\"contentUrl\":\"https:\/\/rumahprogramintegra.com\/wp-content\/uploads\/2023\/10\/RPIlogo-2.png\",\"width\":50,\"height\":76,\"caption\":\"Rumah Program Integra\"},\"image\":{\"@id\":\"https:\/\/rumahprogramintegra.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementor #1304 - Rumah Program Integra","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/","og_locale":"en_US","og_type":"article","og_title":"Elementor #1304 - Rumah Program Integra","og_description":"STITCH & CO \u2014 Konveksi Premium STITCH & CO Konveksi Premium Produk Kategori Keunggulan Testimoni 0 Produk Kategori Keunggulan Testimoni […]","og_url":"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/","og_site_name":"Rumah Program Integra","article_modified_time":"2026-06-04T03:19:57+00:00","og_image":[{"url":"https:\/\/picsum.photos\/seed\/catkaos\/400\/300"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/","url":"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/","name":"Elementor #1304 - Rumah Program Integra","isPartOf":{"@id":"https:\/\/rumahprogramintegra.com\/#website"},"datePublished":"2026-06-04T03:17:38+00:00","dateModified":"2026-06-04T03:19:57+00:00","breadcrumb":{"@id":"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rumahprogramintegra.com\/index.php\/elementor-1304\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rumahprogramintegra.com\/"},{"@type":"ListItem","position":2,"name":"Elementor #1304"}]},{"@type":"WebSite","@id":"https:\/\/rumahprogramintegra.com\/#website","url":"https:\/\/rumahprogramintegra.com\/","name":"Rumah Program Integra","description":"Integrate All Your Business","publisher":{"@id":"https:\/\/rumahprogramintegra.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rumahprogramintegra.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/rumahprogramintegra.com\/#organization","name":"Rumah Program Integra","url":"https:\/\/rumahprogramintegra.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rumahprogramintegra.com\/#\/schema\/logo\/image\/","url":"https:\/\/rumahprogramintegra.com\/wp-content\/uploads\/2023\/10\/RPIlogo-2.png","contentUrl":"https:\/\/rumahprogramintegra.com\/wp-content\/uploads\/2023\/10\/RPIlogo-2.png","width":50,"height":76,"caption":"Rumah Program Integra"},"image":{"@id":"https:\/\/rumahprogramintegra.com\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rumahprogramintegra.com\/index.php\/wp-json\/wp\/v2\/pages\/1304"}],"collection":[{"href":"https:\/\/rumahprogramintegra.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rumahprogramintegra.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rumahprogramintegra.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rumahprogramintegra.com\/index.php\/wp-json\/wp\/v2\/comments?post=1304"}],"version-history":[{"count":4,"href":"https:\/\/rumahprogramintegra.com\/index.php\/wp-json\/wp\/v2\/pages\/1304\/revisions"}],"predecessor-version":[{"id":1308,"href":"https:\/\/rumahprogramintegra.com\/index.php\/wp-json\/wp\/v2\/pages\/1304\/revisions\/1308"}],"wp:attachment":[{"href":"https:\/\/rumahprogramintegra.com\/index.php\/wp-json\/wp\/v2\/media?parent=1304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}