root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
html { scroll-behavior: smooth; }

/* Light: card/glass */
.glass { background: rgba(255,255,255,.85); backdrop-filter: blur(8px); }
.card { border-radius: 1rem; border: 1px solid rgba(0,0,0,.08); padding: 1.25rem; background: #fff; }

/* Promo card style */
#promo .card, #promo .glass {
  background: #fff; border: 1px solid #e5e7eb; color: #111827;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#promo .card p, #promo .glass p { color: #475569; }

/* Product cards (dark) */
#produk #cards > * {
  background: rgba(17,24,39,.85);
  border:1px solid rgba(255,255,255,.18);
  border-radius:1rem; padding:1rem;
  box-shadow:0 6px 18px rgba(17,24,39,.35);
  color:#e5e7eb;
  backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
#produk #cards > *:hover { background: rgba(17,24,39,.92); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17,24,39,.45); }
#produk #cards > * img { border-radius:.9rem; }
#produk #cards > * h3 { color:#fff; }
#produk #cards > * p { color:#d1d5db; }
#produk #cards .category, #produk #cards .meta { color:#9ca3af; text-transform:uppercase; letter-spacing:.05em; font-size:.75rem; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; border-radius:1rem; padding:.75rem 1rem; font-weight:600; transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(1px); }
.btn--primary{ background:#ef4444; color:#fff; } .btn--primary:hover{ background:#f05252; }
.btn--ghost  { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:#000000; }
.btn--ghost2  { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:#ffffff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--wa     { background:#22c55e; color:#fff; } .btn--wa:hover{ background:#34d399; }
.btn--glow { box-shadow: 0 0 0 rgba(34,197,94,0); animation: btnPulse 3s ease-in-out infinite; }
@keyframes btnPulse { 0%,100%{ box-shadow:0 0 0 rgba(34,197,94,0);} 50%{ box-shadow:0 0 32px rgba(34,197,94,.25);} }

/* Inputs */
.ipt { width:100%; border-radius:.9rem; border:1px solid rgba(0,0,0,.12); background:#fff; padding:.9rem 1rem; outline:none; }
.ipt:focus { box-shadow:0 0 0 3px rgba(59,130,246,.25); border-color: rgba(59,130,246,.45); }

/* Chips */
.chip { position:absolute; left:-1rem; bottom:-1rem; transform: rotate(2deg); background:#0a0a0a; border:1px solid rgba(0,0,0,.85); color:#fff; padding:.35rem .75rem; border-radius:.9rem; }
.chip--float { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0) rotate(2deg);} 50%{ transform: translateY(-8px) rotate(2deg);} }

/* Shimmer headline */
.sh { background: linear-gradient(90deg, #111, #6b7280, #111); -webkit-background-clip:text; background-clip:text; color:transparent; background-size: 200% 100%; animation: shimmer 6s linear infinite; }
@keyframes shimmer { 0%{ background-position: 0% 0; } 100%{ background-position: 200% 0; } }

/* Reveal */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease;}
.reveal.in{ opacity:1; transform:none;}
.reveal[data-reveal="slide-down"]{ transform: translateY(-12px); }
.reveal[data-reveal="slide-down"].in{ transform:none; }
.reveal[data-reveal="zoom-in"]{ transform: scale(.96); }
.reveal[data-reveal="zoom-in"].in{ transform:none; }

/* Links */
.link-ux{ position:relative; }
.link-ux::after{ content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background: currentColor; transition: width .25s ease; opacity:.6; }
.link-ux:hover::after{ width:100%; }

/* Slideshow */
.slideshow{ position:relative; overflow:hidden; border-radius:1rem; border:1px solid rgba(0,0,0,.08); background:linear-gradient(135deg,#fff,#f7f7f7); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.slideshow .slides{ display:flex; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.slideshow .slide{ min-width:100%; height:clamp(260px,45vh,520px); object-fit:cover; filter:saturate(1) contrast(1.02); border-radius:1rem; }
.slideshow .nav-btn{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.12); color:#fff; display:grid; place-items:center; font-size:22px; cursor:pointer; transition:background .3s ease, transform .2s ease; z-index:10; }
.slideshow .nav-btn:hover{ background:rgba(255,255,255,.1); transform:translateY(-50%) scale(1.05); }
.slideshow .prev{ left:12px; } .slideshow .next{ right:12px; }
.slideshow .slideshow-controls{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:5; }
.slideshow .dot{ width:12px; height:12px; border-radius:50%; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.45); cursor:pointer; transition:background .25s ease, transform .2s ease; }
.slideshow .dot:hover{ transform:scale(1.2); }
.slideshow .dot.active{ background:#111827; box-shadow:0 0 6px rgba(0,0,0,.25); }

/* Color swatches */
.color-swatches{ display:flex; align-items:center; gap:.5rem; margin-top:.75rem; }
.color-swatches .swatch{
  width:18px; height:18px; border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  box-shadow:0 1px 2px rgba(0,0,0,.25) inset, 0 1px 2px rgba(0,0,0,.1);
  cursor:pointer; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.color-swatches .swatch:hover{ transform:scale(1.08); }
.color-swatches .swatch.is-active{ box-shadow:0 0 0 2px rgba(255,255,255,.85); }
.swatch[data-color="Biru"]{  background:#3b82f6; }
.swatch[data-color="Orange"]{ background:#ff6a00; }
.swatch[data-color="Hitam"]{ background:#111827; }
.swatch[data-color="Merah"]{ background:#ff0000; }
.swatch[data-color="Lime"]{ background:#a9fd00; }
.swatch[data-color="Abu"]{ background:#535353; }
.swatch[data-color="Sand"]{ background:#c3b091; }
.swatch[data-color="Putih"]{ background:#ffffff; border-color:rgba(0,0,0,.35); }
.color-swatches .selected-color{ margin-left:.25rem; font-size:.75rem; color:#d1d5db; }

/* Motion respect */
@media (prefers-reduced-motion: reduce){
  .btn--glow, .chip--float, .reveal, .sh{ animation:none!important; }
  .reveal{ opacity:1!important; transform:none!important; }
}