/* ===========================================================================
   taruh777 — skin "pesta-senja"
   Reference-led skin for the Taruh777 landing page: purple dusk market, gold
   bunting, teal sea, coral sunset.  The shared poster template is only the
   substrate; hero composition, type scale, card shapes, CTA treatment and
   footer rhythm are re-cut here so the site reads as its own poster.
   Palette: senja #1b0c24, emas #f3d692, karang #be5e40, laut #2fa3a1.
   =========================================================================== */

:root{
  --dusk:#1b0c24;
  --dusk-2:#241132;
  --dusk-3:#301646;
  --gold:#f3d692;
  --gold-deep:#c99a45;
  --coral:#e0603f;
  --coral-deep:#8f2f45;
  --sea:#2fa3a1;
  --sand:#fff6e4;
  --hair:rgba(243,214,146,.30);
  --hair-soft:rgba(243,214,146,.14);
  --panel-ink:#d9c4e6;
}

/* ---------------------------------------------------------------- paper */
body.variant-poster{
  background:
    radial-gradient(1100px 620px at 88% -8%,rgba(243,214,146,.17),transparent 62%),
    radial-gradient(880px 560px at -6% 4%,rgba(190,94,64,.30),transparent 64%),
    radial-gradient(900px 700px at 50% 116%,rgba(47,163,161,.16),transparent 66%),
    linear-gradient(180deg,#1d0d27,#170a20 58%,#12071a);
  background-attachment:fixed;
  color:var(--sand);
}
body.variant-poster::before{
  opacity:.5;
  background-image:
    radial-gradient(circle at 20% 20%,rgba(243,214,146,.9) 0 1px,transparent 1.6px),
    radial-gradient(circle at 70% 60%,rgba(224,96,63,.8) 0 1.4px,transparent 1.8px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 46px);
  background-size:210px 210px,290px 290px,46px 46px,46px 46px;
}
body.variant-poster .wrap{width:min(1180px,calc(100% - 56px));margin-left:auto;margin-right:auto}
body.variant-poster ::selection{background:var(--coral);color:#1b0c24}

/* ---------------------------------------------------------------- type */
body.variant-poster h1,
body.variant-poster h2,
body.variant-poster h3,
body.variant-poster .btn{font-family:"Arial Black","Arial Bold",Impact,"Helvetica Neue",Arial,sans-serif}
body.variant-poster h2{
  color:var(--sand);letter-spacing:-.012em;text-transform:uppercase;
  text-shadow:0 3px 0 rgba(74,26,52,.55),0 0 28px rgba(243,214,146,.12);
}
body.variant-poster h3{letter-spacing:.005em}
body.variant-poster .kicker,
body.variant-poster .eyebrow{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--gold);letter-spacing:.24em;font-size:9.5px;
}
body.variant-poster a{color:var(--gold)}

/* ---------------------------------------------------------------- overlay head */
body.variant-poster .po-header{
  position:relative;z-index:60;
  background:linear-gradient(180deg,rgba(27,12,36,.98),rgba(27,12,36,.86));
  border-bottom:0;backdrop-filter:blur(8px);
}
body.variant-poster .po-navrow{min-height:72px;gap:22px}
body.variant-poster .po-brand{display:flex;align-items:center}
body.variant-poster .po-brand-logo{
  height:52px;width:auto;max-width:min(190px,44vw);object-fit:contain;
  border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 1px rgba(243,214,146,.35);
}
body.variant-poster .po-nav{gap:2px}
body.variant-poster .po-nav a{
  border:0;color:#d8c3e6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;letter-spacing:.16em;padding:9px 8px;text-transform:uppercase;text-decoration:none;
  border-bottom:2px solid transparent;
}
body.variant-poster .po-nav a:hover,
body.variant-poster .po-nav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
body.variant-poster .po-actions .btn{border-radius:12px}
body.variant-poster .po-band{
  background:linear-gradient(90deg,var(--gold),#f6e3ae 55%,var(--gold));
  color:#2a0f22;border-top:1px solid rgba(90,40,40,.35);
}
body.variant-poster .po-band .wrap{padding:6px 0;font-size:8.5px;letter-spacing:.16em;font-weight:700}

@media (min-width:901px){
  body.variant-poster .po-nav{display:flex;flex-wrap:wrap}
}

/* ---------------------------------------------------------------- buttons */
body.variant-poster .btn{
  border-radius:14px;min-height:52px;letter-spacing:.03em;
  border-width:2px;font-size:12px;
}
body.variant-poster .btn-primary{
  background:linear-gradient(180deg,#fff0c6 0%,var(--gold) 42%,#e5bd70 100%);
  color:#341123;border-color:#a9793a;
  box-shadow:0 6px 0 #8a5a2a,0 14px 30px rgba(243,214,146,.22);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
body.variant-poster .btn-primary:hover{filter:brightness(1.05);transform:translateY(-2px)}
body.variant-poster .btn-ghost{
  background:linear-gradient(180deg,rgba(224,96,63,.22),rgba(48,22,70,.9));
  color:#ffe9c9;border-color:rgba(243,214,146,.55);
  box-shadow:0 6px 0 rgba(60,20,40,.55),inset 0 0 0 1px rgba(255,255,255,.06);
}
body.variant-poster .btn-ghost:hover{border-color:var(--gold);transform:translateY(-2px)}
body.variant-poster .btn-sm{min-height:42px;font-size:10px;border-radius:11px}
body.variant-poster .btn-lg{min-height:56px;font-size:13px}

/* ---------------------------------------------------------------- policy strip */
body.variant-poster .policy-strip{
  background:linear-gradient(90deg,rgba(143,47,69,.55),rgba(27,12,36,.85));
  border-bottom:1px solid var(--hair);
  font-size:9.5px;letter-spacing:.12em;
}
body.variant-poster .policy-strip-inner{padding:8px 0;gap:8px 10px;flex-wrap:wrap}
body.variant-poster .policy-link{white-space:nowrap}
body.variant-poster .policy-badge{white-space:nowrap}
body.variant-poster .policy-badge{color:var(--gold);font-weight:800}
body.variant-poster .policy-tag{border-color:var(--hair);color:#ffeccd;border-radius:4px}
body.variant-poster .policy-link{
  border-color:var(--hair);border-radius:999px;color:#ffeccd;
  padding:4px 10px;min-height:26px;background:rgba(48,22,70,.55);
}
body.variant-poster .policy-link:hover{background:rgba(243,214,146,.18);color:#fff}
body.variant-poster .policy-note{color:#c5aed6}

/* ---------------------------------------------------------------- hero */
body.variant-poster .av-hero{
  min-height:700px;display:flex;align-items:center;
  padding:78px 0 62px;border-bottom:3px solid var(--gold);
  background:
    radial-gradient(820px 520px at 78% 8%,rgba(243,214,146,.20),transparent 62%),
    radial-gradient(680px 460px at 6% 92%,rgba(224,96,63,.24),transparent 66%),
    linear-gradient(165deg,#2a1035 0%,#1e0d28 58%,#170a20 100%);
  overflow:hidden;
}
body.variant-poster .av-hero-bg.av-hero-media{
  left:auto;right:0;top:0;bottom:0;width:49%;height:100%;
  opacity:1;filter:saturate(1.02) contrast(1.02);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%);
  box-shadow:inset 3px 0 0 rgba(243,214,146,.55);
}
body.variant-poster .av-hero-bg.av-hero-media img{object-position:50% 32%;filter:saturate(1.06) brightness(1.04)}
body.variant-poster .av-hero-bg.av-hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(27,12,36,.32),transparent 34%),
             linear-gradient(0deg,rgba(23,10,32,.55),transparent 40%);
}
body.variant-poster .av-hero-inner{max-width:1180px;margin:0 auto;position:relative;z-index:2}
body.variant-poster .av-hero-inner>*{max-width:620px}
body.variant-poster .hero-logo-lockup{gap:14px;margin-bottom:18px;align-items:center}
body.variant-poster .hero-brand-logo{
  height:84px;width:auto;max-height:84px;max-width:min(150px,40vw);object-fit:contain;
  background:rgba(240,225,255,.06);border:2px solid rgba(243,214,146,.55);
  border-radius:20px;padding:8px;box-shadow:0 12px 26px rgba(0,0,0,.4),0 0 0 6px rgba(243,214,146,.07);
}
body.variant-poster .hero-logo-tag{
  border-color:var(--hair);color:#ffe9c9;background:rgba(48,22,70,.6);
  border-radius:999px;padding:5px 10px;letter-spacing:.22em;
}
body.variant-poster .av-eyebrow{
  color:#dcc6ea;letter-spacing:.2em;font-size:9.5px;margin:0 0 12px;
}
body.variant-poster .av-eyebrow span{color:var(--gold)}
body.variant-poster .av-hero h1{
  font-size:clamp(50px,7.3vw,108px);line-height:.86;letter-spacing:-.018em;
  color:var(--sand);
  text-shadow:0 5px 0 #7a2c46,0 9px 0 rgba(27,12,36,.55),0 0 44px rgba(243,214,146,.28);
  overflow-wrap:anywhere;margin:0 0 16px;text-transform:uppercase;
}
body.variant-poster .av-deck{color:#f0ddc9;font-size:16px;line-height:1.62;max-width:560px}
body.variant-poster .av-chips{margin-top:14px}
body.variant-poster .av-hero-actions{margin-top:24px;gap:12px}
body.variant-poster .av-textlink{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:#e7d2f2;text-decoration:none;border-bottom:1px solid var(--hair);
  padding-bottom:5px;align-self:center;
}
body.variant-poster .av-hero-stats{
  margin-top:30px;border:1px solid var(--hair);border-top:3px solid var(--gold);
  background:linear-gradient(180deg,rgba(48,22,70,.86),rgba(27,12,36,.72));
  border-radius:14px;overflow:hidden;
}
body.variant-poster .av-hero-stats div{padding:12px 14px;border-right:1px solid var(--hair-soft)}
body.variant-poster .av-hero-stats dt{color:#bda6cf;letter-spacing:.14em}
body.variant-poster .av-hero-stats dd{color:var(--gold);font-size:14px}
body.variant-poster .chips span{
  border-color:var(--hair-soft);background:rgba(48,22,70,.62);color:#e4d1ee;
  border-radius:999px;padding:5px 9px;
}

/* ---------------------------------------------------------------- sections */
body.variant-poster .section{padding:64px 0;border-bottom:1px solid var(--hair-soft)}
body.variant-poster .sec-head{max-width:820px}
body.variant-poster .sec-head h2{font-size:clamp(28px,4vw,50px);line-height:.94;margin-bottom:12px}
body.variant-poster .sec-head p{color:#cdb6da;font-size:14px}
body.variant-poster .section-note{color:#b9a1cb}
body.variant-poster .section-note a{
  font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:3px;
}

/* summary */
body.variant-poster .po-summary{max-width:940px}
body.variant-poster .po-pull{
  border-left:10px solid var(--coral);padding-left:20px;color:var(--sand);
  font-size:clamp(19px,2.5vw,30px);line-height:1.24;
  text-shadow:0 3px 0 rgba(74,26,52,.45);margin-bottom:20px;
}
body.variant-poster .po-summary>p{color:#d6c4e4;font-size:14.5px;max-width:780px}
body.variant-poster .po-mini-facts{gap:8px;margin-top:22px}
body.variant-poster .po-mini-facts span{
  border:1px solid var(--hair-soft);border-radius:12px;padding:11px 12px;
  background:linear-gradient(180deg,rgba(48,22,70,.8),rgba(27,12,36,.5));
}
body.variant-poster .po-mini-facts b{color:var(--gold);font-size:13px;overflow-wrap:anywhere;line-height:1.3}
body.variant-poster .po-mini-facts small{color:#b9a1cb;font-size:8px;letter-spacing:.12em}

/* showcase / gallery */
body.variant-poster .sec-showcase{background:
  radial-gradient(700px 380px at 50% 0%,rgba(224,96,63,.14),transparent 62%)}
body.variant-poster .h03-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:stretch}
body.variant-poster .h03-tile{
  margin:0;padding:9px 9px 10px;border-radius:18px;
  background:linear-gradient(180deg,#3a1a53,#261134);
  border:1px solid rgba(243,214,146,.35);
  box-shadow:0 14px 30px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.04);
  display:flex;flex-direction:column;gap:9px;
}
body.variant-poster .h03-tile img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;
  border:1px solid rgba(0,0,0,.35);filter:saturate(1.03) contrast(1.02);
}
body.variant-poster .h03-tile:nth-child(1) img{object-position:50% 6%}
body.variant-poster .h03-tile:nth-child(5) img{object-position:50% 42%}
body.variant-poster .h03-tile figcaption{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);line-height:1.5;margin-top:auto;
}
body.variant-poster .h03-band{
  margin:24px 0 0;border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);
  background:#1a0a22;
}
body.variant-poster .h03-band img{width:100%;height:auto;display:block}
body.variant-poster .h03-band figcaption{
  color:#b9a1cb;font-size:11px;text-align:center;padding:10px 12px;line-height:1.5;
}

/* routes */
body.variant-poster .route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
body.variant-poster .route-card{
  min-height:230px;border:0;border-right:1px solid var(--hair-soft);border-radius:0;
  padding:22px 20px 22px 0;background:none;position:relative;
}
body.variant-poster .route-card:last-child{border-right:0;padding-right:0}
body.variant-poster .route-card.primary{
  background:linear-gradient(160deg,rgba(224,96,63,.20),rgba(48,22,70,.45));
  padding-left:20px;border-radius:18px 0 0 18px;
}
body.variant-poster .route-no{
  font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.2em;color:var(--gold);
  border:1px solid var(--hair);border-radius:999px;padding:4px 9px;align-self:flex-start;
}
body.variant-poster .route-card h3{
  font-size:clamp(26px,3.4vw,42px);line-height:.94;color:var(--sand);margin:18px 0 10px;
  text-shadow:0 3px 0 rgba(74,26,52,.5);
}
body.variant-poster .route-card.primary h3{color:#fff0c9}
body.variant-poster .route-card p{color:#cdb6da;font-size:13px}
body.variant-poster .route-link{
  font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);border-top:1px solid var(--hair-soft);padding-top:10px;margin-top:14px;
}

/* facts */
body.variant-poster .po-factgrid{
  grid-template-columns:repeat(4,minmax(0,1fr));border-top:3px solid var(--gold);
  border-left:1px solid var(--hair-soft);border-radius:0 0 16px 16px;overflow:hidden;
}
body.variant-poster .po-factgrid>div{
  padding:16px 14px;background:linear-gradient(180deg,rgba(48,22,70,.72),rgba(27,12,36,.42));
  border-right:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);
}
body.variant-poster .po-factgrid span{color:var(--coral);font-size:10px}
body.variant-poster .po-factgrid b{color:var(--sand);font-size:15px;line-height:1.25}
body.variant-poster .po-factgrid small{color:#b9a1cb}

/* activities */
body.variant-poster .card-grid{gap:16px}
body.variant-poster .promo-card,
body.variant-poster .card{
  border-radius:18px;border:1px solid var(--hair-soft);padding:18px;
  background:linear-gradient(180deg,rgba(48,22,70,.78),rgba(27,12,36,.55));
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}
body.variant-poster .promo-card .label,
body.variant-poster .card .label{
  font-family:ui-monospace,monospace;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 8px;
}
body.variant-poster .promo-card h3{color:var(--sand);font-size:17px;line-height:1.2;margin:0 0 8px}
body.variant-poster .promo-card p{color:#c8b1d8;font-size:12px;line-height:1.6}
body.variant-poster .promo-card img{border-radius:12px;margin-bottom:10px}

/* steps + terms */
body.variant-poster .po-steps{gap:0;border-top:1px solid var(--hair-soft)}
body.variant-poster .po-steps li{
  border-bottom:1px solid var(--hair-soft);padding:18px 0;display:grid;
  grid-template-columns:64px 1fr;gap:16px;align-items:start;
}
body.variant-poster .po-steps li>span{
  font-family:"Arial Black",Arial,sans-serif;font-size:26px;color:var(--coral);line-height:1;
}
body.variant-poster .po-steps h3{color:var(--sand);font-size:16px;margin:0 0 6px}
body.variant-poster .po-steps p{color:#c8b1d8;font-size:13px;margin:0}
body.variant-poster .terms-box{
  border:1px dashed var(--hair);border-radius:16px;background:rgba(48,22,70,.42);
}
body.variant-poster .terms-label{
  font-family:ui-monospace,monospace;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:14px 0 8px;
}
body.variant-poster .edition-note{border-left:2px solid var(--coral);padding-left:12px;margin-top:14px}
body.variant-poster .edition-note p{color:#bda6cf;font-size:12px}

/* faq */
body.variant-poster .po-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
body.variant-poster .po-faq article{
  border:1px solid var(--hair-soft);border-radius:16px;padding:16px 16px 14px;
  background:linear-gradient(180deg,rgba(48,22,70,.62),rgba(27,12,36,.4));
  display:grid;grid-template-columns:34px 1fr;gap:10px;
}
body.variant-poster .po-faq .po-num{
  font-family:ui-monospace,monospace;font-size:11px;color:var(--coral);letter-spacing:.08em;
}
body.variant-poster .po-faq h3{color:var(--sand);font-size:15px;margin:0 0 6px;line-height:1.25}
body.variant-poster .po-faq p{color:#c8b1d8;font-size:12.5px;margin:0;line-height:1.6}

/* ---------------------------------------------------------------- inner pages */
body.variant-poster .page-hero{
  padding:64px 0 40px;text-align:center;border-bottom:2px solid var(--gold);
  background:
    radial-gradient(720px 420px at 88% -20%,rgba(243,214,146,.20),transparent 62%),
    radial-gradient(640px 380px at 0% 120%,rgba(190,94,64,.26),transparent 66%),
    linear-gradient(160deg,#2a1035,#1b0c24 72%);
}
body.variant-poster .page-hero .wrap{position:relative}
body.variant-poster .page-hero h1{
  margin:0 auto;font-size:clamp(34px,5.2vw,64px);line-height:.92;color:var(--sand);
  text-shadow:0 4px 0 #7a2c46,0 8px 0 rgba(27,12,36,.5),0 0 40px rgba(243,214,146,.2);
  max-width:900px;overflow-wrap:anywhere;
}
body.variant-poster .page-hero .deck{max-width:760px;color:#ecd9c4;font-size:15px;margin:16px auto 0}
body.variant-poster .page-hero .hero-actions{margin-top:20px;gap:10px}
body.variant-poster .prose{max-width:840px;margin-left:auto;margin-right:auto}
body.variant-poster .prose h2{
  font-size:clamp(21px,2.4vw,30px);margin:38px 0 12px;color:var(--gold);
  border-top:1px solid var(--hair-soft);padding-top:18px;
}
body.variant-poster .prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
body.variant-poster .prose p,
body.variant-poster .prose li{color:#d6c4e4;font-size:14.5px;line-height:1.72}
body.variant-poster .prose ul{padding-left:18px}
body.variant-poster .prose li{margin-bottom:6px}
body.variant-poster .table-wrap{border:1px solid var(--hair-soft);border-radius:14px;overflow:hidden;margin:18px 0}
body.variant-poster table{border-collapse:collapse;width:100%;font-size:13px}
body.variant-poster th{
  text-align:left;font-family:ui-monospace,monospace;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);background:rgba(48,22,70,.8);padding:10px 12px;
}
body.variant-poster td{color:#d6c4e4;padding:10px 12px;border-top:1px solid var(--hair-soft);vertical-align:top}
body.variant-poster .callout{border-radius:0 14px 14px 0;border-left:4px solid var(--coral);color:#e7d5f0}
body.variant-poster .empty{
  border:1px dashed var(--hair);border-radius:18px;padding:26px;text-align:center;
  background:rgba(48,22,70,.35);
}
body.variant-poster .empty h2{font-size:22px}
body.variant-poster .empty p{color:#c8b1d8;max-width:560px;margin:0 auto 14px}
body.variant-poster .split{display:grid;grid-template-columns:1.35fr .65fr;gap:32px;align-items:start}
body.variant-poster .sec-head.left{text-align:left;margin-left:0}
body.variant-poster .page-hero .hero-actions{justify-content:center}
body.variant-poster .aside .card p{color:#cdb6da;font-size:13px}
body.variant-poster .aside .card+.card{margin-top:14px}

/* ---------------------------------------------------------------- footer */
body.variant-poster .po-footer{
  background:linear-gradient(180deg,#160a1e,#0f0616);
  border-top:3px solid var(--gold);padding:44px 0 26px;
}
body.variant-poster .po-footer-mark{
  font-size:clamp(44px,9vw,112px);line-height:.82;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:2px rgba(243,214,146,.55);
  font-family:"Arial Black",Arial,sans-serif;text-transform:uppercase;margin-bottom:22px;
}
body.variant-poster .po-footer-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);
  padding:18px 0;margin-bottom:18px;
}
body.variant-poster .po-footer-cta p{color:#e2cdee;font-size:13px;max-width:560px;margin:0}
body.variant-poster .po-footer-cta div{display:flex;gap:10px;flex-wrap:wrap}
body.variant-poster .po-footer-row{
  display:flex;flex-wrap:wrap;gap:6px 18px;font-family:ui-monospace,monospace;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
}
body.variant-poster .po-footer-row a{color:#d3bde2;text-decoration:none;border-bottom:1px solid transparent;padding:4px 0}
body.variant-poster .po-footer-row a:hover{color:var(--gold);border-bottom-color:var(--gold)}
body.variant-poster .po-footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
  color:#a58fb6;font-size:10px;margin-top:20px;border-top:1px solid var(--hair-soft);padding-top:14px;
}
body.variant-poster .age{border:1px solid var(--hair);border-radius:5px;padding:1px 5px;margin-right:6px;color:var(--gold)}

/* ---------------------------------------------------------------- bottom bar */
body.variant-poster .bottom-cta{display:none}

/* ---------------------------------------------------------------- focus */
body.variant-poster a:focus-visible,
body.variant-poster button:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:8px;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  body.variant-poster .h03-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.variant-poster .av-hero{min-height:0;padding:56px 0 48px}
  body.variant-poster .av-hero-bg.av-hero-media{width:46%}
  body.variant-poster .av-hero-inner>*{max-width:540px}
}
@media (max-width:900px){
  body.variant-poster .wrap{width:calc(100% - 36px)}
  body.variant-poster .po-navrow{min-height:62px;gap:12px;flex-wrap:wrap;padding:8px 0}
  body.variant-poster .po-nav{
    display:none;position:absolute;left:0;right:0;top:100%;margin:0;width:auto;
    flex-direction:column;gap:0;padding:6px 18px 14px;z-index:70;
    background:linear-gradient(180deg,rgba(36,17,50,.99),rgba(27,12,36,.99));
    border-top:1px solid var(--hair-soft);border-bottom:2px solid var(--gold);
    box-shadow:0 18px 30px rgba(0,0,0,.45);max-height:70vh;overflow:auto;
  }
  body.variant-poster .po-nav.is-open{display:flex}
  body.variant-poster .po-nav a{
    width:100%;padding:13px 0;font-size:10px;letter-spacing:.18em;
    border-bottom:1px solid var(--hair-soft);
  }
  body.variant-poster .po-nav a:last-child{border-bottom:0}
  body.variant-poster .po-brand-logo{height:44px}
  body.variant-poster .split{grid-template-columns:1fr;gap:22px}
  body.variant-poster .po-faq{grid-template-columns:1fr}
  body.variant-poster .route-grid{grid-template-columns:1fr}
  body.variant-poster .route-card{border-right:0;border-bottom:1px solid var(--hair-soft);padding:18px 0;min-height:0}
  body.variant-poster .route-card.primary{padding-left:16px;border-radius:16px}
  body.variant-poster .po-factgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  body.variant-poster{font-size:15px;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  body.variant-poster .wrap{width:calc(100% - 28px)}
  body.variant-poster .po-navrow{padding:7px 0 0}
  body.variant-poster .po-band .wrap{font-size:8px;letter-spacing:.1em}
  body.variant-poster .policy-strip{font-size:8.5px}
  body.variant-poster .policy-strip-inner{gap:5px 7px;padding:6px 0}
  body.variant-poster .policy-note{display:none}
  body.variant-poster .policy-strip-inner{gap:5px 6px}
  body.variant-poster .policy-link{padding:3px 8px;min-height:24px;font-size:8px;white-space:nowrap}
  body.variant-poster .policy-tag{font-size:8px;padding:2px 5px}
  body.variant-poster .av-hero{
    display:block;padding:0 0 34px;min-height:0;
    background:linear-gradient(180deg,#2a1035,#1b0c24 62%);
  }
  body.variant-poster .av-hero-bg.av-hero-media{
    position:relative;inset:auto;left:0;right:0;top:0;width:100%;height:clamp(250px,58vw,330px);
    mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
    box-shadow:none;margin-bottom:-26px;
  }
  body.variant-poster .av-hero-bg.av-hero-media img{object-position:50% 30%}
  body.variant-poster .av-hero-bg.av-hero-media::after{
    background:linear-gradient(180deg,transparent 40%,rgba(27,12,36,.85) 100%);
  }
  body.variant-poster .av-hero-inner{max-width:100%;margin:0 auto;padding:0}
  body.variant-poster .av-hero-inner>*{max-width:100%}
  body.variant-poster .hero-brand-logo{
    height:72px;max-height:72px;max-width:84px;padding:6px;border-radius:16px;
  }
  body.variant-poster .hero-logo-lockup{margin:0 0 10px;gap:10px}
  body.variant-poster .av-hero h1{
    font-size:clamp(38px,11.6vw,54px);line-height:.9;letter-spacing:-.015em;margin-bottom:12px;
    text-shadow:0 3px 0 #7a2c46,0 6px 0 rgba(27,12,36,.5);
  }
  body.variant-poster .av-deck{font-size:14px;line-height:1.58}
  body.variant-poster .av-hero-actions{margin-top:18px;gap:9px;flex-direction:column;align-items:stretch}
  body.variant-poster .av-hero-actions .btn{width:100%;min-height:50px}
  body.variant-poster .av-textlink{text-align:center;margin-top:4px}
  body.variant-poster .av-hero-stats{grid-template-columns:1fr;margin-top:20px}
  body.variant-poster .av-hero-stats div{border-right:0;border-bottom:1px solid var(--hair-soft)}
  body.variant-poster .av-hero-stats div:last-child{border-bottom:0}
  body.variant-poster .section{padding:38px 0}
  body.variant-poster .sec-head h2{font-size:clamp(24px,8vw,34px)}
  body.variant-poster .po-pull{font-size:20px;border-left:7px solid var(--coral);padding-left:14px}
  body.variant-poster .h03-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.variant-poster .h03-tile{padding:7px;border-radius:14px}
  body.variant-poster .h03-tile figcaption{font-size:7.5px;letter-spacing:.1em}
  body.variant-poster .h03-tile:nth-child(5){grid-column:span 2}
  body.variant-poster .h03-tile:nth-child(5) img{aspect-ratio:16/9}
  body.variant-poster .po-factgrid{grid-template-columns:1fr}
  body.variant-poster .po-mini-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.variant-poster .page-hero{padding:36px 0 26px}
  body.variant-poster .page-hero .eyebrow{font-size:8px;letter-spacing:.14em;line-height:1.6}
  body.variant-poster .prose h2{font-size:20px;margin-top:30px}
  body.variant-poster .prose p,body.variant-poster .prose li{font-size:14px;overflow-wrap:anywhere}
  body.variant-poster td,body.variant-poster th{overflow-wrap:anywhere}
  body.variant-poster .po-footer-mark{font-size:clamp(38px,13vw,64px);-webkit-text-stroke:1.5px rgba(243,214,146,.5)}
  body.variant-poster .po-footer-cta{flex-direction:column;align-items:stretch}
  body.variant-poster .po-footer-cta div{flex-direction:column}
  body.variant-poster .po-footer-cta .btn{width:100%}

  /* fixed bottom bar: two 50px targets, label "Masuk H5" / "Unduh APK" */
  body[class*="variant-"] .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(27,12,36,.96),rgba(15,6,22,.99));
    border-top:2px solid var(--gold);backdrop-filter:blur(6px);
  }
  body[class*="variant-"] .bottom-cta .btn{
    flex:1;min-height:50px;font-size:11px;letter-spacing:.04em;border-radius:13px;
  }
  body[class*="variant-"] .bottom-cta .btn-primary{
    box-shadow:0 4px 0 #8a5a2a,0 0 20px rgba(243,214,146,.25);
  }
  body[class*="variant-"] .bottom-cta .btn-ghost{box-shadow:0 4px 0 rgba(60,20,40,.6)}
}
@media (max-width:380px){
  body.variant-poster .wrap{width:calc(100% - 22px)}
  body.variant-poster .av-hero h1{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  body.variant-poster *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}