/* =========================================================
   IIPE 2027 - Halaman Exhibitor Inquiry
   Dimuat setelah bottom.css (badge, judul pixel, tombol pixel, link kontak, tombol copy).
   Hero ungu (seperti CTA Exhibitor), isi checker krem, kartu kotak pixel.
   ========================================================= */

/* ---------------- HERO (ungu) ---------------- */
.ei-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;
}
.ei-hero .badge { margin-bottom: 18px; }
.ei-hero .px-title { --oc: #3B2290; --pv: .4vw; --pmax: 5px; max-width: 12em; margin: 0 auto; }
.ei-sub {
  max-width: 640px; margin: 22px auto 0;
  font: 400 clamp(16px, 1.5vw, 20px)/1.6 'Funnel Display', system-ui, sans-serif; color: #FFFFDA;
}
.ei-prop { position: absolute; bottom: calc(var(--t) - 2px); width: clamp(64px, 10vw, 150px); pointer-events: none; }
.ei-prop.l { left: 6%; }
.ei-prop.r { right: 6%; }
.ei-prop img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ei-prop .coin { position: absolute; left: 50%; top: 0; width: 48%; transform: translate(-50%, -58%); animation: bBob 2.4s steps(4) infinite; }
.ei-prop.r .coin { animation-delay: -1.2s; }

/* ---------------- ISI (checker krem) ---------------- */
.ei-main {
  --tile: min(5.6vw, 105px);
  padding: clamp(40px, 6vw, 96px) 5vw clamp(56px, 8vw, 120px);
  background: conic-gradient(#FFF3AE 25%, #FFFFDA 0 50%, #FFF3AE 0 75%, #FFFFDA 0)
              0 0 / calc(var(--tile) * 2) calc(var(--tile) * 2);
}
.ei-inner { max-width: 860px; margin: 0 auto; display: grid; gap: clamp(26px, 3.4vw, 44px); }

/* ---------------- KARTU (kotak pixel) ---------------- */
.ei-card {
  --o: #4B28A1; --od: #3B2290; --f: #fff;
  position: relative; isolation: isolate;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 38px) clamp(30px, 3.6vw, 44px);
  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);
}
.ei-card::before {
  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);
}
.ei-info p {
  margin: 0 0 1em;
  font: 400 clamp(15px, 1.4vw, 18px)/1.65 'Funnel Display', system-ui, sans-serif; color: #2A1670;
}
.ei-info p:last-child { margin-bottom: 0; }
.ei-info strong { font-weight: 600; color: #4B28A1; }

/* ---------------- TOMBOL ---------------- */
.ei-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.ei-buttons .px-btn { font-size: clamp(20px, 2vw, 28px); text-align: center; }

/* varian: tombol berjejer lurus ke bawah (satu kolom) di semua ukuran layar */
.ei-buttons.is-stack { flex-direction: column; flex-wrap: nowrap; align-items: center; }

/* tombol "coming soon": tetap hijau (sorotan), tapi tidak bisa diklik */
.ei-buttons .px-btn.is-soon { cursor: not-allowed; user-select: none; }
.ei-buttons .px-btn.is-soon::after { content: none; }
.ei-buttons .px-btn.is-soon:hover { transform: none; }

/* ---------------- KONTAK ---------------- */
.ei-contact-title {
  margin: 0 0 20px;
  font: 400 clamp(24px, 2.4vw, 32px)/1.1 var(--px-font); letter-spacing: .05em; text-transform: uppercase; color: #4B28A1;
}
.ei-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px;
  font: 400 clamp(16px, 1.5vw, 19px)/1.4 'Funnel Display', system-ui, sans-serif; color: #2A1670;
}
.ei-line:last-child { margin-bottom: 0; }
.ei-line strong { font-weight: 600; color: #4B28A1; }
.ei-line .contact-link { font-weight: 600; color: #5B3CC4; }

.ei-back { margin: 0; text-align: center; font: 400 clamp(20px, 1.8vw, 24px)/1.2 var(--px-font); letter-spacing: .05em; text-transform: uppercase; }
.ei-back .contact-link { color: #5B3CC4; }

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

/* ---------------- MOBILE ---------------- */
@media (max-width: 720px) {
  .ei-hero { --t: 12vw; padding-bottom: calc(var(--t) + 24vw + 16px); }
  .ei-prop { width: 20vw; }
  .ei-prop.l { left: 3%; }
  .ei-prop.r { right: 3%; }
  .ei-main { --tile: 12vw; }
}