/* ═══════════════════════════════════════════════════════════════════════
   /platform/cyberion — mengikuti "Assets/SkyCyber Cybrion.html"
   ═══════════════════════════════════════════════════════════════════════
   CSS biasa, bukan Tailwind. Dipakai HANYA oleh platform/_cybrion.blade.php.

   Seperti threvix-v2.css, bitbait-v2.css, dan cytectra-v2.css, berkas ini
   BERDIRI SENDIRI dan sengaja TIDAK memuat home-v2.css. Konsep Cybrion
   memakai Inter untuk judul, sudut membulat 20px, dan kartu bergradien,
   sementara sistem .sc2 memakai JetBrains Mono dan sudut siku.

   Yang tetap dipakai bersama seluruh situs: header, footer, dan tombol
   melayang dari chrome-v2.css, serta kelas .reveal milik layouts/app.

   Monospace tetap hadir tapi perannya dibatasi: lencana, label kecil,
   angka, chip, dan keterangan teknis di panel swarm. Judul dan teks isi
   memakai Inter.

   Semua kelas berawalan "cb-" dan tokennya hidup di dalam .cb saja, jadi
   empat halaman platform lain tidak ikut berubah.
   ═══════════════════════════════════════════════════════════════════════ */

.cb {
    /* Permukaan */
    --ink:        #0b0b0d;
    --panel:      #131315;
    --card-a:     #17171a;
    --card-b:     #0e0e11;

    /* Teks */
    --paper:      #f2efea;
    --dim:        rgba(242, 239, 234, .62);
    --soft:       rgba(242, 239, 234, .58);
    --mute:       rgba(242, 239, 234, .54);
    --faint:      rgba(242, 239, 234, .44);
    --ghost:      rgba(242, 239, 234, .34);

    /* Garis */
    --line:       rgba(242, 239, 234, .13);
    --line-soft:  rgba(242, 239, 234, .09);
    --line-hair:  rgba(242, 239, 234, .07);

    /* Aksen */
    --amber:      #f5a01b;
    --amber-hi:   #ffb43c;
    --on-amber:   #141005;
    --amber-line: rgba(245, 160, 27, .26);
    --amber-lit:  rgba(245, 160, 27, .30);

    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --pad-x: clamp(20px, 4vw, 64px);
    --pad-y: clamp(54px, 6.8vw, 110px);
    --r:     20px;

    /* Lebar isi. Konsepnya menahan hampir seluruh section di 1180px, jadi
       nilainya ditulis sekali di sini. */
    --w:     1180px;

    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
}

/* ─── Melepas monospace global ─────────────────────────────────────────
   layouts/app.blade.php memaksa seluruh situs memakai JetBrains Mono lewat
   selektor ELEMEN ("h1..h6" dan "p, li, span, a:not(...), td, th, button").
   Aturan pada elemen mengalahkan nilai warisan, jadi menaruh --sans di .cb
   saja tidak cukup. Berkas ini dimuat SESUDAH blok <style> layout, jadi
   cukup MENYAMAI spesifisitasnya. Selektor tautannya bernilai (0,2,1)
   karena dua :not() ikut dihitung, sehingga tombol butuh "a.cb-btn". */
.cb p,
.cb li,
.cb h1, .cb h2, .cb h3, .cb h4,
.cb th, .cb td,
.cb button,
.cb blockquote,
.cb-node__t,
.cb-role__a,
.cb-role__b,
.cb-role__c,
.cb-mode__n,
.cb-mode__d,
.cb-comp__list span,
.cb-spec__v { font-family: var(--sans); }

.cb a.cb-btn { font-family: var(--sans); }

/* Kebalikannya: label monospace yang kebetulan ditulis sebagai <p> atau
   <li> harus merebut kembali fontnya dari aturan di atas. */
.cb p.cb-note,
.cb li.cb-note,
.cb p.cb-chip,
.cb li.cb-chip { font-family: var(--mono); }

.cb *,
.cb *::before,
.cb *::after { box-sizing: border-box; }

.cb img { display: block; max-width: 100%; }
.cb figure { margin: 0; }

/* ─── Kerangka section ─────────────────────────────────────────────────
   Padding sisi --pad-x sama dengan .sc-nav__bar di chrome-v2.css, jadi
   tepi section sejajar dengan logo dan menu di header. */
.cb-sec {
    position: relative;
    padding: var(--pad-y) var(--pad-x);
    overflow: hidden;
}
.cb-sec--panel {
    background: var(--panel);
    border-block: 1px solid var(--line);
}
.cb-wrap { position: relative; max-width: var(--w); margin-inline: auto; }

/* Bola cahaya amber di sudut section, dekoratif dan tidak menangkap
   pointer. Ditaruh di luar .cb-wrap supaya bisa melebar sampai tepi. */
.cb-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}
.cb-glow--tr {
    top: -140px; right: -160px; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(245, 160, 27, .10), transparent 66%);
}
.cb-glow--bl {
    bottom: -180px; left: -140px; width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(245, 160, 27, .09), transparent 66%);
}

/* ─── Lencana, judul, pengantar ────────────────────────────────────── */

.cb-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--amber-line);
    background: rgba(245, 160, 27, .08);
    font: 500 10px/1.4 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--amber);
}
.cb-h2 {
    margin: 18px 0 0;
    font-size: clamp(28px, 4.2vw, 54px);
    line-height: 1.04;
    letter-spacing: -.038em;
    font-weight: 500;
    color: var(--paper);
    max-width: 22ch;
}
.cb-lead {
    margin: 0;
    max-width: 38ch;
    font-size: 13.5px;
    line-height: 1.76;
    color: var(--mute);
}

/* Kepala rata tengah: dipakai enam dari sembilan section. */
.cb-head--mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: clamp(34px, 4.2vw, 60px);
}

/* ─── Tombol ───────────────────────────────────────────────────────── */

.cb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s, border-color .25s, transform .25s, color .25s;
}
.cb-btn svg { flex: none; }

.cb-btn--amber {
    background: var(--amber);
    color: var(--on-amber);
    box-shadow: 0 22px 44px -24px rgba(245, 160, 27, .95);
}
.cb-btn--amber:hover { background: var(--amber-hi); color: var(--on-amber); transform: translateY(-2px); }

.cb-btn--ghost {
    background: rgba(242, 239, 234, .04);
    color: var(--paper);
    border-color: rgba(242, 239, 234, .18);
}
.cb-btn--ghost:hover {
    background: rgba(242, 239, 234, .09);
    border-color: rgba(242, 239, 234, .32);
    color: var(--paper);
}

/* Dua tombol penutup, di atas alas amber. */
.cb-btn--ink { background: var(--on-amber); color: var(--amber); }
.cb-btn--ink:hover { background: #000; color: var(--amber); transform: translateY(-2px); }

.cb-btn--outline {
    background: transparent;
    color: var(--on-amber);
    border-color: rgba(20, 16, 5, .35);
}
.cb-btn--outline:hover { background: rgba(20, 16, 5, .1); color: var(--on-amber); }

/* ─── Kotak ikon ───────────────────────────────────────────────────── */

.cb-ico {
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(245, 160, 27, .24);
    background: linear-gradient(155deg, rgba(245, 160, 27, .16), rgba(245, 160, 27, .03));
    color: var(--amber);
}
.cb-ico--sm { width: 38px; height: 38px; border-radius: 12px; }
.cb-ico--rg { width: 40px; height: 40px; border-radius: 13px; }
.cb-ico--md { width: 44px; height: 44px; }
.cb-ico--xl { width: 70px; height: 70px; border-radius: 19px; }
.cb-ico svg { width: 19px; height: 19px; }
.cb-ico--sm svg { width: 17px; height: 17px; }
.cb-ico--rg svg { width: 18px; height: 18px; }
.cb-ico--xl svg { width: 31px; height: 31px; }

/* ─── Chip dan baris keterangan ────────────────────────────────────── */

.cb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.cb-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(242, 239, 234, .12);
    background: rgba(242, 239, 234, .03);
    font: 500 10px/1.4 var(--mono);
    letter-spacing: .1em;
    color: rgba(242, 239, 234, .64);
}

.cb-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cb-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
}
.cb-note svg { flex: none; width: 14px; height: 14px; }

/* ─── Panel tangkapan layar ────────────────────────────────────────── */

.cb-shot {
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .9);
}
.cb-shot__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(242, 239, 234, .03);
}
.cb-shot__dots { display: flex; gap: 6px; flex: none; }
.cb-shot__dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(242, 239, 234, .14);
}
.cb-shot__dots i:last-child { background: rgba(245, 160, 27, .5); }
.cb-shot__path {
    font: 500 9.5px/1.4 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cb-shot img { width: 100%; height: auto; }

/* ═══ 1. HERO ═══════════════════════════════════════════════════════ */

.cb-hero { position: relative; overflow: hidden; padding: 0; }
.cb-hero__aura {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(78% 62% at 50% -12%, rgba(245, 160, 27, .20), transparent 62%);
}
.cb-hero__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(242, 239, 234, .16) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(64% 58% at 50% 0%, #000, transparent 72%);
    mask-image: radial-gradient(64% 58% at 50% 0%, #000, transparent 72%);
}
.cb-hero__inner {
    position: relative;
    /* .sc-nav di chrome-v2.css position:fixed dan tembus pandang, jadi
       hero yang menyediakan ruang untuknya. Bilahnya setinggi 66px; angka
       terkecil di sini menyisakan jarak yang cukup di bawahnya. Konsep
       aslinya memakai header yang ikut mengalir sehingga butuh lebih
       sedikit. */
    padding-top: clamp(124px, 14vw, 200px);
    padding-inline: var(--pad-x);
    padding-bottom: clamp(30px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cb-hero__h1 {
    margin: clamp(20px, 2.6vw, 34px) 0 0;
    font-size: clamp(46px, 8vw, 124px);
    line-height: .92;
    letter-spacing: -.05em;
    font-weight: 500;
    color: var(--paper);
}
/* Wordmark produk di atas judul. Berkasnya hitam beralas tembus pandang
   sehingga tidak terbaca langsung di atas hero gelap; kepingnya putih,
   sama seperti hero Cytectra, Bitbait, dan Threvix. Tingginya yang
   dikunci, lebarnya ikut rasio berkas. */
.cb-hero__logo {
    box-sizing: content-box;
    display: block;
    height: clamp(34px, 3.6vw, 46px);
    width: auto;
    padding: clamp(12px, 1.3vw, 17px) clamp(16px, 1.8vw, 22px);
    border-radius: 14px;
    background: #fff;
}
.cb-hero__p {
    margin: clamp(18px, 2.2vw, 28px) 0 0;
    max-width: 74ch;
    font-size: clamp(14.5px, 1.45vw, 17px);
    line-height: 1.78;
    color: var(--dim);
}
.cb-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(26px, 3.2vw, 40px);
}
.cb-hero__notes {
    justify-content: center;
    margin-top: clamp(26px, 3vw, 40px);
}
/* Panel tangkapan layar menempel ke bilah angka di bawahnya: sudut bawah
   dan garis bawahnya dilepas supaya keduanya terbaca sebagai satu benda. */
.cb-hero__shot { position: relative; padding-inline: var(--pad-x); }
.cb-hero__shot .cb-shot {
    max-width: var(--w);
    margin-inline: auto;
    border-bottom: 0;
    border-radius: var(--r) var(--r) 0 0;
}

/* ═══ 2. BILAH ANGKA ════════════════════════════════════════════════ */

.cb-band {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: 0 var(--pad-x);
}
.cb-band__row { display: flex; flex-wrap: wrap; }
.cb-band__cell {
    flex: 1 1 230px;
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.7vw, 22px);
    padding: clamp(24px, 3vw, 40px) clamp(14px, 2vw, 28px) clamp(24px, 3vw, 40px) 0;
}
.cb-band__cell + .cb-band__cell {
    border-left: 1px solid var(--line);
    padding-left: clamp(16px, 2vw, 30px);
}
/* Saat keempatnya jatuh menjadi satu lajur, garis kiri tidak lagi
   memisahkan apa pun: yang dibutuhkan garis mendatar antar baris. */
@media (max-width: 599px) {
    .cb-band__cell + .cb-band__cell {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
    }
    .cb-band__cell { padding-block: clamp(20px, 5vw, 28px); }
}
.cb-band__txt { min-width: 0; }
.cb-band__n {
    font: 700 clamp(30px, 3.1vw, 40px)/1 var(--mono);
    letter-spacing: -.045em;
    color: var(--paper);
}
.cb-band__l {
    margin: 9px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(242, 239, 234, .52);
}

/* ═══ 3. HARI INI vs DENGAN CYBRION ═════════════════════════════════ */

.cb-comp {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1.2vw, 16px);
    align-items: stretch;
}
.cb-comp__card {
    flex: 1 1 340px;
    min-width: 280px;
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    padding: clamp(24px, 2.8vw, 36px);
}
/* Kartu kedua dibalik warnanya: alas amber, teks gelap. Perbandingannya
   terbaca dari jauh tanpa harus membaca label di atasnya. */
.cb-comp__card--on {
    background: linear-gradient(150deg, var(--amber-hi), var(--amber) 60%);
    border-color: rgba(245, 160, 27, .4);
    color: var(--on-amber);
}
.cb-comp__k {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(242, 239, 234, .14);
    font: 700 9.5px/1.4 var(--mono);
    letter-spacing: .16em;
    color: rgba(242, 239, 234, .48);
}
.cb-comp__card--on .cb-comp__k {
    border-color: rgba(20, 16, 5, .3);
    color: rgba(20, 16, 5, .8);
}
.cb-comp__h {
    margin: 18px 0 0;
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.2;
    letter-spacing: -.026em;
    font-weight: 500;
    color: var(--paper);
}
.cb-comp__card--on .cb-comp__h { color: var(--on-amber); font-weight: 600; }

.cb-comp__list { list-style: none; margin: 14px 0 0; padding: 0; }
.cb-comp__list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-hair);
    font-size: 13.5px;
    line-height: 1.66;
    color: var(--soft);
}
.cb-comp__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cb-comp__list svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--ghost); }
.cb-comp__card--on .cb-comp__list li {
    border-bottom-color: rgba(20, 16, 5, .14);
    color: rgba(20, 16, 5, .8);
}
.cb-comp__card--on .cb-comp__list svg { color: var(--on-amber); }

/* ═══ Kartu umum ════════════════════════════════════════════════════ */

.cb-grid {
    display: grid;
    gap: clamp(10px, 1.2vw, 14px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.cb-grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cb-grid--250 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

.cb-card {
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    padding: clamp(24px, 2.8vw, 34px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .3s, transform .3s;
}
.cb-card:hover { border-color: var(--amber-lit); transform: translateY(-4px); }
/* Kartu yang lebih rapat, dipakai grid tiga section terakhir. */
.cb-card--tight { padding: clamp(22px, 2.4vw, 30px); gap: 13px; }
.cb-card--flat { padding: clamp(20px, 2.2vw, 26px); gap: 12px; }
.cb-card--flat:hover { border-color: var(--line-soft); transform: none; }
/* Kartu penutup grid kendali: garis putus putus, tanpa angkat saat
   disentuh, karena isinya catatan bukan salah satu butir daftar. */
.cb-card--dash {
    background: rgba(245, 160, 27, .05);
    border: 1px dashed rgba(245, 160, 27, .35);
    justify-content: center;
}
.cb-card--dash:hover { border-color: rgba(245, 160, 27, .35); transform: none; }

.cb-card__k { display: flex; align-items: center; gap: 12px; }
.cb-card__h {
    margin: 0;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.2;
    letter-spacing: -.026em;
    font-weight: 500;
    color: var(--paper);
}
.cb-card__h--sm { font-size: 17px; letter-spacing: -.022em; }
.cb-card__h--xs { font-size: 16px; letter-spacing: -.02em; }
.cb-card__h--narrow { max-width: 20ch; }
.cb-card__p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.72;
    color: var(--soft);
}
.cb-card__p--lg { font-size: 13px; }

/* ═══ 4. PANEL SWARM ════════════════════════════════════════════════ */

.cb-swarm {
    max-width: 1080px;
    margin-inline: auto;
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    padding: clamp(22px, 3vw, 44px);
}
.cb-swarm__row { display: flex; flex-wrap: wrap; gap: 14px; }
.cb-swarm__row--subs { margin-top: 22px; }

.cb-node {
    flex: 1 1 220px;
    min-width: 190px;
    padding: clamp(16px, 1.8vw, 22px);
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(242, 239, 234, .03);
}
.cb-node--lead {
    border-color: rgba(245, 160, 27, .45);
    background: linear-gradient(150deg, rgba(245, 160, 27, .16), rgba(245, 160, 27, .03));
}
.cb-node--dash { border-style: dashed; }
.cb-node__k {
    display: block;
    font: 700 9px/1.4 var(--mono);
    letter-spacing: .2em;
    color: rgba(242, 239, 234, .40);
}
.cb-node--lead .cb-node__k { color: var(--amber); }
.cb-node__t {
    display: block;
    margin: 11px 0 0;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -.018em;
    color: var(--paper);
}
.cb-node__m {
    display: block;
    margin: 8px 0 0;
    font: 400 11px/1.6 var(--mono);
    color: rgba(242, 239, 234, .46);
}

/* Penghubung antar tingkat: satu garis tegak, lalu satu garis mendatar
   memudar sebelum baris sub-agent. */
.cb-link {
    display: block;
    width: 1px;
    height: 28px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(245, 160, 27, .55), rgba(245, 160, 27, .12));
}
.cb-rule {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 160, 27, .35), transparent);
}

.cb-ctx {
    margin-top: 26px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(245, 160, 27, .22);
    background: rgba(245, 160, 27, .06);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
}
.cb-ctx__k {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 9px/1.4 var(--mono);
    letter-spacing: .2em;
    color: var(--amber);
}
.cb-ctx__k svg { flex: none; width: 14px; height: 14px; }
.cb-ctx__v {
    font: 400 11.5px/1.6 var(--mono);
    color: var(--soft);
}
.cb-swarm__note {
    margin: 20px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(242, 239, 234, .46);
    text-align: center;
}

/* ─── Tabel peran ──────────────────────────────────────────────────── */

.cb-roles {
    margin-top: clamp(22px, 2.6vw, 36px);
    border-top: 1px solid var(--line);
}
.cb-role {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: clamp(16px, 1.8vw, 22px) 6px;
    border-bottom: 1px solid var(--line);
    transition: background .25s;
}
.cb-role:hover { background: rgba(242, 239, 234, .03); }
.cb-role--head { padding-block: 14px; }
.cb-role--head:hover { background: none; }
.cb-role__a { flex: 1 1 220px; min-width: 180px; }
/* Kepala tabel menang atas ketiga aturan lajur di bawahnya karena
   selektornya satu kelas plus satu elemen. */
.cb-role__b { flex: 2 1 300px; min-width: 240px; font-size: 13px; line-height: 1.72; color: var(--dim); }
.cb-role__c { flex: 1.4 1 240px; min-width: 200px; font-size: 13px; line-height: 1.72; color: rgba(242, 239, 234, .48); }
.cb-role--head span {
    font: 700 9px/1.4 var(--mono);
    letter-spacing: .2em;
    color: rgba(242, 239, 234, .40);
}
.cb-role__a {
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: -.02em;
    color: var(--amber);
}
/* Kepala tabel hanya berguna selama ketiga lajurnya masih sebaris. Begitu
   barisnya menumpuk, labelnya tidak lagi menerangkan apa pun. */
@media (max-width: 899px) {
    .cb-role--head { display: none; }
    .cb-roles { border-top: 0; }
}

/* ═══ 5. DELAPAN MODE ═══════════════════════════════════════════════ */

.cb-modes { border-top: 1px solid var(--line); }
.cb-mode {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 1.6vw, 24px);
    align-items: flex-start;
    padding: clamp(18px, 2vw, 26px) 6px;
    border-bottom: 1px solid var(--line);
    transition: background .25s, padding-left .25s;
}
.cb-mode:hover { background: rgba(242, 239, 234, .03); padding-left: 18px; }
.cb-mode__i {
    flex: none;
    width: 44px;
    font: 700 10.5px/1.6 var(--mono);
    color: rgba(242, 239, 234, .30);
}
.cb-mode__k {
    flex: 1 1 230px;
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.cb-mode__n {
    font-size: clamp(16px, 1.9vw, 20px);
    line-height: 1.2;
    letter-spacing: -.024em;
    color: var(--paper);
}
.cb-mode__d {
    flex: 1.3 1 250px;
    min-width: 210px;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(242, 239, 234, .60);
}
.cb-mode__m {
    flex: 1.6 1 280px;
    min-width: 230px;
    font: 400 11.5px/1.7 var(--mono);
    color: var(--faint);
}
/* Nomor urut ikut menumpuk di layar sempit; 44px di sana hanya menyisakan
   lajur kurus di sebelahnya. */
@media (max-width: 599px) {
    .cb-mode { gap: 10px; }
    .cb-mode__i { width: 100%; }
    .cb-mode:hover { padding-left: 10px; }
}

/* ═══ 6. AUDIT READY — teks dan tangkapan layar ═════════════════════ */

.cb-split {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(22px, 3vw, 56px);
    align-items: center;
}
.cb-split__txt { flex: 1 1 380px; min-width: 280px; }
.cb-split__txt .cb-h2 { max-width: 18ch; }
.cb-split__p {
    margin: 18px 0 0;
    max-width: 54ch;
    font-size: 14px;
    line-height: 1.78;
    color: var(--soft);
}
.cb-split__fig { flex: 1.15 1 420px; min-width: 290px; }
.cb-split + .cb-grid { margin-top: clamp(22px, 2.6vw, 38px); }

/* ═══ 7. BARIS SPESIFIKASI ENTERPRISE ═══════════════════════════════ */

.cb-specs {
    margin-top: clamp(24px, 3vw, 44px);
    border-top: 1px solid var(--line);
}
.cb-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    padding: clamp(16px, 1.8vw, 22px) 6px;
    border-bottom: 1px solid var(--line);
}
.cb-spec__l {
    flex: 0 1 220px;
    min-width: 170px;
    font: 500 10px/1.6 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
}
.cb-spec__v {
    flex: 2 1 380px;
    min-width: 250px;
    font-size: 13px;
    line-height: 1.74;
    color: rgba(242, 239, 234, .60);
}

/* ═══ 8. PENUTUP ════════════════════════════════════════════════════ */

.cb-close {
    position: relative;
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: var(--amber);
    color: var(--on-amber);
    padding: clamp(40px, 5.4vw, 92px) var(--pad-x);
}
.cb-close::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 80% at 50% 0%, rgba(255, 255, 255, .22), transparent 62%);
}
.cb-close__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cb-close__k {
    font: 700 10px/1.4 var(--mono);
    letter-spacing: .22em;
    color: var(--on-amber);
}
.cb-close__h {
    margin: clamp(18px, 2.4vw, 30px) 0 0;
    font-size: clamp(28px, 4.4vw, 58px);
    line-height: 1.02;
    letter-spacing: -.042em;
    font-weight: 600;
    color: var(--on-amber);
    max-width: 24ch;
}
.cb-close__p {
    margin: 20px 0 0;
    max-width: 62ch;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(20, 16, 5, .76);
}
.cb-close__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}
.cb-close__notes {
    justify-content: center;
    gap: 12px 26px;
    margin-top: 28px;
}
.cb-close .cb-note {
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(20, 16, 5, .62);
}

/* ─── Fokus keyboard ───────────────────────────────────────────────── */
.cb :focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}
.cb-close :focus-visible { outline-color: var(--on-amber); }