/* ═══════════════════════════════════════════════════════════════════════
   SKYCYBER /layanan/security-awareness
   ═══════════════════════════════════════════════════════════════════════
   Satu sistem visual dengan beranda, /tentang, /layanan,
   /layanan/penetration-testing, dan /layanan/vulnerability-assessment:
   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 awareness.

   Ritmenya sengaja BEDA dari dua halaman layanan lain. Pentest bercerita
   soal kedalaman, VA soal keluasan dan urutan. Halaman ini bercerita soal
   perubahan perilaku yang terukur sepanjang waktu: panel titik ukur,
   bilah statistik, kisi modul program, pita kematangan yang tumbuh, dan
   dasbor kemajuan bulanan.

   Halaman ini SATU-SATUNYA pemakai berkas ini: services/show.blade.php
   memuatnya hanya saat $slug === 'security-awareness'.

   IKON: ikon bilah statistik datang dari basis data (admin mengisinya di
   /admin/layanan/{id}/detail). Sisanya SVG inline di partial. 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 height.

   Semua kelas berawalan "aw-" (mockup dasbor memakai "awd-") dan hidup di
   dalam .sc2.
   ═══════════════════════════════════════════════════════════════════════ */

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

.aw-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 halaman layanan lain: kisi
   teknis dan kolam cahaya amber, semuanya gradasi murni. Teksturnya di
   sini kisi titik rapat, bukan arsir diagonal atau garis pindai. */
.aw-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

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

/* Kisi titik rapat di sisi kanan, memudar ke kiri. Bentuknya mengingatkan
   pada barisan orang, bukan mesin: banyak simpul kecil yang setara. */
.aw-hero__dots {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(50vw, 640px);
    background-image: radial-gradient(circle 1.4px at 1px 1px, rgba(242, 239, 234, .16) 0 1.4px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(100deg, transparent 2%, rgba(0, 0, 0, .55) 50%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 2%, rgba(0, 0, 0, .55) 50%, #000 100%);
}

.aw-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(46% 44% at 74% 20%, 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, sama seperti hero halaman layanan lain. */
.aw-hero__inner { position: relative; z-index: 1; max-width: none; }

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

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

.aw-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);
    max-width: 23ch;
}
.aw-hero__h1 .sc2-hl { color: var(--amber); }

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

/* ── Panel titik ukur ─────────────────────────────────────────────────
   Program awareness hanya berarti kalau angkanya bergerak, jadi panel
   hero-nya memuat dua metrik yang dipakai menilai program: berapa persen
   karyawan yang masih terpancing, dan berapa persen yang melapor.

   Tiap metrik punya dua bilah bertumpuk (keadaan awal dan target), bukan
   satu bilah bertindih, supaya arah perubahannya terbaca tanpa legenda.
   Bilahnya tumbuh saat panel masuk layar (kelas .revealed dipasang
   observer milik layout); kalau observer tidak pernah jalan, angkanya
   tetap terbaca di sisi kanan tiap bilah. */

.aw-gauge {
    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%);
}
.aw-gauge::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(115% 60% at 100% 0%, rgba(245, 160, 27, .1), transparent 62%);
}

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

.aw-gauge__list { position: relative; padding: 20px; display: grid; gap: 22px; }

.aw-metric__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}
.aw-metric__n {
    font-size: 13.5px;
    line-height: 1.3;
    letter-spacing: -.014em;
    color: var(--paper);
}
.aw-metric__tag {
    flex: none;
    padding: 5px 8px;
    border: 1px solid rgba(245, 160, 27, .35);
    font: 500 8px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
    white-space: nowrap;
}

.aw-bar {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 52px;
    gap: 10px;
    align-items: center;
}
.aw-bar + .aw-bar { margin-top: 9px; }
.aw-bar__k {
    font: 500 8px/1.3 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .38);
}
.aw-bar__t { height: 6px; background: rgba(242, 239, 234, .08); }
.aw-bar__f {
    display: block;
    height: 100%;
    width: 0;
    background: rgba(242, 239, 234, .26);
    transition: width .9s cubic-bezier(.2, .7, .2, 1) .2s;
}
.aw-bar--goal .aw-bar__f { background: linear-gradient(90deg, var(--amber), rgba(245, 160, 27, .45)); }
.reveal.revealed .aw-bar__f { width: var(--w, 0%); }
.aw-bar__v {
    font: 700 10.5px/1 var(--mono);
    text-align: right;
    color: rgba(242, 239, 234, .58);
    font-variant-numeric: tabular-nums;
}
.aw-bar--goal .aw-bar__v { color: var(--amber); }

.aw-gauge__modes {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
}
.aw-gauge__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;
}
.aw-gauge__modes span:hover { color: var(--paper); background: var(--panel); }

/* ─── 2 · Bilah statistik ──────────────────────────────────────────────
   Isinya $service['awareness_stats'] dari dashboard admin, jadi angkanya
   bisa diperbarui tanpa menyentuh kode. Bentuknya rata kiri dengan garis
   amber pendek di bawah angka, beda dari bilah angka halaman pentest yang
   memakai kotak ikon besar di sisi kiri. */

/* 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. */
.aw-stats__wrap { background: var(--panel); border-bottom: 1px solid var(--line); }
.aw-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    padding-inline: var(--pad-x);
    background: var(--panel);
}

.aw-stat {
    /* 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(24px, 3vw, 38px) clamp(18px, 2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 13px;
    transition: background .3s ease;
}
.aw-stat:hover { background: var(--ink); }
.aw-stat__ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(242, 239, 234, .16);
    color: var(--amber);
}
.aw-stat__ico svg { width: 17px; height: 17px; }
.aw-stat__v {
    font: 700 clamp(27px, 3.3vw, 42px)/1 var(--mono);
    letter-spacing: -.045em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.aw-stat__rule { width: 32px; height: 2px; background: var(--amber); }
.aw-stat__l {
    font-size: 12.5px;
    line-height: 1.68;
    color: rgba(242, 239, 234, .5);
    max-width: 30ch;
}

/* ─── 3 · Kisi modul program ───────────────────────────────────────────
   Manfaat dari basis data adalah daftar komponen program, jadi bentuknya
   kisi tiga kolom bergaris rambut: satu sel satu modul. Berbeda dari
   kartu mengambang di halaman pentest dan lembar spesifikasi di halaman
   vulnerability assessment. */

.aw-mods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.aw-mod {
    position: relative;
    background: var(--panel);
    padding: clamp(24px, 2.8vw, 34px) clamp(20px, 2.2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 13px;
    transition: background .3s ease;
}
.sc2-sec--panel .aw-mod { background: var(--ink); }
.aw-mod:hover { background: var(--raise); }
.aw-mod__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aw-mod__n {
    font: 700 10px/1 var(--mono);
    letter-spacing: .16em;
    color: rgba(245, 160, 27, .85);
}
.aw-mod__ico { color: rgba(242, 239, 234, .2); transition: color .3s ease; }
.aw-mod__ico svg { width: 22px; height: 22px; display: block; }
.aw-mod:hover .aw-mod__ico { color: rgba(245, 160, 27, .6); }
.aw-mod__t {
    margin: 0;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.2;
    letter-spacing: -.026em;
    font-weight: 500;
    color: var(--paper);
}
.aw-mod__d {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.74;
    color: rgba(242, 239, 234, .56);
}

/* ─── 4 · Pita kematangan ──────────────────────────────────────────────
   Empat tahap program, masing-masing satu pita lebar. Kolom kiri berisi
   nomor tahap dengan isian amber yang makin panjang, jadi kematangan
   programnya terbaca sebagai batang yang tumbuh, bukan sebagai rel gulir
   (pentest) atau pita mendatar (vulnerability assessment). */

.aw-stages { border-top: 1px solid var(--line); }

.aw-stage {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-bottom: 1px solid var(--line);
    transition: background .25s ease;
}
.aw-stage:hover { background: var(--panel); }
.sc2-sec--panel .aw-stage:hover { background: var(--raise); }

.aw-stage__gauge {
    position: relative;
    overflow: hidden;
    flex: 0 0 clamp(96px, 15vw, 210px);
    display: grid;
    place-items: center;
    padding: clamp(18px, 2vw, 26px);
    background: rgba(242, 239, 234, .022);
    border-right: 1px solid var(--line-soft);
}
.aw-stage__gauge::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--aw-w, 25%);
    background: linear-gradient(90deg, rgba(245, 160, 27, .32), rgba(245, 160, 27, .08));
}
/* Tepi amber di ujung isian: tanpa ini batas isiannya melebur ke latar dan
   panjang tiap tahap sulit dibandingkan sekilas. */
.aw-stage__gauge::after {
    content: '';
    position: absolute;
    left: calc(var(--aw-w, 25%) - 2px);
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--amber);
    opacity: .75;
}
.aw-stage__n {
    position: relative;
    font: 700 clamp(28px, 3.2vw, 44px)/1 var(--mono);
    letter-spacing: -.05em;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}
.aw-stage__body {
    flex: 1 1 340px;
    min-width: 260px;
    padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 28px);
}
.aw-stage__phase {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 500 9px/1.4 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
}
.aw-stage__phase svg { flex: none; width: 14px; height: 14px; }
.aw-stage__t {
    margin: 12px 0 0;
    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.16;
    letter-spacing: -.028em;
    font-weight: 500;
    color: var(--paper);
}
.aw-stage__d {
    margin: 11px 0 0;
    font-size: 13.5px;
    line-height: 1.76;
    color: rgba(242, 239, 234, .58);
    max-width: 72ch;
}

/* ─── 5 · Standar: baris lebar ─────────────────────────────────────── */

.aw-std { border-top: 1px solid var(--line); }
.aw-std__i {
    display: flex;
    flex-wrap: wrap;
    gap: 14px clamp(18px, 2.6vw, 44px);
    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;
}
.aw-std__i:hover { background: var(--panel); padding-left: 20px; }
.sc2-sec--panel .aw-std__i:hover { background: var(--raise); }
.aw-std__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(242, 239, 234, .18);
    color: var(--amber);
}
.aw-std__ico svg { width: 20px; height: 20px; }
.aw-std__n {
    flex: 0 1 300px;
    min-width: 230px;
    font: 500 clamp(12.5px, 1.4vw, 15px)/1.4 var(--mono);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--amber);
}
.aw-std__d {
    flex: 2 1 340px;
    min-width: 260px;
    font-size: 13.5px;
    line-height: 1.76;
    color: rgba(242, 239, 234, .58);
    max-width: 66ch;
}

/* ─── 6 · Sektor: dua kolom, ikon di samping ───────────────────────── */

.aw-sect {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.aw-sect__i {
    display: flex;
    gap: clamp(16px, 2vw, 24px);
    align-items: flex-start;
    padding: clamp(24px, 2.8vw, 36px);
    background: var(--panel);
    color: var(--paper);
    text-decoration: none;
    transition: background .3s ease;
}
.sc2-sec--panel .aw-sect__i { background: var(--ink); }
.aw-sect__i:hover { background: var(--raise); }
.aw-sect__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: clamp(44px, 3.4vw, 52px);
    height: clamp(44px, 3.4vw, 52px);
    border: 1px solid rgba(245, 160, 27, .35);
    color: var(--amber);
    transition: background .25s ease, color .25s ease;
}
.aw-sect__ico svg { width: clamp(21px, 1.7vw, 25px); height: clamp(21px, 1.7vw, 25px); }
.aw-sect__i:hover .aw-sect__ico { background: var(--amber); color: var(--on-amber); }
.aw-sect__txt { min-width: 0; }
.aw-sect__n {
    display: block;
    font-size: clamp(16px, 1.9vw, 21px);
    line-height: 1.16;
    letter-spacing: -.028em;
    font-weight: 500;
}
.aw-sect__d {
    display: block;
    margin-top: 11px;
    font-size: 12.5px;
    line-height: 1.74;
    color: rgba(242, 239, 234, .54);
}
.aw-sect__go {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font: 500 9px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
    transition: gap .25s ease;
}
.aw-sect__go svg { flex: none; width: 13px; height: 13px; }
.aw-sect__i:hover .aw-sect__go { gap: 13px; }

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

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

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

/* ─── 7b · Dasbor kemajuan ─────────────────────────────────────────────
   Hasil program awareness bukan dokumen sekali terbit, melainkan angka
   yang bergerak tiap bulan. Karena itu pratinjaunya berbentuk dasbor,
   bukan lembar laporan seperti di dua halaman layanan lain.

   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 dasbor klien sungguhan. Nomor dokumen, nama
   departemen, dan angkanya contoh; penanda "CONTOH" ada di bilah atas
   supaya tidak terbaca sebagai dokumen asli. */

.awd {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--ink);
}
/* Garis amber tipis di tepi atas, penanda dokumen aktif. */
.awd::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;
}

.awd__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}
.awd__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(242, 239, 234, .16);
    color: var(--amber);
}
.awd__ico svg { width: 16px; height: 16px; }
.awd__id { flex: 1; min-width: 0; }
.awd__no {
    display: block;
    font: 700 10.5px/1.3 var(--mono);
    letter-spacing: .12em;
    color: var(--paper);
}
.awd__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);
}
.awd__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;
}

.awd__body { padding: clamp(14px, 1.8vw, 20px); display: grid; gap: clamp(16px, 2vw, 22px); }
.awd__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: 14px;
}

/* ── Grafik batang bulanan ──
   Batangnya tumbuh saat blok masuk layar (kelas .revealed dipasang
   observer milik layout). Kalau observer tidak pernah jalan, angkanya
   tetap terbaca di atas tiap batang. */
.awd__chart { display: flex; align-items: stretch; gap: 6px; height: 116px; }
.awd__col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.awd__v {
    font: 700 8.5px/1 var(--mono);
    color: rgba(242, 239, 234, .62);
    font-variant-numeric: tabular-nums;
}
.awd__slot { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.awd__bar2 {
    display: block;
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, var(--amber), rgba(245, 160, 27, .28));
    transition: height .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
.reveal.revealed .awd__bar2 { height: var(--h, 0%); }
.awd__x {
    font: 500 7.5px/1 var(--mono);
    letter-spacing: .08em;
    color: rgba(242, 239, 234, .34);
}
.awd__note {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--line-soft);
    font: 500 8px/1.4 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ── Baris berbilah: reporting rate dan penyelesaian modul ── */
.awd__row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(80px, 1fr) 40px;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
}
.awd__row:last-child { border-bottom: 0; }
.awd__rk { font-size: 11px; line-height: 1.3; color: rgba(242, 239, 234, .72); }
.awd__rt { height: 5px; background: rgba(242, 239, 234, .08); }
.awd__rf {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--amber), rgba(245, 160, 27, .4));
    transition: width .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
.reveal.revealed .awd__rf { width: var(--w, 0%); }
.awd__rv {
    font: 700 10px/1 var(--mono);
    text-align: right;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}

/* ── Peta kepatuhan ── */
.awd__map { display: flex; flex-wrap: wrap; gap: 7px; }
.awd__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;
}

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

.aw-close { position: relative; overflow: hidden; }
.aw-close__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aw-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;
}
.aw-close__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(44% 52% at 86% 86%, 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%);
}
.aw-close > .sc2-wrap { position: relative; z-index: 1; }
.aw-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.aw-close__foot { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 30px; }
.aw-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);
}
.aw-close__foot svg { flex: none; width: 14px; height: 14px; color: var(--amber); }

/* Kartu format penyampaian di sisi kanan penutup, menggantikan penampung
   foto yang dipakai halaman pentest di posisi ini. */
.aw-fmt { border: 1px solid var(--line); background: rgba(11, 11, 13, .72); }
.aw-fmt__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);
}
.aw-fmt__bar i {
    width: 6px;
    height: 6px;
    background: var(--amber);
    animation: sc2-blip 1.6s ease-in-out infinite;
}
.aw-fmt__i {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.aw-fmt__i:last-child { border-bottom: 0; }
.aw-fmt__ico { flex: none; color: var(--amber); }
.aw-fmt__ico svg { width: 17px; height: 17px; display: block; }
.aw-fmt__txt { min-width: 0; }
.aw-fmt__k {
    display: block;
    font: 700 9px/1.4 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--paper);
}
.aw-fmt__v {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(242, 239, 234, .56);
}

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

@media (max-width: 1080px) {
    .aw-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .aw-mods { grid-template-columns: 1fr; }
    .aw-sect { grid-template-columns: 1fr; }
    /* Kolom nomor tahap jadi pita mendatar tipis di atas isinya, supaya
       teksnya tidak terjepit di layar sempit. */
    .aw-stage__gauge {
        flex: 1 1 100%;
        justify-items: start;
        padding: 12px clamp(14px, 4vw, 20px);
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }
    .aw-stage__n { font-size: 24px; }
    .aw-stage__body { flex: 1 1 100%; }
}
@media (max-width: 560px) {
    .aw-ctas .sc2-btn,
    .aw-hero__ctas .sc2-btn { flex: 1 1 auto; justify-content: center; }
    .awd__row { grid-template-columns: minmax(0, 1.4fr) minmax(56px, 1fr) 36px; }
    .aw-bar { grid-template-columns: 48px minmax(0, 1fr) 46px; gap: 8px; }
}

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

@media (prefers-reduced-motion: reduce) {
    .aw-bar__f,
    .awd__bar2,
    .awd__rf { transition: none; }
    .aw-sect__i:hover .aw-sect__go { gap: 8px; }
}