/* =========================================================
   IIPE 2027 - Halaman Partnership
   Dimuat setelah bottom.css (kartu logo .pship-logo-card, badge, judul pixel).
   Hero dibuat dari CSS + aset yang sudah ada (box.png, coin.png).
   ========================================================= */

/* ---------------- HERO ---------------- */
.pp-hero {
  --t: min(7vw, 100px);
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(40px, 6vw, 96px) 6vw calc(var(--t) + clamp(36px, 5vw, 72px));
  background:
    linear-gradient(90deg, #7A62E8 50%, transparent 50%) left bottom / calc(var(--t) * 2) var(--t) repeat-x,
    #6741D2;
}
.pp-hero .badge { margin-bottom: 18px; }
.pp-hero .px-title { --oc: #3B2290; --pv: .35vw; --pmax: 5px; max-width: 12em; margin: 0 auto; }
.pp-sub {
  max-width: 520px; margin: 22px auto 0;
  font: 400 clamp(16px, 1.5vw, 20px)/1.5 'Funnel Display', system-ui, sans-serif; color: #FFFFDA;
}
/* box + koin berdiri di atas baris kotak */
.pp-prop { position: absolute; bottom: calc(var(--t) - 2px); width: clamp(64px, 10vw, 150px); pointer-events: none; }
.pp-prop.l { left: 6%; }
.pp-prop.r { right: 6%; }
.pp-prop img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.pp-prop .coin {
  position: absolute; left: 50%; top: 0; width: 48%;
  transform: translate(-50%, -58%); animation: bBob 2.4s steps(4) infinite;
}
.pp-prop.r .coin { animation-delay: -1.2s; }

/* ---------------- FILTER ---------------- */
.pp-filter {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  padding: clamp(18px, 2.4vw, 32px) 5vw;
  background: #FFFFDA;
  border-bottom: 4px solid #4B28A1;
}
.pp-tab {                                   /* tab = tombol pixel (versi krem), aktif = hijau */
  --bd: #3B2290; --bg: #FFFFDA; --bgd: #C9C0F5; --tx: #5B3CC4;
  font-size: clamp(18px, 1.8vw, 24px);
  padding: .5em 1.1em .7em;
  border: 0; cursor: pointer; white-space: nowrap;
}
.pp-tab::after { content: none; }
.pp-tab.active { --bd: #C2F08A; --bg: #44C27B; --bgd: #009880; --tx: #FFFFDA; }

/* atribut hidden harus menang atas display:flex */
.pp-filter[hidden] { display: none; }

/* ---------------- ISI ---------------- */
.pp-main {
  --tile: min(5.6vw, 105px);
  min-height: 50vh;
  padding: clamp(32px, 5vw, 80px) 5vw clamp(48px, 7vw, 110px);
  background: conic-gradient(#FFF3AE 25%, #FFFFDA 0 50%, #FFF3AE 0 75%, #FFFFDA 0)
              0 0 / calc(var(--tile) * 2) calc(var(--tile) * 2);
}
.pp-inner { max-width: 1100px; margin: 0 auto; }

.tier-block { margin: 0 0 clamp(32px, 4.4vw, 60px); scroll-margin-top: 120px; }
.tier-block[hidden] { display: none; }
.tier-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tier-head .pship-cat-title { font-size: clamp(22px, 2.4vw, 32px); }
.tier-count {
  padding: .1em .6em .2em;
  background: #FFFFDA; color: #4B28A1; border: 3px solid #4B28A1;
  font: 400 clamp(18px, 1.8vw, 24px)/1 var(--px-font); letter-spacing: .05em;
}
.tier-block[data-tier="Sponsorship"]           .pship-cat-title { --c: #FF7D61; --cd: #E6563B; }
.tier-block[data-tier="International Partner"] .pship-cat-title { --c: #6741D2; --cd: #4B28A1; }
.tier-block[data-tier="Official Partner"]      .pship-cat-title { --c: #44C27B; --cd: #009880; }
.tier-block[data-tier="Media Partner"]         .pship-cat-title { --c: #2FA8D6; --cd: #1B7FA3; }
.tier-block[data-tier="Support"]               .pship-cat-title { --c: #FF8FB8; --cd: #D85C8D; }
.tier-block[data-tier="Komunitas"]             .pship-cat-title { --c: #FF4150; --cd: #AF2432; }
.tier-block[data-tier="Exhibitor"]             .pship-cat-title { --c: #8D83FF; --cd: #4B28A1; }
.tier-block[data-tier="F&B"]                   .pship-cat-title { --c: #E8A91F; --cd: #B27A0B; }

.pp-state { padding: 40px 16px; text-align: center; font: 400 clamp(22px, 2.4vw, 30px)/1.3 var(--px-font); letter-spacing: .05em; color: #5B3CC4; }

@media (prefers-reduced-motion: reduce) { .pp-prop .coin { animation: none; } }

/* ---------------- MOBILE ---------------- */
@media (max-width: 720px) {
  .pp-hero { --t: 12vw; }
  .pp-hero { padding-bottom: calc(var(--t) + 24vw + 16px); }   /* box 20vw + koin menonjol di atasnya, di bawah teks */
  .pp-prop { width: 20vw; }
  .pp-prop.l { left: 3%; }
  .pp-prop.r { right: 3%; }

  .pp-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 20px; }
  .pp-filter::-webkit-scrollbar { display: none; }

  .pp-main { --tile: 12vw; }
  .tier-block { scroll-margin-top: 110px; }
}