#produk{background:linear-gradient(180deg,#f4f8ff,#fff 48%,#f7f5ff);overflow:hidden}
#produk .portfolio-heading{align-items:center;margin-bottom:48px}
.portfolio-heading .portfolio-intro{max-width:560px;color:var(--muted);margin:18px 0 0}
#produk .product{position:relative;gap:54px;padding:48px;border:1px solid #d9e5f4;border-radius:32px;background:#fff;box-shadow:0 22px 60px #183e7010;align-items:center}
#produk .product>div,#produk .product>aside{min-width:0}
#produk .product h2{font-size:clamp(2rem,3.5vw,3.2rem);max-width:530px}
#produk .product-mark{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:#eaf3ff;color:#135bc8}
.product-mark:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
#produk .flow{display:grid;gap:10px;margin:24px 0}
#produk .flow div{border:0;background:#f5f8fd;border-radius:12px;padding:12px 14px;font-size:.9rem}
.product-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.product-actions .secondary{font-size:.9rem;padding:13px 18px;border-radius:12px}
#produk .product-panel{position:relative;padding:28px;background:linear-gradient(145deg,#0b2850,#124d85);border-radius:24px;box-shadow:none}
#produk .product-panel h3{font-size:1.5rem;margin:12px 0 22px;max-width:none}
.product-preview{display:flex;justify-content:center;gap:16px;align-items:start;height:270px;overflow:hidden;padding:20px 20px 0;background:linear-gradient(140deg,#d5ebff,#edf4ff);border:1px solid #ffffff30;border-radius:16px;margin-bottom:22px}
.product-preview img{width:43%;max-width:155px;display:block;border:4px solid #092440;border-radius:16px;box-shadow:0 12px 22px #0b2d4c30}
.product-preview img:last-child{margin-top:30px}
#produk .product-panel .preview-caption{font-size:.75rem;color:#cae0f9;margin:0 0 18px;line-height:1.5}
#produk .metrics{gap:10px}
#produk .metrics div{padding:14px;background:#ffffff0c;border:1px solid #ffffff18;border-radius:12px}
#produk .metrics b{font-size:1rem}
#produk .metrics span{font-size:.8rem}
#produk .varikasir-product{margin-top:28px;border-color:#e4def3;padding-top:48px}
#produk .varikasir-product .product-mark{background:#f0eaff;color:#7045bc}
#produk .varikasir-product .product-panel{background:linear-gradient(145deg,#302450,#624797)}
.variant-preview{padding:20px;background:#faf8ff;border-radius:16px;margin-bottom:22px;color:#252039}
.variant-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;font-weight:800;font-size:.9rem;margin-bottom:18px}
.variant-heading span{font-size:.7rem;font-weight:600;color:#755b9b;background:#eee6fa;border-radius:6px;padding:4px 7px}
.variant-row{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid #e7e0ef;font-size:.85rem}
.variant-row i{width:14px;height:14px;background:var(--swatch);border-radius:50%;border:1px solid #0001}
.variant-row b{font-size:.75rem;color:#755b9b;background:#eee8f6;padding:3px 7px;border-radius:6px}
.variant-foot{display:flex;justify-content:space-between;gap:10px;padding-top:16px;font-size:.75rem;color:#736780}
@media(max-width:1100px){#produk .product{gap:30px;padding:30px}.product-preview{height:230px}}
@media(max-width:880px){#produk .product{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:28px}#produk .product h2{font-size:2rem}.product-preview{height:200px;padding:16px 10px 0;gap:10px}#produk .product-panel{padding:20px}#produk .metrics{grid-template-columns:1fr}#produk .varikasir-product{padding-top:28px}}
@media(max-width:640px){#produk .product{grid-template-columns:1fr;padding:22px;border-radius:24px;gap:28px}#produk .portfolio-heading{margin-bottom:30px}#produk .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.product-preview{height:260px}#produk .varikasir-product{padding-top:22px}.product-actions a{flex:1;white-space:nowrap}.product-actions .primary,.product-actions .secondary{font-size:.8rem;padding:13px 12px}}

/* Keep complete screenshots visible at every viewport size. */
#produk .product-preview{height:auto;overflow:visible;padding-bottom:20px}
#produk .product-preview img{height:auto;min-width:0;flex-shrink:1}
@media(max-width:880px){
  #produk .product{grid-template-columns:minmax(0,1fr);gap:28px}
  #produk .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  #produk .product-preview{padding:20px;gap:20px}
}
@media(max-width:640px){#produk .product-preview{padding:16px 10px;gap:10px}}