/* ============================================================
   styles.css — E-Katalog KKMP Nambangan Lor
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ── HERO ── */
.hero-section {
  background: linear-gradient(135deg, #B91C1C 0%, #991B1B 55%, #7F1D1D 100%);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero-blob-1 {
  width: 380px; height: 380px;
  background: rgba(255,255,255,.06);
  top: -110px; right: -90px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: blob-morph 10s ease-in-out infinite;
}
.hero-blob-2 {
  width: 240px; height: 240px;
  background: rgba(255,255,255,.04);
  bottom: -70px; left: 8%;
  border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  animation: blob-morph 14s ease-in-out infinite reverse;
}
@keyframes blob-morph {
  0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%      { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%      { border-radius: 50% 60% 30% 60% / 30% 50% 70% 40%; }
  75%      { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
}

/* Logo display di hero (menggantikan stat cards) */
.hero-logo-display {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 28px;
  padding: 44px 48px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 8px 20px rgba(0,0,0,.10);
  animation: float-logo 5s ease-in-out infinite;
}
@keyframes float-logo {
  0%,100% { transform: translateY(0px);  }
  50%      { transform: translateY(-8px); }
}

.hero-enter {
  animation: fade-up .65s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* ── HEADER shadow on scroll ── */
#main-header.scrolled > div {
  box-shadow: 0 4px 24px rgba(0,0,0,.09);
}

/* ── MOBILE NAV ── */
.mobile-nav-link {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #4B5563;
  border-radius: 10px;
  transition: color .15s, background .15s;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
}
.mobile-nav-link:hover { color: #B91C1C; background: #FEF2F2; }

/* ── FILTER PILLS ── */
.filter-pill {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  border: 1.5px solid #E5E7EB;
  background: #FFFFFF;
  color: #6B7280;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
  font-family: "Poppins", sans-serif;
}
.filter-pill:hover   { border-color: #B91C1C; color: #B91C1C; background: #FEF2F2; }
.filter-pill.active  { background: #B91C1C; border-color: #B91C1C; color: #FFFFFF; }

/* ── PRODUCT CARD ── */
.product-card {
  background: #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #F3F4F6;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: transform .25s cubic-bezier(.4,0,.2,1),
              box-shadow .25s cubic-bezier(.4,0,.2,1),
              border-color .25s ease;
  animation: card-in .4s cubic-bezier(.22,1,.36,1) both;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(185,28,28,.12), 0 4px 10px rgba(0,0,0,.07);
  border-color: #FECACA;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* Gambar produk dengan zoom on hover */
.product-image-wrap {
  position: relative;
  overflow: hidden;
  background: #F9FAFB;
  height: 180px;
}
.product-image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.product-card:hover .product-image-wrap img { transform: scale(1.06); }

/* Badge kode produk di sudut gambar */
.kode-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(0,0,0,.55);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  font-family: "Poppins", sans-serif;
  letter-spacing: .03em;
}

/* Body kartu */
.product-body { padding: 13px 15px 15px; }

/* ── CATEGORY BADGE — warna per kategori ── */
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  letter-spacing: .01em;
}
/* Sembako: merah muda */
.badge-sembako      { background: #FEF2F2; color: #B91C1C; }
/* Minuman: biru */
.badge-minuman      { background: #EFF6FF; color: #1D4ED8; }
/* Kebutuhan RT: hijau */
.badge-rt           { background: #F0FDF4; color: #15803D; }
/* Rokok: abu */
.badge-rokok        { background: #F3F4F6; color: #374151; }
/* Lainnya: kuning */
.badge-lainnya      { background: #FEFCE8; color: #854D0E; }

/* Nama, subtitle, harga */
.product-name {
  font-size: 14px; font-weight: 700; color: #111827;
  margin-bottom: 2px; line-height: 1.3;
  font-family: "Poppins", sans-serif;
}
.product-subtitle {
  font-size: 11px; color: #9CA3AF; margin-bottom: 9px;
  font-family: "Poppins", sans-serif;
}
.product-price {
  font-size: 17px; font-weight: 800; color: #B91C1C;
  margin-bottom: 2px; letter-spacing: -.02em;
  font-family: "Poppins", sans-serif;
}
.price-note {
  display: block; font-size: 10px; font-weight: 500;
  color: #9CA3AF; margin-bottom: 11px;
  font-family: "Poppins", sans-serif;
}

/* Tombol Tanya via WA — hijau outline */
.btn-tanya {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: #FFFFFF;
  color: #16A34A;
  border: 1.5px solid #16A34A;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .18s ease;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  line-height: 1;
}
.btn-tanya:hover {
  background: #16A34A;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(22,163,74,.28);
  transform: translateY(-1px);
}
.btn-tanya:active { transform: translateY(0); }

/* ── STEP BADGE ── */
.step-badge {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; min-width: 22px;
  background: #B91C1C; color: #FFFFFF;
  font-size: 11px; font-weight: 800;
  border-radius: 50%;
  font-family: "Poppins", sans-serif;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #F3F4F6; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

html { scroll-behavior: smooth; }

html{scroll-behavior:smooth}#katalog,#tentang{scroll-margin-top:80px}#main-header>div{background:rgba(255,255,255,.96)}[hidden]{display:none!important}.product-image-wrap img{object-fit:contain}.product-card{display:flex;flex-direction:column}.product-body{display:flex;flex-direction:column;flex:1}.product-body .btn-tanya{margin-top:auto}.product-subtitle{min-height:16px}.catalog-tools{display:flex;flex-wrap:wrap;gap:20px;margin-top:20px;font-size:11px;color:#9ca3af}.catalog-tools button:hover{text-decoration:underline;color:white}button:focus-visible,a:focus-visible{outline:3px solid #fbbf24;outline-offset:3px}dialog{margin:auto;border:1px solid #e5e7eb;border-radius:20px;padding:26px;width:min(92vw,620px);max-height:90dvh;overflow:auto;color:#1f2937;background:white;box-shadow:0 24px 80px #0003}dialog::backdrop{background:#11182799;backdrop-filter:blur(3px)}dialog h2,#admin h1{font-size:22px;font-weight:800}dialog p{font-size:13px;line-height:1.7;margin:12px 0;color:#6b7280}dialog button,#admin button{padding:9px 14px;background:#b91c1c;color:white;border-radius:9px;font-size:12px;font-weight:600}dialog button:disabled{opacity:.45}.dialog-heading,.dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.dialog-heading>button{background:#f3f4f6;color:#4b5563}dialog label{display:block;font-size:12px;font-weight:600;margin:14px 0}dialog input,dialog select,dialog textarea,#admin input{display:block;width:100%;padding:10px;border:1px solid #d1d5db;border-radius:9px;margin-top:5px;font-size:13px}dialog form>button{margin:10px 4px 0 0}.map-link{display:block;color:#b91c1c;font-size:13px;font-weight:600;margin-bottom:20px}.contact-address{font-weight:600;color:#111827!important}#contactProduct{font-weight:700;color:#111827;font-size:16px}.cart-row{display:flex;gap:16px;border-bottom:1px solid #eee;padding:18px 0}.cart-row img{width:76px;height:76px;object-fit:contain}.cart-row h3{font-weight:700;font-size:14px}.cart-row small{font-size:11px;color:#6b7280}.qty{display:flex;align-items:center;gap:12px;margin:10px 0}.qty button{padding:4px 9px}.cart-total{display:flex;justify-content:space-between;margin-top:20px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#111827;color:white;padding:14px 22px;border-radius:12px;font-size:13px;z-index:100}#carousel img{width:100%;max-height:60vh;object-fit:contain}#slideControls{display:flex;align-items:center;gap:15px;justify-content:center;margin-top:20px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:25px 0}.stats>div{background:#fef2f2;padding:20px;border-radius:12px}.stats strong,.stats span{display:block}.stats strong{font-size:28px;font-weight:800}.stats span{font-size:12px}#admin nav{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}#admin h2{font-weight:700;margin-top:25px}.item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid #eee;font-size:13px}.admin-notice{padding:16px;background:#fffbeb;color:#92400e;border-radius:12px;margin-bottom:25px;font-size:13px}.banner-row{display:flex;gap:8px;align-items:center;margin:15px 0}.banner-row img{width:80px;height:60px;object-fit:cover}#status:not(:empty){padding:20px;background:#fef2f2;color:#b91c1c}.admin-mode .hero-section,.admin-mode #tentang{display:none}@media(max-width:767px){.hero-logo-display{padding:25px}#filters{gap:6px}.filter-pill{font-size:11px;padding:6px 10px}.dashboard-heading{align-items:flex-start}.stats>div{padding:12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* Cart and catalog search */
.catalog-search{width:100%;margin:0 0 26px}.catalog-search input{background:#fff;border:1px solid #e5e7eb;min-height:48px;box-shadow:0 1px 3px #00000003}.desktop-navigation{margin-left:auto}.header-actions{display:flex;align-items:center;gap:10px;margin-left:8px;flex-shrink:0}.header-actions button{font-size:12px;font-weight:600;padding:10px 14px;border-radius:10px;min-height:42px;white-space:nowrap}.header-cart{display:flex;align-items:center;gap:10px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}.header-cart:hover{background:#fee2e2}#cartCount{display:inline-flex;align-items:center;justify-content:center;background:#b91c1c;color:white;min-width:21px;height:21px;border-radius:999px;font-size:11px;padding:0 5px}.header-admin{background:#b91c1c;color:white}.header-admin:hover{background:#991b1b}.btn-add-cart{background:#b91c1c;border-color:#b91c1c;color:white;font-size:11px;min-height:42px;line-height:1.35}.btn-add-cart:hover{background:#991b1b;border-color:#991b1b;box-shadow:0 4px 14px #b91c1c33}.btn-add-cart:active{transform:translateY(0);background:#7f1d1d}#cartDialog{width:min(94vw,700px);padding:28px;border-radius:18px;max-height:calc(100dvh - 40px)}#cartDialog .dialog-heading{margin:0 0 12px}#cartTitle{font-size:22px;line-height:1.35}#cartDialog .dialog-heading>button{width:44px;height:44px;padding:0;font-size:20px;border-radius:12px;flex-shrink:0}#cartDialog .cart-row{gap:18px;padding:20px 0;align-items:flex-start}#cartDialog .cart-row>img{width:58px;height:80px;flex-shrink:0}#cartDialog .cart-row-details{min-width:0;flex:1}#cartDialog .cart-row h3{font-size:14px;line-height:1.5;font-weight:700;margin-bottom:5px}#cartDialog .cart-row small{font-size:11px;line-height:1.5}.cart-row-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px}#cartDialog .qty{margin:0;gap:12px}#cartDialog .qty button{width:38px;height:38px;padding:0;font-size:16px;border-radius:9px}#cartDialog .qty b{font-size:13px;min-width:10px;text-align:center}#cartDialog .remove{color:#6b7280;background:#f3f4f6;font-size:11px;padding:10px 12px}.cart-subtotal{display:block;font-size:13px;margin-top:3px;color:#111827}#cartDialog .cart-total{font-size:17px;margin:22px 0 14px;gap:20px}#cartDialog .cart-total strong{font-weight:700;white-space:nowrap;color:#111827}#cartDialog>p{font-size:12px;margin:0 0 18px;line-height:1.8}#checkoutForm label{font-size:13px;margin:0 0 15px;color:#111827}#checkoutForm input,#checkoutForm textarea{padding:12px;border-color:#e5e7eb;font-size:13px;font-weight:400;min-height:46px}#checkoutForm textarea{min-height:95px;resize:vertical}#checkoutForm input:focus,#checkoutForm textarea:focus{outline:2px solid #fecaca;outline-offset:1px;border-color:#b91c1c}#checkoutButton{display:block;width:100%;background:#15803d;margin:2px 0 0;padding:14px 16px;font-size:12px;font-weight:700;border-radius:9px}#checkoutButton:hover:enabled{background:#166534}#checkoutButton:disabled{opacity:.45;cursor:not-allowed}#checkoutStatus:empty{display:none}#checkoutStatus{font-size:12px;margin-bottom:0}.cart-empty{text-align:center;padding:28px 12px;border-bottom:1px solid #eee}.cart-empty p{font-weight:700;color:#111827}.cart-empty span{font-size:12px;color:#6b7280}#mobileCart{display:none}.admin-mode #mobileCart{display:none!important}#toast{max-width:calc(100vw - 32px);width:max-content;text-align:center;bottom:24px}.catalog-tools{margin-bottom:0}@media(max-width:1023px){.header-actions{gap:7px;margin-left:auto}.header-actions button{padding:9px 11px;font-size:11px}.desktop-navigation>a{padding-left:8px;padding-right:8px;font-size:12px}.desktop-navigation [data-contact]{display:none}}@media(max-width:767px){#cartDialog{padding:22px 20px;width:min(94vw,700px);max-height:calc(100dvh - 24px)}#cartTitle{font-size:20px}#cartDialog .cart-row{gap:12px}#cartDialog .cart-row>img{width:45px;height:65px}#cartDialog .cart-row h3{font-size:13px}#cartDialog .cart-row small{font-size:10px}#cartDialog .cart-total{font-size:16px}#mobile-menu-btn{margin-left:0}#mobileCart:not([hidden]){display:flex;align-items:center;justify-content:center;gap:8px;position:fixed;bottom:14px;left:16px;right:16px;padding:14px 12px;border-radius:12px;background:#b91c1c;color:white;font-size:12px;font-weight:600;box-shadow:0 8px 24px #7f1d1d40;z-index:40}body:has(#mobileCart:not([hidden])){padding-bottom:72px}body:has(#mobileCart:not([hidden])) #toast{bottom:84px}dialog:modal~#toast{z-index:100}#cartDialog .remove{padding:10px}.header-cart{gap:7px}.catalog-search{margin-bottom:22px}.btn-add-cart{font-size:12px}}
/* Location, within About Us */
.location-panel{margin-top:42px;padding:28px;border:1px solid #f3d8dc;border-top:4px solid #b91c1c;border-radius:24px;background:linear-gradient(135deg,#fffcfc,#fff7f8)}.location-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.location-eyebrow{font-size:10px;line-height:1.6;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#b91c1c;margin-bottom:7px}.location-heading h3{font-size:25px;line-height:1.35;font-weight:800;letter-spacing:-.035em;color:#991b1b}.location-tag{border:1px solid #fecaca;color:#b91c1c;border-radius:999px;font-size:10px;padding:8px 13px;white-space:nowrap}.location-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:26px;align-items:stretch}.location-details{display:flex;flex-direction:column;gap:14px}.location-info-card{display:flex;align-items:flex-start;gap:14px;padding:20px;background:#fff;border:1px solid #f3d8dc;border-radius:16px}.location-icon{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:#fff1f2;color:#be123c}.location-info-card h4{font-size:14px;font-weight:700;color:#991b1b;margin-bottom:7px}.location-info-card p{font-size:11px;line-height:1.8;color:#6b7280}.location-info-card .location-street{font-weight:600;color:#374151;margin-bottom:3px}.location-info-card a{display:inline-flex;align-items:center;gap:6px;color:#b91c1c;font-size:12px;font-weight:700;margin-top:13px;line-height:1.6}.location-info-card a:hover{text-decoration:underline;text-underline-offset:4px}.location-note{font-size:10px;line-height:1.7;color:#9ca3af;padding-left:2px;margin-top:auto}.location-map{min-height:340px;overflow:hidden;border:1px solid #ead8da;border-radius:18px;background:#f3f4f6;box-shadow:0 2px 8px #991b1b06}.location-map iframe{display:block;width:100%;height:100%;min-height:340px;border:0}@media(max-width:900px){.location-layout{grid-template-columns:1fr 1fr;gap:18px}.location-panel{padding:22px}.location-info-card{padding:16px;gap:12px}.location-heading h3{font-size:22px}}@media(max-width:639px){.location-panel{padding:20px 16px;margin-top:30px;border-radius:20px}.location-heading{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:20px}.location-heading h3{font-size:22px}.location-tag{font-size:9px;padding:6px 10px}.location-layout{grid-template-columns:minmax(0,1fr);gap:20px}.location-map,.location-map iframe{min-height:300px}.location-note{font-size:10px;margin-top:0}.location-info-card p{font-size:11px}.location-eyebrow{font-size:9px}}
.location-panel{scroll-margin-top:90px}
#logo{width:54px;height:44px;object-fit:contain}.footer-brand-logo{display:block;width:55px;height:44px;background:#fff;padding:3px;border-radius:7px;object-fit:contain}