/* =========================================================
   IIPE 2027 - Halaman Contact
   Dimuat setelah bottom.css (badge, judul pixel, tombol pixel).
   ========================================================= */

/* ---------------- HERO (hijau, dari CSS + box/koin yang sudah ada) ---------------- */
.ct-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, #64D283 50%, transparent 50%) left bottom / calc(var(--t) * 2) var(--t) repeat-x,
    #44C27B;
}
.ct-hero .badge { margin-bottom: 18px; }
.ct-hero .px-title { --oc: #00735F; --pv: .4vw; --pmax: 5px; max-width: 12em; margin: 0 auto; }
.ct-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;
}
.ct-prop { position: absolute; bottom: calc(var(--t) - 2px); width: clamp(64px, 10vw, 150px); pointer-events: none; }
.ct-prop.l { left: 6%; }
.ct-prop.r { right: 6%; }
.ct-prop img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ct-prop .coin { position: absolute; left: 50%; top: 0; width: 48%; transform: translate(-50%, -58%); animation: bBob 2.4s steps(4) infinite; }
.ct-prop.r .coin { animation-delay: -1.2s; }

/* ---------------- ISI (checker cyan) ---------------- */
.ct-main {
  --tile: min(5.6vw, 105px);
  padding: clamp(40px, 6vw, 96px) 5vw clamp(56px, 8vw, 120px);
  background: conic-gradient(#C6FFFF 25%, #DCFFFF 0 50%, #C6FFFF 0 75%, #DCFFFF 0)
              0 0 / calc(var(--tile) * 2) calc(var(--tile) * 2);
}
.ct-inner { max-width: 1000px; margin: 0 auto; }
.ct-block { margin: 0 0 clamp(40px, 5.4vw, 72px); }
.ct-block:last-child { margin-bottom: 0; }
.ct-head { margin: 0 0 clamp(20px, 2.6vw, 34px); }
.ct-head .px-title { --oc: #4B28A1; --pv: .25vw; --pmax: 3px; }

/* kartu berbingkai kotak (sama dengan kartu logo) */
.ct-card {
  --o: #4B28A1; --od: #3B2290; --f: #fff;
  position: relative; isolation: isolate;
  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);
}
.ct-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);
}

/* --- info umum --- */
.ct-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.ct-info-item { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 28px; }
.ct-label { margin: 0; font: 400 22px/1 var(--px-font); letter-spacing: .08em; text-transform: uppercase; color: #009880; }
.ct-value { margin: 0; font: 600 clamp(16px, 1.4vw, 18px)/1.4 'Funnel Display', system-ui, sans-serif; color: #2A1670; overflow-wrap: anywhere; }
.ct-value a { color: #5B3CC4; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ct-value a:hover { color: #FF424E; }

/* --- sales --- */
.ct-sales { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.ct-sale { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 30px) clamp(24px, 3vw, 34px); }
.ct-qr { flex: 0 0 auto; text-align: center; }
.ct-qr img { display: block; width: clamp(110px, 12vw, 150px); height: auto; border: 3px solid #4B28A1; background: #fff; }
.ct-qr-label { display: block; margin-top: 8px; font: 400 20px/1 var(--px-font); letter-spacing: .08em; text-transform: uppercase; color: #5B3CC4; }
.ct-name { margin: 0; font: 400 clamp(32px, 3.2vw, 46px)/1 var(--px-font); letter-spacing: .04em; text-transform: uppercase; color: #4B28A1; }
.ct-role { margin: 6px 0 14px; font: 400 clamp(15px, 1.3vw, 17px)/1.3 'Funnel Display', system-ui, sans-serif; color: #5B3CC4; }
.ct-mail {
  font: 400 clamp(20px, 1.8vw, 24px)/1.2 var(--px-font); letter-spacing: .04em;
  color: #2A1670; text-decoration: underline dashed #8D83FF; text-underline-offset: 5px; overflow-wrap: anywhere;
}
.ct-mail:hover { color: #FF424E; }

/* --- tombol --- */
.ct-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.ct-note { margin: 0 0 20px; text-align: center; font: 400 clamp(16px, 1.5vw, 19px)/1.5 'Funnel Display', system-ui, sans-serif; color: #2A1670; }

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

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