/* Kerdilpedia — hero utama
   Desktop 1216×314 · HP 390×300. Semua selektor berawalan .kp-. */

.kp-hero{
  --kp-blue:#3B4E9D;
  --kp-blue-deep:#2A3A7C;
  --kp-yellow:#FFA800;
  --kp-yellow-hi:#FFC24C;
  --kp-ink:#12141A;
  --kp-cream:#F1F0EA;
  --kp-sans:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --kp-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-family:var(--kp-sans);
  -webkit-font-smoothing:antialiased;
}
.kp-hero *,
.kp-hero *::before,
.kp-hero *::after{ box-sizing:border-box; }

/* ---------- kartu ---------- */
.kp-stage{
  position:relative;
  width:1216px;
  max-width:100%;
  height:314px;
  padding:28px 40px 0;
  background:var(--kp-blue);
  border-radius:24px;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}

/* ---------- tekstur titik ---------- */
.kp-dots{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.17) 1.2px, transparent 1.2px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(120% 110% at 0% 0%, #000 0%, rgba(0,0,0,.4) 60%, transparent 92%);
  mask-image:radial-gradient(120% 110% at 0% 0%, #000 0%, rgba(0,0,0,.4) 60%, transparent 92%);
}

/* ---------- tipografi ---------- */
.kp-type{
  position:relative;
  z-index:3;
  max-width:600px;
  padding-bottom:84px;
}
.kp-eyebrow{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--kp-yellow-hi);
}
.kp-title{
  margin:10px 0 0;
  font-size:50px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.04em;
}
.kp-title em{ font-style:normal; color:var(--kp-yellow); }
.kp-sub{
  margin:8px 0 0;
  font-size:14px;
  color:rgba(255,255,255,.82);
  max-width:34ch;
}
.kp-actions{ margin-top:15px; display:flex; align-items:center; gap:20px; }
.kp-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border-radius:10px;
  background:var(--kp-yellow);
  color:var(--kp-ink);
  font-size:15.5px;
  font-weight:700;
  text-decoration:none;
  transition:background-color 140ms linear, transform 140ms cubic-bezier(.22,.7,.28,1);
}
.kp-cta:hover{ background:var(--kp-yellow-hi); transform:translateY(-1px); }
.kp-cta:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.kp-tally{
  margin:0;
  font-size:12px;
  color:rgba(255,255,255,.74);
}
.kp-tally b{ font-size:15px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }

/* ---------- lambang + gema ---------- */
.kp-art{
  position:absolute;
  z-index:1;
  right:-16px;
  top:8px;
  width:284px;
  height:207px;
  transform:rotate(-4deg);
  pointer-events:none;
}
.kp-art .kp-mark{ width:100%; height:100%; display:block; }
.kp-art .kp-mark path{ fill:var(--kp-yellow); }
.kp-echo{
  position:absolute;
  inset:0;
  transform:translate(16px,-14px);
}
.kp-echo .kp-mark path{ fill:rgba(255,255,255,.16); }

/* ---------- pita kategori ---------- */
.kp-strip{
  position:absolute;
  left:0; right:0; bottom:0;
  height:56px;
  z-index:4;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.16);
  background:#40539F;
}
.kp-track{
  display:flex;
  width:max-content;
  height:100%;
  align-items:center;
  animation:kp-roll 52s linear infinite;
  will-change:transform;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.kp-strip:hover .kp-track{ animation-play-state:paused; }
@keyframes kp-roll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.kp-cell{
  display:flex;
  align-items:center;
  align-self:stretch;
  gap:10px;
  width:196px;
  padding:0 18px;
  border-right:1px solid rgba(255,255,255,.1);
  transition:background-color 140ms linear;
}
.kp-cell:hover{ background:rgba(255,255,255,.07); }
.kp-cell i{
  width:5px; height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.38);
  align-self:center;
  flex:none;
}
.kp-cell b{
  font-size:15px;
  font-weight:600;
  color:rgba(255,255,255,.9);
}

/* ---------- tablet ---------- */
@media (max-width:1240px){
  .kp-stage{ width:100%; }
  .kp-art{ width:clamp(200px, 23.4vw, 284px); height:auto; aspect-ratio:284 / 207; }
}

/* ---------- HP ---------- */
@media (max-width:760px){
  .kp-hero{ padding:0 12px; }
  .kp-stage{
    height:300px;
    padding:18px 18px 0;
    border-radius:20px;
  }
  .kp-type{ max-width:none; padding-bottom:54px; }
  .kp-title{ font-size:29px; margin-top:8px; letter-spacing:-.035em; }
  .kp-sub{ font-size:12px; margin-top:6px; max-width:26ch; }
  .kp-actions{ margin-top:12px; display:block; }
  .kp-tally{ margin-top:9px; display:block; }
  .kp-cta{ font-size:13.5px; padding:10px 17px; border-radius:9px; gap:8px; }
  .kp-tally{ font-size:10.5px; }
  .kp-tally b{ font-size:13px; }

  .kp-art{
    right:-10px;
    top:auto;
    bottom:72px;
    width:150px;
    height:125px;
  }
  .kp-echo{ transform:translate(7px,-7px); }

  .kp-strip{ height:46px; }
  /* di HP label paling tepi jangan sampai ikut pudar berlebihan */
  .kp-track{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 1.5%, #000 98.5%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 1.5%, #000 98.5%, transparent 100%);
  }
  .kp-cell{ width:150px; padding:0 13px; gap:8px; }
  .kp-cell b{ font-size:12.5px; }
}

@media (max-width:380px){
  .kp-title{ font-size:26px; }
  .kp-art{ width:132px; height:110px; bottom:66px; }
  .kp-cell{ width:140px; }
}

/* ---------- gerak minimal ---------- */
@media (prefers-reduced-motion:reduce){
  .kp-track{ animation:none !important; }
  .kp-cta{ transition:none !important; }
}

/* ---------- penempatan di halaman (jangan menempel tepi) ---------- */
.kp-hero{ width:100%; display:block; }
.kp-hero .kp-stage{ margin:24px auto 8px; }
@media (min-width:761px){ .kp-hero{ padding:0 32px; } }
@media (max-width:760px){
  .kp-hero{ padding:0 12px; }
  .kp-hero .kp-stage{ margin:10px 0 6px; }
  .kp-sub{ max-width:30ch; }
  .kp-actions{ display:block; }
  .kp-tally{ display:block; margin-top:9px; }
}
.kp-title{ margin-top:8px; }
.kp-sub{ margin-top:6px; max-width:none; }
.kp-actions{ margin-top:10px; }

/* ---------- nama kategori: rata tengah, tanpa titik ---------- */
.kp-cell{ justify-content:center; text-align:center; gap:0; padding:0 12px; }
.kp-cell i{ display:none !important; }
.kp-cell b{ width:100%; text-align:center; }

/* Label "Bergaransi" di hero (pengganti baris harga) */
.kp-garansi{
  display:inline-flex;
  align-items:center;
  align-self:center;
  gap:6px;
  min-height:36px;
  padding:0 13px 0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}
.kp-garansi .material-symbols-outlined{ font-size:16px; color:#FFA800; }

@media (max-width:760px){
  .kp-garansi{ display:flex; width:max-content; margin-top:10px; font-size:11px; min-height:32px; padding:0 11px 0 8px; align-self:flex-start; }
  .kp-garansi .material-symbols-outlined{ font-size:14px; }
}