/* =========================================================
   IIPE 2027 - Partnership, CTA (Exhibitor), Latest News, Footer
   Semua dari CSS + font Jersey 10 (tanpa aset baru).
   Dimuat setelah css lain.
   ========================================================= */

:root {
  --px-font: 'IIPE Pixel', ui-monospace, monospace;
  /* segitiga pixel menghadap kanan (4x7 kotak) */
  --tri: polygon(0 0, 25% 0, 25% 14.29%, 50% 14.29%, 50% 28.57%, 75% 28.57%, 75% 42.86%,
                 100% 42.86%, 100% 57.14%, 75% 57.14%, 75% 71.43%, 50% 71.43%, 50% 85.71%,
                 25% 85.71%, 25% 100%, 0 100%);
}

/* ---------- judul pixel tebal: teks + outline kotak (tanpa bayangan) ----------
   1 "kotak" huruf = 75/1400 em, jadi ukuran dibuat kelipatan bulat (--p = 1 kotak, px bulat)
   supaya piksel huruf dan outline tajam dan rata. */
.px-title {
  --pv: .4vw; --pmax: 5px;                       /* kecepatan tumbuh & batas atas */
  --p: clamp(2px, var(--pv), var(--pmax));
  --oc: #4B28A1;
  --ow: var(--p);                                /* tebal outline = 1 kotak */
  margin: 0;
  font-family: var(--px-font); font-weight: 400;
  font-size: calc(var(--p) * 18.6667);
  line-height: 1; letter-spacing: var(--p);
  text-transform: uppercase; text-align: center;
  color: #FFFFDA;
  text-shadow:
    calc(var(--ow) * -1) calc(var(--ow) * -1) 0 var(--oc), var(--ow) calc(var(--ow) * -1) 0 var(--oc),
    calc(var(--ow) * -1) var(--ow) 0 var(--oc),            var(--ow) var(--ow) 0 var(--oc),
    0 calc(var(--ow) * -1) 0 var(--oc), 0 var(--ow) 0 var(--oc),
    calc(var(--ow) * -1) 0 0 var(--oc), var(--ow) 0 0 var(--oc);
}
@supports (width: round(down, 2.5px, 1px)) {
  .px-title { --p: round(down, clamp(2px, var(--pv), var(--pmax)), 1px); }
}

/* ---------- badge kecil (seperti "WELCOME TO") ---------- */
.badge {
  display: inline-block; margin: 0;
  padding: .15em .8em .22em;
  background: #009880; color: #FFFFDA;
  border: 3px solid #C2F08A; box-shadow: 0 3px 0 #00735F;
  font: 400 clamp(18px, 1.8vw, 24px)/1 var(--px-font);
  letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- tombol pixel ---------- */
.px-btn {
  --bd: #C2F08A; --bg: #44C27B; --bgd: #009880; --tx: #FFFFDA;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .55em 1.3em .8em;
  background: var(--bd); color: var(--tx);
  font: 400 clamp(24px, 2.4vw, 34px)/1 var(--px-font);
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px),
                     calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px),
                     0 calc(100% - 6px), 0 6px, 6px 6px);
  transition: transform .12s steps(2);
  -webkit-tap-highlight-color: transparent;
}
.px-btn::before {
  content: ""; position: absolute; inset: 4px; z-index: -1;
  background: linear-gradient(var(--bg) 0 calc(100% - .22em), var(--bgd) 0);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px),
                     calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px),
                     0 calc(100% - 4px), 0 4px, 4px 4px);
}
.px-btn::after {
  content: ""; width: .38em; aspect-ratio: 4 / 7; margin-left: .15em;
  background: currentColor; clip-path: var(--tri);
}
.px-btn:hover  { transform: translateY(-3px); }
.px-btn:active { transform: translateY(2px); }
.px-btn:hover::after { animation: bBlink .6s steps(1) infinite; }
.px-btn:focus-visible { background: #FFFFDA; }
.px-btn.alt { --bd: #3B2290; --bg: #FFFFDA; --bgd: #C9C0F5; --tx: #5B3CC4; }
.px-btn.sm  { font-size: clamp(20px, 2vw, 26px); }

@keyframes bBlink { 50% { opacity: 0; } }

/* ---------- link kontak + tombol copy (B2B, Exhibitor Inquiry) ---------- */
.contact-link { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact-link:hover { text-decoration-style: dotted; }
.contact-link:focus-visible { outline: 3px dashed currentColor; outline-offset: 4px; }
.px-btn.copy-btn { font-size: clamp(16px, 1.5vw, 20px); padding: .4em .9em .6em; border: 0; cursor: pointer; white-space: nowrap; }
.px-btn.copy-btn::after { content: none; }
.px-btn.copy-btn.is-copied { --bd: #C2F08A; --bg: #44C27B; --bgd: #009880; --tx: #FFFFDA; }
@keyframes bPulse { 50% { opacity: .45; } }
@keyframes bBob   { 50% { transform: translateY(-8px); } }

/* =================== 1. PARTNERSHIP =================== */
.ps {
  --tile: min(5.6vw, 105px);
  padding: clamp(40px, 6vw, 100px) 5vw;
  background: conic-gradient(#FFF3AE 25%, #FFFFDA 0 50%, #FFF3AE 0 75%, #FFFFDA 0)
              0 0 / calc(var(--tile) * 2) calc(var(--tile) * 2);
}
.ps-head { text-align: center; margin-bottom: clamp(28px, 4vw, 56px); }
.ps-head .badge { margin-bottom: 16px; }
.ps-sub { max-width: 460px; margin: 18px auto 0; font: 400 clamp(15px, 1.4vw, 18px)/1.5 'Funnel Display', system-ui, sans-serif; color: #5B3CC4; }

.ps-cats { max-width: 1100px; margin: 0 auto; }
.pship-category { margin: 0 0 clamp(26px, 3.4vw, 44px); }
.pship-cat-header { margin-bottom: 14px; }
.pship-cat-title {
  --c: #44C27B; --cd: #009880;
  display: inline-block; margin: 0;
  padding: .12em .7em .18em;
  font: 400 clamp(20px, 2vw, 28px)/1 var(--px-font);
  letter-spacing: .06em; text-transform: uppercase;
  color: #FFFFDA; background: var(--c);
  border: 3px solid var(--cd); border-bottom-width: 6px;
}
/* warna tiap tingkat, seperti "peringkat" */
#pship-sponsor-wrap   .pship-cat-title { --c: #FF7D61; --cd: #E6563B; }
#pship-intl-wrap      .pship-cat-title { --c: #6741D2; --cd: #4B28A1; }
#pship-official-wrap  .pship-cat-title { --c: #44C27B; --cd: #009880; }
#pship-media-wrap     .pship-cat-title { --c: #2FA8D6; --cd: #1B7FA3; }
#pship-support-wrap   .pship-cat-title { --c: #FF8FB8; --cd: #D85C8D; }
#pship-community-wrap .pship-cat-title { --c: #FF4150; --cd: #AF2432; }
#pship-exhibitor-wrap .pship-cat-title { --c: #8D83FF; --cd: #4B28A1; }
#pship-fnb-wrap       .pship-cat-title { --c: #E8A91F; --cd: #B27A0B; }

.pship-logo-track { display: flex; flex-wrap: wrap; gap: 14px; }
.pship-logo-card {
  --o: #4B28A1; --od: #3B2290; --f: #fff;        /* outline, garis bawah, isi */
  position: relative; isolation: isolate;
  box-sizing: border-box; flex: 0 0 auto;
  width: clamp(130px, 14vw, 180px); min-height: clamp(80px, 7.4vw, 104px);
  display: flex; align-items: center; justify-content: center;
  padding: 14px 18px 18px;
  background: linear-gradient(var(--o) 0 calc(100% - 6px), var(--od) 0);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px),
                     calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px),
                     0 calc(100% - 6px), 0 6px, 6px 6px);
  text-decoration: none;
  transition: transform .12s steps(2);
}
.pship-logo-card::before {                       /* isi putih */
  content: ""; position: absolute; inset: 4px 4px 10px; z-index: -1;
  background: var(--f);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px),
                     calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px),
                     0 calc(100% - 4px), 0 4px, 4px 4px);
}
a.pship-logo-card:hover { transform: translateY(-4px); }
a.pship-logo-card:focus-visible { --f: #FFF3AE; }
.pship-logo-card img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.pship-logo-no-img { font: 400 clamp(18px, 1.5vw, 22px)/1.1 var(--px-font); color: #8A82B0; text-align: center; }
.pship-logo-card.has-label { flex-direction: column; gap: 6px; padding: 10px 14px; }
.pship-logo-card.has-label img { max-height: 42px; }
.pship-logo-label {
  max-width: 100%; padding: 3px 8px 4px; overflow: hidden;
  background: #5B3CC4; color: #FFFFDA;
  font: 400 14px/1 var(--px-font); letter-spacing: .05em;
  white-space: nowrap; text-overflow: ellipsis;
}
.pship-soon { margin: 0; font: 400 22px/1 var(--px-font); letter-spacing: .05em; color: #8A82B0; }

/* kartu "+N more": box berpaw */
.pship-more-card {
  --o: #C2F08A; --od: #8CE38B; --f: #5B3CC4;
  flex-direction: row; gap: 10px; color: #FFFFDA;
}
.pship-more-box { width: 38px; image-rendering: pixelated; }
.pship-more-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; font: 400 20px/1 var(--px-font); letter-spacing: .06em; text-transform: uppercase; }
.pship-more-count { font-size: 32px; }
.pship-more-card::after { content: ""; width: 10px; aspect-ratio: 4 / 7; background: #C2F08A; clip-path: var(--tri); }
.pship-more-card:hover::after { animation: bBlink .6s steps(1) infinite; }

.pship-skeleton-card {
  box-sizing: border-box;
  width: clamp(130px, 14vw, 180px); height: clamp(80px, 7.4vw, 104px);
  background: rgba(255, 255, 255, .7); border: 4px solid rgba(75, 40, 161, .3);
  animation: bPulse 1s steps(2) infinite;
}

/* marquee (kalau ada kategori layout: 'marquee') */
.pship-logo-track.pship-marquee-viewport {
  display: block; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.pship-marquee-inner { display: flex; gap: 14px; width: max-content; animation: pshipMarquee linear infinite; }
.pship-marquee-inner.reverse { animation-direction: reverse; }
.pship-logo-track.pship-marquee-viewport:hover .pship-marquee-inner { animation-play-state: paused; }
@keyframes pshipMarquee { to { transform: translateX(-50%); } }

/* =================== 2. CTA EXHIBITOR =================== */
.cta {
  --t: min(7vw, 100px);
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(48px, 7vw, 110px) 6vw calc(var(--t) + clamp(28px, 4vw, 56px));
  background:
    linear-gradient(90deg, #7A62E8 50%, transparent 50%) left bottom / calc(var(--t) * 2) var(--t) repeat-x,
    #6741D2;
}
.cta .px-title { --oc: #3B2290; --pv: .3vw; --pmax: 4px; max-width: 14em; margin: 0 auto; }
.cta-sub {
  max-width: 560px; margin: 22px auto 0;
  font: 400 clamp(16px, 1.5vw, 20px)/1.5 'Funnel Display', system-ui, sans-serif; color: #FFFFDA;
}
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: clamp(24px, 3vw, 40px); }
.cta-coin { position: absolute; width: clamp(30px, 5vw, 72px); height: auto; image-rendering: pixelated; animation: bBob 2.4s steps(4) infinite; }
.cta-coin.l { left: 8%;  top: 18%; }
.cta-coin.r { right: 9%; top: 38%; animation-delay: -1.2s; }

/* =================== 2b. CTA B2B ===================
   Beda dari CTA Exhibitor: hijau (bukan ungu), teks rata kiri, box + koin di kanan
   (bukan koin melayang di pinggir), tombol krem. */
.cta-b2b {
  --t: min(5vw, 72px);
  position: relative; overflow: hidden;
  padding: clamp(48px, 6vw, 96px) 6vw calc(var(--t) + clamp(28px, 4vw, 56px));
  background:
    linear-gradient(90deg, #5ACE8C 50%, transparent 50%) left bottom / calc(var(--t) * 2) var(--t) repeat-x,
    #44C27B;
}
.cta-b2b-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: clamp(24px, 5vw, 72px);
}
.cta-b2b .badge { background: #FFFFDA; color: #00735F; border-color: #00735F; box-shadow: 0 3px 0 #00735F; }
.cta-b2b .px-title { --oc: #00735F; --pv: .3vw; --pmax: 4px; max-width: 12em; margin: 18px 0 0; text-align: left; }
.cta-b2b .cta-sub { margin-left: 0; color: #FFFFDA; }
.cta-b2b .cta-buttons { justify-content: flex-start; }

.cta-b2b-prop { position: relative; justify-self: center; width: clamp(150px, 24vw, 300px); margin-top: 10%; }
.cta-b2b-prop .box  { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.cta-b2b-prop .coin {
  position: absolute; left: 26%; bottom: 100%; margin-bottom: -6%; width: 48%; height: auto;
  image-rendering: pixelated; animation: bBob 2.4s steps(4) infinite;
}

/* =================== 3. LATEST NEWS =================== */
.np { background: #FFFFDA; padding: clamp(48px, 6vw, 100px) 5vw; }
.np-inner { max-width: 1200px; margin: 0 auto; }
.np-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(24px, 3vw, 44px); }
.np-header .badge { margin-bottom: 12px; }
.np-header .px-title { text-align: left; --pv: .3vw; --pmax: 4px; }

.np-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.np-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: #2A1670; text-decoration: none;
  border: 4px solid #4B28A1; border-radius: 16px; box-shadow: 0 6px 0 #3B2290;
  transition: transform .12s steps(2);
}
.np-card:hover { transform: translateY(-4px); }
.np-card:focus-visible { outline: 3px solid #5B3CC4; outline-offset: 4px; }
.np-card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #DCFFFF; }
.np-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.np-card-img-ph { width: 100%; height: 100%; background: conic-gradient(#C6FFFF 25%, #DCFFFF 0 50%, #C6FFFF 0 75%, #DCFFFF 0) 0 0 / 40px 40px; }
.np-new {
  position: absolute; top: 10px; left: 10px;
  padding: 2px 8px 4px; background: #FF424E; color: #FFFFDA; border: 2px solid #AF2432;
  font: 400 18px/1 var(--px-font); letter-spacing: .06em;
  animation: bBlink 1.2s steps(1) infinite;
}
.np-card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px 18px 20px; }
.np-card-date { align-self: flex-start; padding: 2px 8px 4px; background: #5B3CC4; color: #FFFFDA; font: 400 17px/1 var(--px-font); letter-spacing: .05em; }
.np-card-title { font: 600 clamp(17px, 1.5vw, 20px)/1.3 'Funnel Display', system-ui, sans-serif; color: #2A1670; }
.np-card-excerpt {
  margin: 0; font: 400 15px/1.5 'Funnel Display', system-ui, sans-serif; color: #4A4570;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.np-card-link { display: inline-flex; align-items: center; gap: .4em; margin-top: auto; padding-top: 6px; font: 400 22px/1 var(--px-font); letter-spacing: .06em; text-transform: uppercase; color: #5B3CC4; }
.np-card-link::after { content: ""; width: 9px; aspect-ratio: 4 / 7; background: currentColor; clip-path: var(--tri); }
.np-card:hover .np-card-link::after { animation: bBlink .6s steps(1) infinite; }

.np-skeleton { aspect-ratio: 4 / 5; background: #fff; border: 4px solid #E2DCFF; border-radius: 16px; animation: bPulse 1s steps(2) infinite; }
.np-empty { grid-column: 1 / -1; padding: 32px 16px; text-align: center; font: 400 26px/1.2 var(--px-font); letter-spacing: .05em; color: #5B3CC4; border: 4px dashed #B9A8F5; border-radius: 16px; }

/* =================== 4. FOOTER =================== */
.site-footer {
  position: relative;
  padding: calc(14px + clamp(28px, 4vw, 56px)) 6vw clamp(22px, 3vw, 36px);
  background: #3B2290; color: #FFFFDA;
  font-family: 'Funnel Display', system-ui, sans-serif;
}
.site-footer::before {                      /* "tanah": strip hijau seperti platform */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: repeating-linear-gradient(90deg, #8CE38B 0 40px, #C2F08A 40px 80px);
}
.ft-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.ft-brand h2 { margin: 0 0 10px; font: 400 clamp(40px, 4vw, 58px)/1 var(--px-font); letter-spacing: .04em; }
.ft-brand p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; opacity: .88; }
.ft-h { margin: 0 0 12px; font: 400 24px/1 var(--px-font); letter-spacing: .08em; text-transform: uppercase; color: #C2F08A; }
.ft-nav { display: flex; flex-direction: column; gap: 8px; }
.ft-nav a, .ft-links a {
  align-self: flex-start; color: #FFFFDA; text-decoration: none;
  font: 400 22px/1 var(--px-font); letter-spacing: .06em; text-transform: uppercase;
}
.ft-nav a:hover, .ft-links a:hover { color: #C2F08A; }
.ft-nav a:hover::before, .ft-links a:hover::before {
  content: ""; display: inline-block; width: 7px; aspect-ratio: 4 / 7; margin-right: .4em;
  background: #C2F08A; clip-path: var(--tri); vertical-align: .05em;
}
.ft-links { display: flex; flex-direction: column; gap: 10px; }
.ft-bottom {
  max-width: 1200px; margin: clamp(24px, 3vw, 40px) auto 0; padding-top: 18px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 4px dashed rgba(255, 255, 255, .18);
  font-size: 14px; opacity: .92;
}
.ft-bottom p { margin: 0; }
.to-top {
  display: grid; place-items: center; width: 48px; aspect-ratio: 1;
  border: 3px solid #C2F08A; background: #5B3CC4; box-shadow: 0 4px 0 #241257;
  text-decoration: none; transition: transform .12s steps(2);
}
.to-top::before { content: ""; width: 38%; aspect-ratio: 4 / 7; background: #FFFFDA; clip-path: var(--tri); transform: rotate(-90deg); }
.to-top:hover { transform: translateY(-3px); }
.to-top:hover::before { animation: bBlink .6s steps(1) infinite; }
.to-top:focus-visible { outline: 3px solid #FFFFDA; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cta-coin, .cta-b2b-prop .coin, .np-new, .pship-skeleton-card, .np-skeleton, .pship-marquee-inner { animation: none !important; }
  .px-btn:hover::after, .pship-more-card:hover::after, .np-card:hover .np-card-link::after, .to-top:hover::before { animation: none; }
}

/* ========================= MOBILE ========================= */
@media (max-width: 720px) {
  .ps { --tile: 12vw; }
  .pship-logo-card, .pship-skeleton-card { width: calc(50% - 7px); min-height: 72px; }
  .pship-skeleton-card { height: 72px; }
  .pship-marquee-inner .pship-logo-card { width: 150px; }

  .cta { --t: 12vw; }
  .cta-coin.l { left: 5%; top: 8%; }
  .cta-coin.r { right: 5%; top: 6%; }

  .cta-b2b { --t: 10vw; }
  .cta-b2b-inner { grid-template-columns: 1fr; text-align: center; }
  .cta-b2b .px-title { text-align: center; margin-left: auto; margin-right: auto; }
  .cta-b2b .cta-sub { margin-left: auto; }
  .cta-b2b .cta-buttons { justify-content: center; }
  .cta-b2b-prop { order: -1; width: 38vw; margin-top: 14vw; }

  .np-grid { grid-template-columns: 1fr; }
  .np-header .px-title { text-align: center; }
  .np-header { justify-content: center; text-align: center; }

  .ft-inner { grid-template-columns: 1fr; }
  .ft-bottom { flex-direction: column-reverse; text-align: center; }
}