/* =====================================================================
   PTEKNO - halaman Promo & Diskon (/promo)
   Markup: app/Views/catalog/_promo_head.php
   Banner kampanye besar (warna mengikuti jenis kampanye) + strip produk
   menempel di bawahnya, tiket kupon, filter diskon. Token: ptekno-ui.css.
   ===================================================================== */

/* ---------- warna per jenis kampanye ---------- */
.cb { --cb-bg: var(--pk-ink, #0B2E4F); --cb-fg: #fff; --cb-soft: rgba(255, 255, 255, .78); --cb-accent: var(--pk-orange, #F5A623); --cb-deal-bg: #fff; --cb-deal-fg: var(--pk-ink, #0B2E4F); margin-bottom: 14px; }
.cb--flash  { --cb-bg: var(--pk-orange, #F5A623); --cb-fg: var(--pk-ink, #0B2E4F); --cb-soft: rgba(11, 46, 79, .78); --cb-accent: var(--pk-ink, #0B2E4F); --cb-deal-bg: var(--pk-ink, #0B2E4F); --cb-deal-fg: #fff; }
.cb--diskon { --cb-bg: var(--pk-red, #D1342A); --cb-deal-fg: var(--pk-red, #D1342A); --cb-accent: #FFD27A; }
.cb--event  { --cb-bg: var(--pk-blue, #1667C5); --cb-deal-fg: var(--pk-blue, #1667C5); }
.cb--voucher, .cb--promo { --cb-bg: var(--pk-ink, #0B2E4F); }

/* ---------- banner ---------- */
.cb-banner {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 8px; min-height: 300px;
  padding: 26px 22px 24px; border-radius: 10px 10px 0 0;
  background: var(--cb-bg); color: var(--cb-fg);
}
@media (min-width: 900px) {
  .cb-banner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; min-height: 340px; padding: 34px 44px; }
}
/* pita diagonal besar: satu bidang warna, bukan gradient */
.cb-banner::before {
  content: ""; position: absolute; z-index: -1; right: -12%; top: -40%; width: 62%; height: 180%;
  background: rgba(255, 255, 255, .08); transform: rotate(14deg);
}
.cb--flash .cb-banner::before { background: rgba(255, 255, 255, .22); }

.cb-copy { position: relative; z-index: 1; min-width: 0; }
.cb-kicker { margin: 0; font-size: 14px; font-weight: 700; color: var(--cb-soft); }
.cb-title { margin: 6px 0 0; max-width: 16em; font-size: 34px; line-height: 1; font-weight: 800; font-stretch: 70%; letter-spacing: -.005em; }
@media (min-width: 768px) { .cb-title { font-size: 46px; } }

/* label diskon: blok kontras berisi angka raksasa */
.cb-deal {
  display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 8px 18px 6px 16px;
  border-radius: 8px; background: var(--cb-deal-bg); color: var(--cb-deal-fg);
  transform: rotate(-2deg); transform-origin: left center; box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}
.cb-deal__lead { font-size: 20px; line-height: 1; font-weight: 800; font-stretch: 72%; }
.cb-deal__num { font-size: 76px; line-height: .9; font-weight: 900; font-stretch: 62%; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .cb-deal__num { font-size: 104px; } .cb-deal__lead { font-size: 26px; } }

.cb-period { margin: 16px 0 0; font-size: 20px; font-weight: 800; font-stretch: 75%; }
.cb-period--cd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; font-stretch: 100%; }
.cb-period--cd .pk-cd__seg { min-width: 38px; height: 34px; font-size: 20px; background: var(--cb-fg); color: var(--cb-bg); }
.cb-period--cd .pk-cd__sep { color: var(--cb-fg); }
.cb-sub { margin: 10px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--cb-soft); }
.cb-cta {
  display: inline-flex; align-items: center; height: 44px; margin-top: 18px; padding: 0 20px; border-radius: 6px;
  background: var(--cb-fg); color: var(--cb-bg); font-size: 15px; font-weight: 700; text-decoration: none;
}
.cb-cta:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.cb--flash .cb-cta:hover { box-shadow: 0 0 0 3px rgba(11, 46, 79, .25); }

/* sisi kanan: foto kampanye atau kolase 3 produk berkipas */
.cb-visual { position: relative; z-index: 1; display: block; height: 190px; margin-top: 8px; }
@media (min-width: 900px) { .cb-visual { height: 280px; margin-top: 0; } }
.cb-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .28)); }
.cb-fan {
  position: absolute; top: 50%; left: 50%; width: 176px; padding: 10px 10px 12px;
  background: #fff; border-radius: 10px; color: var(--pk-ink, #0B2E4F);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45);
}
.cb-fan--1 { transform: translate(-128%, -46%) rotate(-9deg); }
.cb-fan--2 { transform: translate(-50%, -58%) rotate(2deg); z-index: 2; width: 196px; }
.cb-fan--3 { transform: translate(28%, -40%) rotate(10deg); }
.cb-fan__img { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 6px; background: var(--pk-tint, #F5F7F9); overflow: hidden; }
.cb-fan__img svg { width: 84%; height: auto; }
.cb-fan__img img { width: 100%; height: 100%; object-fit: cover; }
.cb-fan__price { display: block; margin-top: 8px; font-size: 18px; font-weight: 800; font-stretch: 75%; color: var(--pk-red, #D1342A); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .cb-fan { width: 116px; padding: 7px 7px 9px; }
  .cb-fan--2 { width: 130px; }
  .cb-fan__price { margin-top: 5px; font-size: 14px; }
}
.cb-fan__off {
  position: absolute; top: -10px; right: -10px; padding: 5px 8px; border-radius: 4px;
  background: var(--pk-red, #D1342A); color: #fff; font-size: 15px; font-weight: 900; font-stretch: 70%; transform: rotate(6deg);
}

/* ---------- strip produk menempel di bawah banner ---------- */
.cb-strip-wrap {
  position: relative; background: #fff; border: 1px solid var(--pk-rule, #D6DDE4); border-top: 0;
  border-radius: 0 0 10px 10px; padding: 14px 0;
}
.cb-strip {
  list-style: none; margin: 0; padding: 0 14px; scroll-padding-inline: 14px; display: grid; grid-auto-flow: column; grid-auto-columns: 148px; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.cb-strip::-webkit-scrollbar { display: none; }
.cb-strip > li { scroll-snap-align: start; }
@media (min-width: 640px) { .cb-strip { grid-auto-columns: 172px; } }
@media (min-width: 1100px) { .cb-strip { grid-auto-columns: calc((100% - 5 * 12px) / 6); } }
.cb-tile { display: flex; flex-direction: column; gap: 4px; color: var(--pk-ink, #0B2E4F); text-decoration: none; }
.cb-tile__img { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 6px; background: var(--pk-tint, #F5F7F9); overflow: hidden; }
.cb-tile__img svg { width: 78%; height: auto; }
.cb-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.cb-tile__off { position: absolute; top: 0; right: 0; padding: 4px 7px; border-radius: 0 0 0 6px; background: var(--pk-red-l, #FBEAE8); color: var(--pk-red, #D1342A); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cb-tile__flag { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 3px; background: var(--pk-orange, #F5A623); color: var(--pk-ink, #0B2E4F); font-size: 11px; font-weight: 700; }
.cb-tile__name { margin-top: 4px; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.cb-tile:hover .cb-tile__name { text-decoration: underline; text-underline-offset: 2px; }
.cb-tile__price { font-size: 16px; font-weight: 800; font-stretch: 78%; color: var(--pk-red, #D1342A); font-variant-numeric: tabular-nums; }
.cb-tile__was { font-size: 12px; color: var(--pk-ink-4, #98A5B3); }
.cb-strip-wrap .pk-strip-btn { top: 32%; }

/* ---------- tiket kupon / banner CMS ---------- */
.pp-deals { display: grid; gap: 10px; margin-bottom: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pp-deals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pp-deals { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.pp-ticket {
  position: relative; display: flex; align-items: stretch; min-height: 84px; overflow: hidden;
  background: #fff; border: 1px solid var(--pk-rule, #D6DDE4); border-radius: 6px;
  color: var(--pk-ink, #0B2E4F); text-decoration: none;
}
.pp-ticket:hover { border-color: var(--pk-ink, #0B2E4F); }
.pp-ticket__stub {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  flex-shrink: 0; min-width: 96px; padding: 10px 16px 10px 14px; color: #fff; background: var(--pk-ink, #0B2E4F);
  border-right: 2px dashed rgba(255, 255, 255, .55);
}
.pp-ticket__stub::before, .pp-ticket__stub::after {
  content: ""; position: absolute; right: -8px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--pk-paper, #EEF1F4); border: 1px solid var(--pk-rule, #D6DDE4);
}
.pp-ticket__stub::before { top: -8px; }
.pp-ticket__stub::after { bottom: -8px; }
.pp-ticket--diskon .pp-ticket__stub { background: var(--pk-red, #D1342A); }
.pp-ticket--event .pp-ticket__stub { background: var(--pk-blue, #1667C5); }
.pp-ticket__type { font-size: 12px; font-weight: 600; opacity: .85; }
.pp-ticket__badge { font-size: 24px; line-height: 1; font-weight: 900; font-stretch: 66%; white-space: nowrap; }
.pp-ticket--voucher .pp-ticket__badge { color: var(--pk-orange, #F5A623); }
.pp-ticket__body { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: 10px 14px 10px 16px; }
.pp-ticket__title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.pp-ticket__sub { font-size: 12.5px; color: var(--pk-ink-3, #6A7A8C); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-ticket__code { font-size: 13px; color: var(--pk-ink-2, #3E5269); }
.pp-ticket__code b { padding: 1px 6px; border: 1px dashed #9FB0C2; border-radius: 3px; color: var(--pk-ink, #0B2E4F); letter-spacing: .04em; }
.pp-ticket--banner { background: var(--pk-blue, #1667C5); border-color: var(--pk-blue, #1667C5); color: #fff; }
.pp-ticket--banner-dark { background: var(--pk-ink, #0B2E4F); border-color: var(--pk-ink, #0B2E4F); color: #fff; }
.pp-ticket--banner .pp-ticket__sub, .pp-ticket--banner-dark .pp-ticket__sub { color: rgba(255, 255, 255, .75); }
.pp-ticket__art { flex-shrink: 0; align-self: flex-end; width: 96px; height: auto; margin: 0 6px -10px auto; }

/* ---------- judul daftar + filter ---------- */
.pp-listhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 24px 0 12px; }
.pp-listhead h2 { margin: 0; font-size: 24px; line-height: 1.1; font-weight: 800; font-stretch: 76%; color: var(--pk-ink, #0B2E4F); }
.pp-tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-tier {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px;
  border: 1px solid var(--pk-rule, #D6DDE4); background: #fff; color: var(--pk-ink, #0B2E4F);
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.pp-tier span { font-size: 12px; font-weight: 500; color: var(--pk-ink-3, #6A7A8C); font-variant-numeric: tabular-nums; }
.pp-tier:hover { border-color: var(--pk-ink, #0B2E4F); }
.pp-tier.is-on { background: var(--pk-ink, #0B2E4F); border-color: var(--pk-ink, #0B2E4F); color: #fff; }
.pp-tier.is-on span { color: #B7C5D3; }