<!DOCTYPE html><html lang="id"><head><style>
      .header { display: block; }
      .hero-section { min-height: 400px; }
      .main-navigation { position: sticky; }
      .product-card { border-radius: 8px; }
      .loading-skeleton { animation: pulse 2s infinite; }
    </style><style>
      .header { display: block; }
      .hero-section { min-height: 400px; }
      .main-navigation { position: sticky; }
      .product-card { border-radius: 8px; }
      .loading-skeleton { animation: pulse 2s infinite; }
    </style>
    <meta charset="UTF-8">
    
    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="/favicon_best_ksjshoptek.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon_best_ksjshoptek_32x32.png">
    
    <!-- Essential Meta Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="KSJSHOPTEK - Grosir Perkakas dan Hardware Toko Bangunan. Supplier perkakas lengkap: gembok, kunci pintu, kran sanitary, kawat, obeng, tang, dan perkakas lainnya.">
    <meta name="keywords" content="grosir perkakas, ksjshopbangunan, ksjshopmlg, KSJSHOPTEK, ksjshoptek, ksjshop, grosirkuncipintu, grosirperkakas, krantermurah, kuncipintu termurah, grosir proyek, kulakkan toko bangunan, supplier toko bangunan, hardware toko bangunan, gembok murah, kunci pintu, kran sanitary, kawat, obeng, tang, perkakas rumah tangga, aksesoris kamar mandi, handel pintu, engsel, baut sekrup, alat pertukangan, supplier hardware, isco, toho, maxtech, bosch, powertools, sanitary, ysk, vpr, viper, aigo, erdos, igm, amico, alinco, gembok isco, kunci toho, kran ysk, obeng bosch, tang maxtech">
    <meta name="author" content="KSJSHOPTEK">
    <meta name="theme-color" content="#3b82f6">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="KSJSHOPTEK - Grosir Perkakas &amp; Hardware Toko Bangunan">
    <meta property="og:description" content="Supplier perkakas lengkap untuk toko bangunan. Grosir gembok, kunci pintu, kran sanitary, kawat, obeng, tang brand ISCO, TOHO, MAXTECH, BOSCH, YSK, VPR dan lainnya dengan harga terbaik.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://ksjshopbangunan.com/">
    <meta property="og:image" content="https://ksjshopbangunan.com/logo/ksjshop-logo.png">
    <meta property="og:site_name" content="KSJSHOPTEK">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="KSJSHOPTEK - Grosir Perkakas &amp; Hardware Toko Bangunan">
    <meta name="twitter:description" content="Supplier perkakas lengkap untuk toko bangunan. Grosir gembok, kunci pintu, kran sanitary brand ISCO, TOHO, MAXTECH, BOSCH, YSK, VPR dan lainnya.">
    
    <!-- Performance: Critical Resource Hints -->
    <link rel="dns-prefetch" href="//gvqzlfkdofvlfimzouov.supabase.co">
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link rel="dns-prefetch" href="//maps.googleapis.com">
    <link rel="dns-prefetch" href="//www.google.com">
    
    <!-- Preconnect to critical origins -->
    <link rel="preconnect" href="https://gvqzlfkdofvlfimzouov.supabase.co" crossorigin="">
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    
    <!-- Prefetch critical API endpoints - Backend URL tetap tidak diubah -->
    <link rel="dns-prefetch" href="//kasirkirania-production.up.railway.app">
    <link rel="preconnect" href="https://kasirkirania-production.up.railway.app" crossorigin="">
    
    <!-- ✅ CRITICAL: Inline critical CSS for above-the-fold content -->
    <style>
      /* Font face declaration for immediate use */
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }
      
      /* Critical loading styles */
      #root {
        min-height: 100vh;
      }
      
      .loading-spinner {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #f8fafc;
      }
      
      .spinner {
        animation: spin 1s linear infinite;
        border: 3px solid #e2e8f0;
        border-top: 3px solid #3b82f6;
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      /* Critical above-the-fold styles */
      body {
        margin: 0;
        padding: 0;
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
          'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
          sans-serif;
        font-feature-settings: 'cv11', 'ss01';
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background-color: #f9fafb;
        color: #1f2937;
        line-height: 1.6;
      }
      
      /* Loading animation */
      .animate-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      
      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
      }
      
      /* Critical utility classes */
      .bg-gray-50 { background-color: #f9fafb; }
      .bg-gray-100 { background-color: #f3f4f6; }
      .bg-gray-200 { background-color: #e5e7eb; }
      .bg-white { background-color: #ffffff; }
      .rounded-2xl { border-radius: 1rem; }
      .shadow-lg { 
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
      }
      
      /* Critical carousel styles */
      .carousel-container {
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        background: #f3f4f6;
        border-radius: 1rem;
        overflow: hidden;
      }
      
      .carousel-image {
        width: 100%;
        height: 400px;
        -o-object-fit: cover;
           object-fit: cover;
        display: block;
      }
      
      @media (max-width: 640px) {
        .carousel-image {
          height: 200px;
        }
      }
      
      /* Critical category grid styles */
      .category-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 0.75rem;
        padding: 1rem;
        background: white;
        border-radius: 1rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      }
      
      @media (min-width: 640px) {
        .category-grid {
          grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
          gap: 1rem;
          padding: 1.5rem;
        }
      }
      
      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.75rem;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        transition: all 0.2s ease;
        text-decoration: none;
        color: inherit;
        min-height: 100px;
      }
      
      .category-item:hover {
        background: white;
        border-color: #3b82f6;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      }
      
      .category-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      
      .category-name {
        font-size: 0.75rem;
        font-weight: 600;
        text-align: center;
        color: #1f2937;
        line-height: 1.2;
      }
      
      @media (min-width: 640px) {
        .category-icon {
          width: 56px;
          height: 56px;
        }
        .category-name {
          font-size: 0.875rem;
        }
      }
      
      /* Critical product card styles */
      .product-card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
        border: 1px solid #e5e7eb;
      }
      
      .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
      }
      
      .product-image {
        width: 100%;
        height: 200px;
        -o-object-fit: cover;
           object-fit: cover;
        background: #f3f4f6;
        display: block;
      }
      
      .product-info {
        padding: 1rem;
      }
      
      .product-price {
        font-size: 1.25rem;
        font-weight: 600;
        color: #3b82f6;
        margin-bottom: 0.5rem;
      }
      
      .product-title {
        font-size: 0.875rem;
        font-weight: 500;
        color: #1f2937;
        line-height: 1.4;
        margin-bottom: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      /* Critical button styles */
      .btn-primary {
        background: #3b82f6;
        color: white;
        padding: 0.75rem 1rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
        width: 100%;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
      }
      
      .btn-primary:hover {
        background: #2563eb;
        transform: translateY(-1px);
      }
      
      .btn-secondary {
        background: #fbbf24;
        color: #1f2937;
        padding: 0.75rem 1rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
        width: 100%;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
      }
      
      .btn-secondary:hover {
        background: #f59e0b;
        transform: translateY(-1px);
      }
      
      /* Critical layout styles */
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
      }
      
      @media (min-width: 640px) {
        .container {
          padding: 0 1.5rem;
        }
      }
      
      @media (min-width: 1024px) {
        .container {
          padding: 0 2rem;
        }
      }
      
      .grid {
        display: grid;
        gap: 1rem;
      }
      
      .grid-2 {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .grid-3 {
        grid-template-columns: repeat(3, 1fr);
      }
      
      .grid-4 {
        grid-template-columns: repeat(4, 1fr);
      }
      
      .grid-5 {
        grid-template-columns: repeat(5, 1fr);
      }
      
      @media (max-width: 640px) {
        .grid-3 {
          grid-template-columns: repeat(2, 1fr);
        }
        .grid-4 {
          grid-template-columns: repeat(2, 1fr);
        }
        .grid-5 {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      
      /* Critical skeleton loading styles */
      .skeleton-carousel {
        width: 100%;
        height: 400px;
        background: #e5e7eb;
        border-radius: 1rem;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      
      @media (max-width: 640px) {
        .skeleton-carousel {
          height: 200px;
        }
      }
      
      .skeleton-category {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.75rem;
        background: #f3f4f6;
        border-radius: 0.75rem;
        min-height: 100px;
      }
      
      .skeleton-category-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #e5e7eb;
        margin-bottom: 0.5rem;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      
      .skeleton-category-name {
        width: 60px;
        height: 12px;
        background: #e5e7eb;
        border-radius: 0.25rem;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      
      .skeleton-product {
        background: white;
        border-radius: 1rem;
        overflow: hidden;
        border: 1px solid #e5e7eb;
      }
      
      .skeleton-product-image {
        width: 100%;
        height: 200px;
        background: #e5e7eb;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      
      .skeleton-product-info {
        padding: 1rem;
      }
      
      .skeleton-product-title {
        width: 100%;
        height: 16px;
        background: #e5e7eb;
        border-radius: 0.25rem;
        margin-bottom: 0.5rem;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      
      .skeleton-product-price {
        width: 80px;
        height: 20px;
        background: #e5e7eb;
        border-radius: 0.25rem;
        margin-bottom: 0.5rem;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      
      .skeleton-product-button {
        width: 100%;
        height: 44px;
        background: #e5e7eb;
        border-radius: 0.5rem;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      
      /* Hide elements until fully loaded */
      .lazy-content {
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      .lazy-content.loaded {
        opacity: 1;
      }
      
      /* Critical header styles */
      .header {
        background: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        position: sticky;
        top: 0;
        z-index: 1000;
        border-bottom: 1px solid #e5e7eb;
      }
      
      .nav-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
      }
      
      .logo {
        font-size: 1.5rem;
        font-weight: 700;
        color: #3b82f6;
      }
      
      /* Critical responsive utilities */
      .aspect-square {
        aspect-ratio: 1 / 1;
      }
      
      .aspect-video {
        aspect-ratio: 16 / 9;
      }
      
      .object-cover {
        -o-object-fit: cover;
           object-fit: cover;
      }
      
      .object-center {
        -o-object-position: center;
           object-position: center;
      }
      
      /* Critical text utilities */
      .text-center { text-align: center; }
      .text-sm { font-size: 0.875rem; }
      .text-base { font-size: 1rem; }
      .text-lg { font-size: 1.125rem; }
      .text-xl { font-size: 1.25rem; }
      .text-2xl { font-size: 1.5rem; }
      .font-medium { font-weight: 500; }
      .font-semibold { font-weight: 600; }
      .font-bold { font-weight: 700; }
      
      /* Critical spacing utilities */
      .p-4 { padding: 1rem; }
      .p-6 { padding: 1.5rem; }
      .px-4 { padding-left: 1rem; padding-right: 1rem; }
      .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
      .m-4 { margin: 1rem; }
      .mb-4 { margin-bottom: 1rem; }
      .mb-6 { margin-bottom: 1.5rem; }
      .mb-8 { margin-bottom: 2rem; }
      
      /* Critical color utilities */
      .text-gray-600 { color: #6b7280; }
      .text-gray-900 { color: #1f2937; }
      .text-blue-600 { color: #2563eb; }
      
      /* Critical responsive visibility */
      @media (max-width: 640px) {
        .hidden-mobile { display: none; }
      }
      
      @media (min-width: 641px) {
        .hidden-desktop { display: none; }
      }
      
      /* Critical layout utilities */
      .flex { display: flex; }
      .grid { display: grid; }
      .block { display: block; }
      .inline-block { display: inline-block; }
      .hidden { display: none; }
      
      /* Critical positioning */
      .relative { position: relative; }
      .absolute { position: absolute; }
      .fixed { position: fixed; }
      .sticky { position: sticky; }
      
      /* Critical sizing */
      .w-full { width: 100%; }
      .h-full { height: 100%; }
      .min-h-screen { min-height: 100vh; }
      .max-w-7xl { max-width: 80rem; }
      .mx-auto { margin-left: auto; margin-right: auto; }
      
      /* Critical background */
      .bg-white { background-color: #ffffff; }
      .bg-gray-50 { background-color: #f9fafb; }
      .bg-blue-600 { background-color: #2563eb; }
      
      /* Critical border */
      .border { border-width: 1px; }
      .rounded-lg { border-radius: 0.5rem; }
      .rounded-xl { border-radius: 0.75rem; }
      
      /* Critical shadow */
      .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
      
      /* Critical z-index */
      .z-10 { z-index: 10; }
      .z-50 { z-index: 50; }
    </style>
    
    <!-- Resource hints for critical resources -->
    <!-- Vite will auto-generate modulepreload links during build -->
    
    <!-- ✅ ULTRA-AGGRESSIVE: Inline critical CSS and defer non-critical with JavaScript -->
    <script>
      // Inline critical CSS loading with aggressive optimization
      (function() {
        var css = document.createElement('link');
        css.rel = 'stylesheet';
        css.href = '/assets/main.css';
        css.media = 'print';
        css.onload = function() {
          this.media = 'all';
        };
        document.head.appendChild(css);
        
        // Load Google Fonts with same technique
        var fonts = document.createElement('link');
        fonts.rel = 'stylesheet';
        fonts.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap';
        fonts.media = 'print';
        fonts.onload = function() {
          this.media = 'all';
        };
        document.head.appendChild(fonts);
      })();
    </script><link rel="stylesheet" href="/assets/main.css" media="all"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" media="all">
    
    <!-- Dynamic per-route meta (title/description/canonical/OG) without extra libs -->
    <script>
      (function(){
        try {
          var origin = location.origin;
          var path = location.pathname;
          var params = new URLSearchParams(location.search);
          function setMeta(name, content){
            if (!content) return; 
            var m = document.querySelector('meta[name="'+name+'"]');
            if (!m) { m = document.createElement('meta'); m.setAttribute('name', name); document.head.appendChild(m); }
            m.setAttribute('content', content);
          }
          function setOG(property, content){
            if (!content) return; 
            var m = document.querySelector('meta[property="'+property+'"]');
            if (!m) { m = document.createElement('meta'); m.setAttribute('property', property); document.head.appendChild(m); }
            m.setAttribute('content', content);
          }
          function setTitle(t){ if (t) document.title = t; }
          function setCanonical(u){
            if (!u) return;
            var l = document.querySelector('link[rel="canonical"]');
            if (!l) { l = document.createElement('link'); l.setAttribute('rel','canonical'); document.head.appendChild(l); }
            l.setAttribute('href', u);
          }
          // Default fallback
          var siteName = 'KSJShop Bangunan';
          var defaultDesc = 'Supplier perkakas lengkap untuk toko bangunan. Grosir gembok, kunci pintu, kran sanitary, kawat, obeng, tang dan lainnya.';
          // Kategori page
          if (path === '/produk' && (params.has('kategori') || params.has('search'))){
            var catId = params.get('kategori');
            var searchQ = params.get('search');
            var title;
            if (searchQ) {
              title = searchQ + ' | ' + siteName;
              setTitle(title);
              setMeta('description', defaultDesc);
              setCanonical(location.href.split('#')[0]);
              setOG('og:title', title);
              setOG('og:description', defaultDesc);
              setOG('og:url', location.href);
            } else if (catId) {
              fetch('https://kasirkirania-production.up.railway.app/web/kategori-produk').then(function(r){return r.ok?r.json():null}).then(function(js){
                var list = (js && (js.data || js)) || [];
                var found = Array.isArray(list) ? list.find(function(c){ return c.id === catId; }) : null;
                var catName = found && (found.namaKategori || found.kategoriProdukNama || found.nama || found.name);
                title = (catName ? (catName + ' | ' + siteName) : siteName);
                setTitle(title);
                setMeta('description', defaultDesc);
                setCanonical(location.href.split('#')[0]);
                setOG('og:title', title);
                setOG('og:description', defaultDesc);
                setOG('og:url', location.href);
              }).catch(function(){});
            }
          }
          // Produk page
          var m = path.match(/^\/produk\/([^\/?#]+)/);
          if (m){
            var slug = decodeURIComponent(m[1]);
            fetch('https://kasirkirania-production.up.railway.app/web/produk/'+encodeURIComponent(slug)).then(function(r){return r.ok?r.json():null}).then(function(js){
              if(!js) return; var d=js.data||js;
              var name = d.judulInduk || d.judul || d.nama || d.name;
              var title = (name ? (name + ' | ' + siteName) : siteName);
              var desc = d.deskripsiInduk || defaultDesc;
              var img = d.fotoUtamaIndukUrl || (Array.isArray(d.galeriFotoIndukUrls) && d.galeriFotoIndukUrls[0]) || undefined;
              var canonicalSlug = d.slug || d.slugInduk;
              setTitle(title);
              setMeta('description', desc);
              setCanonical(canonicalSlug ? ('https://ksjshopbangunan.com/produk/' + canonicalSlug) : location.href.split('#')[0]);
              setOG('og:title', title);
              setOG('og:description', desc);
              setOG('og:url', location.href);
              if (img) setOG('og:image', img);
            }).catch(function(){});
          }
        } catch(e){}
      })();
    </script>

    <!-- Preload banner DIMATIKAN: BannerPreloader di React (MainCarousel) sudah handle dengan URL yang benar -->

    <!-- Default lazy-loading and decoding for images -->
    <script>
      (function(){
        try {
          var setDefaults = function(){
            document.querySelectorAll('img').forEach(function(img){
              if(!img.hasAttribute('loading')) img.setAttribute('loading','lazy');
              if(!img.hasAttribute('decoding')) img.setAttribute('decoding','async');
              if(!img.width && img.naturalWidth) img.setAttribute('width', img.naturalWidth);
              if(!img.height && img.naturalHeight) img.setAttribute('height', img.naturalHeight);
            });
          };
          if (document.readyState === 'complete' || document.readyState === 'interactive') setDefaults();
          else document.addEventListener('DOMContentLoaded', setDefaults);
        } catch(e){}
      })();
    </script>
    <!-- Fallback for users with JavaScript disabled -->
    <noscript>
      <link rel="stylesheet" href="/assets/main.css">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
    </noscript>
    

    
    <!-- ✅ PRECONNECT TO API DOMAIN -->
    <link rel="preconnect" href="https://api.ksjshopbangunan.com">
    <link rel="dns-prefetch" href="https://api.ksjshopbangunan.com">
    
    <!-- ✅ PRECONNECT TO SUPABASE FOR IMAGES -->
    <link rel="preconnect" href="https://gvqzlfkdofvlfimzouov.supabase.co">
    <link rel="dns-prefetch" href="https://gvqzlfkdofvlfimzouov.supabase.co">
    
    <link rel="canonical" href="https://ksjshopbangunan.com/">
    <title>Grosir Perkakas &amp; Hardware Toko Bangunan Malang | KSJSHOPTEK - Grosir Perkakas Malang</title>
    
    <!-- Schema.org structured data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "HomeImprovementStore",
      "name": "CV Kirania Berkah Anugrah",
      "alternateName": ["KSJShop Bangunan", "KSJSHOPTEK", "KSJSHOP"],
      "description": "Grosir Perkakas dan Hardware Toko Bangunan. Supplier perkakas lengkap untuk kebutuhan toko bangunan dan rumah tangga.",
      "url": "https://ksjshopbangunan.com/",
      "telephone": "+62-857-5528-2807",
      "image": "https://ksjshopbangunan.com/logo/ksjshop-logo.png",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "Jl. Kapi Minda No.Raya 10a, RW.20, Keduyo, Mangliawan",
        "addressLocality": "Kec. Pakis, Kabupaten Malang",
        "addressRegion": "Jawa Timur",
        "postalCode": "65154",
        "addressCountry": "ID"
      },
      "geo": {
        "@type": "GeoCoordinates",
        "latitude": "-7.9638",
        "longitude": "112.6638"
      },
      "openingHoursSpecification": [
        {"@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"], "opens": "08:00", "closes": "16:30"}
      ],
      "priceRange": "$$",
      "paymentAccepted": ["Cash", "Credit Card", "Bank Transfer"],
      "currenciesAccepted": "IDR",
      "sameAs": [
        "https://www.instagram.com/ksjshoptek/",
        "https://www.tokopedia.com/ksjshoptek",
        "https://shopee.co.id/ksjshoptek",
        "https://www.facebook.com/p/Ksjshoptek-100070589511231/"
      ],
      "hasMap": "https://www.google.com/maps/place/?q=place_id:ChIJe0SBeokp1i0RNN2VfajUZrI",
      "areaServed": "ID",
      "serviceArea": { "@type": "Country", "name": "Indonesia" }
    }
    </script>
    <!-- Organization schema with contactPoint and logo -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "CV Kirania Berkah Anugrah",
      "url": "https://ksjshopbangunan.com/",
      "logo": "https://ksjshopbangunan.com/logo/ksjshop-logo.png",
      "sameAs": [
        "https://www.instagram.com/ksjshoptek/",
        "https://www.tokopedia.com/ksjshoptek",
        "https://shopee.co.id/ksjshoptek",
        "https://www.facebook.com/p/Ksjshoptek-100070589511231/"
      ],
      "contactPoint": [{
        "@type": "ContactPoint",
        "telephone": "+62-857-5528-2807",
        "contactType": "customer service",
        "areaServed": "ID",
        "availableLanguage": ["id"]
      }]
    }
    </script>
    <!-- SiteNavigationElement schema (main navigation) -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "SiteNavigationElement",
      "name": ["Home","Produk","Promo","Tentang Kami","Kontak Kami"],
      "url": [
        "https://ksjshopbangunan.com/",
        "https://ksjshopbangunan.com/produk",
        "https://ksjshopbangunan.com/promo",
        "https://ksjshopbangunan.com/tentang-kami",
        "https://ksjshopbangunan.com/kontak-kami"
      ]
    }
    </script>
    <!-- Best Sellers ItemList schema -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "name": "Produk Terlaris",
      "itemListElement": [
        {"@type": "ListItem", "position": 1, "url": "https://ksjshopbangunan.com/produk/kran-taman-isco-8005"},
        {"@type": "ListItem", "position": 2, "url": "https://ksjshopbangunan.com/produk/sarangan-got-isco-602-avur-lantai-isco"},
        {"@type": "ListItem", "position": 3, "url": "https://ksjshopbangunan.com/produk/lem-korea-isco"},
        {"@type": "ListItem", "position": 4, "url": "https://ksjshopbangunan.com/produk/harga-per-lusin-kuas-gg-pvc-isco-1"},
        {"@type": "ListItem", "position": 5, "url": "https://ksjshopbangunan.com/produk/smart-door-lock-isco-19d894"},
        {"@type": "ListItem", "position": 6, "url": "https://ksjshopbangunan.com/produk/kunci-pintu-isco-bm03"},
        {"@type": "ListItem", "position": 7, "url": "https://ksjshopbangunan.com/produk/harga-per-lusin-sealant-handsome-kecil"},
        {"@type": "ListItem", "position": 8, "url": "https://ksjshopbangunan.com/produk/harga-per-lusin-sealant-handsome-besar"},
        {"@type": "ListItem", "position": 9, "url": "https://ksjshopbangunan.com/produk/diamond-wheel-batu-potong-maxtech-merah"},
        {"@type": "ListItem", "position": 10, "url": "https://ksjshopbangunan.com/produk/hand-shower-isco-sc21"},
        {"@type": "ListItem", "position": 11, "url": "https://ksjshopbangunan.com/produk/hand-shower-isco-sc24"}
      ]
    }
    </script>
    <!-- WebSite schema with SearchAction -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "KSJShop Bangunan",
      "url": "https://ksjshopbangunan.com/",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://ksjshopbangunan.com/produk?search={search_term_string}",
        "query-input": "required name=search_term_string"
      },
      "publisher": { "@type": "Organization", "name": "CV Kirania Berkah Anugrah" }
    }
    </script>
    <script type="module" crossorigin="" src="/assets/index-W41Bpk69.js"></script>
    <link rel="modulepreload" crossorigin="" href="/js/react-core-DwBZcCeU.js">
    <link rel="modulepreload" crossorigin="" href="/js/vendor-7Yk48nT2.js">
    <link rel="stylesheet" crossorigin="" href="/css/index-CqvZ7tnb.css">
  <style>
  @keyframes slide-in {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  .animate-slide-in {
    animation: slide-in 0.3s ease-out;
  }
</style><link rel="dns-prefetch" href="https://kasirkirania-production.up.railway.app"><link rel="dns-prefetch" href="https://api.duitku.com"><link rel="dns-prefetch" href="https://api.biteship.com"><link rel="modulepreload" as="script" crossorigin="" href="/js/FloatingBotButton-Dc3Zj8Vo.js"><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-H5T1Z81JWG"></script><script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    
    // ✅ CRITICAL: Configure consent mode for privacy compliance
    gtag('consent', 'default', {
      'analytics_storage': 'granted',
      'ad_storage': 'denied',
      'ad_user_data': 'denied',
      'ad_personalization': 'denied',
      'wait_for_update': 500
    });
    
    gtag('config', 'G-H5T1Z81JWG', {
      // ✅ PRIVACY: Use first-party cookies only
      send_page_view: false, // We'll send manually for SPA
      cookie_domain: 'ksjshopbangunan.com', // First-party domain
      cookie_expires: 63072000, // 2 years in seconds
      cookie_update: true,
      cookie_flags: 'SameSite=Lax;Secure', // Enhanced security
      
      // ✅ PRIVACY: Disable advertising features
      allow_google_signals: false,
      allow_ad_personalization_signals: false,
      
      // ✅ PERFORMANCE: Enhanced measurement settings
      enhanced_measurement: {
        scrolls: true,
        outbound_clicks: true,
        site_search: false, // We handle this manually
        video_engagement: false,
        file_downloads: true
      },
      
      // ✅ BUSINESS: Custom parameters for hardware business
      custom_map: {
        'custom_parameter_1': 'product_category',
        'custom_parameter_2': 'brand_name',
        'custom_parameter_3': 'business_type'
      },
      
      // ✅ PRIVACY: Data retention settings
      anonymize_ip: true, // This is deprecated but included for older versions
      
      // ✅ PERFORMANCE: Client-side configuration
      transport_type: 'beacon', // Use navigator.sendBeacon when available
      linker: {
        domains: ['ksjshopbangunan.com']
      }
    });
  </script><link rel="modulepreload" as="script" crossorigin="" href="/js/SocialProofBanner-CJrRZd_4.js"><link rel="canonical" href="https://ksjshopbangunan.com" data-rh="true"><link rel="dns-prefetch" href="//kasirkirania-production.up.railway.app" data-rh="true"><link rel="dns-prefetch" href="//api.duitku.com" data-rh="true"><link rel="dns-prefetch" href="//api.biteship.com" data-rh="true"><link rel="manifest" href="/manifest.json" data-rh="true"><link rel="apple-touch-icon" href="/ksjshop-icon-128x128.png" data-rh="true"><link rel="apple-touch-icon" sizes="120x120" href="/ksjshop-icon-128x128.png" data-rh="true"><link rel="apple-touch-icon" sizes="152x152" href="/ksjshop-icon-128x128.png" data-rh="true"><link rel="apple-touch-icon" sizes="167x167" href="/ksjshop-icon-128x128.png" data-rh="true"><link rel="apple-touch-icon" sizes="180x180" href="/ksjshop-icon-128x128.png" data-rh="true"><meta name="description" content="Supplier terpercaya grosir perkakas dan hardware toko bangunan. Jual berbagai produk perkakas, kran &amp; sanitary, power tools, alat keselamatan, hardware &amp; aksesoris dari brand ternama seperti ISCO, MAXTECH, BOSCH, ARMADA dari Malang ke seluruh Indonesia menggunakan kurir terpercaya JNE, J&amp;T Express, SiCepat, TIKI. Pengiriman ke 37 provinsi dari Aceh hingga Papua dengan harga grosir terbaik." data-rh="true"><meta name="keywords" content="grosir perkakas malang, supplier hardware toko bangunan, kunci pintu digital, kran sanitary, obeng bosch, tang maxtech, helm proyek, gembok isco, mata bor armada, diamond wheel toho, mesin gerinda bosch modern, lem rajawali, sealant jason amico, kran isco alinco owner, tang armada yozuri tokio, mata bor dakar black foot, engsel grt, gunting dahan yap toho, afur isco alinco owner, body pelor isco yozuri, pompa air isco, kuas dakar cpt national, water level isco, gerobak pvc besi isco, sealtape maxtech, tatah maxtech, gergaji maxtech cpt national toho, mesin amplas bosch, mesin planner bosch modern, bor charger modern, circular saw modern, gembok cpt national armada, mata obeng angin black foot, kunci drilling black foot, tct black foot, kasutan owner, kran cabang pvc owner, diamond wheel turbo toho, gunting dahan toho yap, roda mati hidup tokio, flinkote tokio, topeng las tokio, catut jordan, tang kakak tua jordan, sarung tangan jason, gate valve bonucci, waterbath alinco, floorstainer alinco, pembuangan bak alinco, pengiriman sumatra, pengiriman jawa, pengiriman bali, pengiriman kalimantan, pengiriman sulawesi, pengiriman maluku, pengiriman papua, jne kurir, jnt kurir, sicepat kurir, tiki kurir, supplier perkakas medan, supplier perkakas palembang, supplier perkakas denpasar, supplier perkakas balikpapan, supplier perkakas manado, supplier perkakas ambon, supplier perkakas jayapura, tokopedia ksjshoptek, shopee ksjshopmlg, toko perkakas online terpercaya, grosir perkakas malang, supplier hardware toko bangunan, perkakas murah grosir, kran sanitary grosir, power tools supplier, alat keselamatan, hardware building malang, alat pertukangan grosir, perkakas brand ternama, supplier perkakas indonesia, hardware building malang, pengiriman sumatra, pengiriman jawa, pengiriman kalimantan, pengiriman sulawesi" data-rh="true"><meta name="author" content="KSJSHOPTEK" data-rh="true"><meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" data-rh="true"><meta property="og:type" content="website" data-rh="true"><meta property="og:title" content="Grosir Perkakas &amp; Hardware Toko Bangunan Malang | KSJSHOPTEK - Grosir Perkakas Malang" data-rh="true"><meta property="og:description" content="Supplier terpercaya grosir perkakas dan hardware toko bangunan. Jual berbagai produk perkakas, kran &amp; sanitary, power tools, alat keselamatan, hardware &amp; aksesoris dari brand ternama seperti ISCO, MAXTECH, BOSCH, ARMADA dari Malang ke seluruh Indonesia menggunakan kurir terpercaya JNE, J&amp;T Express, SiCepat, TIKI. Pengiriman ke 37 provinsi dari Aceh hingga Papua dengan harga grosir terbaik." data-rh="true"><meta property="og:image" content="https://ksjshopbangunan.com/logo/ksjshop-logo.png" data-rh="true"><meta property="og:url" content="https://ksjshopbangunan.com" data-rh="true"><meta property="og:site_name" content="KSJSHOPTEK" data-rh="true"><meta property="og:locale" content="id_ID" data-rh="true"><meta property="og:locale:alternate" content="en_US" data-rh="true"><meta property="og:locale:alternate" content="en_GB" data-rh="true"><meta property="og:image:width" content="1200" data-rh="true"><meta property="og:image:height" content="630" data-rh="true"><meta property="og:image:alt" content="Grosir Perkakas &amp; Hardware Toko Bangunan Malang | KSJSHOPTEK - Grosir Perkakas Malang" data-rh="true"><meta property="og:image:type" content="image/png" data-rh="true"><meta name="twitter:card" content="summary_large_image" data-rh="true"><meta name="twitter:title" content="Grosir Perkakas &amp; Hardware Toko Bangunan Malang | KSJSHOPTEK - Grosir Perkakas Malang" data-rh="true"><meta name="twitter:description" content="Supplier terpercaya grosir perkakas dan hardware toko bangunan. Jual berbagai produk perkakas, kran &amp; sanitary, power tools, alat keselamatan, hardware &amp; aksesoris dari brand ternama seperti ISCO, MAXTECH, BOSCH, ARMADA dari Malang ke seluruh Indonesia menggunakan kurir terpercaya JNE, J&amp;T Express, SiCepat, TIKI. Pengiriman ke 37 provinsi dari Aceh hingga Papua dengan harga grosir terbaik." data-rh="true"><meta name="twitter:image" content="https://ksjshopbangunan.com/logo/ksjshop-logo.png" data-rh="true"><meta name="twitter:image:alt" content="Grosir Perkakas &amp; Hardware Toko Bangunan Malang | KSJSHOPTEK - Grosir Perkakas Malang" data-rh="true"><meta name="twitter:site" content="@ksjshoptek" data-rh="true"><meta name="twitter:creator" content="@ksjshoptek" data-rh="true"><meta name="twitter:label4" content="Phone" data-rh="true"><meta name="twitter:data4" content="0857-5528-2807" data-rh="true"><meta name="twitter:label5" content="Location" data-rh="true"><meta name="twitter:data5" content="Malang, Indonesia" data-rh="true"><meta name="geo.region" content="ID" data-rh="true"><meta name="geo.placename" content="Malang, Indonesia" data-rh="true"><meta name="geo.position" content="-7.966620;112.632629" data-rh="true"><meta name="ICBM" content="-7.966620, 112.632629" data-rh="true"><meta name="business:contact_data:locality" content="Malang" data-rh="true"><meta name="business:contact_data:region" content="Jawa Timur" data-rh="true"><meta name="business:contact_data:country_name" content="Indonesia" data-rh="true"><meta name="business:service_area:country" content="Indonesia" data-rh="true"><meta name="business:service_area:radius" content="5000" data-rh="true"><meta name="format-detection" content="telephone=yes" data-rh="true"><meta name="apple-mobile-web-app-capable" content="yes" data-rh="true"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" data-rh="true"><meta name="apple-mobile-web-app-title" content="KSJSHOPTEK" data-rh="true"><meta name="apple-touch-fullscreen" content="yes" data-rh="true"><meta name="apple-mobile-web-app-capable" content="yes" data-rh="true"><meta name="mobile-web-app-capable" content="yes" data-rh="true"><meta name="theme-color" content="#1f2937" data-rh="true"><meta property="og:type" content="website" data-rh="true"><meta property="og:title" content="KSJSHOPTEK - Grosir Perkakas &amp; Hardware Toko Bangunan Malang" data-rh="true"><meta property="og:description" content="Supplier terpercaya grosir perkakas dan hardware toko bangunan. Jual produk brand ISCO, MAXTECH, BOSCH, MODERN, ARMADA, YOZURI, TOHO dari Malang ke seluruh Indonesia." data-rh="true"><meta property="og:image" content="https://ksjshopbangunan.com/logo/ksjshop-logo.png" data-rh="true"><meta property="og:url" content="https://ksjshopbangunan.com" data-rh="true"><meta property="og:site_name" content="KSJSHOPTEK" data-rh="true"><meta property="og:locale" content="id_ID" data-rh="true"><meta property="og:locale:alternate" content="en_US" data-rh="true"><meta property="og:locale:alternate" content="en_GB" data-rh="true"><meta property="og:image:width" content="1200" data-rh="true"><meta property="og:image:height" content="630" data-rh="true"><meta property="og:image:alt" content="KSJSHOPTEK - Grosir Perkakas Malang" data-rh="true"><meta property="og:image:type" content="image/png" data-rh="true"><meta property="og:price:amount" content="null" data-rh="true"><meta property="og:price:currency" content="IDR" data-rh="true"><meta property="og:availability" content="out of stock" data-rh="true"><meta property="og:brand" content="KSJSHOPTEK" data-rh="true"><meta property="og:category" content="Hardware &amp; Tools" data-rh="true"><meta property="og:phone_number" content="0857-5528-2807" data-rh="true"><meta property="og:email" content="info@ksjshopbangunan.com" data-rh="true"><meta property="og:street_address" content="Jl. Kapi Minda No.Raya 10a, RW.20, Keduyo, Mangliawan" data-rh="true"><meta property="og:locality" content="Kec. Pakis, Kabupaten Malang" data-rh="true"><meta property="og:region" content="Jawa Timur" data-rh="true"><meta property="og:postal_code" content="65154" data-rh="true"><meta property="og:country_name" content="Indonesia" data-rh="true"><meta property="og:business_hours" content="Mo-Fr 08:00-17:00; Sa 08:00-15:00" data-rh="true"><meta property="og:business_type" content="Hardware Store" data-rh="true"><meta property="og:business_category" content="Tools &amp; Hardware" data-rh="true"><meta property="og:business_description" content="Supplier grosir perkakas dan hardware untuk toko bangunan dan kontraktor" data-rh="true"><meta property="og:see_also" content="https://www.tokopedia.com/ksjshoptek" data-rh="true"><meta property="og:see_also" content="https://shopee.co.id/ksjshopmlg" data-rh="true"><meta property="og:see_also" content="https://katalogkirania.netlify.app" data-rh="true"><meta property="twitter:card" content="summary_large_image" data-rh="true"><meta property="twitter:title" content="KSJSHOPTEK - Grosir Perkakas &amp; Hardware Malang" data-rh="true"><meta property="twitter:description" content="Supplier terpercaya grosir perkakas dan hardware toko bangunan. Pengiriman ke seluruh Indonesia." data-rh="true"><meta property="twitter:image" content="https://ksjshopbangunan.com/logo/ksjshop-logo.png" data-rh="true"><meta property="twitter:url" content="https://ksjshopbangunan.com" data-rh="true"><meta property="twitter:image:alt" content="KSJSHOPTEK - Grosir Perkakas Malang" data-rh="true"><meta property="twitter:site" content="@ksjshoptek" data-rh="true"><meta property="twitter:creator" content="@ksjshoptek" data-rh="true"><meta property="twitter:label1" content="Price" data-rh="true"><meta property="twitter:data1" content="Contact for price" data-rh="true"><meta property="twitter:label2" content="Brand" data-rh="true"><meta property="twitter:data2" content="KSJSHOPTEK" data-rh="true"><meta property="twitter:label3" content="Availability" data-rh="true"><meta property="twitter:data3" content="Out of Stock" data-rh="true"><meta property="twitter:label4" content="Phone" data-rh="true"><meta property="twitter:data4" content="0857-5528-2807" data-rh="true"><meta property="twitter:label5" content="Location" data-rh="true"><meta property="twitter:data5" content="Malang, Indonesia" data-rh="true"><meta property="linkedin:title" content="KSJSHOPTEK - Leading Hardware Supplier in Malang" data-rh="true"><meta property="linkedin:description" content="Professional hardware and tools supplier serving construction industry across Indonesia. Quality products from trusted brands." data-rh="true"><meta property="linkedin:image" content="https://ksjshopbangunan.com/logo/ksjshop-logo.png" data-rh="true"><meta property="linkedin:url" content="https://ksjshopbangunan.com" data-rh="true"><meta property="linkedin:company" content="KSJSHOPTEK" data-rh="true"><meta property="linkedin:industry" content="Construction &amp; Hardware" data-rh="true"><meta property="linkedin:location" content="Malang, East Java, Indonesia" data-rh="true"><meta property="linkedin:website" content="https://ksjshopbangunan.com" data-rh="true"><meta property="linkedin:phone" content="+62857-5528-2807" data-rh="true"><meta property="linkedin:email" content="info@ksjshopbangunan.com" data-rh="true"><meta property="linkedin:product_name" content="Hardware &amp; Tools" data-rh="true"><meta property="linkedin:product_category" content="Construction Supplies" data-rh="true"><meta property="linkedin:product_brand" content="KSJSHOPTEK" data-rh="true"><meta property="linkedin:product_price" content="Contact for pricing" data-rh="true"><meta property="pinterest:title" content="KSJSHOPTEK - Quality Hardware &amp; Tools" data-rh="true"><meta property="pinterest:description" content="Discover premium hardware and tools for your construction needs. Professional supplier with nationwide delivery." data-rh="true"><meta property="pinterest:image" content="https://ksjshopbangunan.com/logo/ksjshop-logo.png" data-rh="true"><meta property="pinterest:url" content="https://ksjshopbangunan.com" data-rh="true"><meta property="pinterest:product_name" content="Hardware &amp; Tools Collection" data-rh="true"><meta property="pinterest:product_price" content="Contact for pricing" data-rh="true"><meta property="pinterest:product_currency" content="IDR" data-rh="true"><meta property="pinterest:product_availability" content="out of stock" data-rh="true"><meta property="pinterest:product_brand" content="KSJSHOPTEK" data-rh="true"><meta property="pinterest:product_category" content="Hardware &amp; Tools" data-rh="true"><meta property="pinterest:business_name" content="KSJSHOPTEK" data-rh="true"><meta property="pinterest:business_location" content="Malang, Indonesia" data-rh="true"><meta property="pinterest:business_phone" content="+62857-5528-2807" data-rh="true"><meta property="pinterest:business_website" content="https://ksjshopbangunan.com" data-rh="true"><meta property="whatsapp:business_name" content="KSJSHOPTEK" data-rh="true"><meta property="whatsapp:business_phone" content="+62857-5528-2807" data-rh="true"><meta property="whatsapp:business_address" content="Jl. Kapi Minda No.Raya 10a 20, Keduyo, Mangliawan, Kec. Pakis, Kabupaten Malang, Jawa Timur 65154" data-rh="true"><meta property="whatsapp:business_hours" content="Senin-Jumat: 08:00-17:00, Sabtu: 08:00-15:00" data-rh="true"><meta property="whatsapp:business_category" content="Hardware Store" data-rh="true"><meta property="whatsapp:business_description" content="Supplier grosir perkakas dan hardware untuk toko bangunan dan kontraktor" data-rh="true"><meta property="whatsapp:business_website" content="https://ksjshopbangunan.com" data-rh="true"><meta property="whatsapp:business_email" content="info@ksjshopbangunan.com" data-rh="true"><meta property="whatsapp:service_area" content="Seluruh Indonesia" data-rh="true"><meta property="whatsapp:delivery_available" content="true" data-rh="true"><meta property="whatsapp:payment_methods" content="Transfer Bank, E-Wallet, COD" data-rh="true"><meta property="whatsapp:currencies_accepted" content="IDR" data-rh="true"><meta property="tiktok:title" content="KSJSHOPTEK - Hardware &amp; Tools Supplier" data-rh="true"><meta property="tiktok:description" content="Quality hardware and tools for construction professionals. Nationwide delivery available." data-rh="true"><meta property="tiktok:image" content="https://ksjshopbangunan.com/logo/ksjshop-logo.png" data-rh="true"><meta property="tiktok:url" content="https://ksjshopbangunan.com" data-rh="true"><meta property="tiktok:business_name" content="KSJSHOPTEK" data-rh="true"><meta property="tiktok:business_category" content="Hardware &amp; Tools" data-rh="true"><meta property="tiktok:business_location" content="Malang, Indonesia" data-rh="true"><meta property="tiktok:business_phone" content="+62857-5528-2807" data-rh="true"><meta property="tiktok:business_website" content="https://ksjshopbangunan.com" data-rh="true"><meta property="tiktok:product_name" content="Hardware Collection" data-rh="true"><meta property="tiktok:product_price" content="Contact for pricing" data-rh="true"><meta property="tiktok:product_brand" content="KSJSHOPTEK" data-rh="true"><meta property="instagram:title" content="KSJSHOPTEK - Hardware &amp; Tools" data-rh="true"><meta property="instagram:description" content="Professional hardware and tools supplier. Quality products for construction industry." data-rh="true"><meta property="instagram:image" content="https://ksjshopbangunan.com/logo/ksjshop-logo.png" data-rh="true"><meta property="instagram:url" content="https://ksjshopbangunan.com" data-rh="true"><meta property="instagram:business_name" content="KSJSHOPTEK" data-rh="true"><meta property="instagram:business_category" content="Hardware Store" data-rh="true"><meta property="instagram:business_location" content="Malang, Indonesia" data-rh="true"><meta property="instagram:business_phone" content="+62857-5528-2807" data-rh="true"><meta property="instagram:business_website" content="https://ksjshopbangunan.com" data-rh="true"><meta property="instagram:product_name" content="Hardware &amp; Tools" data-rh="true"><meta property="instagram:product_price" content="Contact for pricing" data-rh="true"><meta property="instagram:product_brand" content="KSJSHOPTEK" data-rh="true"><meta property="youtube:title" content="KSJSHOPTEK - Hardware &amp; Tools Supplier" data-rh="true"><meta property="youtube:description" content="Professional hardware and tools supplier serving construction industry across Indonesia." data-rh="true"><meta property="youtube:image" content="https://ksjshopbangunan.com/logo/ksjshop-logo.png" data-rh="true"><meta property="youtube:url" content="https://ksjshopbangunan.com" data-rh="true"><meta property="youtube:video_id" content="null" data-rh="true"><meta property="youtube:channel_name" content="KSJSHOPTEK" data-rh="true"><meta property="youtube:channel_url" content="https://youtube.com/@ksjshoptek" data-rh="true"><meta property="youtube:business_name" content="KSJSHOPTEK" data-rh="true"><meta property="youtube:business_category" content="Hardware &amp; Tools" data-rh="true"><meta property="youtube:business_location" content="Malang, Indonesia" data-rh="true"><meta property="youtube:business_website" content="https://ksjshopbangunan.com" data-rh="true"><meta name="theme-color" content="#1e40af" data-rh="true"><meta name="background-color" content="#ffffff" data-rh="true"><meta name="display" content="standalone" data-rh="true"><meta name="apple-mobile-web-app-capable" content="yes" data-rh="true"><meta name="apple-mobile-web-app-status-bar-style" content="default" data-rh="true"><meta name="apple-mobile-web-app-title" content="KSJSHOPTEK" data-rh="true"><meta name="mobile-web-app-capable" content="yes" data-rh="true"><meta name="application-name" content="KSJSHOPTEK" data-rh="true"><script type="application/ld+json" data-rh="true">[{"@context":"https://schema.org","@type":"Organization","name":"KSJSHOPTEK","alternateName":["KSJ Shop","KSJSHOP","KSJShopTek","CV Kirania Berkah Anugrah"],"description":"Supplier terpercaya grosir perkakas dan hardware toko bangunan dari Malang ke seluruh Indonesia. Spesialis kunci pintu, kran, obeng, tang, helm proyek, dan perkakas brand ternama.","url":"https://ksjshopbangunan.com","logo":"https://ksjshopbangunan.com/logo/ksjshop-logo.png","image":"https://ksjshopbangunan.com/logo/ksjshop-logo.png","sameAs":["https://katalogkirania.netlify.app"],"potentialAction":{"@type":"SearchAction","target":"https://ksjshopbangunan.com/search?q={search_term_string}","query-input":"required name=search_term_string"},"contactPoint":{"@type":"ContactPoint","contactType":"customer service","telephone":"+62857-5528-2807","areaServed":"ID","availableLanguage":"Indonesian"},"address":{"@type":"PostalAddress","streetAddress":"Jl. Kapi Minda No.Raya 10a 20, Keduyo, Mangliawan","addressLocality":"Kec. Pakis, Kabupaten Malang","addressRegion":"Jawa Timur","postalCode":"65154","addressCountry":"ID"},"geo":{"@type":"GeoCoordinates","latitude":"-7.9638","longitude":"112.6638"},"areaServed":{"@type":"Country","name":"Indonesia"},"knowsAbout":["Grosir Perkakas","Hardware Toko Bangunan","ISCO - Kran, Afur, Body Pelor, Pompa Air, Water Level","MAXTECH - Obeng, Tatah, Diamond Wheel, Gergaji, Sealtape","CPT NATIONAL - Kran, Kuas, Gembok, Diamond Wheel","BOSCH - Mesin Gerinda, Bor, Amplas, Planner","MODERN - Mesin Gerinda, Bor Charger, Circular Saw","RAJAWALI - Lem Putih, Lem Kuning","ARMADA - Obeng, Tang, Gembok, Mata Bor","YOZURI - Tang, Obeng, Body Pelor, Kran, Afur","BLACK FOOT - TCT, Mata Bor, Kunci Drilling","OWNER - Afur, Kasutan, Kran Cabang PVC","TOHO - Diamond Wheel Turbo, Gunting Dahan","DAKAR - Mata Bor Besi, Kuas","GRT - Engsel Pintu 3-5 inch","TOKIO - Roda, Tang, Flinkote, Topeng Las","JORDAN - Kunci Pintu, Diamond Wheel, Catut","JASON - Sarung Tangan Karet, Sealant Netral","AMICO - Sealant, Kran","ALINCO - Kran, Waterbath, Afur, Floorstainer","BONUCCI - Gate Valve","YAP - Gunting Dahan"],"slogan":"Supplier Terpercaya Grosir Perkakas & Hardware Toko Bangunan","foundingDate":"2020","currenciesAccepted":"IDR","paymentAccepted":["Cash","Bank Transfer","Digital Wallet","Credit Card"]},{"@context":"https://schema.org","@type":"WebSite","name":"KSJSHOPTEK","alternateName":"KSJ Shop Bangunan","url":"https://ksjshopbangunan.com","description":"Grosir perkakas dan hardware toko bangunan terpercaya dari Malang. Supplier kunci pintu, kran, obeng, tang, helm proyek, gembok brand ISCO, TOHO, MAXTECH, BOSCH ke seluruh Indonesia.","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://ksjshopbangunan.com/produk?search={search_term_string}"},"query-input":"required name=search_term_string"},"publisher":{"@type":"Organization","name":"KSJSHOPTEK","logo":{"@type":"ImageObject","url":"https://ksjshopbangunan.com/logo/ksjshop-logo.png"}}},{"@context":"https://schema.org","@type":"Store","name":"KSJSHOPTEK","alternateName":"CV Kirania Berkah Anugrah","description":"Grosir perkakas dan hardware toko bangunan. Supplier kunci pintu digital, kran sanitary, obeng, tang, helm proyek, gembok brand ternama.","image":["https://ksjshopbangunan.com/logo/ksjshop-logo.png","https://ksjshopbangunan.com/logo/cv-kirania-logo.png"],"logo":"https://ksjshopbangunan.com/logo/ksjshop-logo.png","address":{"@type":"PostalAddress","streetAddress":"Jl. Kapi Minda No.Raya 10a 20, Keduyo, Mangliawan","addressLocality":"Kec. Pakis, Kabupaten Malang","addressRegion":"Jawa Timur","postalCode":"65154","addressCountry":"ID"},"geo":{"@type":"GeoCoordinates","latitude":"-7.9638","longitude":"112.6638"},"telephone":"+62857-5528-2807","email":"info@ksjshopbangunan.com","url":"https://ksjshopbangunan.com","priceRange":"Rp 10.000 - Rp 1.000.000","currenciesAccepted":"IDR","paymentAccepted":["Cash","Bank Transfer","Digital Wallet","Credit Card"],"areaServed":{"@type":"Country","name":"Indonesia"},"hasMerchantReturnPolicy":{"@type":"MerchantReturnPolicy","returnPolicyCategory":"https://schema.org/MerchantReturnFiniteReturnWindow","merchantReturnDays":7,"returnMethod":"https://schema.org/ReturnByMail","returnFees":"https://schema.org/FreeReturn","applicableCountry":"ID"},"shippingDetails":{"@type":"OfferShippingDetails","shippingRate":{"@type":"MonetaryAmount","currency":"IDR","value":"0"},"deliveryTime":{"@type":"ShippingDeliveryTime","handlingTime":{"@type":"QuantitativeValue","minValue":1,"maxValue":2,"unitCode":"DAY"},"transitTime":{"@type":"QuantitativeValue","minValue":1,"maxValue":7,"unitCode":"DAY"},"businessDays":{"@type":"OpeningHoursSpecification","dayOfWeek":["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]}}},"openingHours":[{"@type":"OpeningHoursSpecification","dayOfWeek":["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"opens":"08:00","closes":"17:00"}],"sameAs":["https://www.facebook.com/ksjshopbangunan","https://www.instagram.com/ksjshopbangunan","https://wa.me/6285755282807"],"hasOfferCatalog":{"@type":"OfferCatalog","name":"Katalog Perkakas & Hardware","itemListElement":[{"@type":"OfferCatalog","name":"Kran & Sanitary","description":"Kran ISCO, ALINCO, OWNER, AMICO, CPT NATIONAL. Afur ISCO, ALINCO, YOZURI. Body pelor ISCO, YOZURI. Waterbath ALINCO. Floorstainer ALINCO"},{"@type":"OfferCatalog","name":"Mesin Power Tools","description":"Mesin gerinda BOSCH, MODERN. Mesin bor BOSCH, MODERN. Mesin amplas BOSCH. Mesin planner BOSCH, MODERN. Bor charger MODERN. Circular saw MODERN"},{"@type":"OfferCatalog","name":"Alat Pertukangan","description":"Obeng MAXTECH, ARMADA, YOZURI. Tang ARMADA, YOZURI, TOKIO, JORDAN. Tatah MAXTECH. Catut JORDAN. Tang listrik, kombinasi, potong ARMADA"},{"@type":"OfferCatalog","name":"Mata Bor & Cutting Tools","description":"Mata bor ARMADA, DAKAR, BLACK FOOT. Diamond wheel MAXTECH, CPT NATIONAL, TOHO, JORDAN, TOKIO. TCT BLACK FOOT. Gergaji MAXTECH, CPT NATIONAL"},{"@type":"OfferCatalog","name":"Kunci & Gembok","description":"Kunci pintu ISCO (hitam, chrome), JORDAN. Gembok CPT NATIONAL, ARMADA. Kunci drilling BLACK FOOT"},{"@type":"OfferCatalog","name":"Lem & Sealant","description":"Lem putih, kuning RAJAWALI. Sealant JASON, AMICO. Sealtape MAXTECH"},{"@type":"OfferCatalog","name":"Hardware & Aksesoris","description":"Engsel GRT 3-5 inch. Roda mati, hidup TOKIO. Kuas DAKAR, CPT NATIONAL. Sarung tangan JASON. Gunting dahan TOHO, YAP. Gate valve BONUCCI"},{"@type":"OfferCatalog","name":"Aksesoris Khusus","description":"Pompa air ISCO. Water level ISCO. Gerobak PVC, besi ISCO. Kasutan OWNER. Kran cabang PVC OWNER. Flinkote TOKIO. Topeng las TOKIO"}]}},{"@context":"https://schema.org","@type":"Service","name":"Pengiriman Grosir Perkakas Nasional","description":"Layanan pengiriman grosir perkakas dan hardware ke seluruh Indonesia dengan kurir terpercaya JNE, J&T Express, SiCepat, TIKI, dan kurir lokal.","provider":{"@type":"Organization","name":"KSJSHOPTEK","url":"https://ksjshopbangunan.com"},"areaServed":[{"@type":"State","name":"Aceh"},{"@type":"State","name":"Sumatera Utara"},{"@type":"State","name":"Sumatera Barat"},{"@type":"State","name":"Riau"},{"@type":"State","name":"Kepulauan Riau"},{"@type":"State","name":"Jambi"},{"@type":"State","name":"Sumatera Selatan"},{"@type":"State","name":"Bangka Belitung"},{"@type":"State","name":"Bengkulu"},{"@type":"State","name":"Lampung"},{"@type":"State","name":"DKI Jakarta"},{"@type":"State","name":"Banten"},{"@type":"State","name":"Jawa Barat"},{"@type":"State","name":"Jawa Tengah"},{"@type":"State","name":"DI Yogyakarta"},{"@type":"State","name":"Jawa Timur"},{"@type":"State","name":"Bali"},{"@type":"State","name":"Nusa Tenggara Barat"},{"@type":"State","name":"Nusa Tenggara Timur"},{"@type":"State","name":"Kalimantan Barat"},{"@type":"State","name":"Kalimantan Tengah"},{"@type":"State","name":"Kalimantan Selatan"},{"@type":"State","name":"Kalimantan Timur"},{"@type":"State","name":"Kalimantan Utara"},{"@type":"State","name":"Sulawesi Utara"},{"@type":"State","name":"Gorontalo"},{"@type":"State","name":"Sulawesi Tengah"},{"@type":"State","name":"Sulawesi Barat"},{"@type":"State","name":"Sulawesi Selatan"},{"@type":"State","name":"Sulawesi Tenggara"},{"@type":"State","name":"Maluku"},{"@type":"State","name":"Maluku Utara"},{"@type":"State","name":"Papua"},{"@type":"State","name":"Papua Barat"}],"serviceType":"Pengiriman Grosir","availableChannel":{"@type":"ServiceChannel","serviceUrl":"https://ksjshopbangunan.com","servicePhone":"+62857-5528-2807"},"hasOfferCatalog":{"@type":"OfferCatalog","name":"Layanan Pengiriman","itemListElement":[{"@type":"Offer","name":"Pengiriman JNE","description":"Pengiriman via JNE ke seluruh Indonesia"},{"@type":"Offer","name":"Pengiriman J&T Express","description":"Pengiriman via J&T Express ke seluruh Indonesia"},{"@type":"Offer","name":"Pengiriman SiCepat","description":"Pengiriman via SiCepat ke seluruh Indonesia"},{"@type":"Offer","name":"Pengiriman TIKI","description":"Pengiriman via TIKI ke seluruh Indonesia"}]}}]</script><script type="application/ld+json" data-rh="true">{"@context":"https://schema.org","@type":"Organization","name":"KSJSHOPTEK","legalName":"CV Kirania Berkah Anugrah","url":"https://ksjshopbangunan.com","logo":"https://ksjshopbangunan.com/logo/ksjshop-logo.png","contactPoint":[{"@type":"ContactPoint","telephone":"0857-5528-2807","contactType":"customer service","areaServed":"ID","availableLanguage":["id"]}],"address":{"@type":"PostalAddress","streetAddress":"Jl. Kapi Minda No.Raya 10a, RW.20, Keduyo, Mangliawan","addressLocality":"Kec. Pakis, Kabupaten Malang","addressRegion":"Jawa Timur","postalCode":"65154","addressCountry":"ID"}}</script><script type="application/ld+json" data-rh="true">{"@context":"https://schema.org","@type":"Service","name":"Pengiriman Grosir Perkakas Nasional","description":"Layanan pengiriman grosir perkakas dan hardware ke seluruh Indonesia dengan kurir terpercaya JNE, J&T Express, SiCepat, TIKI, dan kurir lokal.","provider":{"@type":"Organization","name":"KSJSHOPTEK","url":"https://ksjshopbangunan.com"},"areaServed":[{"@type":"State","name":"Aceh"},{"@type":"State","name":"Sumatera Utara"},{"@type":"State","name":"Sumatera Barat"},{"@type":"State","name":"Riau"},{"@type":"State","name":"Kepulauan Riau"},{"@type":"State","name":"Jambi"},{"@type":"State","name":"Sumatera Selatan"},{"@type":"State","name":"Bangka Belitung"},{"@type":"State","name":"Bengkulu"},{"@type":"State","name":"Lampung"},{"@type":"State","name":"DKI Jakarta"},{"@type":"State","name":"Banten"},{"@type":"State","name":"Jawa Barat"},{"@type":"State","name":"Jawa Tengah"},{"@type":"State","name":"DI Yogyakarta"},{"@type":"State","name":"Jawa Timur"},{"@type":"State","name":"Bali"},{"@type":"State","name":"Nusa Tenggara Barat"},{"@type":"State","name":"Nusa Tenggara Timur"},{"@type":"State","name":"Kalimantan Barat"},{"@type":"State","name":"Kalimantan Tengah"},{"@type":"State","name":"Kalimantan Selatan"},{"@type":"State","name":"Kalimantan Timur"},{"@type":"State","name":"Kalimantan Utara"},{"@type":"State","name":"Sulawesi Utara"},{"@type":"State","name":"Gorontalo"},{"@type":"State","name":"Sulawesi Tengah"},{"@type":"State","name":"Sulawesi Barat"},{"@type":"State","name":"Sulawesi Selatan"},{"@type":"State","name":"Sulawesi Tenggara"},{"@type":"State","name":"Maluku"},{"@type":"State","name":"Maluku Utara"},{"@type":"State","name":"Papua"},{"@type":"State","name":"Papua Barat"}],"serviceType":"Pengiriman Grosir","availableChannel":{"@type":"ServiceChannel","serviceUrl":"https://ksjshopbangunan.com","servicePhone":"+62857-5528-2807"},"hasOfferCatalog":{"@type":"OfferCatalog","name":"Layanan Pengiriman","itemListElement":[{"@type":"Offer","name":"Pengiriman JNE","description":"Pengiriman via JNE ke seluruh Indonesia"},{"@type":"Offer","name":"Pengiriman J&T Express","description":"Pengiriman via J&T Express ke seluruh Indonesia"},{"@type":"Offer","name":"Pengiriman SiCepat","description":"Pengiriman via SiCepat ke seluruh Indonesia"},{"@type":"Offer","name":"Pengiriman TIKI","description":"Pengiriman via TIKI ke seluruh Indonesia"}]}}</script><link rel="dns-prefetch" href="https://kasirkirania-production.up.railway.app"><link rel="dns-prefetch" href="https://api.duitku.com"><link rel="dns-prefetch" href="https://api.biteship.com"></head>
  <body>
    <!-- Initial loading state to prevent blank screen -->
    <div id="root"><div class="min-h-screen flex flex-col bg-gray-100 relative overflow-x-hidden overflow-y-auto"><header class="bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 text-white shadow-2xl sticky top-0 z-50 border-b-2 border-blue-500/30 backdrop-blur-md transition-all duration-300 relative py-4"><div class="absolute top-0 right-0 w-32 h-16 bg-blue-500/5 rounded-full -translate-y-8 translate-x-16"></div><div class="absolute bottom-0 left-0 w-24 h-12 bg-gradient-to-tr from-yellow-400/5 to-orange-400/5 rounded-full translate-y-6 -translate-x-12"></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/3 to-transparent skew-x-12 -translate-x-full animate-shimmer-slow pointer-events-none"></div><div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center transition-all duration-300"><a class="text-3xl font-black text-transparent bg-gradient-to-r from-yellow-400 to-yellow-300 bg-clip-text hover:from-yellow-300 hover:to-yellow-200 transition-all duration-300 transform hover:scale-110 relative group" href="/">KSJShop<div class="absolute inset-0 text-3xl font-black text-yellow-400 opacity-0 group-hover:opacity-20 blur-lg transition-opacity duration-300 -z-10">KSJShop</div></a><div class="hidden md:block relative flex-1 max-w-lg mx-8 search-container"><form class="flex items-center bg-white/95 backdrop-blur-md rounded-3xl px-6 py-3 shadow-2xl hover:shadow-3xl transition-all duration-300 border-2 border-white/20 hover:border-white/40 group relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-3xl pointer-events-none"></div><input type="text" placeholder="Cari produk bahan bangunan terbaik..." class="flex-grow px-3 py-2 rounded-2xl text-sm font-medium text-gray-800 placeholder-gray-500 focus:outline-none bg-transparent relative z-10" value=""><button type="submit" aria-label="Cari" class="text-blue-600 hover:text-blue-700 p-3 rounded-2xl hover:bg-blue-50 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl relative z-10"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></button></form></div><div class="flex items-center space-x-2 sm:space-x-3"><div class="relative transform hover:scale-110 transition-all duration-300 p-2 rounded-2xl hover:bg-white/10 group"><div class="relative group"><button class="
          relative p-3 md:p-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-400/50
          text-yellow-400 hover:text-yellow-300
          
          hover:scale-110
          touch-manipulation select-none
        " aria-label="1 notifikasi belum dibaca" title="1 notifikasi belum dibaca" style="-webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell w-6 h-6 drop-shadow-lg transition-all duration-300 animate-pulse" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg><span class="absolute -top-1 -right-1 bg-yellow-400 text-blue-900 text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center ring-2 ring-white shadow-lg animate-bounce">1</span></button><div class="absolute left-1/2 -translate-x-1/2 top-full mt-2 z-50 hidden group-hover:block bg-gray-900 text-white text-xs rounded-lg px-3 py-2 shadow-lg whitespace-nowrap">1 notifikasi baru<div class="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-gray-900 rotate-45"></div></div></div></div><a class="hidden sm:flex bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-bold text-sm px-6 py-3 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-300 transform hover:scale-105 items-center gap-3 border-2 border-green-400/50 hover:border-green-300 relative overflow-hidden group" href="/register"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 rounded-2xl pointer-events-none"></div><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus relative z-10" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" x2="19" y1="8" y2="14"></line><line x1="22" x2="16" y1="11" y2="11"></line></svg><span class="hidden md:inline relative z-10">Daftar</span></a><a class="hidden sm:inline-block bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-blue-800 font-bold text-sm px-6 py-3 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-300 transform hover:scale-105 border-2 border-yellow-300/50 hover:border-yellow-200 relative overflow-hidden group" href="/login"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 rounded-2xl pointer-events-none"></div><span class="relative z-10">Masuk</span></a><button class="md:hidden p-3 rounded-2xl hover:bg-white/15 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl border border-transparent hover:border-white/20 relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 rounded-2xl pointer-events-none"></div><div class="relative z-10"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu" aria-hidden="true"><path d="M4 12h16"></path><path d="M4 18h16"></path><path d="M4 6h16"></path></svg></div></button></div></div></header><main class="flex-grow relative z-10 backdrop-blur-[0.5px]"><div class="relative"><div class="bg-gradient-to-br from-gray-50 via-blue-50/20 to-gray-50 min-h-screen"><section class="w-full relative"><div class="bg-gradient-to-br from-blue-50 via-white to-blue-50 relative h-64 sm:h-80 lg:h-96 flex items-center justify-center overflow-hidden border-b border-gray-100"><div class="absolute inset-0 bg-gradient-to-r from-blue-600/5 to-blue-800/5"></div><div class="relative z-10 text-center px-4 max-w-4xl mx-auto"><h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-3 sm:mb-4 text-gray-900 leading-tight">Produk Bahan Bangunan<span class="text-transparent bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text"> Terbaik</span></h1><p class="text-sm sm:text-lg md:text-xl mb-6 sm:mb-8 text-gray-600 max-w-2xl mx-auto leading-relaxed">Kualitas terjamin dengan harga terjangkau untuk semua kebutuhan konstruksi Anda</p><div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center"><button class="w-full sm:w-auto bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-2xl transition-all duration-300 transform hover:scale-105 shadow-xl hover:shadow-2xl relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-indigo-400 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div><span class="relative z-10">🛒 Jelajahi Semua Produk</span></button><button class="w-full sm:w-auto bg-gradient-to-r from-yellow-400 to-orange-400 hover:from-yellow-500 hover:to-orange-500 text-gray-900 font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-2xl transition-all duration-300 transform hover:scale-105 shadow-xl hover:shadow-2xl relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-r from-yellow-300 to-orange-300 opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div><span class="relative z-10">📦 Browse by Category</span></button></div></div><div class="absolute top-4 sm:top-10 right-4 sm:right-10 opacity-5"><div class="w-16 h-16 sm:w-32 sm:h-32 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-full animate-pulse"></div></div><div class="absolute bottom-4 sm:bottom-10 left-4 sm:left-10 opacity-5"><div class="w-12 h-12 sm:w-24 sm:h-24 bg-gradient-to-br from-blue-400 to-indigo-400 rounded-full animate-pulse"></div></div><div class="absolute top-1/2 left-1/4 opacity-3"><div class="w-8 h-8 sm:w-16 sm:h-16 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-full animate-bounce"></div></div></div></section><div class="bg-white/90 backdrop-blur-sm border-b border-gray-200/50"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-center gap-3 sm:gap-4 lg:gap-6 py-2 overflow-x-auto scrollbar-hide"><button class="group relative flex flex-col items-center gap-1 sm:gap-2 px-3 sm:px-4 lg:px-5 py-2 sm:py-3 rounded-2xl text-xs sm:text-sm font-medium transition-all duration-300 whitespace-nowrap min-w-[70px] sm:min-w-[80px] lg:min-w-auto transform hover:scale-[1.02] active:scale-95 text-gray-700 hover:bg-gradient-to-r hover:from-blue-50 hover:to-blue-100 hover:text-blue-600 hover:shadow-lg hover:-translate-y-0.5" title="Kategori"><div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-indigo-500 opacity-0 group-hover:opacity-5 rounded-2xl transition-opacity duration-300 pointer-events-none"></div><div class="relative flex items-center justify-center"><div class="p-1.5 sm:p-2 rounded-xl transition-all duration-300 bg-white/80 group-hover:bg-white group-hover:shadow-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grid3x3 lucide-grid-3x3 w-4 h-4" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M3 15h18"></path><path d="M9 3v18"></path><path d="M15 3v18"></path></svg></div></div><span class="text-xs sm:text-sm font-medium leading-tight text-center relative z-10 group-hover:font-semibold transition-all duration-300">Kategori</span><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 rounded-2xl overflow-hidden pointer-events-none"></div></button><button class="group relative flex flex-col items-center gap-1 sm:gap-2 px-3 sm:px-4 lg:px-5 py-2 sm:py-3 rounded-2xl text-xs sm:text-sm font-medium transition-all duration-300 whitespace-nowrap min-w-[70px] sm:min-w-[80px] lg:min-w-auto transform hover:scale-[1.02] active:scale-95 text-gray-700 hover:bg-gradient-to-r hover:from-red-50 hover:to-orange-100 hover:text-red-600 hover:shadow-lg hover:-translate-y-0.5" title="Flash Sale"><div class="absolute inset-0 bg-gradient-to-r from-red-500 to-orange-500 opacity-0 group-hover:opacity-5 rounded-2xl transition-opacity duration-300 pointer-events-none"></div><div class="relative flex items-center justify-center"><div class="p-1.5 sm:p-2 rounded-xl transition-all duration-300 bg-white/80 group-hover:bg-white group-hover:shadow-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-4 h-4" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></div><div class="absolute -top-1 -right-1 w-2 h-2 bg-gradient-to-r from-red-500 to-orange-500 rounded-full animate-pulse pointer-events-none"><div class="absolute inset-0 bg-gradient-to-r from-red-500 to-orange-500 rounded-full animate-ping opacity-75 pointer-events-none"></div></div></div><span class="text-xs sm:text-sm font-medium leading-tight text-center relative z-10 group-hover:font-semibold transition-all duration-300">Flash Sale</span><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 rounded-2xl overflow-hidden pointer-events-none"></div></button><button class="group relative flex flex-col items-center gap-1 sm:gap-2 px-3 sm:px-4 lg:px-5 py-2 sm:py-3 rounded-2xl text-xs sm:text-sm font-medium transition-all duration-300 whitespace-nowrap min-w-[70px] sm:min-w-[80px] lg:min-w-auto transform hover:scale-[1.02] active:scale-95 text-gray-500 hover:bg-gradient-to-r hover:from-gray-50 hover:to-gray-100 hover:text-gray-700 hover:shadow-md" title="Promo - Login diperlukan"><div class="absolute inset-0 bg-gradient-to-r from-yellow-500 to-amber-500 opacity-0 group-hover:opacity-5 rounded-2xl transition-opacity duration-300 pointer-events-none"></div><div class="relative flex items-center justify-center"><div class="p-1.5 sm:p-2 rounded-xl transition-all duration-300 bg-gray-100 group-hover:bg-gray-200"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tag w-4 h-4" aria-hidden="true"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock absolute -top-1 -right-1 w-3 h-3 text-gray-400 bg-white rounded-full p-0.5 pointer-events-none" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></div></div><span class="text-xs sm:text-sm font-medium leading-tight text-center relative z-10 group-hover:font-semibold transition-all duration-300">Promo<span class="text-xs text-gray-400 ml-1">🔒</span></span><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 rounded-2xl overflow-hidden pointer-events-none"></div></button><button class="group relative flex flex-col items-center gap-1 sm:gap-2 px-3 sm:px-4 lg:px-5 py-2 sm:py-3 rounded-2xl text-xs sm:text-sm font-medium transition-all duration-300 whitespace-nowrap min-w-[70px] sm:min-w-[80px] lg:min-w-auto transform hover:scale-[1.02] active:scale-95 text-gray-500 hover:bg-gradient-to-r hover:from-gray-50 hover:to-gray-100 hover:text-gray-700 hover:shadow-md" title="Wishlist - Login diperlukan"><div class="absolute inset-0 bg-gradient-to-r from-pink-500 to-rose-500 opacity-0 group-hover:opacity-5 rounded-2xl transition-opacity duration-300 pointer-events-none"></div><div class="relative flex items-center justify-center"><div class="p-1.5 sm:p-2 rounded-xl transition-all duration-300 bg-gray-100 group-hover:bg-gray-200"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart w-4 h-4" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock absolute -top-1 -right-1 w-3 h-3 text-gray-400 bg-white rounded-full p-0.5 pointer-events-none" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></div></div><span class="text-xs sm:text-sm font-medium leading-tight text-center relative z-10 group-hover:font-semibold transition-all duration-300">Wishlist<span class="text-xs text-gray-400 ml-1">🔒</span></span><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 rounded-2xl overflow-hidden pointer-events-none"></div></button><button class="group relative flex flex-col items-center gap-1 sm:gap-2 px-3 sm:px-4 lg:px-5 py-2 sm:py-3 rounded-2xl text-xs sm:text-sm font-medium transition-all duration-300 whitespace-nowrap min-w-[70px] sm:min-w-[80px] lg:min-w-auto transform hover:scale-[1.02] active:scale-95 text-gray-700 hover:bg-gradient-to-r hover:from-green-50 hover:to-emerald-100 hover:text-green-600 hover:shadow-lg hover:-translate-y-0.5" title="CS Chat"><div class="absolute inset-0 bg-gradient-to-r from-green-500 to-emerald-500 opacity-0 group-hover:opacity-5 rounded-2xl transition-opacity duration-300 pointer-events-none"></div><div class="relative flex items-center justify-center"><div class="p-1.5 sm:p-2 rounded-xl transition-all duration-300 bg-white/80 group-hover:bg-white group-hover:shadow-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle w-4 h-4" aria-hidden="true"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg></div></div><span class="text-xs sm:text-sm font-medium leading-tight text-center relative z-10 group-hover:font-semibold transition-all duration-300">CS Chat</span><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 rounded-2xl overflow-hidden pointer-events-none"></div></button></div></div></div><div class="max-w-7xl mx-auto px-4 py-8 space-y-8"><div class="text-center"><div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg p-6 border border-gray-200/50 inline-block"><div class="flex flex-col sm:flex-row items-center gap-4"><span class="text-sm text-gray-600 font-medium">📸 Ingin lihat foto produk lebih detail?</span><a href="https://katalogkirania.netlify.app/sales" target="_blank" rel="noopener noreferrer nofollow" title="Galeri foto produk visual - Showcase visual tanpa detail transaksi" class="inline-flex items-center gap-2 px-3 py-2 text-sm bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-lg border border-blue-200 hover:border-blue-300 transition-all duration-200 hover:shadow-md group"><span class="group-hover:scale-110 transition-transform duration-200"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg></span><span class="font-medium">Galeri foto produk visual</span><span class="text-xs text-blue-500 opacity-75">📸 Visual Only</span></a></div></div></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"><div class="bg-green-50 border-green-100 border rounded-2xl p-6 cursor-pointer group transition-all duration-300 hover:translate-y-[-2px] hover:bg-green-100 hover:shadow-md"><div class="flex items-start space-x-4"><div class="bg-white p-3 rounded-xl shadow-sm group-hover:shadow-md transition-all duration-300 text-green-600"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-truck w-6 h-6" aria-hidden="true"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"></path><path d="M15 18H9"></path><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"></path><circle cx="17" cy="18" r="2"></circle><circle cx="7" cy="18" r="2"></circle></svg></div><div class="flex-1"><h3 class="font-bold text-lg text-gray-900 mb-2">Gratis Ongkir</h3><p class="text-sm text-gray-600 leading-relaxed">Minimal pembelian Rp 100.000</p></div></div></div><div class="bg-blue-50 border-blue-100 border rounded-2xl p-6 cursor-pointer group transition-all duration-300 hover:translate-y-[-2px] hover:bg-blue-100 hover:shadow-md"><div class="flex items-start space-x-4"><div class="bg-white p-3 rounded-xl shadow-sm group-hover:shadow-md transition-all duration-300 text-blue-600"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield w-6 h-6" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg></div><div class="flex-1"><h3 class="font-bold text-lg text-gray-900 mb-2">Garansi Kualitas</h3><p class="text-sm text-gray-600 leading-relaxed">Produk berkualitas terjamin</p></div></div></div><div class="bg-purple-50 border-purple-100 border rounded-2xl p-6 cursor-pointer group transition-all duration-300 hover:translate-y-[-2px] hover:bg-purple-100 hover:shadow-md"><div class="flex items-start space-x-4"><div class="bg-white p-3 rounded-xl shadow-sm group-hover:shadow-md transition-all duration-300 text-purple-600"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-headphones w-6 h-6" aria-hidden="true"><path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"></path></svg></div><div class="flex-1"><h3 class="font-bold text-lg text-gray-900 mb-2">Customer Service</h3><p class="text-sm text-gray-600 leading-relaxed">Siap membantu 24/7</p></div></div></div></div><div><div class="h-80 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 animate-pulse rounded-lg relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent -skew-x-12 animate-shimmer"></div></div></div><section class="py-8 sm:py-12 bg-gray-50 relative overflow-hidden"><div class="absolute top-0 right-0 w-64 h-64 bg-blue-100/40 rounded-full blur-3xl -translate-y-32 translate-x-32"></div><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"><div class="text-center mb-8 sm:mb-12"><div class="inline-flex items-center gap-2 bg-white/80 backdrop-blur-sm px-4 py-2 rounded-full shadow-lg mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-4 h-4 text-yellow-500 fill-current" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span class="text-sm font-medium text-gray-700">Dipercaya Ribuan Pelanggan</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-4 h-4 text-yellow-500 fill-current" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 mb-3 sm:mb-4">Kenapa Pilih<span class="text-blue-600"> KSJShop</span><span class="text-2xl sm:text-3xl">?</span></h2><p class="text-sm sm:text-base text-gray-600 max-w-2xl mx-auto">Bergabunglah dengan ribuan pelanggan yang telah merasakan pengalaman berbelanja terbaik</p></div><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 mb-8 sm:mb-12"><div class="group bg-white p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 border relative overflow-hidden rounded-2xl border-gray-100" style="animation-delay: 0ms;"><div class="absolute inset-0 bg-gradient-to-br from-green-400 to-emerald-600 opacity-0 group-hover:opacity-5 transition-opacity duration-500 rounded-2xl sm:rounded-3xl"></div><div class="absolute top-0 right-0 w-8 h-8 bg-white/20 rounded-full -translate-y-4 translate-x-4 group-hover:scale-150 transition-transform duration-700"></div><div class="relative z-10"><div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-green-400 to-emerald-600 flex items-center justify-center mx-auto mb-3 sm:mb-4 group-hover:scale-105 transition-all duration-300 shadow-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield w-4 h-4 sm:w-5 sm:h-5 text-white" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg><div class="absolute inset-0 bg-gradient-to-r from-green-400 to-emerald-600 rounded-2xl opacity-0 group-hover:opacity-30 animate-ping"></div></div><h3 class="text-sm sm:text-base font-bold text-gray-900 text-center mb-1 sm:mb-2 group-hover:text-gray-800 transition-colors duration-300">100% Aman</h3><p class="text-xs text-gray-500 text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">Transaksi terjamin</p></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl sm:rounded-3xl"></div></div><div class="group bg-white p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 border relative overflow-hidden rounded-lg border-l-4 border-l-blue-200" style="animation-delay: 100ms;"><div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-blue-600 opacity-0 group-hover:opacity-5 transition-opacity duration-500 rounded-2xl sm:rounded-3xl"></div><div class="absolute top-0 right-0 w-8 h-8 bg-white/20 rounded-full -translate-y-4 translate-x-4 group-hover:scale-150 transition-transform duration-700"></div><div class="relative z-10"><div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center mx-auto mb-3 sm:mb-4 group-hover:scale-105 transition-all duration-300 shadow-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-truck w-4 h-4 sm:w-5 sm:h-5 text-white" aria-hidden="true"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"></path><path d="M15 18H9"></path><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"></path><circle cx="17" cy="18" r="2"></circle><circle cx="7" cy="18" r="2"></circle></svg><div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-blue-600 rounded-2xl opacity-0 group-hover:opacity-30 animate-ping"></div></div><h3 class="text-sm sm:text-base font-bold text-gray-900 text-center mb-1 sm:mb-2 group-hover:text-gray-800 transition-colors duration-300">Pengiriman Cepat</h3><p class="text-xs text-gray-500 text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">Same day delivery</p></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl sm:rounded-3xl"></div></div><div class="group bg-white p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 border relative overflow-hidden rounded-xl border-gray-100" style="animation-delay: 200ms;"><div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-blue-600 opacity-0 group-hover:opacity-5 transition-opacity duration-500 rounded-2xl sm:rounded-3xl"></div><div class="absolute top-0 right-0 w-8 h-8 bg-white/20 rounded-full -translate-y-4 translate-x-4 group-hover:scale-150 transition-transform duration-700"></div><div class="relative z-10"><div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center mx-auto mb-3 sm:mb-4 group-hover:scale-105 transition-all duration-300 shadow-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card w-4 h-4 sm:w-5 sm:h-5 text-white" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line></svg><div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-blue-600 rounded-2xl opacity-0 group-hover:opacity-30 animate-ping"></div></div><h3 class="text-sm sm:text-base font-bold text-gray-900 text-center mb-1 sm:mb-2 group-hover:text-gray-800 transition-colors duration-300">Pembayaran Mudah</h3><p class="text-xs text-gray-500 text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">Multi payment</p></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl sm:rounded-3xl"></div></div><div class="group bg-white p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 border relative overflow-hidden rounded-2xl border-gray-100" style="animation-delay: 300ms;"><div class="absolute inset-0 bg-gradient-to-br from-orange-400 to-red-500 opacity-0 group-hover:opacity-5 transition-opacity duration-500 rounded-2xl sm:rounded-3xl"></div><div class="absolute top-0 right-0 w-8 h-8 bg-white/20 rounded-full -translate-y-4 translate-x-4 group-hover:scale-150 transition-transform duration-700"></div><div class="relative z-10"><div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-orange-400 to-red-500 flex items-center justify-center mx-auto mb-3 sm:mb-4 group-hover:scale-105 transition-all duration-300 shadow-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users w-4 h-4 sm:w-5 sm:h-5 text-white" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg><div class="absolute inset-0 bg-gradient-to-r from-orange-400 to-red-500 rounded-2xl opacity-0 group-hover:opacity-30 animate-ping"></div></div><h3 class="text-sm sm:text-base font-bold text-gray-900 text-center mb-1 sm:mb-2 group-hover:text-gray-800 transition-colors duration-300">15K+ Pelanggan</h3><p class="text-xs text-gray-500 text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">Terpercaya</p></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl sm:rounded-3xl"></div></div><div class="group bg-white p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 border relative overflow-hidden rounded-lg border-l-4 border-l-blue-200" style="animation-delay: 400ms;"><div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-amber-600 opacity-0 group-hover:opacity-5 transition-opacity duration-500 rounded-2xl sm:rounded-3xl"></div><div class="absolute top-0 right-0 w-8 h-8 bg-white/20 rounded-full -translate-y-4 translate-x-4 group-hover:scale-150 transition-transform duration-700"></div><div class="relative z-10"><div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-yellow-400 to-amber-600 flex items-center justify-center mx-auto mb-3 sm:mb-4 group-hover:scale-105 transition-all duration-300 shadow-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award w-4 h-4 sm:w-5 sm:h-5 text-white" aria-hidden="true"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg><div class="absolute inset-0 bg-gradient-to-r from-yellow-400 to-amber-600 rounded-2xl opacity-0 group-hover:opacity-30 animate-ping"></div></div><h3 class="text-sm sm:text-base font-bold text-gray-900 text-center mb-1 sm:mb-2 group-hover:text-gray-800 transition-colors duration-300">Kualitas Terjamin</h3><p class="text-xs text-gray-500 text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">Premium quality</p></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl sm:rounded-3xl"></div></div><div class="group bg-white p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 border relative overflow-hidden rounded-xl border-gray-100" style="animation-delay: 500ms;"><div class="absolute inset-0 bg-gradient-to-br from-indigo-400 to-indigo-600 opacity-0 group-hover:opacity-5 transition-opacity duration-500 rounded-2xl sm:rounded-3xl"></div><div class="absolute top-0 right-0 w-8 h-8 bg-white/20 rounded-full -translate-y-4 translate-x-4 group-hover:scale-150 transition-transform duration-700"></div><div class="relative z-10"><div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-indigo-400 to-indigo-600 flex items-center justify-center mx-auto mb-3 sm:mb-4 group-hover:scale-105 transition-all duration-300 shadow-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock w-4 h-4 sm:w-5 sm:h-5 text-white" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><div class="absolute inset-0 bg-gradient-to-r from-indigo-400 to-indigo-600 rounded-2xl opacity-0 group-hover:opacity-30 animate-ping"></div></div><h3 class="text-sm sm:text-base font-bold text-gray-900 text-center mb-1 sm:mb-2 group-hover:text-gray-800 transition-colors duration-300">24/7 Support</h3><p class="text-xs text-gray-500 text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">Siap membantu</p></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl sm:rounded-3xl"></div></div></div><div class="bg-white/60 backdrop-blur-md rounded-3xl p-6 sm:p-8 shadow-xl border border-white/50"><div class="flex items-center justify-center mb-4"><div class="flex items-center gap-2 bg-gradient-to-r from-green-500 to-emerald-500 text-white px-4 py-2 rounded-full shadow-lg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big w-4 h-4" aria-hidden="true"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg><span class="text-sm font-semibold">Verified &amp; Trusted</span></div></div><div class="flex flex-wrap justify-center items-center gap-3 sm:gap-6"><div class="group flex items-center gap-2 bg-white/80 backdrop-blur-sm px-4 py-2.5 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 border border-green-100"><div class="p-1 bg-green-100 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield w-3 h-3 sm:w-4 sm:h-4 text-green-600" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg></div><span class="text-xs sm:text-sm font-semibold text-gray-700">SSL Secured</span><div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div></div><div class="group flex items-center gap-2 bg-white/80 backdrop-blur-sm px-4 py-2.5 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 border border-blue-100"><div class="p-1 bg-blue-100 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users w-3 h-3 sm:w-4 sm:h-4 text-blue-600" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg></div><span class="text-xs sm:text-sm font-semibold text-gray-700">15K+ Customer</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity w-3 h-3 text-blue-500" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg></div><div class="group flex items-center gap-2 bg-white/80 backdrop-blur-sm px-4 py-2.5 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 border border-yellow-100"><div class="p-1 bg-yellow-100 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award w-3 h-3 sm:w-4 sm:h-4 text-yellow-600" aria-hidden="true"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></div><span class="text-xs sm:text-sm font-semibold text-gray-700">4.8/5 Rating</span><div class="flex gap-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-2 h-2 text-yellow-400 fill-current" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-2 h-2 text-yellow-400 fill-current" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-2 h-2 text-yellow-400 fill-current" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-2 h-2 text-yellow-400 fill-current" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-2 h-2 text-yellow-400 fill-current" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div></div></div></div></div></section><section class="py-6 sm:py-8 lg:py-12 bg-gradient-to-br from-blue-900 via-indigo-900 to-blue-900 relative overflow-hidden"><div class="absolute inset-0 opacity-20"><div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-white/30 to-transparent"></div><div class="absolute -top-60 -right-60 w-120 h-120 bg-gradient-to-br from-blue-400/20 to-blue-500/20 rounded-full blur-3xl"></div><div class="absolute -bottom-60 -left-60 w-120 h-120 bg-gradient-to-br from-blue-400/20 to-indigo-400/20 rounded-full blur-3xl"></div><div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-gradient-to-br from-yellow-400/10 to-orange-400/10 rounded-full blur-3xl"></div></div><div class="absolute inset-0 overflow-hidden"><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 70.8948%; top: 17.4241%; animation-delay: 1.37255s; animation-duration: 2.3887s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 43.1422%; top: 20.6898%; animation-delay: 2.70662s; animation-duration: 4.30471s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 25.8073%; top: 35.9842%; animation-delay: 1.43564s; animation-duration: 4.13599s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 91.7712%; top: 27.7672%; animation-delay: 2.53784s; animation-duration: 2.59192s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 61.7979%; top: 47.2684%; animation-delay: 1.59702s; animation-duration: 4.70213s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 35.2184%; top: 18.378%; animation-delay: 2.96302s; animation-duration: 4.51018s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 49.9773%; top: 92.4512%; animation-delay: 0.948712s; animation-duration: 2.33775s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 19.8739%; top: 59.0789%; animation-delay: 2.84899s; animation-duration: 2.5068s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 55.7678%; top: 70.2419%; animation-delay: 0.300107s; animation-duration: 3.85164s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 14.5809%; top: 46.1202%; animation-delay: 2.36076s; animation-duration: 3.56095s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 31.6377%; top: 83.2982%; animation-delay: 2.37027s; animation-duration: 2.80521s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 15.8145%; top: 46.594%; animation-delay: 2.08936s; animation-duration: 2.78157s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 95.6644%; top: 52.1249%; animation-delay: 1.26674s; animation-duration: 2.53731s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 92.7251%; top: 88.6475%; animation-delay: 1.66191s; animation-duration: 3.24942s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 79.4742%; top: 39.0649%; animation-delay: 2.24499s; animation-duration: 4.82925s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 80.7939%; top: 54.5086%; animation-delay: 2.89171s; animation-duration: 4.96274s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 2.6364%; top: 74.4732%; animation-delay: 0.835086s; animation-duration: 4.32939s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 18.3205%; top: 68.2873%; animation-delay: 1.953s; animation-duration: 4.1353s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 93.7599%; top: 74.1267%; animation-delay: 2.94107s; animation-duration: 2.05668s;"></div><div class="absolute w-1 h-1 bg-white/20 rounded-full animate-pulse" style="left: 75.7899%; top: 56.8889%; animation-delay: 1.20396s; animation-duration: 2.65109s;"></div></div><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"><div class="text-center mb-6 sm:mb-8 lg:mb-12"><div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md px-4 py-2 rounded-full shadow-xl mb-4 border border-white/20"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-crown w-4 h-4 text-yellow-400" aria-hidden="true"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z"></path><path d="M5 21h14"></path></svg><span class="text-white font-medium text-sm">Terpercaya &amp; Berkualitas</span></div><h2 class="text-xl sm:text-2xl lg:text-3xl xl:text-4xl font-bold text-white mb-3 sm:mb-4">Dipercaya oleh<span class="text-transparent bg-gradient-to-r from-yellow-400 via-orange-400 to-red-400 bg-clip-text"> Ribuan Pelanggan</span></h2><p class="text-blue-100 text-sm sm:text-base lg:text-lg max-w-2xl mx-auto px-4 leading-relaxed">Bergabunglah dengan ribuan pelanggan yang telah merasakan kualitas produk dan layanan terbaik dari KSJShop</p></div><div class="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8 mb-6 sm:mb-8 lg:mb-12"><div class="group text-center" style="animation-delay: 0ms;"><div class="bg-white/10 backdrop-blur-md rounded-2xl sm:rounded-3xl p-4 sm:p-6 lg:p-8 border border-white/20 hover:bg-white/20 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 shadow-2xl hover:shadow-3xl relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-600 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl sm:rounded-3xl"></div><div class="absolute top-0 right-0 w-8 h-8 bg-white/10 rounded-full -translate-y-4 translate-x-4 group-hover:scale-150 transition-transform duration-700"></div><div class="relative z-10"><div class="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 rounded-2xl bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center mx-auto mb-3 sm:mb-4 lg:mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-blue-500/30 shadow-2xl"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 text-white" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg><div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl opacity-0 group-hover:opacity-50 animate-ping"></div></div><div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-white mb-2 sm:mb-3 group-hover:scale-110 transition-transform duration-300">0<span class="text-transparent bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text">+</span></div><p class="text-blue-100 font-medium text-xs sm:text-sm lg:text-base group-hover:text-white transition-colors duration-300">Pelanggan Terpercaya</p></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl sm:rounded-3xl"></div></div></div><div class="group text-center" style="animation-delay: 200ms;"><div class="bg-white/10 backdrop-blur-md rounded-2xl sm:rounded-3xl p-4 sm:p-6 lg:p-8 border border-white/20 hover:bg-white/20 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 shadow-2xl hover:shadow-3xl relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-green-400 to-green-600 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl sm:rounded-3xl"></div><div class="absolute top-0 right-0 w-8 h-8 bg-white/10 rounded-full -translate-y-4 translate-x-4 group-hover:scale-150 transition-transform duration-700"></div><div class="relative z-10"><div class="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 rounded-2xl bg-gradient-to-r from-green-400 to-green-600 flex items-center justify-center mx-auto mb-3 sm:mb-4 lg:mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-green-500/30 shadow-2xl"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 text-white" aria-hidden="true"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path><path d="M12 22V12"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><path d="m7.5 4.27 9 5.15"></path></svg><div class="absolute inset-0 bg-gradient-to-r from-green-400 to-green-600 rounded-2xl opacity-0 group-hover:opacity-50 animate-ping"></div></div><div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-white mb-2 sm:mb-3 group-hover:scale-110 transition-transform duration-300">0<span class="text-transparent bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text">+</span></div><p class="text-blue-100 font-medium text-xs sm:text-sm lg:text-base group-hover:text-white transition-colors duration-300">Produk Berkualitas</p></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl sm:rounded-3xl"></div></div></div><div class="group text-center" style="animation-delay: 400ms;"><div class="bg-white/10 backdrop-blur-md rounded-2xl sm:rounded-3xl p-4 sm:p-6 lg:p-8 border border-white/20 hover:bg-white/20 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 shadow-2xl hover:shadow-3xl relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-600 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl sm:rounded-3xl"></div><div class="absolute top-0 right-0 w-8 h-8 bg-white/10 rounded-full -translate-y-4 translate-x-4 group-hover:scale-150 transition-transform duration-700"></div><div class="relative z-10"><div class="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 rounded-2xl bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center mx-auto mb-3 sm:mb-4 lg:mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-blue-500/30 shadow-2xl"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-truck w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 text-white" aria-hidden="true"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"></path><path d="M15 18H9"></path><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"></path><circle cx="17" cy="18" r="2"></circle><circle cx="7" cy="18" r="2"></circle></svg><div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl opacity-0 group-hover:opacity-50 animate-ping"></div></div><div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-white mb-2 sm:mb-3 group-hover:scale-110 transition-transform duration-300">0<span class="text-transparent bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text">+</span></div><p class="text-blue-100 font-medium text-xs sm:text-sm lg:text-base group-hover:text-white transition-colors duration-300">Pesanan Terkirim</p></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl sm:rounded-3xl"></div></div></div><div class="group text-center" style="animation-delay: 600ms;"><div class="bg-white/10 backdrop-blur-md rounded-2xl sm:rounded-3xl p-4 sm:p-6 lg:p-8 border border-white/20 hover:bg-white/20 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 shadow-2xl hover:shadow-3xl relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-yellow-600 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl sm:rounded-3xl"></div><div class="absolute top-0 right-0 w-8 h-8 bg-white/10 rounded-full -translate-y-4 translate-x-4 group-hover:scale-150 transition-transform duration-700"></div><div class="relative z-10"><div class="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 rounded-2xl bg-gradient-to-r from-yellow-400 to-yellow-600 flex items-center justify-center mx-auto mb-3 sm:mb-4 lg:mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-yellow-500/30 shadow-2xl"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 text-white" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><div class="absolute inset-0 bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-2xl opacity-0 group-hover:opacity-50 animate-ping"></div></div><div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-white mb-2 sm:mb-3 group-hover:scale-110 transition-transform duration-300">0.0<span class="text-transparent bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text">/5</span></div><p class="text-blue-100 font-medium text-xs sm:text-sm lg:text-base group-hover:text-white transition-colors duration-300">Rating Pelanggan</p></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl sm:rounded-3xl"></div></div></div></div><div class="flex flex-wrap justify-center items-center gap-3 sm:gap-4 lg:gap-6 mb-6 sm:mb-8 lg:mb-10"><div class="group flex items-center gap-2 bg-white/10 backdrop-blur-md px-3 sm:px-4 lg:px-6 py-2 sm:py-3 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105 shadow-xl"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up w-4 h-4 sm:w-5 sm:h-5 text-green-400 group-hover:animate-bounce" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg><span class="text-white font-semibold text-sm sm:text-base">Growth 150%</span></div><div class="group flex items-center gap-2 bg-white/10 backdrop-blur-md px-3 sm:px-4 lg:px-6 py-2 sm:py-3 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105 shadow-xl"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award w-4 h-4 sm:w-5 sm:h-5 text-yellow-400 group-hover:animate-bounce" aria-hidden="true"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg><span class="text-white font-semibold text-sm sm:text-base">Trusted 2024</span></div><div class="group flex items-center gap-2 bg-white/10 backdrop-blur-md px-3 sm:px-4 lg:px-6 py-2 sm:py-3 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105 shadow-xl"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield w-4 h-4 sm:w-5 sm:h-5 text-blue-400 group-hover:animate-bounce" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg><span class="text-white font-semibold text-sm sm:text-base">99% Satisfaction</span></div></div><div class="text-center bg-white/5 backdrop-blur-md rounded-3xl p-6 sm:p-8 border border-white/10 shadow-2xl"><p class="text-blue-100 text-sm sm:text-base lg:text-lg mb-4 sm:mb-6 px-4 italic font-medium">"Bergabunglah dengan ribuan customer yang telah merasakan pengalaman berbelanja terbaik"</p><div class="flex justify-center items-center gap-4 sm:gap-6 flex-wrap"><div class="flex items-center gap-3"><div class="flex -space-x-2"><div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 border-3 border-white flex items-center justify-center text-white text-sm font-bold shadow-lg hover:scale-110 transition-transform duration-300 hover:z-10 relative" style="animation-delay: 100ms;">A</div><div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 border-3 border-white flex items-center justify-center text-white text-sm font-bold shadow-lg hover:scale-110 transition-transform duration-300 hover:z-10 relative" style="animation-delay: 200ms;">B</div><div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 border-3 border-white flex items-center justify-center text-white text-sm font-bold shadow-lg hover:scale-110 transition-transform duration-300 hover:z-10 relative" style="animation-delay: 300ms;">C</div><div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 border-3 border-white flex items-center justify-center text-white text-sm font-bold shadow-lg hover:scale-110 transition-transform duration-300 hover:z-10 relative" style="animation-delay: 400ms;">D</div><div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 border-3 border-white flex items-center justify-center text-white text-sm font-bold shadow-lg hover:scale-110 transition-transform duration-300 hover:z-10 relative" style="animation-delay: 500ms;">E</div></div><span class="text-white font-semibold text-sm sm:text-base">+15,000 customers</span></div><div class="flex items-center gap-2"><div class="flex gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-4 h-4 sm:w-5 sm:h-5 text-yellow-400 fill-current drop-shadow-lg hover:scale-110 transition-transform duration-300" aria-hidden="true" style="animation-delay: 50ms;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-4 h-4 sm:w-5 sm:h-5 text-yellow-400 fill-current drop-shadow-lg hover:scale-110 transition-transform duration-300" aria-hidden="true" style="animation-delay: 100ms;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-4 h-4 sm:w-5 sm:h-5 text-yellow-400 fill-current drop-shadow-lg hover:scale-110 transition-transform duration-300" aria-hidden="true" style="animation-delay: 150ms;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-4 h-4 sm:w-5 sm:h-5 text-yellow-400 fill-current drop-shadow-lg hover:scale-110 transition-transform duration-300" aria-hidden="true" style="animation-delay: 200ms;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-4 h-4 sm:w-5 sm:h-5 text-yellow-400 fill-current drop-shadow-lg hover:scale-110 transition-transform duration-300" aria-hidden="true" style="animation-delay: 250ms;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><span class="text-white font-semibold ml-2 text-sm sm:text-base">4.8 rating</span></div></div></div></div></section><div><div class="h-48 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 animate-pulse rounded-lg relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent -skew-x-12 animate-shimmer"></div></div></div><div><div class="h-40 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 animate-pulse rounded-lg relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent -skew-x-12 animate-shimmer"></div></div></div></div></div></div></main><footer class="bg-gradient-to-br from-blue-800 via-blue-900 to-blue-950 text-blue-100 mt-20 print:hidden relative overflow-hidden"><div class="absolute top-0 right-0 w-96 h-96 bg-blue-600/5 rounded-full -translate-y-48 translate-x-48 animate-pulse"></div><div class="absolute bottom-0 left-0 w-72 h-72 bg-gradient-to-tr from-yellow-400/5 to-orange-400/5 rounded-full translate-y-36 -translate-x-36 animate-pulse"></div><div class="absolute top-1/2 left-1/2 w-64 h-64 bg-gradient-to-br from-blue-600/5 to-indigo-600/5 rounded-full -translate-x-1/2 -translate-y-1/2 animate-pulse"></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/2 to-transparent skew-x-12 -translate-x-full animate-shimmer-slow pointer-events-none"></div><div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20"><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12"><div class="space-y-8"><a class="inline-block text-4xl font-black text-transparent bg-gradient-to-r from-yellow-400 to-yellow-300 bg-clip-text hover:from-yellow-300 hover:to-yellow-200 transition-all duration-300 transform hover:scale-110 relative" href="/">KSJShop<div class="absolute inset-0 text-4xl font-black text-yellow-400 opacity-20 blur-lg -z-10">KSJShop</div></a><p class="text-blue-200 leading-relaxed text-base max-w-md font-medium">Belanja Mudah, Cepat, dan Aman untuk semua kebutuhan bahan bangunan dan perlengkapan rumah Anda dengan kualitas terbaik.</p><div class="flex flex-wrap gap-3"><div class="bg-blue-800/50 backdrop-blur-sm px-3 py-2 rounded-xl border border-blue-600/30 text-xs font-semibold text-blue-200">✓ Terpercaya</div><div class="bg-blue-800/50 backdrop-blur-sm px-3 py-2 rounded-xl border border-blue-600/30 text-xs font-semibold text-blue-200">✓ Kualitas Terjamin</div></div></div><div class="space-y-8"><h3 class="text-2xl font-bold text-transparent bg-gradient-to-r from-yellow-300 to-yellow-400 bg-clip-text mb-6 flex items-center"><span class="w-2 h-8 bg-gradient-to-b from-yellow-400 to-yellow-500 rounded-full mr-4 shadow-lg"></span>Kontak Kami</h3><div class="space-y-4"><div class="bg-gradient-to-r from-blue-800/60 to-blue-700/60 backdrop-blur-md rounded-2xl p-4 hover:from-blue-700/70 hover:to-blue-600/70 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl border-2 border-blue-600/30 group relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl pointer-events-none"></div><div class="flex items-start gap-4 relative z-10"><div class="text-yellow-400 mt-1 p-2 bg-yellow-400/20 rounded-xl border border-yellow-400/30"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg></div><div><p class="text-blue-300 text-sm font-bold mb-1">Alamat</p><p class="text-blue-100 text-sm font-medium leading-relaxed">Jl. Kapi Minda No.Raya 10a, RW.20, Keduyo, Mangliawan, Kec. Pakis, Kabupaten Malang, Jawa Timur 65154</p></div></div></div><div class="bg-gradient-to-r from-blue-800/60 to-blue-700/60 backdrop-blur-md rounded-2xl p-4 hover:from-blue-700/70 hover:to-blue-600/70 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl border-2 border-blue-600/30 group relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl pointer-events-none"></div><div class="flex items-start gap-4 relative z-10"><div class="text-yellow-400 mt-1 p-2 bg-yellow-400/20 rounded-xl border border-yellow-400/30"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone" aria-hidden="true"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path></svg></div><div><p class="text-blue-300 text-sm font-bold mb-1">Telepon</p><p class="text-blue-100 text-sm font-medium leading-relaxed">0857-5528-2807</p></div></div></div><div class="bg-gradient-to-r from-blue-800/60 to-blue-700/60 backdrop-blur-md rounded-2xl p-4 hover:from-blue-700/70 hover:to-blue-600/70 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl border-2 border-blue-600/30 group relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl pointer-events-none"></div><div class="flex items-start gap-4 relative z-10"><div class="text-yellow-400 mt-1 p-2 bg-yellow-400/20 rounded-xl border border-yellow-400/30"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg></div><div><p class="text-blue-300 text-sm font-bold mb-1">Email</p><p class="text-blue-100 text-sm font-medium leading-relaxed">admin@ksjshoptek.com</p></div></div></div><div class="bg-gradient-to-r from-blue-800/60 to-blue-700/60 backdrop-blur-md rounded-2xl p-4 hover:from-blue-700/70 hover:to-blue-600/70 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl border-2 border-blue-600/30 group relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl pointer-events-none"></div><div class="flex items-start gap-4 relative z-10"><div class="text-yellow-400 mt-1 p-2 bg-yellow-400/20 rounded-xl border border-yellow-400/30"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></div><div><p class="text-blue-300 text-sm font-bold mb-1">Jam Operasional</p><p class="text-blue-100 text-sm font-medium leading-relaxed">Senin - Sabtu, 08:00 - 17:00</p></div></div></div></div></div><div class="space-y-8"><h3 class="text-2xl font-bold text-transparent bg-gradient-to-r from-yellow-300 to-yellow-400 bg-clip-text mb-6 flex items-center"><span class="w-2 h-8 bg-gradient-to-b from-yellow-400 to-yellow-500 rounded-full mr-4 shadow-lg"></span>Informasi</h3><nav class="space-y-3"><a class="block text-blue-200 hover:text-yellow-300 hover:translate-x-3 transition-all duration-300 py-2 px-4 rounded-2xl hover:bg-blue-800/40 font-medium border-2 border-transparent hover:border-blue-600/30 hover:shadow-lg group" href="/tentang-kami" style="animation-delay: 0ms;"><span class="group-hover:scale-105 inline-block transition-transform duration-300">Tentang Kami</span></a><a class="block text-blue-200 hover:text-yellow-300 hover:translate-x-3 transition-all duration-300 py-2 px-4 rounded-2xl hover:bg-blue-800/40 font-medium border-2 border-transparent hover:border-blue-600/30 hover:shadow-lg group" href="/artikel" style="animation-delay: 100ms;"><span class="group-hover:scale-105 inline-block transition-transform duration-300">Artikel &amp; Tips</span></a><a class="block text-blue-200 hover:text-yellow-300 hover:translate-x-3 transition-all duration-300 py-2 px-4 rounded-2xl hover:bg-blue-800/40 font-medium border-2 border-transparent hover:border-blue-600/30 hover:shadow-lg group" href="/kontak-kami" style="animation-delay: 200ms;"><span class="group-hover:scale-105 inline-block transition-transform duration-300">Kontak Kami</span></a><a class="block text-blue-200 hover:text-yellow-300 hover:translate-x-3 transition-all duration-300 py-2 px-4 rounded-2xl hover:bg-blue-800/40 font-medium border-2 border-transparent hover:border-blue-600/30 hover:shadow-lg group" href="/syaratdanketentuan" style="animation-delay: 300ms;"><span class="group-hover:scale-105 inline-block transition-transform duration-300">Syarat &amp; Ketentuan</span></a><a class="block text-blue-200 hover:text-yellow-300 hover:translate-x-3 transition-all duration-300 py-2 px-4 rounded-2xl hover:bg-blue-800/40 font-medium border-2 border-transparent hover:border-blue-600/30 hover:shadow-lg group" href="/kebijakan-privasi" style="animation-delay: 400ms;"><span class="group-hover:scale-105 inline-block transition-transform duration-300">Kebijakan Privasi</span></a><a class="block text-blue-200 hover:text-yellow-300 hover:translate-x-3 transition-all duration-300 py-2 px-4 rounded-2xl hover:bg-blue-800/40 font-medium border-2 border-transparent hover:border-blue-600/30 hover:shadow-lg group" href="/faq" style="animation-delay: 500ms;"><span class="group-hover:scale-105 inline-block transition-transform duration-300">FAQ &amp; Bantuan</span></a><a class="block text-blue-200 hover:text-yellow-300 hover:translate-x-3 transition-all duration-300 py-2 px-4 rounded-2xl hover:bg-blue-800/40 font-medium border-2 border-transparent hover:border-blue-600/30 hover:shadow-lg group" href="/penyedia-teknologi" style="animation-delay: 600ms;"><span class="group-hover:scale-105 inline-block transition-transform duration-300">Penyedia Teknologi</span></a><a class="block text-blue-200 hover:text-yellow-300 hover:translate-x-3 transition-all duration-300 py-2 px-4 rounded-2xl hover:bg-blue-800/40 font-medium border-2 border-transparent hover:border-blue-600/30 hover:shadow-lg group" href="/penghapusan-data" style="animation-delay: 700ms;"><span class="group-hover:scale-105 inline-block transition-transform duration-300">Penghapusan Data</span></a></nav><div class="pt-6"><h4 class="text-xl font-bold text-yellow-300 mb-4">Ikuti Kami</h4><div class="flex space-x-4"><a href="https://instagram.com/ksjshoptek" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="bg-gradient-to-br from-blue-800/60 to-blue-700/60 backdrop-blur-md p-4 rounded-2xl hover:text-pink-400 hover:bg-pink-500/20 transition-all duration-300 transform hover:scale-110 hover:shadow-2xl border-2 border-blue-600/30 group relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 rounded-2xl pointer-events-none"></div><div class="group-hover:scale-110 transition-transform duration-300 relative z-10"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-instagram" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg></div></a><a href="https://tiktok.com/@ksjshoptekmlg" target="_blank" rel="noopener noreferrer" aria-label="TikTok" class="bg-gradient-to-br from-blue-800/60 to-blue-700/60 backdrop-blur-md p-4 rounded-2xl hover:text-blue-400 hover:bg-blue-500/20 transition-all duration-300 transform hover:scale-110 hover:shadow-2xl border-2 border-blue-600/30 group relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 rounded-2xl pointer-events-none"></div><div class="group-hover:scale-110 transition-transform duration-300 relative z-10"><svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor"><path d="M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"></path></svg></div></a></div></div></div><div class="space-y-8"><h3 class="text-2xl font-bold text-transparent bg-gradient-to-r from-yellow-300 to-yellow-400 bg-clip-text mb-6 flex items-center"><span class="w-2 h-8 bg-gradient-to-b from-yellow-400 to-yellow-500 rounded-full mr-4 shadow-lg"></span>Berlangganan</h3><div class="bg-gradient-to-br from-blue-700/40 to-blue-800/40 backdrop-blur-md rounded-2xl p-6 border-2 border-blue-600/30 shadow-2xl relative overflow-hidden group"><div class="absolute top-2 right-2 w-8 h-8 bg-yellow-400/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><div class="absolute bottom-2 left-2 w-6 h-6 bg-yellow-400/10 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl pointer-events-none"></div><div class="flex items-center gap-3 mb-4 relative z-10"><div class="bg-gradient-to-br from-yellow-400/30 to-yellow-500/30 p-3 rounded-2xl shadow-lg border border-yellow-400/20"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail w-5 h-5 text-yellow-300" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg></div><h4 class="text-yellow-300 font-bold text-lg">Newsletter</h4></div><p class="text-blue-200 text-sm mb-4 leading-relaxed relative z-10">Dapatkan info promo &amp; update produk terbaru langsung di email Anda</p><form class="space-y-4 relative z-10"><div class="flex flex-col gap-3"><input type="email" placeholder="Masukkan email Anda" class="w-full px-4 py-3 rounded-2xl text-gray-900 placeholder-gray-500 text-sm font-medium focus:outline-none focus:ring-4 focus:ring-yellow-400/30 border-2 border-transparent focus:border-yellow-400 transition-all duration-300 shadow-lg" value=""><button type="submit" disabled="" class="w-full bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-gray-900 px-6 py-3 rounded-2xl font-bold text-sm transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shadow-xl hover:shadow-2xl hover:scale-105 relative overflow-hidden"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full hover:translate-x-full transition-transform duration-700 rounded-2xl pointer-events-none"></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail w-5 h-5 relative z-10" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg><span class="relative z-10">Kirim</span></button></div></form></div><div class="bg-gradient-to-br from-green-400/20 to-green-500/20 backdrop-blur-md rounded-2xl p-6 border-2 border-green-400/30 shadow-2xl relative overflow-hidden group"><div class="absolute top-2 right-2 w-8 h-8 bg-green-400/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><div class="absolute bottom-2 left-2 w-6 h-6 bg-green-400/10 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-2xl pointer-events-none"></div><h4 class="text-green-300 font-bold text-lg mb-3 flex items-center gap-3 relative z-10"><div class="p-2 bg-green-400/30 rounded-xl border border-green-400/20"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"></path></svg></div>WhatsApp Kami</h4><p class="text-blue-200 text-sm mb-4 leading-relaxed font-medium relative z-10">Hubungi langsung untuk konsultasi dan info promo terbaru</p><a href="https://wa.me/6285755282807" target="_blank" rel="noopener noreferrer" class="w-full bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-6 py-4 rounded-2xl font-bold text-sm transition-all duration-300 transform hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center justify-center gap-3 relative overflow-hidden group/btn"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 -translate-x-full group-hover/btn:translate-x-full transition-transform duration-700 rounded-2xl pointer-events-none"></div><svg class="w-6 h-6 relative z-10" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"></path></svg><span class="relative z-10">Chat WhatsApp</span></a></div></div></div><div class="border-t-2 border-gradient-to-r from-blue-700/50 via-blue-600/50 to-blue-700/50 pt-10 mt-16"><div class="flex flex-col md:flex-row justify-between items-center gap-6"><div class="text-center md:text-left space-y-2"><p class="text-blue-300 text-sm font-medium">© 2026 KSJShop. Hak Cipta Dilindungi Undang-Undang.</p><p class="text-blue-300 text-xs font-medium">Operated by CV Kirania Berkah Anugrah</p><p class="text-blue-400 text-sm font-medium">Dirancang &amp; Dikembangkan dengan <span class="text-red-400 animate-pulse">❤️</span> untuk Indonesia</p></div><button class="bg-gradient-to-r from-blue-700/60 to-blue-600/60 hover:from-blue-600/70 hover:to-blue-500/70 text-blue-200 hover:text-white px-6 py-3 rounded-2xl transition-all duration-300 transform hover:scale-105 hover:shadow-2xl border-2 border-blue-600/30 flex items-center gap-3 font-semibold relative overflow-hidden group"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 rounded-2xl pointer-events-none"></div><svg class="w-5 h-5 relative z-10 group-hover:animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg><span class="text-sm font-bold relative z-10">Kembali ke Atas</span></button></div></div></div></footer></div><style>
@keyframes scale-fade {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.animate-scale-fade {
animation: scale-fade 0.2s ease-out;
}
</style><div class="fixed bottom-4 left-4 sm:bottom-6 sm:left-auto sm:right-6 z-[9999]"><button class="w-14 h-14 sm:w-16 sm:h-16 rounded-full shadow-lg flex items-center justify-center bg-gradient-to-br from-white to-blue-50 border-4 border-yellow-400 hover:scale-[1.05] hover:shadow-xl hover:border-yellow-500 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-200 animate-pulse" aria-label="Buka Chat Bot KSJShop" aria-expanded="false" style="z-index: 9999;"><svg width="36" height="36" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="sm:w-10 sm:h-10"><circle cx="16" cy="16" r="14" fill="url(#bgGradient)" stroke="url(#borderGradient)" stroke-width="1"></circle><rect x="8" y="10" width="16" height="12" rx="3" fill="white" stroke="#3B82F6" stroke-width="1"></rect><circle cx="12" cy="15" r="2" fill="#3B82F6"></circle><circle cx="20" cy="15" r="2" fill="#3B82F6"></circle><circle cx="12" cy="15" r="1" fill="white"></circle><circle cx="20" cy="15" r="1" fill="white"></circle><path d="M12 18 Q16 21 20 18" stroke="#3B82F6" stroke-width="1.5" fill="none" stroke-linecap="round"></path><line x1="16" y1="8" x2="16" y2="6" stroke="#3B82F6" stroke-width="1.5" stroke-linecap="round"></line><circle cx="16" cy="5" r="1.5" fill="#F59E0B"></circle><rect x="6" y="12" width="2" height="6" rx="1" fill="#F59E0B"></rect><rect x="24" y="12" width="2" height="6" rx="1" fill="#F59E0B"></rect><rect x="10" y="19" width="12" height="1" rx="0.5" fill="#E5E7EB"></rect><rect x="10" y="21" width="8" height="1" rx="0.5" fill="#E5E7EB"></rect><defs><linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3B82F6" stop-opacity="0.1"></stop><stop offset="100%" stop-color="#F59E0B" stop-opacity="0.1"></stop></linearGradient><linearGradient id="borderGradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3B82F6" stop-opacity="0.3"></stop><stop offset="100%" stop-color="#F59E0B" stop-opacity="0.3"></stop></linearGradient></defs></svg></button></div><div class="fixed inset-x-0 top-4 z-50 flex flex-col items-center space-y-2 pointer-events-none"></div></div>
    
    <!-- Main application script -->
    
    <!-- Performance monitoring and optimization -->
    <script>
      // Early optimization: Preload critical API endpoints
      if ('requestIdleCallback' in window) {
        requestIdleCallback(() => {
          // Preload critical API endpoints
          const apiBase = 'https://kasirkirania-production.up.railway.app';
          const criticalEndpoints = [
            '/web/main-banners',
            '/web/kategori-produk'
          ];
          
          criticalEndpoints.forEach(endpoint => {
            fetch(apiBase + endpoint, { 
              method: 'GET',
              priority: 'high'
            }).catch(() => {}); // Silent fail for preload
          });
        });
      }
      
      // Performance monitoring
      window.addEventListener('load', function() {
        if ('performance' in window && 'getEntriesByType' in performance) {
          const navigation = performance.getEntriesByType('navigation')[0];
          if (navigation) {
            // loadEventEnd bisa 0 sebelum load event selesai; gunakan responseEnd - fetchStart sebagai fallback
            const loadTime = navigation.loadEventEnd > 0 
              ? navigation.loadEventEnd - navigation.loadEventStart 
              : navigation.responseEnd - navigation.fetchStart;
            if (loadTime >= 0 && loadTime > 5000) {
              console.warn('Slow page load detected:', Math.round(loadTime), 'ms');
            }
          }
        }
      });
      
      // Lazy load images with intersection observer
      if ('IntersectionObserver' in window) {
        const imageObserver = new IntersectionObserver((entries, observer) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              const img = entry.target;
              img.src = img.dataset.src;
              img.classList.remove('lazy');
              observer.unobserve(img);
            }
          });
        });
        
        document.addEventListener('DOMContentLoaded', () => {
          const lazyImages = document.querySelectorAll('img[data-src]');
          lazyImages.forEach(img => imageObserver.observe(img));
        });
      }
      
      // Prefetch next page content on hover
      let prefetchTimeouts = new Map();
      document.addEventListener('mouseover', (e) => {
        if (e.target.tagName === 'A' && e.target.href && !e.target.href.includes('#')) {
          const href = e.target.href;
          const timeout = setTimeout(() => {
            const link = document.createElement('link');
            link.rel = 'prefetch';
            link.href = href;
            document.head.appendChild(link);
          }, 200); // 200ms delay to avoid prefetching on quick hovers
          
          prefetchTimeouts.set(href, timeout);
        }
      });
      
      document.addEventListener('mouseout', (e) => {
        if (e.target.tagName === 'A' && e.target.href) {
          const timeout = prefetchTimeouts.get(e.target.href);
          if (timeout) {
            clearTimeout(timeout);
            prefetchTimeouts.delete(e.target.href);
          }
        }
      });
    </script>
    
    <!-- Dynamic Product JSON-LD injection for /produk/{slug} -->
    <script>
      (function() {
        try {
          var match = location.pathname.match(/^\/produk\/([^\/?#]+)/);
          if (!match) return;
          var slug = decodeURIComponent(match[1]);
          var apiBase = 'https://kasirkirania-production.up.railway.app';
          var url = apiBase + '/web/produk/' + encodeURIComponent(slug);
          fetch(url, { credentials: 'omit' })
            .then(function(r){ return r.ok ? r.json() : null; })
            .then(function(json){
              if (!json) return;
              var d = json.data || json;
              var name = d.judulInduk || d.judul || d.nama || d.name || document.title;
              var desc = d.deskripsiInduk || d.deskripsi || '';
              var brand = d.merkInduk || d.merk || d.brand || undefined;
              var sku = d.idInduk || d.sku || d.kode || undefined;
              var price = d.hargaSetelahDiskon || d.hargaJualInduk || d.hargaMulaiDari || d.harga || undefined;
              // If no parent price, try min price from variants
              if ((price === undefined || price === null || price === '') && Array.isArray(d.varian) && d.varian.length) {
                var minVarPrice = d.varian
                  .map(function(v){ return v.hargaSetelahDiskon ?? v.hargaJual ?? v.harga ?? v.hargaMulaiDari; })
                  .filter(function(x){ return x !== undefined && x !== null && String(x).trim() !== ''; })
                  .map(function(x){ var n = Number(x); return isNaN(n) ? null : n; })
                  .filter(function(n){ return n !== null; })
                  .reduce(function(min, n){ return min === null ? n : Math.min(min, n); }, null);
                if (minVarPrice !== null) price = minVarPrice;
              }
              var stok = (typeof d.stokInduk === 'number') ? d.stokInduk : undefined;
              var availability = (typeof stok === 'number') ? (stok > 0 ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock') : 'https://schema.org/InStock';
              var images = [];
              if (d.fotoUtamaIndukUrl) images.push(d.fotoUtamaIndukUrl);
              if (Array.isArray(d.galeriFotoIndukUrls)) images = images.concat(d.galeriFotoIndukUrls);
              if (Array.isArray(d.images)) images = images.concat(d.images);
              images = images.filter(Boolean);
              var productSchema = {
                '@context': 'https://schema.org',
                '@type': 'Product',
                name: name,
                description: desc,
                image: images.length ? images : undefined,
                sku: sku,
                brand: brand ? { '@type': 'Brand', name: String(brand) } : undefined,
                offers: {
                  '@type': 'Offer',
                  priceCurrency: 'IDR',
                  price: price !== undefined ? String(price) : undefined,
                  priceValidUntil: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
                  availability: availability,
                  url: location.href
                }
              };
              // Remove undefined fields
              function prune(obj){
                Object.keys(obj).forEach(function(k){
                  var v = obj[k];
                  if (v && typeof v === 'object' && !Array.isArray(v)) prune(v);
                  if (v === undefined || (Array.isArray(v) && v.length === 0)) delete obj[k];
                });
                return obj;
              }
              productSchema = prune(productSchema);
              var script = document.createElement('script');
              script.type = 'application/ld+json';
              script.text = JSON.stringify(productSchema);
              document.head.appendChild(script);
            })
            .catch(function(){ /* silent */ });
        } catch(e) { /* silent */ }
      })();
    </script>
    
    <!-- Dynamic BreadcrumbList JSON-LD for product and category pages -->
    <script>
      (function(){
        try {
          var path = location.pathname;
          var origin = location.origin;
          function injectBreadcrumb(items){
            var schema = {
              '@context':'https://schema.org',
              '@type':'BreadcrumbList',
              itemListElement: items.map(function(it, idx){
                return { '@type':'ListItem', position: idx+1, name: it.name, item: it.item };
              })
            };
            var s = document.createElement('script');
            s.type = 'application/ld+json';
            s.text = JSON.stringify(schema);
            document.head.appendChild(s);
          }
          function getJson(u){ return fetch(u, { credentials:'omit' }).then(function(r){ return r.ok ? r.json() : null; }); }

          // Category page: /produk?kategori={id}
          var params = new URLSearchParams(location.search);
          if (path === '/produk' && params.has('kategori')){
            var catId = params.get('kategori');
            getJson('https://kasirkirania-production.up.railway.app/web/kategori-produk')
              .then(function(json){
                var list = (json && (json.data || json)) || [];
                var found = Array.isArray(list) ? list.find(function(c){ return c.id === catId; }) : null;
                var catName = found && (found.namaKategori || found.kategoriProdukNama || found.nama || found.name || found.title);
                if (!catName) return; // Only inject when we have a proper name
                injectBreadcrumb([
                  { name: 'Beranda', item: origin + '/' },
                  { name: 'Produk',  item: origin + '/produk' },
                  { name: String(catName), item: location.href }
                ]);
              });
            return;
          }

          // Product page: /produk/{slug}
          var m = path.match(/^\/produk\/([^\/?#]+)/);
          if (m){
            var slug = decodeURIComponent(m[1]);
            var url = 'https://kasirkirania-production.up.railway.app/web/produk/' + encodeURIComponent(slug);
            getJson(url).then(function(json){
              if (!json) return;
              var d = json.data || json;
              var name = d.judulInduk || d.judul || d.nama || d.name || document.title;
              var catId = d.kategoriProdukWebId;
              function finish(catName){
                var items = [
                  { name: 'Beranda', item: origin + '/' },
                  { name: 'Produk',  item: origin + '/produk' }
                ];
                if (catName) items.push({ name: String(catName), item: origin + '/produk?kategori=' + encodeURIComponent(catId) });
                items.push({ name: String(name), item: location.href });
                injectBreadcrumb(items);
              }
              if (catId){
                getJson('https://kasirkirania-production.up.railway.app/web/kategori-produk')
                  .then(function(js){
                    var list = (js && (js.data || js)) || [];
                    var found = Array.isArray(list) ? list.find(function(c){ return c.id === catId; }) : null;
                    var catName = found && (found.namaKategori || found.kategoriProdukNama || found.nama || found.name || found.title);
                    finish(catName);
                  })
                  .catch(function(){ finish(undefined); });
              } else {
                finish(undefined);
              }
            });
          }
        } catch(e){ /* silent */ }
      })();
    </script>
  

</body></html>