/* =====================================================================
   PTEKNO UI v2 - storefront
   ---------------------------------------------------------------------
   Arah desain: toko komputer yang menonjolkan angka. Bahasa visualnya
   diambil dari pricelist toko komputer dan label kemasan hardware:
   tabel harga, chip spesifikasi, huruf condensed untuk harga & judul,
   garis pemisah tipis, warna rata (tanpa gradient, glow, atau blur).

   Dimuat SETELAH tailwind.css + app.css (layouts/main.php).
   Isi:
     1. Token
     2. Dasar
     3. Header & promo bar
     4. Beranda: hero (kategori, poster, pricelist), flash sale,
        kartu produk, peringkat terlaris, banner, grid, brand, newsletter
     5. Jembatan tema (di akhir; hasil tools/bridge.py)
   Komponen tidak bergantung pada build Tailwind.
   ===================================================================== */

/* ---------- 1. TOKEN ---------- */
:root {
  /* palet inti */
  --pk-ink:    #0B2E4F;   /* navy: teks utama, blok gelap */
  --pk-ink-2:  #3E5269;   /* teks sekunder */
  --pk-ink-3:  #6A7A8C;   /* teks redup */
  --pk-ink-4:  #98A5B3;   /* teks paling redup / harga coret */
  --pk-paper:  #EEF1F4;   /* latar halaman */
  --pk-tint:   #F5F7F9;   /* latar foto produk */
  --pk-white:  #FFFFFF;
  --pk-rule:   #D6DDE4;   /* garis */
  --pk-rule-2: #E6EAEF;   /* garis halus */

  --pk-blue:   #1667C5;   /* aksi & tautan */
  --pk-blue-d: #0F55A6;
  --pk-blue-l: #E8F0FA;
  --pk-orange: #F5A623;   /* promo, flash sale, stiker */
  --pk-orange-l: #FDEFD4;
  --pk-red:    #D1342A;   /* harga turun / diskon */
  --pk-red-l:  #FBEAE8;
  --pk-green:  #1E7B47;
  --pk-green-l:#E6F4EC;

  /* alias untuk kompatibilitas berkas lain */
  --pk-navy-900: var(--pk-ink);
  --pk-navy-950: #071F36;
  --pk-blue-600: var(--pk-blue);
  --pk-blue-700: var(--pk-blue-d);
  --pk-blue-50:  var(--pk-blue-l);
  --pk-orange-500: var(--pk-orange);
  --pk-red-600: var(--pk-red);
  --pk-canvas: var(--pk-paper);
  --pk-line: var(--pk-rule);
  --pk-line-2: var(--pk-rule-2);
  --pk-link: var(--pk-blue);

  /* tipografi: satu keluarga, lebar huruf sebagai alat ekspresi */
  --pk-font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pk-cond: 78%;          /* font-stretch untuk harga & judul */
  --pk-xcond: 70%;         /* poster */

  /* skala ukuran */
  --pk-t-11: 11px;
  --pk-t-12: 12px;
  --pk-t-13: 13px;
  --pk-t-14: 14px;
  --pk-t-16: 16px;
  --pk-t-20: 20px;
  --pk-t-26: 26px;
  --pk-t-34: 34px;
  --pk-t-46: 46px;

  /* bentuk: kecil dan konsisten per tingkat */
  --pk-r-1: 3px;   /* chip, badge */
  --pk-r-2: 6px;   /* tombol, input, kartu */
  --pk-r-3: 8px;   /* panel besar */

  --pk-focus: 0 0 0 3px rgba(22, 103, 197, .35);
  --pk-shadow-pop: 0 18px 50px -12px rgba(7, 31, 54, .45);
  --pk-ease: cubic-bezier(.2, .8, .2, 1);

  --pk-z-ctrl: 5;
  --pk-z-header: 40;
  --pk-z-modal: 80;
}

/* ---------- 2. DASAR ---------- */
body {
  font-family: var(--pk-font);
  font-size: var(--pk-t-14);
  line-height: 1.5;
  color: var(--pk-ink);
  background: var(--pk-paper);
  -webkit-tap-highlight-color: rgba(22, 103, 197, .12);
}
a, button, [role="button"], input, select, textarea, label { touch-action: manipulation; }
::selection { background: #CFE0F5; color: var(--pk-ink); }
:focus-visible { outline: 2px solid var(--pk-blue); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
.pk-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pk-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--pk-r-2);
  background: var(--pk-ink); color: #fff; font-weight: 700; text-decoration: none;
}
.pk-skip:focus { top: 12px; }
#konten:focus { outline: none; }

.pk-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 1024px) { .pk-wrap { padding-inline: 24px; } }

/* angka & judul condensed */
.pk-cond { font-stretch: var(--pk-cond); }
.pk-num  { font-variant-numeric: tabular-nums; }

/* tombol */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border: 0; border-radius: var(--pk-r-2);
  font: 700 var(--pk-t-14)/1 var(--pk-font); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.pk-btn:active { transform: translateY(1px); }
.pk-btn--blue { background: var(--pk-blue); color: #fff; }
.pk-btn--blue:hover { background: var(--pk-blue-d); }
.pk-btn--orange { background: var(--pk-orange); color: var(--pk-ink); }
.pk-btn--orange:hover { background: #FFB53D; }
.pk-btn--navy { background: var(--pk-ink); color: #fff; }
.pk-btn--navy:hover { background: #12406B; }

.pk-more {
  font-size: var(--pk-t-13); font-weight: 600; color: var(--pk-blue); text-decoration: none; white-space: nowrap;
  text-underline-offset: 3px;
}
.pk-more:hover { text-decoration: underline; }

/* judul section: teks saja, tanpa subjudul pengisi */
.pk-sec { margin-top: 28px; }
@media (min-width: 768px) { .pk-sec { margin-top: 36px; } }
.pk-sec[id] { scroll-margin-top: 90px; }
.pk-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.pk-sechead h2 {
  margin: 0; font-size: var(--pk-t-20); line-height: 1.15; font-weight: 800; font-stretch: var(--pk-cond); letter-spacing: -.005em;
}
@media (min-width: 768px) { .pk-sechead h2 { font-size: var(--pk-t-26); } }

/* ---------- 3. HEADER & PROMO BAR ---------- */
.pk-topbar { background: var(--pk-ink); color: #C9D4DF; font-size: var(--pk-t-12); }
.pk-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 32px; }
.pk-topbar p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-topbar b { color: #fff; font-weight: 600; }
.pk-topbar nav { display: none; gap: 20px; flex-shrink: 0; }
@media (min-width: 640px) { .pk-topbar nav { display: flex; } }
.pk-topbar a { color: #C9D4DF; text-decoration: none; }
.pk-topbar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.pk-hdr { position: sticky; top: 0; z-index: var(--pk-z-header); background: var(--pk-white); border-bottom: 1px solid var(--pk-rule); }
.pk-hdr__in { display: flex; align-items: center; gap: 12px; height: 64px; }
@media (min-width: 768px) { .pk-hdr__in { gap: 20px; height: 72px; } }
.pk-hdr__menu, .pk-hdr__icon {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
  border: 0; border-radius: var(--pk-r-2); background: transparent; color: var(--pk-ink); cursor: pointer; text-decoration: none;
}
.pk-hdr__menu { margin-left: -8px; }
.pk-hdr__menu:hover, .pk-hdr__icon:hover { background: var(--pk-paper); }
@media (min-width: 1024px) { .pk-hdr__menu { display: none; } }
.pk-logo { display: inline-flex; align-items: baseline; gap: 1px; flex-shrink: 0; text-decoration: none; color: var(--pk-ink); }
.pk-logo__word { font-size: 28px; line-height: 1; font-weight: 800; font-stretch: var(--pk-xcond); letter-spacing: -.01em; }
.pk-logo__dot { width: 7px; height: 7px; background: var(--pk-orange); border-radius: 1px; transform: translateY(-1px); }
.pk-hdr__mid { display: none; flex: 1; min-width: 0; align-items: center; gap: 10px; align-self: stretch; }
@media (min-width: 768px) { .pk-hdr__mid { display: flex; } }
.pk-search { display: flex; flex: 1; min-width: 0; height: 44px; border: 1.5px solid var(--pk-ink); border-radius: var(--pk-r-2); overflow: hidden; background: #fff; }
.pk-search:focus-within { box-shadow: var(--pk-focus); }
.pk-search input { flex: 1; min-width: 0; border: 0; outline: none; padding: 0 14px; font: 400 var(--pk-t-14) var(--pk-font); color: var(--pk-ink); background: transparent; }
.pk-search input::placeholder { color: var(--pk-ink-3); }
.pk-search button { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border: 0; background: var(--pk-ink); color: #fff; font: 700 var(--pk-t-14) var(--pk-font); cursor: pointer; }
.pk-search button:hover { background: #12406B; }
.pk-hdr__right { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.pk-hdr__icon--sm { display: grid; }
@media (min-width: 768px) { .pk-hdr__icon--sm { display: none; } }
.pk-hdr__icon--wish { display: none; }
@media (min-width: 640px) { .pk-hdr__icon--wish { display: grid; } }
.pk-badge-count {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 9px; border: 2px solid #fff;
  background: var(--pk-red); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.pk-hdr__sep { display: none; width: 1px; height: 28px; margin: 0 10px; background: var(--pk-rule); }
.pk-hdr__auth { display: none; align-items: center; gap: 8px; }
@media (min-width: 640px) { .pk-hdr__sep, .pk-hdr__auth { display: flex; } }
.pk-hdr__auth .pk-btn { height: 38px; padding: 0 14px; font-size: var(--pk-t-13); }
.pk-btn--line { background: #fff; color: var(--pk-ink); box-shadow: inset 0 0 0 1.5px var(--pk-ink); }
.pk-btn--line:hover { background: var(--pk-paper); }
.pk-hdr__login-sm { display: grid; }
@media (min-width: 640px) { .pk-hdr__login-sm { display: none; } }

.pk-acct { position: relative; display: none; }
@media (min-width: 640px) { .pk-acct { display: block; } }
.pk-acct__btn { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 10px; border: 1px solid var(--pk-rule); border-radius: 20px; background: #fff; cursor: pointer; font: 600 var(--pk-t-13) var(--pk-font); color: var(--pk-ink-2); }
.pk-acct__btn span:first-child { max-width: 7.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pk-ink); color: #fff; font-size: 12px; font-weight: 800; object-fit: cover; }
.pk-acct__menu {
  position: absolute; right: 0; top: 100%; z-index: 50; width: 210px; padding-top: 8px;
  visibility: hidden; opacity: 0; transition: opacity .12s, visibility .12s;
}
.pk-acct:hover .pk-acct__menu, .pk-acct:focus-within .pk-acct__menu { visibility: visible; opacity: 1; }
.pk-acct__list { padding: 6px; background: #fff; border: 1px solid var(--pk-rule); border-radius: var(--pk-r-2); box-shadow: var(--pk-shadow-pop); }
.pk-acct__list a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--pk-ink-2); text-decoration: none; font-size: var(--pk-t-14); }
.pk-acct__list a:hover { background: var(--pk-paper); color: var(--pk-ink); }
.pk-acct__list hr { margin: 6px 0; border: 0; border-top: 1px solid var(--pk-rule-2); }
.pk-acct__list a.is-danger { color: var(--pk-red); }

/* ---------- 4. BERANDA ---------- */
.pk-home { padding: 16px 0 40px; }
@media (min-width: 768px) { .pk-home { padding-top: 20px; } }

/* ===== HERO: kategori | poster | pricelist ===== */
.pk-hero { display: grid; gap: 12px; grid-template-areas: "cats" "main" "list"; }
@media (min-width: 768px) and (max-width: 1099px) {
  .pk-hero { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "cats cats" "main list"; }
}
@media (min-width: 1100px) {
  .pk-hero { grid-template-columns: 220px minmax(0, 1fr) 340px; grid-template-areas: "cats main list"; gap: 16px; }
}
.pk-panel { background: var(--pk-white); border: 1px solid var(--pk-rule); border-radius: var(--pk-r-3); }
/* tanpa pricelist (belum ada produk diskon): poster melebar, tidak ada kolom kosong */
@media (min-width: 768px) and (max-width: 1099px) {
  .pk-hero--wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cats" "main"; }
}
@media (min-width: 1100px) {
  .pk-hero--wide { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "cats main"; }
}

/* kategori: daftar di desktop, chip geser di layar kecil */
.pk-cats { grid-area: cats; min-width: 0; }
.pk-cats__title { display: none; }
.pk-cats__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.pk-cats__list::-webkit-scrollbar { display: none; }
.pk-cats__link {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; white-space: nowrap;
  background: #fff; border: 1px solid var(--pk-rule); border-radius: 18px;
  color: var(--pk-ink); font-size: var(--pk-t-13); font-weight: 600; text-decoration: none;
}
.pk-cats__link svg { color: var(--pk-ink-3); flex-shrink: 0; }
.pk-cats__link:hover { border-color: var(--pk-ink); }
.pk-cats__count { display: none; }
.pk-cats__foot { display: none; }
@media (min-width: 1100px) {
  .pk-cats { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pk-rule); border-radius: var(--pk-r-3); }
  .pk-cats__title { display: block; margin: 0; padding: 14px 16px 8px; font-size: var(--pk-t-13); font-weight: 700; color: var(--pk-ink-3); }
  .pk-cats__list { display: block; overflow: visible; padding: 0 8px; }
  .pk-cats__link {
    display: flex; width: 100%; height: 40px; padding: 0 8px; gap: 10px; border: 0; border-radius: 4px;
    font-size: var(--pk-t-14); font-weight: 500;
  }
  .pk-cats__link:hover { background: var(--pk-paper); }
  .pk-cats__link:hover svg { color: var(--pk-ink); }
  .pk-cats__count { display: inline; margin-left: auto; font-size: var(--pk-t-12); color: var(--pk-ink-4); font-variant-numeric: tabular-nums; }
  .pk-cats__all { padding: 6px 16px 12px; }
  .pk-cats__foot {
    display: block; margin: auto 8px 8px; padding: 12px; border-radius: var(--pk-r-2);
    background: var(--pk-paper); color: var(--pk-ink); text-decoration: none;
  }
  .pk-cats__foot strong { display: block; font-size: var(--pk-t-14); font-weight: 700; }
  .pk-cats__foot span { display: block; margin-top: 2px; font-size: var(--pk-t-12); color: var(--pk-ink-3); line-height: 1.4; }
  .pk-cats__foot:hover { background: #E3E8EE; }
}

/* poster kampanye */
.pk-main { grid-area: main; display: grid; gap: 12px; min-width: 0; align-content: start; }
.pk-poster {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 300px; border-radius: var(--pk-r-3); background: var(--pk-ink); color: #fff;
}
@media (min-width: 768px) { .pk-poster { min-height: 340px; } }
.pk-poster__track { display: grid; height: 100%; }
.pk-slide {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px 22px 64px; opacity: 0; visibility: hidden;
  transition: opacity .45s var(--pk-ease), visibility 0s linear .45s;
}
@media (min-width: 768px) { .pk-slide { padding: 32px 36px 68px; } }
.pk-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.pk-slide__title {
  position: relative; z-index: 1; margin: 0; max-width: 13em;
  font-size: var(--pk-t-34); line-height: .98; font-weight: 800; font-stretch: var(--pk-xcond); letter-spacing: -.01em;
}
@media (min-width: 768px) { .pk-slide__title { font-size: var(--pk-t-46); } }
.pk-slide__sub { position: relative; z-index: 1; margin: 12px 0 0; max-width: 44ch; font-size: var(--pk-t-14); line-height: 1.55; color: #B8C6D4; }
@media (min-width: 768px) { .pk-slide__sub { font-size: 15px; } }
.pk-slide__cta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 20px; }
.pk-slide__link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45); }
.pk-slide__link:hover { text-decoration-color: #fff; }
/* stiker harga: bahasa visual label promo di rak toko (mengalir di atas judul) */
.pk-sticker {
  position: relative; z-index: 1; align-self: flex-start; margin: 0 0 14px 2px;
  padding: 6px 10px 7px; border-radius: var(--pk-r-1);
  background: var(--pk-orange); color: var(--pk-ink);
  font-size: var(--pk-t-14); font-weight: 800; font-stretch: var(--pk-cond); line-height: 1.1;
  transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}
.pk-sticker--blue { background: #9CC7F3; }
.pk-slide__art {
  position: absolute; z-index: 0; right: -4%; top: 10%; width: 42%; max-width: 340px; height: auto;
}
@media (min-width: 768px) { .pk-slide__title, .pk-slide__sub { max-width: 58%; } .pk-slide__title { max-width: 60%; } }
@media (max-width: 767px) { .pk-slide__art { width: 46%; right: -6%; top: 8%; opacity: .5; } }
.pk-slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pk-slide--img { padding: 0; }

.pk-poster__ctrl {
  position: absolute; z-index: 3; left: 22px; right: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 6px;
}
@media (min-width: 768px) { .pk-poster__ctrl { left: 36px; right: 24px; bottom: 20px; } }
.pk-poster__count { margin-right: auto; font-size: var(--pk-t-13); font-weight: 700; color: #B8C6D4; font-variant-numeric: tabular-nums; }
.pk-poster__count b { color: #fff; }
.pk-ctl {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--pk-r-2);
  border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: #fff; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.pk-ctl:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.pk-ctl .is-play { display: none; }
.pk-poster:not(.is-playing) [data-hero-toggle] .is-play { display: block; }
.pk-poster:not(.is-playing) [data-hero-toggle] .is-pause { display: none; }

/* dua penawaran di bawah poster */
.pk-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pk-offer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0;
  padding: 12px 14px; background: #fff; border: 1px solid var(--pk-rule); border-radius: var(--pk-r-3);
  color: var(--pk-ink); text-decoration: none;
}
.pk-offer:hover { border-color: var(--pk-ink); }
.pk-offer__txt { min-width: 0; }
.pk-offer__t { display: block; margin: 0; font-size: var(--pk-t-14); line-height: 1.3; }
.pk-offer__t span { color: var(--pk-ink-3); font-weight: 500; }
.pk-offer__t strong { font-weight: 800; font-stretch: var(--pk-cond); font-size: var(--pk-t-16); }
.pk-offer__s { display: block; margin: 2px 0 0; font-size: var(--pk-t-12); color: var(--pk-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-offer__cta { flex-shrink: 0; font-size: var(--pk-t-13); font-weight: 700; color: var(--pk-blue); }
@media (max-width: 479px) {
  .pk-offers { grid-template-columns: 1fr; gap: 8px; }
}

/* pricelist: hemat terbesar */
.pk-plist { grid-area: list; display: flex; flex-direction: column; min-width: 0; }
.pk-plist__head { padding: 14px 16px 10px; border-bottom: 1px solid var(--pk-rule); }
.pk-plist__head h2 { margin: 0; font-size: var(--pk-t-20); line-height: 1.1; font-weight: 800; font-stretch: var(--pk-cond); }
.pk-plist__head p { margin: 4px 0 0; font-size: var(--pk-t-12); color: var(--pk-ink-3); }
.pk-plist__rows { list-style: none; margin: 0; padding: 0; }
.pk-plist__row + .pk-plist__row { border-top: 1px solid var(--pk-rule-2); }
.pk-plist__a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 16px; color: var(--pk-ink); text-decoration: none;
}
.pk-plist__a:hover { background: var(--pk-tint); }
.pk-plist__a:hover .pk-plist__name { text-decoration: underline; text-underline-offset: 2px; }
.pk-plist__thumb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; background: var(--pk-tint); overflow: hidden; }
.pk-plist__thumb svg, .pk-plist__thumb img { width: 88%; height: auto; }
.pk-plist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pk-plist__name {
  font-size: var(--pk-t-13); line-height: 1.3; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pk-plist__price { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-plist__now { display: block; font-size: var(--pk-t-16); font-weight: 800; font-stretch: var(--pk-cond); line-height: 1.1; }
.pk-plist__save { display: block; margin-top: 2px; font-size: var(--pk-t-12); font-weight: 700; color: var(--pk-red); }
.pk-plist__foot {
  margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--pk-rule);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: var(--pk-t-12); color: var(--pk-ink-3);
}

/* ===== FLASH SALE: pita oranye + strip produk rapat ===== */
.pk-flash { background: #fff; border: 1px solid var(--pk-rule); border-radius: var(--pk-r-3); overflow: hidden; }
.pk-flash__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 10px 16px; background: var(--pk-orange); color: var(--pk-ink);
}
.pk-flash__title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 24px; line-height: 1; font-weight: 800; font-stretch: var(--pk-xcond); }
@media (min-width: 768px) { .pk-flash__title { font-size: 28px; } }
.pk-flash__timer { display: flex; align-items: center; gap: 8px; font-size: var(--pk-t-13); font-weight: 600; }
.pk-flash__more { margin-left: auto; color: var(--pk-ink); font-weight: 700; }
.pk-flash.is-ended .pk-flash__timer { opacity: .7; }

.pk-cd { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.pk-cd__seg {
  display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 5px; border-radius: 4px;
  background: var(--pk-ink); color: #fff; font-size: 17px; font-weight: 800; font-stretch: var(--pk-cond);
}
.pk-cd__sep { font-weight: 800; }
.pk-cd__done { font-weight: 700; }

/* strip: kartu menempel, dipisah garis tipis seperti kolom pricelist */
.pk-strip-wrap { position: relative; }
.pk-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 168px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pk-strip::-webkit-scrollbar { display: none; }
.pk-strip > * { scroll-snap-align: start; }
.pk-strip > .pk-card { border: 0; border-radius: 0; border-right: 1px solid var(--pk-rule-2); }
@media (min-width: 640px) { .pk-strip { grid-auto-columns: 192px; } }
@media (min-width: 1100px) { .pk-strip { grid-auto-columns: calc(100% / 6); } }
.pk-strip-btn {
  position: absolute; top: 34%; z-index: var(--pk-z-ctrl); display: none; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--pk-rule); background: #fff; color: var(--pk-ink);
  cursor: pointer; box-shadow: 0 2px 8px rgba(7, 31, 54, .14);
}
.pk-strip-btn:hover { border-color: var(--pk-ink); }
.pk-strip-btn[disabled] { display: none !important; }
.pk-strip-btn--prev { left: 8px; }
.pk-strip-btn--next { right: 8px; }
@media (min-width: 1100px) and (hover: hover) { .pk-strip-btn { display: grid; } }

/* ===== KARTU PRODUK ===== */
.pk-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--pk-rule); border-radius: var(--pk-r-2); overflow: hidden; }
.pk-card:hover { border-color: #9FB0C2; }
.pk-strip > .pk-card:hover { background: #FCFDFE; }
.pk-card__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--pk-tint); overflow: hidden; }
.pk-card__media .pimg { display: block; width: 100%; height: 100%; padding: 14%; object-fit: contain; }
.pk-card__media img.pimg { padding: 0; object-fit: cover; }
.pk-card__badges { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; gap: 4px; pointer-events: none; }
.pk-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--pk-r-1);
  font-size: var(--pk-t-11); font-weight: 700; line-height: 1;
}
.pk-tag--off { background: var(--pk-red); color: #fff; font-variant-numeric: tabular-nums; }
.pk-tag--new { background: var(--pk-blue); color: #fff; }
.pk-tag--best { background: var(--pk-ink); color: #fff; }
.pk-tag--promo { background: var(--pk-orange); color: var(--pk-ink); }
.pk-card .heart.pk-card__wish {
  position: absolute; top: 6px; right: 6px; z-index: 3; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
}
.pk-card .heart.pk-card__wish:hover { background: rgba(255, 255, 255, .9); }
.pk-card__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 10px 12px 12px; }
.pk-card__name { margin: 0; font-size: var(--pk-t-13); line-height: 1.35; font-weight: 500; min-height: 2.7em; }
.pk-card__name a { color: var(--pk-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-card__name a:hover { text-decoration: underline; text-underline-offset: 2px; }
.pk-specs { display: flex; flex-wrap: wrap; gap: 4px; max-height: 44px; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.pk-specs li {
  max-width: 100%; padding: 2px 6px; border-radius: var(--pk-r-1); background: var(--pk-paper);
  font-size: var(--pk-t-11); font-weight: 600; color: var(--pk-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pk-card__buy { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.pk-card__price { min-width: 0; font-variant-numeric: tabular-nums; }
.pk-card__now { display: block; font-size: 18px; line-height: 1.1; font-weight: 800; font-stretch: var(--pk-cond); white-space: nowrap; }
.pk-card--flash .pk-card__now { color: var(--pk-red); }
.pk-card__was { display: block; margin-top: 2px; font-size: var(--pk-t-12); color: var(--pk-ink-4); white-space: nowrap; }
.pk-card__was b { margin-left: 4px; color: var(--pk-red); font-weight: 700; }
.pk-card__cart {
  display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--pk-r-2);
  border: 1px solid var(--pk-rule); background: #fff; color: var(--pk-ink); cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.pk-card__cart:hover { background: var(--pk-ink); border-color: var(--pk-ink); color: #fff; }
.pk-card__cart:active { transform: scale(.94); }
.pk-card__cart[disabled] { opacity: .45; cursor: not-allowed; background: #fff; color: var(--pk-ink-3); }
.pk-card__meta { display: flex; align-items: center; gap: 8px; font-size: var(--pk-t-12); color: var(--pk-ink-3); white-space: nowrap; overflow: hidden; }
.pk-card__meta .is-rate { display: inline-flex; align-items: center; gap: 3px; color: var(--pk-ink-2); font-weight: 600; }
.pk-card__meta .is-rate svg { color: var(--pk-orange); }
.pk-card__meta .is-sold { padding-left: 8px; border-left: 1px solid var(--pk-rule); }
.pk-stock { display: grid; gap: 4px; }
.pk-stock__bar { display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; overflow: hidden; background: var(--pk-orange-l); -webkit-appearance: none; appearance: none; }
.pk-stock__bar::-webkit-progress-bar { background: var(--pk-orange-l); }
.pk-stock__bar::-webkit-progress-value { background: var(--pk-orange); }
.pk-stock__bar::-moz-progress-bar { background: var(--pk-orange); }
.pk-stock__txt { margin: 0; font-size: var(--pk-t-12); color: var(--pk-ink-3); font-variant-numeric: tabular-nums; }
.pk-stock__txt b { color: var(--pk-red); font-weight: 700; }

/* ===== TERLARIS (peringkat) + BANNER ===== */
.pk-duo { display: grid; gap: 16px; }
@media (min-width: 1100px) { .pk-duo { grid-template-columns: minmax(0, 1fr) 340px; } }
.pk-rank { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--pk-rule); border-radius: var(--pk-r-3); overflow: hidden; }
@media (min-width: 768px) {
  .pk-rank { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; }
  .pk-rank--r1 { grid-template-rows: repeat(1, auto); }
  .pk-rank--r2 { grid-template-rows: repeat(2, auto); }
  .pk-rank--r3 { grid-template-rows: repeat(3, auto); }
  .pk-rank--r4 { grid-template-rows: repeat(4, auto); }
  .pk-rank--r5 { grid-template-rows: repeat(5, auto); }
  .pk-rank > li { border-right: 1px solid var(--pk-rule-2); }
}
.pk-rank.pk-rank--one { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
.pk-rank--one > li { border-right: 0; }
.pk-rank > li { border-bottom: 1px solid var(--pk-rule-2); }
.pk-rank__a {
  display: grid; grid-template-columns: 30px 56px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 16px 10px 12px; color: var(--pk-ink); text-decoration: none; height: 100%;
}
.pk-rank__a:hover { background: var(--pk-tint); }
.pk-rank__a:hover .pk-rank__name { text-decoration: underline; text-underline-offset: 2px; }
.pk-rank__no { font-size: 26px; line-height: 1; font-weight: 800; font-stretch: var(--pk-xcond); color: var(--pk-ink-4); text-align: center; font-variant-numeric: tabular-nums; }
.pk-rank > li:nth-child(-n + 3) .pk-rank__no { color: var(--pk-ink); }
.pk-rank__thumb { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 4px; background: var(--pk-tint); overflow: hidden; }
.pk-rank__thumb svg { width: 90%; height: auto; }
.pk-rank__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pk-rank__name { margin: 0; font-size: var(--pk-t-13); line-height: 1.3; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-rank__sold { display: block; margin: 3px 0 0; font-size: var(--pk-t-12); color: var(--pk-ink-3); font-variant-numeric: tabular-nums; }
.pk-rank__price { text-align: right; font-size: var(--pk-t-16); font-weight: 800; font-stretch: var(--pk-cond); white-space: nowrap; font-variant-numeric: tabular-nums; }

.pk-banners { display: grid; gap: 12px; align-content: start; }
@media (min-width: 640px) and (max-width: 1099px) { .pk-banners { grid-template-columns: 1fr 1fr; } }
/* banner sejajar dengan daftar peringkat, bukan dengan judul section */
@media (min-width: 1100px) {
  .pk-duo--rank { grid-template-rows: auto auto; row-gap: 0; }
  .pk-duo--rank > section { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; min-width: 0; }
  .pk-duo--rank > .pk-banners { grid-column: 2; grid-row: 2; }
  .pk-duo > .pk-banners:only-child { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
.pk-banner {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start;
  min-height: 168px; padding: 18px 20px; border-radius: var(--pk-r-3); text-decoration: none; color: #fff; background: var(--pk-blue);
}
.pk-banner--dark { background: var(--pk-ink); }
.pk-banner__t { position: relative; z-index: 1; margin: 0; max-width: 62%; font-size: 24px; line-height: 1.02; font-weight: 800; font-stretch: var(--pk-xcond); }
.pk-banner__s { position: relative; z-index: 1; margin: 8px 0 0; max-width: 60%; font-size: var(--pk-t-13); color: rgba(255, 255, 255, .78); }
.pk-banner__k { position: relative; z-index: 1; margin: 0 0 6px; font-size: var(--pk-t-12); font-weight: 600; color: rgba(255, 255, 255, .7); }
.pk-banner__cta { position: relative; z-index: 1; margin-top: auto; padding-top: 14px; font-size: var(--pk-t-13); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .5); }
.pk-banner:hover .pk-banner__cta { text-decoration-color: #fff; }
.pk-banner__art { position: absolute; z-index: 0; right: -18px; bottom: -14px; width: 46%; max-width: 190px; height: auto; }

/* ===== GRID PRODUK ===== */
.pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 900px) { .pk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pk-grid { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); } }

/* ===== BRAND + NEWSLETTER ===== */
.pk-closing { display: grid; gap: 16px; }
@media (min-width: 1000px) { .pk-closing { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; } }
.pk-brands { padding: 16px 18px; }
.pk-brands h2 { margin: 0 0 10px; font-size: var(--pk-t-16); font-weight: 700; }
.pk-brands ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pk-brands li { font-size: 20px; font-weight: 800; font-stretch: var(--pk-xcond); color: var(--pk-ink-4); }
.pk-brands a { color: inherit; text-decoration: none; }
.pk-brands a:hover { color: var(--pk-ink); }
.pk-news { padding: 16px 18px; }
.pk-news h2 { margin: 0; font-size: var(--pk-t-16); font-weight: 700; }
.pk-news p.pk-news__sub { margin: 4px 0 12px; font-size: var(--pk-t-13); color: var(--pk-ink-3); }
.pk-news label { display: block; margin-bottom: 6px; font-size: var(--pk-t-12); font-weight: 600; color: var(--pk-ink-2); }
.pk-news__row { display: flex; gap: 8px; }
.pk-news input {
  flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--pk-rule); border-radius: var(--pk-r-2);
  font: 400 var(--pk-t-14) var(--pk-font); color: var(--pk-ink); background: #fff; outline: none;
}
.pk-news input:focus { border-color: var(--pk-blue); box-shadow: var(--pk-focus); }
.pk-news__msg { margin: 8px 0 0; min-height: 1.2em; font-size: var(--pk-t-12); color: var(--pk-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .pk-slide { transition: none; }
}

/* =====================================================================
   5. JEMBATAN TEMA
   Memetakan utilitas warna kustom Tailwind lama (ink, volt, flash, sale,
   stock, canvas) ke palet v2 agar halaman lain (PDP, katalog, checkout,
   footer, mega menu) ikut seragam tanpa rebuild Tailwind.
   Dihasilkan oleh tools/bridge.py. Boleh dihapus setelah
   tailwind.config.js memakai palet ini dan CSS di-rebuild.
   ===================================================================== */
body, .font-sans, .font-display { font-family: var(--pk-font); }
.font-display { font-stretch: var(--pk-cond); }
.volt-grad { background-color: var(--pk-blue); background-image: none; }
.volt-text { background: none; color: var(--pk-blue); -webkit-text-fill-color: currentColor; }
.shadow-glow { box-shadow: none; }
.shadow-card { box-shadow: none; border: 1px solid var(--pk-rule); }
.shadow-lift { box-shadow: var(--pk-shadow-pop); }
.circuit { background: var(--pk-ink); }
.font-mono { font-family: var(--pk-font); font-variant-numeric: tabular-nums; }

[stroke="#4F46E5"], [stroke="#6366F1"] { stroke: var(--pk-blue); }
[fill="#4F46E5"], [fill="#6366F1"] { fill: var(--pk-blue); }
[stroke="#06B6D4"], [stroke="#22D3EE"] { stroke: var(--pk-blue); }
[stroke="#F59E0B"] { stroke: var(--pk-orange); }
[stroke="#16A34A"] { stroke: var(--pk-green); }

/* utilitas warna (hasil generator) */
.bg-canvas{background-color:#EEF1F4}
.bg-canvas\/60{background-color:rgba(238,241,244,0.6)}
.bg-flash\/10{background-color:rgba(245,166,35,0.1)}
.bg-ink{background-color:#0B2E4F}
.bg-ink\/50{background-color:rgba(11,46,79,0.5)}
.bg-ink\/60{background-color:rgba(11,46,79,0.6)}
.bg-ink\/80{background-color:rgba(11,46,79,0.8)}
.bg-sale{background-color:#D1342A}
.bg-sale\/10{background-color:rgba(209,52,42,0.1)}
.bg-sale\/70{background-color:rgba(209,52,42,0.7)}
.bg-stock{background-color:#1E7B47}
.bg-stock\/10{background-color:rgba(30,123,71,0.1)}
.bg-volt{background-color:#1667C5}
.bg-volt\/10{background-color:rgba(22,103,197,0.1)}
.bg-volt\/20{background-color:rgba(22,103,197,0.2)}
.bg-volt\/5{background-color:rgba(22,103,197,0.05)}
.bg-volt2\/10{background-color:rgba(79,143,214,0.1)}
.border-volt{border-color:#1667C5}
.focus\:ring-volt:focus{--tw-ring-color:#1667C5}
.focus\:ring-volt\/40:focus{--tw-ring-color:rgba(22,103,197,0.4)}
.hover\:bg-canvas:hover{background-color:#EEF1F4}
.hover\:bg-volt:hover{background-color:#1667C5}
.hover\:bg-volt\/5:hover{background-color:rgba(22,103,197,0.05)}
.hover\:border-volt:hover{border-color:#1667C5}
.hover\:text-ink:hover{color:#0B2E4F}
.hover\:text-sale:hover{color:#D1342A}
.hover\:text-volt:hover{color:#1667C5}
.ring-sale{--tw-ring-color:#D1342A}
.ring-stock\/30{--tw-ring-color:rgba(30,123,71,0.3)}
.ring-volt{--tw-ring-color:#1667C5}
.ring-volt\/30{--tw-ring-color:rgba(22,103,197,0.3)}
.text-flash{color:#F5A623}
.text-ink{color:#0B2E4F}
.text-sale{color:#D1342A}
.text-stock{color:#1E7B47}
.text-volt{color:#1667C5}
.text-volt2{color:#4F8FD6}


/* tombol Kategori (partial mega_kategori) diselaraskan dengan kolom cari */
.pk-hdr [data-mega-btn] { height: 44px; margin-right: 0; padding: 0 14px; border-radius: var(--pk-r-2); font-weight: 700; }
/* panel mega tidak boleh melewati tepi kanan layar (penyebab scroll samping di 1000-1180px) */
.pk-hdr [data-mega-panel] > div { max-width: min(940px, calc(100vw - 230px)); }
@media (max-width: 767px) { .pk-hdr [data-mega-panel] > div { max-width: calc(100vw - 2.5rem); } }
.pk-logo--inv { color: #fff; }

/* layar kecil: ringkas daftar panjang, sembunyikan ilustrasi poster */
@media (max-width: 767px) {
  .pk-slide__art { display: none; }
  .pk-plist__row:nth-child(n + 5) { display: none; }
  .pk-rank > li:nth-child(n + 6) { display: none; }
}