/* KHF SCRIPT SCROLL + LIVE 3D FINAL
   Fokus: list script di dalam card bisa scroll, dan isi area kosong bawah produk.
   Frontend only. Backend/payment/database tidak disentuh. */

/* ===== Script product card: daftar script bisa scroll ===== */
.product-page-body .pd-product-card.script{
  min-height:450px !important;
}

.product-page-body .pd-product-card.script .pd-script-preview{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  min-height:122px !important;
  max-height:154px !important;
  margin:0 0 12px !important;
  padding:2px 3px 2px 0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(250,204,21,.55) rgba(15,23,42,.35) !important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%) !important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%) !important;
}

.product-page-body .pd-product-card.script .pd-script-preview::-webkit-scrollbar{
  width:4px !important;
}
.product-page-body .pd-product-card.script .pd-script-preview::-webkit-scrollbar-track{
  background:rgba(15,23,42,.38) !important;
  border-radius:999px !important;
}
.product-page-body .pd-product-card.script .pd-script-preview::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#facc15,#fb923c) !important;
  border-radius:999px !important;
}

.product-page-body .pd-product-card.script .pd-script-preview div{
  flex:0 0 auto !important;
  min-height:36px !important;
  padding:8px 10px !important;
  border-radius:13px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:8px !important;
  background:linear-gradient(135deg,rgba(15,23,42,.84),rgba(2,6,23,.58)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.18) !important;
}

.product-page-body .pd-product-card.script .pd-script-preview b{
  min-width:0 !important;
  font-size:11px !important;
  line-height:1.1 !important;
  letter-spacing:-.02em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.product-page-body .pd-product-card.script .pd-script-preview small{
  flex:0 0 auto !important;
  max-width:74px !important;
  font-size:10px !important;
  line-height:1 !important;
  color:#facc15 !important;
  font-weight:950 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.product-page-body .pd-product-card.script .pd-price-row{
  margin-top:auto !important;
}

/* ===== Bottom live 3D section: isi area kosong bawah, rapi dan tidak alay ===== */
.product-page-body .pd-live-visual-panel{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  margin:16px 0 18px !important;
  padding:18px !important;
  min-height:148px !important;
  border-radius:28px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 16% 18%,rgba(251,146,60,.22),transparent 34%),
    radial-gradient(circle at 88% 28%,rgba(34,211,238,.20),transparent 35%),
    linear-gradient(145deg,rgba(15,23,42,.78),rgba(2,6,23,.66)) !important;
  background-size:auto,34px 34px,auto,auto,auto !important;
  box-shadow:0 26px 70px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.10) !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(220px,.8fr) !important;
  gap:18px !important;
  align-items:center !important;
}

.product-page-body .pd-live-visual-panel::before{
  content:"";
  position:absolute !important;
  inset:-1px !important;
  border-radius:inherit !important;
  padding:1px !important;
  background:linear-gradient(135deg,rgba(250,204,21,.36),transparent 32%,rgba(34,211,238,.28) 70%,rgba(168,85,247,.24)) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  pointer-events:none !important;
  opacity:.75 !important;
}

.product-page-body .pd-live-visual-panel::after{
  content:"";
  position:absolute !important;
  left:-16% !important;
  right:-16% !important;
  top:50% !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.55),rgba(250,204,21,.50),transparent) !important;
  opacity:.48 !important;
  transform:translateY(-50%) !important;
  animation:khfLiveLine 4.8s ease-in-out infinite !important;
  pointer-events:none !important;
}

.product-page-body .lv3d-orb{
  position:absolute !important;
  width:130px !important;
  height:130px !important;
  border-radius:999px !important;
  filter:blur(34px) !important;
  opacity:.36 !important;
  pointer-events:none !important;
  z-index:-1 !important;
}
.product-page-body .lv3d-orb-a{left:8%;bottom:-48px;background:#f59e0b !important;animation:khfOrbSoft 7s ease-in-out infinite !important;}
.product-page-body .lv3d-orb-b{right:8%;top:-44px;background:#22d3ee !important;animation:khfOrbSoft 8s ease-in-out infinite reverse !important;}

.product-page-body .lv3d-copy,
.product-page-body .lv3d-board{position:relative !important;z-index:2 !important;}

.product-page-body .lv3d-copy span{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  height:34px !important;
  padding:0 13px !important;
  border-radius:999px !important;
  background:rgba(15,23,42,.72) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#fde68a !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.18em !important;
}
.product-page-body .lv3d-copy span i{
  width:8px !important;height:8px !important;border-radius:50% !important;background:#22c55e !important;
  box-shadow:0 0 16px rgba(34,197,94,.75) !important;
}
.product-page-body .lv3d-copy h2{
  margin:12px 0 6px !important;
  font-size:clamp(22px,5.5vw,34px) !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
  color:#fff !important;
}
.product-page-body .lv3d-copy p{
  margin:0 !important;
  max-width:430px !important;
  color:rgba(226,232,240,.68) !important;
  font-size:13px !important;
  line-height:1.45 !important;
  font-weight:700 !important;
}

.product-page-body .lv3d-board{
  min-height:112px !important;
  padding:14px !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(2,6,23,.40) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 18px 38px rgba(0,0,0,.24) !important;
  transform:perspective(740px) rotateX(7deg) rotateY(-6deg) !important;
  transform-style:preserve-3d !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
}

.product-page-body .lv3d-track{
  position:absolute !important;
  left:22px !important;right:22px !important;top:50% !important;
  height:2px !important;
  background:linear-gradient(90deg,rgba(34,211,238,.16),rgba(250,204,21,.40),rgba(34,211,238,.16)) !important;
  transform:translateY(-50%) translateZ(0) !important;
  border-radius:999px !important;
  opacity:.75 !important;
}
.product-page-body .lv3d-track i{
  position:absolute !important;
  top:50% !important;
  width:9px !important;height:9px !important;border-radius:50% !important;
  background:#facc15 !important;
  box-shadow:0 0 18px rgba(250,204,21,.8) !important;
  transform:translateY(-50%) !important;
  animation:khfNodePulse 2.8s ease-in-out infinite !important;
}
.product-page-body .lv3d-track i:nth-child(1){left:0;}
.product-page-body .lv3d-track i:nth-child(2){left:50%;animation-delay:.45s;}
.product-page-body .lv3d-track i:nth-child(3){right:0;animation-delay:.9s;}

.product-page-body .lv3d-board article{
  position:relative !important;
  z-index:2 !important;
  min-width:0 !important;
  padding:13px 10px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(145deg,rgba(15,23,42,.82),rgba(2,6,23,.60)) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 25px rgba(0,0,0,.23) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  transform:translateZ(18px) !important;
}
.product-page-body .lv3d-board article.is-on{
  border-color:rgba(34,197,94,.30) !important;
  background:linear-gradient(145deg,rgba(20,83,45,.32),rgba(2,6,23,.60)) !important;
}
.product-page-body .lv3d-board b{
  font-size:12px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  color:#f8fafc !important;
}
.product-page-body .lv3d-board small{
  margin-top:7px !important;
  font-size:9px !important;
  line-height:1 !important;
  color:rgba(226,232,240,.58) !important;
  font-weight:800 !important;
}

@keyframes khfLiveLine{
  0%,100%{opacity:.32;transform:translateY(-50%) scaleX(.88)}
  50%{opacity:.68;transform:translateY(-50%) scaleX(1)}
}
@keyframes khfOrbSoft{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(8px,-6px,0) scale(1.08)}
}
@keyframes khfNodePulse{
  0%,100%{opacity:.55;transform:translateY(-50%) scale(.92)}
  50%{opacity:1;transform:translateY(-50%) scale(1.14)}
}

@media (max-width:640px){
  .product-page-body .pd-product-card.script{
    min-height:452px !important;
  }

  .product-page-body .pd-product-card.script .pd-script-preview{
    min-height:124px !important;
    max-height:146px !important;
    gap:7px !important;
  }

  .product-page-body .pd-product-card.script .pd-script-preview div{
    min-height:35px !important;
    padding:8px 9px !important;
  }

  .product-page-body .pd-product-card.script .pd-script-preview b{
    font-size:10.4px !important;
  }

  .product-page-body .pd-product-card.script .pd-script-preview small{
    max-width:68px !important;
    font-size:9.4px !important;
  }

  .product-page-body .pd-live-visual-panel{
    grid-template-columns:1fr !important;
    gap:14px !important;
    min-height:0 !important;
    padding:16px !important;
    margin:14px 0 18px !important;
    border-radius:26px !important;
  }

  .product-page-body .lv3d-copy h2{
    font-size:24px !important;
  }

  .product-page-body .lv3d-copy p{
    font-size:12px !important;
  }

  .product-page-body .lv3d-board{
    min-height:96px !important;
    padding:12px !important;
    gap:8px !important;
    border-radius:20px !important;
    transform:perspective(680px) rotateX(5deg) rotateY(-3deg) !important;
  }

  .product-page-body .lv3d-board article{
    padding:11px 7px !important;
    border-radius:16px !important;
  }

  .product-page-body .lv3d-board b{
    font-size:10px !important;
  }

  .product-page-body .lv3d-board small{
    font-size:8px !important;
  }
}

@media (max-width:380px){
  .product-page-body .pd-product-card.script{
    min-height:444px !important;
  }
  .product-page-body .pd-product-card.script .pd-script-preview{
    max-height:138px !important;
  }
  .product-page-body .pd-live-visual-panel{
    padding:14px !important;
  }
  .product-page-body .lv3d-copy span{
    height:31px !important;
    font-size:8.5px !important;
    padding:0 10px !important;
  }
  .product-page-body .lv3d-copy h2{
    font-size:22px !important;
  }
}