/* KHF stats clean final
   Fix khusus bagian kotak Panel / VPS / Script agar lurus, rapi, dan tidak menceng.
   Frontend only. Tidak menyentuh backend/payment/database. */

.product-page-body .pd-stats,
.product-page-body .pd-stats.pd-stats-three,
.product-page-body .pd-stats.pd-stats-clean{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:14px 0 16px !important;
  padding:0 !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  perspective:none !important;
  transform:none !important;
  transform-style:flat !important;
  overflow:visible !important;
}

.product-page-body .pd-stats > article,
.product-page-body .pd-stats-clean > article,
.product-page-body .pd-stat-panel,
.product-page-body .pd-stat-vps,
.product-page-body .pd-stat-script{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:88px !important;
  height:88px !important;
  padding:14px 13px 16px !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 18% 0%,rgba(255,255,255,.14),transparent 34%),
    linear-gradient(145deg,rgba(15,23,42,.82),rgba(2,6,23,.68)) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.12) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:7px !important;
  transform:none !important;
  rotate:0deg !important;
  scale:1 !important;
  translate:0 0 !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}

.product-page-body .pd-stats > article::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  opacity:.78 !important;
  pointer-events:none !important;
  background:
    linear-gradient(120deg,rgba(255,255,255,.12),transparent 38%),
    radial-gradient(circle at 82% 22%,rgba(34,211,238,.12),transparent 42%) !important;
}

.product-page-body .pd-stats > article::after{
  content:"" !important;
  position:absolute !important;
  left:13px !important;
  right:13px !important;
  bottom:14px !important;
  width:auto !important;
  height:3px !important;
  margin:0 !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,rgba(250,204,21,.88),rgba(125,249,255,.88),rgba(168,85,247,.82)) !important;
  box-shadow:0 0 16px rgba(34,211,238,.28) !important;
  transform:none !important;
}

.product-page-body .pd-stats > article small,
.product-page-body .pd-stats-clean > article small{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:rgba(248,250,252,.92) !important;
  font-size:12px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.product-page-body .pd-stats > article b,
.product-page-body .pd-stats-clean > article b{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-size:39px !important;
  line-height:.9 !important;
  font-weight:950 !important;
  letter-spacing:-.07em !important;
  text-align:left !important;
  white-space:nowrap !important;
  transform:none !important;
}

.product-page-body .pd-stat-panel{
  background:
    radial-gradient(circle at 20% 5%,rgba(168,85,247,.24),transparent 42%),
    linear-gradient(145deg,rgba(35,23,58,.82),rgba(5,10,25,.70)) !important;
}
.product-page-body .pd-stat-vps{
  background:
    radial-gradient(circle at 75% 8%,rgba(34,211,238,.23),transparent 44%),
    linear-gradient(145deg,rgba(10,45,58,.82),rgba(5,10,25,.70)) !important;
}
.product-page-body .pd-stat-script{
  background:
    radial-gradient(circle at 82% 8%,rgba(250,204,21,.22),transparent 44%),
    linear-gradient(145deg,rgba(55,43,12,.82),rgba(5,10,25,.70)) !important;
}

.product-page-body .pd-stat-panel b{color:#ffffff !important;text-shadow:0 0 18px rgba(168,85,247,.25) !important;}
.product-page-body .pd-stat-vps b{color:#ffffff !important;text-shadow:0 0 18px rgba(34,211,238,.25) !important;}
.product-page-body .pd-stat-script b{color:#ffffff !important;text-shadow:0 0 18px rgba(250,204,21,.22) !important;}

@media (max-width:640px){
  .product-page-body .pd-stats,
  .product-page-body .pd-stats.pd-stats-three,
  .product-page-body .pd-stats.pd-stats-clean{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:9px !important;
    margin:12px 0 14px !important;
  }

  .product-page-body .pd-stats > article,
  .product-page-body .pd-stats-clean > article{
    height:78px !important;
    min-height:78px !important;
    padding:12px 10px 14px !important;
    border-radius:18px !important;
  }

  .product-page-body .pd-stats > article::after{
    left:10px !important;
    right:10px !important;
    bottom:11px !important;
    height:3px !important;
  }

  .product-page-body .pd-stats > article small,
  .product-page-body .pd-stats-clean > article small{
    font-size:10.8px !important;
    line-height:1 !important;
    letter-spacing:-.03em !important;
  }

  .product-page-body .pd-stats > article b,
  .product-page-body .pd-stats-clean > article b{
    font-size:34px !important;
    line-height:.88 !important;
  }
}

@media (max-width:390px){
  .product-page-body .pd-stats,
  .product-page-body .pd-stats.pd-stats-three,
  .product-page-body .pd-stats.pd-stats-clean{
    gap:7px !important;
  }
  .product-page-body .pd-stats > article,
  .product-page-body .pd-stats-clean > article{
    height:74px !important;
    min-height:74px !important;
    padding:11px 8px 13px !important;
    border-radius:16px !important;
  }
  .product-page-body .pd-stats > article small,
  .product-page-body .pd-stats-clean > article small{
    font-size:10px !important;
  }
  .product-page-body .pd-stats > article b,
  .product-page-body .pd-stats-clean > article b{
    font-size:31px !important;
  }
}