/* ==========================================================================
   sky99 · "Langit Halilintar" skin  (reference-led, appfirst / phone hero)

   Bahasa visual diambil dari poster milik sky99 sendiri (u997.net): langit
   biru malam berbintang, kuil marmer bersayap, emas sebagai penanda resmi,
   dan satu tombol besar bergaya poster.  Petir dipakai sebagai garis aksen,
   bukan sebagai gambar karakter.

   Perbedaan yang disengaja dari situs appfirst lain di portofolio ini:
   - latar biru malam bergradien + bintang + kilat diagonal (bukan krim/pink);
   - telepon bergagang emas tebal sebagai satu-satunya gambar besar di layar
     pertama, dengan badge "H5 & APK" mengambang;
   - H1 kondensasi kapital bergradien emas dengan bayangan keras (poster),
     bukan sans humanis biasa;
   - nav berbentuk pil emas di bawah topbar (dock dipindah ke atas karena
     bilah bawah dipakai CTA H5/APK);
   - CTA H5 hijau pekat (warna tombol unduh referensi) dan CTA APK emas.

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

:root{
  --s-midnight:#04182e;
  --s-deep:#061f3a;
  --s-deep-2:#0a2f52;
  --s-sky:#0f4d7d;
  --s-sky-2:#14618f;
  --s-azure:#38a8ff;
  --s-azure-soft:#a8d8ff;
  --s-ivory:#f8f3e4;
  --s-mute:#a9c1d6;
  --s-mute-2:#7f9cb5;
  --s-gold:#ffc948;
  --s-gold-2:#ffb01f;
  --s-gold-deep:#d98a08;
  --s-gold-soft:#ffe6a8;
  --s-green:#1fbe4a;
  --s-green-deep:#0d8a31;
  --s-green-dark:#086426;
  --s-line:rgba(255,201,72,.28);
  --s-line-soft:rgba(168,216,255,.16);
  --s-panel:rgba(9,42,71,.72);
  --s-panel-2:rgba(7,32,55,.86);
  --s-shadow:0 22px 48px rgba(2,10,20,.55);
  --s-shadow-sm:0 10px 24px rgba(2,10,20,.38);
  --s-display:"Arial Black","Helvetica Neue",Impact,"Trebuchet MS",sans-serif;
  --s-text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --s-mono:ui-monospace,SFMono-Regular,Menlo,"Courier New",monospace;
  --s-rim:linear-gradient(180deg,#ffe9a8 0%,#ffc948 42%,#d98a08 100%);
  --s-h5:linear-gradient(180deg,#2fd964 0%,#1fbe4a 46%,#0d8a31 100%);
  --s-apk:linear-gradient(180deg,#ffe49a 0%,#ffc948 44%,#e09208 100%);
}

/* ---------- dasar halaman ---------- */
html{background:#04182e}
body.variant-appfirst{
  --bg:#04182e;
  --bg2:#061f3a;
  --panel:rgba(9,42,71,.72);
  --text:var(--s-ivory);
  --muted:var(--s-mute);
  --accent:var(--s-azure);
  --accent2:var(--s-gold);
  --line:var(--s-line);
  --display:var(--s-display);
  --body:var(--s-text);
  --radius:16px;
  background:
    radial-gradient(760px 420px at 84% -6%, rgba(56,168,255,.24) 0%, rgba(56,168,255,0) 62%),
    radial-gradient(680px 380px at 4% 4%, rgba(255,201,72,.16) 0%, rgba(255,201,72,0) 60%),
    radial-gradient(900px 620px at 50% 104%, rgba(31,190,74,.13) 0%, rgba(31,190,74,0) 62%),
    linear-gradient(180deg,#06203c 0%,#0b3f68 30%,#0f5486 56%,#08294a 100%);
  background-attachment:fixed;
  color:var(--s-ivory);
  font-family:var(--s-text);
  font-size:16px;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
  overflow-x:clip;
}

/* bintang + kilat diagonal menggantikan pola konfeti gelap bawaan */
body.variant-appfirst::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 62% 42%, rgba(168,216,255,.45) 0 1px, transparent 1.8px),
    radial-gradient(circle at 38% 72%, rgba(255,201,72,.34) 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 64%, rgba(255,255,255,.34) 0 1px, transparent 1.7px);
  background-size:260px 260px,340px 340px,420px 420px,300px 300px;
  background-position:0 0,80px 120px,160px 40px,40px 200px;
}
/* kilat: dua garis tipis diagonal, hanya di area atas */
body.variant-appfirst::after{
  content:"";position:fixed;left:-10%;top:-4%;width:120%;height:520px;z-index:0;pointer-events:none;
  background:
    linear-gradient(112deg,transparent 0 46%,rgba(168,216,255,.20) 46% 46.5%,transparent 46.5% 100%),
    linear-gradient(112deg,transparent 0 52%,rgba(255,201,72,.16) 52% 52.4%,transparent 52.4% 100%);
  filter:blur(.4px);
  opacity:.7;
}
body.variant-appfirst>*{position:relative;z-index:1}
body.variant-appfirst .wrap{width:min(1140px,100% - 36px)}
::selection{background:var(--s-gold);color:#08223b}
a{color:var(--s-gold-soft)}
a:hover{color:#fff}

/* ---------- tipografi ---------- */
body.variant-appfirst h1,
body.variant-appfirst h2,
body.variant-appfirst h3{
  font-family:var(--s-display);
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.98;
  text-shadow:none;
}
body.variant-appfirst h2{
  font-size:clamp(22px,2.6vw,32px);
  background:linear-gradient(180deg,#fff6d8 0%,var(--s-gold) 58%,#e09208 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
body.variant-appfirst h3{font-size:15px;color:var(--s-ivory);letter-spacing:.02em}
body.variant-appfirst p{color:var(--s-mute)}
.kicker,.eyebrow,.label{
  font-family:var(--s-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--s-gold);
}
.sec-head{margin:0 0 26px}
.sec-head p{color:var(--s-mute);font-size:14px}
.sec-head.left{text-align:left}

/* ornamen sayap kuil di bawah judul section */
.sec-head h2{position:relative;display:inline-block;padding:0 26px}
.sec-head h2::before,
.sec-head h2::after{
  content:"";position:absolute;top:52%;width:18px;height:2px;
  background:linear-gradient(90deg,transparent,var(--s-gold));
  opacity:.75;
}
.sec-head h2::before{left:0}
.sec-head h2::after{right:0;transform:scaleX(-1)}
.sec-head.left h2{padding-left:0}
.sec-head.left h2::before{display:none}

/* ---------- strip kebijakan (wajib: slot / resmi / link alternatif) ---------- */
body.variant-appfirst .policy-strip{
  background:linear-gradient(180deg,var(--s-gold) 0%,var(--s-gold-2) 62%,#e09208 100%);
  border-bottom:1px solid #b06f04;
  color:#08223b;
  font-family:var(--s-mono);
  font-size:10px;
  letter-spacing:.08em;
}
body.variant-appfirst .policy-strip-inner{padding:8px 0;gap:9px}
body.variant-appfirst .policy-badge{color:#08223b;font-weight:800}
body.variant-appfirst .policy-tag{
  border:1px solid rgba(8,34,59,.45);
  color:#08223b;
  background:rgba(255,255,255,.28);
  border-radius:999px;
  padding:3px 9px;
}
body.variant-appfirst .policy-link{
  color:#08223b;border:1px solid rgba(8,34,59,.5);
  background:rgba(255,255,255,.5);border-radius:999px;
  padding:5px 11px;min-height:28px;font-weight:700;
  text-decoration:none;
}
body.variant-appfirst .policy-link:hover{background:#08223b;color:var(--s-gold)}
body.variant-appfirst .policy-note{color:rgba(8,34,59,.72);font-weight:700}

/* ---------- header ---------- */
body.variant-appfirst .ap-header{
  position:sticky;top:0;z-index:70;
  background:linear-gradient(180deg,rgba(5,24,44,.97),rgba(6,31,58,.92));
  border-bottom:1px solid var(--s-line);
  box-shadow:0 14px 30px rgba(2,10,20,.45);
  backdrop-filter:blur(12px);
}
body.variant-appfirst .ap-topbar{min-height:70px;gap:14px}
body.variant-appfirst .ap-brand{display:flex;align-items:center}
body.variant-appfirst .brand-logo,
body.variant-appfirst .ap-brand-logo{
  height:54px;width:auto;max-width:min(260px,50vw);object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(2,10,20,.55));
}
body.variant-appfirst .ap-status{
  margin-left:auto;font-family:var(--s-mono);font-size:9px;letter-spacing:.1em;
  color:var(--s-mute);text-transform:uppercase;
}
body.variant-appfirst .ap-dot{
  background:var(--s-green);box-shadow:0 0 0 4px rgba(31,190,74,.18);
}
body.variant-appfirst .ap-help{
  font-family:var(--s-display);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;
  color:var(--s-gold);border:1px solid var(--s-line);
  border-radius:999px;padding:9px 15px;min-height:38px;
  display:inline-flex;align-items:center;
  background:rgba(10,47,82,.6);
}
body.variant-appfirst .ap-help:hover{background:var(--s-gold);color:#08223b;border-color:var(--s-gold)}

/* dock dipindah ke atas sebagai baris pil emas, rata dengan kolom konten */
body.variant-appfirst .ap-dock{
  position:static;left:auto;right:auto;bottom:auto;
  display:flex;gap:6px;align-items:center;
  padding:0 max(13px,calc((100% - 1140px)/2)) 10px;margin:0;
  border:0;border-radius:0;
  background:none;box-shadow:none;
  overflow-x:auto;scrollbar-width:none;
}
body.variant-appfirst .ap-dock::-webkit-scrollbar{display:none}
body.variant-appfirst .ap-dock a{
  flex:0 0 auto;flex-direction:row;gap:7px;min-width:0;
  padding:7px 12px;border-radius:999px;
  border:1px solid var(--s-line-soft);
  background:rgba(8,34,59,.55);
  color:var(--s-mute);font-family:var(--s-display);font-size:9px;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  min-height:34px;align-items:center;
}
body.variant-appfirst .ap-dock a span{
  font-family:var(--s-mono);font-size:8px;opacity:.55;color:var(--s-gold)
}
body.variant-appfirst .ap-dock a:hover{border-color:var(--s-gold);color:var(--s-ivory)}
body.variant-appfirst .ap-dock a[aria-current="page"]{
  background:rgba(255,201,72,.16);border-color:var(--s-gold);color:var(--s-ivory);
}
body.variant-appfirst .ap-dock .ap-dock-cta{
  background:var(--s-h5);color:#04220f;border:1px solid var(--s-green-dark);
  font-weight:800;box-shadow:0 4px 0 var(--s-green-dark);min-height:34px;
}

/* ---------- hero ---------- */
body.variant-appfirst .ap-hero{
  position:relative;
  padding:46px 0 44px;overflow:hidden;
  background:
    linear-gradient(96deg,rgba(4,18,32,.9) 0%,rgba(4,18,32,.62) 42%,rgba(4,18,32,.12) 66%,rgba(4,18,32,0) 82%),
    radial-gradient(760px 380px at 80% 4%, rgba(96,190,255,.42) 0%, rgba(96,190,255,0) 66%),
    radial-gradient(520px 320px at 8% 96%, rgba(255,201,72,.14) 0%, rgba(255,201,72,0) 72%);
  border-bottom:1px solid var(--s-line-soft);
}
body.variant-appfirst .ap-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url(hero-m-520.webp);
  background-repeat:no-repeat;background-position:62% -120px;background-size:min(820px,76vw) auto;
  opacity:.07;filter:blur(11px) saturate(1.15);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
}
body.variant-appfirst .ap-hero>.wrap{position:relative;z-index:1}
body.variant-appfirst .ap-hero-grid{gap:34px;align-items:center}
body.variant-appfirst .ap-kicker{
  color:var(--s-azure-soft);font-size:10px;letter-spacing:.2em;margin:0 0 12px;
}
body.variant-appfirst .ap-hero h1{
  font-size:clamp(44px,5.6vw,76px);
  text-transform:uppercase;
  background:linear-gradient(180deg,#fffbea 0%,#ffe9a8 34%,var(--s-gold) 68%,#e08f06 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 0 rgba(4,18,32,.85)) drop-shadow(0 12px 26px rgba(2,10,20,.55));
  margin:0 0 4px;
}
body.variant-appfirst .ap-deck{
  color:#d5e6f5;font-size:15.5px;line-height:1.68;max-width:560px;margin:16px 0 0;
  border-left:3px solid var(--s-gold);padding-left:14px;
}
body.variant-appfirst .chips{margin:16px 0 0;gap:7px}
body.variant-appfirst .chips span{
  font-family:var(--s-mono);font-size:9px;letter-spacing:.05em;
  border:1px solid var(--s-line-soft);border-radius:999px;
  background:rgba(8,34,59,.66);color:var(--s-azure-soft);padding:5px 10px;
}
body.variant-appfirst .ap-hero-actions{gap:10px;margin:22px 0 0}
body.variant-appfirst .ap-micro{
  font-family:var(--s-mono);font-size:9px;letter-spacing:.06em;
  color:var(--s-mute-2);margin:14px 0 0;
}

/* tombol: H5 hijau pekat (warna CTA referensi), APK emas */
body.variant-appfirst .btn{
  font-family:var(--s-display);border-radius:14px;letter-spacing:.04em;
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}
body.variant-appfirst .btn-lg{min-height:58px;padding:0 28px;font-size:14.5px}
body.variant-appfirst .btn-primary{
  background:var(--s-h5);color:#04220f;border:2px solid var(--s-green-dark);
  box-shadow:0 6px 0 var(--s-green-dark),0 12px 26px rgba(8,100,38,.34);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
body.variant-appfirst .btn-ghost{
  background:var(--s-apk);color:#3b2200;border:2px solid #a96a04;
  box-shadow:0 6px 0 #a96a04,0 12px 26px rgba(217,138,8,.28);
}
body.variant-appfirst .btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
body.variant-appfirst .btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.4)}

/* telepon = satu-satunya gambar besar di layar pertama */
body.variant-appfirst .ap-phone{
  position:relative;width:min(348px,100%);justify-self:center;
  border:0;border-radius:44px;padding:11px;
  background:var(--s-rim);
  box-shadow:
    0 0 0 2px rgba(6,24,42,.9),
    0 26px 60px rgba(2,10,20,.6),
    0 0 96px rgba(96,190,255,.34);
}
body.variant-appfirst .ap-phone::before{
  content:"";position:absolute;inset:-16px;border-radius:56px;z-index:-1;
  background:radial-gradient(circle at 50% 40%,rgba(56,168,255,.30),rgba(56,168,255,0) 68%);
}
body.variant-appfirst .ap-phone-screen{
  border-radius:34px;overflow:hidden;aspect-ratio:9/16;
  background:linear-gradient(165deg,var(--s-sky),var(--s-midnight) 74%);
  box-shadow:inset 0 0 0 2px rgba(4,18,32,.85);
}
body.variant-appfirst .ap-phone-screen img,
body.variant-appfirst .ap-phone-pic,
body.variant-appfirst.img-framed .ap-phone-screen img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  border:0;border-radius:0;outline:0;
}
body.variant-appfirst .ap-phone-bar{
  color:#4a3002;font-family:var(--s-mono);font-size:8px;letter-spacing:.18em;
  padding:9px 0 2px;text-transform:uppercase;font-weight:800;
}
body.variant-appfirst .ap-phone-bar span:first-child{background:#8a5c05;opacity:.6}
/* badge mengambang di gagang telepon */
body.variant-appfirst .ap-phone-screen::after{
  content:"H5 & APK";position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-family:var(--s-display);font-size:10px;letter-spacing:.12em;
  padding:6px 13px;border-radius:999px;
  background:rgba(4,18,32,.78);color:var(--s-gold);
  border:1px solid var(--s-line);backdrop-filter:blur(4px);
}
body.variant-appfirst .ap-phone-screen{position:relative}

/* ---------- section umum ---------- */
body.variant-appfirst .section{
  padding:60px 0;border-bottom:1px solid var(--s-line-soft);
}
body.variant-appfirst .section:nth-of-type(even){
  background:linear-gradient(180deg,rgba(4,18,32,.42),rgba(6,31,58,.30));
}
body.variant-appfirst .section-note{color:var(--s-mute-2);font-size:11px}
body.variant-appfirst .sec-links a{
  color:var(--s-gold-soft);font-family:var(--s-display);font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;text-decoration:none;
  border-bottom:1px solid var(--s-line);padding-bottom:2px;
}

/* ---------- ringkasan (summary) ---------- */
body.variant-appfirst .ap-summary{gap:22px}
body.variant-appfirst .ap-card{
  border:1px solid var(--s-line);border-radius:18px;
  background:linear-gradient(165deg,rgba(10,47,82,.82),rgba(4,18,32,.82));
  padding:22px 24px;box-shadow:var(--s-shadow-sm);
  position:relative;overflow:hidden;
}
body.variant-appfirst .ap-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--s-gold-soft),var(--s-gold-deep));
}
body.variant-appfirst .ap-card p{font-size:14px;line-height:1.7;color:#cfe2f2}
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{
  border:1px solid var(--s-line-soft);border-radius:12px;
  background:rgba(6,31,58,.72);color:var(--s-mute);
  font-size:11px;padding:10px 12px;
}
body.variant-appfirst .ap-fact-chips b{color:var(--s-gold);font-family:var(--s-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- rute ---------- */
body.variant-appfirst .route-grid{gap:14px}
body.variant-appfirst .route-card{
  border:1px solid var(--s-line-soft);border-radius:20px;
  background:linear-gradient(170deg,rgba(10,47,82,.78),rgba(4,18,32,.88));
  padding:22px;min-height:196px;
  box-shadow:var(--s-shadow-sm);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
body.variant-appfirst .route-card:hover{
  transform:translateY(-4px);border-color:var(--s-gold);
  box-shadow:0 22px 44px rgba(2,10,20,.5),0 0 0 1px rgba(255,201,72,.24);
}
body.variant-appfirst .route-card.primary{
  background:linear-gradient(165deg,rgba(20,97,143,.92),rgba(6,31,58,.94));
  border-color:var(--s-gold);
}
body.variant-appfirst .route-no{
  color:#5d3d02;background:var(--s-rim);border-radius:999px;
  padding:4px 10px;font-size:8px;letter-spacing:.14em;font-weight:800;
  display:inline-block;align-self:flex-start;width:fit-content;
}
body.variant-appfirst .route-card h3{
  font-size:20px;margin:14px 0 8px;
  background:linear-gradient(180deg,#fff6d8,var(--s-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
body.variant-appfirst .route-card p{font-size:12.5px;color:var(--s-mute);line-height:1.62}
body.variant-appfirst .route-link{
  border-top:1px solid var(--s-line-soft);margin-top:16px;padding-top:11px;
  color:var(--s-gold-soft);font-size:10px;letter-spacing:.08em;
}
body.variant-appfirst .route-card.primary .route-link{color:#d8f8e2}

/* ---------- fakta ---------- */
body.variant-appfirst .facts{
  border:1px solid var(--s-line-soft);border-radius:18px;overflow:hidden;
  background:rgba(6,31,58,.66);gap:0;
}
body.variant-appfirst .facts div{
  padding:16px 18px;border-right:1px solid var(--s-line-soft);
  border-bottom:1px solid var(--s-line-soft);
}
body.variant-appfirst .facts span{
  font-family:var(--s-mono);font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--s-mute-2);
}
body.variant-appfirst .facts b{
  display:block;font-family:var(--s-display);font-size:13.5px;
  color:var(--s-gold);margin-top:6px;word-break:break-word;line-height:1.4;
}

/* ---------- showcase (artwork sky99) ---------- */
body.variant-appfirst .sec-showcase{
  position:relative;padding-top:52px;overflow:hidden;
}
body.variant-appfirst .sec-showcase::before{
  content:"";position:absolute;inset:-8% -2% 0;z-index:0;pointer-events:none;
  background-image:url(tile-temple.webp);
  background-repeat:no-repeat;background-position:50% 24%;background-size:cover;
  opacity:.13;filter:blur(7px) saturate(.92);
  mask-image:radial-gradient(120% 88% at 50% 4%,#000 0%,rgba(0,0,0,.45) 52%,transparent 82%);
  -webkit-mask-image:radial-gradient(120% 88% at 50% 4%,#000 0%,rgba(0,0,0,.45) 52%,transparent 82%);
}
body.variant-appfirst .sec-showcase>.wrap{position:relative;z-index:1}
body.variant-appfirst .h03-tiles{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px;
}
body.variant-appfirst .h03-tile{
  position:relative;margin:0;border-radius:18px;overflow:hidden;
  border:1px solid var(--s-line);background:rgba(6,31,58,.8);
  box-shadow:var(--s-shadow-sm);
}
body.variant-appfirst .h03-tile::after{
  content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,201,72,.22),inset 0 -50px 50px -30px rgba(4,18,32,.85);
}
body.variant-appfirst .h03-tile img{
  display:block;width:100%;height:300px;object-fit:cover;
  object-position:50% 5%;transition:transform .3s ease;
}
body.variant-appfirst .h03-tile:hover img{transform:scale(1.04)}
body.variant-appfirst .h03-tile figcaption{
  position:absolute;left:10px;bottom:9px;z-index:2;
  font-family:var(--s-mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--s-gold-soft);
  background:rgba(4,18,32,.72);border:1px solid var(--s-line-soft);
  border-radius:999px;padding:3px 9px;
}
body.variant-appfirst .h03-band{
  position:relative;margin:20px 0 0;border-radius:18px;overflow:hidden;
  border:1px solid var(--s-line);box-shadow:var(--s-shadow-sm);
}
body.variant-appfirst .h03-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,20,38,.78) 0%,rgba(6,40,70,.46) 42%,rgba(4,18,32,.9) 100%);
}
body.variant-appfirst .h03-band img{
  display:block;width:100%;height:auto;max-height:260px;object-fit:cover;
  filter:brightness(.8) saturate(.92) contrast(1.03);
}
body.variant-appfirst .h03-band figcaption{
  position:relative;z-index:2;
  font-family:var(--s-mono);font-size:9px;letter-spacing:.09em;
  color:var(--s-gold-soft);padding:10px 14px;background:rgba(4,18,32,.86);
  border-top:1px solid var(--s-line-soft);
}

/* ---------- promosi / activities ---------- */
body.variant-appfirst .card-grid{gap:14px}
body.variant-appfirst .promo-card{
  border:1px solid var(--s-line-soft);border-radius:18px;
  background:linear-gradient(170deg,rgba(10,47,82,.72),rgba(4,18,32,.88));
  padding:16px;box-shadow:var(--s-shadow-sm);
}
body.variant-appfirst .promo-card img{
  border-radius:12px;aspect-ratio:16/9;object-fit:cover;
  border:1px solid var(--s-line-soft);
}
body.variant-appfirst .promo-card h3{color:var(--s-ivory);margin:6px 0 6px;font-size:15px}
body.variant-appfirst .promo-card p{font-size:12.5px;color:var(--s-mute);line-height:1.62}
body.variant-appfirst .promo-card .label{color:var(--s-gold)}
body.variant-appfirst .empty{
  border:1px dashed var(--s-line);border-radius:18px;
  background:rgba(6,31,58,.56);padding:40px 20px;
}
body.variant-appfirst .empty h2{font-size:24px}
body.variant-appfirst .empty p{color:var(--s-mute);max-width:560px;margin:0 auto 18px}

/* ---------- kepercayaan / trust ---------- */
body.variant-appfirst .trust-list{gap:12px}
body.variant-appfirst .trust-list li{
  border:1px solid var(--s-line-soft);border-radius:16px;
  background:linear-gradient(160deg,rgba(10,47,82,.62),rgba(4,18,32,.82));
  padding:16px 18px;grid-template-columns:46px 1fr;
}
body.variant-appfirst .trust-list li span{
  font-family:var(--s-display);font-size:13px;color:#08223b;
  background:var(--s-rim);border-radius:10px;width:34px;height:34px;
  display:grid;place-items:center;
}
body.variant-appfirst .trust-list li p{font-size:13px;color:#cfe2f2;line-height:1.66}

/* ---------- istilah / terms ---------- */
body.variant-appfirst .terms-box{
  border:1px solid var(--s-line-soft);border-radius:18px;
  background:rgba(6,31,58,.6);padding:20px 22px;
}
body.variant-appfirst .terms-label{
  font-family:var(--s-mono);font-size:9px;letter-spacing:.14em;
  color:var(--s-gold);margin:0 0 8px;
}
body.variant-appfirst .terms-box .chips span{
  border-style:dashed;color:var(--s-azure-soft);background:rgba(8,34,59,.7);
}
body.variant-appfirst .edition-note{
  border-left:2px solid var(--s-gold);padding-left:12px;margin-top:12px;
}
body.variant-appfirst .edition-note p:last-child{font-size:12.5px;color:var(--s-mute);margin:0}

/* ---------- langkah / steps ---------- */
body.variant-appfirst .ap-steps li{
  border:1px solid var(--s-line-soft);border-radius:16px;
  background:linear-gradient(150deg,rgba(10,47,82,.68),rgba(4,18,32,.84));
  padding:15px 17px;
}
body.variant-appfirst .ap-steps h3{color:var(--s-ivory);font-size:13.5px;margin:0 0 4px}
body.variant-appfirst .ap-steps p{font-size:12.5px;color:var(--s-mute);margin:0;line-height:1.62}
body.variant-appfirst .ap-tick{
  width:15px;height:15px;margin-top:3px;border-radius:50%;
  background:var(--s-rim);box-shadow:0 0 0 3px rgba(255,201,72,.16);
  position:relative;
}
body.variant-appfirst .ap-tick::after{
  content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;
  border-right:2px solid #08223b;border-bottom:2px solid #08223b;
  transform:rotate(40deg);
}

/* ---------- FAQ ---------- */
body.variant-appfirst .ap-faq article{
  border:1px solid var(--s-line-soft);border-radius:16px;
  background:rgba(6,31,58,.62);padding:16px 18px;
}
body.variant-appfirst .ap-faq article>span{
  font-family:var(--s-display);font-size:11px;color:#08223b;
  background:var(--s-rim);border-radius:9px;width:26px;height:26px;
  display:grid;place-items:center;
}
body.variant-appfirst .ap-faq h3{
  font-size:13.5px;color:var(--s-ivory);margin:0 0 5px;line-height:1.45;
}
body.variant-appfirst .ap-faq p{font-size:12.5px;color:var(--s-mute);margin:0;line-height:1.66}

/* ---------- halaman dalam (page hero) ---------- */
body.variant-appfirst .variant-page-hero{
  padding:52px 0 40px;text-align:left;border-bottom:1px solid var(--s-line-soft);
  background:
    radial-gradient(520px 260px at 88% 0%, rgba(56,168,255,.20), rgba(56,168,255,0) 68%),
    linear-gradient(180deg,rgba(4,18,32,.5),rgba(4,18,32,0));
}
body.variant-appfirst .variant-page-hero .eyebrow{color:var(--s-azure-soft);margin-bottom:12px}
body.variant-appfirst .variant-page-hero h1{
  font-size:clamp(32px,4vw,54px);
  background:linear-gradient(180deg,#fffbea 0%,var(--s-gold) 62%,#e08f06 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(4,18,32,.8));
}
body.variant-appfirst .variant-page-hero .deck{
  color:#cfe2f2;font-size:15px;max-width:640px;margin:14px 0 0;
}
body.variant-appfirst .variant-page-hero .hero-actions{margin-top:20px}
body.variant-appfirst .variant-page-hero .chips span{
  border:1px solid var(--s-line-soft);border-radius:999px;
  background:rgba(8,34,59,.66);color:var(--s-azure-soft);padding:5px 10px;
}

/* ---------- panduan + info ---------- */
body.variant-appfirst .variant-split{gap:30px}
body.variant-appfirst .prose h2{
  font-size:clamp(20px,2.2vw,26px);margin:30px 0 10px;padding:0;
}
body.variant-appfirst .prose h2::before,
body.variant-appfirst .prose h2::after{display:none}
body.variant-appfirst .prose p,
body.variant-appfirst .prose li{font-size:14px;color:#cfe2f2;line-height:1.72}
body.variant-appfirst .prose ul{padding-left:20px}
body.variant-appfirst .prose li::marker{color:var(--s-gold)}
body.variant-appfirst .variant-prose{max-width:840px}
body.variant-appfirst .aside{gap:14px}
body.variant-appfirst .aside .card{
  border:1px solid var(--s-line-soft);border-radius:16px;
  background:rgba(6,31,58,.7);padding:16px 18px;
}
body.variant-appfirst .aside .card .label{color:var(--s-gold)}
body.variant-appfirst .aside .card p:last-child{font-size:12.5px;color:var(--s-mute);margin:0;line-height:1.62}
body.variant-appfirst .table-wrap{
  border:1px solid var(--s-line-soft);border-radius:16px;
  background:rgba(6,31,58,.62);overflow:hidden;
}
body.variant-appfirst table{font-size:12.5px;min-width:0}
body.variant-appfirst th{
  background:rgba(20,97,143,.55);color:var(--s-gold-soft);
  font-family:var(--s-mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 12px;border-bottom:1px solid var(--s-line-soft);
}
body.variant-appfirst td{
  padding:11px 12px;color:#cfe2f2;border-bottom:1px solid rgba(168,216,255,.1);
  vertical-align:top;
}
body.variant-appfirst tr:last-child td{border-bottom:0}

/* ---------- footer ---------- */
body.variant-appfirst .site-footer.av-footer{
  border-top:1px solid var(--s-line);
  background:linear-gradient(180deg,rgba(4,18,32,.9),#03111f);
}
body.variant-appfirst .av-footer-cta{
  background:var(--s-rim);color:#08223b;padding:18px 0;
  border-bottom:1px solid #b06f04;
}
body.variant-appfirst .av-footer-cta p{
  color:#08223b;font-family:var(--s-display);font-size:14px;
  text-transform:uppercase;letter-spacing:.02em;
}
body.variant-appfirst .av-footer-cta .btn-primary{
  background:linear-gradient(180deg,#0d8a31,#086426);color:#eafff0;border-color:#052f13;
  box-shadow:0 4px 0 #052f13;
}
body.variant-appfirst .av-footer-cta .btn-ghost{
  background:rgba(8,34,59,.92);color:var(--s-gold);border-color:#08223b;box-shadow:none;
}
body.variant-appfirst .av-footer-grid{padding:40px 0 22px;gap:26px}
body.variant-appfirst .av-footer-brand img{
  width:auto;height:72px;max-width:240px;object-fit:contain;margin:0 0 12px;
  filter:drop-shadow(0 4px 12px rgba(2,10,20,.5));
}
body.variant-appfirst .av-footer-brand p{font-size:11.5px;color:var(--s-mute-2);max-width:320px;line-height:1.66}
body.variant-appfirst .av-footer-col h3{
  font-family:var(--s-mono);font-size:8.5px;letter-spacing:.16em;
  color:var(--s-gold);margin:0 0 10px;text-transform:uppercase;
}
body.variant-appfirst .av-footer-col a{
  font-size:10.5px;color:var(--s-mute);padding:4px 0;text-decoration:none;
}
body.variant-appfirst .av-footer-col a:hover{color:var(--s-gold)}
body.variant-appfirst .av-footer-bottom{
  border-top:1px solid var(--s-line-soft);color:var(--s-mute-2);
  font-size:9px;padding:14px 0 24px;
}
body.variant-appfirst .age{
  border:1px solid var(--s-line);color:var(--s-gold);
  font-family:var(--s-mono);width:24px;height:24px;
}

/* ---------- bilah CTA bawah (mobile) ---------- */
body.variant-appfirst .bottom-cta{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  gap:9px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(4,18,32,.97),rgba(3,15,27,.99));
  border-top:1px solid var(--s-line);
  box-shadow:0 -14px 30px rgba(2,10,20,.5);
}
body.variant-appfirst .bottom-cta .btn{
  flex:1;min-height:52px;font-size:12.5px;border-radius:14px;letter-spacing:.05em;
}

/* ---------- responsif ---------- */
@media (max-width:1080px){
  body.variant-appfirst .h03-tiles{grid-template-columns:repeat(2,1fr)}
  body.variant-appfirst .h03-tile img{height:236px}
}
@media (max-width:900px){
  body.variant-appfirst .ap-hero{padding:28px 0 34px}
  body.variant-appfirst .ap-hero-grid{gap:22px}
  body.variant-appfirst .ap-phone{width:min(300px,100%)}
  body.variant-appfirst .ap-deck{font-size:14.5px}
  body.variant-appfirst .ap-status{display:none}
  body.variant-appfirst .sec-head h2{padding:0 18px;font-size:clamp(20px,5vw,26px)}
  body.variant-appfirst .facts{grid-template-columns:1fr 1fr}
  body.variant-appfirst .route-card{min-height:0;padding:18px}
  body.variant-appfirst .av-footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  body.variant-appfirst{
    font-size:15px;
    padding-bottom:calc(104px + env(safe-area-inset-bottom));
  }
  body.variant-appfirst .wrap{width:calc(100% - 26px)}
  body.variant-appfirst .policy-strip-inner{gap:6px;padding:7px 0;font-size:9px}
  body.variant-appfirst .policy-link{padding:5px 9px;font-size:9px}
  body.variant-appfirst .policy-note{display:none}
  body.variant-appfirst .ap-topbar{min-height:60px}
  body.variant-appfirst .brand-logo,
  body.variant-appfirst .ap-brand-logo{height:42px;max-width:min(190px,50vw)}
  body.variant-appfirst .ap-help{padding:8px 12px;font-size:9px;min-height:34px}
  body.variant-appfirst .ap-dock{
    gap:5px;padding:0 0 9px;
    -webkit-overflow-scrolling:touch;
  }
  body.variant-appfirst .ap-dock a{font-size:8.5px;padding:6px 10px;min-height:32px}
  body.variant-appfirst .ap-hero h1{font-size:clamp(34px,10vw,44px)}
  body.variant-appfirst .hero-logo-lockup{margin:0 0 10px;gap:8px}
  body.variant-appfirst .hero-brand-logo{max-height:56px;max-width:min(150px,46vw)}
  body.variant-appfirst .ap-kicker{font-size:9px}
  body.variant-appfirst .ap-deck{
    font-size:13.5px;line-height:1.62;padding-left:11px;
  }
  body.variant-appfirst .chips span{font-size:8px;padding:4px 8px}
  body.variant-appfirst .ap-hero-actions{flex-direction:column;align-items:stretch;gap:9px}
  body.variant-appfirst .ap-hero-actions .btn{width:100%;min-height:52px}
  body.variant-appfirst .ap-phone{width:min(300px,90%)}
  body.variant-appfirst .ap-phone-screen{aspect-ratio:4/5}
  body.variant-appfirst .ap-phone-screen::after{font-size:9px;padding:5px 11px;bottom:11px}
  body.variant-appfirst .section{padding:38px 0}
  body.variant-appfirst .h03-tiles{grid-template-columns:1fr 1fr;gap:9px}
  body.variant-appfirst .h03-tile img{height:186px}
  body.variant-appfirst .h03-tile figcaption{font-size:7.5px;padding:2px 7px;left:7px;bottom:7px}
  body.variant-appfirst .h03-band img{max-height:190px}
  body.variant-appfirst .sec-head h2{padding:0 14px}
  body.variant-appfirst .sec-head h2::before,
  body.variant-appfirst .sec-head h2::after{width:10px}
  body.variant-appfirst .facts{grid-template-columns:1fr}
  body.variant-appfirst .facts div{border-right:0}
  body.variant-appfirst .ap-summary{grid-template-columns:1fr}
  body.variant-appfirst .route-grid{grid-template-columns:1fr}
  body.variant-appfirst .card-grid{grid-template-columns:1fr}
  body.variant-appfirst .trust-list li{grid-template-columns:38px 1fr;padding:14px}
  body.variant-appfirst .av-footer-grid{grid-template-columns:1fr}
  body.variant-appfirst .av-footer-cta .wrap{flex-direction:column;align-items:flex-start}
  body.variant-appfirst .av-footer-cta .btn{width:100%}
  body.variant-appfirst .av-footer-brand img{height:52px}
  body.variant-appfirst .bottom-cta{display:flex!important}
  body.variant-appfirst .variant-page-hero{padding:34px 0 28px}
  body.variant-appfirst .variant-page-hero h1{font-size:clamp(26px,8vw,36px)}
  body.variant-appfirst .variant-split{grid-template-columns:1fr}
  body.variant-appfirst table{min-width:0}
  body.variant-appfirst thead{display:none}
  body.variant-appfirst tr{
    display:block;border:1px solid var(--s-line-soft);border-radius:12px;
    margin-bottom:8px;padding:8px 10px;background:rgba(6,31,58,.55);
  }
  body.variant-appfirst td{
    display:grid;grid-template-columns:38% 62%;gap:8px;border:0;
    padding:3px 0;font-size:12px;
  }
  body.variant-appfirst td::before{
    content:attr(data-label);font-family:var(--s-mono);font-size:8.5px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--s-mute-2);
  }
  body.variant-appfirst .ap-tick{width:13px;height:13px}
  body.variant-appfirst .ap-tick::after{left:4px;top:1px;width:4px;height:7px}
  body.variant-appfirst .ap-faq article{padding:14px}
  body.variant-appfirst .ap-faq article>span{width:22px;height:22px;font-size:9px}
}
@media (max-width:380px){
  body.variant-appfirst .ap-dock a{font-size:8px;padding:5px 8px}
  body.variant-appfirst .ap-hero h1{font-size:32px}
  body.variant-appfirst .bottom-cta .btn{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  body.variant-appfirst *{transition:none!important;animation:none!important}
}
/* fokus keyboard tetap terlihat di atas latar gelap */
body.variant-appfirst a:focus-visible,
body.variant-appfirst .btn:focus-visible,
body.variant-appfirst button:focus-visible{
  outline:3px solid var(--s-azure);outline-offset:3px;
}