/* ==========================================================================
   rpvip4 · "candy-resmi" skin  (reference-led, appfirst / full-bleed hero)

   Bahasa visual diambil dari poster milik rpvip4 sendiri (rp4base.com):
   langit pastel, roket permen, pita krim, dan lencana sayap.  Permennya
   dipakai sebagai sistem: krim sebagai latar, pink sebagai aksi, emas sebagai
   penanda "resmi", biru langit sebagai pendingin.

   Perbedaan yang disengaja dari situs appfirst lain di portofolio ini:
   hero full-bleed dengan artwork di kanan + gradien krim untuk teks, header
   putih lengket dengan garis pink (bukan dock), kartu radius 24 dengan
   bayangan lembut, tombol pil 3D bergaya permen, dan footer krim dengan
   wordmark gradien.

   Tidak ada copy referensi, tidak ada logo/nama brand lain, tidak ada nominal
   promo, tidak ada QR.  Semua artwork milik rpvip4 dan sudah disanitasi
   (lihat brand/artwork_manifest.json).
   ========================================================================== */

:root{
  --c-cream:#fff8f4;
  --c-cream-2:#fff0f7;
  --c-white:#ffffff;
  --c-ink:#3a2436;
  --c-ink-soft:#5f4557;
  --c-muted:#7b5f70;
  --c-pink:#ff5b9e;
  --c-pink-deep:#e23e83;
  --c-pink-dark:#c92a6b;
  --c-pink-soft:#ffd9e8;
  --c-gold:#ffb02e;
  --c-gold-deep:#e58d10;
  --c-sky:#bfe9ff;
  --c-line:rgba(226,62,131,.18);
  --c-line-soft:rgba(226,62,131,.10);
  --c-shadow:0 18px 40px rgba(226,62,131,.14);
  --c-shadow-sm:0 8px 20px rgba(226,62,131,.10);
  --c-pill:linear-gradient(180deg,#d21f68 0%,#b3165a 48%,#870e43 100%);
  --c-pill-edge:#7a0b3c;
  --c-pill-bevel:#74093a;
  --c-gold-grad:linear-gradient(180deg,#ffd77a 0%,#ffb02e 55%,#e58d10 100%);
}

html{background:#fff8f4}
body.variant-appfirst{
  background:
    radial-gradient(900px 420px at 6% -8%, #ffe4f1 0%, rgba(255,228,241,0) 60%),
    radial-gradient(820px 420px at 98% 4%, #ddf2ff 0%, rgba(221,242,255,0) 58%),
    radial-gradient(700px 500px at 50% 108%, #ffe9f4 0%, rgba(255,233,244,0) 62%),
    linear-gradient(180deg,#fffaf7 0%,#fff6fb 46%,#fff9f5 100%);
  background-attachment:fixed;
  color:var(--c-ink);
  padding-bottom:calc(92px + env(safe-area-inset-bottom));
  overflow-x:clip;
  font-size:16px;
}
/* Ganti pola konfeti gelap dengan bintik gula pastel. */
body.variant-appfirst::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,91,158,.16) 0 1.4px, transparent 2px),
    radial-gradient(circle at 72% 58%, rgba(255,176,46,.14) 0 1.4px, transparent 2px),
    radial-gradient(circle at 44% 84%, rgba(126,200,255,.16) 0 1.4px, transparent 2px);
  background-size:240px 240px,300px 300px,260px 260px;
}
body.variant-appfirst>*{position:relative;z-index:1}
body.variant-appfirst .wrap{width:min(1140px,100% - 36px)}
::selection{background:var(--c-pink);color:#fff}

/* ---------- tipografi ---------- */
body.variant-appfirst[class*="type-"] h1,
body.variant-appfirst[class*="type-"] h2,
body.variant-appfirst[class*="type-"] h3,
body.variant-appfirst h1,
body.variant-appfirst h2,
body.variant-appfirst h3{
  font-family:var(--display);
  text-transform:none;
  letter-spacing:-.015em;
  color:var(--c-ink);
  text-shadow:none;
  font-weight:900;
}
body.variant-appfirst h1{line-height:1.02}
body.variant-appfirst h2{font-size:clamp(25px,3vw,38px);line-height:1.12;margin:0 0 10px}
body.variant-appfirst h3{font-size:17px;line-height:1.3}
body.variant-appfirst p{color:var(--c-ink-soft)}
body.variant-appfirst .kicker,
body.variant-appfirst .sec-head .kicker{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-pink-deep);font-weight:700;margin:0 0 10px;
}
body.variant-appfirst a{color:var(--c-pink-deep);text-decoration-color:var(--c-pink-soft);text-underline-offset:3px}
body.variant-appfirst a:hover{color:var(--c-pink-dark)}

/* ---------- strip kebijakan ---------- */
body.variant-appfirst .policy-strip{
  background:linear-gradient(90deg,#ff7db5,#ff5b9e 46%,#ff8a5c);
  border-bottom:0;color:#fff;
  font-size:10px;letter-spacing:.05em;
}
body.variant-appfirst .policy-strip-inner{gap:8px;padding:8px 0}
body.variant-appfirst .policy-badge{color:#fff;font-weight:800}
body.variant-appfirst .policy-tag{
  border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:2px 8px;
  color:#fff;font-weight:700;background:rgba(255,255,255,.14);
}
body.variant-appfirst .policy-link{
  color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:999px;
  padding:4px 10px;background:rgba(255,255,255,.12);font-weight:700;
}
body.variant-appfirst .policy-link:hover{background:#fff;color:var(--c-pink-deep)}
body.variant-appfirst .policy-note{color:rgba(255,255,255,.86)}

/* ---------- tombol permen ---------- */
body.variant-appfirst .btn{
  font-family:var(--display);font-size:14px;font-weight:800;letter-spacing:.01em;
  text-transform:none;border-radius:999px;min-height:54px;padding:0 26px;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
body.variant-appfirst .btn-primary{
  background:var(--c-pill);color:#fff;border:2px solid #7a0b3c;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.20),0 0 0 1px rgba(255,158,196,.40),
             0 6px 0 #74093a,0 16px 30px rgba(178,22,90,.30);
  text-shadow:0 1px 0 rgba(0,0,0,.28);
}
body.variant-appfirst .btn-ghost{
  background:#fff;color:var(--c-pink-deep);border:2px solid var(--c-pink-soft);
  box-shadow:0 6px 0 #ffe3ef,0 12px 24px rgba(226,62,131,.10);
}
body.variant-appfirst .btn:hover{transform:translateY(-2px);filter:brightness(1.03)}
body.variant-appfirst .btn:active{transform:translateY(2px);box-shadow:0 2px 0 #74093a}
body.variant-appfirst .btn-sm{min-height:44px;padding:0 18px;font-size:12px}
body.variant-appfirst .btn-lg{min-height:56px}

/* ---------- header ---------- */
body.variant-appfirst .site-header.mi-header{
  position:sticky;top:0;z-index:70;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid var(--c-pink-soft);
  box-shadow:0 10px 26px rgba(226,62,131,.10);
}
body.variant-appfirst .mi-row{min-height:66px;gap:16px}
body.variant-appfirst .mi-brand .brand-logo{height:56px;width:auto;max-width:200px;object-fit:contain}
body.variant-appfirst .mi-nav{margin-left:auto;gap:14px}
body.variant-appfirst .mi-nav a{
  font-family:var(--body);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--c-ink-soft);font-weight:700;border:0;padding:6px 0;
}
body.variant-appfirst .mi-nav a:hover,
body.variant-appfirst .mi-nav a[aria-current="page"]{color:var(--c-pink-deep);border-bottom:2px solid var(--c-pink)}
body.variant-appfirst .mi-actions{gap:8px}
body.variant-appfirst .mi-cta{
  font-family:var(--display);font-size:12px;font-weight:800;color:#fff;
  background:var(--c-pill);border:2px solid #7a0b3c;border-radius:999px;
  padding:10px 16px;box-shadow:0 4px 0 #74093a;text-decoration:none;
}
body.variant-appfirst .menu-btn{
  border:1px solid var(--c-pink-soft);background:#fff;color:var(--c-pink-deep);
  border-radius:999px;height:40px;padding:0 12px;font-family:var(--display);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:800;
}

/* ---------- hero full-bleed + artwork kanan ---------- */
body.variant-appfirst .av-hero{
  position:relative;overflow:hidden;min-height:600px;display:flex;align-items:center;
  padding:44px 0 52px;border-bottom:0;
  background:
    radial-gradient(720px 420px at 86% 22%, rgba(255,214,234,.62) 0%, rgba(255,214,234,0) 62%),
    radial-gradient(620px 380px at 96% 88%, rgba(198,234,255,.42) 0%, rgba(198,234,255,0) 60%),
    linear-gradient(180deg,#fff4fa 0%,#fff8f4 78%);
}
body.variant-appfirst .av-hero-bg{
  position:absolute;inset:0;opacity:1!important;filter:none!important;mask-image:none!important;
}
body.variant-appfirst .av-hero-bg.av-hero-media picture{position:absolute;inset:0;display:block}
body.variant-appfirst .av-hero-bg.av-hero-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:100% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 7%,#000 18%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 7%,#000 18%);
}
body.variant-appfirst .av-hero-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,#fff9f5 0%,rgba(255,249,245,.97) 26%,rgba(255,249,245,.86) 40%,rgba(255,244,249,.42) 54%,rgba(255,244,249,0) 68%),
    linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 30%,rgba(255,246,251,.34) 100%);
}
body.variant-appfirst .av-hero-inner{
  position:relative;z-index:2;max-width:620px;
  margin:0 auto 0 max(18px,calc((100% - 1140px)/2));
}
body.variant-appfirst .av-hero-inner>*{max-width:600px}
body.variant-appfirst .hero-logo-lockup{margin:0 0 16px;gap:10px;align-items:center}
body.variant-appfirst .hero-brand-logo{
  height:110px;width:auto;max-height:110px;max-width:240px;
  object-fit:contain;filter:drop-shadow(0 8px 16px rgba(226,62,131,.16));
}
body.variant-appfirst .hero-logo-tag{
  font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.18em;
  color:var(--c-gold-deep);border:1px solid rgba(229,141,16,.45);
  background:rgba(255,255,255,.75);border-radius:999px;padding:4px 9px;font-weight:700;
}
body.variant-appfirst .av-eyebrow{
  font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-pink-deep);display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px;font-weight:700;
}
body.variant-appfirst .av-eyebrow span{color:var(--c-muted);font-weight:400}
body.variant-appfirst .av-hero h1{
  font-size:clamp(40px,4.9vw,66px);line-height:1.02;letter-spacing:-.02em;color:var(--c-ink);
  text-wrap:balance;
}
body.variant-appfirst .av-deck{
  font-size:16px;line-height:1.68;color:var(--c-ink-soft);max-width:520px;
  margin:16px 0 0;border-left:0;padding-left:0;
}
body.variant-appfirst .av-chips{margin:14px 0 0;gap:6px}
body.variant-appfirst .chips span{
  font-family:ui-monospace,monospace;font-size:9px;
  border:1px solid var(--c-pink-soft);background:#fff;color:var(--c-pink-deep);
  padding:4px 9px;border-radius:999px;
}
body.variant-appfirst .av-hero-actions{margin:22px 0 0;gap:10px;align-items:center}
body.variant-appfirst .av-hero-actions .btn [aria-hidden="true"]{display:none}
body.variant-appfirst .av-textlink{
  font-family:var(--display);font-size:11px;letter-spacing:.02em;text-transform:none;
  color:var(--c-ink-soft);border-bottom:2px solid var(--c-pink-soft);padding-bottom:2px;font-weight:700;
}
body.variant-appfirst .av-hero-stats{
  display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;border:0;background:none;
}
body.variant-appfirst .av-hero-stats div{
  border:1px solid var(--c-line);border-right:1px solid var(--c-line);border-radius:999px;
  background:rgba(255,255,255,.86);padding:7px 14px;display:flex;align-items:baseline;gap:7px;
}
body.variant-appfirst .av-hero-stats dt{
  font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);
}
body.variant-appfirst .av-hero-stats dd{
  margin:0;font-family:var(--display);font-size:12px;color:var(--c-pink-deep);overflow-wrap:anywhere;
}

/* ---------- section ---------- */
body.variant-appfirst .section{padding:58px 0;border-bottom:0}
body.variant-appfirst .sec-head{max-width:720px;margin:0 auto 28px;text-align:center}
body.variant-appfirst .sec-head p{font-size:14px;color:var(--c-muted);line-height:1.7}
body.variant-appfirst .section-note{font-size:11px;color:var(--c-muted)}
body.variant-appfirst .section-note a{font-weight:700}

/* showcase (dari template, perlu gaya sendiri) */
body.variant-appfirst .h03-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px}
body.variant-appfirst .h03-tile{
  margin:0;padding:9px;border-radius:22px;background:#fff;border:1px solid var(--c-line);
  box-shadow:var(--c-shadow-sm);overflow:hidden;
}
body.variant-appfirst .h03-tile img{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:15px;background:#fff2f8;
}
body.variant-appfirst .h03-tile:nth-child(3) img{object-position:50% 18%}
body.variant-appfirst .h03-tile:nth-child(4) img{object-position:50% 40%}
body.variant-appfirst .h03-tile figcaption{
  font-family:var(--display);font-size:11px;font-weight:800;color:var(--c-pink-deep);
  text-align:center;padding:8px 2px 2px;letter-spacing:.01em;
}
body.variant-appfirst .h03-band{margin:18px 0 0;border-radius:22px;overflow:hidden;border:1px solid var(--c-line);box-shadow:var(--c-shadow-sm)}
body.variant-appfirst .h03-band img{display:block;width:100%;height:auto}
body.variant-appfirst .h03-band figcaption{
  font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-muted);background:#fff;padding:8px 12px;
}

/* ringkasan + fakta */
body.variant-appfirst .ap-summary{grid-template-columns:1.15fr .85fr;gap:20px}
body.variant-appfirst .ap-card{
  background:#fff;border:1px solid var(--c-line);border-radius:26px;padding:24px 26px;
  box-shadow:var(--c-shadow);
}
body.variant-appfirst .ap-card p{font-size:14px;line-height:1.75;color:var(--c-ink-soft)}
body.variant-appfirst .ap-card p:last-child{margin-bottom:0}
body.variant-appfirst .ap-fact-chips{gap:8px}
body.variant-appfirst .ap-fact-chips span{
  background:#fff;border:1px solid var(--c-line);border-radius:16px;padding:9px 13px;
  font-size:10.5px;color:var(--c-ink-soft);box-shadow:0 3px 0 #fff4f9;font-weight:600;
}
body.variant-appfirst .ap-fact-chips b{color:var(--c-pink-deep);font-weight:800}
body.variant-appfirst .facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border:0;border-radius:0;overflow:visible;
}
body.variant-appfirst .facts div{
  border:1px solid var(--c-line)!important;border-radius:18px;background:#fff;padding:14px 15px;
  box-shadow:0 4px 0 #fff1f8;
}
body.variant-appfirst .facts span{
  font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);
}
body.variant-appfirst .facts b{font-family:var(--display);font-size:15px;color:var(--c-ink);margin-top:5px;display:block}

/* aktivitas / kartu */
body.variant-appfirst .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
body.variant-appfirst .promo-card,
body.variant-appfirst .card.promo-card{
  background:#fff;border:1px solid var(--c-line);border-radius:24px;padding:16px;
  box-shadow:var(--c-shadow-sm);
}
body.variant-appfirst .promo-card img{border-radius:16px;margin-bottom:10px}
body.variant-appfirst .promo-card h3{color:var(--c-ink)}
body.variant-appfirst .promo-card p{font-size:12px;color:var(--c-muted)}
body.variant-appfirst .promo-card .label{
  font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-pink-deep);
}
body.variant-appfirst .empty{
  background:#fff;border:1px dashed var(--c-pink-soft);border-radius:24px;padding:26px;text-align:center;
}

/* rute */
body.variant-appfirst .route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
body.variant-appfirst .route-card{
  background:#fff;border:1px solid var(--c-line);border-radius:24px;padding:20px;
  box-shadow:var(--c-shadow-sm);min-height:190px;text-decoration:none;
}
body.variant-appfirst .route-card.primary{
  background:linear-gradient(170deg,#fff2f8 0%,#ffffff 62%);
  border-color:var(--c-pink-soft);box-shadow:0 18px 34px rgba(226,62,131,.16);
}
body.variant-appfirst .route-card .route-no{
  font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-gold-deep);
}
body.variant-appfirst .route-card h3{color:var(--c-ink);font-size:22px;margin:12px 0 6px}
body.variant-appfirst .route-card p{font-size:12px;color:var(--c-muted);line-height:1.65}
body.variant-appfirst .route-link{
  border-top:1px dashed var(--c-pink-soft);color:var(--c-pink-deep);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:800;
}
body.variant-appfirst .route-card:hover{border-color:var(--c-pink);transform:translateY(-2px)}

/* langkah */
body.variant-appfirst .ap-steps{gap:9px}
body.variant-appfirst .ap-steps li{
  background:#fff;border:1px solid var(--c-line);border-radius:18px;padding:14px 16px;
  box-shadow:0 4px 0 #fff1f8;
}
body.variant-appfirst .ap-tick{border-color:var(--c-pink);background:#fff5fa}
body.variant-appfirst .ap-tick::after{border-color:var(--c-pink)}
body.variant-appfirst .ap-steps h3{color:var(--c-ink);font-size:14px}
body.variant-appfirst .ap-steps p{font-size:12px;color:var(--c-muted);line-height:1.65}

/* istilah */
body.variant-appfirst .terms-box{
  background:#fff;border:1px dashed var(--c-pink-soft);border-radius:24px;padding:20px;
}
body.variant-appfirst .terms-label{
  font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-pink-deep);
}
body.variant-appfirst .terms-box .chips span{
  border:1px solid var(--c-pink-soft);background:#fff8fb;color:var(--c-ink-soft);
}
body.variant-appfirst .terms-derived span{border-style:dashed;color:var(--c-muted)}

/* FAQ */
body.variant-appfirst .ap-faq{gap:9px}
body.variant-appfirst .ap-faq article{
  background:#fff;border:1px solid var(--c-line);border-radius:20px;padding:16px 18px;
  box-shadow:0 4px 0 #fff1f8;
}
body.variant-appfirst .ap-faq>article>span{
  font-family:var(--display);font-size:12px;font-weight:800;color:var(--c-pink);
}
body.variant-appfirst .ap-faq h3{color:var(--c-ink);font-size:14px}
body.variant-appfirst .ap-faq p{font-size:12.5px;color:var(--c-muted);line-height:1.7}

/* ---------- footer ---------- */
body.variant-appfirst .site-footer.po-footer{
  margin-top:20px;padding:44px 0 26px;border-top:1px solid var(--c-pink-soft);
  background:linear-gradient(180deg,#fff6fb 0%,#fff1f8 100%);
}
body.variant-appfirst .po-footer-mark{
  font-family:var(--display);font-size:clamp(52px,10vw,120px);line-height:.86;letter-spacing:-.04em;
  text-transform:none;color:transparent;background:var(--c-pill);-webkit-background-clip:text;background-clip:text;
  overflow-wrap:anywhere;
}
body.variant-appfirst .po-footer-cta{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 8px}
body.variant-appfirst .po-footer-cta p{margin:0;font-size:13px;color:var(--c-ink-soft);max-width:520px}
body.variant-appfirst .po-footer-cta>div{display:flex;gap:9px;flex-wrap:wrap}
body.variant-appfirst .po-footer-row{
  gap:6px 16px;border-top:1px dashed var(--c-pink-soft);padding-top:14px;margin:16px 0;
}
body.variant-appfirst .po-footer-row a{
  font-family:var(--display);font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-ink-soft);text-decoration:none;font-weight:700;
}
body.variant-appfirst .po-footer-row a:hover{color:var(--c-pink-deep)}
body.variant-appfirst .po-footer-bottom{font-size:9px;color:var(--c-muted);letter-spacing:.02em}
body.variant-appfirst .age{
  display:inline-block;border:1px solid var(--c-pink-soft);border-radius:999px;
  padding:1px 6px;margin-right:6px;background:#fff;color:var(--c-pink-deep);font-weight:800;
}

/* halaman dalam (info/promo/guide) */
body.variant-appfirst .variant-page-hero{
  padding:44px 0 30px;border-bottom:0;
  background:linear-gradient(180deg,#fff3f9 0%,rgba(255,248,244,0) 100%);
}
body.variant-appfirst .variant-page-hero h1{font-size:clamp(32px,4.4vw,54px);color:var(--c-ink)}
body.variant-appfirst .variant-page-hero .eyebrow{
  max-width:660px;margin:0 auto 10px;font-size:9px;letter-spacing:.13em;line-height:1.7;
  color:var(--c-pink-deep);font-family:ui-monospace,monospace;text-transform:uppercase;font-weight:600;
}
body.variant-appfirst .variant-page-hero p{color:var(--c-muted);max-width:640px;margin:10px auto 0}
body.variant-appfirst .variant-prose{max-width:800px}
body.variant-appfirst .variant-prose p,
body.variant-appfirst .variant-prose li{font-size:14.5px;line-height:1.8;color:var(--c-ink-soft)}
body.variant-appfirst .variant-prose h2{font-size:clamp(21px,2.6vw,30px);margin-top:28px}
body.variant-appfirst .variant-prose a{font-weight:700}
body.variant-appfirst .table-wrap{overflow-x:auto;border:1px solid var(--c-line);border-radius:18px;background:#fff}
body.variant-appfirst table{width:100%;border-collapse:collapse}
body.variant-appfirst th{
  background:#fff2f8;color:var(--c-pink-deep);font-family:ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.08em;font-size:9px;
}
body.variant-appfirst td{border-top:1px solid var(--c-line-soft);font-size:12.5px;color:var(--c-ink-soft)}
body.variant-appfirst .callout{
  border-left:4px solid var(--c-pink);background:#fff;border-radius:0 16px 16px 0;
  padding:14px 16px;color:var(--c-ink-soft);font-size:13px;box-shadow:var(--c-shadow-sm);
}
body.variant-appfirst .geo-facts th{background:#fff2f8;color:var(--c-ink-soft)}
body.variant-appfirst .geo-facts caption{color:var(--c-pink-deep);font-family:ui-monospace,monospace}

/* ---------- bilah CTA bawah (mobile) ---------- */
body.variant-appfirst .bottom-cta{display:none}

@media (max-width:900px){
  body.variant-appfirst .h03-tiles{grid-template-columns:repeat(2,1fr)}
  body.variant-appfirst .facts{grid-template-columns:repeat(2,1fr)}
  body.variant-appfirst .route-grid{grid-template-columns:1fr}
  body.variant-appfirst .card-grid{grid-template-columns:1fr}
  body.variant-appfirst .av-hero-inner{max-width:none}
  body.variant-appfirst .mi-nav{background:#fff}
}

@media (max-width:700px){
  body.variant-appfirst{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  body.variant-appfirst .wrap{width:calc(100% - 28px)}

  /* header ringkas: logo 44px, CTA kecil */
  body.variant-appfirst .mi-row{min-height:58px;gap:10px}
  body.variant-appfirst .mi-brand .brand-logo{height:44px;max-width:150px}
  body.variant-appfirst .mi-cta{font-size:11px;padding:9px 13px;min-height:40px}

  /* strip kebijakan jadi dua baris ringkas */
  body.variant-appfirst .policy-strip{font-size:9px}
  body.variant-appfirst .policy-strip-inner{padding:6px 0;gap:6px}
  body.variant-appfirst .policy-note{display:none}
  body.variant-appfirst .policy-link{padding:3px 8px}

  /* hero: artwork dulu, lalu teks — satu gambar besar saja */
  body.variant-appfirst .av-hero{display:block;min-height:0;padding:0 0 24px}
  body.variant-appfirst .av-hero-bg{position:relative;inset:auto;opacity:1!important}
  body.variant-appfirst .av-hero-bg.av-hero-media picture{position:relative;inset:auto;display:block}
  body.variant-appfirst .av-hero-bg.av-hero-media img{
    position:relative;inset:auto;display:block;width:100%;height:auto;
    aspect-ratio:16/10;object-fit:cover;object-position:50% 36%;
    border-radius:0 0 26px 26px;
  }
  body.variant-appfirst .av-hero-bg::after{
    border-radius:0 0 26px 26px;
    background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,246,251,0) 55%,rgba(255,246,251,.92) 100%);
  }
  body.variant-appfirst .av-hero-inner{max-width:none;margin:0 auto;padding-top:12px}
  body.variant-appfirst .av-hero-inner>*{max-width:none}
  body.variant-appfirst .hero-logo-lockup{margin:2px 0 10px;gap:8px}
  body.variant-appfirst .hero-brand-logo{height:82px;max-height:82px;max-width:162px}
  body.variant-appfirst .hero-logo-tag{font-size:8px;padding:3px 7px}
  body.variant-appfirst .av-eyebrow{font-size:9px;margin-bottom:8px}
  body.variant-appfirst .av-hero h1{font-size:clamp(30px,8.6vw,40px);line-height:1.05}
  body.variant-appfirst .av-deck{
    font-size:13.5px;line-height:1.6;margin-top:10px;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  }
  body.variant-appfirst .av-chips{margin-top:10px;max-height:26px;overflow:hidden}
  body.variant-appfirst[class*="cta-"] .av-hero-actions{
    flex-direction:row;flex-wrap:wrap;align-items:stretch;max-width:none;margin-top:14px;gap:8px;
  }
  body.variant-appfirst .av-hero-inner{margin:0 auto;padding-top:12px}
  body.variant-appfirst .av-hero-actions .btn{flex:1 1 calc(50% - 4px);min-height:50px;font-size:13px;padding:0 12px;width:auto}
  body.variant-appfirst .av-hero-actions .btn [aria-hidden="true"]{display:none}
body.variant-appfirst .av-textlink{display:none}
  body.variant-appfirst .av-hero-stats{display:none}

  /* bilah CTA tetap: dua tombol 50px + safe-area */
  body.variant-appfirst .bottom-cta{
    display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:90;
    gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(255,255,255,.97),#fff1f8 62%,#ffe9f4);
    border-top:1px solid var(--c-pink-soft);
    box-shadow:0 -12px 30px rgba(226,62,131,.18);
  }
  body.variant-appfirst .bottom-cta .btn{
    flex:1;min-height:50px;font-size:13px;padding:0 8px;border-radius:999px;
  }
  body.variant-appfirst .bottom-cta .btn-primary{box-shadow:0 5px 0 #74093a}
  body.variant-appfirst .bottom-cta .btn-ghost{background:#fff;color:var(--c-pink-deep);border-color:var(--c-pink-soft);box-shadow:0 5px 0 #ffe3ef}

  /* section lebih rapat */
  body.variant-appfirst .section{padding:38px 0}
  body.variant-appfirst .sec-head{margin-bottom:20px}
  body.variant-appfirst h2{font-size:clamp(22px,6.6vw,28px)}
  body.variant-appfirst .ap-summary{grid-template-columns:1fr}
  body.variant-appfirst .ap-card{padding:18px;border-radius:22px}
  body.variant-appfirst .facts{grid-template-columns:1fr 1fr}
  body.variant-appfirst .h03-tiles{grid-template-columns:1fr 1fr;gap:10px}
  body.variant-appfirst .h03-tile{padding:7px;border-radius:18px}
  body.variant-appfirst .route-card{min-height:0;padding:16px}
  body.variant-appfirst .po-footer-row{gap:5px 12px}
}

@media (max-width:380px){
  body.variant-appfirst .av-hero h1{font-size:29px}
  body.variant-appfirst .av-hero-actions .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  body.variant-appfirst *{transition:none!important;animation:none!important}
}