/* ==========================================================================
   ayuwin · skin "pantai-siang" (reference-led)
   Bahasa visual dari splash resmi ayuwin dan poster halaman resminya:
   pulau tropis di siang hari — laut biru kehijauan, pasir terang, pondok
   jerami berbunga, sawah palm, dan karakter berjanggut putih di atas kartu
   mahjong. Diterjemahkan menjadi situs terang: latar putih hangat, kartu
   putih bertepi tipis, aksen laut toska, dan tombol emas matahari.
   Tidak memakai wordmark merek lain, nominal promo, layar kemenangan, kode
   QR, nama permainan pihak ketiga, atau salinan ajakan halaman referensi.
   ========================================================================== */

body.variant-appfirst {
  --bg: #fffdf6;
  --bg2: #fdf3e2;
  --panel: #ffffff;
  --text: #0b3145;
  --muted: #527a8d;
  --accent: #0e8ea6;
  --accent2: #e79b2c;
  --line: rgba(11, 49, 69, 0.14);
  --display: "Trebuchet MS", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 18px;
  --sea: #0e8ea6;
  --sea-deep: #075b6d;
  --sea-soft: #d8eff3;
  --coral: #f2604a;
  --sand: #f6e3c2;
  --sand-soft: #fdf3e2;
  --sun: #ffc861;
  --gold: #e79b2c;
  --gold-deep: #a8670f;
  --leaf: #2f9e6b;
  --ink: #0b3145;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(14, 142, 166, 0.13), transparent 62%),
    radial-gradient(760px 460px at 92% 2%, rgba(255, 200, 97, 0.18), transparent 60%),
    linear-gradient(180deg, #fffdf6 0%, #fffdf6 46%, #fdf7ea 100%);
  color: var(--text);
  font-size: 16px;
  line-height: 1.68;
  padding-bottom: 92px;
  -webkit-font-smoothing: antialiased;
}

/* Texture tipis: langit di kepala halaman, pasir di kaki halaman. Dua-duanya
   potongan artwork resmi ayuwin, dipakai sangat tipis (opacity .16). */
/* Satu-satunya latar tambahan: pita langit tipis di kepala halaman. Tidak ada
   gambar latar lain, dan tidak ada gambar latar di dalam galeri. */
body.variant-appfirst::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 210px;
  z-index: 0;
  pointer-events: none;
  background-image: url("../assets/latar-langit.webp");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}

body.variant-appfirst > * {
  position: relative;
  z-index: 1;
}

/* The skip link must stay out of the flow (generic child rule above would
   make it relative and push the header down). */
body.variant-appfirst > .skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 120;
}

body.variant-appfirst > .skip:focus {
  left: 12px;
  top: 12px;
}

/* ---------- Tipografi ---------------------------------------------------- */
body.variant-appfirst.type-serif h1,
body.variant-appfirst.type-serif h2,
body.variant-appfirst.type-serif h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.018em;
  text-transform: none;
  color: var(--ink);
  text-shadow: none;
}

body.variant-appfirst h1 {
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.03;
}

body.variant-appfirst h2 {
  font-size: clamp(24px, 2.9vw, 34px);
  line-height: 1.12;
}

body.variant-appfirst h3 {
  font-size: 18px;
  line-height: 1.25;
}

body.variant-appfirst .kicker,
body.variant-appfirst .eyebrow,
body.variant-appfirst .ap-kicker,
body.variant-appfirst .label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sea-deep);
  font-weight: 700;
}

body.variant-appfirst a {
  color: var(--sea-deep);
  text-decoration-color: rgba(14, 142, 166, 0.4);
}

body.variant-appfirst a:hover {
  color: var(--coral);
}

/* ---------- Tombol ------------------------------------------------------ */
body.variant-appfirst .btn {
  border-radius: 999px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-height: 50px;
  padding: 0 24px;
  border-width: 2px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

body.variant-appfirst .btn-primary {
  background: linear-gradient(180deg, #ffd888 0%, var(--gold) 62%, #cf8016 100%);
  color: #43290a;
  border-color: #c8801a;
  box-shadow: 0 6px 0 rgba(168, 103, 15, 0.35), 0 12px 26px rgba(231, 155, 44, 0.32);
}

body.variant-appfirst .btn-ghost {
  background: #ffffff;
  color: var(--sea-deep);
  border-color: rgba(14, 142, 166, 0.5);
  box-shadow: 0 6px 0 rgba(14, 142, 166, 0.16);
}

body.variant-appfirst .btn:hover {
  transform: translateY(-2px);
  filter: none;
}

body.variant-appfirst .btn-sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 10px;
}

body.variant-appfirst .btn-lg {
  min-height: 54px;
  padding: 0 28px;
  font-size: 13px;
}

/* ---------- Strip kebijakan (slot / resmi / link alternatif) ------------- */
body.variant-appfirst .policy-strip {
  background: linear-gradient(90deg, rgba(14, 142, 166, 0.1), rgba(255, 200, 97, 0.22));
  border-bottom: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.variant-appfirst .policy-strip-inner {
  gap: 8px;
  padding: 8px 0;
}

body.variant-appfirst .policy-badge {
  color: var(--sea-deep);
  font-weight: 800;
}

body.variant-appfirst .policy-tag {
  border: 1px solid rgba(14, 142, 166, 0.45);
  border-radius: 999px;
  color: var(--sea-deep);
  background: #ffffff;
  padding: 2px 9px;
}

body.variant-appfirst .policy-link {
  border: 1px solid rgba(231, 155, 44, 0.55);
  border-radius: 999px;
  color: #8a5406;
  background: rgba(255, 200, 97, 0.22);
  padding: 3px 10px;
  min-height: 26px;
}

body.variant-appfirst .policy-link:hover {
  background: rgba(255, 200, 97, 0.42);
  color: #6d4103;
}

body.variant-appfirst .policy-note {
  color: var(--muted);
}

/* ---------- Header & dock ---------------------------------------------- */
body.variant-appfirst .ap-header {
  background: #fffdf6;
  border-bottom: 1px solid var(--line);
  /* No backdrop-filter here: it would become the containing block for the
     fixed dock and pin the dock to the header instead of the viewport. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 10px 26px rgba(11, 49, 69, 0.06);
}

body.variant-appfirst .ap-topbar {
  min-height: 68px;
  gap: 14px;
}

body.variant-appfirst .ap-brand-logo {
  height: 52px;
  width: auto;
  max-width: min(190px, 46vw);
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(11, 49, 69, 0.12));
}

body.variant-appfirst .ap-status {
  color: var(--sea-deep);
  font-size: 9px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(14, 142, 166, 0.28);
  border-radius: 999px;
  padding: 5px 11px;
  background: #ffffff;
}

body.variant-appfirst .ap-dot {
  background: var(--leaf);
  box-shadow: 0 0 0 3px rgba(47, 158, 107, 0.18);
}

body.variant-appfirst .ap-help {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sea-deep);
  border: 1px solid rgba(14, 142, 166, 0.4);
  border-radius: 999px;
  padding: 8px 15px;
  background: #ffffff;
  text-decoration: none;
}

body.variant-appfirst .ap-help:hover {
  background: var(--sea-soft);
  color: var(--sea-deep);
}

body.variant-appfirst .ap-dock {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: 14px;
  width: min(760px, calc(100% - 28px));
  padding: 8px;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(11, 49, 69, 0.16);
  backdrop-filter: blur(12px);
}

body.variant-appfirst .ap-dock a {
  border-radius: 14px;
  color: var(--muted);
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 10px;
  transition: background 0.15s ease, color 0.15s ease;
}

body.variant-appfirst .ap-dock a span {
  color: var(--accent);
  opacity: 0.85;
}

body.variant-appfirst .ap-dock a:hover {
  background: var(--sea-soft);
  color: var(--sea-deep);
}

body.variant-appfirst .ap-dock a[aria-current="page"] {
  background: var(--sea-deep);
  color: #ffffff;
}

body.variant-appfirst .ap-dock a[aria-current="page"] span {
  color: var(--sun);
}

body.variant-appfirst .ap-dock .ap-dock-cta {
  background: linear-gradient(180deg, #ffd888, var(--gold));
  color: #43290a;
  border-radius: 14px;
  min-width: 108px;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(168, 103, 15, 0.3);
}

body.variant-appfirst .ap-dock .ap-dock-cta:hover {
  background: linear-gradient(180deg, #ffe2a4, #f0a93c);
  color: #43290a;
}

/* ---------- Hero (full-bleed artwork + panel putih) --------------------- */
body.variant-appfirst .av-hero {
  position: relative;
  border-bottom: 0;
  padding: 56px 0 96px;
  min-height: 640px;
  background: #fffdf6;
  overflow: hidden;
}

body.variant-appfirst .av-hero-bg.av-hero-media {
  opacity: 1;
  filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}

body.variant-appfirst .av-hero-bg.av-hero-media picture,
body.variant-appfirst .av-hero-bg.av-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 44%;
}

/* Panel putih bertahap agar teks dan logo resmi (latar putih) menyatu. */
body.variant-appfirst .av-hero-bg.av-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(255, 253, 246, 0.97) 0%, rgba(255, 253, 246, 0.94) 30%, rgba(255, 253, 246, 0.62) 46%, rgba(255, 253, 246, 0.14) 66%, rgba(255, 253, 246, 0) 82%),
    linear-gradient(0deg, rgba(255, 253, 246, 0.82) 0%, rgba(255, 253, 246, 0) 22%);
}

body.variant-appfirst .av-hero-inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 6px 0;
}

/* Kolom teks tinggal di paruh kiri; artwork mengisi paruh kanan. */
body.variant-appfirst .av-hero-inner > * {
  max-width: 560px;
}

body.variant-appfirst .hero-logo-lockup {
  margin: 0 0 16px;
  gap: 12px;
}

body.variant-appfirst .hero-brand-logo {
  max-height: 92px;
  max-width: min(260px, 60vw);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(11, 49, 69, 0.12));
}

body.variant-appfirst .hero-logo-tag {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--sea-deep);
  background: #ffffff;
  border: 1px solid rgba(14, 142, 166, 0.4);
  border-radius: 999px;
  padding: 4px 10px;
}

body.variant-appfirst .av-eyebrow {
  color: var(--sea-deep);
  font-size: 10px;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}

body.variant-appfirst .av-eyebrow span {
  color: var(--muted);
}

body.variant-appfirst .av-hero h1 {
  color: var(--ink);
  font-size: clamp(34px, 4.3vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}

body.variant-appfirst .av-hero h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  border-radius: 3px;
  margin: 18px 0 0;
  background: linear-gradient(90deg, var(--gold), var(--sun));
}

body.variant-appfirst .av-deck {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.72;
  color: #335a6c;
}

body.variant-appfirst .chips {
  gap: 7px;
  margin-top: 16px;
}

body.variant-appfirst .chips span {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.03em;
  border: 1px solid rgba(14, 142, 166, 0.26);
  background: #ffffff;
  color: var(--sea-deep);
  border-radius: 999px;
  padding: 5px 10px;
}

body.variant-appfirst .av-hero-actions {
  gap: 10px;
  margin-top: 24px;
  align-items: center;
}

body.variant-appfirst .av-textlink {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sea-deep);
  border-bottom: 2px solid rgba(14, 142, 166, 0.5);
  padding-bottom: 3px;
  text-decoration: none;
}

body.variant-appfirst .av-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

body.variant-appfirst .av-hero-stats div {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 11px 13px;
  box-shadow: 0 10px 22px rgba(11, 49, 69, 0.07);
}

body.variant-appfirst .av-hero-stats dt {
  font-family: ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 3px;
}

body.variant-appfirst .av-hero-stats dd {
  margin: 0;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  color: var(--sea-deep);
  overflow-wrap: anywhere;
}

/* ---------- Galeri artwork ---------------------------------------------- */
body.variant-appfirst .sec-showcase {
  padding: 54px 0 46px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #fdf7ea 100%);
}

body.variant-appfirst .sec-head {
  max-width: 780px;
  text-align: left;
  margin: 0 0 26px;
}

body.variant-appfirst .sec-head h2 {
  margin-bottom: 10px;
}

body.variant-appfirst .sec-head p {
  color: var(--muted);
  font-size: 14px;
  max-width: 700px;
}

body.variant-appfirst .h03-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

body.variant-appfirst .h03-tile {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(11, 49, 69, 0.09);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.variant-appfirst .h03-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(11, 49, 69, 0.14);
}

body.variant-appfirst .h03-tile img {
  width: 100%;
  height: 172px;
  object-fit: cover;
  object-position: 50% 32%;
  display: block;
}

body.variant-appfirst .h03-tile figcaption {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sea-deep);
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

body.variant-appfirst .h03-band {
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(11, 49, 69, 0.1);
}

body.variant-appfirst .h03-band img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  display: block;
}

body.variant-appfirst .h03-band figcaption {
  font-size: 11px;
  color: var(--muted);
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

/* ---------- Section umum ------------------------------------------------ */
body.variant-appfirst .section {
  padding: 52px 0;
  border-bottom: 1px solid var(--line);
}

body.variant-appfirst .section:nth-of-type(even) {
  background: rgba(253, 243, 226, 0.5);
}

body.variant-appfirst .sec-head .kicker,
body.variant-appfirst .sec-head.left .kicker {
  color: var(--gold-deep);
}

body.variant-appfirst .sec-links {
  gap: 8px 18px;
  font-size: 12px;
}

body.variant-appfirst .sec-links a {
  color: var(--sea-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 142, 166, 0.35);
  padding-bottom: 1px;
}

/* Ringkasan + fakta */
body.variant-appfirst .ap-summary {
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
}

body.variant-appfirst .ap-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #ffffff;
  padding: 22px 24px;
  box-shadow: 0 14px 30px rgba(11, 49, 69, 0.08);
}

body.variant-appfirst .ap-card p {
  font-size: 14px;
  line-height: 1.75;
  color: #335a6c;
}

body.variant-appfirst .ap-fact-chips span {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--muted);
  font-size: 11px;
  padding: 9px 12px;
  box-shadow: 0 8px 18px rgba(11, 49, 69, 0.06);
}

body.variant-appfirst .ap-fact-chips b {
  color: var(--sea-deep);
  font-weight: 800;
}

/* Rute H5 / APK / login */
body.variant-appfirst .route-grid {
  gap: 14px;
}

body.variant-appfirst .route-card {
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(11, 49, 69, 0.08);
  padding: 22px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body.variant-appfirst .route-card h3 {
  color: var(--ink);
  font-size: 21px;
  margin: 12px 0 8px;
}

body.variant-appfirst .route-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

body.variant-appfirst .route-no {
  color: var(--gold-deep);
  font-size: 9px;
  letter-spacing: 0.14em;
}

body.variant-appfirst .route-link {
  border-top: 1px dashed rgba(11, 49, 69, 0.16);
  color: var(--sea-deep);
  font-size: 11px;
  font-weight: 800;
}

body.variant-appfirst .route-card.primary {
  background: linear-gradient(170deg, #eaf7f9 0%, #ffffff 62%);
  border-color: rgba(14, 142, 166, 0.42);
  box-shadow: 0 18px 36px rgba(14, 142, 166, 0.16);
}

body.variant-appfirst .route-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px rgba(11, 49, 69, 0.14);
  border-color: rgba(231, 155, 44, 0.55);
}

/* Fakta */
body.variant-appfirst .facts {
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(11, 49, 69, 0.07);
}

body.variant-appfirst .facts div {
  border-right-color: var(--line);
  border-bottom-color: var(--line);
  padding: 15px 17px;
}

body.variant-appfirst .facts span {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 0.12em;
}

body.variant-appfirst .facts b {
  color: var(--sea-deep);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
}

/* Kepercayaan */
body.variant-appfirst .trust-list li {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  padding: 15px 17px;
  box-shadow: 0 10px 22px rgba(11, 49, 69, 0.06);
}

body.variant-appfirst .trust-list li span {
  color: var(--gold-deep);
  font-size: 12px;
}

body.variant-appfirst .trust-list li p {
  color: #335a6c;
  font-size: 13px;
  line-height: 1.7;
}

/* Istilah / chips */
body.variant-appfirst .terms-box {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #ffffff;
  padding: 20px;
  box-shadow: 0 14px 30px rgba(11, 49, 69, 0.07);
}

body.variant-appfirst .terms-label {
  color: var(--gold-deep);
  font-size: 9px;
}

body.variant-appfirst .terms-derived span {
  border-style: dashed;
  color: var(--sea-deep);
  border-color: rgba(14, 142, 166, 0.32);
  background: #f7fdfe;
}

body.variant-appfirst .edition-note {
  border-top: 1px dashed rgba(11, 49, 69, 0.16);
}

/* Langkah */
body.variant-appfirst .ap-steps li {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  padding: 14px 16px;
  box-shadow: 0 10px 22px rgba(11, 49, 69, 0.06);
}

body.variant-appfirst .ap-tick {
  border-color: var(--sea);
}

body.variant-appfirst .ap-tick::after {
  border-color: var(--sea);
}

body.variant-appfirst .ap-steps h3 {
  font-size: 15px;
  color: var(--ink);
}

body.variant-appfirst .ap-steps p {
  font-size: 13px;
  color: #335a6c;
  line-height: 1.7;
}

/* FAQ */
body.variant-appfirst .ap-faq article {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  padding: 15px 17px;
  box-shadow: 0 10px 22px rgba(11, 49, 69, 0.06);
}

body.variant-appfirst .ap-faq > article > span {
  color: var(--gold-deep);
  font-size: 10px;
}

body.variant-appfirst .ap-faq h3 {
  font-size: 14px;
  color: var(--ink);
}

body.variant-appfirst .ap-faq p {
  font-size: 13px;
  color: #335a6c;
  line-height: 1.7;
}

/* ---------- Halaman panduan / info ------------------------------------- */
body.variant-appfirst .variant-page-hero {
  padding: 52px 0 38px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(720px 320px at 88% -30%, rgba(255, 200, 97, 0.28), transparent 62%),
    linear-gradient(180deg, #ffffff, #fffdf6);
}

body.variant-appfirst .variant-page-hero h1 {
  font-size: clamp(30px, 4vw, 46px);
  color: var(--ink);
  margin: 6px 0 0;
}

body.variant-appfirst .variant-page-hero .deck {
  color: #335a6c;
  font-size: 15px;
  max-width: 720px;
  margin-top: 14px;
}

body.variant-appfirst .variant-page-hero .hero-actions {
  gap: 10px;
  margin-top: 20px;
}

body.variant-appfirst .split,
body.variant-appfirst .variant-split {
  gap: 26px;
}

body.variant-appfirst .card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(11, 49, 69, 0.06);
}

body.variant-appfirst .card p {
  color: #335a6c;
  font-size: 13px;
  line-height: 1.7;
}

body.variant-appfirst .card img {
  border-radius: 12px;
}

body.variant-appfirst .callout {
  border-left: 4px solid var(--gold);
  background: #fff9ec;
  border-radius: 0 14px 14px 0;
  color: #4a6172;
}

body.variant-appfirst .table-wrap {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(11, 49, 69, 0.06);
}

body.variant-appfirst th {
  background: var(--sea-soft);
  color: var(--sea-deep);
  font-size: 8px;
  letter-spacing: 0.1em;
}

body.variant-appfirst td {
  color: #335a6c;
  border-bottom: 1px solid rgba(11, 49, 69, 0.1);
}

body.variant-appfirst .facts div,
body.variant-appfirst .section-note {
  color: var(--muted);
}

body.variant-appfirst .variant-prose h2,
body.variant-appfirst .prose h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--ink);
}

body.variant-appfirst .variant-prose p,
body.variant-appfirst .prose p,
body.variant-appfirst .variant-prose li,
body.variant-appfirst .prose li {
  color: #335a6c;
  font-size: 14px;
  line-height: 1.78;
}

/* ---------- Footer ------------------------------------------------------ */
body.variant-appfirst .site-footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #fffdf6, #fdf3e2);
  padding: 34px 0 26px;
  color: var(--muted);
}

body.variant-appfirst .po-footer-mark {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sea-deep);
}

body.variant-appfirst .po-footer-cta p {
  color: #335a6c;
  font-size: 13px;
}

body.variant-appfirst .po-footer-row {
  gap: 6px 16px;
  border-top: 1px dashed rgba(11, 49, 69, 0.16);
  padding-top: 14px;
  margin-top: 16px;
}

body.variant-appfirst .po-footer-row a {
  font-size: 11px;
  color: var(--sea-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

body.variant-appfirst .po-footer-row a:hover {
  border-bottom-color: rgba(14, 142, 166, 0.5);
  color: var(--coral);
}

body.variant-appfirst .po-footer-bottom {
  margin-top: 14px;
  font-size: 10px;
  color: var(--muted);
}

body.variant-appfirst .age {
  border-color: rgba(11, 49, 69, 0.28);
  color: var(--sea-deep);
  font-size: 8px;
}

/* ---------- Bilah CTA bawah (mobile) ----------------------------------- */
body.variant-appfirst .bottom-cta {
  display: none !important;
}

@media (max-width: 700px) {
  body.variant-appfirst .bottom-cta {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    gap: 8px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(255, 253, 246, 0.98);
    border-top: 1px solid rgba(11, 49, 69, 0.14);
    box-shadow: 0 -12px 30px rgba(11, 49, 69, 0.16);
    backdrop-filter: blur(12px);
  }

  body.variant-appfirst .bottom-cta .btn {
    flex: 1 1 0;
    min-height: 52px;
    height: 52px;
    padding: 0 12px;
    font-size: 12px;
    letter-spacing: 0.05em;
  }

  body.variant-appfirst .bottom-cta .btn-primary {
    box-shadow: 0 4px 0 rgba(168, 103, 15, 0.32);
  }

  body.variant-appfirst .bottom-cta .btn-ghost {
    box-shadow: 0 4px 0 rgba(14, 142, 166, 0.18);
  }
}

/* ---------- Responsif -------------------------------------------------- */
@media (max-width: 1100px) {
  body.variant-appfirst .h03-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.variant-appfirst {
    padding-bottom: 104px;
  }

  body.variant-appfirst .h03-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.variant-appfirst .h03-tile img {
    height: 150px;
  }

  body.variant-appfirst .av-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 0 34px;
  }

  /* Satu gambar konten besar di layar pertama ponsel: artwork jadi pita di
     atas, teks menyusul. Bukan dua gambar besar yang mirip. */
  body.variant-appfirst .av-hero-bg.av-hero-media {
    position: relative;
    inset: auto;
    order: 0;
    height: 300px;
    width: 100%;
    mask-image: none;
    -webkit-mask-image: none;
  }

  body.variant-appfirst .av-hero-bg.av-hero-media::after {
    background: linear-gradient(180deg, rgba(255, 253, 246, 0) 58%, rgba(255, 253, 246, 0.98) 100%);
  }

  body.variant-appfirst .av-hero-bg.av-hero-media picture,
  body.variant-appfirst .av-hero-bg.av-hero-media img {
    object-position: 50% 34%;
  }

  body.variant-appfirst .av-hero-inner {
    order: 1;
    width: min(var(--max), 100% - 36px);
    max-width: 100%;
    margin: -22px auto 0;
    padding: 0;
  }

  body.variant-appfirst .av-hero-inner > * {
    max-width: 100%;
  }

  body.variant-appfirst .av-dock {
    display: none;
  }

  body.variant-appfirst .ap-dock {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    width: auto;
    margin: 8px 0 10px;
    box-shadow: none;
    border-radius: 18px;
    overflow: hidden;
    flex-wrap: nowrap;
  }

  /* Enam tab cukup satu baris; CTA H5 di dock disembunyikan karena bilah CTA
     bawah sudah memuat H5 dan APK sekaligus. */
  body.variant-appfirst .ap-dock a {
    flex: 1 1 0;
    min-width: 0;
    font-size: 7.5px;
    padding: 7px 3px;
    text-align: center;
  }

  body.variant-appfirst .ap-dock a span {
    font-size: 7px;
  }

  body.variant-appfirst .ap-dock .ap-dock-cta {
    display: none;
  }

  body.variant-appfirst .av-hero-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.variant-appfirst .hero-brand-logo {
    max-height: 64px;
    max-width: min(170px, 52vw);
  }

  body.variant-appfirst .av-hero h1 {
    font-size: clamp(30px, 8.6vw, 40px);
  }

  body.variant-appfirst .av-deck {
    font-size: 14px;
    line-height: 1.7;
  }

  body.variant-appfirst .ap-brand-logo {
    height: 42px;
  }

  body.variant-appfirst .ap-summary {
    grid-template-columns: 1fr;
  }

  body.variant-appfirst .h03-band img {
    height: 130px;
  }

  body.variant-appfirst .section {
    padding: 40px 0;
  }
}

@media (max-width: 600px) {
  body.variant-appfirst {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  body.variant-appfirst .policy-strip {
    font-size: 9px;
    letter-spacing: 0.04em;
  }

  body.variant-appfirst .policy-strip-inner {
    gap: 5px;
    padding: 6px 0;
  }

  body.variant-appfirst .policy-link {
    padding: 2px 8px;
    min-height: 24px;
  }

  body.variant-appfirst .policy-note {
    display: none;
  }

  body.variant-appfirst .ap-topbar {
    min-height: 60px;
    gap: 8px;
  }

  body.variant-appfirst .ap-status {
    font-size: 8px;
    padding: 4px 8px;
  }

  body.variant-appfirst .ap-help {
    padding: 7px 11px;
    font-size: 9px;
  }

  body.variant-appfirst .av-hero-bg.av-hero-media {
    height: 272px;
  }

  body.variant-appfirst .av-hero h1 {
    font-size: clamp(28px, 8.4vw, 36px);
  }

  body.variant-appfirst .av-hero-actions .btn {
    flex: 1 1 46%;
    min-width: 0;
    padding: 0 14px;
    font-size: 11px;
  }

  body.variant-appfirst .av-textlink {
    flex: 1 1 100%;
    text-align: center;
  }

  body.variant-appfirst .h03-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  body.variant-appfirst .h03-tile img {
    height: 116px;
  }

  body.variant-appfirst .h03-tile figcaption {
    font-size: 9px;
    padding: 8px 9px 9px;
  }


  body.variant-appfirst .sec-head h2 {
    font-size: 24px;
  }

  body.variant-appfirst .route-card {
    padding: 18px;
  }

  body.variant-appfirst .ap-card,
  body.variant-appfirst .terms-box {
    padding: 16px;
    border-radius: 18px;
  }
}

/* Hormati preferensi gerak minimal. */
@media (prefers-reduced-motion: reduce) {
  body.variant-appfirst .btn,
  body.variant-appfirst .h03-tile,
  body.variant-appfirst .route-card {
    transition: none;
  }

  body.variant-appfirst .btn:hover,
  body.variant-appfirst .h03-tile:hover,
  body.variant-appfirst .route-card:hover {
    transform: none;
  }
}