/* ==========================================================================
   Ziah Primee Store – styles.css (v12.1)
   Sinkron: index.html & script.js v12.1+
   Fokus: visual modern + interaksi kaya + glow pink mengikuti hover
   ========================================================================== */

/* ===========================
   Design Tokens
   =========================== */
:root{
  --primary:#ec4899;   /* pink-500 */
  --secondary:#7c3aed; /* violet-600 */
  --ink:#111827;       /* gray-900 */
  --muted:#6b7280;     /* gray-500 */
  --card:#ffffff;
  --border:rgba(17,24,39,.08);
  --ring:rgba(124,58,237,.45);

  --brand-grad:linear-gradient(135deg,#ec4899 0%,#8b5cf6 50%,#06b6d4 100%);
  --shadow-lg: 0 25px 50px -12px rgba(0,0,0,.25);
  --shadow-md: 0 14px 28px -12px rgba(0,0,0,.18);
  --surface: rgba(255,255,255,.85);

  /* Glow */
  --glow-color: rgba(236,72,153,.45);
  --glow-color-2: rgba(139,92,246,.38);
  --glow-color-3: rgba(6,182,212,.28);
}

/* ===========================
   Base polish
   =========================== */
html,body{ -webkit-tap-highlight-color:transparent; }
body{
  color:var(--ink);
  background:
    radial-gradient(1400px 700px at 10% -10%, rgba(236,72,153,.07), transparent 60%),
    radial-gradient(1200px 600px at 110% 10%, rgba(139,92,246,.08), transparent 60%),
    linear-gradient(180deg, #fff, #faf8ff);
}
img{ display:block; max-width:100%; }
a{ transition:opacity .2s ease, color .2s ease, text-decoration-color .2s ease; }
a:hover{ opacity:.92; text-decoration-color:var(--primary); }
::selection{ background:rgba(236,72,153,.25); color:#111; }

/* Scrollbar (Chromium/Edge) */
*::-webkit-scrollbar{ height:10px; width:10px }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#e5e7eb,#d1d5db);
  border-radius:10px; border:2px solid transparent; background-clip:padding-box
}
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#d1d5db,#cbd5e1) }

header.sticky{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.2) blur(12px);
  box-shadow:0 10px 20px -20px rgba(0,0,0,.35);
  transition: box-shadow .25s ease, background .25s ease, transform .25s ease;
}

/* Brand wrap: mencegah pecah baris & overflow di HP */
.brand-wrap{ line-height:1.15; min-width:0; }
.brand-wrap h1,
.brand-wrap .brand-tagline{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===========================
   Global Pink Cursor Glow (berbasis hover elemen)
   =========================== */
/* Efek “bayangan pink” ketika kursor bergerak DI ATAS elemen interaktif.
   Tanpa JS: glow mengikuti posisi elemen & arah hover, cukup ringan.
*/
.hover-glow, 
button, .btn-hover, a, input, select, textarea,
.product-card, header.sticky, .card-hover, .panel, .glass {
  position:relative;
}
.hover-glow::before,
button::before, .btn-hover::before, a::before,
input:focus::before, select:focus::before, textarea:focus::before,
.product-card::before, header.sticky::before, .card-hover::before,
.panel::before, .glass::before {
  content:'';
  position:absolute; inset:auto;
  width:240px; height:240px; pointer-events:none;
  background:radial-gradient(120px 120px at center,
    var(--glow-color) 0%,
    rgba(236,72,153,.22) 35%,
    rgba(139,92,246,.16) 60%,
    transparent 70%);
  opacity:0; transform:translate(-50%,-50%) scale(.85);
  transition:opacity .25s ease, transform .25s ease, filter .25s ease;
  filter:blur(14px);
  z-index:-1;
}
/* Posisi default di tengah elemen; akan terasa “mengikuti” saat mouse bergerak melintasi grid/kartu */
button:hover::before, .btn-hover:hover::before, a:hover::before,
.product-card:hover::before, .card-hover:hover::before, .panel:hover::before,
.glass:hover::before, header.sticky:hover::before {
  left:50%; top:50%; opacity:1; transform:translate(-50%,-50%) scale(1);
}

/* ===========================
   Animations
   =========================== */
@keyframes slideInUp{ from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes pop{ 0%{transform:scale(.95);opacity:.6} 100%{transform:scale(1);opacity:1} }
@keyframes loading{ 0%{left:-100%} 100%{left:100%} }
@keyframes shimmer{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(236,72,153,.35)}
  70%{box-shadow:0 0 0 16px rgba(236,72,153,0)}
  100%{box-shadow:0 0 0 0 rgba(236,72,153,0)}
}

/* Scroll-driven reveal (Chrome/Edge/Safari modern) */
@keyframes reveal-up{ from{ opacity:0; transform: translateY(18px) } to{ opacity:1; transform:none } }
.scroll-reveal{
  animation: reveal-up .6s cubic-bezier(.22,1,.36,1) both;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Utilities */
.animate-slide-up{ animation:slideInUp .5s ease-out both; }
.animate-fade-in,.fade-in{ animation:fadeIn .3s ease-out both; }
.animate-pop{ animation:pop .22s ease-out both; }
.floaty{ animation:floaty 5s ease-in-out infinite }

/* ===========================
   Forms & focus
   =========================== */
input,select,textarea,button{
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease, background .18s ease, filter .18s ease;
}
input:focus,select:focus,textarea:focus{
  box-shadow:0 10px 22px -12px rgba(236,72,153,.35), 0 0 0 4px rgba(236,72,153,.1);
  border-color:var(--primary);
  transform:translateY(-1px);
}
#searchPublic{ background:#fff; border:1px solid var(--border); }

/* Global focus-visible ring */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ring); outline-offset:2px; border-radius:.6rem;
}

/* ===========================
   Cards & micro-interactions
   =========================== */
.card-hover{
  transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1), filter .25s;
  transform-style:preserve-3d; will-change:transform;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.95));
  border:1px solid var(--border);
}
.card-hover:hover{
  transform:translateY(-8px) scale(1.02) rotate3d(.5,1,0,6deg);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(236,72,153,.18) inset;
  filter:saturate(1.02) contrast(1.01);
}
.card-hover:active{ transform:translateY(-2px) scale(.997); }

/* Glow rim ketika hover (subtle) */
.card-hover:hover{
  outline:1px solid rgba(236,72,153,.18);
  outline-offset:-1px;
}

.img-zoom{ overflow:hidden; }
.img-zoom img{ transition:transform .35s ease, filter .35s ease; will-change:transform; }
.img-zoom:hover img{ transform:scale(1.06) rotate(.35deg); filter:saturate(1.05) contrast(1.02); }

.shadow-soft{
  box-shadow:0 10px 20px -12px rgba(0,0,0,.18), 0 4px 8px -6px rgba(0,0,0,.12);
}

/* Shine effect (untuk kartu produk) */
.shine{ position:relative; overflow:hidden; }
.shine::after{
  content:''; position:absolute; top:0; left:-150%; width:120%; height:100%;
  background:linear-gradient(110deg,transparent 0%, rgba(255,255,255,.35) 45%, transparent 100%);
  transform:skewX(-20deg); transition:left .7s ease;
}
.shine:hover::after{ left:150%; }

/* Animated gradient border utility */
.glow-border{
  position:relative; z-index:0; border-radius:1rem;
}
.glow-border::before{
  content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit;
  background:conic-gradient(from 0deg at 50% 50%,#ec4899, #8b5cf6, #06b6d4, #ec4899);
  animation:spin 8s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
}
@keyframes spin{ to{ transform:rotate(1turn)} }

/* ===========================
   Product cards (public)
   =========================== */
.product-card{
  background:var(--card); border-radius:1rem; overflow:hidden;
  box-shadow:0 10px 20px -10px rgba(0,0,0,.15); border:1px solid var(--border);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  transform-style:preserve-3d;
}
.product-card:hover{
  border-color:rgba(236,72,153,.25);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(236,72,153,.15) inset;
}
.product-card .media{ height:10rem; background:#f3f4f6; position:relative; }
.product-card .media img{ width:100%; height:100%; object-fit:cover; }
.product-card .badge{
  font-size:.75rem; padding:.25rem .5rem; border-radius:.5rem;
  background:#fdf2f8; color:#be185d; border:1px solid #fce7f3;
  display:inline-flex; align-items:center; gap:.35rem;
  animation:pulseRing 2.2s infinite;
}
.product-card .price{ color:#6d28d9; font-weight:700; }

/* Grey-out bila habis stok */
.is-out{ filter:grayscale(.2) saturate(.75); opacity:.9; }

/* ===========================
   Buttons (hover, ripple, press)
   =========================== */
button,.btn-hover,[role="button"]{
  position:relative; overflow:hidden; cursor:pointer; user-select:none;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
  isolation:isolate;
  background-clip:padding-box;
}
.btn-hover:hover, button:hover, [role="button"]:hover{
  transform:translateY(-3px);
  box-shadow:
    0 15px 30px -5px rgba(0,0,0,.2),
    0 8px 18px -8px rgba(236,72,153,.35);
}
.btn-hover:active, button:active, [role="button"]:active{
  transform:translateY(-1px) scale(.995);
}

/* Shine sweep on hover */
.btn-hover::before, button.btn-hover::before{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  transition:transform .5s ease; pointer-events:none; z-index:1;
}
.btn-hover:hover::before{ transform:translateX(100%); }

/* Ripple press (center) */
.btn-hover::after, button::after, [role="button"]::after{
  content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; z-index:0;
  background:radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,.25) 40%, transparent 60%);
  border-radius:9999px; transform:translate(-50%,-50%) scale(0); opacity:0;
  transition: transform .45s ease, opacity .6s ease;
}
.btn-hover:active::after, button:active::after, [role="button"]:active::after{
  transform:translate(-50%,-50%) scale(24); opacity:1;
}

/* CTA variant */
.btn-cta{
  background:var(--brand-grad); color:#fff; border:1px solid transparent;
  box-shadow:0 12px 30px -10px rgba(139,92,246,.45);
}
.btn-cta:hover{ filter:saturate(1.05) contrast(1.03); }
.btn-cta:focus-visible{ outline-color:#a78bfa; }

/* ===========================
   Tables (finance & purchases)
   =========================== */
table{ border-collapse:separate; border-spacing:0; }
thead th{
  position:sticky; top:0; z-index:1;
  background:#fafafa; backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
tbody tr{
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
tbody tr:hover{
  background:linear-gradient(0deg, rgba(236,72,153,.06), transparent),
             #f9fafb;
  transform:translateY(-1px);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.2), 0 0 0 1px rgba(236,72,153,.13) inset;
  filter:saturate(1.02);
}
td,th{ border-color:var(--border); }
td,th,pre{ word-wrap:break-word; overflow-wrap:anywhere; }
pre{
  background:#f9fafb; border:1px solid var(--border); border-radius:.5rem; padding:.5rem .75rem;
}

/* ===========================
   Toast & skeleton & loading
   =========================== */
#toastContainer{ position:fixed; bottom:1.25rem; left:50%; transform:translateX(-50%); z-index:120; }
.toast-card{
  background:#fff; border:1px solid var(--border); border-radius:.75rem; padding:.5rem .75rem;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.25), 0 8px 18px -8px rgba(236,72,153,.24);
  animation:pop .22s ease-out both;
}
.loading{ position:relative; overflow:hidden; }
.loading::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:loading 1.5s infinite;
}
.skeleton{
  background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:.75rem;
}

/* ===========================
   Modal helpers + FIX z-index
   =========================== */
[id$="Modal"].fixed{ z-index:120 !important; }
[id$="Modal"] .bg-white{ position:relative; z-index:2; transform-origin:center; animation:pop .18s ease-out; }
[id$="Modal"] .sticky.bottom-0{
  position:sticky; bottom:0; z-index:3;
  background:#fff; border-top:1px solid var(--border);
}
[id$="Modal"] .sticky.bottom-0 *{ pointer-events:auto; }

/* ===========================
   Purchases UI (expired cards)
   =========================== */
#expiredWrap .p-3{ transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
#expiredWrap .p-3:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -12px rgba(239,68,68,.35), 0 0 0 1px rgba(239,68,68,.18) inset;
  filter:saturate(1.02);
}

/* ===========================
   Music Dock / Widget
   =========================== */
@keyframes mpwMin{ to{ transform:translateX(-120%) scale(.85); opacity:0 } }
@keyframes eq { 0%,100%{ transform:scaleY(.6) } 50%{ transform:scaleY(1) } }

.mpw-minimize{ animation:mpwMin .32s ease-in forwards }
.mpw-dock{ position:fixed; left:18px; bottom:18px; z-index:140; display:none; }
.mpw-dock.show{ display:block !important; animation:pop .22s ease-out; }
.mpw-dockbtn{
  width:54px; height:54px; border-radius:9999px; border:1px solid rgba(255,255,255,.5);
  background:var(--brand-grad);
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  display:flex; align-items:center; justify-content:center; color:#fff; position:relative;
  animation:pulseRing 2.6s infinite;
}
.eq{ display:flex; gap:2px; }
.eq i{ width:3px; height:12px; background:#fff; border-radius:2px; display:block; animation:eq 1s ease-in-out infinite }
.eq i:nth-child(2){ animation-delay:.15s } .eq i:nth-child(3){ animation-delay:.3s }

/* Panel id=musicWidget & class=panel */
#musicWidget.panel{
  border:1px solid var(--border);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px) saturate(1.05);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.35);
}

/* ===========================
   Fancy badges / chips
   =========================== */
.badge, .chip{
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius:999px; padding:.25rem .6rem; font-weight:600; font-size:.75rem;
}
.badge.ready{ background:#ecfeff; color:#0e7490; border:1px solid #cffafe; animation:pulseRing 2.2s infinite; }

/* ===========================
   Pink Focus Halo untuk elemen interaktif
   =========================== */
button:hover, .btn-hover:hover, a:hover,
input:hover, select:hover, textarea:hover,
.product-card:hover, header.sticky:hover {
  box-shadow:
    0 20px 40px -20px rgba(0,0,0,.28),
    0 8px 24px -10px var(--glow-color-2),
    0 0 0 1px rgba(236,72,153,.14) inset;
}

/* ===========================
   Dark Mode (opsional)
   =========================== */
.dark body{
  color:#e5e7eb;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(236,72,153,.06), transparent 60%),
    radial-gradient(1000px 500px at 110% 0%, rgba(139,92,246,.08), transparent 60%),
    linear-gradient(180deg, #0b0b10, #0f0f16);
}
.dark header.sticky{ background:rgba(10,10,14,.6); }
.dark .product-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.dark .product-card .badge{ background:rgba(236,72,153,.12); color:#f9a8d4; border-color:rgba(236,72,153,.25); }
.dark thead th{ background:rgba(17,24,39,.85); }
.dark tbody tr:hover{ background:rgba(255,255,255,.03); }
.dark .toast-card{ background:rgba(17,24,39,.9); color:#e5e7eb; border-color:rgba(255,255,255,.08); }

/* ===========================
   Extras (helpers)
   =========================== */
.glass{
  background:var(--surface); backdrop-filter:blur(10px) saturate(1.05);
  border:1px solid rgba(255,255,255,.35);
}
.lift{ transition: transform .25s ease, box-shadow .25s ease, filter .25s ease }
.lift:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); filter:saturate(1.02) }

@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
.shake{ animation:shake .35s ease }

/* Viewport fade edge for carousels (mask) */
.fade-edges{
  -webkit-mask-image:linear-gradient(90deg,transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg,transparent, #000 8%, #000 92%, transparent);
}