/* ═══════════════════════════════════════════════════════════════════════
   SKYCYBER /layanan/penetration-testing — mengikuti konsep di
   NEW UI KONSEP/SkyCyber Penetration Testing.html
   ═══════════════════════════════════════════════════════════════════════
   Token warna, tipografi, tombol, kerangka section, dan FAQ dipinjam dari
   home-v2.css yang ikut dimuat di halaman ini, jadi satu sistem visual
   dengan beranda dan /tentang. Tanpa Tailwind baru, tanpa langkah build.

   Halaman ini SATU-SATUNYA pemakai berkas ini: services/show.blade.php
   memuatnya hanya saat $slug === 'penetration-testing'. Empat halaman
   layanan lain tidak tersentuh sama sekali.

   IKON: konsep aslinya memakai icon font Phosphor dari CDN (>600 KB).
   Di sini semuanya diganti SVG inline dengan bentuk setara, jadi tidak ada
   permintaan jaringan tambahan dan ikonnya ikut warna `currentColor`.

   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, background, dan box-shadow.

   Semua kelas berawalan "pt-" dan hidup di dalam .sc2.
   ═══════════════════════════════════════════════════════════════════════ */

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

@keyframes pt-sweep {
    0%   { transform: translateY(0);      opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateY(var(--pt-sweep-h, 460px)); opacity: 0; }
}
@keyframes pt-row {
    0%, 18%, 100% { background: transparent; }
    4%, 12%       { background: rgba(245, 160, 27, .07); }
}
@keyframes pt-mark {
    0%, 18%, 100% { opacity: 0; transform: scaleY(.2); }
    4%, 12%       { opacity: 1; transform: scaleY(1); }
}
@keyframes pt-icon {
    0%, 18%, 100% { border-color: rgba(242, 239, 234, .16); box-shadow: none; }
    4%, 12%       { border-color: rgba(245, 160, 27, .55); box-shadow: 0 0 18px rgba(245, 160, 27, .22); }
}
@keyframes pt-tick {
    0%, 18%, 100% { opacity: .28; transform: scale(.9); }
    5%, 12%       { opacity: 1;   transform: scale(1); }
}

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

.pt-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: kisi teknis + arsir diagonal + kolam cahaya amber, pola yang
   sama dengan hero /tentang dan blok penutup halaman ini, jadi seluruh
   situs memakai satu bahasa latar. Semuanya murni gradasi, tanpa
   `filter: blur()` dan tanpa gambar. */
.pt-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Kisi dua tingkat: kisi utama 96px yang menegaskan struktur, kisi halus
   24px sebagai tekstur, dan titik amber di tiap simpul 192px. */
.pt-hero__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1.6px at 1px 1px, rgba(245, 160, 27, .5) 0 1px, transparent 1.6px),
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .075) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg,  rgba(242, 239, 234, .055) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .022) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(0deg,  rgba(242, 239, 234, .018) 0 1px, transparent 1px 24px);
    background-size: 192px 192px, auto, auto, auto, auto;
}

/* Arsir diagonal di sisi kanan, memudar ke kiri. Elemen tersendiri karena
   ia butuh mask sendiri, terpisah dari kisi di atas. */
.pt-hero__hatch {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(48vw, 620px);
    background: repeating-linear-gradient(-45deg, rgba(242, 239, 234, .07) 0 1px, transparent 1px 10px);
    -webkit-mask-image: linear-gradient(105deg, transparent 4%, rgba(0, 0, 0, .65) 55%, #000 100%);
    mask-image: linear-gradient(105deg, transparent 4%, rgba(0, 0, 0, .65) 55%, #000 100%);
}

/* Cahaya amber di kanan atas, lalu scrim ringan yang meredupkan kisi ke
   arah kaki hero supaya batasnya ke section berikutnya tetap tenang. */
.pt-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(46% 46% at 82% 12%, rgba(245, 160, 27, .17), 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 clamp(20px, 4vw, 64px) yang
   sama persis dengan --pad-x milik hero ini. Karena itu batas lebarnya
   dilepas, supaya tepi kiri-kanan hero sejajar dengan logo dan menu. */
.pt-hero__inner { position: relative; z-index: 1; max-width: none; }

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

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

.pt-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);
    /* 24ch: cukup untuk "Penetration Testing yang" berdiri satu baris,
       jadi judulnya jatuh dua baris di lebar layar yang umum. Konsep
       aslinya memakai 15ch dan itu yang memaksa empat baris. */
    max-width: 24ch;
}
.pt-hero__h1 .sc2-hl { color: var(--amber); }

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

/* ── Panel ruang lingkup beranimasi ───────────────────────────────────
   Empat baris menyala bergiliran dengan jeda 2 detik, ditambah garis
   sapuan yang turun perlahan. Semuanya berhenti saat pengunjung meminta
   "kurangi gerak". */

.pt-scope {
    flex: 1 1 380px;
    min-width: 300px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: linear-gradient(160deg, var(--panel), var(--ink) 78%);
}
.pt-scope::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 60% at 100% 0%, rgba(245, 160, 27, .1), transparent 62%);
}
.pt-scope__sweep {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 160, 27, .85), transparent);
    animation: pt-sweep 8s linear infinite;
    pointer-events: none;
    will-change: transform;
}

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

.pt-scope__list { position: relative; padding: 6px 22px 10px; }

.pt-scope__row {
    position: relative;
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 19px 12px 19px 0;
    border-bottom: 1px solid var(--line-soft);
    animation: pt-row 8s ease-in-out infinite;
    animation-delay: var(--pt-d, 0s);
    /* backwards: selama jeda tunggu, pakai keadaan 0% (tersembunyi),
       bukan gaya default yang justru terlihat. */
    animation-fill-mode: backwards;
}
.pt-scope__row:last-child { border-bottom: 0; }
.pt-scope__mark {
    position: absolute;
    left: -22px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--amber);
    animation: pt-mark 8s ease-in-out infinite;
    animation-delay: var(--pt-d, 0s);
    /* backwards: selama jeda tunggu, pakai keadaan 0% (tersembunyi),
       bukan gaya default yang justru terlihat. */
    animation-fill-mode: backwards;
}
.pt-scope__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(242, 239, 234, .16);
    background: var(--ink);
    color: var(--amber);
    animation: pt-icon 8s ease-in-out infinite;
    animation-delay: var(--pt-d, 0s);
    /* backwards: selama jeda tunggu, pakai keadaan 0% (tersembunyi),
       bukan gaya default yang justru terlihat. */
    animation-fill-mode: backwards;
}
.pt-scope__ico svg { width: 20px; height: 20px; }
.pt-scope__txt { flex: 1; min-width: 0; }
.pt-scope__name { display: block; font-size: 15px; letter-spacing: -.012em; color: var(--paper); }
.pt-scope__meta {
    display: block;
    margin-top: 5px;
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .12em;
    color: rgba(242, 239, 234, .4);
}
.pt-scope__tick {
    flex: none;
    color: var(--amber);
    animation: pt-tick 8s ease-in-out infinite;
    animation-delay: var(--pt-d, 0s);
    /* backwards: selama jeda tunggu, pakai keadaan 0% (tersembunyi),
       bukan gaya default yang justru terlihat. */
    animation-fill-mode: backwards;
}
.pt-scope__tick svg { width: 19px; height: 19px; display: block; }

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

/* ─── 2 · Bilah angka ──────────────────────────────────────────────────
   Ikon kotak besar di kiri, angka dan label di kanan. */

/* Sejajar hero dan bilah header: tanpa batas 1280px, hanya padding sisi
   --pad-x. Garis rambut antar sel digambar sebagai outline tiap sel, bukan
   warna latar wadah yang mengintip lewat celah, supaya area padding di
   kiri-kanan tidak ikut menjadi pita abu terang. */
.pt-figs {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    padding-inline: var(--pad-x);
    background: var(--panel);
}
/* 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. */
.pt-figs__wrap { background: var(--panel); border-bottom: 1px solid var(--line); }

.pt-fig {
    flex: 1 1 calc(25% - 1px);
    /* 200px: dua sel masih muat berdampingan di ponsel 360px setelah
       dikurangi padding sisi --pad-x, jadi bilahnya tetap 2 kolom. */
    min-width: 200px;
    outline: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 22px);
    background: var(--panel);
    padding: clamp(22px, 2.8vw, 34px) clamp(18px, 2vw, 28px);
    transition: background .3s ease;
}
.pt-fig:hover { background: var(--ink); }
.pt-fig__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: clamp(52px, 5vw, 64px);
    height: clamp(52px, 5vw, 64px);
    border: 1px solid rgba(242, 239, 234, .16);
    background: var(--ink);
    color: var(--amber);
}
.pt-fig__ico svg { width: clamp(24px, 2.6vw, 30px); height: clamp(24px, 2.6vw, 30px); }
.pt-fig__txt { flex: 1; min-width: 0; }
.pt-fig__num {
    display: block;
    font: 700 clamp(30px, 3.6vw, 46px)/1 var(--mono);
    letter-spacing: -.045em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.pt-fig__num i { font-style: normal; color: var(--amber); }
.pt-fig__label {
    display: block;
    margin-top: 9px;
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .44);
}

/* ─── 3 · Kartu ruang lingkup ─────────────────────────────────────── */

/* Dua kolom tetap di desktop & laptop, satu kolom di layar sempit.
   Sebelumnya flex-wrap membuat baris pertama berisi tiga kartu dan
   kartu terakhir melebar penuh sendirian. */
.pt-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pt-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(22px, 2.6vw, 34px);
    background: var(--panel);
    border: 1px solid var(--line);
    transition: border-color .3s ease, transform .3s ease;
}
.pt-card:hover { border-color: rgba(242, 239, 234, .3); transform: translateY(-3px); }

.pt-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pt-card__ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(242, 239, 234, .18);
    background: var(--ink);
    color: var(--amber);
}
.pt-card__ico svg { width: 21px; height: 21px; }
.pt-card__n {
    font: 700 11px/1 var(--mono);
    letter-spacing: .14em;
    color: rgba(242, 239, 234, .22);
}
.pt-card__name {
    margin: 0;
    font-size: clamp(19px, 2.2vw, 25px);
    line-height: 1.1;
    letter-spacing: -.028em;
    font-weight: 500;
    color: var(--paper);
    max-width: 26ch;
}
.pt-card__desc {
    margin: 0;
    flex: 1;
    font-size: 13.5px;
    line-height: 1.76;
    color: rgba(242, 239, 234, .58);
    max-width: 60ch;
}
.pt-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
.pt-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;
}
.pt-card:hover .pt-chip { border-color: rgba(245, 160, 27, .3); color: rgba(242, 239, 234, .78); }

/* ─── 4 · Metodologi: rel tegak dengan progres gulir ──────────────────
   Garis latar redup, lalu garis amber yang tingginya mengikuti posisi
   gulir (diisi skrip kecil di halaman). Simpul yang sudah dilewati
   menyala. */

.pt-flow { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 56px); align-items: flex-start; }
.pt-flow__steps { flex: 1.5 1 460px; min-width: 290px; position: relative; }

.pt-flow__rail,
.pt-flow__fill {
    position: absolute;
    left: calc(clamp(46px, 5vw, 58px) / 2 - 1px);
    top: 16px;
    width: 2px;
}
.pt-flow__rail { bottom: 26px; background: rgba(242, 239, 234, .1); }
.pt-flow__fill {
    height: 0;
    background: linear-gradient(180deg, var(--amber), rgba(245, 160, 27, .4));
    box-shadow: 0 0 16px rgba(245, 160, 27, .45);
    transition: height .2s linear;
}

.pt-step {
    position: relative;
    display: flex;
    gap: clamp(16px, 2.4vw, 30px);
    padding-bottom: clamp(26px, 3.2vw, 44px);
}
.pt-step:last-child { padding-bottom: 0; }
.pt-step__rail { flex: none; width: clamp(46px, 5vw, 58px); }
.pt-step__dot {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(46px, 5vw, 58px);
    height: clamp(46px, 5vw, 58px);
    border: 1px solid rgba(242, 239, 234, .18);
    background: var(--ink);
    color: rgba(242, 239, 234, .5);
    transition: color .4s ease, border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
.pt-step__dot svg { width: clamp(20px, 2.2vw, 24px); height: clamp(20px, 2.2vw, 24px); }
.pt-step.is-on .pt-step__dot {
    color: var(--on-amber);
    background: var(--amber);
    border-color: var(--amber);
    box-shadow: 0 0 22px rgba(245, 160, 27, .3);
}

.pt-step__body { flex: 1; min-width: 0; }
.pt-step__head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.pt-step__n {
    font: 700 10.5px/1 var(--mono);
    letter-spacing: .18em;
    color: rgba(242, 239, 234, .34);
    transition: color .4s ease;
}
.pt-step.is-on .pt-step__n { color: var(--amber); }
.pt-step__line { flex: 1; min-width: 24px; height: 1px; background: var(--line-soft); }
.pt-step__phase {
    font: 500 9px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .32);
}
.pt-step__name {
    margin: 14px 0 0;
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1.06;
    letter-spacing: -.03em;
    font-weight: 500;
    color: var(--paper);
}
.pt-step__desc {
    margin: 12px 0 0;
    max-width: 56ch;
    font-size: 13.5px;
    line-height: 1.76;
    color: rgba(242, 239, 234, .58);
}

/* Kartu penegas di sisi kanan metodologi. */
.pt-note {
    flex: 1 1 300px;
    min-width: 270px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(24px, 2.8vw, 36px);
    border: 1px solid rgba(245, 160, 27, .34);
    background: linear-gradient(150deg, rgba(245, 160, 27, .14), var(--ink) 72%);
}
.pt-note__ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(245, 160, 27, .4);
    background: rgba(245, 160, 27, .08);
    color: var(--amber);
}
.pt-note__ico svg { width: 24px; height: 24px; }
.pt-note__t {
    margin: 0;
    font-size: clamp(16px, 1.9vw, 21px);
    line-height: 1.5;
    letter-spacing: -.02em;
    color: rgba(242, 239, 234, .92);
}
.pt-note__list {
    display: grid;
    gap: 11px;
    padding-top: 18px;
    border-top: 1px solid rgba(245, 160, 27, .24);
}
.pt-note__list span {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(242, 239, 234, .76);
}
.pt-note__list svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--amber); }

/* ─── 5 · Deliverable: kartu bernomor samar ───────────────────────── */

.pt-deliv { display: flex; flex-wrap: wrap; gap: 14px; }
.pt-del {
    position: relative;
    overflow: hidden;
    flex: 1 1 calc(50% - 7px);
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(24px, 2.8vw, 38px);
    border: 1px solid var(--line);
    background: linear-gradient(158deg, var(--panel), var(--ink) 82%);
    transition: border-color .35s ease, transform .35s ease;
}
.pt-del:hover { border-color: rgba(245, 160, 27, .4); transform: translateY(-3px); }
.pt-del__ghost {
    position: absolute;
    top: clamp(10px, 1.4vw, 18px);
    right: clamp(16px, 2vw, 26px);
    font: 700 clamp(42px, 5.4vw, 68px)/1 var(--mono);
    letter-spacing: -.06em;
    color: rgba(242, 239, 234, .05);
    pointer-events: none;
    user-select: none;
    transition: color .35s ease;
}
.pt-del:hover .pt-del__ghost { color: rgba(245, 160, 27, .09); }
.pt-del__ico {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(48px, 4.6vw, 58px);
    height: clamp(48px, 4.6vw, 58px);
    border: 1px solid rgba(242, 239, 234, .16);
    background: var(--ink);
    color: var(--amber);
}
.pt-del__ico svg { width: clamp(22px, 2.4vw, 27px); height: clamp(22px, 2.4vw, 27px); }
.pt-del__t {
    position: relative;
    margin: 0;
    font-size: clamp(19px, 2.2vw, 25px);
    line-height: 1.1;
    letter-spacing: -.026em;
    font-weight: 500;
    color: var(--paper);
    max-width: 22ch;
}
.pt-del__d {
    position: relative;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.78;
    color: rgba(242, 239, 234, .58);
    max-width: 48ch;
}

/* ─── 6 · Standar & perkakas: dua panel berbilah judul ────────────── */

.pt-panels { display: flex; flex-wrap: wrap; gap: 14px; }
.pt-panel { flex: 1 1 420px; min-width: 290px; border: 1px solid var(--line); background: var(--panel); }
.pt-panel__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
}
.pt-panel__t {
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .52);
}
.pt-panel__n { font: 500 9.5px/1 var(--mono); letter-spacing: .14em; color: var(--amber); }
.pt-panel__body { padding: 6px 18px 14px; }

.pt-fw {
    display: flex;
    flex-wrap: wrap;
    gap: 10px clamp(16px, 2vw, 30px);
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
}
.pt-fw:last-child { border-bottom: 0; }
.pt-fw__n { flex: 0 1 210px; min-width: 180px; font-size: 14px; letter-spacing: -.012em; color: var(--paper); }
.pt-fw__d { flex: 1 1 240px; min-width: 210px; font-size: 12.5px; line-height: 1.66; color: rgba(242, 239, 234, .52); }

.pt-tool {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}
.pt-tool:last-child { border-bottom: 0; }
.pt-tool__i { flex: none; color: var(--amber); display: grid; place-items: center; }
.pt-tool__i svg { width: 16px; height: 16px; }
.pt-tool__n { flex: 0 1 190px; min-width: 150px; font-size: 13.5px; letter-spacing: -.01em; color: var(--paper); }
.pt-tool__d {
    flex: 1 1 200px;
    min-width: 170px;
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .44);
}

/* ─── 7 · Kepatuhan sektor: baris lebar yang bisa diklik ──────────── */

.pt-sectors { border-top: 1px solid var(--line); }
.pt-sector {
    display: flex;
    flex-wrap: wrap;
    gap: 14px clamp(16px, 2.4vw, 40px);
    align-items: center;
    padding: clamp(18px, 2.2vw, 26px) clamp(6px, 1vw, 14px);
    border-bottom: 1px solid var(--line);
    color: var(--paper);
    text-decoration: none;
    transition: background .25s ease, padding-left .25s ease;
}
.pt-sector:hover { background: var(--panel); padding-left: 20px; }
.sc2-sec--panel .pt-sector:hover { background: var(--raise); }
/* Lencana bulat berlatar amber dengan ikon putih.

   Catatan penting: home-v2.css memaksa `border-radius: 0` untuk seluruh
   turunan .sc2 (ciri "sudut tajam" tema ini). Spesifisitas `.sc2 *` sama
   dengan `.pt-sector__ico`, jadi lingkarannya jadi HANYA karena
   pentest-v2.css dimuat setelah home-v2.css. Kalau urutan muat itu diubah,
   lencana ini akan kembali kotak. */
.pt-sector__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: clamp(46px, 3.4vw, 54px);
    height: clamp(46px, 3.4vw, 54px);
    border: 0;
    border-radius: 50%;
    background: var(--amber);
    color: #fff;
    line-height: 1;
    transition: background .25s ease, transform .25s ease;
}
/* Goresan ditebalkan sedikit dari 1.5 bawaan: ikon putih di atas amber
   punya kontras lebih rendah daripada amber di atas gelap, jadi butuh
   garis yang sedikit lebih tegas supaya tetap terbaca. */
.pt-sector__ico svg {
    width: clamp(22px, 1.7vw, 26px);
    height: clamp(22px, 1.7vw, 26px);
    stroke-width: 1.7;
}
.pt-sector:hover .pt-sector__ico { background: var(--amber-hi); transform: scale(1.06); }
.pt-sector__n {
    flex: 0 1 260px;
    min-width: 200px;
    font-size: clamp(18px, 2.2vw, 26px);
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: 500;
}
.pt-sector__d { flex: 2 1 320px; min-width: 250px; font-size: 13px; line-height: 1.7; color: rgba(242, 239, 234, .54); }
.pt-sector__go { flex: none; color: var(--amber); display: grid; place-items: center; transition: transform .25s ease; }
.pt-sector__go svg { width: 15px; height: 15px; }
.pt-sector:hover .pt-sector__go { transform: translateX(4px); }

/* ─── 8 · Blok laporan & CTA: naratif + gambar ────────────────────── */

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

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

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

/* Bingkai gambar dengan keterangan menempel di sudut. */
.pt-frame {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: var(--panel);
    border: 1px solid var(--line-soft);
    min-height: clamp(260px, 30vw, 400px);
    display: flex;
}
.sc2-sec--panel .pt-frame { background: var(--ink); }
.pt-frame img { display: block; width: 100%; height: auto; object-fit: cover; }
.pt-frame__cap {
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px 14px;
    background: rgba(11, 11, 13, .84);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font: 500 9px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .58);
}

/* Penampung gambar sementara: arsir diagonal + keterangan, jelas terbaca
   sebagai placeholder, bukan aset yang gagal dimuat. Ganti isinya dengan
   <img> saat gambar sungguhan siap. */
.pt-ph {
    flex: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: clamp(22px, 3vw, 40px);
    background: repeating-linear-gradient(-45deg, rgba(242, 239, 234, .035) 0 1px, transparent 1px 9px);
    color: var(--faint);
    text-align: center;
}
.pt-ph svg { width: 28px; height: 28px; color: rgba(245, 160, 27, .5); }
.pt-ph__t {
    font: 500 9.5px/1.6 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    max-width: 28ch;
}

/* ─── 8b · Mockup laporan hidup ────────────────────────────────────────
   Pengganti penampung gambar: seluruh pratinjau laporan dibangun dari
   HTML dan CSS, jadi teksnya tajam di layar retina, ikut tema gelap, bisa
   dipilih pembaca layar, dan tidak menambah satu pun berkas gambar.

   Isinya ILUSTRASI, bukan laporan klien sungguhan: nomor, nama sektor,
   dan angkanya contoh. Karena itu bilah atasnya memuat penanda "CONTOH".

   Warna severity berdiri sendiri di luar palet amber merek, karena
   pembacaannya harus mengikuti konvensi CVSS (merah ke abu), bukan warna
   merek. Amber tetap dipakai untuk aksen antarmuka. */

.ptr {
    --sev-crit: #e5484d;
    --sev-high: #f2811d;
    --sev-med:  #e8b931;
    --sev-low:  rgba(242, 239, 234, .3);

    position: relative;
    overflow: hidden;
    background: var(--ink);
    border: 1px solid var(--line);
    font-variant-ligatures: none;
}
.sc2-sec--panel .ptr { background: var(--ink); }

/* Garis amber tipis di tepi atas, penanda dokumen aktif. */
.ptr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(245, 160, 27, .75), transparent);
}

/* ── Bilah judul dokumen ── */

.ptr__bar {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}
.ptr__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(242, 239, 234, .16);
    color: var(--amber);
}
.ptr__ico svg { width: 17px; height: 17px; }
.ptr__id { flex: 1; min-width: 0; }
.ptr__no {
    display: block;
    font: 500 12px/1.3 var(--mono);
    letter-spacing: .06em;
    color: var(--paper);
}
.ptr__meta {
    display: block;
    margin-top: 4px;
    font: 500 8.5px/1.4 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}
.ptr__badge {
    flex: none;
    padding: 6px 11px;
    border: 1px solid rgba(245, 160, 27, .4);
    font: 500 8.5px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
    white-space: nowrap;
}

/* ── Isi dokumen ── */

.ptr__body { padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px); }

.ptr__h {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 8.5px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--amber);
}
.ptr__h::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.ptr__h + * { margin-top: 12px; }
.ptr__sec + .ptr__sec { margin-top: clamp(18px, 2.2vw, 26px); }

.ptr__p {
    margin: 0;
    font-size: 12px;
    line-height: 1.72;
    color: rgba(242, 239, 234, .62);
}
.ptr__p b { font-weight: 500; color: var(--paper); }
.ptr__p .crit { color: var(--sev-crit); }
.ptr__p .high { color: var(--sev-high); }
.ptr__p .med  { color: var(--sev-med); }
.ptr__p .low  { color: rgba(242, 239, 234, .5); }

/* ── Distribusi severity ── */

.ptr__rows { display: grid; gap: 9px; }
.ptr__row {
    display: grid;
    grid-template-columns: 62px 30px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 10px;
}
.ptr__lab {
    font: 500 8.5px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: right;
}
.ptr__score {
    font: 500 10px/1 var(--mono);
    letter-spacing: .02em;
    color: rgba(242, 239, 234, .5);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ptr__track { height: 8px; background: rgba(242, 239, 234, .05); }
.ptr__fill {
    display: block;
    height: 100%;
    width: 0;
    background: currentColor;
    transition: width .9s cubic-bezier(.2, .7, .2, 1) .15s;
}
/* Bilah tumbuh saat blok masuk layar (kelas .revealed dipasang observer
   milik layout). */
.reveal.revealed .ptr__fill { width: var(--w, 0%); }
.ptr__n {
    font: 500 10px/1 var(--mono);
    color: rgba(242, 239, 234, .58);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ptr__row--crit { color: var(--sev-crit); }
.ptr__row--high { color: var(--sev-high); }
.ptr__row--med  { color: var(--sev-med); }
.ptr__row--low  { color: var(--sev-low); }
.ptr__row--crit .ptr__lab { color: var(--sev-crit); }
.ptr__row--high .ptr__lab { color: var(--sev-high); }
.ptr__row--med  .ptr__lab { color: var(--sev-med); }
.ptr__row--low  .ptr__lab { color: rgba(242, 239, 234, .42); }

.ptr__key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}
.ptr__key span {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 500 8px/1 var(--mono);
    letter-spacing: .1em;
    color: var(--faint);
}
.ptr__key i { width: 7px; height: 7px; background: currentColor; }

/* ── Temuan tertinggi: kartu + tabel metrik ── */

.ptr__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

.ptr__card { padding: 15px; border: 1px solid var(--line); background: var(--panel); }
.ptr__cve {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 9px/1 var(--mono);
    letter-spacing: .12em;
    color: var(--sev-crit);
}
.ptr__cve i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.ptr__t {
    margin: 11px 0 0;
    font-size: 13px;
    line-height: 1.34;
    letter-spacing: -.014em;
    font-weight: 500;
    color: var(--paper);
}
.ptr__path {
    display: block;
    margin-top: 6px;
    font: 500 10.5px/1.4 var(--mono);
    letter-spacing: -.01em;
    color: var(--amber);
    word-break: break-all;
}
.ptr__d { margin: 10px 0 0; font-size: 11.5px; line-height: 1.66; color: rgba(242, 239, 234, .52); }
.ptr__foot { display: flex; align-items: flex-end; gap: 11px; margin-top: 14px; }
.ptr__big {
    font: 700 28px/1 var(--mono);
    letter-spacing: -.05em;
    color: var(--sev-crit);
    font-variant-numeric: tabular-nums;
}
.ptr__vec {
    flex: 1;
    min-width: 0;
    font: 500 8px/1.5 var(--mono);
    letter-spacing: .02em;
    color: var(--faint);
    word-break: break-all;
}

.ptr__mh {
    font: 500 8.5px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .5);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}
.ptr__m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ptr__mi {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 10.5px;
    line-height: 1.4;
    color: rgba(242, 239, 234, .5);
}
.ptr__mi b { font: 500 9.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--amber); }
.ptr__mi--none b { color: rgba(242, 239, 234, .62); }

@media (max-width: 860px) {
    .pt-cards { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
    .ptr__grid { grid-template-columns: 1fr; }
    .ptr__m { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .ptr__row { grid-template-columns: 54px 26px minmax(0, 1fr) 18px; gap: 8px; }
    .ptr__m { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ptr__fill { transition: none; }
}

/* ─── 9 · Penutup ────────────────────────────────────────────────── */

/* Blok penutup kini selebar bilah header, sama seperti hero. Latarnya
   sengaja dibuat kembaran latar hero supaya halaman terbuka dan tertutup
   dengan perlakuan yang sama, hanya cahayanya dipindah ke sudut kanan
   bawah. Tetap tanpa `filter: blur()`: semua kelembutan dari gradasi. */
.pt-close { position: relative; overflow: hidden; }

.pt-close__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Kisi teknis dengan titik amber di simpulnya, sama seperti hero. */
.pt-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;
}

/* Dua lapis: cahaya amber di kanan bawah, lalu scrim warna panel yang
   meredupkan kisi ke arah atas supaya zona teks tetap tenang. */
.pt-close__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(44% 52% at 86% 86%, rgba(245, 160, 27, .18), 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%);
}

.pt-close > .sc2-wrap { position: relative; z-index: 1; }
.pt-close__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pt-close__foot { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 30px; }
.pt-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);
}
.pt-close__foot svg { flex: none; width: 14px; height: 14px; color: var(--amber); }

@media (max-width: 560px) {
    .pt-close__ctas .sc2-btn,
    .pt-hero__ctas .sc2-btn { flex: 1 1 auto; justify-content: center; }
}

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

@media (prefers-reduced-motion: reduce) {
    .pt-scope__sweep { display: none; }
    .pt-scope__row,
    .pt-scope__mark,
    .pt-scope__ico,
    .pt-scope__tick,
    .pt-scope__title i { animation: none; }
    .pt-scope__mark { opacity: 0; }
    .pt-scope__tick { opacity: 1; transform: none; }
    .pt-flow__fill { transition: none; }
    .pt-card:hover,
    .pt-del:hover { transform: none; }
}