/* PASARAKUN PRODUCT DETAIL CSS - extracted from detail.blade.php */

/* === Extracted detail style block 1 === */
/* PASARAKUN PRODUCT DETAIL CLEAN CSS V1 */
[x-cloak]{display:none!important}

.pkdp{
  --pk-bg:var(--pk-page-bg,#101113);
  --pk-card:var(--pk-card-base,#18181B);
  --pk-card-2:var(--pk-surface,#15171B);
  --pk-line:rgba(255,255,255,.10);
  --pk-line-soft:rgba(255,255,255,.08);
  --pk-text:var(--pk-text-main,#F4F4F5);
  --pk-muted:var(--pk-text-muted,#A1A1AA);
  --pk-blue:var(--pk-primary,#3B82F6);
  --pk-blue-2:var(--pk-primary-hover,#2563EB);
  --pk-green:#22c55e;
  color:var(--pk-text);
}

.pkdp *{box-sizing:border-box}

.pkdp-wrap{max-width:1140px;margin:0 auto;padding:18px 20px 90px}
.pkdp-grid{display:grid;grid-template-columns:450px 310px 300px;gap:18px;justify-content:center;align-items:start}

.pkdp-card,
.pkdp-trust-card,
.pkdp-feature-grid>div{
  border:1px solid rgba(148,163,184,.14);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(24,24,27,.94),rgba(9,9,11,.92));
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}

.pkdp-universal-hero{
  position:relative;
  min-height:230px;
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--pk-line);
  background:radial-gradient(circle at 78% 45%,rgba(255,255,255,.055),transparent 30%),linear-gradient(135deg,var(--pk-card),var(--pk-surface) 52%,#27272a);
  box-shadow:0 18px 50px rgba(0,0,0,.30);
}

.pkdp-hero-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px;opacity:.55}
.pkdp-hero-content{position:relative;z-index:2;padding:24px;max-width:305px}
.pkdp-hero-brand,.pkdp-badge{display:inline-flex;border-radius:999px;padding:6px 11px;font-size:10px;font-weight:950;color:#dbeafe;border:1px solid rgba(96,165,250,.38);background:rgba(59,130,246,.12)}
.pkdp-hero-content h2{font-size:28px;line-height:1.04;font-weight:950;letter-spacing:-.05em;margin:12px 0 10px}
.pkdp-hero-content p{font-size:13px;line-height:1.55;color:var(--pk-muted);margin:0}
.pkdp-hero-pills{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
.pkdp-hero-pills span{border-radius:999px;background:rgba(24,24,27,.62);border:1px solid var(--pk-line-soft);padding:6px 10px;font-size:10px;font-weight:900}
.pkdp-hero-product{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:108px;text-align:center;z-index:3;display:flex;justify-content:center}
.pkdp-hero-icon{width:82px;height:82px;border-radius:22px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.pkdp-hero-icon img{width:100%;height:100%;object-fit:cover}

.pkdp-trust-grid-final{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.pkdp-trust-card{min-height:78px;padding:13px;border-radius:16px}
.pkdp-trust-card b{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:12px;margin-bottom:8px;background:rgba(59,130,246,.12);border:1px solid rgba(96,165,250,.22);font-size:14px}
.pkdp-trust-card strong{display:block;font-size:14px;font-weight:950;margin-bottom:4px}
.pkdp-trust-card span{display:block;color:var(--pk-muted);font-size:11.5px;line-height:1.3}
.pkdp-left-trust-strip{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:13px 14px;border-radius:16px;border:1px solid var(--pk-line);background:rgba(24,24,27,.72);color:#dbeafe;font-size:11.5px;font-weight:900}

.pkdp-info{padding:18px;min-height:auto;display:flex;flex-direction:column}
.pkdp-badge{margin-bottom:9px}
.pkdp-title{margin:0 0 6px;font-size:23px;line-height:1.08;letter-spacing:-.045em;font-weight:950}
.pkdp-strike{color:#f87171;text-decoration:line-through;font-size:12px;margin-bottom:4px}
.pkdp-price{font-size:28px;line-height:1;font-weight:950;color:#e2e8f0;letter-spacing:-.04em}
.pkdp-period{margin-left:6px;color:rgba(148,163,184,.88);font-size:11.5px;font-weight:800}

.pkdp-benefits{margin:10px 0;padding:10px 12px;border-radius:15px;border:1px solid var(--pk-line-soft);background:rgba(24,24,27,.62)}
.pkdp-check{display:flex;align-items:flex-start;gap:7px;margin:3px 0;font-size:11.5px;line-height:1.3;font-weight:800}
.pkdp-check i {
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  line-height: 1 !important;
}
.pkdp-check {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.pkdp-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.pkdp-opt{min-height:34px;min-width:74px;padding:0 13px;border-radius:13px;border:1px solid var(--pk-line-soft);background:rgba(24,24,27,.78);color:#e5e7eb;font-size:12px;font-weight:900;transition:all .16s ease}
.pkdp-opt:hover{border-color:rgba(59,130,246,.55);background:rgba(59,130,246,.12)}
.pkdp-opt.active{border-color:rgba(96,165,250,.75);color:#fff;background:linear-gradient(180deg,var(--pk-blue),var(--pk-blue-2));box-shadow:0 0 0 3px rgba(59,130,246,.18),0 12px 28px rgba(59,130,246,.22)}
.pkdp-opt.active::before{content:'✓';margin-right:6px}

.pkdp-qty-box{margin:12px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.pkdp-qty-box>span{font-size:12px;font-weight:950;color:#f4f4f5;white-space:nowrap}
.pkdp-qty-control{display:flex;align-items:center;height:38px;min-width:128px;border-radius:14px;overflow:hidden;border:1px solid var(--pk-line-soft);background:rgba(255,255,255,.08)}
.pkdp-qty-control button{width:38px;height:38px;border:0;background:rgba(255,255,255,.06);color:#fff;font-size:18px;font-weight:950}
.pkdp-qty-control input{width:48px;height:38px;border:0;outline:0;text-align:center;background:transparent;color:#fff;font-size:14px;font-weight:950}

.pkdp-actions{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pkdp-btn{height:42px;border-radius:14px;border:1px solid var(--pk-line-soft);font-size:12.5px;font-weight:950;transition:all .16s ease}
.pkdp-btn.buy{border:0;color:#fff;background:linear-gradient(180deg,var(--pk-blue),var(--pk-blue-2));box-shadow:0 14px 34px rgba(59,130,246,.26)}
.pkdp-btn.cart{color:#fff;background:linear-gradient(180deg,rgba(24,24,27,.88),rgba(9,9,11,.82))}
.pkdp-btn:hover,.pkdp-help-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.pk-clicked{transform:scale(.97)!important;filter:brightness(1.12)!important}

.pkdp-side{padding:18px 18px 12px;min-height:514px}
.pkdp-side h3{margin:0 0 10px;font-size:17px;font-weight:950}
.pkdp-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pkdp-summary-grid div{padding:10px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid var(--pk-line-soft)}
.pkdp-summary-grid span{display:block;color:var(--pk-muted);font-size:10.5px;font-weight:800;margin-bottom:5px}
.pkdp-summary-grid strong{display:block;color:#fff;font-size:12.5px;font-weight:950;line-height:1.2}

.pkdp-order-status,.pkdp-help-pro{margin-top:14px;padding:13px;border-radius:16px;border:1px solid var(--pk-line);background:linear-gradient(180deg,rgba(39,39,42,.72),rgba(9,9,11,.70))}
.pkdp-status-title,.pkdp-help-head{display:flex;align-items:flex-start;gap:9px;margin-bottom:10px}
.pkdp-status-title span,.pkdp-help-icon{flex:0 0 32px;width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.24)}
.pkdp-status-title h3,.pkdp-help-pro h3{margin:0;font-size:15px;line-height:1.2;font-weight:950}
.pkdp-help-pro p{margin:3px 0 0;color:var(--pk-muted);font-size:11.5px;line-height:1.35}
.pkdp-status-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pkdp-status-list div{padding:7px 8px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid var(--pk-line-soft)}
.pkdp-status-list span{display:block;font-size:10px;color:var(--pk-muted)}
.pkdp-status-list b{font-size:11.5px;color:#fff}
.pkdp-help-btn{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 12px;border-radius:12px;background:linear-gradient(135deg,var(--pk-blue),var(--pk-blue-2));color:#fff;text-decoration:none;font-size:12px;font-weight:950}

.pkdp-tabs{
  max-width:1096px;
  width:1096px;
  margin:28px auto 70px;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(148,163,184,.14);
  background:
    linear-gradient(180deg,rgba(24,24,27,.98),rgba(8,8,10,.97));
  box-shadow:0 24px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
.pkdp-tab-head{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:70px;
  padding:12px;
  border-bottom:1px solid rgba(148,163,184,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.pkdp-tab-head::-webkit-scrollbar{display:none}
.pkdp-tab-head button{
  position:relative;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:46px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:16px;
  background:rgba(255,255,255,.018);
  color:rgba(226,232,240,.78);
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  letter-spacing:-.01em;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.pkdp-tab-head button span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  font-size:13px;
  filter:saturate(1.1);
}
.pkdp-tab-head button:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
  border-color:rgba(148,163,184,.16);
  transform:translateY(-1px);
}
.pkdp-tab-head button.active{
  color:#ffffff;
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.pkdp-tab-head button.active::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:-13px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,.85),transparent);
}
.pkdp-tab-body{
  padding:34px 32px 38px;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 220px);
}
.pkdp-prose{color:#e5e7eb;font-size:14.5px;line-height:1.75}
.pkdp-section-title{margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid var(--pk-line-soft)}
.pkdp-section-title span{display:block;color:var(--pk-blue);font-size:16px;font-weight:950}
.pkdp-section-title strong{display:block;color:var(--pk-muted);font-size:12.5px;font-weight:800}

.pkdp-prose ul{
  list-style:none!important;
  padding:0!important;
  margin:14px 0!important;
  display:grid!important;
  gap:10px!important;
}

.pkdp-prose li{
  position:relative!important;
  padding:0 0 0 28px!important;
  margin:0!important;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  color:#e5e7eb!important;
  font-weight:600!important;
  line-height:1.7!important;
}

.pkdp-prose li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:1px;
  color:#60a5fa;
  font-weight:900;
  font-size:15px;
}


/* Detail Produk: icon per section */
.pkdp-prose[x-show*="info"] ul:nth-of-type(2) li::before{
  content:"⭐";
  color:#facc15;
  font-size:13px;
}

.pkdp-prose[x-show*="info"] ul:nth-of-type(3) li::before{
  content:"⚠";
  color:#fbbf24;
  font-size:13px;
}



/* Tab content generated description */
.pkdp-prose p{margin:0 0 13px;color:#e5e7eb}
.pkdp-prose h3,.pkdp-prose h4{
  margin:24px 0 12px;
  padding-top:16px;
  border-top:1px solid var(--pk-line-soft);
  color:var(--pk-blue);
  font-size:15.5px;
  font-weight:950;
}






.pkdp-prose .benefit-list{
  list-style:none;
  padding:0;
  margin:12px 0 22px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 28px;
}
.pkdp-prose .benefit-list li{
  margin:0;
  color:#e5e7eb;
  line-height:1.45;
}
.pkdp-prose .benefit-list span{color:#e5e7eb}
.pkdp-prose img,
.pkdp-prose p:empty{display:none}

@media(max-width:640px){


}


.pkdp-account-grid,.pkdp-order-info,.pkdp-warranty-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.pkdp-order-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.pkdp-account-card,.pkdp-order-step,.pkdp-order-info-card,.pkdp-warranty-card,.pkdp-review-card,.pkdp-faq{
  border:1px solid rgba(148,163,184,.13);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.040),rgba(255,255,255,.018));
  padding:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.pkdp-account-card h3,.pkdp-order-step h3,.pkdp-order-info-card h3,.pkdp-warranty-card h3{
  margin:0 0 10px;
  color:var(--pk-text);
  font-size:16px;
  font-weight:950;
  letter-spacing:-.02em;
}
.pkdp-account-card p,.pkdp-order-step p,.pkdp-warranty-card p{
  margin:0 0 14px;
  color:rgba(203,213,225,.86);
  font-size:13px;
  line-height:1.62;
}
.pkdp-account-card ul,.pkdp-order-info-card ul,.pkdp-warranty-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pkdp-account-card li,.pkdp-order-info-card li,.pkdp-warranty-card li{
  position:relative;
  padding-left:26px;
  font-size:12.5px;
  color:rgba(241,245,249,.90);
  font-weight:800;
  line-height:1.45;
}
.pkdp-account-card li::before,.pkdp-order-info-card li::before,.pkdp-warranty-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:17px;
  height:17px;
  border-radius:99px;
  background:rgba(34,197,94,.13);
  border:1px solid rgba(34,197,94,.22);
  color:#86efac;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:950;
}
.pkdp-account-icon,.pkdp-order-step-num,.pkdp-warranty-icon{
  width:34px;
  height:34px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(148,163,184,.16);
  color:#e5e7eb;
  font-weight:950;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.pkdp-account-note,.pkdp-warranty-note{
  margin-top:16px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.13);
  background:rgba(255,255,255,.035);
  color:rgba(226,232,240,.88);
  font-size:12.5px;
  line-height:1.55;
}

.pkdp-faq-list-premium{display:grid;gap:12px}
.pkdp-faq{padding:0;overflow:hidden}
.pkdp-faq summary{display:flex;gap:12px;align-items:center;padding:16px 18px;color:#fff;font-size:14px;font-weight:950;cursor:pointer}
.pkdp-faq summary span{width:26px;height:26px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,.16);color:#dbeafe}
.pkdp-faq-answer{padding:0 18px 18px 56px;color:#d1d5db;font-size:14px;line-height:1.8}
.pkdp-faq-empty{padding:18px;border-radius:18px;border:1px solid var(--pk-line);background:rgba(148,163,184,.045);display:grid;gap:6px;color:#cbd5e1}


/* Review fallback cards */
.pkdp-feature-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.pkdp-feature-grid>div{
  min-height:118px;
  padding:16px;
  border-radius:18px;
}
.pkdp-feature-grid b{
  display:flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  margin-bottom:12px;
  background:rgba(148,163,184,.08);
  border:1px solid var(--pk-line-soft);
  font-size:15px;
}
.pkdp-feature-grid strong{
  display:block;
  margin-bottom:7px;
  color:var(--pk-text);
  font-size:13.5px;
  line-height:1.25;
  font-weight:950;
}
.pkdp-feature-grid span{
  display:block;
  color:var(--pk-muted);
  font-size:12px;
  line-height:1.45;
}
@media(max-width:900px){
  .pkdp-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .pkdp-feature-grid{grid-template-columns:1fr}
}


.pkdp-review-proof{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.pkdp-review-proof > div{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--pk-line);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(39,39,42,.72),rgba(24,24,27,.44));
  padding:16px;
}
.pkdp-review-proof > div > b{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:12px;
  background:rgba(59,130,246,.12);
  margin-bottom:12px;
}
.pkdp-review-proof strong{
  display:block;
  color:var(--pk-text);
  font-size:15px;
  font-weight:950;
}
.pkdp-review-proof span{
  display:block;
  margin-top:4px;
  color:var(--pk-muted);
  font-size:12px;
}

.pkdp-rating-summary{
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);
  gap:18px;
  margin-top:16px;
  padding:18px;
  border-radius:22px;
  border:1px solid var(--pk-line);
  background:linear-gradient(180deg,rgba(39,39,42,.62),rgba(24,24,27,.38));
}
.pkdp-rating-score{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:180px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  padding:18px;
}
.pkdp-rating-score span{
  color:var(--pk-muted);
  font-size:12px;
  font-weight:850;
}
.pkdp-rating-score strong{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:46px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.05em;
}
.pkdp-rating-stars{
  display:flex;
  gap:3px;
  margin-top:10px;
  color:#52525b;
  font-size:20px;
}
.pkdp-rating-stars .on{color:#facc15}
.pkdp-rating-score small{
  margin-top:9px;
  color:#94a3b8;
  font-size:12px;
}

.pkdp-rating-bars{
  display:grid;
  align-content:center;
  gap:12px;
}
.pkdp-rating-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 46px;
  align-items:center;
  gap:10px;
}
.pkdp-rating-row span{
  color:#e5e7eb;
  font-size:12px;
  font-weight:900;
}
.pkdp-rating-row div{
  position:relative;
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.pkdp-rating-row i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#facc15,#fb923c);
}
.pkdp-rating-row em{
  color:#94a3b8;
  font-size:12px;
  font-style:normal;
  font-weight:850;
  text-align:right;
}

.pkdp-review-list{
  display:grid;
  gap:14px;
  margin-top:16px;
}
.pkdp-review-card{
  border:1px solid var(--pk-line);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(39,39,42,.62),rgba(24,24,27,.38));
  padding:18px;
}
.pkdp-review-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.pkdp-review-head strong{
  display:block;
  color:#fff;
  font-size:14px;
  font-weight:950;
}
.pkdp-review-head span{
  display:block;
  margin-top:3px;
  color:#94a3b8;
  font-size:12px;
}
.pkdp-review-stars{
  display:flex;
  gap:2px;
  color:#52525b;
  font-size:15px;
  white-space:nowrap;
}
.pkdp-review-stars .on{color:#facc15}
.pkdp-review-card p{
  margin:0;
  color:#dbeafe;
  font-size:14px;
  line-height:1.7;
}
.pkdp-review-card small{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  border-radius:999px;
  background:rgba(16,185,129,.10);
  color:#86efac;
  padding:6px 10px;
  font-size:11px;
  font-weight:900;
}
@media(max-width:760px){
  .pkdp-rating-summary{grid-template-columns:1fr}
  .pkdp-rating-score{min-height:auto}
  .pkdp-rating-score strong{font-size:38px}
  .pkdp-review-head{display:grid}
}



/* Review stats clean final */
.pkdp-review-proof > div{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:0!important;
  min-height:118px;
  padding:18px!important;
}
.pkdp-review-proof > div > b{
  width:34px!important;
  height:34px!important;
  margin:0 0 14px 0!important;
}
.pkdp-review-proof > div > div{
  display:block!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.pkdp-review-proof strong{
  font-size:22px!important;
  line-height:1!important;
  letter-spacing:-.03em;
}
.pkdp-review-proof span{
  margin-top:8px!important;
  font-size:13px!important;
}

@keyframes pkspin{to{transform:rotate(360deg)}}

@media(max-width:1150px){
  .pkdp-wrap{padding:14px 14px 100px}
  .pkdp-grid{grid-template-columns:1fr}
  .pkdp-info,.pkdp-side{position:relative;top:auto;min-height:auto}.pkdp-info{display:block}
  .pkdp-tabs{width:auto;max-width:100%}
  .pkdp-order-steps{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
  .pkdp-universal-hero{min-height:235px}
  .pkdp-hero-content h2{font-size:27px}
  .pkdp-hero-product{right:18px}
  .pkdp-trust-grid-final,.pkdp-account-grid,.pkdp-order-info,.pkdp-warranty-grid,.pkdp-review-proof,.pkdp-order-steps{grid-template-columns:1fr}
  .pkdp-actions{grid-template-columns:1fr}
  .pkdp-tab-body{padding:24px 18px 28px}
  .pkdp-tab-head{gap:22px;padding:0 18px}

}

/* === UX POLISH FINAL === */

/* 1. Top panels equal height */
@media(min-width:1151px){
  .pkdp-media,
  .pkdp-side{
    min-height:514px;
  }

  .pkdp-info{
    min-height:auto;
  }

  .pkdp-media{
    display:flex;
    flex-direction:column;
  }

  .pkdp-left-trust-strip{
    margin-top:auto;
  }

  .pkdp-info{
    display:flex;
    flex-direction:column;
  }

  .pkdp-actions{
    margin-top:auto;
  }
}


/* 3. Premium CTA button */
.pkdp-btn.buy{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.pkdp-btn.buy::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 25% 0%, rgba(255,255,255,.30), transparent 28%),
    linear-gradient(135deg,#60a5fa,var(--pk-primary-hover) 55%,#1d4ed8);
  z-index:-1;
}

.pkdp-btn.buy::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-45%;
  width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  transform:skewX(-18deg);
  transition:left .45s ease;
}

.pkdp-btn.buy:hover::after{
  left:110%;
}

.pkdp-btn.buy:hover{
  box-shadow:0 16px 36px rgba(37,99,235,.34),0 0 0 3px rgba(59,130,246,.12);
}

/* 4. Option select animation */
.pkdp-opt{
  position:relative;
  overflow:hidden;
}

.pkdp-opt::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center,rgba(255,255,255,.20),transparent 42%);
  opacity:0;
  transform:scale(.65);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

.pkdp-opt:hover{
  transform:translateY(-1px);
}

.pkdp-opt.active{
  animation:pkdpOptionPop .22s ease;
}

.pkdp-opt.active::after{
  opacity:1;
  transform:scale(1.15);
}

@keyframes pkdpOptionPop{
  0%{transform:scale(.96)}
  70%{transform:scale(1.03)}
  100%{transform:scale(1)}
}

/* 5. Skeleton loading when variant/package changes */
.pkdp-loading .pkdp-info,
.pkdp-loading .pkdp-side{
  position:relative;
}

.pkdp-loading .pkdp-info::after,
.pkdp-loading .pkdp-side::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent),
    rgba(2,6,23,.18);
  background-size:220% 100%;
  animation:pkdpSkeleton 1s linear infinite;
  pointer-events:none;
}

@keyframes pkdpSkeleton{
  from{background-position:220% 0}
  to{background-position:-220% 0}
}


/* Compact product badge */
.pkdp-info .pkdp-badge{
  width:max-content;
  max-width:max-content;
  align-self:flex-start;
  padding:6px 12px;
}


/* === MOBILE PRODUCT DETAIL POLISH === */
@media(max-width:640px){
  .pkdp-wrap{
    padding:12px 14px 120px;
  }

  .pkdp-universal-hero{
    min-height:210px;
    border-radius:22px;
  }

  .pkdp-hero-content{
    padding:22px 20px;
    max-width:270px;
  }

  .pkdp-hero-content h2{
    font-size:25px;
    max-width:230px;
  }

  .pkdp-hero-content p{
    font-size:13px;
    max-width:230px;
  }

  .pkdp-hero-product{
    right:18px;
    top:54%;
  }

  .pkdp-hero-icon{
    width:76px;
    height:76px;
    border-radius:20px;
  }

  .pkdp-trust-grid-final{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .pkdp-trust-card{
    min-height:104px;
    padding:13px;
  }

  .pkdp-trust-card strong{
    font-size:13px;
  }

  .pkdp-trust-card span{
    font-size:11px;
  }

  .pkdp-left-trust-strip{
    font-size:10.5px;
    gap:7px;
    padding:11px 10px;
  }

  .pkdp-info,
  .pkdp-side{
    min-height:auto!important;
  }

  .pkdp-info{
    padding:18px;
  }

  .pkdp-title{
    font-size:24px;
  }

  .pkdp-price{
    font-size:28px;
  }

  .pkdp-actions{
    grid-template-columns:1fr 1fr;
  }

  .pkdp-btn{
    font-size:12px;
  }

  .pkdp-tabs{
    margin-top:22px;
    border-radius:22px;
  }
}


/* =========================
   FINAL PREMIUM POLISH
   ========================= */

/* 1. Panel tengah lebih graphite */
.pkdp-info{
  background:
    linear-gradient(
      180deg,
      rgba(24,24,27,.96),
      rgba(9,9,11,.94)
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 12px 30px rgba(0,0,0,.25)!important;
}

/* kurangi glow biru */
.pkdp-info::before,
.pkdp-info::after{
  opacity:.22!important;
}


/* 3. Tombol beli lebih premium */
.pkdp-buy,
.pkdp-btn-buy,
button.buy{
  position:relative;
  overflow:hidden;
}

.pkdp-buy::before,
.pkdp-btn-buy::before,
button.buy::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.16),
      transparent
    );

  transform:translateX(-130%);
  transition:transform .8s ease;
}

.pkdp-buy:hover::before,
.pkdp-btn-buy:hover::before,
button.buy:hover::before{
  transform:translateX(130%);
}

.pkdp-buy:hover,
.pkdp-btn-buy:hover,
button.buy:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(59,130,246,.25),
    0 12px 30px rgba(37,99,235,.22);
}

/* pilihan paket lebih smooth */
.pkdp-opt,
.pkdp-package-btn,
.pkdp-duration-btn{
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.pkdp-opt:hover,
.pkdp-package-btn:hover,
.pkdp-duration-btn:hover{
  transform:translateY(-1px);
}

.pkdp-opt.active,
.pkdp-package-btn.active,
.pkdp-duration-btn.active{
  box-shadow:
    0 0 0 1px rgba(59,130,246,.30),
    0 8px 18px rgba(37,99,235,.16);
}

/* DETAIL PRODUCT STAGE 1 - MOBILE CTA CLEANUP */
@media(max-width:640px){
  /* Hindari tabrakan dengan bottom nav global */
  .pkdp-wrap{
    padding-bottom:125px!important;
  }

  /* Panel beli lebih compact */
  .pkdp-info{
    padding:18px!important;
    border-radius:22px!important;
  }

  .pkdp-info .pkdp-badge{
    margin-bottom:10px!important;
  }

  .pkdp-title{
    font-size:25px!important;
    line-height:1.08!important;
  }

  .pkdp-price{
    font-size:29px!important;
  }

  .pkdp-benefits{
    margin:12px 0!important;
    padding:12px!important;
    border-radius:16px!important;
  }

  .pkdp-check{
    font-size:12px!important;
    line-height:1.28!important;
    margin:4px 0!important;
  }

  .pkdp-label{
    margin:12px 0 7px!important;
  }

  .pkdp-options{
    gap:8px!important;
    margin-bottom:10px!important;
  }

  .pkdp-opt{
    min-height:38px!important;
    border-radius:14px!important;
    font-size:12.5px!important;
  }

  .pkdp-qty-box{
    margin:14px 0 16px!important;
  }

  .pkdp-actions{
    display:grid!important;
    grid-template-columns:1.45fr .95fr!important;
    gap:10px!important;
  }

  .pkdp-btn{
    height:48px!important;
    border-radius:16px!important;
    font-size:13px!important;
  }

  .pkdp-btn.buy{
    box-shadow:0 16px 34px rgba(59,130,246,.28)!important;
  }

  .pkdp-btn.cart{
    opacity:.92!important;
  }

  /* Ringkasan mobile jangan terlalu berat */
  .pkdp-side{
    padding:18px!important;
    border-radius:22px!important;
  }

  .pkdp-summary-grid{
    gap:8px!important;
  }

  .pkdp-order-status,
  .pkdp-help-pro{
    margin-top:12px!important;
  }
  /* Tab mobile final */
  .pkdp-tabs{
    margin-top:18px!important;
    margin-bottom:34px!important;
    border-radius:22px!important;
  }

  .pkdp-tab-head{
    min-height:62px!important;
    height:auto!important;
    padding:10px!important;
    gap:8px!important;
    scroll-snap-type:x proximity!important;
  }

  .pkdp-tab-head button{
    height:40px!important;
    min-height:40px!important;
    padding:0 14px!important;
    border-radius:999px!important;
    font-size:12px!important;
    scroll-snap-align:start!important;
  }

  .pkdp-tab-head button.active::after{
  display:none;
}

  .pkdp-tab-body{
    padding:22px 16px 28px!important;
  }
}

/* ==================================================
   DETAIL PRODUCT STAGE 2
   ================================================== */

@media(max-width:640px){

  /* TRUST CARD LEBIH PENDEK */
  .pkdp-trust-grid-final{
    gap:8px!important;
    margin-top:10px!important;
  }

  .pkdp-trust-card{
    min-height:auto!important;
    padding:11px!important;
    border-radius:14px!important;
  }

  .pkdp-trust-card b{
    width:24px!important;
    height:24px!important;
    margin-bottom:6px!important;
    border-radius:10px!important;
    font-size:12px!important;
  }

  .pkdp-trust-card strong{
    font-size:13px!important;
    margin-bottom:2px!important;
  }

  .pkdp-trust-card span{
    font-size:11px!important;
    line-height:1.2!important;
  }

  /* TRUST STRIP */
  .pkdp-left-trust-strip{
    padding:10px!important;
    gap:8px!important;
    font-size:11px!important;
  }

  /* RINGKASAN PADAT */
  .pkdp-side{
    padding:16px!important;
  }

  .pkdp-side h3{
    font-size:15px!important;
    margin-bottom:8px!important;
  }

  .pkdp-summary-grid{
    gap:6px!important;
  }

  .pkdp-summary-grid div{
    padding:8px!important;
    border-radius:10px!important;
  }

  .pkdp-summary-grid span{
    font-size:9px!important;
    margin-bottom:3px!important;
  }

  .pkdp-summary-grid strong{
    font-size:11px!important;
  }

  .pkdp-order-status{
    margin-top:10px!important;
    padding:10px!important;
  }

  .pkdp-status-list{
    gap:5px!important;
  }

  .pkdp-status-list div{
    padding:6px!important;
  }

  .pkdp-status-list span{
    font-size:9px!important;
  }

  .pkdp-status-list b{
    font-size:11px!important;
  }

  /* CHAT ADMIN */
  .pkdp-help-pro{
    margin-top:10px!important;
    padding:12px!important;
  }

  .pkdp-help-btn{
    height:42px!important;
    font-size:12px!important;
  }

  .pkdp-prose{
    font-size:13px!important;
    line-height:1.7!important;
  }

  .pkdp-section-title span{
    font-size:15px!important;
  }

  .pkdp-section-title strong{
    font-size:11px!important;
  }
}

/* ==================================================
   DETAIL PRODUCT FINAL POLISH
   ================================================== */

/* Tombol keranjang lebih premium */
.pkdp-btn.cart{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border-color:rgba(255,255,255,.11)!important;
  background:linear-gradient(180deg,rgba(24,24,27,.96),rgba(8,8,10,.94))!important;
}

/* Summary final lebih conversion-oriented */
.pkdp-summary-final div{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
}

@media(max-width:640px){

  /* Trust card besar disembunyikan di mobile, diganti trust bar compact */
  .pkdp-trust-grid-final{
    display:none!important;
  }

  .pkdp-left-trust-strip,
  .pkdp-trust-bar-final{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:10px!important;
    padding:10px!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
    border:1px solid rgba(255,255,255,.08)!important;
  }

  .pkdp-trust-bar-final span{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:34px!important;
    padding:0 8px!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.06)!important;
    font-size:10.5px!important;
    line-height:1.1!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  /* Panel beli naik karena trust card sudah compact */
  .pkdp-info{
    margin-top:12px!important;
  }

  /* CTA final */
  .pkdp-actions{
    grid-template-columns:1.55fr .95fr!important;
  }

  .pkdp-btn.buy,
  .pkdp-btn.cart{
    height:50px!important;
    border-radius:17px!important;
  }

  .pkdp-btn.buy{
    font-size:13.5px!important;
  }

  .pkdp-btn.cart{
    font-size:12.5px!important;
  }

  /* Ringkasan lebih ringan */
  .pkdp-side{
    margin-top:12px!important;
  }

  .pkdp-summary-final{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .pkdp-order-status{
    display:none!important;
  }

  .pkdp-help-pro{
    margin-top:10px!important;
  }

  }

/* DETAIL PRODUCT FIX - HIDE GLOBAL WHITE CATEGORY BOX INSIDE DETAIL */
.pkdp-prose > div[class*="bg-white"],
.pkdp-prose > section[class*="bg-white"],
.pkdp-prose div[class*="rounded-3xl"][class*="bg-white"],
.pkdp-prose div[class*="border-zinc-200"][class*="bg-white"]{
  display:none!important;
}

.pkdp-prose{
  overflow:hidden!important;
}

/* === Extracted detail style block 2 === */
/* === PRODUCT DETAIL FINAL PATCH CONSOLIDATED === */

/* Review stats */
.pkdp-review-proof > div{
  min-height:88px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;
  padding:18px 20px!important;
}
.pkdp-review-proof > div > b{
  width:38px!important;
  height:38px!important;
  margin:0!important;
  flex:0 0 38px!important;
}
.pkdp-review-proof > div > div{
  display:block!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.pkdp-review-proof strong{
  display:block!important;
  font-size:22px!important;
  line-height:1!important;
}
.pkdp-review-proof span{
  display:block!important;
  margin-top:7px!important;
  font-size:13px!important;
}

/* Footer/mobile spacing */
@media(max-width:640px){
  main:has(.pkdp){flex:0 0 auto!important}
  .pkdp-wrap{padding-bottom:0!important}
  .pkdp-tabs{margin-bottom:10px!important}
  .pkdp-tab-body{padding-bottom:20px!important}
  .pkdp-review-proof > div{min-height:82px!important}
}

/* Desktop trust strip */
@media(min-width:641px){
  .pkdp-left-trust-strip{
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
    padding:12px 14px!important;
    margin-top:18px!important;
  }
  .pkdp-left-trust-strip span{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
    font-size:10.8px!important;
    line-height:1!important;
  }
}

/* Hero benefit */
.pkdp-benefits{
  display:grid!important;
  gap:7px!important;
}
.pkdp-check{
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;
  align-items:flex-start!important;
  column-gap:8px!important;
  margin:0!important;
  line-height:1.35!important;
  word-break:normal!important;
}
.pkdp-check i{
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  margin-top:1px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:rgba(59,130,246,.16)!important;
  border:1px solid rgba(96,165,250,.28)!important;
  color:#60a5fa!important;
  font-size:11px!important;
  font-style:normal!important;
  font-weight:950!important;
  line-height:1!important;
}
.pkdp-check > *:not(i){min-width:0!important}

/* Status title */
.pkdp-status-title{align-items:center!important}
.pkdp-status-title h3{
  margin:0!important;
  line-height:1!important;
  display:flex!important;
  align-items:center!important;
}

/* Account cards */
.pkdp-account-card-head{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-bottom:12px!important;
  padding-bottom:12px!important;
  border-bottom:1px solid rgba(148,163,184,.12)!important;
}
.pkdp-account-card-head .pkdp-account-icon{
  margin-bottom:0!important;
  flex:0 0 34px!important;
}
.pkdp-account-card-head h3{
  border-top:0!important;
  padding-top:0!important;
  margin:0!important;
  line-height:1!important;
}

/* Order step */
.pkdp-order-step-head{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-bottom:12px!important;
  padding-bottom:12px!important;
  border-bottom:1px solid rgba(148,163,184,.12)!important;
}
.pkdp-order-step-head .pkdp-order-step-num{
  margin-bottom:0!important;
  flex:0 0 34px!important;
}
.pkdp-order-step-head h3{
  border-top:0!important;
  padding-top:0!important;
  margin:0!important;
  line-height:1!important;
}

/* Order info */
.pkdp-order-info-card h3{
  border-top:0!important;
  padding-top:0!important;
  padding-bottom:12px!important;
  margin:0 0 14px!important;
  border-bottom:1px solid rgba(148,163,184,.12)!important;
  line-height:1.15!important;
}

/* Warranty cards */
.pkdp-warranty-card-head{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-bottom:12px!important;
  padding-bottom:12px!important;
  border-bottom:1px solid rgba(148,163,184,.12)!important;
}
.pkdp-warranty-card-head .pkdp-warranty-icon{
  margin-bottom:0!important;
  flex:0 0 34px!important;
}
.pkdp-warranty-card-head h3{
  border-top:0!important;
  padding-top:0!important;
  margin:0!important;
  line-height:1!important;
}

/* Qty */
.pkdp-qty-box{
  margin:14px 0 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.pkdp-qty-control{
  display:grid!important;
  grid-template-columns:40px 52px 40px!important;
  width:132px!important;
  min-width:132px!important;
  height:40px!important;
  padding:0!important;
  gap:0!important;
  border-radius:15px!important;
  border:1px solid rgba(148,163,184,.16)!important;
  background:rgba(255,255,255,.055)!important;
  overflow:hidden!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.pkdp-qty-control button{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  border:0!important;
  border-radius:0!important;
  background:rgba(255,255,255,.035)!important;
  color:#e5e7eb!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:18px!important;
  font-weight:950!important;
  line-height:1!important;
  padding:0!important;
  margin:0!important;
  transition:background .16s ease,color .16s ease!important;
}
.pkdp-qty-control button:first-child{border-right:1px solid rgba(255,255,255,.06)!important}
.pkdp-qty-control button:last-child{border-left:1px solid rgba(255,255,255,.06)!important}
.pkdp-qty-control button:hover{
  background:rgba(59,130,246,.14)!important;
  color:#dbeafe!important;
}
.pkdp-qty-control input{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#ffffff!important;
  text-align:center!important;
  font-size:15px!important;
  font-weight:950!important;
  padding:0!important;
  margin:0!important;
}
.pkdp-qty-control input::-webkit-inner-spin-button,
.pkdp-qty-control input::-webkit-outer-spin-button{
  -webkit-appearance:none!important;
  margin:0!important;
}

/* Center buy panel compact */
@media(min-width:1151px){
  .pkdp-info{
    min-height:auto!important;
    height:auto!important;
    align-self:start!important;
    padding:16px!important;
  }
  .pkdp-info .pkdp-badge{margin-bottom:7px!important}
  .pkdp-info .pkdp-title{margin-bottom:6px!important}
  .pkdp-info .pkdp-price{
    display:inline-block!important;
    margin-bottom:8px!important;
  }
  .pkdp-info .pkdp-benefits{
    margin:8px 0 10px!important;
    padding:9px 11px!important;
    gap:5px!important;
  }
  .pkdp-info .pkdp-label{
    margin:8px 0 6px!important;
    font-size:14px!important;
    line-height:1.1!important;
  }
  .pkdp-info .pkdp-options{
    margin-bottom:8px!important;
    gap:7px!important;
  }
  .pkdp-info .pkdp-qty-box{margin:10px 0 10px!important}
  .pkdp-info .pkdp-actions{margin-top:8px!important}
}

/* === Previous pkdp-product.css backup content === */
/* =========================
   PKDP PRODUCT SYSTEM v2
   CLEAN PREMIUM UI (STRIPE STYLE)
========================= */

.pkdp-prose{
  color:#e5e7eb;
  font-size:14px;
  line-height:1.75;
}

/* ===== TAB SYSTEM ===== */
.pkdp-tabs{
  max-width:1100px;
  margin:24px auto;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(24,24,27,.95),rgba(9,9,11,.95));
  overflow:hidden;
}

.pkdp-tab-head{
  display:flex;
  gap:18px;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow-x:auto;
}

.pkdp-tab-head button{
  background:transparent;
  border:0;
  color:#cbd5e1;
  font-weight:700;
  font-size:13px;
  padding:10px 12px;
  border-radius:10px;
  white-space:nowrap;
}

.pkdp-tab-head button.active{
  color:#60a5fa;
  background:rgba(59,130,246,.12);
}

/* ===== LIST SYSTEM (FIX ICON ALIGN) ===== */
.pkdp-prose ul{
  margin:0;
  padding:0;
}

.pkdp-prose ul li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin:8px 0;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

/* ICON STABLE */
.pkdp-prose ul li svg,
.pkdp-prose ul li i{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#22c55e;
}

/* TEXT */
.pkdp-prose ul li span,
.pkdp-prose ul li div{
  flex:1;
  line-height:1.5;
}

/* ===== CHECK BADGE ===== */
.pkdp-check{
  display:flex;
  align-items:center;
  gap:8px;
}

.pkdp-check i{
  width:16px;
  height:16px;
  border-radius:999px;
  background:#22c55e;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:10px;
}

/* Product detail visual polish - align with homepage */
.pkdp{
  color:var(--pk-text);
}

.pkdp-wrap{
  padding-top:26px!important;
}

.pkdp-card,
.pkdp-trust-card,
.pkdp-feature-grid>div{
  background:var(--pk-card)!important;
  border-color:var(--pk-border)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.20)!important;
}

.pkdp-universal-hero{
  background:
    radial-gradient(circle at 78% 45%,rgba(255,255,255,.055),transparent 30%),
    linear-gradient(180deg,#1b1d22 0%,#111216 100%)!important;
  border-color:var(--pk-border)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.20)!important;
}

.pkdp-tabs{
  background:var(--pk-card)!important;
  border-color:var(--pk-border)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.22)!important;
}

.pkdp-tab-head{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;
}

.pkdp-price{
  color:var(--pk-text)!important;
}

.pkdp-btn.cart{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.08)!important;
}

.pkdp-summary-grid div,
.pkdp-status-list div,
.pkdp-benefits{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.07)!important;
}

@media(max-width:640px){
  .pkdp-wrap{
    padding-top:18px!important;
  }
}

/* Product detail desktop layout polish */
@media(min-width:1151px){
  .pkdp-wrap{
    max-width:1220px!important;
  }

  .pkdp-grid{
    grid-template-columns:470px 330px 310px!important;
    gap:20px!important;
  }

  .pkdp-tabs{
    width:1130px!important;
    max-width:1130px!important;
  }

  .pkdp-info,
  .pkdp-side{
    padding:20px!important;
  }

  .pkdp-universal-hero{
    min-height:245px!important;
  }
}

/* =====================================================
   PKDP VISUAL POLISH PHASE 2
   ===================================================== */

/* ---------- Buy button : remove heavy glow ---------- */

.pkdp-btn.buy{
    box-shadow:0 5px 14px rgba(37,99,235,.16)!important;
}

.pkdp-btn.buy:hover{
    box-shadow:0 7px 18px rgba(37,99,235,.20)!important;
    transform:translateY(-1px);
}

/* ---------- Active package / duration ---------- */

.pkdp-opt.active{
    background:#2f6ff3!important;
    border-color:#2f6ff3!important;
    box-shadow:none!important;
}

.pkdp-opt{
    transition:.18s ease!important;
}

.pkdp-opt:hover{
    box-shadow:none!important;
}

/* ---------- Typography ---------- */

.pkdp-prose{
    font-size:15.5px!important;
    line-height:1.95!important;
    font-weight:400!important;
    color:#d7d9de!important;
}

.pkdp-prose p{
    margin-bottom:18px!important;
}

.pkdp-prose li{
    font-weight:500!important;
    line-height:1.85!important;
}

/* ---------- Section title ---------- */

.pkdp-section-title{
    border-bottom:1px solid rgba(255,255,255,.07)!important;
    padding-bottom:18px!important;
    margin-bottom:28px!important;
}

.pkdp-section-title span{
    color:#f4f4f5!important;
    font-size:22px!important;
    font-weight:800!important;
    letter-spacing:-.02em;
}

.pkdp-section-title strong{
    color:#9ca3af!important;
    font-size:13px!important;
    font-weight:500!important;
    margin-top:4px;
}

/* ---------- H3 inside article ---------- */

.pkdp-prose h3,
.pkdp-prose h4{
    color:#f3f4f6!important;
    font-size:20px!important;
    font-weight:700!important;
    border-top:1px solid rgba(255,255,255,.06)!important;
    padding-top:22px!important;
    margin-top:34px!important;
}

/* ---------- Bullet icon ---------- */

.pkdp-prose li::before{
    color:#60a5fa!important;
    opacity:.95;
}


/* PKDP calm typography + remove glow/lines */
.pkdp-opt,
.pkdp-opt.active,
.pkdp-opt:hover{
  box-shadow:none!important;
  filter:none!important;
  text-shadow:none!important;
}

.pkdp-opt{
  font-weight:700!important;
  background:rgba(255,255,255,.055)!important;
}

.pkdp-opt.active{
  background:#3478f6!important;
  border-color:#3478f6!important;
}

.pkdp-btn.buy,
.pkdp-btn.buy:hover,
.pkdp-btn.buy::before,
.pkdp-btn.buy::after{
  box-shadow:none!important;
  filter:none!important;
}

.pkdp-tab-head button{
  font-size:12.5px!important;
  font-weight:650!important;
  color:#c7c9d1!important;
}

.pkdp-tab-head button.active{
  font-weight:750!important;
  color:#93c5fd!important;
}

.pkdp-prose{
  font-size:14.5px!important;
  line-height:1.8!important;
  font-weight:400!important;
  color:#cfd2d8!important;
}

.pkdp-prose p{
  font-size:14px!important;
  line-height:1.75!important;
  font-weight:400!important;
  color:#c7c9d1!important;
}

.pkdp-prose li,
.pkdp-account-card li,
.pkdp-order-info-card li,
.pkdp-warranty-card li{
  font-size:13.5px!important;
  line-height:1.65!important;
  font-weight:500!important;
  color:#d7d9de!important;
}

.pkdp-section-title span{
  font-size:20px!important;
  font-weight:750!important;
}

.pkdp-account-card-head{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding-bottom:10px!important;
  margin-bottom:14px!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
}

.pkdp-account-card-head::before,
.pkdp-account-card-head::after{
  display:none!important;
  content:none!important;
}

.pkdp-account-card-head h3,
.pkdp-order-step h3,
.pkdp-order-info-card h3,
.pkdp-warranty-card h3{
  border:0!important;
  padding:0!important;
  margin:0!important;
  font-size:18px!important;
  line-height:1.25!important;
  font-weight:750!important;
}

.pkdp-account-icon,
.pkdp-order-step-num,
.pkdp-warranty-icon{
  box-shadow:none!important;
  filter:none!important;
}


/* PKDP font calm final */
.pkdp{
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

.pkdp-hero-content p,
.pkdp-trust-card span,
.pkdp-summary-grid span,
.pkdp-status-list span,
.pkdp-help-pro p,
.pkdp-period{
  font-weight:400!important;
  color:#a8adb7!important;
}

.pkdp-check,
.pkdp-summary-grid strong,
.pkdp-status-list b,
.pkdp-trust-card strong,
.pkdp-label,
.pkdp-btn,
.pkdp-opt,
.pkdp-left-trust-strip span{
  font-weight:650!important;
  letter-spacing:-.01em!important;
}

.pkdp-check{
  font-size:12px!important;
  line-height:1.45!important;
  color:#e5e7eb!important;
}

.pkdp-title,
.pkdp-hero-content h2,
.pkdp-side h3{
  font-weight:800!important;
  letter-spacing:-.035em!important;
}

.pkdp-price{
  font-weight:850!important;
  letter-spacing:-.035em!important;
}

.pkdp-badge,
.pkdp-hero-brand{
  font-weight:750!important;
  letter-spacing:.01em!important;
}

.pkdp-opt.active::before{
  font-weight:700!important;
}

.pkdp-btn.buy,
.pkdp-btn.cart{
  font-weight:700!important;
}


/* =====================================================
   PKDP PHASE 3 - calm font, cart button, hero polish
   ===================================================== */

/* 1. Calmer font hierarchy */
.pkdp-trust-card strong,
.pkdp-summary-grid strong,
.pkdp-status-list b,
.pkdp-help-pro h3,
.pkdp-status-title h3{
  font-weight:650!important;
  letter-spacing:-.015em!important;
}

.pkdp-trust-card span,
.pkdp-summary-grid span,
.pkdp-status-list span,
.pkdp-help-pro p,
.pkdp-hero-content p{
  font-weight:400!important;
  line-height:1.5!important;
}

.pkdp-check{
  font-weight:550!important;
  line-height:1.45!important;
}

.pkdp-left-trust-strip span{
  font-weight:600!important;
}

.pkdp-label{
  font-weight:600!important;
}

/* 2. Better secondary cart button */
.pkdp-btn.cart{
  background:#292a30!important;
  border-color:rgba(255,255,255,.095)!important;
  color:#f4f4f5!important;
  box-shadow:none!important;
  filter:none!important;
}

.pkdp-btn.cart:hover{
  background:#34353d!important;
  border-color:rgba(255,255,255,.13)!important;
  color:#fff!important;
  box-shadow:none!important;
  filter:none!important;
}

/* 3. Left hero polish */
.pkdp-universal-hero{
  background:
    radial-gradient(circle at 82% 44%,rgba(96,165,250,.10),transparent 28%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(180deg,#1b1d22 0%,#111216 100%)!important;
  background-size:auto,28px 28px,28px 28px,auto!important;
}

.pkdp-hero-content{
  padding:26px!important;
  max-width:330px!important;
}

.pkdp-hero-content h2{
  font-weight:800!important;
  letter-spacing:-.04em!important;
}

.pkdp-hero-product{
  right:28px!important;
}

.pkdp-hero-icon{
  width:94px!important;
  height:94px!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.18)!important;
}

.pkdp-hero-pills{
  gap:8px!important;
  margin-top:16px!important;
}

.pkdp-hero-pills span{
  font-weight:600!important;
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.09)!important;
}

@media(max-width:640px){
  .pkdp-hero-icon{
    width:78px!important;
    height:78px!important;
    border-radius:20px!important;
  }

  .pkdp-hero-content{
    padding:22px!important;
  }
}

/* PKDP sidebar clean surface */
.pkdp-order-status,
.pkdp-help-pro{
  background:#18191d!important;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:none!important;
}

.pkdp-status-list div,
.pkdp-summary-grid div{
  background:#222328!important;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:none!important;
}

.pkdp-help-btn{
  box-shadow:none!important;
}

/* PKDP sidebar graphite neutral fix */
.pkdp-order-status,
.pkdp-help-pro{
  background:#17181b!important;
  border-color:rgba(255,255,255,.075)!important;
}

.pkdp-status-list div,
.pkdp-summary-grid div{
  background:#1f2024!important;
  border-color:rgba(255,255,255,.075)!important;
}


/* PKDP sidebar fix: only Estimasi + Bantuan */
.pkdp-side{
  background:var(--pk-card)!important;
  border-color:var(--pk-border)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.20)!important;
}

.pkdp-summary-grid > div{
  background:#1f2024!important;
  border-color:rgba(255,255,255,.075)!important;
}

/* hanya card Estimasi Proses & Butuh Bantuan */
.pkdp-order-status,
.pkdp-help-pro{
  background:#18191d!important;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:none!important;
}

.pkdp-status-list > div{
  background:#1f2024!important;
  border-color:rgba(255,255,255,.075)!important;
}

.pkdp-help-btn{
  background:#3b82f6!important;
  box-shadow:none!important;
}

.pkdp-help-btn:hover{
  background:#2563eb!important;
}

/* =====================================================
   PKDP PHASE 4 - sidebar tone, hero icon, breadcrumb
   ===================================================== */

/* 1. Sidebar kanan: tone lebih menyatu */
.pkdp-side{
  background:#18191d!important;
  border-color:rgba(255,255,255,.065)!important;
}

.pkdp-summary-grid > div{
  min-height:58px!important;
  background:#202126!important;
  border-color:rgba(255,255,255,.065)!important;
}

.pkdp-order-status,
.pkdp-help-pro{
  background:#18191d!important;
  border-color:rgba(255,255,255,.065)!important;
}

.pkdp-status-list > div{
  min-height:58px!important;
  background:#202126!important;
  border-color:rgba(255,255,255,.065)!important;
}

/* 2. Hero kiri: icon lebih premium/floating tanpa glow */
.pkdp-hero-product{
  right:26px!important;
}

.pkdp-hero-icon{
  background:#202126!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05)!important;
}

.pkdp-hero-icon img{
  transform:scale(.92);
}

/* 3. Breadcrumb lebih kebaca tapi tetap subtle */
.pkdp-breadcrumb,
.breadcrumb,
nav[aria-label="breadcrumb"]{
  color:#a8adb7!important;
  font-size:12.5px!important;
  font-weight:500!important;
}

.pkdp-breadcrumb a,
.breadcrumb a,
nav[aria-label="breadcrumb"] a{
  color:#9ca3af!important;
  text-decoration:none!important;
}

.pkdp-breadcrumb a:hover,
.breadcrumb a:hover,
nav[aria-label="breadcrumb"] a:hover{
  color:#f4f4f5!important;
}

.pkdp-breadcrumb span,
.breadcrumb span,
nav[aria-label="breadcrumb"] span{
  color:#d7d9de!important;
}

/* =====================================================
   PKDP FINAL REFINEMENT
   ===================================================== */

/* ---------- Design Tokens ---------- */

:root{
  --pk-card-final:#1b1c20;
  --pk-card-soft:#202126;
  --pk-border-final:rgba(255,255,255,.055);
  --pk-shadow-final:0 10px 26px rgba(0,0,0,.18);
}

/* ---------- Softer borders ---------- */

.pkdp-card,
.pkdp-info,
.pkdp-side,
.pkdp-tabs,
.pkdp-order-status,
.pkdp-help-pro,
.pkdp-account-card,
.pkdp-step-card,
.pkdp-faq-item{
    border-color:var(--pk-border-final)!important;
    box-shadow:var(--pk-shadow-final)!important;
}

/* ---------- Sidebar ---------- */

.pkdp-side{
    background:var(--pk-card-final)!important;
}

.pkdp-order-status,
.pkdp-help-pro{
    background:var(--pk-card-final)!important;
}

.pkdp-summary-grid>div,
.pkdp-status-list>div{
    background:var(--pk-card-soft)!important;
    border-color:var(--pk-border-final)!important;
}

/* ---------- Hero kiri ---------- */

.pkdp-universal-hero{
    overflow:hidden;
}

.pkdp-universal-hero::after{
    content:"";
    position:absolute;
    right:55px;
    top:50%;
    width:180px;
    height:180px;
    transform:translateY(-50%);
    border-radius:999px;
    background:radial-gradient(circle,
        rgba(255,255,255,.035) 0%,
        rgba(255,255,255,.012) 45%,
        transparent 75%);
    pointer-events:none;
}

.pkdp-hero-icon{
    background:#202126!important;
    border:1px solid rgba(255,255,255,.08)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 12px 24px rgba(0,0,0,.16)!important;
}

.pkdp-hero-icon img{
    transform:scale(.92);
}

/* ---------- Breadcrumb ---------- */

.pkdp-breadcrumb,
.breadcrumb{
    padding-top:8px!important;
    padding-bottom:12px!important;
    letter-spacing:.01em;
}

/* ---------- Sidebar spacing ---------- */

.pkdp-summary-grid small,
.pkdp-status-list small{
    margin-bottom:6px!important;
    display:block;
    color:#8b9098!important;
}

.pkdp-summary-grid strong,
.pkdp-status-list strong{
    font-weight:650!important;
}

/* ---------- Consistent radius ---------- */

.pkdp-card,
.pkdp-info,
.pkdp-side,
.pkdp-order-status,
.pkdp-help-pro,
.pkdp-account-card,
.pkdp-step-card,
.pkdp-faq-item{
    border-radius:20px!important;
}


/* PKDP: match Estimasi + Bantuan with middle feature box */
.pkdp-order-status,
.pkdp-help-pro{
  background:#232428!important;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:none!important;
}

.pkdp-status-list > div{
  background:#1f2024!important;
  border-color:rgba(255,255,255,.07)!important;
}

.pkdp-help-pro p{
  color:#a8adb7!important;
}

.pkdp-help-btn{
  background:#3b82f6!important;
  box-shadow:none!important;
}

.pkdp-help-btn:hover{
  background:#2563eb!important;
}

/* =====================================================
   PKDP - Match Ringkasan with middle panel
   ===================================================== */

.pkdp-side{
    background:#1b1c20!important;
    border-color:rgba(255,255,255,.06)!important;
    box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
}

/* biarkan kotak-kotak kecil tetap sedikit lebih terang */
.pkdp-summary-grid > div{
    background:#232428!important;
    border-color:rgba(255,255,255,.07)!important;
}


/* PKDP exact match: ringkasan panel = middle panel */
.pkdp-side{
  background:#191a1e!important;
  border-color:rgba(255,255,255,.055)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.16)!important;
}

/* isi ringkasan tetap 1 tingkat lebih terang */
.pkdp-summary-grid > div,
.pkdp-order-status,
.pkdp-help-pro{
  background:#232428!important;
  border-color:rgba(255,255,255,.065)!important;
}

/* isi kecil estimasi 1 tingkat lebih gelap dari card estimasi */
.pkdp-status-list > div{
  background:#1f2024!important;
  border-color:rgba(255,255,255,.06)!important;
}

/* FINAL: exact match middle panel + ringkasan panel */
.pkdp .pkdp-card.pkdp-info,
.pkdp .pkdp-card.pkdp-side{
  background:#18181b!important;
  border-color:rgba(255,255,255,.055)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.16)!important;
}

/* inner boxes tetap 1 tingkat lebih terang */
.pkdp .pkdp-summary-grid > div,
.pkdp .pkdp-info .pkdp-benefits{
  background:#232428!important;
  border-color:rgba(255,255,255,.065)!important;
}

/* Estimasi + Bantuan tetap selaras dengan feature box */
.pkdp .pkdp-order-status,
.pkdp .pkdp-help-pro{
  background:#232428!important;
  border-color:rgba(255,255,255,.065)!important;
  box-shadow:none!important;
}

.pkdp .pkdp-status-list > div{
  background:#1f2024!important;
  border-color:rgba(255,255,255,.06)!important;
}

/* =====================================================
   PKDP HERO GRAPHITE MATCH
   ===================================================== */

.pkdp .pkdp-universal-hero{
  background:
    radial-gradient(circle at 78% 45%,rgba(255,255,255,.025),transparent 34%),
    linear-gradient(180deg,#18181b 0%,#18181b 100%)!important;
  border-color:rgba(255,255,255,.055)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
}

.pkdp .pkdp-hero-bg{
  opacity:.28!important;
}

.pkdp .pkdp-universal-hero::after{
  opacity:.06!important;
}

.pkdp .pkdp-hero-icon{
  background:#202126!important;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 22px rgba(0,0,0,.16)!important;
}

.pkdp .pkdp-hero-icon img{
  transform:scale(.92)!important;
}


/* =====================================================
   PKDP MOBILE POLISH
   ===================================================== */

@media (max-width:768px){

  /* ---------- CTA ---------- */

  .pkdp-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .pkdp-btn,
  .pkdp-cart-btn{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    justify-content:center!important;
    padding:0 16px!important;
  }

  /* ---------- TAB ---------- */

  .pkdp-tab-nav{
    padding-left:16px!important;
    padding-right:16px!important;
    gap:18px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }

  .pkdp-tab-nav::-webkit-scrollbar{
    display:none!important;
  }

  .pkdp-tab-nav button{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

}