/* =========================================================
   ZYNN STORE V9 — APK LIST POLISH + MOBILE MOTION
   Final layer. Load setelah V8.
   ========================================================= */
:root{
  --v9-bg:#020817;
  --v9-card:#06142c;
  --v9-card-deep:#030916;
  --v9-cyan:#45f2ff;
  --v9-blue:#3b8cff;
  --v9-purple:#9b63ff;
  --v9-green:#22e6ad;
  --v9-text:#f7fbff;
  --v9-muted:rgba(223,235,255,.68);
}

@keyframes v9CardIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes v9IconFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.025)}}
@keyframes v9GlowPulse{0%,100%{box-shadow:0 18px 46px rgba(0,0,0,.32),0 0 0 rgba(69,242,255,0),inset 0 1px 0 rgba(255,255,255,.08)}50%{box-shadow:0 22px 58px rgba(0,0,0,.40),0 0 28px rgba(69,242,255,.12),inset 0 1px 0 rgba(255,255,255,.11)}}
@keyframes v9Shine{0%{transform:translateX(-140%) rotate(18deg);opacity:0}24%{opacity:.7}60%,100%{transform:translateX(160%) rotate(18deg);opacity:0}}

/* Desktop APK cards: tetap rapi, lebih informatif */
.grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
}
.card{
  position:relative!important;
  isolation:isolate!important;
  min-height:268px!important;
  padding:18px!important;
  border-radius:28px!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(69,242,255,.14),transparent 34%),
    linear-gradient(180deg,rgba(8,24,54,.92),rgba(2,7,19,.98))!important;
  border:1px solid rgba(69,242,255,.22)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08)!important;
  transform:translateZ(0)!important;
  animation:v9CardIn .55s cubic-bezier(.2,.8,.2,1) both!important;
}
.card:nth-child(2n){animation-delay:.035s!important}.card:nth-child(3n){animation-delay:.07s!important}.card:nth-child(4n){animation-delay:.105s!important}
.card::before{
  content:attr(data-badge)!important;
  position:absolute!important;
  top:16px!important;
  right:14px!important;
  z-index:4!important;
  max-width:116px!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.04em!important;
  color:#061224!important;
  background:linear-gradient(90deg,var(--v9-cyan),var(--v9-purple))!important;
  box-shadow:0 0 22px rgba(69,242,255,.22)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.card::after{
  content:attr(data-price)!important;
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  bottom:17px!important;
  height:42px!important;
  z-index:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 12px!important;
  border-radius:16px!important;
  color:#061224!important;
  font-size:14px!important;
  font-weight:950!important;
  letter-spacing:-.01em!important;
  background:linear-gradient(90deg,var(--v9-cyan),var(--v9-purple))!important;
  box-shadow:0 12px 26px rgba(69,242,255,.18),0 0 30px rgba(155,99,255,.13)!important;
}
.card img{
  width:108px!important;
  height:108px!important;
  object-fit:contain!important;
  margin:16px auto 18px!important;
  padding:10px!important;
  border-radius:25px!important;
  align-self:center!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(236,243,255,.92))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 28px rgba(69,242,255,.14)!important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease!important;
  animation:v9IconFloat 4.8s ease-in-out infinite!important;
}
.card span{
  display:block!important;
  width:100%!important;
  min-height:unset!important;
  margin:0!important;
  padding:0 0 66px!important;
  background:transparent!important;
  color:var(--v9-text)!important;
  font-size:19px!important;
  line-height:1.1!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
  text-align:left!important;
  text-shadow:0 0 20px rgba(255,255,255,.09)!important;
  white-space:normal!important;
  overflow:visible!important;
  -webkit-line-clamp:unset!important;
}
.card span::after{
  content:attr(data-meta)!important;
  display:flex!important;
  align-items:center!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:24px!important;
  margin-top:9px!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  color:var(--v9-muted)!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(69,242,255,.12)!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:0!important;
}
.card > *{position:relative!important;z-index:2!important;}
.card .v9-shine{display:none!important;}
.card:hover{border-color:rgba(69,242,255,.52)!important;transform:translateY(-6px)!important;box-shadow:0 28px 76px rgba(0,0,0,.44),0 0 44px rgba(69,242,255,.16)!important;}
.card:hover img{transform:translateY(-4px) scale(1.055)!important;filter:saturate(1.12) contrast(1.04)!important;}

/* Rapikan jarak section APK */
.section.category-section{overflow:visible!important;}
.section.category-section h2{display:flex!important;align-items:center!important;gap:10px!important;}

@media(max-width:720px){
  body{background-attachment:fixed!important;}
  .section.category-section{
    width:calc(100% - 24px)!important;
    max-width:430px!important;
    margin:0 auto!important;
    padding-bottom:28px!important;
  }
  .section.category-section h2{
    margin:0 0 18px!important;
    padding-left:0!important;
    font-size:28px!important;
    line-height:1.05!important;
    letter-spacing:-.04em!important;
  }

  /* APK Premium list mobile dibuat lebih premium dan tidak kosong */
  .grid,.products-grid,.digital-products-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    width:100%!important;
    margin:0!important;
  }
  .card,.product-card,.digital-product-card{
    min-height:236px!important;
    height:auto!important;
    padding:13px!important;
    border-radius:24px!important;
    align-items:flex-start!important;
    text-align:left!important;
    background:
      radial-gradient(circle at 50% 2%,rgba(69,242,255,.16),transparent 32%),
      linear-gradient(180deg,rgba(8,24,54,.90),rgba(2,7,19,.99))!important;
    border:1px solid rgba(69,242,255,.24)!important;
    box-shadow:0 20px 48px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08)!important;
    animation:v9CardIn .58s cubic-bezier(.16,1,.3,1) both, v9GlowPulse 5.5s ease-in-out infinite!important;
  }
  .card::before{
    top:11px!important;
    right:10px!important;
    max-width:88px!important;
    padding:6px 8px!important;
    font-size:8.6px!important;
    letter-spacing:.02em!important;
  }
  .card::after{
    left:13px!important;
    right:13px!important;
    bottom:13px!important;
    height:39px!important;
    border-radius:15px!important;
    font-size:12px!important;
    justify-content:center!important;
    color:#061224!important;
  }
  .card img,.product-card img,.digital-product-card img{
    width:86px!important;
    height:86px!important;
    margin:22px auto 17px!important;
    padding:9px!important;
    border-radius:23px!important;
    background:linear-gradient(180deg,#ffffff,#eef5ff)!important;
    box-shadow:0 16px 34px rgba(0,0,0,.34),0 0 26px rgba(69,242,255,.13)!important;
  }
  .card span,.product-card-title,.digital-product-title{
    width:100%!important;
    margin:0!important;
    padding:0 0 60px!important;
    display:block!important;
    color:#fff!important;
    font-size:15.5px!important;
    line-height:1.08!important;
    font-weight:950!important;
    text-align:left!important;
    letter-spacing:-.025em!important;
    overflow:visible!important;
    -webkit-line-clamp:unset!important;
  }
  .card span::after{
    content:attr(data-meta)!important;
    margin-top:8px!important;
    min-height:22px!important;
    padding:5px 8px!important;
    border-radius:999px!important;
    display:inline-flex!important;
    width:auto!important;
    max-width:100%!important;
    white-space:nowrap!important;
    font-size:10.3px!important;
    font-weight:850!important;
    color:rgba(225,237,255,.76)!important;
    background:linear-gradient(90deg,rgba(69,242,255,.10),rgba(155,99,255,.10))!important;
    border:1px solid rgba(69,242,255,.14)!important;
  }
  .card:nth-child(odd){animation-delay:.03s!important;}
  .card:nth-child(even){animation-delay:.09s!important;}

  /* shimmer sangat halus tanpa bikin layout acak */
  .card:active{transform:scale(.975)!important;}
  .card:hover{transform:none!important;}
  .card::selection{background:transparent!important;}

  /* pastikan bottom nav tidak nutup isi terakhir */
  .grid{padding-bottom:20px!important;}
}

@media(max-width:390px){
  .section.category-section{width:calc(100% - 20px)!important;}
  .grid,.products-grid,.digital-products-grid{gap:12px!important;}
  .card,.product-card,.digital-product-card{min-height:222px!important;padding:12px!important;border-radius:22px!important;}
  .card img,.product-card img,.digital-product-card img{width:78px!important;height:78px!important;margin-top:21px!important;margin-bottom:15px!important;border-radius:21px!important;}
  .card span,.product-card-title,.digital-product-title{font-size:14.4px!important;padding-bottom:57px!important;}
  .card span::after{font-size:9.6px!important;padding:5px 7px!important;}
  .card::after{left:12px!important;right:12px!important;bottom:12px!important;height:37px!important;font-size:11.4px!important;}
  .card::before{max-width:78px!important;font-size:8px!important;}
}

@media(prefers-reduced-motion:reduce){
  .card,.card img{animation:none!important;}
}