/* ==========================================================================
   Portfolio — halaman showcase PC build (/portfolio)
   Sebagian besar memakai ulang komponen jp-pkg-card & jp-builder-comp-*
   dari pc-builder.css; di sini hanya tata letak yang khas portfolio.
   ========================================================================== */

/* ── Hero ── */
.jp-pf-hero {
  display              : grid;
  grid-template-columns: 1.4fr 1fr;
  gap                  : var(--jp-space-8);
  align-items          : center;
}

.jp-pf-hero-media {
  border-radius : var(--jp-radius-xl);
  overflow      : hidden;
  border        : var(--jp-border-width) solid var(--jp-border-color);
  background    : var(--jp-bg-surface);
  aspect-ratio  : 4 / 3;
}

.jp-pf-hero-media img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
}

/* Tanpa gambar, grid dua kolom menyisakan separuh halaman kosong. */
.jp-pf-hero-solo {
  display  : block;
  max-width: 68ch;
}

.jp-pf-hero-desc {
  font-size  : var(--jp-text-md);
  line-height: var(--jp-lh-relaxed);
  color      : var(--jp-gray-700);
  max-width  : 68ch;
  margin     : 0;
  text-wrap  : pretty;
}

.jp-pf-story {
  max-width  : 68ch;
  margin     : 0;
  font-size  : var(--jp-text-base);
  line-height: var(--jp-lh-relaxed);
  color      : var(--jp-gray-600);
  text-wrap  : pretty;
}

/* ── Grid build ── */
.jp-pf-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap                  : var(--jp-space-5);
}

.jp-pf-card {
  display       : flex;
  flex-direction: column;
  margin-bottom : 0;
  transition    : box-shadow var(--jp-transition-fast), transform var(--jp-transition-fast);
}

.jp-pf-card:hover {
  box-shadow: var(--jp-shadow-lg);
  transform : translateY(-2px);
}

.jp-pf-card-media {
  position     : relative;
  aspect-ratio : 4 / 3;
  background   : var(--jp-bg-surface);
  border-bottom: var(--jp-border-width) solid var(--jp-border-color);
}

.jp-pf-card-media img {
  width     : 100%;
  height    : 100%;
  object-fit: contain;
  display   : block;
  padding   : var(--jp-space-4);
}

.jp-pf-card-badge {
  position: absolute;
  top     : var(--jp-space-3);
  left    : var(--jp-space-3);
}

.jp-pf-card-type {
  font-size     : var(--jp-text-xs);
  color         : var(--jp-gray-500);
  margin-top    : 4px;
  text-transform: capitalize;
}

.jp-pf-card-specs {
  padding: var(--jp-space-4) var(--jp-space-5) 0;
  margin : 0;
  flex   : 1;
}

/* Label pendek + nama boleh dua baris — versi lama memotong nama produk di "…". */
.jp-pf-spec-row {
  display              : grid;
  grid-template-columns: 4.5rem 1fr;
  gap                  : var(--jp-space-3);
  padding              : var(--jp-space-2) 0;
  align-items          : baseline;
}

.jp-pf-spec-row + .jp-pf-spec-row {
  border-top: var(--jp-border-width) solid var(--jp-border-color);
}

.jp-pf-spec-slot {
  font-size     : var(--jp-text-xs);
  font-weight   : var(--jp-fw-semibold);
  color         : var(--jp-gray-400);
  text-transform: uppercase;
  letter-spacing: var(--jp-ls-wider);
}

.jp-pf-spec-name {
  margin       : 0;
  font-size    : var(--jp-text-sm);
  color        : var(--jp-gray-900);
  line-height  : var(--jp-lh-snug, 1.35);
  display      : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow     : hidden;
}

/* Harga: label di atas, angka utuh — versi lama membungkus angka di kartu sempit. */
.jp-pf-card-price {
  padding   : var(--jp-space-4) var(--jp-space-5) 0;
  border-top: var(--jp-border-width) solid var(--jp-border-color);
  margin-top: var(--jp-space-4);
}

.jp-pf-card-price-label {
  display       : block;
  font-size     : var(--jp-text-xs);
  font-weight   : var(--jp-fw-semibold);
  color         : var(--jp-gray-400);
  text-transform: uppercase;
  letter-spacing: var(--jp-ls-wider);
}

.jp-pf-card-price-value {
  display    : block;
  font-size  : var(--jp-text-2xl);
  font-weight: var(--jp-fw-extrabold);
  color      : var(--jp-price-sale);
  line-height: var(--jp-lh-tight);
  white-space: nowrap;
}

.jp-pf-card-foot {
  padding: var(--jp-space-5);
}

/* ── Feature blocks ── */
.jp-pf-features {
  display       : flex;
  flex-direction: column;
  gap           : var(--jp-space-10);
}

.jp-pf-feature {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : var(--jp-space-8);
  align-items          : center;
}

.jp-pf-feature-rev .jp-pf-feature-media { order: 2; }

/* Blok tanpa gambar: satu kolom teks dengan panjang baris terbaca. */
.jp-pf-feature-solo {
  display  : block;
  max-width: 62ch;
}

/* Kalau SEMUA blok tanpa gambar, susun berdampingan alih-alih menumpuk
   di kolom kiri dan menyisakan separuh halaman kosong. */
.jp-pf-features-text {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap                  : var(--jp-space-8);
  align-items          : start;
}

.jp-pf-features-text .jp-pf-feature-solo { max-width: none; }

.jp-pf-feature-media {
  border-radius: var(--jp-radius-xl);
  overflow     : hidden;
  border       : var(--jp-border-width) solid var(--jp-border-color);
  aspect-ratio : 4 / 3;
}

.jp-pf-feature-media img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
}

.jp-pf-feature-title {
  font-size    : var(--jp-text-xl);
  font-weight  : var(--jp-fw-bold);
  color        : var(--jp-gray-900);
  margin-bottom: var(--jp-space-3);
}

.jp-pf-feature-desc {
  font-size  : var(--jp-text-sm);
  line-height: var(--jp-lh-relaxed);
  color      : var(--jp-gray-600);
  margin     : 0;
}

/* ── Galeri ── */
.jp-pf-gallery {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap                  : var(--jp-space-3);
}

.jp-pf-gallery img {
  width        : 100%;
  aspect-ratio : 1;
  object-fit   : cover;
  display      : block;
  border-radius: var(--jp-radius-lg);
  border       : var(--jp-border-width) solid var(--jp-border-color);
}

/* ── Spesifikasi ── */
.jp-pf-specs {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap                  : var(--jp-space-3);
}

.jp-pf-spec {
  display       : flex;
  flex-direction: column;
  gap           : 2px;
  padding       : var(--jp-space-4);
  border        : var(--jp-border-width) solid var(--jp-border-color);
  border-radius : var(--jp-radius-lg);
  background    : var(--jp-white);
}

.jp-pf-spec-label {
  font-size     : var(--jp-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--jp-ls-wider);
  color         : var(--jp-gray-400);
}

.jp-pf-spec-value {
  font-size  : var(--jp-text-sm);
  font-weight: var(--jp-fw-semibold);
  color      : var(--jp-gray-900);
}

/* ── CTA ── */
.jp-pf-cta {
  text-align   : center;
  padding      : var(--jp-space-10) var(--jp-space-6);
  border       : var(--jp-border-width) solid var(--jp-border-color);
  border-radius: var(--jp-radius-xl);
  background   : var(--jp-bg-surface);
}

.jp-pf-cta-title {
  font-size    : var(--jp-text-xl);
  font-weight  : var(--jp-fw-extrabold);
  color        : var(--jp-gray-900);
  margin-bottom: var(--jp-space-2);
}

.jp-pf-cta-desc {
  font-size    : var(--jp-text-sm);
  color        : var(--jp-gray-500);
  margin-bottom: var(--jp-space-5);
}

/* ── Responsif ── */
@media (max-width: 991px) {
  .jp-pf-hero,
  .jp-pf-feature {
    grid-template-columns: 1fr;
  }
  .jp-pf-feature-rev .jp-pf-feature-media { order: 0; }
}

/* ==========================================================================
   Portfolio → halaman kustomisasi build (/portfolio/{id})
   ========================================================================== */

.jp-pfb-layout {
  display              : grid;
  grid-template-columns: 1fr 340px;
  gap                  : var(--jp-space-6);
  align-items          : start;
}

/* ── Toolbar ── */
.jp-pfb-toolbar {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : var(--jp-space-4);
  flex-wrap      : wrap;
  margin-bottom  : var(--jp-space-4);
}

.jp-pfb-compat {
  display    : inline-flex;
  align-items: center;
  gap        : var(--jp-space-2);
  font-size  : var(--jp-text-sm);
  color      : var(--jp-gray-600);
  cursor     : pointer;
}

/* ── Slot (accordion) ── */
.jp-pfb-slot {
  border       : var(--jp-border-width) solid var(--jp-border-color);
  border-radius: var(--jp-radius-lg);
  background   : var(--jp-white);
  margin-bottom: var(--jp-space-3);
  overflow     : hidden;
}

.jp-pfb-slot.is-open { border-color: var(--jp-primary); }

.jp-pfb-slot-head {
  display    : flex;
  align-items: center;
  gap        : var(--jp-space-4);
  width      : 100%;
  padding    : var(--jp-space-4);
  background : none;
  border     : 0;
  text-align : left;
  cursor     : pointer;
}

.jp-pfb-slot-head:hover { background: var(--jp-bg-surface); }

.jp-pfb-slot-img {
  width        : 52px;
  height       : 52px;
  object-fit   : contain;
  flex-shrink  : 0;
  border       : var(--jp-border-width) solid var(--jp-border-color);
  border-radius: var(--jp-radius-md);
  background   : var(--jp-white);
  padding      : 4px;
}

.jp-pfb-slot-info { flex: 1; min-width: 0; }

.jp-pfb-slot-label {
  display       : flex;
  align-items   : center;
  gap           : var(--jp-space-2);
  font-size     : var(--jp-text-xs);
  font-weight   : var(--jp-fw-semibold);
  color         : var(--jp-gray-400);
  text-transform: uppercase;
  letter-spacing: var(--jp-ls-wider);
}

.jp-pfb-slot-changed {
  padding        : 1px 6px;
  border-radius  : var(--jp-radius-sm);
  background     : var(--jp-success-subtle);
  color          : var(--jp-success-dark);
  text-transform : none;
  letter-spacing : 0;
}

.jp-pfb-slot-name {
  font-size    : var(--jp-text-sm);
  font-weight  : var(--jp-fw-semibold);
  color        : var(--jp-gray-900);
  margin-top   : 2px;
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}

.jp-pfb-slot-brand {
  color      : var(--jp-gray-400);
  font-weight: var(--jp-fw-medium);
}

.jp-pfb-slot-right {
  display    : flex;
  align-items: flex-end;
  flex-direction: column;
  gap        : 4px;
  flex-shrink: 0;
}

.jp-pfb-slot-price {
  font-size  : var(--jp-text-sm);
  font-weight: var(--jp-fw-bold);
  color      : var(--jp-gray-900);
  white-space: nowrap;
}

/* Stepper jumlah — hanya slot multi (RAM/Storage) */
.jp-pfb-qty {
  display      : inline-flex;
  align-items  : center;
  gap          : 2px;
  border       : 1.5px solid var(--jp-border-color);
  border-radius: 6px;
  background   : var(--jp-white);
  overflow     : hidden;
}

.jp-pfb-qty button {
  width      : 22px;
  height     : 22px;
  border     : none;
  background : none;
  color      : var(--jp-gray-700);
  font-size  : var(--jp-text-sm);
  font-weight: var(--jp-fw-bold);
  cursor     : pointer;
  line-height: 1;
}

.jp-pfb-qty button:hover:not(:disabled) {
  background: var(--jp-primary-subtle);
  color     : var(--jp-primary);
}

.jp-pfb-qty button:disabled { opacity: 0.35; cursor: not-allowed; }

.jp-pfb-qty > span {
  min-width  : 16px;
  text-align : center;
  font-size  : var(--jp-text-xs);
  font-weight: var(--jp-fw-bold);
}

.jp-pfb-line-remove {
  display      : inline-flex;
  align-items  : center;
  justify-content: center;
  width        : 20px;
  height       : 20px;
  border-radius: 5px;
  color        : var(--jp-gray-400);
  font-size    : 12px;
  cursor       : pointer;
}

.jp-pfb-line-remove:hover { background: #fee2e2; color: #dc2626; }

/* Tambah komponen di slot multi */
.jp-pfb-add {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  margin       : 0 0 10px;
  padding      : 7px 14px;
  border       : 1.5px dashed var(--jp-primary);
  border-radius: 8px;
  background   : var(--jp-white);
  color        : var(--jp-primary);
  font-size    : var(--jp-text-xs);
  font-weight  : var(--jp-fw-bold);
  cursor       : pointer;
  transition   : background var(--jp-transition-fast), border-style var(--jp-transition-fast);
}

.jp-pfb-add:hover {
  background  : var(--jp-primary-subtle);
  border-style: solid;
}

.jp-pfb-slot-toggle {
  display    : inline-flex;
  align-items: center;
  gap        : 5px;
  font-size  : var(--jp-text-xs);
  font-weight: var(--jp-fw-semibold);
  color      : var(--jp-primary);
}

/* ── Daftar opsi ── */
.jp-pfb-options {
  border-top: var(--jp-border-width) solid var(--jp-border-color);
  padding   : 0 var(--jp-space-3) var(--jp-space-3);
  /* Katalog per slot puluhan sampai ratusan baris — panel pendek hanya
     memperlihatkan ~5 di antaranya. */
  max-height: min(70vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--jp-bg-surface);
}

/* Pencarian & jumlah harus tetap terjangkau saat daftar panjang di-scroll. */
.jp-pfb-options-head {
  position     : sticky;
  top          : 0;
  z-index      : 1;
  background   : var(--jp-bg-surface);
  padding      : var(--jp-space-3) 0;
  margin-bottom: var(--jp-space-1);
}

.jp-pfb-count {
  font-size: var(--jp-text-xs);
  color    : var(--jp-gray-500);
  margin   : 0;
}

.jp-pfb-hint {
  display      : flex;
  align-items  : center;
  gap          : var(--jp-space-2);
  font-size    : var(--jp-text-xs);
  color        : var(--jp-gray-600);
  margin       : 0 0 var(--jp-space-3);
  padding      : var(--jp-space-2) var(--jp-space-3);
  background   : var(--jp-white);
  border       : var(--jp-border-width) solid var(--jp-border-color);
  border-radius: var(--jp-radius-md);
}

.jp-pfb-option {
  display      : flex;
  align-items  : center;
  gap          : var(--jp-space-3);
  width        : 100%;
  padding      : var(--jp-space-3);
  margin-bottom: var(--jp-space-2);
  border       : var(--jp-border-width) solid var(--jp-border-color);
  border-radius: var(--jp-radius-md);
  background   : var(--jp-white);
  text-align   : left;
  cursor       : pointer;
  transition   : border-color var(--jp-transition-fast), box-shadow var(--jp-transition-fast);
}

.jp-pfb-option:hover { border-color: var(--jp-primary); }

.jp-pfb-option.is-active {
  border-color: var(--jp-primary);
  box-shadow  : 0 0 0 1px var(--jp-primary) inset;
}

.jp-pfb-option img {
  width        : 40px;
  height       : 40px;
  object-fit   : contain;
  flex-shrink  : 0;
  border-radius: var(--jp-radius-sm);
}

.jp-pfb-option-body { flex: 1; min-width: 0; display: block; }

.jp-pfb-option-name {
  display    : block;
  font-size  : var(--jp-text-sm);
  font-weight: var(--jp-fw-medium);
  color      : var(--jp-gray-900);
  line-height: var(--jp-lh-tight);
}

.jp-pfb-option-variant {
  display  : block;
  font-size: var(--jp-text-xs);
  color    : var(--jp-gray-400);
  margin-top: 2px;
}

.jp-pfb-option-delta {
  font-size  : var(--jp-text-sm);
  font-weight: var(--jp-fw-bold);
  color      : var(--jp-gray-500);
  white-space: nowrap;
  flex-shrink: 0;
}

.jp-pfb-option-delta.is-plus  { color: var(--jp-price-sale); }
.jp-pfb-option-delta.is-minus { color: var(--jp-success-dark); }

.jp-pfb-empty {
  padding   : var(--jp-space-5);
  text-align: center;
  font-size : var(--jp-text-sm);
  color     : var(--jp-gray-400);
  margin    : 0;
}

/* ── Ringkasan ── */
.jp-pfb-summary-inner {
  position     : sticky;
  top          : var(--jp-space-6);
  border       : var(--jp-border-width) solid var(--jp-border-color);
  border-radius: var(--jp-radius-xl);
  background   : var(--jp-white);
  padding      : var(--jp-space-5);
}

.jp-pfb-summary-title {
  font-size     : var(--jp-text-base);
  font-weight   : var(--jp-fw-extrabold);
  color         : var(--jp-gray-900);
  text-transform: uppercase;
  letter-spacing: var(--jp-ls-wide);
  margin-bottom : var(--jp-space-4);
}

.jp-pfb-summary-rows {
  display       : flex;
  flex-direction: column;
  gap           : var(--jp-space-2);
}

.jp-pfb-summary-row {
  display        : flex;
  justify-content: space-between;
  gap            : var(--jp-space-3);
  font-size      : var(--jp-text-xs);
}

.jp-pfb-summary-slot  { color: var(--jp-gray-500); }
.jp-pfb-summary-price { color: var(--jp-gray-900); font-weight: var(--jp-fw-semibold); white-space: nowrap; }

/* Total: label di atas angka. Berdampingan membuat angka 9 digit
   membungkus jadi dua baris di sidebar 340px. */
.jp-pfb-summary-inner .jp-builder-total-row {
  display       : block;
  text-align    : left;
  margin-bottom : var(--jp-space-4);
}

.jp-pfb-summary-inner .jp-builder-total-label {
  display  : block;
  font-size: var(--jp-text-xs);
}

.jp-pfb-summary-inner .jp-builder-total-price {
  display    : block;
  font-size  : var(--jp-text-2xl);
  line-height: var(--jp-lh-tight);
  white-space: nowrap;
}

.jp-pfb-summary-note {
  font-size : var(--jp-text-xs);
  color     : var(--jp-gray-500);
  margin    : 0 0 var(--jp-space-4);
}

.jp-pfb-summary-foot {
  font-size : var(--jp-text-xs);
  color     : var(--jp-gray-400);
  margin    : var(--jp-space-3) 0 0;
  line-height: var(--jp-lh-relaxed);
}

@media (max-width: 991px) {
  .jp-pfb-layout { grid-template-columns: 1fr; }
  .jp-pfb-summary-inner { position: static; }
}

.jp-pfb-search {
  width        : 100%;
  padding      : var(--jp-space-3);
  margin-bottom: var(--jp-space-2);
  border       : var(--jp-border-width) solid var(--jp-border-color);
  border-radius: var(--jp-radius-md);
  background   : var(--jp-white);
  font-size    : var(--jp-text-sm);
  color        : var(--jp-gray-900);
}

.jp-pfb-search:focus {
  outline     : none;
  border-color: var(--jp-primary);
}