/* ═══════════════════════════════════════════════════════════════════════
   SKYCYBER /layanan/endpoint-protection-tools
   ═══════════════════════════════════════════════════════════════════════
   Satu sistem visual dengan beranda, /tentang, /layanan, dan empat halaman
   layanan yang sudah diredesign: 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 endpoint.

   Ritmenya sengaja BEDA dari halaman layanan lain. Pentest bercerita soal
   kedalaman, vulnerability assessment soal keluasan dan urutan, awareness
   soal perubahan perilaku, training soal kurikulum. Halaman ini bercerita
   soal lapisan yang bekerja bersama: tumpukan lapis di hero, bilah metrik
   berbilah, empat kartu perkakas, alur pipa berbentuk anak panah, dan
   konsol armada endpoint.

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

   IKON: ikon tahap pipeline 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 background.

   Semua kelas berawalan "ep-" (mockup konsol memakai "epc-") dan hidup di
   dalam .sc2.
   ═══════════════════════════════════════════════════════════════════════ */

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

/* Lapis di panel hero menyala bergiliran dari bawah ke atas, meniru
   telemetri yang naik melewati tiap lapisan pertahanan. */
@keyframes ep-layer {
    0%, 26%, 100% { border-color: var(--line-soft); background: rgba(11, 11, 13, .55); }
    7%, 19%       { border-color: rgba(245, 160, 27, .5); background: rgba(245, 160, 27, .07); }
}

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

.ep-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 pita mendatar bertumpuk, sesuai tema lapisan. */
.ep-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.ep-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, .07) 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;
}

/* Pita mendatar tebal di sisi kanan, memudar ke kiri. */
.ep-hero__bands {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(52vw, 660px);
    background: repeating-linear-gradient(0deg, rgba(242, 239, 234, .075) 0 2px, transparent 2px 34px);
    -webkit-mask-image: linear-gradient(100deg, transparent 2%, rgba(0, 0, 0, .58) 52%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 2%, rgba(0, 0, 0, .58) 52%, #000 100%);
}

.ep-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(45% 44% at 79% 17%, 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. */
.ep-hero__inner { position: relative; z-index: 1; max-width: none; }

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

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

.ep-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: 24ch;
}
.ep-hero__h1 .sc2-hl { color: var(--amber); }

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

/* ── Tumpukan lapis ───────────────────────────────────────────────────
   Empat perkakas dibaca sebagai empat lapis pertahanan yang bertumpuk,
   dengan rel tegak di kiri yang menyambungkan semuanya. Bentuk ini tidak
   dipakai panel hero halaman layanan mana pun: vulnerability assessment
   memakai ubin, awareness bilah meter, training papan jadwal. */

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

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

/* Rel tegak menyambungkan keempat lapis. */
.ep-stack__list { position: relative; padding: 16px 18px; display: grid; gap: 9px; }
.ep-stack__rail {
    position: absolute;
    left: 34px;
    top: 24px;
    bottom: 24px;
    width: 1px;
    background: linear-gradient(180deg, rgba(245, 160, 27, .5), rgba(245, 160, 27, .1));
}

.ep-layer {
    position: relative;
    display: flex;
    gap: 13px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    background: rgba(11, 11, 13, .55);
    animation: ep-layer 8s ease-in-out infinite;
    animation-delay: var(--ep-d, 0s);
    /* backwards: selama jeda tunggu pakai keadaan 0%, bukan gaya default. */
    animation-fill-mode: backwards;
}
.ep-layer__n {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(245, 160, 27, .35);
    background: var(--ink);
    font: 700 10px/1 var(--mono);
    letter-spacing: .06em;
    color: var(--amber);
}
.ep-layer__txt { flex: 1; min-width: 0; }
.ep-layer__t {
    display: block;
    font-size: 12.5px;
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--paper);
}
.ep-layer__r {
    display: block;
    margin-top: 5px;
    font: 500 8.5px/1.4 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .42);
}

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

/* ─── 2 · Bilah metrik ─────────────────────────────────────────────────
   Isinya $service['ai_metrics'] dari dashboard admin, termasuk kolom
   ring_pct yang di desain lama menggerakkan cincin. Di sini kolom itu
   dipakai sebagai panjang bilah, jadi datanya tetap terpakai tanpa
   menambah kolom apa pun.

   Bilahnya tumbuh saat sel masuk layar (kelas .revealed dipasang observer
   milik layout). Kalau observer tidak pernah jalan, angkanya tetap
   terbaca besar di atas bilah. */

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

.ep-metric {
    /* 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, 36px) clamp(18px, 2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background .3s ease;
}
.ep-metric:hover { background: var(--ink); }
.ep-metric__v {
    font: 700 clamp(26px, 3.2vw, 40px)/1 var(--mono);
    letter-spacing: -.045em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.ep-metric__t { height: 4px; background: rgba(242, 239, 234, .09); }
.ep-metric__f {
    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 .ep-metric__f { width: var(--w, 0%); }
.ep-metric__l {
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
}
.ep-metric__d {
    font-size: 12px;
    line-height: 1.68;
    color: rgba(242, 239, 234, .48);
    max-width: 32ch;
}

/* ─── 3 · Empat perkakas ───────────────────────────────────────────────
   Kartu besar 2x2 dengan nomor lapis sebagai cap air. Tautan ke halaman
   platform hanya muncul kalau platform-nya memang ada dan aktif; kalau
   tidak, kartunya tetap tampil sebagai blok biasa tanpa tautan mati. */

.ep-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.ep-tool {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 34px);
    background: var(--panel);
    color: var(--paper);
    text-decoration: none;
    transition: background .3s ease;
}
.sc2-sec--panel .ep-tool { background: var(--ink); }
.ep-tool:hover { background: var(--raise); }
.ep-tool__ghost {
    position: absolute;
    top: -14px;
    right: 8px;
    font: 700 clamp(62px, 7.5vw, 100px)/1 var(--mono);
    letter-spacing: -.06em;
    color: rgba(242, 239, 234, .045);
    pointer-events: none;
    transition: color .3s ease;
}
.ep-tool:hover .ep-tool__ghost { color: rgba(245, 160, 27, .1); }
.ep-tool__lay {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 9px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--amber);
}
.ep-tool__lay i { width: 14px; height: 1px; background: rgba(245, 160, 27, .5); }
.ep-tool__n {
    position: relative;
    margin: 0;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.1;
    letter-spacing: -.032em;
    font-weight: 500;
    /* Wajib: layouts/app.blade.php memasang `h3 { color: var(--text-primary) }`
       untuk seluruh situs, dan token itu masih palet terang. Tanpa baris ini
       nama perkakasnya nyaris hilang di latar gelap. Berlaku untuk setiap
       <h3> di halaman bertema gelap. */
    color: inherit;
}
.ep-tool__d {
    position: relative;
    margin: 0;
    flex: 1;
    font-size: 13px;
    line-height: 1.76;
    color: rgba(242, 239, 234, .58);
    max-width: 56ch;
}
.ep-tool__go {
    position: relative;
    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;
}
.ep-tool__go svg { flex: none; width: 13px; height: 13px; }
.ep-tool:hover .ep-tool__go { gap: 13px; }

/* ─── 4 · Alur pipa ────────────────────────────────────────────────────
   Empat tahap pemrosesan telemetri. Di layar lebar tiap tahap dipotong
   jadi anak panah yang saling mengunci, supaya arah alirannya terbaca
   tanpa perlu ikon panah tambahan. Di layar sempit potongan itu dilepas
   dan tahapannya kembali jadi kisi biasa, jadi tidak ada teks yang
   terjepit di ujung runcing. */

.ep-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.ep-step {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: clamp(24px, 2.8vw, 34px) clamp(20px, 2.2vw, 28px);
    background: var(--panel);
    transition: background .3s ease;
}
.sc2-sec--panel .ep-step { background: var(--ink); }
.ep-step:hover { background: var(--raise); }
.ep-step__n {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 9px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--amber);
}
.ep-step__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(242, 239, 234, .18);
    color: var(--amber);
}
.ep-step__ico svg { width: 17px; height: 17px; }
.ep-step__t {
    margin: 0;
    font-size: clamp(15px, 1.7vw, 19px);
    line-height: 1.18;
    letter-spacing: -.026em;
    font-weight: 500;
    color: var(--paper);
}
.ep-step__d {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.74;
    color: rgba(242, 239, 234, .56);
}

@media (min-width: 901px) {
    .ep-flow {
        display: flex;
        gap: 0;
        background: transparent;
        border: 0;
    }
    .ep-step {
        flex: 1 1 0;
        /* -15px terhadap takik 18px menyisakan celah 3px, jadi batas antar
           anak panah terbaca sebagai garis, bukan sebagai tempelan. */
        margin-right: -15px;
        padding-left: clamp(34px, 3.4vw, 50px);
        padding-right: clamp(34px, 3.4vw, 50px);
        clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
    }
    .ep-step:first-child {
        padding-left: clamp(22px, 2.4vw, 32px);
        clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
    }
    .ep-step:last-child {
        margin-right: 0;
        padding-right: clamp(22px, 2.4vw, 32px);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%);
    }
    /* Selang-seling permukaan supaya tiap anak panah punya batas sendiri
       tanpa perlu garis tepi, yang tidak bisa mengikuti bentuk clip-path. */
    .ep-step:nth-child(even) { background: var(--raise); }
    /* --raise, bukan --panel: di section berlatar panel, --panel sama persis
       dengan latar sectionnya sehingga bentuk anak panahnya hilang. */
    .sc2-sec--panel .ep-step:nth-child(even) { background: var(--raise); }
}

/* Catatan latensi di kaki alur. */
.ep-flow__note {
    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);
}
.ep-flow__note 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);
}
.ep-flow__note svg { flex: none; width: 15px; height: 15px; color: var(--amber); }

/* ─── 5 · Kemampuan: daftar centang dua kolom ──────────────────────────
   Manfaat pertama di basis data ditulis tanpa tanda pisah, jadi ia tampil
   utuh sebagai judul tanpa uraian di bawahnya. Tata letak ini menampung
   keduanya tanpa terlihat timpang. */

.ep-caps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.ep-cap {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background: var(--panel);
    padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 28px);
    transition: background .3s ease;
}
.sc2-sec--panel .ep-cap { background: var(--ink); }
.ep-cap:hover { background: var(--raise); }
.ep-cap__ico { flex: none; color: var(--amber); margin-top: 2px; }
.ep-cap__ico svg { width: 18px; height: 18px; display: block; }
.ep-cap__txt { min-width: 0; }
.ep-cap__t {
    margin: 0;
    font-size: clamp(14.5px, 1.55vw, 17px);
    line-height: 1.32;
    letter-spacing: -.022em;
    font-weight: 500;
    color: var(--paper);
}
.ep-cap__d {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.76;
    color: rgba(242, 239, 234, .56);
}

/* ─── 6 · Standar & cakupan sistem ─────────────────────────────────── */

.ep-fw {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.ep-fw__i {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background: var(--panel);
    padding: clamp(22px, 2.6vw, 32px);
    transition: background .3s ease;
}
.sc2-sec--panel .ep-fw__i { background: var(--ink); }
.ep-fw__i:hover { background: var(--raise); }
.ep-fw__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(242, 239, 234, .18);
    color: var(--amber);
}
.ep-fw__ico svg { width: 19px; height: 19px; }
.ep-fw__txt { min-width: 0; }
.ep-fw__n {
    display: block;
    font: 500 12px/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--amber);
}
.ep-fw__d {
    display: block;
    margin-top: 11px;
    font-size: 12.5px;
    line-height: 1.75;
    color: rgba(242, 239, 234, .56);
}

/* Dinding sistem operasi yang didukung. */
.ep-os {
    margin-top: clamp(18px, 2.2vw, 30px);
    border: 1px solid var(--line);
    background: var(--panel);
}
.sc2-sec--panel .ep-os { background: var(--ink); }
.ep-os__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--raise);
}
.sc2-sec--panel .ep-os__bar { background: var(--panel); }
.ep-os__t {
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .62);
}
.ep-os__n { font: 700 9.5px/1 var(--mono); letter-spacing: .14em; color: var(--amber); }
.ep-os__list { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px; }
.ep-chip {
    padding: 6px 11px;
    border: 1px solid rgba(245, 160, 27, .3);
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .1em;
    color: var(--amber);
    white-space: nowrap;
}
.ep-chip--dim { border-color: rgba(242, 239, 234, .14); color: rgba(242, 239, 234, .6); }
.ep-os__note {
    padding: 0 18px 18px;
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(242, 239, 234, .46);
    max-width: 82ch;
}

/* ─── 7 · Sektor: dua kolom dengan cap air ─────────────────────────── */

.ep-sect {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.ep-sect__i {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(24px, 2.8vw, 36px);
    background: var(--panel);
    color: var(--paper);
    text-decoration: none;
    transition: background .3s ease;
}
.sc2-sec--panel .ep-sect__i { background: var(--ink); }
.ep-sect__i:hover { background: var(--raise); }
/* Ikon sektor dibesarkan jadi cap air di sudut, bukan lencana kecil. */
.ep-sect__wm {
    position: absolute;
    right: -14px;
    bottom: -20px;
    color: rgba(242, 239, 234, .05);
    pointer-events: none;
    transition: color .3s ease;
}
.ep-sect__wm svg { width: 118px; height: 118px; display: block; }
.ep-sect__i:hover .ep-sect__wm { color: rgba(245, 160, 27, .1); }
.ep-sect__n {
    position: relative;
    font-size: clamp(16px, 1.9vw, 21px);
    line-height: 1.16;
    letter-spacing: -.028em;
    font-weight: 500;
}
.ep-sect__d {
    position: relative;
    flex: 1;
    font-size: 12.5px;
    line-height: 1.74;
    color: rgba(242, 239, 234, .54);
    max-width: 46ch;
}
.ep-sect__go {
    position: relative;
    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;
}
.ep-sect__go svg { flex: none; width: 13px; height: 13px; }
.ep-sect__i:hover .ep-sect__go { gap: 13px; }

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

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

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

.ep-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

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

/* ─── 8b · Konsol armada endpoint ──────────────────────────────────────
   Keluaran layanan ini bukan dokumen yang terbit sekali, melainkan konsol
   yang dipantau tiap hari, jadi pratinjaunya berbentuk konsol: bukan
   register (vulnerability assessment), dasbor program (awareness), atau
   rencana kelas (training).

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

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

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

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

/* ── Ringkas armada ── */
.epc__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); }
.epc__stat { background: var(--ink); padding: 11px 12px; }
.epc__sv {
    display: block;
    font: 700 clamp(15px, 1.7vw, 19px)/1 var(--mono);
    letter-spacing: -.03em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.epc__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);
}

/* ── Aktivitas terakhir ── */
.epc__row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 88px;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
}
.epc__row:last-child { border-bottom: 0; }
.epc__row--head { padding-bottom: 8px; }
.epc__row--head span {
    font: 500 7.5px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .32);
}
.epc__time {
    font: 500 9px/1 var(--mono);
    letter-spacing: .04em;
    color: rgba(242, 239, 234, .44);
    font-variant-numeric: tabular-nums;
}
.epc__ev { min-width: 0; }
.epc__en {
    display: block;
    font-size: 11.5px;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: rgba(242, 239, 234, .82);
}
.epc__eh {
    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;
}
.epc__act {
    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;
}
.epc__act--block { border-color: rgba(245, 160, 27, .4); color: var(--amber); }
.epc__act--iso { border-color: var(--amber); background: var(--amber); color: var(--on-amber); }

/* ── Cakupan agent per sistem ──
   Bilahnya tumbuh saat blok masuk layar (kelas .revealed dipasang
   observer milik layout). Kalau observer tidak pernah jalan, jumlahnya
   tetap terbaca di sisi kanan tiap bilah. */
.epc__cov {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(80px, 1.1fr) 44px;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
}
.epc__cov:last-child { border-bottom: 0; }
.epc__ck { font-size: 11px; line-height: 1.3; color: rgba(242, 239, 234, .72); }
.epc__ct { height: 5px; background: rgba(242, 239, 234, .08); }
.epc__cf {
    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 .epc__cf { width: var(--w, 0%); }
.epc__cv {
    font: 700 10px/1 var(--mono);
    text-align: right;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}

/* ── Kerangka acuan ── */
.epc__map { display: flex; flex-wrap: wrap; gap: 7px; }
.epc__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;
}

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

.ep-close { position: relative; overflow: hidden; }
.ep-close__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ep-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;
}
.ep-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%);
}
.ep-close > .sc2-wrap { position: relative; z-index: 1; }
.ep-close__foot { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 30px; }
.ep-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);
}
.ep-close__foot svg { flex: none; width: 14px; height: 14px; color: var(--amber); }

/* Kartu proof of concept di sisi kanan penutup, menggantikan penampung
   foto yang dipakai halaman pentest di posisi ini. */
.ep-poc { border: 1px solid var(--line); background: rgba(11, 11, 13, .72); }
.ep-poc__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);
}
.ep-poc__bar i {
    width: 6px;
    height: 6px;
    background: var(--amber);
    animation: sc2-blip 1.6s ease-in-out infinite;
}
.ep-poc__i {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.ep-poc__i:last-child { border-bottom: 0; }
.ep-poc__k {
    flex: none;
    width: 26px;
    font: 700 10px/1.5 var(--mono);
    letter-spacing: .06em;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}
.ep-poc__v { font-size: 12.5px; line-height: 1.7; color: rgba(242, 239, 234, .6); }

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

@media (max-width: 1080px) {
    .ep-tools { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .ep-caps { grid-template-columns: 1fr; }
    .ep-fw { grid-template-columns: 1fr; }
    .ep-sect { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .ep-flow { grid-template-columns: 1fr; }
    .epc__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .ep-ctas .sc2-btn,
    .ep-hero__ctas .sc2-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 420px) {
    .epc__row { grid-template-columns: 40px minmax(0, 1fr); }
    .epc__act { grid-column: 2 / -1; justify-self: start; margin-top: 2px; }
    .epc__row--head span:last-child { display: none; }
    .epc__cov { grid-template-columns: minmax(0, 1.3fr) minmax(56px, 1fr) 40px; }
}

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

@media (prefers-reduced-motion: reduce) {
    .ep-layer { animation: none; }
    .ep-metric__f,
    .epc__cf { transition: none; }
    .ep-tool:hover .ep-tool__go,
    .ep-sect__i:hover .ep-sect__go { gap: 8px; }
}