/* ==========================================================================
   thor · skin "guntur-olimpus" (reference-led, poster variant)
   Bahasa visual diambil dari halaman resmi thor (letsthor.co): langit malam
   biru tua, kilat putih-biru, bingkai emas tipis, papan gulir ungu bertatah
   permata, karakter Olimpus berjubah biru, dan tipografi kapital tebal.
   Tidak memakai teks promosi, nominal, kode QR, atau merek pihak ketiga
   dari halaman rujukan. Struktur: gerbang berbingkai emas, galeri enam
   bingkai, pilar rute, papan fakta, dan footer tanda besar.
   ========================================================================== */

body.variant-poster {
  --bg: #070c1a;
  --bg2: #0b1226;
  --panel: #0f1a33;
  --panel-2: #16233f;
  --text: #f3ede1;
  --muted: #a7b3cb;
  --accent: #1f4fd6;
  --accent2: #f2c76a;
  --accent3: #7fb0ff;
  --line: rgba(242, 199, 106, 0.26);
  --line-soft: rgba(150, 178, 224, 0.18);
  --display: "Arial Black", "Helvetica Neue", Impact, Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 6px;
  --gold-deep: #8a6420;
  --gold-mid: #c79c4a;
  --gold-hi: #ffe6b0;
  --ink: #1a1206;
  background: #060a16;
  color: var(--text);
}

/* Latar: langit malam + gerbang batu, sangat gelap agar teks tetap terbaca. */
body.variant-poster::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(900px 520px at 78% -8%, rgba(31, 79, 214, 0.30), transparent 68%),
    radial-gradient(620px 420px at 12% 8%, rgba(127, 176, 255, 0.12), transparent 70%),
    radial-gradient(720px 520px at 50% 108%, rgba(199, 156, 74, 0.14), transparent 72%);
  background-repeat: no-repeat;
}
body.variant-poster {
  background-image: url("thor-bg-sky-1400.webp");
  background-size: 1400px auto;
  background-position: center top;
  background-repeat: repeat-y;
  background-attachment: fixed;
}
body.variant-poster > * { position: relative; z-index: 1; }
body.variant-poster .wrap { width: min(1180px, 100% - 44px); }

/* ---------- Header: pita emas tipis di atas, garis ganda di bawah ---------- */
body.variant-poster .site-header.po-header,
body.variant-poster .po-header {
  position: sticky;
  top: 0;
  z-index: 70;
  background: linear-gradient(180deg, rgba(8, 13, 28, 0.98) 0%, rgba(7, 11, 24, 0.95) 100%);
  border-bottom: 1px solid rgba(242, 199, 106, 0.42);
  box-shadow: 0 1px 0 rgba(255, 232, 176, 0.10), 0 18px 44px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}
body.variant-poster .site-header.po-header::before,
body.variant-poster .po-header::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-mid) 18%, var(--gold-hi) 50%, var(--gold-mid) 82%, transparent);
}
body.variant-poster .po-navrow { min-height: 68px; gap: 14px; }
body.variant-poster .brand-text { display: none; }
body.variant-poster .brand { display: flex; align-items: center; gap: 10px; }
body.variant-poster .brand-logo { height: 52px; max-width: min(230px, 44vw); filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55)); }
body.variant-poster .po-brand-logo { height: 56px; width: auto; max-width: min(240px, 48vw); }
body.variant-poster .po-header { position: sticky; top: 0; z-index: 75; }
body.variant-poster .po-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
body.variant-poster .po-band {
  border-top: 1px solid rgba(242, 199, 106, 0.35);
  background: linear-gradient(90deg, rgba(31, 79, 214, 0.3), rgba(11, 18, 34, 0.9));
  color: #d6c69c;
}
body.variant-poster .po-band .wrap { font-size: 9.5px; letter-spacing: 0.16em; gap: 18px; }
body.variant-poster .po-band .wrap span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 72ch; }
body.variant-poster .po-band span:last-child { color: var(--gold-hi); }
body.variant-poster .po-nav { gap: 16px; }
body.variant-poster .po-nav a {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  color: #cfd8ea;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 8px 0;
}
body.variant-poster .po-nav a:hover,
body.variant-poster .po-nav a[aria-current="page"] { color: var(--gold-hi); border-bottom-color: var(--gold-mid); }
body.variant-poster .po-actions .btn { min-height: 42px; padding: 0 16px; font-size: 11px; }
body.variant-poster .menu-btn { border-color: var(--line); color: var(--gold-hi); background: var(--panel); }

/* ---------- Pita kebijakan: strip slot resmi di atas halaman ---------- */
body.variant-poster .policy-strip {
  background: linear-gradient(90deg, rgba(31, 79, 214, 0.22), rgba(8, 13, 28, 0.4) 60%);
  border-bottom: 1px solid var(--line-soft);
  font-size: 10px;
}
body.variant-poster .policy-badge { color: var(--gold-hi); }
body.variant-poster .policy-link { border-color: rgba(242, 199, 106, 0.45); color: var(--gold-hi); }
body.variant-poster .policy-link:hover { background: rgba(242, 199, 106, 0.14); }

/* ---------- Hero: gerbang berbingkai emas ---------- */
body.variant-poster .po-hero {
  padding: 34px 0 0;
  background:
    radial-gradient(760px 420px at 84% 6%, rgba(31, 79, 214, 0.22), transparent 66%),
    radial-gradient(520px 320px at 8% 60%, rgba(199, 156, 74, 0.12), transparent 70%);
}
body.variant-poster .hero-logo-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}
body.variant-poster .hero-brand-logo {
  height: 86px;
  width: auto;
  max-height: 86px;
  max-width: min(260px, 58vw);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(127, 176, 255, 0.18));
}
body.variant-poster .hero-logo-tag {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--gold-hi);
  border: 1px solid rgba(242, 199, 106, 0.55);
  background: rgba(10, 16, 32, 0.6);
  padding: 4px 7px;
  border-radius: 3px;
}
body.variant-poster .po-kicker {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #b8c6e2;
  margin: 0 0 12px;
}
body.variant-poster .po-kicker::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--accent3), transparent);
}
body.variant-poster .po-hero-figure {
  position: relative;
  margin: 0;
  border: 1px solid rgba(242, 199, 106, 0.5);
  outline: 1px solid rgba(242, 199, 106, 0.16);
  outline-offset: 5px;
  padding: 0;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 1600 / 760;
  max-height: none;
  overflow: hidden;
  background: #060a16;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 232, 176, 0.08);
}
body.variant-poster .po-hero-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 12, 28, 0.28) 0%, transparent 22%, transparent 74%, rgba(7, 12, 28, 0.72) 100%),
    radial-gradient(120% 70% at 50% 120%, rgba(7, 12, 28, 0.55), transparent 60%);
}
body.variant-poster .po-hero-figure img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02) contrast(1.02);
}
body.variant-poster .po-hero h1,
body.variant-poster .po-title {
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: clamp(52px, 8.2vw, 118px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #ffe4a6;
  -webkit-text-stroke: 2px #6b4a12;
  text-shadow:
    0 5px 0 #5c3f10,
    0 8px 0 rgba(0, 0, 0, 0.35),
    0 18px 40px rgba(0, 0, 0, 0.6),
    0 0 52px rgba(127, 176, 255, 0.28);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  overflow-wrap: anywhere;
}
body.variant-poster .po-rule {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  gap: 7px;
  margin: 14px 0 14px;
}
body.variant-poster .po-rule span { height: 6px; }
body.variant-poster .po-rule span:nth-child(1) { background: linear-gradient(90deg, var(--gold-hi), var(--gold-mid) 55%, rgba(199, 156, 74, 0.15)); }
body.variant-poster .po-rule span:nth-child(2) { background: linear-gradient(90deg, var(--accent3), rgba(31, 79, 214, 0.25)); }
body.variant-poster .po-rule span:nth-child(3) { border: 2px solid rgba(242, 199, 106, 0.55); height: 6px; }
body.variant-poster .po-hero-grid { grid-template-columns: 1.5fr 0.5fr; gap: 24px; align-items: end; }
body.variant-poster .po-deck {
  font-size: 16.5px;
  line-height: 1.72;
  color: #c3cee5;
  max-width: 660px;
  margin: 0;
}
body.variant-poster .po-deck::first-letter { color: var(--gold-hi); }
body.variant-poster .po-hero-actions { justify-content: flex-end; gap: 10px; }
body.variant-poster .po-hero-actions .btn { min-height: 50px; }
body.variant-poster .po-arrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-hi);
  border-bottom: 1px solid rgba(242, 199, 106, 0.5);
  padding-bottom: 2px;
}
body.variant-poster .po-strip {
  margin-top: 24px;
  border-top: 2px solid rgba(242, 199, 106, 0.45);
  border-bottom: 1px solid var(--line-soft);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: #b9c5dd;
}
body.variant-poster .po-strip b { color: var(--gold-hi); }

/* ---------- Tombol emas 3D + tombol hantu bertepi emas ---------- */
body.variant-poster .btn {
  border-radius: 5px;
  font-family: var(--body);
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 12px;
}
body.variant-poster .btn-primary {
  background: linear-gradient(180deg, #ffe9b8 0%, #f4c96f 46%, #cf9f45 100%);
  color: var(--ink);
  border: 1px solid #8a6420;
  box-shadow: 0 4px 0 #7a5719, 0 12px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  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: rgba(12, 20, 40, 0.8);
  color: var(--gold-hi);
  border: 1px solid rgba(242, 199, 106, 0.55);
  box-shadow: inset 0 0 0 1px rgba(127, 176, 255, 0.08);
}
body.variant-poster .btn-ghost:hover { background: rgba(31, 79, 214, 0.18); color: #fff; }

/* ---------- Galeri enam bingkai ---------- */
body.variant-poster .sec-showcase {
  padding: 54px 0 46px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(9, 14, 30, 0.72), rgba(7, 11, 24, 0.2));
}
body.variant-poster .sec-head { margin: 0 0 24px; max-width: 780px; }
body.variant-poster .sec-head .kicker {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold-mid);
  margin: 0 0 10px;
}
body.variant-poster .sec-head h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.02;
  color: var(--text);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
body.variant-poster .sec-head h2::after {
  content: "";
  display: block;
  width: 74px;
  height: 3px;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--gold-hi), rgba(242, 199, 106, 0));
}
body.variant-poster .sec-head p { color: #b3bfd6; font-size: 14.5px; line-height: 1.7; max-width: 720px; }
body.variant-poster .h03-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
body.variant-poster .h03-tile {
  position: relative;
  margin: 0;
  border: 1px solid rgba(242, 199, 106, 0.42);
  padding: 8px;
  background: linear-gradient(160deg, rgba(16, 26, 50, 0.9), rgba(8, 13, 26, 0.9));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
body.variant-poster .h03-tile::before,
body.variant-poster .h03-tile::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gold-mid);
  pointer-events: none;
}
body.variant-poster .h03-tile::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
body.variant-poster .h03-tile::after { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
body.variant-poster .h03-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  filter: saturate(1.02);
}
body.variant-poster .h03-tile figcaption {
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-hi);
  padding: 9px 2px 3px;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
}

/* ---------- Bagian umum ---------- */
body.variant-poster .section { padding: 48px 0; border-bottom: 1px solid var(--line-soft); }
body.variant-poster .sec-head .kicker { color: var(--gold-mid); }
body.variant-poster h2 { color: var(--text); }
body.variant-poster .section-note { color: #93a1bb; font-size: 11px; }

/* ---------- Rute: tiga pilar gerbang ---------- */
body.variant-poster .sec-routes { background: linear-gradient(180deg, rgba(10, 16, 34, 0.6), rgba(7, 11, 24, 0.2)); }
body.variant-poster .variant-poster .route-grid,
body.variant-poster .route-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  border-top: 0;
}
body.variant-poster .route-card {
  position: relative;
  border: 1px solid rgba(242, 199, 106, 0.35);
  border-radius: 4px;
  background: linear-gradient(170deg, rgba(18, 30, 58, 0.9), rgba(9, 14, 28, 0.92));
  min-height: 230px;
  padding: 20px 20px 18px;
  border-right: 1px solid rgba(242, 199, 106, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 232, 176, 0.08);
  overflow: hidden;
}
body.variant-poster .route-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
}
body.variant-poster .route-card.primary {
  background: linear-gradient(165deg, rgba(31, 79, 214, 0.42), rgba(10, 16, 34, 0.95));
  border-color: rgba(255, 230, 176, 0.55);
}
body.variant-poster .route-card:hover { transform: translateY(-3px); border-color: var(--gold-hi); }
body.variant-poster .route-no { color: var(--gold-mid); font-size: 11px; letter-spacing: 0.2em; }
body.variant-poster .route-card h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 30px);
  text-transform: uppercase;
  color: var(--text);
  margin: 16px 0 8px;
  letter-spacing: -0.01em;
}
body.variant-poster .route-card p { color: #b0bcd4; font-size: 12.5px; line-height: 1.65; }
body.variant-poster .route-link {
  border-top: 1px solid var(--line-soft);
  color: var(--gold-hi);
  font-family: var(--body);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.12em;
}

/* ---------- Trust: papan bernomor ---------- */
body.variant-poster .trust-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
body.variant-poster .trust-list li {
  border: 1px solid var(--line-soft);
  border-left: 3px solid rgba(242, 199, 106, 0.55);
  background: rgba(12, 20, 40, 0.66);
  padding: 16px 16px 14px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
}
body.variant-poster .trust-list li span {
  font-family: var(--display);
  font-size: 22px;
  color: var(--gold-mid);
  line-height: 1;
}
body.variant-poster .trust-list li p { margin: 0; font-size: 13px; color: #c2cde2; line-height: 1.6; }

/* ---------- Fakta ---------- */
body.variant-poster .po-factgrid {
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid rgba(242, 199, 106, 0.45);
  border-left: 1px solid var(--line-soft);
}
body.variant-poster .po-factgrid div { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 16px; background: rgba(11, 18, 36, 0.55); }
body.variant-poster .po-factgrid span { color: var(--gold-mid); font-size: 10px; }
body.variant-poster .po-factgrid b { font-size: 15px; color: var(--text); text-transform: none; letter-spacing: 0; font-family: var(--body); font-weight: 700; line-height: 1.35; }
body.variant-poster .po-factgrid small { color: #94a2bd; font-size: 8.5px; letter-spacing: 0.12em; }

/* ---------- Istilah & catatan edisi ---------- */
body.variant-poster .terms-box { border: 1px solid var(--line-soft); background: rgba(10, 17, 34, 0.6); padding: 18px; }
body.variant-poster .terms-label {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-mid);
  margin: 0 0 8px;
}
body.variant-poster .chips span {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  border: 1px solid rgba(242, 199, 106, 0.3);
  background: rgba(18, 30, 58, 0.75);
  color: #d5ddeb;
  padding: 5px 9px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
body.variant-poster .edition-note {
  margin-top: 16px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
body.variant-poster .edition-note p { font-size: 12px; color: #a9b6cd; line-height: 1.7; margin: 0; }

/* ---------- Ringkasan ---------- */
body.variant-poster .po-summary { max-width: 980px; }
body.variant-poster .po-pull {
  font-family: var(--body);
  font-weight: 800;
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.45;
  text-transform: none;
  color: var(--text);
  border-left: 4px solid var(--gold-mid);
  padding-left: 18px;
  margin: 0 0 18px;
}
body.variant-poster .po-summary > p { color: #b0bcd4; font-size: 14.5px; line-height: 1.75; }
body.variant-poster .po-mini-facts { gap: 8px; }
body.variant-poster .po-mini-facts span { border: 1px solid var(--line-soft); background: rgba(11, 18, 36, 0.6); padding: 10px; }
body.variant-poster .po-mini-facts b { color: var(--gold-hi); font-family: var(--body); font-size: 13px; text-transform: none; letter-spacing: 0; }
body.variant-poster .po-mini-facts small { color: #93a1bb; }
body.variant-poster .sec-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
body.variant-poster .sec-links a { color: var(--gold-hi); font-size: 12px; text-decoration: none; border-bottom: 1px solid rgba(242, 199, 106, 0.4); }

/* ---------- FAQ ---------- */
body.variant-poster .po-faq { border-top: 2px solid rgba(242, 199, 106, 0.4); }
body.variant-poster .po-faq article { border-bottom: 1px solid var(--line-soft); padding: 16px 16px 16px 0; }
body.variant-poster .po-faq article:nth-child(odd) { border-right: 1px solid var(--line-soft); }
body.variant-poster .po-num { color: var(--gold-mid); font-size: 26px; }
body.variant-poster .po-faq h3 { font-family: var(--body); font-weight: 800; font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--text); }
body.variant-poster .po-faq p { color: #aab7cf; font-size: 12.5px; line-height: 1.7; }

/* ---------- Halaman info (h5/apk/login/…) ---------- */
body.variant-poster .variant-page-hero {
  padding: 40px 0 30px;
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(620px 280px at 82% 0%, rgba(31, 79, 214, 0.22), transparent 68%),
    linear-gradient(180deg, rgba(10, 16, 34, 0.7), rgba(7, 11, 24, 0.2));
}
body.variant-poster .variant-page-hero h1 {
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 74px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--gold-hi);
  -webkit-text-stroke: 0;
  text-shadow: 0 3px 0 rgba(60, 38, 8, 0.8), 0 10px 30px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}
body.variant-poster .variant-page-hero .deck { color: #bcc8de; font-size: 15.5px; line-height: 1.72; }
body.variant-poster .variant-page-hero .eyebrow,
body.variant-poster .variant-page-hero .kicker { color: var(--gold-mid); }
body.variant-poster .variant-prose { max-width: 900px; }
body.variant-poster .variant-prose h2 {
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 30px);
  text-transform: uppercase;
  color: var(--text);
  border-top: 2px solid rgba(242, 199, 106, 0.4);
  padding-top: 12px;
  margin-top: 30px;
  letter-spacing: -0.01em;
}
body.variant-poster .variant-prose p,
body.variant-poster .variant-prose li { color: #b0bcd4; font-size: 14px; line-height: 1.8; }
body.variant-poster .variant-prose li::marker { color: var(--gold-mid); }
body.variant-poster .po-steps { border-top: 2px solid rgba(242, 199, 106, 0.4); }
body.variant-poster .po-steps li { border-bottom: 1px solid var(--line-soft); }
body.variant-poster .po-steps li:nth-child(odd) { border-right: 1px solid var(--line-soft); }
body.variant-poster .po-steps li > span { color: var(--gold-mid); }
body.variant-poster .po-steps h3 { font-family: var(--body); font-weight: 800; font-size: 16px; letter-spacing: 0; }
body.variant-poster .po-steps p { color: #aab7cf; }
body.variant-poster .table-wrap { border-color: var(--line-soft); background: rgba(10, 17, 34, 0.6); }
body.variant-poster th { background: rgba(31, 79, 214, 0.28); color: var(--gold-hi); }
body.variant-poster td { color: #b6c2d8; border-color: var(--line-soft); }
body.variant-poster .callout { border-left-color: var(--gold-mid); background: rgba(16, 26, 50, 0.7); color: #b6c2d8; }
body.variant-poster .empty { border-color: rgba(242, 199, 106, 0.35); background: rgba(11, 18, 36, 0.6); }

/* ---------- Footer: tanda besar ---------- */
body.variant-poster .site-footer.po-footer { border-top: 1px solid rgba(242, 199, 106, 0.4); background: linear-gradient(180deg, rgba(7, 11, 24, 0.9), #05080f); }
body.variant-poster .po-footer-mark {
  font-family: var(--display);
  font-size: clamp(64px, 13vw, 168px);
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: transparent;
  background: linear-gradient(180deg, #ffe9b8, #c79c4a 70%, rgba(199, 156, 74, 0.25));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}
body.variant-poster .po-footer-row { border-top: 1px solid var(--line-soft); }
body.variant-poster .po-footer-row a { color: #b9c5dd; font-family: var(--body); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; }
body.variant-poster .po-footer-row a:hover { color: var(--gold-hi); }
body.variant-poster .po-footer-bottom { color: #8f9db8; font-size: 9.5px; }

/* ---------- Mobile-first: satu gambar besar, CTA terlihat, bilah tetap ---------- */
@media (max-width: 900px) {
  body.variant-poster .po-hero-grid { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  body.variant-poster .po-hero-actions { justify-content: flex-start; }
  body.variant-poster .po-factgrid { grid-template-columns: 1fr 1fr; }
  body.variant-poster .h03-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
    body.variant-poster .trust-list { grid-template-columns: 1fr; }
  body.variant-poster .route-grid { grid-template-columns: 1fr; }
  body.variant-poster .route-card { min-height: 0; border-right: 1px solid rgba(242, 199, 106, 0.35); }
}

@media (max-width: 700px) {
  body.variant-poster {
    font-size: 15px;
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
    background-attachment: scroll;
    background-size: 900px auto;
  }
  body.variant-poster .wrap { width: calc(100% - 32px); }
  body.variant-poster .po-navrow { min-height: 56px; }
  body.variant-poster .brand-logo { height: 40px; max-width: min(190px, 52vw); }
  body.variant-poster .po-hero { padding: 16px 0 0; }
  body.variant-poster .hero-logo-lockup { margin: 0 0 8px; gap: 8px; }
  body.variant-poster .hero-brand-logo { height: 58px; max-height: 58px; max-width: min(180px, 54vw); }
  body.variant-poster .hero-logo-tag { font-size: 8px; padding: 3px 5px; }
  body.variant-poster .po-kicker { font-size: 8.5px; letter-spacing: 0.14em; margin: 0 0 8px; }
  body.variant-poster .po-kicker::before { width: 14px; margin-right: 7px; }
  body.variant-poster .po-hero-figure {
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 4 / 3;
    max-height: 250px;
    outline-offset: 3px;
  }
  body.variant-poster .po-hero h1,
  body.variant-poster .po-title {
    margin: 12px 0 0;
    font-size: clamp(38px, 11.6vw, 52px);
    line-height: 0.88;
    text-shadow: 0 2px 0 rgba(60, 38, 8, 0.9), 0 8px 22px rgba(0, 0, 0, 0.55);
  }
  body.variant-poster .po-rule { margin: 12px 0 12px; gap: 5px; }
  body.variant-poster .po-rule span { height: 4px; }
  body.variant-poster .po-deck {
    font-size: 13.5px;
    line-height: 1.62;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Satu CTA utama per layar: bar tetap di bawah memegang kedua rute
     (Masuk H5 / Unduh APK) agar tidak ada tombol yang tertutup bilah. */
  body.variant-poster .po-hero-actions { display: none; }
  body.variant-poster .po-strip { display: none; }
  body.variant-poster .po-band { display: none; }
  body.variant-poster .section { padding: 34px 0; }
  body.variant-poster .sec-head h2 { font-size: clamp(22px, 6.4vw, 30px); }
  body.variant-poster .sec-head p { font-size: 13.5px; }
  body.variant-poster .h03-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.variant-poster .h03-tile { padding: 6px; }
  body.variant-poster .h03-tile img { aspect-ratio: 1 / 1; }
  body.variant-poster .h03-tile figcaption { font-size: 8.5px; padding: 7px 1px 2px; }
  body.variant-poster .po-pull { font-size: 17px; line-height: 1.5; padding-left: 12px; }
  body.variant-poster .po-factgrid { grid-template-columns: 1fr; }
  body.variant-poster .trust-list li { padding: 14px; }
  body.variant-poster .po-faq article { padding: 14px 10px 14px 0; }
  body.variant-poster .variant-page-hero { padding: 26px 0 22px; }
  body.variant-poster .variant-page-hero h1 { font-size: clamp(28px, 8.4vw, 40px); }
  body.variant-poster .variant-page-hero .deck { font-size: 13.5px; }
  body.variant-poster .variant-prose h2 { font-size: 20px; }
  body.variant-poster .variant-prose p,
  body.variant-poster .variant-prose li { font-size: 13.5px; line-height: 1.72; }
  body.variant-poster .po-footer-mark { font-size: clamp(52px, 17vw, 80px); }

  /* Bilah CTA tetap: dua tombol 50px, aman dari safe-area. */
  body.variant-poster .bottom-cta {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    gap: 8px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(9, 14, 28, 0.96), rgba(6, 9, 18, 0.99));
    border-top: 1px solid rgba(242, 199, 106, 0.55);
    box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.55);
  }
  body.variant-poster .bottom-cta .btn {
    flex: 1 1 0;
    min-height: 50px;
    font-size: 11.5px;
    letter-spacing: 0.08em;
  }
  body.variant-poster .bottom-cta .btn-primary { order: 1; }
  body.variant-poster .bottom-cta .btn-ghost { order: 2; }
}

@media (max-width: 380px) {
  body.variant-poster .po-hero h1,
  body.variant-poster .po-title { font-size: 34px; }
  body.variant-poster .bottom-cta .btn { font-size: 10.5px; padding: 0 8px; }
}

html { overflow-x: hidden; }
body { overflow-x: clip; }