/* Vensix — sistem desain v2. Terinspirasi rdp.sh: hitam pekat, tipografi Geist,
tombol pil putih, aksen biru. Nama variabel lama dipertahankan (--gold dst) biar
semua HTML/JS yang sudah ada tetap jalan tanpa diubah — cuma NILAI-nya diganti. */

/* rdp.sh pakai "Geist Variable" (font variable ASLI dari Vercel, 1 file, semua
   weight), bukan "Geist" biasa dari Google Fonts (static, per-weight) yang
   dipakai sebelumnya -- user berkali-kali komplain fontnya "kurang bagus"
   meski namanya sama "Geist", dan ini penyebabnya: render variable font asli
   emang beda dari rendisi statis Google Fonts. Di-self-host (bukan link ke
   Google Fonts) -- 1 file 69KB gantiin 4 file weight terpisah, SEKALIAN
   ngirit 1 origin eksternal penuh (fonts.googleapis.com+fonts.gstatic.com)
   yang sebelumnya harus di-DNS+TLS-handshake terpisah -- bantu juga soal
   delay awal di koneksi lambat. */
@font-face {
  font-family: 'Geist Variable';
  src: url('/static/Geist-Variable.woff2?v=1') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #0a0a0a;
  --ink-2: #050505;
  --surface: #141414;
  --surface-2: #1a1a1a;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);
  --gold: #3b82f6;        /* aksen (dulu emas, sekarang biru — nama var dipertahankan) */
  --gold-hi: #60a5fa;
  --gold-deep: #2563eb;
  --text: #f5f5f5;
  --muted: #a1a1a1;
  --muted-2: #6b6b6b;
  --ok: #22c55e;
  --warn: #eab308;
  --bad: #ef4444;
  --r: 16px;
  --font-display: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Hero atas dulu pakai CSS scroll-snap per-layar -- diganti total jadi pola
   scrollytelling (video nempel + teks gantian), lihat blok ".scrolly" di
   bawah dekat komentar "BARU". */

body {
  font-family: var(--font-ui);
  background: var(--ink);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

.wrap { width: min(1120px, 92vw); margin: 0 auto; }
/* Container lebih lebar KHUSUS buat CTA band + footer (lihat komentar di landing.html) --
   1120px pas buat paragraf/kartu biar gak kepanjangan baris, tapi bikin footer kelihatan
   cuma isi separuh layar di monitor lebar. Angka ini diukur LANGSUNG dari rdp.sh (bukan
   kira-kira): footer mereka lebar ~1904px di viewport 2000px (margin ~48px/2.4vw tiap
   sisi) -- 1920px/96vw di sini disamain sedekat mungkin ke itu. */
.wrap-wide { width: min(1920px, 96vw); margin: 0 auto; }
a { color: inherit; text-decoration: none; }

/* ---------- teks ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.025em;
  /* Batas bawah (mobile) diukur ulang lawan rdp.sh: headline mereka di viewport
     390px persis 36px. Punya kita sebelumnya mentok di 2.4rem=38.4px -- turun
     ke 2rem=32px (dikit di bawah 36px mereka, sesuai "kecilkan sedikit LAGI"). */
  font-size: clamp(2rem, 6vw, 3.75rem);
}
.emas { color: var(--text); }  /* dulu gradasi emas di satu kata -- ditinggalkan, ikut gaya rdp.sh yang polos */
.lead { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 56ch; }

/* --- halaman teks legal (terms/privacy) --- */
.legal-body { margin-top: 2.2rem; }
.legal-body h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin: 2rem 0 .6rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--muted); line-height: 1.7; }
.legal-body ul { color: var(--muted); line-height: 1.7; margin: .5rem 0 0 1.3rem; }
.legal-body li { margin-bottom: .4rem; }
.kicker {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .78rem; letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 100px;
  padding: .4em .9em; background: rgba(255, 255, 255, .03);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(234, 179, 8, .18); }
.dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }

/* ---------- nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 0; }
.brand { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em;
  display: flex; align-items: center; gap: .55rem; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.brand .mark { width: 28px; height: 28px; display: block; object-fit: contain; }
/* nilai persis dari markup rdp.sh (user kirim langsung): px-3 py-1.5 rounded-full
   text-[15px] font-semibold text-white hover:bg-[#444444] */
.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-links a {
  display: inline-flex; align-items: center;
  padding: .375rem .75rem; border-radius: 100px;
  font-size: 15px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  transition: background-color .15s;
}
.nav-links a:hover { background: #444; }

/* ---------- tombol ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer;
  font-family: var(--font-ui); font-weight: 500; font-size: .92rem;
  padding: .75em 1.4em; border-radius: 100px; border: 1px solid transparent;
  transition: transform .2s cubic-bezier(.2,1,.3,1), box-shadow .2s, background .2s;
}
.btn-emas {
  background: #fff;
  color: #0a0a0a;
}
.btn-emas:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(255, 255, 255, .35); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: rgba(255,255,255,.4); background: rgba(255, 255, 255, .06); }

/* ---------- kartu ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; max-width: 100%; overflow-x: auto;
}
.card-emas { border-color: var(--line-strong); }

/* ---------- kotak kode / kunci ---------- */
.kode {
  font-family: var(--font-mono); font-size: .86rem; line-height: 1.7; max-width: 100%;
  background: #000; border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 1.1rem 1.2rem; color: #d4d4d4; position: relative; overflow-x: auto;
}
.kode pre { white-space: pre; overflow-x: auto; margin: 0; }
.kode .tok-key { color: var(--gold-hi); }
.kode .tok-str { color: #86efac; }
.kode .tok-com { color: var(--muted-2); }
.salin {
  position: absolute; top: .7rem; right: .7rem; cursor: pointer;
  font-family: var(--font-ui); font-size: .78rem; font-weight: 500;
  padding: .35em .8em; border-radius: 8px; color: var(--text);
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.04);
}
.salin:hover { background: rgba(255, 255, 255, .1); }
.salin.ok { color: var(--ok); border-color: rgba(34,197,94,.4); }

/* ---------- angka besar (saldo / statistik) ---------- */
.metric { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
.metric-xl { font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: 1; }
.metric-label { color: var(--muted); font-size: .88rem; margin-top: .4rem; }

/* ---------- tabel ---------- */
table { width: 100%; border-collapse: collapse; }
.card > table, #tabel-harga, #tabel-model, #tbl-key, #tbl-model, #tabel-riwayat { display: table; }
th, td { text-align: left; padding: .85rem 1rem; font-size: .9rem; }
th { color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line); }
td { border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
.rp { font-family: var(--font-mono); color: var(--text); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- form ---------- */
label.field { display: block; margin-bottom: 1rem; }
label.field span { display: block; color: var(--muted); font-size: .86rem; margin-bottom: .4rem; }
input, select {
  width: 100%; font-family: var(--font-ui); font-size: .95rem; color: var(--text);
  background: #000; border: 1px solid var(--line-strong); border-radius: 10px; padding: .75em .9em;
}
input:focus, select:focus { outline: none; border-color: var(--gold); }

/* ---------- tab ---------- */
.tabs { display: flex; gap: .3rem; border: 1px solid var(--line); border-radius: 100px; padding: .3rem;
  width: fit-content; background: rgba(255,255,255,.02); }
.tab { padding: .45em 1.1em; border-radius: 100px; cursor: pointer; font-size: .86rem; color: var(--muted); }
.tab.on { background: rgba(255,255,255,.1); color: var(--text); }

.grid { display: grid; gap: 1rem; }
.grid > * { min-width: 0; }
.g2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.section { padding: clamp(3rem, 8vw, 6rem) 0; max-width: 100%; }
pre { max-width: 100%; }
.muted { color: var(--muted); }
.center { text-align: center; }
.hidden { display: none !important; }

/* Link kolom footer -- gaya sama kayak .nav-links a, tapi class SENDIRI (bukan
   .nav-links) karena .nav-links sengaja disembunyikan di mobile (nav atas,
   lihat @media di bawah) sedangkan kolom link footer harus TETAP kelihatan. */
.footer-links { display: flex; flex-direction: column; gap: .65rem; }
.footer-links a {
  display: inline-flex; align-items: center; color: var(--muted); font-weight: 400; font-size: 14px;
}
.footer-links a:hover { color: var(--text); }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: minmax(0,1fr) !important; }
}

/* reveal sekali saat load */
.rise { opacity: 0; transform: translateY(16px); animation: rise .8s cubic-bezier(.2,1,.3,1) forwards; }
.rise:nth-child(2) { animation-delay: .08s; }
.rise:nth-child(3) { animation-delay: .16s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } }

#paket-grid .card { transition: transform .15s ease, border-color .15s ease; }
#paket-grid .card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
#paket-grid .card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.dot.pending { background: var(--warn); box-shadow: 0 0 0 3px rgba(234, 179, 8, .18);
  animation: denyut 1.6s ease-in-out infinite; }
@keyframes denyut { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot.pending { animation: none; } }

/* =========================================================================
   BARU — pola ala rdp.sh: hero snap per-layar, kartu harga, FAQ, sidebar
   ========================================================================= */

/* --- hero scrollytelling: SATU background nempel di layar (.scrolly-pin,
   position:sticky) sepanjang .scrolly (3 layar tinggi = 300svh). 3 slide teks
   ditumpuk (position:absolute, saling menutup) di dalam .scrolly-pin, JS di
   landing.html hitung progress scroll lalu kasih class .on ke slide yang lagi
   "jatahnya" -- persis pola dipakai rdp.sh: teks melayang diam di satu titik
   utk jarak scroll yang panjang, baru ganti ke teks berikutnya. Dipilih JS
   (bukan CSS animation-timeline+animation-range) karena Firefox belum dukung
   scroll-driven animation sama sekali dan ini bukan hiasan semata -- satu
   jalur kode yang jalan di semua browser lebih gampang dipastikan benar
   daripada rawat CSS-primary + fallback JS sekaligus. */
.scrolly { position: relative; height: 300svh; }
.scrolly-pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; background: #000;
}
/* --hero-p (0..1) di-set JS tiap frame: 0 = video masih berupa KARTU kecil
   (inset+radius 16px), 1 = full-bleed -- efek signatur rdp.sh yang mengembang
   selama ~300px scroll pertama. Default 0 (belum discroll = kartu). */
.scrolly-bg {
  --hero-p: 0;
  position: absolute; inset: 0; z-index: 0; background: #000; overflow: hidden;
  clip-path: inset(calc((1 - var(--hero-p)) * 16px) round calc((1 - var(--hero-p)) * 16px));
}
.scrolly-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scrolly-bg::before {
  /* lapis 2: vignette radial di tengah (pola rdp.sh) -- gelap di fokus tengah,
     memudar ke tepi, di BAWAH lapis linear ::after */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(82% 62% at 50% 45%, rgba(0,0,0,.5), rgba(0,0,0,.26) 55%, transparent);
}
.scrolly-bg::after {
  /* lapis 1 (atas): linear gelap atas-bawah, lebih terang di tengah (pola rdp.sh) */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.1) 50%, rgba(0,0,0,.7));
}
.scrolly-nav { position: relative; z-index: 2; }
/* opacity/transform di-set LANGSUNG lewat inline style oleh JS tiap frame
   (lihat <script> landing.html) -- sengaja BUKAN CSS transition, karena nilai
   ini presisi ngikutin posisi scroll tiap saat, bukan animasi berdurasi tetap
   yang dipicu sekali lalu jalan sendiri. Aturan di sini cuma fallback SEBELUM
   JS sempat jalan (first paint) -- slide pertama kelihatan, sisanya kosong. */
.scrolly-slide {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 1.25rem;
  opacity: 0; transform: scale(.94); pointer-events: none;
}
.scrolly-slide:first-of-type { opacity: 1; transform: scale(1); pointer-events: auto; }
.scrolly-slide .display { max-width: 20ch; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.7); }
/* .lead global (dipakai di luar hero juga) sengaja abu-abu (var(--muted)) buat
   hierarki teks sekunder di atas background polos -- tapi di atas VIDEO, abu-abu
   itu kebaca "gelap"/pudar meski sudah dikasih text-shadow (shadow nambah
   kontras tepi, bukan naikin terang warna aslinya). Override warna KHUSUS di
   sini, jangan ubah .lead global. */
.scrolly-slide .lead { margin: 0 auto; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.75); }
.scrolly-price-card {
  position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: 1.5rem;
  padding: 1rem 1.25rem; background: #fff; color: #0a0a0a; border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 640px; width: calc(100% - 2.5rem); margin: 0 auto;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}
.scrolly-hint {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 1.75rem;
  display: flex; justify-content: center; color: rgba(255,255,255,.55);
  opacity: 1; transition: opacity .35s ease;
}
.scrolly-hint svg { display: block; animation: hint-bounce 1.8s ease-in-out infinite; }
@keyframes hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* pas lagi aktif discroll, sembunyikan tanda -- muncul lagi begitu scroll
   berhenti (event scrollend, lihat <script> di landing.html) */
.scrolly.is-scrolling .scrolly-hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* matikan mekanisme pin+scroll-panjang sepenuhnya -- 3 slide numpuk jadi
     scroll biasa berurutan, gak ada lagi efek "teks melayang" yang berpotensi
     bikin pusing pengguna sensitif gerakan */
  .scrolly { height: auto; }
  .scrolly-pin { position: static; height: auto; overflow: visible; }
  .scrolly-bg { --hero-p: 1; } /* tanpa efek inset-zoom: langsung full-bleed */
  .scrolly-slide {
    position: static; opacity: 1; transform: none; pointer-events: auto; transition: none;
    padding: 4rem 1.25rem;
  }
  .scrolly-price-card { position: static; margin: 1.5rem auto 0; width: 100%; }
  .scrolly-hint { display: none; }
}

/* --- stat tiles: tanpa border, rata tengah (pola rdp.sh) --- */
.stat-tile { background: var(--surface); border: none; border-radius: 16px; padding: 20px;
  min-height: 100px; text-align: center; }
.stat-tile .metric { font-size: 30px; font-weight: 600; }
.stat-tile .metric-label { margin-top: .4rem; font-size: 14px; font-weight: 400; }

/* --- kartu harga (grid, bukan carousel horizontal -- lebih sederhana & bisa dibaca screen reader) ---
   TANPA border (pola rdp.sh): bg #141414 saja. Yang memasangkannya dengan .card
   tetap dapat border dari .card itu sendiri. */
.pricing-card { background: var(--surface); border: none; border-radius: var(--r);
  padding: 1.5rem; display: flex; flex-direction: column; position: relative; }
.pricing-card.best { border-color: var(--gold); }
.pricing-card .badge { position: absolute; top: -1px; left: -1px; right: -1px;
  background: var(--gold); color: #fff; font-size: .78rem; font-weight: 600;
  padding: .4em 1em; border-radius: var(--r) var(--r) 0 0; text-align: center; }
.pricing-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin-bottom: .6rem; }
/* harga pecah ala rdp.sh: simbol kecil (14px) + angka besar (48px/500) + suffix muted.
   Isi teksnya diatur JS (gambarUlangHarga di landing.html) lewat .harga-sym/.price-num. */
.pricing-card .harga { display: flex; align-items: baseline; font-family: var(--font-display);
  font-weight: 500; margin-bottom: 1rem; }
.harga-sym { font-size: 14px; color: var(--muted); margin-right: 3px; }
.pricing-card .harga .price-num { font-size: 48px; font-weight: 500; letter-spacing: -1.2px; line-height: 1.05; }
.harga-suffix { font-size: 16px; color: var(--muted); font-weight: 400; margin-left: 7px; }
.pricing-card .harga small { font-size: .95rem; color: var(--muted); font-weight: 400; }
.pricing-card ul { list-style: none; margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.pricing-card li { font-size: .88rem; color: var(--muted); display: flex; align-items: center; gap: .5em; }
/* tombol beli putih full-width (kartu hosting) */
.btn-buy { display: flex; align-items: center; justify-content: center; width: 100%;
  height: 44px; border-radius: 12px; background: #fff; color: #0a0a0a;
  font-size: 14px; font-weight: 600; margin-top: 1.25rem;
  transition: transform .2s cubic-bezier(.2,1,.3,1), box-shadow .2s; }
.btn-buy:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(255,255,255,.35); }

/* --- FAQ (native <details>, tanpa JS) --- */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
  max-width: 1024px; margin: 2.4rem auto 0; }
@media (max-width: 767px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item { background: #171717; border: 1px solid var(--line); border-radius: 16px;
  padding: 1.1rem 1.25rem; }
.faq-item summary { cursor: pointer; font-weight: 500; list-style: none; display: flex;
  align-items: center; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex-shrink: 0; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 1.2rem;
  font-weight: 400; display: flex; align-items: center; justify-content: center;
  transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--muted); margin-top: .8rem; font-size: 16px; font-weight: 400; line-height: 1.6; }

/* --- CTA band (sebelum footer) --- */
/* SENGAJA tanpa border-top -- body & footer sama persis rgb(10,10,10), gak ada
   garis di SINI (garis mereka cuma di 1 titik: .footer-bottom, lihat bawah).
   TAPI section CTA-nya sendiri PUNYA background sedikit lebih terang dari
   sekitarnya -- diukur presisi lewat getComputedStyle: elemen <section> yang
   bungkus "Ready to get started?" pakai `background:#0d0d0d` (class Tailwind
   `dark:bg-[#0d0d0d]`), beda tipis 3 poin RGB dari `--ink` (#0a0a0a) di
   sekelilingnya. Kelihatannya solid gelap total kalau cuma diliat sekilas, tapi
   itu beneran ada & disengaja -- bukan ilusi. Disamain persis nilainya di sini. */
.cta-band { text-align: center; background: #0d0d0d; padding: 112px 0; }
.cta-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
  border-radius: 6px; font-size: 14px; font-weight: 500; border: 1px solid transparent; }
.cta-btn.primary { background: #ededed; color: #0a0a0a; }
.cta-btn.secondary { background: #1d1d20; color: var(--text); border-color: rgba(255,255,255,.05); }
.cta-btn.secondary:hover { border-color: rgba(255,255,255,.15); }

/* --- footer bottom: 2 baris terpisah, PERSIS pola rdp.sh ---
   Baris 1: status jujur + trigger bahasa/mata uang, DIKELOMPOKKAN ke kiri (bukan
   space-between full-width -- itu bikin trigger-nya kelihatan "ngambang" di
   tengah, sesuai keluhan). Baris 2 (di bawah baris 1): copyright kiri, link
   legal kanan -- baris SENDIRI, bukan digabung satu baris sama status/trigger. */
.footer-bottom {
  display: flex; flex-direction: column; gap: 1.1rem;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.footer-bottom-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.footer-bottom-row:first-child { justify-content: flex-start; }
.footer-bottom-row:last-child { justify-content: space-between; }
.footer-status { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); }
.footer-legal { display: flex; align-items: center; gap: 1.1rem; }
.footer-legal a { font-size: .85rem; color: var(--muted); }
.footer-legal a:hover { color: var(--text); }
.currency-trigger {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: .85rem; font-weight: 600; padding: .45em .9em; border-radius: 100px;
}
.currency-trigger:hover { border-color: var(--line-strong); }
.currency-trigger .flag { font-size: 1rem; line-height: 1; }
.currency-trigger .sep { color: var(--muted); }

/* --- modal bahasa & mata uang tampilan --- */
.currency-modal-backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
/* [hidden] butuh selector lebih spesifik di sini -- class .currency-modal-backdrop
   di atas (display:flex) sama-sama gaya penulis, jadi menang lawan default UA
   stylesheet [hidden]{display:none} kalau gak ditulis eksplisit begini. */
.currency-modal-backdrop[hidden] { display: none; }
.currency-modal {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem; max-width: 440px; width: 100%; max-height: 85vh; overflow-y: auto;
}
.currency-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.currency-modal-head h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.currency-modal-close {
  background: none; border: none; color: var(--muted); font-size: 1.4rem; line-height: 1;
  cursor: pointer; padding: .25rem;
}
.currency-modal-close:hover { color: var(--text); }
.currency-section-label { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-top: 1.4rem; margin-bottom: .8rem; }
.currency-options { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.currency-option {
  display: flex; align-items: center; gap: .55rem;
  background: none; border: 1px solid var(--line); color: var(--text); font: inherit;
  font-size: .88rem; text-align: left; padding: .65em .8em; border-radius: 10px; cursor: pointer;
}
.currency-option:hover { border-color: var(--line-strong); }
.currency-option .code { font-weight: 600; }
.currency-option .flag { font-size: 1.1rem; line-height: 1; }
.currency-option .name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.currency-option .check { flex-shrink: 0; color: var(--gold); visibility: hidden; }
.currency-option[disabled] { cursor: default; }
.currency-option[disabled] .name { color: var(--text); }
.currency-option.active { border-color: var(--gold); background: rgba(59, 130, 246, .1); }
.currency-option.active .check { visibility: visible; }
.currency-modal-close-btn {
  display: block; width: 100%; margin-top: 1.4rem; padding: .75em; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
}
.currency-modal-close-btn:hover { border-color: var(--line-strong); }
.price-num { font-variant-numeric: tabular-nums; }

/* --- layout dashboard (sidebar + konten) --- */
.dash { display: grid; grid-template-columns: 220px minmax(0,1fr); min-height: 100vh; }
.dash-side { border-right: 1px solid var(--line); padding: 1.5rem 1rem; }
.dash-side .brand { padding: 0 .5rem 1.5rem; }
.dash-side nav a { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem;
  border-radius: 8px; color: var(--muted); font-size: .9rem; margin-bottom: .15rem; }
.dash-side nav a:hover { background: rgba(255,255,255,.04); color: var(--text); }
.dash-side nav a.on { background: rgba(59,130,246,.12); color: var(--gold-hi); }
.dash-side .grp-label { font-size: .72rem; letter-spacing: .06em; color: var(--muted-2);
  text-transform: uppercase; padding: 1.2rem .75rem .4rem; }
.dash-main { padding: 1.75rem clamp(1rem, 3vw, 2.5rem); }
@media (max-width: 860px) { .dash { grid-template-columns: 1fr; } .dash-side { display: none; } }

/* --- lokasi & infrastruktur: daftar + panel visual (pola ala rdp.sh), TAPI datanya
   jujur -- gak ada angka ping/uptime dikarang. Peta dunia SENGAJA bukan outline benua
   presisi (gak ada aset peta yang aman dipakai ulang di tangan) -- dipakai pola titik
   jaringan abstrak, lebih toleran kalau posisinya gak pas 100% dibanding outline peta
   yang kalau meleset malah kelihatan "salah/rusak". */
.loc-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 860px) { .loc-wrap { grid-template-columns: 1fr; } }

.loc-list { display: flex; flex-direction: column; gap: .6rem; margin: 1.4rem 0 1.6rem; }
.loc-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.1rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.loc-item.active { border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.06); }
.loc-item .who { display: flex; align-items: center; gap: .7rem; }
.loc-item .flag { font-size: 1.4rem; line-height: 1; }
.loc-item .name { font-weight: 500; font-size: .95rem; }
.loc-item .what { color: var(--muted); font-size: .82rem; margin-top: .1rem; }
.loc-badge { display: inline-flex; align-items: center; gap: .45em; font-size: .8rem;
  padding: .3em .75em; border-radius: 100px; white-space: nowrap; }
.loc-badge.active { color: var(--ok); background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); }
.loc-badge.soon { color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.loc-item.soon .name, .loc-item.soon .flag { opacity: .55; }

.loc-stats { display: flex; gap: 2rem; flex-wrap: wrap; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.loc-stats .metric { font-size: 1.5rem; }

.map-panel { position: relative; border-radius: var(--r); border: 1px solid var(--line);
  background: radial-gradient(circle at 68% 62%, rgba(59,130,246,.16), transparent 55%), #0d0d0d;
  overflow: hidden; min-height: 320px; display: flex; align-items: stretch; }
.map-panel svg { width: 100%; height: 100%; display: block; }
.map-pulse { animation: map-pulse 2.4s ease-out infinite; transform-origin: center; }
@keyframes map-pulse { 0% { r: 5; opacity: .55; } 100% { r: 22; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-pulse { animation: none; opacity: 0; } }
.map-card { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.1rem;
  background: rgba(10,10,10,.75); backdrop-filter: blur(6px); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: .85rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.map-card .who { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.map-card .lbl { color: var(--ok); font-size: .82rem; display: flex; align-items: center; gap: .4em; }

/* =========================================================================
   v20 — logo animasi, mega-menu + menu mobile, tipografi judul section,
   kartu Why, "Works with", grid footer (landing page)
   ========================================================================= */

/* --- logo animasi Vensix (orisinal: cloud + V + bar server + LED berkedip) --- */
.logo-anim { display: inline-flex; color: #fff; }
.logo-anim svg { display: block; }
.logo-anim .led { animation: ledblink 1.8s ease-in-out infinite; }
.logo-anim .l2 { animation-delay: .6s; }
.logo-anim .l3 { animation-delay: 1.2s; }
@keyframes ledblink { 0%, 100% { opacity: 1; } 50% { opacity: .1; } }
@media (prefers-reduced-motion: reduce) { .logo-anim .led { animation: none; } }

/* --- nav: kanan (login + tombol menu mobile) --- */
.nav-actions { display: flex; align-items: center; gap: .6rem; }
/* tombol Login nav disamakan ke rdp.sh: 36px tinggi, 15px */
.nav .btn-emas.nav-login { height: 36px; padding: 0 16px; font-size: 15px; }
/* tombol pill "Menu" -- cuma tampil di <=768px */
.menu-btn { display: none; padding: 6px 12px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
@media (max-width: 768px) { .menu-btn { display: inline-flex; align-items: center; } }

/* --- mega-menu "Products": panel full-width di bawah nav, buka via KLIK --- */
.mega-trigger { display: inline-flex; align-items: center; gap: .3rem;
  padding: .375rem .75rem; border-radius: 100px; font: inherit; font-size: 15px;
  font-weight: 600; color: #fff; background: none; border: none; cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,.7); transition: background-color .15s; }
.mega-trigger:hover, .mega-trigger[aria-expanded="true"] { background: #444; }
.mega-trigger svg { transition: transform .15s; }
.mega-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
/* position:fixed supaya lolos dari .scrolly-pin yang overflow:hidden */
.mega-panel { position: fixed; top: 76px; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center; padding: 0 4vw;
  animation: mega-in .18s ease; }
.mega-panel[hidden] { display: none; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mega-inner { width: min(1120px, 100%); background: #141414;
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 32px;
  display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 32px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.8); }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mega-item { display: flex; gap: 14px; padding: 12px; border-radius: 12px; align-items: flex-start; }
a.mega-item:hover { background: rgba(255,255,255,.05); }
.mega-item.soon { opacity: .75; }
.mega-ico { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: #fff; }
.mega-item > span:last-child { display: flex; flex-direction: column; }
.mega-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mega-desc { font-size: 14px; color: var(--muted); margin-top: 2px; }
.mega-badge { font-size: 11px; font-weight: 600; color: #fbbf24;
  background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3);
  padding: .1em .5em; border-radius: 100px; white-space: nowrap; }
.mega-promo { background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.1));
  border-radius: 16px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.mega-promo-cap { font-size: 14px; font-weight: 600; }
@media (max-width: 900px) {
  .mega-inner { grid-template-columns: 1fr; }
  .mega-promo { display: none; }
  .mega-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) { .mega-panel { display: none !important; } } /* mobile pakai overlay menu */

/* --- menu mobile fullscreen --- */
.mobile-menu { position: fixed; inset: 0; z-index: 60; background: rgba(10,10,10,.98);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column; padding: 1.4rem 5vw 2.5rem; overflow-y: auto;
  animation: menu-in .22s ease; }
.mobile-menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (min-width: 769px) { .mobile-menu { display: none !important; } }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; }
.mobile-close { width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: #fff; font-size: 20px; line-height: 1; }
.mobile-nav { margin-top: 2.2rem; display: flex; flex-direction: column; gap: .2rem; }
.mobile-nav > a, .mobile-nav .m-label { font-size: 1.55rem; font-weight: 600; padding: .45rem 0; color: #fff; }
/* tombol Login di menu mobile tetap pill putih teks gelap -- jangan ikut aturan teks besar putih di atasnya */
.mobile-nav > a.btn-emas { color: #0a0a0a; font-size: 1.05rem; padding: .8rem 1.2rem; }
.mobile-nav .m-label { color: var(--muted-2); font-size: .85rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; padding-bottom: .6rem; }
.mobile-sub { margin: 0 0 1rem; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.12);
  display: flex; flex-direction: column; gap: .1rem; }
.mobile-sub a, .mobile-sub span { font-size: 1.05rem; color: var(--muted); padding: .32rem 0;
  display: flex; align-items: center; gap: .6rem; }
.mobile-sub a { color: var(--text); }
.mobile-nav .btn { margin-top: 1.4rem; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu { animation: none; }
  .mega-panel { animation: none; }
}

/* --- tipografi judul section (BUKAN hero -- hero tetap .display 60px/600).
   Class terpisah, bukan mengubah .display, karena .display juga dipakai
   halaman lain (saldo/terms/privacy) yang tidak boleh ikut berubah. --- */
.section-title { font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.25; letter-spacing: -.025em;
  text-align: center; }
.section-sub { text-align: center; color: var(--muted); font-size: 18px;
  max-width: 56ch; margin: .9rem auto 0; }
.price-group-label { font-family: var(--font-display); font-size: 1.25rem;
  font-weight: 600; text-align: center; }

/* --- kartu "Why Vensix": 3 nada (2 gelap beda level + 1 putih inverted) --- */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 2.6rem; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }
.why-card { border-radius: 24px; padding: 40px; min-height: 320px; background: #1a1a1a; }
.why-card.alt { background: #1f1f1f; }
.why-card.inverse { background: #fff; color: #0a0a0a; }
.why-card h3 { font-size: 30px; font-weight: 300; letter-spacing: -.02em; line-height: 1.2; }
.why-card p { margin-top: 1rem; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--muted); }
.why-card.inverse p { color: #525252; }

/* --- "Works with your stack": filter pills + grid tile monogram --- */
.stack-filter { display: flex; gap: .5rem; justify-content: center; margin: 2.2rem 0 1.8rem; }
.stack-pill { padding: .45em 1.1em; border-radius: 100px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font: inherit; font-size: .9rem;
  font-weight: 500; cursor: pointer; }
.stack-pill:hover { border-color: var(--line-strong); }
.stack-pill.on { background: #fff; color: #0a0a0a; border-color: #fff; }
.stack-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 768px) { .stack-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stack-tile { display: flex; align-items: center; gap: 14px; background: var(--surface);
  border-radius: 16px; padding: 16px 18px; }
.stack-tile.hide { display: none; }
.stack-logo { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #0a0a0a; }
.stack-tile > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.stack-name { font-weight: 600; font-size: .95rem; }
.stack-sub { font-size: .8rem; color: var(--muted); margin-top: 1px; }

/* --- footer: 5 kolom + heading tanpa uppercase --- */
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0,1fr)); gap: 2rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-head { font-size: 14px; font-weight: 600; letter-spacing: .7px; margin-bottom: .9rem; }
.footer-brand .logo-anim { flex-shrink: 0; }

/* =========================================================================
   v21 — halaman produk publik (/products/*): hero produk, trust badges,
   tabel spesifikasi, langkah bernomor, grid use case, daftar model.
   Semua selektor BARU (prefix .prod-*) -- tidak mengubah aturan lama.
   ========================================================================= */

/* --- hero produk: rata kiri (pola product page rdp.sh, beda dari landing
   yang center), garis bawah tipis white/6% sebagai pembatas ke konten --- */
.prod-hero { padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid rgba(255,255,255,.06); }
.prod-crumb { display: flex; align-items: center; gap: .55em;
  font-size: .85rem; color: var(--muted-2); margin-bottom: 1.4rem; }
.prod-crumb a { color: var(--muted); }
.prod-crumb a:hover { color: var(--text); }
/* judul & sub section di halaman produk rata KIRI -- override di-scope ke
   .prod-* saja, .section-title/.section-sub global (landing) tetap center */
.prod-hero .section-title, .prod-section .section-title { text-align: left; }
.prod-hero .section-sub, .prod-section .section-sub { text-align: left; margin-left: 0; margin-right: 0; }

/* --- deretan trust badges: pill kecil border white/10 (var(--line)) --- */
.prod-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.prod-badge { display: inline-flex; align-items: center; gap: .45em;
  font-size: .82rem; color: var(--muted); border: 1px solid var(--line);
  border-radius: 100px; padding: .4em .95em; background: rgba(255,255,255,.02); }

/* --- section konten produk: padding setoken .section landing, dipisah garis
   tipis; yang terakhir tanpa garis (CTA band di bawahnya sudah punya bg) --- */
.prod-section { padding: clamp(3rem, 8vw, 5rem) 0;
  border-bottom: 1px solid rgba(255,255,255,.06); }
.prod-section:last-child { border-bottom: none; }
.prod-body { color: var(--muted); max-width: 68ch; margin-top: 1.4rem;
  font-size: 1rem; line-height: 1.7; display: flex; flex-direction: column; gap: 1rem; }

/* --- tabel spesifikasi 2 kolom: label muted kiri, value kanan.
   Global `th, td` sudah punya padding/border dasar -- di sini cuma override
   padding vertikal, lebar kolom label & berat font (specificity 0,1,1 menang
   lawan selector elemen global). --- */
.spec-table { margin-top: 2rem; }
.spec-table th, .spec-table td { padding: 1rem 0; font-size: .95rem; }
.spec-table th { color: var(--muted); font-weight: 400; width: 42%; }
.spec-table td { color: var(--text); font-weight: 500; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }

/* --- 3 langkah bernomor: angka besar muted, judul, deskripsi --- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem; margin-top: 2.6rem; }
.step-num { font-family: var(--font-display); font-weight: 300;
  font-size: 2.75rem; line-height: 1; letter-spacing: -.02em; color: var(--muted-2); }
.step h3 { font-size: 1.05rem; font-weight: 600; margin-top: 1rem; }
.step p { color: var(--muted); font-size: .92rem; line-height: 1.6; margin-top: .45rem; }

/* --- grid 4 kartu use case: radius 16, bg #141414, padding 24, tanpa border --- */
.usecase-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem; margin-top: 2.6rem; }
.usecase-card { background: #141414; border-radius: 16px; padding: 24px; }
.usecase-card h3 { font-size: 1rem; font-weight: 600; }
.usecase-card p { color: var(--muted); font-size: .88rem; line-height: 1.6; margin-top: .5rem; }

/* --- daftar model (AI API): baris id mono + label + tag kemampuan --- */
.model-list { margin-top: 2rem; }
.model-row { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.model-row:last-child { border-bottom: none; }
.model-row .m-id { font-family: var(--font-mono); font-size: .9rem; color: var(--text); }
.model-row .m-label { color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.model-row .m-tag { flex-shrink: 0; font-size: .75rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px; padding: .25em .7em; white-space: nowrap; }

@media (max-width: 900px) {
  .usecase-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
  .usecase-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   v22 — halaman publik baru: /payment-methods, /uptime, /about (+ footer
   legal disamakan ke landing). Semua selektor BARU (prefix .status-*/.comp-*)
   -- tidak mengubah aturan lama.
   ========================================================================= */

/* --- kartu status besar (/uptime): pill live + meta waktu cek terakhir --- */
.status-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: 24px; padding: clamp(2.2rem, 6vw, 3.5rem); text-align: center; }
.status-pill { display: inline-flex; align-items: center; gap: .6em;
  font-size: 1.05rem; font-weight: 600; border: 1px solid var(--line-strong);
  border-radius: 100px; padding: .65em 1.35em; background: rgba(255,255,255,.03); }
.status-pill.warn { border-color: rgba(234,179,8,.4); background: rgba(234,179,8,.07); }
.status-pill .dot { width: 10px; height: 10px; flex-shrink: 0; }
.status-meta { color: var(--muted); font-size: .85rem; margin-top: 1.1rem; }

/* --- baris komponen & legend status (/uptime): nama+sub kiri, badge kanan --- */
.comp-list { margin-top: 2rem; }
.comp-row { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.comp-row:last-child { border-bottom: none; }
.comp-name { font-weight: 600; font-size: .95rem; }
.comp-sub { color: var(--muted); font-size: .85rem; margin-top: .2rem; max-width: 62ch; }
.comp-badge { flex-shrink: 0; font-size: .8rem; padding: .3em .8em; border-radius: 100px;
  white-space: nowrap; color: var(--muted); background: rgba(255,255,255,.04);
  border: 1px solid var(--line); }
.comp-badge.ok { color: var(--ok); background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.25); }
.comp-badge.warn { color: var(--warn); background: rgba(234,179,8,.1); border-color: rgba(234,179,8,.3); }