/* ==========================================================================
   rajajuara · singgasana-emas skin
   Reference language: the brand's own royal poster (deep maroon starfield, gold
   double frames, ribbon badges, condensed uppercase, chunky gold CTA).
   Only visual language is borrowed; no reference copy, wordmark or promo number
   is reproduced here. Site-scoped: every rule is under body.variant-poster or a
   site component class so the shared templates stay untouched.
   ========================================================================== */

:root {
  --bg: #160209;
  --bg2: #240410;
  --panel: #2e0714;
  --text: #fff4e2;
  --muted: #d2b39a;
  --accent: #c9191a;
  --accent2: #f2c14e;
  --line: rgba(242, 193, 78, 0.34);
  --display: "Impact", "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 2px;
  --max: 1180px;
  --royal-gold: #f2c14e;
  --royal-gold-deep: #a9741f;
  --royal-gold-light: #ffe9a8;
  --royal-red: #c9191a;
  --royal-red-deep: #6d0c0e;
  --royal-ink: #1b0409;
}

/* ---------- canvas: maroon starfield + faint gold grain ---------------- */
body.variant-poster {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(201, 25, 26, 0.42), transparent 62%),
    radial-gradient(ellipse 60% 40% at 8% 22%, rgba(169, 116, 31, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 96% 68%, rgba(201, 25, 26, 0.18), transparent 62%),
    linear-gradient(180deg, #1d0409 0%, #160209 42%, #120106 100%);
  background-attachment: fixed;
}
body.variant-poster::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    radial-gradient(circle at 12% 18%, #ffd98a 0 1px, transparent 1.6px),
    radial-gradient(circle at 38% 62%, #ffb3a1 0 1px, transparent 1.7px),
    radial-gradient(circle at 74% 34%, #ffe9a8 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 78%, #ff9f8a 0 1px, transparent 1.6px),
    radial-gradient(circle at 55% 88%, #ffd98a 0 1px, transparent 1.4px);
  background-size: 320px 320px, 280px 280px, 360px 360px, 240px 240px, 300px 300px;
}
body.variant-poster > * { position: relative; z-index: 1; }

/* ---------- gold type ------------------------------------------------- */
body.variant-poster h1,
body.variant-poster h2 {
  font-family: var(--display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--royal-gold-light);
  text-shadow: 0 2px 0 #4a0a0c, 0 0 18px rgba(242, 193, 78, 0.22);
}
body.variant-poster h3 { font-family: var(--display); letter-spacing: 0.01em; color: var(--text); }

/* ---------- top policy strip as a ribbon ------------------------------ */
body.variant-poster .policy-strip {
  background: linear-gradient(180deg, #4d080c 0%, #2a0409 100%);
  border-top: 2px solid var(--royal-gold);
  border-bottom: 1px solid rgba(242, 193, 78, 0.5);
}
body.variant-poster .policy-badge {
  color: var(--royal-gold-light);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
body.variant-poster .policy-tag {
  border: 1px solid var(--royal-gold);
  color: var(--royal-ink);
  background: linear-gradient(180deg, var(--royal-gold-light), var(--royal-gold));
  border-radius: 2px;
  font-weight: 800;
}
body.variant-poster .policy-link {
  border: 1px solid rgba(242, 193, 78, 0.55);
  border-radius: 2px;
  color: var(--royal-gold-light);
  background: rgba(0, 0, 0, 0.22);
}
body.variant-poster .policy-link:hover { background: rgba(242, 193, 78, 0.18); color: #fff; }
body.variant-poster .policy-note { color: #e3bda6; }

/* ---------- header: gold frame + ribbon band -------------------------- */
body.variant-poster .po-header {
  background: linear-gradient(180deg, #2b0409 0%, #1b0308 100%);
  border-bottom: 3px solid var(--royal-gold);
  box-shadow: 0 1px 0 #6d0c0e inset, 0 10px 26px rgba(0, 0, 0, 0.45);
}
body.variant-poster .po-navrow {
  min-height: 64px;
  gap: 20px;
}
body.variant-poster .po-brand-logo {
  height: 52px;
  width: auto;
  max-width: min(210px, 42vw);
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
body.variant-poster .po-nav a {
  color: #f7dfb6;
  font-size: 9px;
  letter-spacing: 0.14em;
  border-bottom: 2px solid transparent;
  padding: 7px 2px;
}
body.variant-poster .po-nav a:hover,
body.variant-poster .po-nav a[aria-current="page"] {
  color: var(--royal-gold-light);
  border-bottom-color: var(--royal-gold);
}
body.variant-poster .po-band {
  background: linear-gradient(90deg, #7c1012 0%, #c9191a 48%, #7c1012 100%);
  border-top: 1px solid rgba(242, 193, 78, 0.75);
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  color: #ffe9c2;
}
body.variant-poster .po-band .wrap { padding: 6px 0; letter-spacing: 0.11em; }
body.variant-poster .menu-btn {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(242, 193, 78, 0.6);
  color: var(--royal-gold-light);
  border-radius: 2px;
}

/* ---------- buttons: gold plaque + maroon plaque ---------------------- */
body.variant-poster .btn {
  border-radius: 2px;
  font-family: var(--display);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-width: 2px;
}
body.variant-poster .btn-primary {
  background: linear-gradient(180deg, #ffe9a8 0%, #f2c14e 46%, #b9812a 100%);
  color: #3a0508;
  border-color: #ffdf8d;
  box-shadow: 0 4px 0 #7b4a10, 0 0 20px rgba(242, 193, 78, 0.28);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.variant-poster .btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
body.variant-poster .btn-ghost {
  background: linear-gradient(180deg, #4d080c 0%, #2b0409 100%);
  color: var(--royal-gold-light);
  border-color: rgba(242, 193, 78, 0.75);
  box-shadow: 0 4px 0 #150206;
}
body.variant-poster .btn-ghost:hover { border-color: var(--royal-gold); color: #fff; }
body.variant-poster .btn-sm { min-height: 40px; font-size: 10px; }
body.variant-poster .btn-lg { min-height: 54px; font-size: 13px; }

/* ---------- hero: framed poster plate -------------------------------- */
body.variant-poster .po-hero {
  padding: 20px 0 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(201, 25, 26, 0.28), transparent 68%);
}
body.variant-poster .hero-logo-lockup { margin: 0 0 16px; gap: 10px; }
body.variant-poster .hero-brand-logo {
  max-height: 84px;
  width: auto;
  max-width: min(220px, 52vw);
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
}
body.variant-poster .hero-logo-tag {
  border: 1px solid var(--royal-gold);
  background: rgba(0, 0, 0, 0.28);
  color: var(--royal-gold-light);
  border-radius: 2px;
  letter-spacing: 0.16em;
}
body.variant-poster .po-kicker {
  color: #e6c39a;
  letter-spacing: 0.2em;
}
body.variant-poster .po-hero-figure {
  position: relative;
  margin: 16px 0 0;
  max-height: 330px;
  border: 3px solid var(--royal-gold);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px #5c0d10,
    0 0 0 8px rgba(109, 12, 14, 0.55),
    0 18px 42px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  background: #160209;
}
body.variant-poster .po-hero-figure img {
  max-height: 330px;
  object-position: center 42%;
}
body.variant-poster .po-hero-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(22, 2, 9, 0.32) 0%, transparent 26%, transparent 66%, rgba(22, 2, 9, 0.62) 100%);
}
body.variant-poster .po-title {
  margin: 14px 0 0;
  font-size: clamp(48px, 7.2vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.012em;
  color: #ffe9a8;
  -webkit-text-stroke: 2px #64090d;
  text-shadow:
    0 5px 0 #7c1012,
    0 6px 0 #3a0508,
    0 0 30px rgba(242, 193, 78, 0.28);
}
body.variant-poster .po-rule { margin: 12px 0 14px; gap: 7px; }
body.variant-poster .po-rule span:nth-child(1) {
  background: linear-gradient(90deg, #f2c14e, #a9741f);
}
body.variant-poster .po-rule span:nth-child(2) { background: linear-gradient(90deg, #c9191a, #6d0c0e); }
body.variant-poster .po-rule span:nth-child(3) { border: 2px solid var(--royal-gold); }
body.variant-poster .po-deck {
  color: #f0d8c0;
  font-size: 15px;
  line-height: 1.62;
  max-width: 640px;
}
body.variant-poster .po-arrow { color: var(--royal-gold-light); }
body.variant-poster .po-strip {
  border-top: 3px solid var(--royal-gold);
  border-bottom: 1px solid var(--line);
  color: #e0bd9c;
  margin-top: 22px;
}
body.variant-poster .po-strip b { color: var(--royal-gold-light); }
body.variant-poster .chips span {
  border: 1px solid rgba(242, 193, 78, 0.42);
  background: rgba(46, 7, 20, 0.66);
  color: #e7c9a7;
  border-radius: 2px;
}

/* ---------- sections: ribbon head + gold rules ------------------------ */
body.variant-poster .section {
  padding: 52px 0;
  border-bottom: 1px solid rgba(242, 193, 78, 0.16);
}
body.variant-poster .sec-head {
  position: relative;
  border-left: 3px solid var(--royal-gold);
  padding: 2px 0 2px 16px;
  margin-bottom: 24px;
}
body.variant-poster .sec-head .kicker {
  color: var(--royal-gold);
  letter-spacing: 0.2em;
}
body.variant-poster .sec-head h2 {
  font-size: clamp(26px, 3.4vw, 42px);
  color: var(--royal-gold-light);
  margin: 2px 0 6px;
}
body.variant-poster .sec-head p {
  color: #d9b599;
  font-size: 13.5px;
  max-width: 760px;
}

/* summary */
body.variant-poster .po-summary { max-width: 940px; }
body.variant-poster .po-pull {
  border-left: 8px solid var(--royal-gold);
  color: #ffe9c2;
  background: linear-gradient(90deg, rgba(124, 16, 18, 0.4), transparent 78%);
  padding: 12px 0 12px 18px;
  font-size: clamp(20px, 2.6vw, 31px);
}
body.variant-poster .po-summary > p { color: #e2c3a8; font-size: 13.5px; line-height: 1.75; }
body.variant-poster .po-mini-facts span {
  border: 1px solid rgba(242, 193, 78, 0.32);
  background: linear-gradient(180deg, rgba(46, 7, 20, 0.9), rgba(22, 2, 9, 0.9));
  border-radius: 2px;
}
body.variant-poster .po-mini-facts b { color: var(--royal-gold-light); }

/* routes: three framed doors */
body.variant-poster .variant-poster .route-grid { border-top: 3px solid var(--royal-gold); }
body.variant-poster .route-grid {
  border-top: 3px solid var(--royal-gold);
  border-bottom: 1px solid var(--line);
}
body.variant-poster .route-card {
  position: relative;
  border-right: 1px solid rgba(242, 193, 78, 0.28);
  padding: 20px 20px 20px 0;
  background: linear-gradient(180deg, rgba(46, 7, 20, 0.5), rgba(22, 2, 9, 0.2));
  transition: background 0.18s ease, transform 0.18s ease;
}
body.variant-poster .route-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 3px;
  background: var(--royal-gold);
}
body.variant-poster .route-card:hover {
  background: linear-gradient(180deg, rgba(124, 16, 18, 0.55), rgba(46, 7, 20, 0.4));
  transform: translateY(-2px);
}
body.variant-poster .route-card.primary {
  background: linear-gradient(180deg, rgba(201, 25, 26, 0.34), rgba(46, 7, 20, 0.5));
}
body.variant-poster .route-no { color: var(--royal-gold); font-family: ui-monospace, monospace; }
body.variant-poster .route-card h3 { color: var(--royal-gold-light); }
body.variant-poster .route-card p { color: #ddbaa0; font-size: 12.5px; }
body.variant-poster .route-link { color: var(--royal-gold-light); }

/* facts: numbered plaque grid */
body.variant-poster .po-factgrid {
  border-top: 3px solid var(--royal-gold);
  border-left: 1px solid rgba(242, 193, 78, 0.28);
  background: rgba(22, 2, 9, 0.35);
}
body.variant-poster .po-factgrid div {
  border-right: 1px solid rgba(242, 193, 78, 0.28);
  border-bottom: 1px solid rgba(242, 193, 78, 0.28);
}
body.variant-poster .po-factgrid span { color: var(--royal-gold); }
body.variant-poster .po-factgrid b { color: var(--text); }
body.variant-poster .po-factgrid small { color: #cfa885; }

/* trust list */
body.variant-poster .trust-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
body.variant-poster .trust-list li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(242, 193, 78, 0.3);
  border-left: 3px solid var(--royal-gold);
  background: linear-gradient(90deg, rgba(46, 7, 20, 0.7), rgba(22, 2, 9, 0.5));
  padding: 13px 16px;
}
body.variant-poster .trust-list li > span {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  color: var(--royal-gold);
}
body.variant-poster .trust-list p { margin: 0; color: #e6c9ae; font-size: 13px; }
body.variant-poster .section-note { color: #cda98a; }

/* steps */
body.variant-poster .po-steps { border-top: 3px solid var(--royal-gold); }
body.variant-poster .po-steps li { border-bottom: 1px solid rgba(242, 193, 78, 0.24); }
body.variant-poster .po-steps li:nth-child(odd) { border-right: 1px solid rgba(242, 193, 78, 0.24); }
body.variant-poster .po-steps li > span {
  color: transparent;
  background: linear-gradient(180deg, #ffe9a8, #a9741f);
  -webkit-background-clip: text;
  background-clip: text;
}
body.variant-poster .po-steps h3 { color: var(--royal-gold-light); }
body.variant-poster .po-steps p { color: #dcb99f; }

/* activities empty state */
body.variant-poster .empty {
  border: 1px dashed rgba(242, 193, 78, 0.5);
  background: rgba(46, 7, 20, 0.45);
  padding: 26px;
}
body.variant-poster .empty h2 { font-size: 22px; color: var(--royal-gold-light); }
body.variant-poster .empty p { color: #dcb99f; font-size: 13px; }

/* terms / chips box */
body.variant-poster .terms-box {
  border: 1px solid rgba(242, 193, 78, 0.34);
  background: rgba(22, 2, 9, 0.45);
  padding: 18px;
}
body.variant-poster .terms-label { color: var(--royal-gold); letter-spacing: 0.16em; }
body.variant-poster .edition-note { border-left: 3px solid var(--royal-gold); padding-left: 14px; }
body.variant-poster .edition-note p { color: #d9b699; font-size: 12.5px; }

/* faq */
body.variant-poster .po-faq { border-top: 3px solid var(--royal-gold); }
body.variant-poster .po-faq article { border-bottom: 1px solid rgba(242, 193, 78, 0.24); }
body.variant-poster .po-faq article:nth-child(odd) { border-right: 1px solid rgba(242, 193, 78, 0.24); }
body.variant-poster .po-num { color: var(--royal-gold); }
body.variant-poster .po-faq h3 { color: var(--royal-gold-light); }
body.variant-poster .po-faq p { color: #dcb99f; }

/* showcase gallery: subject-led tiles, uniform 1.1 cells, one ornament band */
body.variant-poster .sec-showcase .h03-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
}
body.variant-poster .h03-tile {
  position: relative;
  margin: 0;
  border: 2px solid var(--royal-gold);
  border-radius: 2px;
  overflow: hidden;
  background: #1b0409;
  box-shadow: 0 0 0 1px #5c0d10, 0 12px 26px rgba(0, 0, 0, 0.45);
}
body.variant-poster .h03-tile:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
body.variant-poster .h03-tile img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1.1;
  object-fit: cover;
  object-position: center 46%;
}
body.variant-poster .h03-tile:first-child img { object-position: center 30%; }
body.variant-poster .h03-tile:nth-child(2) img { object-position: center 42%; }
body.variant-poster .h03-tile:nth-child(3) img { object-position: 74% 56%; }
body.variant-poster .h03-tile:nth-child(4) img { object-position: center 52%; }
body.variant-poster .h03-tile:nth-child(5) img { object-position: center 50%; }
body.variant-poster .h03-tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px 9px;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ffe9c2;
  background: linear-gradient(180deg, rgba(22, 2, 9, 0), rgba(22, 2, 9, 0.92));
  pointer-events: none;
}
body.variant-poster .h03-band {
  margin: 14px 0 0;
  border: 2px solid var(--royal-gold);
  border-radius: 2px;
  overflow: hidden;
  background: #1b0409;
}
body.variant-poster .h03-band img { width: 100%; height: auto; }
body.variant-poster .h03-band figcaption {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #d7b394;
  padding: 7px 10px;
  border-top: 1px solid rgba(242, 193, 78, 0.3);
}
@media (max-width: 700px) {
  body.variant-poster .sec-showcase .h03-tiles { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  body.variant-poster .h03-tile:first-child { grid-column: span 2; grid-row: auto; }
  body.variant-poster .h03-tile:first-child img { aspect-ratio: 1.1; object-position: center 26%; }
  body.variant-poster .h03-tile:not(:first-child) img { aspect-ratio: 1 / 1; }
  body.variant-poster .h03-band img { max-height: 120px; object-fit: cover; }
  body.variant-poster .h03-tile figcaption { font-size: 9px; padding: 5px 7px; }
}

/* ---------- info / guide pages inherit the same plaques --------------- */
body.variant-poster .info-body,
body.variant-poster .guide-body { color: #e8cdb4; }
body.variant-poster .info-body h2,
body.variant-poster .guide-body h2 { color: var(--royal-gold-light); }
body.variant-poster .info-aside,
body.variant-poster .guide-aside {
  border: 1px solid rgba(242, 193, 78, 0.34);
  background: rgba(46, 7, 20, 0.6);
}
body.variant-poster .crumb { color: #c9a382; }

/* ---------- footer: gold band + columns ------------------------------- */
body.variant-poster .av-footer {
  border-top: 3px solid var(--royal-gold);
  background: linear-gradient(180deg, #1d0409 0%, #120106 100%);
}
body.variant-poster .av-footer-cta {
  background: linear-gradient(90deg, #7c1012 0%, #c9191a 50%, #7c1012 100%);
  border-bottom: 2px solid var(--royal-gold);
  color: #ffe9c2;
}
body.variant-poster .av-footer-cta p { color: #ffe9c2; letter-spacing: 0.06em; }
body.variant-poster .av-footer-cta .btn-primary {
  background: linear-gradient(180deg, #ffe9a8, #f2c14e 48%, #b9812a);
  color: #3a0508;
  border-color: #ffdf8d;
  box-shadow: 0 4px 0 #7b4a10;
}
body.variant-poster .av-footer-cta .btn-ghost {
  background: rgba(0, 0, 0, 0.28);
  color: #ffe9c2;
  border-color: rgba(255, 233, 194, 0.8);
}
body.variant-poster .av-footer-band {
  padding: 22px 0 0;
}
body.variant-poster .av-footer-band img {
  height: 64px;
  width: auto;
  max-width: min(220px, 50vw);
  object-fit: contain;
}
body.variant-poster .av-footer-col h3 { color: var(--royal-gold); }
body.variant-poster .av-footer-col a { color: #d3b095; font-size: 10.5px; }
body.variant-poster .av-footer-col a:hover { color: var(--royal-gold-light); }
body.variant-poster .av-footer-bottom { color: #bf9a7d; border-top-color: rgba(242, 193, 78, 0.28); }
body.variant-poster .age { background: var(--royal-gold); color: #3a0508; }

/* ---------- fixed mobile CTA bar -------------------------------------- */
body.variant-poster .bottom-cta {
  display: none;
}
@media (max-width: 700px) {
  body.variant-poster .bottom-cta {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(29, 4, 9, 0.96), rgba(12, 1, 5, 0.99));
    border-top: 2px solid var(--royal-gold);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.55);
  }
  body.variant-poster .bottom-cta .btn {
    flex: 1;
    min-height: 50px;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    padding: 0 8px;
  }
  body.variant-poster { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* hero: keep exactly one big content image in the 390x844 first screen */
  body.variant-poster .po-hero { padding-top: 18px; }
  body.variant-poster .hero-brand-logo { max-height: 64px; max-width: min(170px, 50vw); }
  body.variant-poster .po-brand-logo { height: 40px; max-width: min(160px, 46vw); }
  body.variant-poster .po-hero-figure { max-height: 262px; margin-top: 12px; }
  body.variant-poster .po-hero-figure img { max-height: 262px; }
  body.variant-poster .po-title { font-size: clamp(44px, 13.4vw, 66px); margin-top: 14px; }
  body.variant-poster .po-deck { font-size: 14px; line-height: 1.62; }
  /* Mobile: the fixed bar is the single CTA pair, so the in-hero buttons step
     aside and the first screen stays image-led. */
  body.variant-poster .po-hero-actions { display: none; }
  body.variant-poster .po-strip { margin-top: 16px; font-size: 8.5px; gap: 8px 14px; }
  body.variant-poster .po-navrow { min-height: 56px; gap: 10px; }
  body.variant-poster .po-band .wrap { font-size: 8px; text-align: left; }
  body.variant-poster .section { padding: 36px 0; }
  body.variant-poster .sec-head { padding-left: 12px; }
  body.variant-poster .po-factgrid { grid-template-columns: 1fr 1fr; }
  body.variant-poster .trust-list li { grid-template-columns: 34px 1fr; gap: 10px; padding: 11px 12px; }
  body.variant-poster .av-footer { padding-bottom: 8px; }
  body.variant-poster .av-footer-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (max-width: 420px) {
  body.variant-poster .po-title { font-size: clamp(40px, 13.8vw, 58px); }
  body.variant-poster .po-hero-actions .btn { flex: 1 1 100%; }
  body.variant-poster .po-mini-facts { grid-template-columns: 1fr 1fr; }
}

/* Explicit hero CTA wording on the poster plate: the shared typographic hero
   prints only "H5"/"APK", so the site labels them as entry actions without
   forking the template. Screen-reader text stays the anchor text. */
@media (min-width: 701px) {
  body.variant-poster .po-hero-actions .btn-primary::before { content: "Masuk "; }
  body.variant-poster .po-hero-actions .btn-ghost::before { content: "Unduh "; }
}
body.variant-poster .po-hero-actions .btn { padding: 0 22px; letter-spacing: 0.12em; }

/* ---------- subpage hero: same gold plaque type, legible fill -------- */
body.variant-poster .variant-page-hero {
  padding: 38px 0 30px;
  border-bottom: 1px solid rgba(242, 193, 78, 0.28);
  background: radial-gradient(ellipse 70% 120% at 50% -30%, rgba(201, 25, 26, 0.32), transparent 66%);
}
body.variant-poster .variant-page-hero h1 {
  font-size: clamp(38px, 6.2vw, 76px);
  line-height: 0.98;
  color: #ffe9a8;
  -webkit-text-stroke: 2px #64090d;
  text-shadow: 0 4px 0 #7c1012, 0 0 26px rgba(242, 193, 78, 0.2);
}
body.variant-poster .variant-page-hero .eyebrow { color: #e6c39a; letter-spacing: 0.2em; }
body.variant-poster .variant-page-hero .deck { color: #eed3b6; font-size: 15.5px; }
body.variant-poster .variant-page-hero .hero-actions { justify-content: center; margin-top: 18px; }
body.variant-poster .variant-prose h2 { border-top: 2px solid var(--royal-gold); color: var(--royal-gold-light); }
body.variant-poster .variant-prose p,
body.variant-poster .variant-prose li { color: #e8cdb4; }
body.variant-poster .variant-split .aside .card {
  border: 1px solid rgba(242, 193, 78, 0.32);
  background: linear-gradient(180deg, rgba(46, 7, 20, 0.85), rgba(22, 2, 9, 0.85));
}
body.variant-poster .variant-split .aside .label { color: var(--royal-gold); }
@media (max-width: 700px) {
  body.variant-poster .variant-page-hero { padding: 26px 0 22px; }
  body.variant-poster .variant-page-hero h1 { font-size: clamp(30px, 9vw, 46px); -webkit-text-stroke-width: 1.4px; }
  body.variant-poster .variant-page-hero .deck { font-size: 14px; }
}