/* ═══════════════════════════════════════════════════════════════════════
   SKYCYBER /layanan/vulnerability-assessment
   ═══════════════════════════════════════════════════════════════════════
   Satu sistem visual dengan beranda, /tentang, /layanan, dan
   /layanan/penetration-testing: token warna, tipografi, tombol, kerangka
   section, dan FAQ dipinjam dari home-v2.css yang ikut dimuat di halaman
   ini. Berkas ini hanya menambah bentuk khas halaman VA.

   Ritmenya sengaja BEDA dari halaman penetration testing. Pentest bercerita
   soal kedalaman dan pembuktian: rel tegak, kartu mengambang, satu temuan
   yang dibedah. Halaman ini bercerita soal keluasan dan urutan: panel
   pindai, bilah severity, tabel inventaris, siklus mendatar yang berulang,
   dan register remediasi.

   Halaman ini SATU-SATUNYA pemakai berkas ini: services/show.blade.php
   memuatnya hanya saat $slug === 'vulnerability-assessment'. Halaman
   layanan lain tidak tersentuh.

   IKON: seluruhnya SVG inline, tidak ada icon font dari CDN.

   ATURAN PERFORMA: tidak ada `filter: blur()` dan tidak ada kanvas. Bilah
   navigasi bersifat fixed dan memakai backdrop-filter, jadi lapisan mahal
   di belakangnya membuat guliran tersendat. Animasi di sini hanya
   menyentuh opacity, transform, width, dan background.

   Semua kelas berawalan "va-" (mockup register memakai "vrg-") dan hidup
   di dalam .sc2.
   ═══════════════════════════════════════════════════════════════════════ */

/* Skala severity berdiri di luar palet amber merek, karena pembacaannya
   harus mengikuti konvensi CVSS (merah ke abu), bukan warna merek. Nilainya
   sama persis dengan yang dipakai mockup laporan di halaman pentest supaya
   satu bahasa warna di seluruh situs. */
.sc2 {
    --sev-crit: #e5484d;
    --sev-high: #f2811d;
    --sev-med:  #e8b931;
    --sev-low:  rgba(242, 239, 234, .34);
}

/* ─── Animasi bersama ──────────────────────────────────────────────── */

/* Garis pindai menyapu panel hero dari kiri ke kanan. Elemennya selebar
   panel dan hanya digeser transform, jadi tidak memicu layout. */
@keyframes va-sweep {
    0%   { transform: translateX(0);    opacity: 0; }
    7%   { opacity: 1; }
    93%  { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}
/* Ubin permukaan menyala bergiliran mengikuti lewatnya garis sapuan. */
@keyframes va-tile {
    0%, 22%, 100% { border-color: var(--line-soft); background: rgba(11, 11, 13, .55); }
    6%, 16%       { border-color: rgba(245, 160, 27, .5); background: rgba(245, 160, 27, .06); }
}

/* ─── 1 · Hero ─────────────────────────────────────────────────────── */

.va-hero {
    position: relative;
    overflow: hidden;
    /* 66px = tinggi bilah navigasi tetap (chrome-v2.css) */
    padding: calc(66px + clamp(34px, 4.2vw, 62px)) var(--pad-x) clamp(40px, 5vw, 78px);
    border-bottom: 1px solid var(--line);
}

/* Latar hero memakai bahasa yang sama dengan hero /tentang dan pentest:
   kisi teknis + kolam cahaya amber, semuanya gradasi murni. Bedanya di
   tekstur sisi kanan: pentest memakai arsir diagonal, halaman ini memakai
   garis pindai mendatar, sesuai temanya. */
.va-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.va-hero__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1.6px at 1px 1px, rgba(245, 160, 27, .48) 0 1px, transparent 1.6px),
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .07) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg,  rgba(242, 239, 234, .05) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .02) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(0deg,  rgba(242, 239, 234, .017) 0 1px, transparent 1px 24px);
    background-size: 192px 192px, auto, auto, auto, auto;
}

/* Pita garis pindai mendatar di sisi kanan, memudar ke kiri. */
.va-hero__scan {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(52vw, 660px);
    background: repeating-linear-gradient(0deg, rgba(242, 239, 234, .085) 0 1px, transparent 1px 9px);
    -webkit-mask-image: linear-gradient(100deg, transparent 2%, rgba(0, 0, 0, .6) 52%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 2%, rgba(0, 0, 0, .6) 52%, #000 100%);
}

.va-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(44% 44% at 78% 16%, rgba(245, 160, 27, .16), rgba(245, 160, 27, .05) 54%, transparent 76%),
        linear-gradient(to bottom, rgba(11, 11, 13, 0) 0%, rgba(11, 11, 13, .16) 54%, rgba(11, 11, 13, .62) 100%);
}

/* Selebar bilah header: header (.sc-nav__bar di chrome-v2.css) tidak
   memakai batas 1280px, hanya padding sisi yang sama dengan --pad-x. */
.va-hero__inner { position: relative; z-index: 1; max-width: none; }

.va-hero__grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(26px, 3.6vw, 64px);
    align-items: center;
}
.va-hero__main { flex: 2 1 520px; min-width: 290px; }

.va-hero__kicker { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.va-hero__dash { width: 16px; height: 1px; background: var(--line); }
.va-hero__std {
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .16em;
    color: rgba(242, 239, 234, .44);
}

.va-hero__h1 {
    margin: clamp(20px, 2.6vw, 34px) 0 0;
    font-size: clamp(30px, 3.6vw, 62px);
    line-height: 1;
    letter-spacing: -.046em;
    font-weight: 500;
    color: var(--paper);
    /* 25ch: cukup untuk "Vulnerability Assessment" berdiri satu baris. */
    max-width: 25ch;
}
.va-hero__h1 .sc2-hl { color: var(--amber); }

.va-hero__sub {
    margin: 20px 0 0;
    font: 500 11px/1.6 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
}
.va-hero__lead {
    margin: 20px 0 0;
    max-width: 66ch;
    font-size: clamp(14px, 1.4vw, 16.5px);
    line-height: 1.78;
    color: var(--dim);
}
.va-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }

/* ── Panel pindai ─────────────────────────────────────────────────────
   Empat permukaan disusun sebagai ubin 2x2, bukan daftar baris seperti di
   halaman pentest. Garis sapuan bergerak mendatar dan ubin menyala
   bergiliran mengikutinya. Semua berhenti saat pengunjung meminta
   "kurangi gerak". */

.va-scan {
    flex: 1 1 400px;
    min-width: 300px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: linear-gradient(200deg, var(--panel), var(--ink) 76%);
}
.va-scan::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(110% 62% at 0% 0%, rgba(245, 160, 27, .1), transparent 60%);
}

/* Wadahnya selebar panel; garisnya menempel di tepi kiri wadah, jadi
   translateX(100%) memindahkannya tepat ke tepi kanan panel. */
.va-scan__sweep {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    animation: va-sweep 7s linear infinite;
    will-change: transform;
}
.va-scan__sweep::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(245, 160, 27, .85), transparent);
}

.va-scan__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
.va-scan__title {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    color: rgba(242, 239, 234, .56);
}
.va-scan__title i {
    width: 6px;
    height: 6px;
    background: var(--amber);
    animation: sc2-blip 1.6s ease-in-out infinite;
}
.va-scan__count {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .14em;
    color: var(--amber);
}
.va-scan__count svg { width: 13px; height: 13px; }

.va-scan__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
}

.va-tile {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 15px;
    border: 1px solid var(--line-soft);
    background: rgba(11, 11, 13, .55);
    animation: va-tile 7s ease-in-out infinite;
    animation-delay: var(--va-d, 0s);
    /* backwards: selama jeda tunggu pakai keadaan 0%, bukan gaya default. */
    animation-fill-mode: backwards;
}
.va-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.va-tile__ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(242, 239, 234, .16);
    color: var(--amber);
}
.va-tile__ico svg { width: 17px; height: 17px; }
.va-tile__n { font: 700 10px/1 var(--mono); letter-spacing: .14em; color: rgba(242, 239, 234, .26); }
.va-tile__name {
    font-size: 12.5px;
    line-height: 1.35;
    letter-spacing: -.012em;
    color: var(--paper);
}
.va-tile__meta {
    margin-top: auto;
    font: 500 8.5px/1.5 var(--mono);
    letter-spacing: .12em;
    color: rgba(242, 239, 234, .4);
}

.va-scan__modes {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
}
.va-scan__modes span {
    flex: 1 1 auto;
    padding: 13px 10px;
    background: var(--ink);
    font: 500 8.5px/1 var(--mono);
    letter-spacing: .13em;
    color: rgba(242, 239, 234, .5);
    text-align: center;
    white-space: nowrap;
    transition: color .3s ease, background .3s ease;
}
.va-scan__modes span:hover { color: var(--paper); background: var(--panel); }

/* ─── 2 · Bilah severity ───────────────────────────────────────────────
   Pengganti bilah angka di halaman pentest. Isinya bukan pencapaian
   perusahaan melainkan skala baca laporan: empat pita CVSS v3.1 lengkap
   dengan rentang dan artinya, jadi pengunjung sudah paham bahasa laporan
   sebelum sampai ke bagian hasil. */

/* Warna garis dipakai HANYA sebagai celah 1px antar sel. Wadah luarnya
   ikut warna sel supaya di layar lebar area di luar batas 1280px tidak
   tampil sebagai pita abu terang. */
.va-bands__wrap { background: var(--panel); border-bottom: 1px solid var(--line); }
.va-bands {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    padding-inline: var(--pad-x);
    background: var(--panel);
}

.va-band {
    position: relative;
    /* 200px: dua sel masih muat berdampingan di ponsel 360px setelah
       dikurangi padding sisi --pad-x, jadi bilahnya tetap 2 kolom. */
    flex: 1 1 calc(25% - 1px);
    min-width: 200px;
    outline: 1px solid var(--line);
    background: var(--panel);
    padding: clamp(22px, 2.6vw, 32px) clamp(16px, 1.8vw, 26px);
    transition: background .3s ease;
}
.va-band:hover { background: var(--ink); }
.va-band::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--va-c, var(--amber));
}
.va-band--crit { --va-c: var(--sev-crit); }
.va-band--high { --va-c: var(--sev-high); }
.va-band--med  { --va-c: var(--sev-med); }
.va-band--low  { --va-c: var(--sev-low); }

.va-band__l {
    display: block;
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--va-c, var(--amber));
}
.va-band__r {
    display: block;
    margin-top: 14px;
    font: 700 clamp(24px, 2.8vw, 34px)/1 var(--mono);
    letter-spacing: -.04em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.va-band__d {
    display: block;
    margin-top: 11px;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(242, 239, 234, .5);
    max-width: 30ch;
}

/* ─── 3 · Tabel permukaan pindai ───────────────────────────────────────
   Inventaris, bukan kartu. Nomor besar di kiri, identitas di tengah,
   uraian dan penanda pemeriksaan di kanan. Barisnya menggeser ke kanan
   saat disentuh, ritme yang sama dengan daftar baris di beranda. */

.va-surf { border-top: 1px solid var(--line); }

.va-surf__row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px clamp(16px, 2.4vw, 40px);
    align-items: flex-start;
    padding: clamp(22px, 2.6vw, 32px) clamp(6px, 1vw, 14px);
    border-bottom: 1px solid var(--line);
    transition: background .25s ease, padding-left .25s ease;
}
.va-surf__row:hover { background: var(--panel); padding-left: 20px; }
.sc2-sec--panel .va-surf__row:hover { background: var(--raise); }

.va-surf__n {
    flex: none;
    width: clamp(50px, 5vw, 78px);
    font: 700 clamp(24px, 2.9vw, 38px)/.86 var(--mono);
    letter-spacing: -.035em;
    color: rgba(245, 160, 27, .85);
    font-variant-numeric: tabular-nums;
}
.va-surf__head {
    flex: 0 1 300px;
    min-width: 220px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.va-surf__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(242, 239, 234, .18);
    background: var(--ink);
    color: var(--amber);
    transition: border-color .25s ease;
}
.sc2-sec--panel .va-surf__ico { background: var(--panel); }
.va-surf__row:hover .va-surf__ico { border-color: rgba(245, 160, 27, .45); }
.va-surf__ico svg { width: 20px; height: 20px; }
.va-surf__name {
    margin: 0;
    font-size: clamp(16px, 1.9vw, 21px);
    line-height: 1.16;
    letter-spacing: -.028em;
    font-weight: 500;
    color: var(--paper);
}
.va-surf__meta {
    display: block;
    margin-top: 8px;
    font: 500 9px/1.5 var(--mono);
    letter-spacing: .14em;
    color: rgba(242, 239, 234, .4);
}
.va-surf__body { flex: 2 1 340px; min-width: 260px; }
.va-surf__d {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.76;
    color: rgba(242, 239, 234, .58);
    max-width: 62ch;
}
.va-surf__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.va-chip {
    padding: 6px 11px;
    border: 1px solid rgba(242, 239, 234, .14);
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .1em;
    color: rgba(242, 239, 234, .6);
    white-space: nowrap;
    transition: border-color .25s ease, color .25s ease;
}
.va-surf__row:hover .va-chip { border-color: rgba(245, 160, 27, .3); color: rgba(242, 239, 234, .78); }

/* ─── 4 · Siklus: empat tahap mendatar yang berulang ───────────────────
   Halaman pentest memakai rel tegak yang terisi mengikuti gulir. Di sini
   tahapannya berjajar mendatar sebagai satu pita, karena VA memang
   dijalankan berulang, bukan sekali jalan. Garis atas tiap tahap makin
   pekat ke kanan, membentuk progres tanpa perlu skrip. */

.va-cyc__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.va-cyc__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(24px, 2.8vw, 34px) clamp(18px, 2vw, 26px);
    background: var(--panel);
    transition: background .3s ease;
}
.sc2-sec--panel .va-cyc__step { background: var(--ink); }
.va-cyc__step:hover { background: var(--raise); }
.va-cyc__step::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--amber);
    opacity: var(--va-o, 1);
}
.va-cyc__step:nth-child(1) { --va-o: .3; }
.va-cyc__step:nth-child(2) { --va-o: .52; }
.va-cyc__step:nth-child(3) { --va-o: .76; }
.va-cyc__step:nth-child(4) { --va-o: 1; }

.va-cyc__n {
    font: 700 clamp(30px, 3.4vw, 44px)/.85 var(--mono);
    letter-spacing: -.05em;
    color: rgba(242, 239, 234, .16);
    font-variant-numeric: tabular-nums;
    transition: color .3s ease;
}
.va-cyc__step:hover .va-cyc__n { color: rgba(245, 160, 27, .55); }
.va-cyc__phase {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 500 9px/1.4 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
}
.va-cyc__phase svg { flex: none; width: 14px; height: 14px; }
.va-cyc__t {
    margin: 0;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.2;
    letter-spacing: -.026em;
    font-weight: 500;
    color: var(--paper);
}
.va-cyc__d {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.74;
    color: rgba(242, 239, 234, .56);
}

/* Pita penutup siklus: menegaskan bahwa tahap keempat kembali ke tahap
   pertama, bukan garis akhir. */
.va-cyc__loop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 14px;
    padding: 15px clamp(18px, 2vw, 26px);
    border: 1px solid rgba(245, 160, 27, .28);
    background: rgba(245, 160, 27, .05);
}
.va-cyc__loop span {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .62);
}
.va-cyc__loop svg { flex: none; width: 15px; height: 15px; color: var(--amber); }

/* ─── 5 · Lembar hasil kerja ───────────────────────────────────────────
   Manfaat dari basis data ditulis dengan pola "judul singkat — uraian".
   Partial-nya memecah di tanda pisah itu, jadi judul ringkas datang dari
   data admin, bukan dari daftar tetap di kode. Bentuknya sengaja rata
   tanpa kartu: dua kolom garis rambut, seperti lembar spesifikasi. */

.va-spec {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(24px, 3.4vw, 64px);
    border-top: 1px solid var(--line);
}
.va-spec__i {
    display: flex;
    gap: clamp(14px, 1.8vw, 22px);
    padding: clamp(20px, 2.2vw, 28px) 0;
    border-bottom: 1px solid var(--line);
}
.va-spec__n {
    flex: none;
    width: 30px;
    padding-top: 3px;
    font: 700 11px/1 var(--mono);
    letter-spacing: .12em;
    color: rgba(245, 160, 27, .8);
    font-variant-numeric: tabular-nums;
}
.va-spec__txt { min-width: 0; }
.va-spec__t {
    margin: 0;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.28;
    letter-spacing: -.024em;
    font-weight: 500;
    color: var(--paper);
}
.va-spec__d {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.76;
    color: rgba(242, 239, 234, .56);
    max-width: 52ch;
}

/* ─── 6 · Standar & perkakas ───────────────────────────────────────────
   Halaman pentest menaruh keduanya sebagai dua panel berdampingan. Di
   sini keduanya bertumpuk penuh: kerangka sebagai tiga papan sejajar,
   perkakas sebagai rak tiga kolom. Halaman VA memang memakai lebih banyak
   pemindai, jadi raknya butuh lebar penuh. */

.va-std + .va-std { margin-top: clamp(18px, 2.2vw, 30px); }

.va-std__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border: 1px solid var(--line);
    border-bottom: 0;
    background: var(--raise);
}
.sc2-sec--panel .va-std__bar { background: var(--panel); }
.va-std__t {
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .62);
}
.va-std__n {
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .14em;
    color: var(--amber);
}

.va-fw,
.va-rack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.va-fw__i {
    background: var(--panel);
    padding: clamp(20px, 2.4vw, 28px);
    transition: background .3s ease;
}
.sc2-sec--panel .va-fw__i { background: var(--ink); }
.va-fw__i:hover { background: var(--raise); }
.va-fw__n {
    display: block;
    font: 500 12px/1.4 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--amber);
}
.va-fw__d {
    display: block;
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.75;
    color: rgba(242, 239, 234, .56);
}

.va-tool {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    background: var(--panel);
    transition: background .3s ease;
}
.sc2-sec--panel .va-tool { background: var(--ink); }
.va-tool:hover { background: var(--raise); }
.va-tool__i {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(242, 239, 234, .16);
    color: var(--amber);
}
.va-tool__i svg { width: 17px; height: 17px; }
.va-tool__txt { min-width: 0; }
.va-tool__n {
    display: block;
    font-size: 13.5px;
    line-height: 1.3;
    letter-spacing: -.014em;
    color: var(--paper);
}
.va-tool__d {
    display: block;
    margin-top: 7px;
    font-size: 11.5px;
    line-height: 1.65;
    color: rgba(242, 239, 234, .48);
}

/* ─── 7 · Sektor: kisi empat kolom ─────────────────────────────────────
   Halaman pentest memakai baris lebar dengan lencana bulat. Di sini
   bentuknya kisi rapat dengan ikon kotak, jadi dua halaman tidak tampak
   memakai blok yang sama. */

.va-sect {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.va-sect__i {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: clamp(22px, 2.6vw, 32px) clamp(18px, 2vw, 26px);
    background: var(--panel);
    color: var(--paper);
    text-decoration: none;
    transition: background .3s ease;
}
.sc2-sec--panel .va-sect__i { background: var(--ink); }
.va-sect__i:hover { background: var(--raise); }
.va-sect__ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(245, 160, 27, .35);
    color: var(--amber);
    transition: background .25s ease, color .25s ease;
}
.va-sect__ico svg { width: 21px; height: 21px; }
.va-sect__i:hover .va-sect__ico { background: var(--amber); color: var(--on-amber); }
.va-sect__n {
    font-size: clamp(15px, 1.7vw, 19px);
    line-height: 1.18;
    letter-spacing: -.026em;
    font-weight: 500;
}
.va-sect__d {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.72;
    color: rgba(242, 239, 234, .54);
}
.va-sect__go {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    font: 500 9px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
    transition: gap .25s ease;
}
.va-sect__go svg { flex: none; width: 13px; height: 13px; }
.va-sect__i:hover .va-sect__go { gap: 13px; }

/* ─── 8 · Perbandingan VA dan pentest ──────────────────────────────────
   Pertanyaan pertama di FAQ halaman ini persis soal ini, jadi jawabannya
   diangkat jadi tabel supaya terbaca sebelum pengunjung menggulir sampai
   bawah. Isinya lapisan editorial, sama seperti kalimat pengantar tiap
   section; substansinya tetap sejalan dengan jawaban FAQ dari basis data.

   Di layar sempit tabel digulir mendatar di dalam wadahnya sendiri,
   sehingga badan halaman tidak pernah ikut bergeser. */

.va-vs__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.va-vs {
    min-width: 620px;
    border: 1px solid var(--line);
    background: var(--panel);
}
.sc2-sec--panel .va-vs { background: var(--ink); }
.va-vs__r {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
    border-bottom: 1px solid var(--line);
}
.va-vs__r:last-child { border-bottom: 0; }
.va-vs__c {
    padding: 15px 18px;
    border-left: 1px solid var(--line);
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(242, 239, 234, .58);
}
.va-vs__c:first-child {
    border-left: 0;
    font: 500 9px/1.6 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .4);
}
.va-vs__r--head .va-vs__c {
    padding-block: 17px;
    background: var(--raise);
    font-size: 13.5px;
    letter-spacing: -.016em;
    color: var(--paper);
}
.va-vs__r--head .va-vs__c--me { color: var(--amber); }
.va-vs__c--me { background: rgba(245, 160, 27, .045); color: rgba(242, 239, 234, .74); }
.va-vs__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 14px;
}
.va-vs__note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(242, 239, 234, .5);
    max-width: 62ch;
}

/* ─── 9 · Blok naratif dua kolom ───────────────────────────────────── */

.va-split { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 60px); align-items: center; }
.va-split__main { flex: 1.2 1 400px; min-width: 290px; }
.va-split__aside { flex: 1 1 300px; min-width: 260px; }
/* Di section Laporan, register-nya yang jadi bintang, jadi kolom kanan
   diberi porsi lebih besar daripada naratif di kirinya. */
#laporan .va-split__main { flex: 1 1 330px; }
#laporan .va-split__aside { flex: 1.3 1 440px; }

.va-ticks { display: grid; gap: 12px; margin-top: 26px; }
.va-ticks span {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(242, 239, 234, .7);
}
.va-ticks svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--amber); }

.va-meta {
    margin-top: 18px;
    font: 500 9px/1.5 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .34);
}

/* ─── 9b · Register remediasi ──────────────────────────────────────────
   Hasil vulnerability assessment bukan satu temuan yang dibedah dalam,
   melainkan antrean panjang yang sudah diurutkan. Karena itu pratinjaunya
   berbentuk register, bukan lembar temuan seperti di halaman pentest.

   Seluruhnya HTML dan CSS, bukan gambar: teksnya tajam di layar retina,
   ikut tema gelap, terbaca pembaca layar, dan tidak menambah satu pun
   berkas gambar.

   Isinya ILUSTRASI, bukan register klien sungguhan. Nomor dokumen, nama
   aset, dan angkanya contoh; penanda "CONTOH" ada di bilah atas supaya
   tidak terbaca sebagai dokumen asli. Nomor temuan memakai format internal
   (SKY-...), bukan CVE. */

.vrg {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--ink);
}
.sc2-sec--panel .vrg { background: var(--ink); }
/* Garis amber tipis di tepi atas, penanda dokumen aktif. */
.vrg::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--amber), rgba(245, 160, 27, .12));
    z-index: 1;
}

.vrg__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}
.vrg__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(242, 239, 234, .16);
    color: var(--amber);
}
.vrg__ico svg { width: 16px; height: 16px; }
.vrg__id { flex: 1; min-width: 0; }
.vrg__no {
    display: block;
    font: 700 10.5px/1.3 var(--mono);
    letter-spacing: .12em;
    color: var(--paper);
}
.vrg__meta {
    display: block;
    margin-top: 4px;
    font: 500 8.5px/1.3 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .38);
}
.vrg__badge {
    flex: none;
    padding: 6px 10px;
    border: 1px solid rgba(245, 160, 27, .35);
    font: 500 8.5px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
    white-space: nowrap;
}

.vrg__body { padding: clamp(14px, 1.8vw, 20px); display: grid; gap: clamp(16px, 2vw, 22px); }
.vrg__h {
    font: 700 8.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .42);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 12px;
}

/* ── Cakupan: empat angka ringkas ── */
.vrg__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); }
.vrg__stat { background: var(--ink); padding: 11px 12px; }
.vrg__sv {
    display: block;
    font: 700 clamp(16px, 1.8vw, 20px)/1 var(--mono);
    letter-spacing: -.03em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.vrg__sl {
    display: block;
    margin-top: 7px;
    font: 500 8px/1.45 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .4);
}

/* ── Antrean remediasi ── */
.vrg__tr {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 46px 86px;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
}
.vrg__tr:last-child { border-bottom: 0; }
.vrg__tr--head { padding-bottom: 8px; }
.vrg__tr--head span {
    font: 500 7.5px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .32);
}
.vrg__p {
    font: 700 10px/1 var(--mono);
    color: var(--vrg-c, var(--sev-low));
    font-variant-numeric: tabular-nums;
}
.vrg__tr--crit { --vrg-c: var(--sev-crit); }
.vrg__tr--high { --vrg-c: var(--sev-high); }
.vrg__tr--med  { --vrg-c: var(--sev-med); }
.vrg__tr--low  { --vrg-c: var(--sev-low); }
.vrg__f { min-width: 0; }
.vrg__fn {
    display: block;
    font-size: 11.5px;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: rgba(242, 239, 234, .82);
}
.vrg__fa {
    display: block;
    margin-top: 4px;
    font: 500 8.5px/1.3 var(--mono);
    letter-spacing: .06em;
    color: rgba(242, 239, 234, .36);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vrg__sc {
    font: 700 11px/1 var(--mono);
    color: var(--vrg-c, var(--sev-low));
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.vrg__st {
    justify-self: end;
    padding: 5px 8px;
    border: 1px solid rgba(242, 239, 234, .16);
    font: 500 7.5px/1 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .48);
    white-space: nowrap;
}
.vrg__st--fix { border-color: rgba(245, 160, 27, .4); color: var(--amber); }
.vrg__st--ver { border-color: var(--amber); background: var(--amber); color: var(--on-amber); }

/* ── Peta kepatuhan ── */
.vrg__map { display: flex; flex-wrap: wrap; gap: 7px; }
.vrg__map span {
    padding: 6px 10px;
    border: 1px solid rgba(242, 239, 234, .14);
    font: 500 8.5px/1 var(--mono);
    letter-spacing: .1em;
    color: rgba(242, 239, 234, .55);
    white-space: nowrap;
}
/* ── Progres remediasi ──
   Bilahnya tumbuh saat blok masuk layar (kelas .revealed dipasang observer
   milik layout). Kalau observer tidak pernah jalan, bilahnya diam di nol
   sementara angkanya tetap terbaca di sebelahnya. */
.vrg__prog { display: grid; gap: 8px; }
.vrg__pl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font: 500 8.5px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .44);
}
.vrg__pl b { font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; }
.vrg__track {
    height: 4px;
    background: rgba(242, 239, 234, .08);
}
.vrg__fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--amber), rgba(245, 160, 27, .35));
    transition: width .9s cubic-bezier(.2, .7, .2, 1) .15s;
}
.reveal.revealed .vrg__fill { width: var(--w, 0%); }

/* ─── 10 · Penutup ────────────────────────────────────────────────────
   Latarnya kembaran latar hero supaya halaman terbuka dan tertutup dengan
   perlakuan yang sama, hanya cahayanya dipindah ke sudut kiri bawah. */

.va-close { position: relative; overflow: hidden; }
.va-close__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.va-close__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1.5px at 1px 1px, rgba(245, 160, 27, .3) 0 1px, transparent 1.5px),
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .05) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg,  rgba(242, 239, 234, .038) 0 1px, transparent 1px 96px);
    background-size: 192px 192px, auto, auto;
}
.va-close__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(44% 52% at 12% 88%, rgba(245, 160, 27, .17), rgba(245, 160, 27, .05) 52%, transparent 74%),
        linear-gradient(to top, rgba(19, 19, 21, .1) 0%, rgba(19, 19, 21, .5) 46%, rgba(19, 19, 21, .88) 100%);
}
.va-close > .sc2-wrap { position: relative; z-index: 1; }
.va-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.va-close__foot { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 30px; }
.va-close__foot span {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .46);
}
.va-close__foot svg { flex: none; width: 14px; height: 14px; color: var(--amber); }

/* Kartu jadwal di sisi kanan penutup. Halaman pentest menaruh penampung
   foto di posisi ini; halaman VA memakai kartu jadwal karena pertanyaan
   yang paling sering datang di layanan ini adalah "seberapa sering". */
.va-cad { border: 1px solid var(--line); background: rgba(11, 11, 13, .72); }
.va-cad__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .58);
}
.va-cad__bar i {
    width: 6px;
    height: 6px;
    background: var(--amber);
    animation: sc2-blip 1.6s ease-in-out infinite;
}
.va-cad__i {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.va-cad__i:last-child { border-bottom: 0; }
.va-cad__k {
    flex: none;
    width: 86px;
    font: 700 9px/1.5 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
}
.va-cad__v { font-size: 12.5px; line-height: 1.7; color: rgba(242, 239, 234, .6); }

/* ─── Titik henti ──────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .va-cyc__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .va-sect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .va-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .va-spec { grid-template-columns: 1fr; }
    .va-fw { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .va-cyc__track { grid-template-columns: 1fr; }
    .va-sect { grid-template-columns: 1fr; }
    .va-rack { grid-template-columns: 1fr; }
    .va-scan__grid { grid-template-columns: 1fr; }
    .vrg__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .va-ctas .sc2-btn,
    .va-hero__ctas .sc2-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 420px) {
    .vrg__tr { grid-template-columns: 24px minmax(0, 1fr) 40px; gap: 8px; }
    .vrg__st { grid-column: 2 / -1; justify-self: start; margin-top: 2px; }
    .vrg__tr--head span:last-child { display: none; }
}

/* ─── Hormati "kurangi gerak" ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .va-scan__sweep { display: none; }
    .va-tile { animation: none; }
    .vrg__fill { transition: none; }
    .va-sect__i:hover .va-sect__go { gap: 8px; }
}