/* =========================================================
   CHIPAN PERKASA — scoped variant
   Dark, neon vertical-cinema theme. Tokusatsu hero show =
   VHS/broadcast-signal aesthetic: near-black background,
   one hot signal-green accent, scanline texture, wide
   tracked uppercase labels like a channel ident.
   Deliberately NOT the main site's cream/olive palette —
   this page is a window into the show's own world, same
   pattern as how Screen DNA gets its own desk theme.
   ========================================================= */
:root{
  --cp-bg:#0b0d0a;
  --cp-bg-raised:#12150f;
  --cp-panel:#161a13;
  --cp-line:rgba(215,255,190,0.12);
  --cp-ink:#eef4e6;
  --cp-muted:#9fae97;
  --cp-signal:#8CFF3D;
  --cp-signal-dim:#5fbf22;
  --cp-red:#ff4d5e;
  --cp-display:'Fredoka','Inter',sans-serif;
  --cp-mono:'Courier Prime','Courier New',monospace;
  --cp-sans:'Inter',-apple-system,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.01ms !important;transition-duration:.01ms !important;} }
body{
  margin:0;background:var(--cp-bg);color:var(--cp-ink);
  font-family:var(--cp-sans);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(140,255,61,0.06), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(255,77,94,0.05), transparent 45%);
  background-attachment:fixed;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
a:focus-visible, button:focus-visible{outline:2px solid var(--cp-signal);outline-offset:3px;}

/* ---------- broadcast-style header ---------- */
header.cp-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,13,10,0.88);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cp-line);
}
.cp-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:16px;}
.cp-back{
  font-family:var(--cp-mono);font-size:12px;color:var(--cp-muted);text-decoration:none;
  letter-spacing:0.03em;white-space:nowrap;
}
.cp-back:hover{color:var(--cp-signal);}
.cp-wordmark{
  font-family:var(--cp-mono);font-weight:700;font-size:14px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--cp-signal);text-decoration:none;
  display:flex;align-items:center;gap:8px;
}
.cp-wordmark .dot{width:7px;height:7px;border-radius:50%;background:var(--cp-red);animation:cpblink 1.6s steps(2,jump-none) infinite;}
@keyframes cpblink{0%,49%{opacity:1;}50%,100%{opacity:0.15;}}
.cp-nav-links{display:flex;gap:26px;font-size:14px;}
.cp-nav-links a{text-decoration:none;color:var(--cp-muted);letter-spacing:0.02em;}
.cp-nav-links a:hover{color:var(--cp-ink);}
@media(max-width:640px){ .cp-nav-links{display:none;} }

/* ---------- hero ---------- */
.cp-hero{position:relative;padding:0;overflow:hidden;}
.cp-hero-media{
  position:relative;aspect-ratio:16/10;max-height:640px;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);
}
.cp-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;}
.cp-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(11,13,10,0.15) 0%, rgba(11,13,10,0.55) 55%, var(--cp-bg) 100%);
}
.cp-hero-scanlines{
  position:absolute;inset:0;pointer-events:none;opacity:0.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 2px, transparent 3px);
  mix-blend-mode:overlay;
}
.cp-hero-copy{
  position:relative;margin-top:-160px;padding-bottom:56px;
}
@media(max-width:640px){ .cp-hero-copy{margin-top:-110px;} }
.cp-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cp-mono);font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--cp-signal);margin:0 0 16px;
}
.cp-eyebrow::before{content:"●";font-size:9px;}
.cp-hero h1{
  font-family:var(--cp-display);font-weight:700;
  font-size:clamp(38px,6vw,68px);line-height:0.98;letter-spacing:0.01em;
  margin:0 0 20px;text-transform:uppercase;
  text-shadow:0 0 28px rgba(140,255,61,0.28);
}
.cp-hero .cp-tagline{font-size:18px;color:var(--cp-muted);max-width:56ch;margin:0 0 28px;}
.cp-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:3px;
  font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;
  font-family:var(--cp-sans);border:1.5px solid transparent;letter-spacing:0.02em;
  transition:transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-signal{background:var(--cp-signal);color:#0b0d0a;}
.btn-signal:hover{background:#a3ff6b;box-shadow:0 8px 26px rgba(140,255,61,0.28);}
.btn-outline{border-color:rgba(238,244,230,0.3);color:var(--cp-ink);}
.btn-outline:hover{border-color:var(--cp-ink);}

/* ---------- synopsis ---------- */
.cp-section{padding:64px 0;}
.cp-section-head{max-width:680px;margin:0 0 32px;}
.cp-label{
  font-family:var(--cp-mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--cp-signal);margin:0 0 12px;
}
.cp-section-head h2{
  font-family:var(--cp-display);font-weight:700;font-size:clamp(24px,3vw,32px);
  margin:0;letter-spacing:-0.01em;
}
.cp-synopsis p{color:var(--cp-muted);font-size:17px;max-width:70ch;margin:0 0 16px;line-height:1.75;}
.cp-synopsis strong{color:var(--cp-ink);}

/* ---------- overview panel ---------- */
.cp-overview{
  background:var(--cp-panel);border:1px solid var(--cp-line);border-radius:10px;
  padding:28px 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;
}
.cp-overview dt{
  font-family:var(--cp-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--cp-muted);margin:0 0 6px;
}
.cp-overview dd{margin:0;font-size:15.5px;color:var(--cp-ink);font-weight:600;}

/* ---------- highlights ---------- */
.cp-highlights{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--cp-line);border:1px solid var(--cp-line);border-radius:10px;overflow:hidden;}
.cp-highlights li{background:var(--cp-panel);padding:22px 26px;display:flex;gap:16px;}
.cp-highlights .n{
  font-family:var(--cp-mono);font-weight:700;color:var(--cp-signal);font-size:14px;flex:none;
  width:28px;
}
.cp-highlights h4{margin:0 0 6px;font-family:var(--cp-display);font-size:16.5px;font-weight:600;}
.cp-highlights p{margin:0;color:var(--cp-muted);font-size:15px;line-height:1.6;}

/* ---------- gallery ---------- */
.cp-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.cp-gallery a{position:relative;display:block;border-radius:8px;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--cp-line);}
.cp-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.cp-gallery a:hover img{transform:scale(1.06);}
.cp-gallery a:first-child{grid-column:span 2;grid-row:span 2;}
@media(max-width:760px){
  .cp-gallery{grid-template-columns:repeat(2,1fr);}
  .cp-gallery a:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10;}
}

/* ---------- resistance / follow CTA ---------- */
.cp-follow{
  background:linear-gradient(135deg, rgba(140,255,61,0.10), rgba(255,77,94,0.06));
  border:1px solid var(--cp-line);border-radius:12px;
  padding:40px;text-align:center;
}
.cp-follow h2{font-family:var(--cp-display);font-size:clamp(22px,2.8vw,30px);margin:0 0 12px;}
.cp-follow p{color:var(--cp-muted);margin:0 0 24px;font-size:16px;}

/* ---------- footer ---------- */
footer.cp-footer{border-top:1px solid var(--cp-line);padding:40px 0;}
.cp-foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.cp-foot-links{display:flex;gap:20px;font-size:13px;}
.cp-foot-links a{text-decoration:none;color:var(--cp-muted);}
.cp-foot-links a:hover{color:var(--cp-signal);}
.cp-foot-meta{font-size:12px;color:var(--cp-muted);font-family:var(--cp-mono);}

@media(max-width:640px){
  .wrap{padding:0 20px;}
  .cp-section{padding:48px 0;}
  .cp-overview{grid-template-columns:1fr 1fr;padding:22px;}
}