/* ═══════════════════════════════════════════════════════════════════════
   /platform/bitbait — mengikuti "NEW UI KONSEP/SkyCyber BitBait.html"
   ═══════════════════════════════════════════════════════════════════════
   CSS biasa, bukan Tailwind. Dipakai HANYA oleh platform/_bitbait.blade.php.

   Seperti threvix-v2.css, berkas ini BERDIRI SENDIRI dan tidak memuat
   home-v2.css. Konsep BitBait dan konsep Threvix lahir dari sistem visual
   yang sama ("Nocturne"): Inter untuk judul dan teks isi, JetBrains Mono
   hanya untuk label kecil dan angka, sudut membulat, kartu bergradien,
   dan kotak ikon amber. Sistem .sc2 milik beranda memakai sudut siku dan
   monospace di mana pun, jadi memuatnya di sini hanya menambah aturan yang
   tidak terpakai sekaligus berisiko bertabrakan.

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

   Nilai token dan ukurannya sengaja disamakan dengan threvix-v2.css. Yang
   membedakan kedua halaman adalah bentuk sectionnya, bukan bahasanya:
   Threvix beritme siklus dan tabel tata kelola, BitBait beritme umpan,
   panel tiruan (peramban, daftar honeytoken, kartu alert, jendela obrolan)
   dan kartu cakupan protokol.

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

.bb {
    /* Permukaan */
    --ink:        #0b0b0d;
    --panel:      #131315;
    --card-a:     #17171a;
    --card-b:     #0e0e11;
    --card-a-hi:  #1e1e23;
    --card-b-hi:  #131317;
    --mock-b:     #0c0c0f;

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

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

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

    --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(52px, 6.6vw, 104px);

    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 selalu mengalahkan nilai warisan, jadi menaruh --sans
   di .bb saja tidak cukup.

   Berkas ini dimuat SESUDAH blok <style> layout (@stack('head') berada di
   bawahnya), jadi cukup MENYAMAI spesifisitasnya, tidak perlu melampaui.
   Selektor tautannya bernilai (0,2,1) karena dua :not() ikut dihitung,
   sehingga tombol butuh "a.bb-btn". */
.bb p,
.bb li,
.bb h1, .bb h2, .bb h3, .bb h4,
.bb th, .bb td,
.bb button,
.bb blockquote,
.bb-h2 span,
.bb-split__h span,
.bb-frow__h,
.bb-cov__h { font-family: var(--sans); }

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

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

/* ─── Kerangka section ─────────────────────────────────────────────── */

/* overflow: hidden WAJIB — .bb-glow di dalamnya duduk di luar tepi section
   (right: -160px). Tanpa ini elemen itu melebarkan area gulir dokumen dan
   seluruh halaman tergeser ke kanan di lebar ponsel. */
.bb-sec { position: relative; overflow: hidden; padding: var(--pad-y) var(--pad-x); }
.bb-sec--panel { background: var(--panel); border-block: 1px solid var(--line); }
/* Selebar bilah header, untuk SEMUA section. .sc-nav__bar di chrome-v2.css
   tidak memakai batas lebar, hanya padding sisi clamp(20px, 4vw, 64px)
   yang sama dengan --pad-x milik .bb-sec, jadi tanpa max-width di sini
   tepi kiri kanan isi section sudah sejajar dengan logo dan menu di
   header. Hero dan penutup punya batasnya sendiri karena keduanya rata
   tengah, bukan rata tepi. */
.bb-wrap { position: relative; }

/* Pijar amber lembut di sudut section, murni hiasan. */
.bb-glow { position: absolute; pointer-events: none; width: 620px; height: 620px; border-radius: 50%; }
.bb-glow--tr { top: -140px; right: -160px; background: radial-gradient(circle, rgba(245, 160, 27, .07), transparent 64%); }
.bb-glow--bl { bottom: -180px; left: -140px; background: radial-gradient(circle, rgba(245, 160, 27, .06), transparent 64%); }

/* Kepala section: lencana bernomor, judul, kalimat pengantar di kanan. */
.bb-head {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 60px);
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: clamp(26px, 3.2vw, 44px);
}
.bb-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(245, 160, 27, .26);
    background: rgba(245, 160, 27, .08);
    font: 500 10px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--amber);
}
.bb-h2 {
    margin: 20px 0 0;
    font-size: clamp(28px, 4.2vw, 54px);
    line-height: 1.04;
    letter-spacing: -.035em;
    font-weight: 500;
    color: var(--paper);
    max-width: 17ch;
}
.bb-h2 span { color: var(--amber); }
.bb-lead {
    margin: 0;
    max-width: 36ch;
    font-size: 13.5px;
    line-height: 1.76;
    color: var(--mute);
}

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

.bb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}
.bb-btn svg { flex: none; width: 16px; height: 16px; }
.bb-btn--amber {
    background: var(--amber);
    color: var(--on-amber);
    font-weight: 600;
    box-shadow: 0 22px 44px -24px rgba(245, 160, 27, .95);
}
.bb-btn--amber:hover { background: var(--amber-hi); color: var(--on-amber); transform: translateY(-2px); }
.bb-btn--ghost {
    background: rgba(242, 239, 234, .04);
    color: var(--paper);
    border-color: rgba(242, 239, 234, .18);
}
.bb-btn--ghost:hover { background: rgba(242, 239, 234, .09); border-color: rgba(242, 239, 234, .42); color: var(--paper); }
/* Varian di atas ground amber (section penutup). */
.bb-btn--ink { background: #141005; color: #ffd489; font-weight: 600; }
.bb-btn--ink:hover { background: #241a09; color: #ffd489; transform: translateY(-2px); }
.bb-btn--outline { background: transparent; color: var(--on-amber); border-color: rgba(20, 16, 5, .38); }
.bb-btn--outline:hover { background: rgba(20, 16, 5, .08); border-color: rgba(20, 16, 5, .6); color: var(--on-amber); }

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

.bb-tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    border: 1px solid var(--amber-line);
    background: linear-gradient(150deg, rgba(245, 160, 27, .18), rgba(245, 160, 27, .02));
    color: var(--amber);
}
.bb-tile svg { width: 18px; height: 18px; }
.bb-tile--lg { width: clamp(56px, 5.8vw, 70px); height: clamp(56px, 5.8vw, 70px); border-radius: 19px; }
.bb-tile--lg svg { width: clamp(26px, 2.8vw, 32px); height: clamp(26px, 2.8vw, 32px); }
.bb-tile--sm { width: 26px; height: 26px; border-radius: 8px; }
.bb-tile--sm svg { width: 13px; height: 13px; }

/* ─── Baris keterangan monospace ───────────────────────────────────── */

.bb-notes { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; padding: 0; }
.bb-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);
}
.bb-note svg { flex: none; width: 14px; height: 14px; color: var(--amber); }

/* ─── Kartu umum ───────────────────────────────────────────────────── */

.bb-card {
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    padding: clamp(22px, 2.4vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.bb-card:hover {
    background: linear-gradient(168deg, var(--card-a-hi), var(--card-b-hi));
    border-color: var(--amber-lit);
    transform: translateY(-3px);
    box-shadow: 0 26px 50px -34px rgba(0, 0, 0, .95);
}

/* ─── Panel tiruan (peramban, honeytoken, alert, obrolan) ──────────────
   Empat panel di halaman ini memakai kerangka yang sama: bilah kepala
   monospace, isi, lalu kaki. Isinya sepenuhnya HTML dan CSS, tidak ada
   tangkapan layar. Semuanya hiasan, karena itu aria-hidden di Blade. */

.bb-mock {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(242, 239, 234, .08);
    background: linear-gradient(168deg, var(--card-a), var(--mock-b));
    display: flex;
    flex-direction: column;
}
.bb-mock__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft);
    font: 700 8.5px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
}
.bb-mock__body { flex: 1; padding: 14px; display: flex; flex-direction: column; }
.bb-mock__foot {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-top: 1px solid var(--line-soft);
    font: 500 7.5px/1.4 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
}
.bb-mock__tail { margin-left: auto; font: 500 8px/1 var(--mono); letter-spacing: .12em; color: var(--amber); }

/* Titik amber berkedip — dipakai di kaki peramban dan lencana alert. */
.bb-blip {
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--amber);
    animation: bb-blip 1.6s ease-in-out infinite;
}
@keyframes bb-blip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ─── 1. HERO ──────────────────────────────────────────────────────── */

.bb-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }

/* Lima lapis latar, semuanya dekoratif dan tidak menangkap pointer:
   pijar amber di puncak, titik titik, kisi besar, dua cincin, lalu
   gradasi penutup di kaki agar menyatu dengan bilah angka. */
.bb-hero__pool,
.bb-hero__dots,
.bb-hero__grid,
.bb-hero__ring,
.bb-hero__fade { position: absolute; pointer-events: none; }

.bb-hero__pool { inset: 0; background: radial-gradient(78% 62% at 50% -12%, rgba(245, 160, 27, .20), transparent 62%); }
.bb-hero__dots {
    inset: 0;
    background-image: radial-gradient(rgba(242, 239, 234, .16) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .5;
    -webkit-mask-image: radial-gradient(64% 58% at 50% 22%, #000, transparent 76%);
            mask-image: radial-gradient(64% 58% at 50% 22%, #000, transparent 76%);
}
.bb-hero__grid {
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(242, 239, 234, .05) 1px, transparent 1px),
        linear-gradient(rgba(242, 239, 234, .05) 1px, transparent 1px);
    background-size: clamp(90px, 10vw, 170px) clamp(90px, 10vw, 170px);
    -webkit-mask-image: radial-gradient(86% 78% at 50% 40%, #000 20%, transparent 78%);
            mask-image: radial-gradient(86% 78% at 50% 40%, #000 20%, transparent 78%);
}
.bb-hero__ring {
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    -webkit-mask-image: linear-gradient(#000, transparent 62%);
            mask-image: linear-gradient(#000, transparent 62%);
}
.bb-hero__ring--1 { top: clamp(150px, 22vw, 280px); width: min(94vw, 1080px); border: 1px solid rgba(245, 160, 27, .14); }
.bb-hero__ring--2 { top: clamp(220px, 30vw, 370px); width: min(72vw, 820px);  border: 1px solid rgba(245, 160, 27, .10); }
.bb-hero__fade { inset: auto 0 0 0; height: 180px; background: linear-gradient(#0b0b0d00, #0b0b0d); }

.bb-hero__inner {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    padding: clamp(130px, 16vw, 260px) var(--pad-x) clamp(70px, 8vw, 130px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.bb-hero__h1 {
    margin: 0;
    font-size: clamp(58px, 11vw, 158px);
    line-height: .86;
    letter-spacing: -.055em;
    font-weight: 500;
    color: var(--paper);
}
.bb-hero__lead {
    /* Lebih longgar dari nilai konsep: di sana paragraf ini menyusul
       subheadline, di sini ia langsung menempel di bawah judul. */
    margin: clamp(24px, 2.8vw, 38px) 0 0;
    max-width: 74ch;
    font-size: clamp(14.5px, 1.45vw, 17px);
    line-height: 1.78;
    color: var(--dim);
}
/* Wordmark produk di atas judul. Berkas logonya lockup bertumpuk (700x748)
   dengan teks bertinta gelap, jadi di atas ground #0b0b0d ia butuh keping
   putih supaya terbaca, sama seperti perlakuan menu tab di beranda.
   box-sizing: content-box wajib ditulis: reset global memakai border-box,
   tanpa ini padding akan memakan tinggi gambarnya. */
.bb-hero__logo {
    box-sizing: content-box;
    display: block;
    height: clamp(58px, 6vw, 76px);
    width: auto;
    padding: clamp(11px, 1.2vw, 15px);
    border-radius: 16px;
    background: #fff;
    margin-bottom: clamp(22px, 2.6vw, 32px);
}

.bb-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(26px, 3.2vw, 40px); }
.bb-hero__notes { justify-content: center; margin: clamp(26px, 3vw, 40px) 0 0; }

/* ─── Tangkapan layar penutup hero ─────────────────────────────────────
   Bingkai bergaya jendela aplikasi, pola yang sama dengan hero Cytectra
   dan Cybrion, tapi sudutnya membulat mengikuti gaya halaman ini. Tepi
   bawahnya dilepas dan sudut bawahnya dibiarkan siku, jadi gambarnya
   menyatu langsung ke bilah di bawahnya tanpa garis ganda.

   Di DOM letaknya sesudah .bb-hero__fade, dan position relative membuat
   bingkainya menimpa gradasi penutup itu, bukan tertutup olehnya. */
.bb-hero__shot { position: relative; padding-inline: var(--pad-x); }
.bb-shot {
    max-width: 1180px;
    margin-inline: auto;
    overflow: hidden;
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .9);
}
.bb-shot__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-hair);
    background: rgba(242, 239, 234, .03);
}
.bb-shot__dots { display: flex; gap: 6px; flex: none; }
.bb-shot__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(242, 239, 234, .14); }
.bb-shot__dots i:last-child { background: rgba(245, 160, 27, .5); }
.bb-shot__path {
    font: 500 9.5px/1.4 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bb-shot img { display: block; width: 100%; height: auto; }

/* Ruang bawah teks hero dipangkas begitu ada tangkapan layar, supaya
   gambarnya tidak terdorong jauh ke bawah lipatan layar. */
.bb-hero--shot .bb-hero__inner { padding-bottom: clamp(38px, 4.4vw, 64px); }

/* ─── 2. BILAH ANGKA ───────────────────────────────────────────────── */

.bb-band { border-bottom: 1px solid var(--line); background: var(--panel); }
.bb-band__wrap { display: flex; flex-wrap: wrap; padding-inline: var(--pad-x); }
.bb-band__i {
    flex: 1 1 210px;
    min-width: 170px;
    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;
}
.bb-band__i + .bb-band__i { border-left: 1px solid var(--line); padding-left: clamp(16px, 2vw, 30px); }
.bb-band__txt { min-width: 0; }
.bb-band__n { display: block; font: 700 clamp(30px, 3.1vw, 40px)/1 var(--mono); letter-spacing: -.045em; color: var(--paper); }
.bb-band__l {
    display: block;
    margin-top: 12px;
    font: 500 10px/1.4 var(--mono);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ─── 3. CARA KERJA: tiga kartu bernomor ───────────────────────────── */

/* Ditulis sebagai <ol> karena tiga tahapnya berurutan. Penomoran bawaan
   daftar dilepas: nomornya sudah tampil sebagai "01".."03" di kartu. */
.bb-flow { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.2vw, 14px); margin: 0; padding: 0; list-style: none; }
.bb-flow__card { flex: 1 1 280px; min-width: 250px; border-radius: 20px; padding: clamp(24px, 2.8vw, 34px); }
.bb-flow__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bb-flow__n { font: 700 10px/1 var(--mono); letter-spacing: .14em; color: rgba(242, 239, 234, .26); }
.bb-flow__h { margin: 0; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.2; letter-spacing: -.026em; font-weight: 500; color: var(--paper); }
.bb-flow__p { margin: 0; font-size: 13px; line-height: 1.72; color: var(--soft); }

/* ─── 4. CAKUPAN EMULASI: kartu kelompok protokol ──────────────────── */

/* Kisi 12 kolom, bukan flex-wrap. Lebar tiap kartu datang dari --span di
   Blade dan mengikuti banyaknya protokol di dalamnya, jadi tiap baris pas
   12 kolom (5+4+3 lalu 6+3+3). Dengan flex-wrap, di layar lebar lima kartu
   berdesak di baris pertama dan satu kartu tertinggal sendirian. */
.bb-cov {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 14px);
}
.bb-cov__card {
    grid-column: span var(--span, 4);
    position: relative;
    overflow: hidden;
    gap: 14px;
}
/* Garis amber menyapu tepi atas kartu saat disentuh kursor. overflow di
   atas yang membuatnya ikut membulat di kedua sudut. */
.bb-cov__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--amber);
    transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.bb-cov__card:hover::before { width: 100%; }

.bb-cov__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bb-cov__n {
    flex: none;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font: 700 9px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ghost);
    white-space: nowrap;
    transition: border-color .3s ease, color .3s ease;
}
.bb-cov__card:hover .bb-cov__n { border-color: rgba(245, 160, 27, .45); color: var(--amber); }

.bb-cov__h {
    margin: 0;
    padding-bottom: clamp(14px, 1.4vw, 18px);
    border-bottom: 1px solid var(--line-hair);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.3;
    letter-spacing: -.02em;
    font-weight: 500;
    color: var(--paper);
    /* Judul terpanjang ("Direktori, pesan, dan sinkronisasi") membungkus
       jadi dua baris di sebagian lebar. Tinggi minimum dua baris menjaga
       garis rambut di bawahnya tetap sejajar di seluruh kartu sebaris. */
    min-height: 2.6em;
}
/* margin-top: auto menempelkan blok chip ke dasar kartu. Kartu sebaris
   tingginya sudah disamakan kisi, jadi jumlah baris chip boleh berbeda
   tanpa menyisakan rongga yang terlihat: garis rambut tetap sejajar di
   atas, baris chip terakhir tetap sejajar di bawah, dan selisihnya jatuh
   pada ruang kosong di tengah yang tidak kelihatan. */
.bb-cov__chips {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    gap: 8px;
}
/* margin-top: auto hanya untuk kartu cakupan. Di kartu integrasi dan di
   blok jenis honeytoken, chip mengikuti alur biasa. */
.bb-cov__card .bb-cov__chips { margin-top: auto; }
/* Chip ikut membesar sedikit di layar lebar. Section ini kini selebar
   bilah header, dan pada 1900px chip 10px membuat kartunya terasa kosong
   di sisi kanan. */
.bb-chip {
    padding: clamp(6px, .45vw, 8px) clamp(12px, .82vw, 16px);
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(242, 239, 234, .03);
    font: 500 clamp(10px, .58vw, 11.5px)/1.4 var(--mono);
    letter-spacing: .08em;
    color: rgba(242, 239, 234, .64);
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.bb-cov__card:hover .bb-chip {
    border-color: rgba(245, 160, 27, .28);
    background: rgba(245, 160, 27, .05);
    color: rgba(242, 239, 234, .78);
}

/* ─── Kepala sub-kelompok di dalam satu section ─────────────────────
   Section cakupan memuat tiga kelompok (IT, kesehatan, OT) dan section
   integrasi memuat dua. Bilah tipis ini memisahkannya tanpa perlu
   menaikkan tiap kelompok jadi section sendiri. */
.bb-sub {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: clamp(28px, 3.4vw, 46px) 0 clamp(16px, 1.8vw, 22px);
}
.bb-sub:first-of-type { margin-top: 0; }
.bb-sub__k {
    font: 500 10px/1.4 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
}
/* Garis pengisi antara label dan angka. flex: 1 pada pseudo-element
   membuatnya memakan sisa lebar berapa pun. */
.bb-sub::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}
.bb-sub__n {
    order: 3;
    font: 700 10px/1.4 var(--mono);
    letter-spacing: .12em;
    color: var(--amber);
}

/* ─── Kartu interoperabilitas kesehatan ────────────────────────────── */

.bb-med { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.2vw, 14px); }
.bb-med__card { flex: 1 1 300px; min-width: 260px; }
.bb-med__top { display: flex; align-items: center; gap: 14px; }
.bb-med__code {
    font: 700 clamp(15px, 1.5vw, 18px)/1 var(--mono);
    letter-spacing: .04em;
    color: var(--amber);
}
.bb-med__h {
    margin: 0;
    padding-bottom: clamp(12px, 1.2vw, 16px);
    border-bottom: 1px solid var(--line-hair);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.3;
    letter-spacing: -.02em;
    font-weight: 500;
    color: var(--paper);
}
.bb-med__p { margin: 0; font-size: 12.5px; line-height: 1.72; color: var(--soft); }

/* ─── Dinding wordmark ─────────────────────────────────────────────────
   Dipakai tiga kali: protokol OT, aplikasi web tiruan, dan sistem CTI.
   Deck produk memakai logo asli tiap vendor; di sini logonya TIDAK
   disalin, hanya namanya yang ditulis dengan tipografi halaman ini.

   flex, bukan grid: dengan flex-grow, ubin di baris terakhir memuai
   mengisi sisa lebar sehingga tidak pernah ada rongga menggantung.
   Garis pemisahnya berupa gap 1px di atas latar --line, jadi tidak ada
   border ganda antar ubin. */
.bb-wall {
    --cols: 5;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--card-b);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
}
/* Jumlah kolom dipilih agar habis dibagi jumlah ubinnya: 8 aplikasi web
   jadi 4+4, 10 sistem CTI jadi 5+5, 7 penyedia model jadi satu baris.
   Kalau dibiarkan membungkus sendiri, ubin terakhir bisa berdiri sendirian
   selebar satu baris penuh. */
.bb-wall--4 { --cols: 4; }
.bb-wall--7 { --cols: 7; }

.bb-wall__i {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: clamp(88px, 8vw, 112px);
    padding: 16px 14px;
    text-align: center;
    /* Garis pemisah lewat box-shadow, bukan gap berlatar --line: sel yang
       kosong di baris terakhir jadi ikut berwarna latar ubin, tidak
       meninggalkan blok garis menggantung. overflow di .bb-wall yang
       memotong bayangan di tepi luar. */
    box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
    transition: background .3s ease;
}
.bb-wall__i:hover { background: var(--card-a); }
.bb-wall__n {
    font-family: var(--sans);
    font-size: clamp(13.5px, 1.1vw, 16px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: rgba(242, 239, 234, .84);
    transition: color .3s ease;
}
.bb-wall__i:hover .bb-wall__n { color: var(--amber); }
.bb-wall__k {
    font: 500 8.5px/1.3 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ghost);
}
/* Ubin satu baris untuk daftar tanpa keterangan (penyedia model). */
.bb-wall--slim .bb-wall__i { min-height: clamp(64px, 5.6vw, 78px); }
/* Dipakai di bawah panel peramban, jadi diberi jarak dari baris di atasnya. */
.bb-wall--tight { margin-top: clamp(18px, 2vw, 26px); }

/* ─── Penyedia model di section asisten AI ─────────────────────────── */

.bb-llm { margin-top: clamp(34px, 4vw, 56px); }
.bb-llm__note { justify-content: center; margin: clamp(16px, 1.8vw, 22px) 0 0; }

/* ─── Kartu integrasi ──────────────────────────────────────────────── */

.bb-int { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.2vw, 14px); }
.bb-int__card { flex: 1 1 380px; min-width: 300px; }
.bb-int__p { margin: 0; font-size: 12.5px; line-height: 1.72; color: var(--soft); }

/* Chip jenis honeytoken duduk di bawah daftar centang, jadi butuh garis
   dan jarak sendiri; blok chip di kartu cakupan tidak punya keduanya. */
.bb-tt { margin-top: clamp(18px, 2vw, 24px); padding-top: clamp(16px, 1.8vw, 20px); border-top: 1px solid var(--line-hair); }

/* Bilah penutup kisi: jumlah total di kiri, satu catatan di kanan. */
.bb-cov__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 24px;
    margin-top: clamp(18px, 2vw, 26px);
    padding-top: clamp(16px, 1.8vw, 22px);
    border-top: 1px solid var(--line);
}
.bb-cov__tot {
    font: 500 10px/1.4 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
}
.bb-cov__tot b { font-weight: 700; color: var(--amber); }
.bb-cov__note { margin: 0; }

/* ─── 5. UMPAN KHUSUS: dua baris berselang-seling ──────────────────── */

.bb-split {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 2.6vw, 44px);
    align-items: center;
    padding: clamp(24px, 3vw, 44px) 0;
    border-top: 1px solid var(--line);
}
.bb-split__media { flex: 1 1 340px; min-width: 280px; min-height: clamp(250px, 25vw, 320px); }
.bb-split__body { flex: 1 1 340px; min-width: 280px; }
/* Baris kedua menukar urutan di layar lebar: panel pindah ke kanan.
   flex-wrap: wrap-reverse dipakai agar saat membungkus di layar sempit,
   teks tetap jatuh di atas panelnya, sama seperti baris pertama. */
.bb-split--flip { flex-wrap: wrap-reverse; }
.bb-split--flip .bb-split__media { order: 2; }
.bb-split--flip .bb-split__body { order: 1; }

.bb-split__k { display: block; font: 700 9.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.bb-split__h {
    margin: 16px 0 0;
    font-size: clamp(21px, 2.6vw, 30px);
    line-height: 1.1;
    letter-spacing: -.03em;
    font-weight: 500;
    color: var(--paper);
    max-width: 20ch;
}
.bb-split__p { margin: 14px 0 0; max-width: 50ch; font-size: 13.5px; line-height: 1.76; color: var(--soft); }

.bb-ticks { display: grid; gap: 11px; margin: 20px 0 0; padding: 0; list-style: none; }
.bb-tick {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 12.5px;
    line-height: 1.66;
    color: rgba(242, 239, 234, .64);
}
.bb-tick svg { flex: none; width: 13px; height: 13px; margin-top: 4px; color: var(--amber); }

/* Panel peramban: bilah alamat, formulir masuk palsu, kaki penghitung. */
.bb-mock--browser .bb-mock__body { justify-content: center; gap: 11px; padding: clamp(18px, 2.4vw, 26px); }
.bb-dots { display: flex; gap: 5px; flex: none; }
.bb-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(242, 239, 234, .16); }
.bb-dots i:first-child { background: var(--amber); }
.bb-url {
    flex: 1;
    min-width: 0;
    padding: 5px 10px;
    border-radius: 7px;
    background: rgba(242, 239, 234, .06);
    border: 1px solid var(--line-soft);
    font: 400 9px/1.4 var(--mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bb-login__k { font: 700 9px/1 var(--mono); letter-spacing: .18em; color: var(--amber); }
.bb-field {
    height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(242, 239, 234, .11);
    background: rgba(242, 239, 234, .04);
    display: flex;
    align-items: center;
    padding: 0 12px;
    font: 400 10px/1 var(--mono);
    color: rgba(242, 239, 234, .34);
}
.bb-submit {
    height: 34px;
    border-radius: 9px;
    background: var(--amber);
    display: grid;
    place-items: center;
    font: 600 10.5px/1 var(--mono);
    letter-spacing: .1em;
    color: var(--on-amber);
}

/* Panel honeytoken: empat baris umpan dengan status tersentuh atau tenang. */
.bb-mock--token .bb-mock__body { gap: 10px; justify-content: center; }
.bb-tok { display: flex; align-items: center; gap: 11px; }
.bb-tok__flag { flex: none; width: 3px; height: 24px; border-radius: 2px; background: rgba(242, 239, 234, .14); }
.bb-tok--hit .bb-tok__flag { background: var(--amber); }
.bb-tok__txt { flex: 1; min-width: 0; }
.bb-tok__n { display: block; font: 400 10.5px/1.3 var(--mono); color: rgba(242, 239, 234, .70); }
.bb-tok__p {
    display: block;
    margin-top: 4px;
    font: 400 8.5px/1.3 var(--mono);
    color: var(--ghost);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bb-tok__s {
    flex: none;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(242, 239, 234, .12);
    font: 700 7.5px/1.3 var(--mono);
    letter-spacing: .08em;
    color: rgba(242, 239, 234, .34);
    white-space: nowrap;
}
.bb-tok--hit .bb-tok__s { border-color: rgba(245, 160, 27, .4); background: rgba(245, 160, 27, .10); color: var(--amber); }

/* ─── 6. PERINGATAN: kartu alert + empat baris kemampuan ───────────── */

.bb-alert { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 28px); align-items: stretch; }
.bb-alert__media { flex: 1 1 330px; min-width: 280px; min-height: clamp(280px, 28vw, 340px); }
.bb-alert__rows { flex: 1.2 1 380px; min-width: 290px; display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 14px); }

.bb-mock--alert .bb-mock__body { gap: 13px; }
.bb-alrt__new { margin-left: auto; display: flex; align-items: center; gap: 6px; font: 500 8px/1 var(--mono); letter-spacing: .12em; color: var(--amber); }
.bb-alrt__t { font: 500 14px/1.3 var(--mono); letter-spacing: -.01em; color: var(--paper); }
.bb-alrt__meta { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.bb-alrt__meta li { font: 400 9.5px/1.5 var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.bb-alrt__tags { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
/* Linimasa singkat di dalam kartu alert. Kolom kanannya berisi empat
   baris kemampuan, jadi kartu ini ikut meregang; tanpa linimasa itu ada
   rongga kosong besar di antara tag MITRE dan bilah kanal. */
.bb-alrt__tl { display: grid; gap: 9px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); list-style: none; }
.bb-alrt__tl li { display: flex; gap: 12px; font: 400 9.5px/1.5 var(--mono); color: var(--soft); }
.bb-alrt__tl b { flex: none; font-weight: 700; color: var(--amber); }

.bb-ttag {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--amber-lit);
    background: rgba(245, 160, 27, .09);
    font: 700 7.5px/1.3 var(--mono);
    letter-spacing: .08em;
    color: var(--amber);
}
/* Kaki kanal: empat sel dipisah garis rambut, bukan border per sel. */
.bb-chans { display: flex; gap: 1px; background: var(--line-soft); border-top: 1px solid var(--line-soft); }
.bb-chans span {
    flex: 1;
    padding: 10px 6px;
    background: var(--card-b);
    text-align: center;
    font: 700 7px/1.3 var(--mono);
    letter-spacing: .1em;
    color: var(--faint);
}

.bb-frow {
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: clamp(18px, 2vw, 24px);
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.bb-frow:hover {
    background: linear-gradient(168deg, var(--card-a-hi), var(--card-b-hi));
    border-color: var(--amber-lit);
    transform: translateY(-3px);
    box-shadow: 0 26px 50px -34px rgba(0, 0, 0, .95);
}
.bb-frow .bb-tile { width: 40px; height: 40px; border-radius: 12px; }
.bb-frow__txt { flex: 1; min-width: 0; }
.bb-frow__h { margin: 0; font-size: 15px; line-height: 1.3; letter-spacing: -.016em; font-weight: 500; color: var(--paper); }
.bb-frow__p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.68; color: var(--mute); }

/* Dua kartu deteksi dini, sebaris di atas kartu alert. */
.bb-early { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 14px); }

/* ─── 7. ASISTEN AI: teks di kiri, jendela obrolan di kanan ────────── */

.bb-ai { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 64px); align-items: center; }
.bb-ai__aside { flex: 1.2 1 400px; min-width: 290px; }
.bb-ai__h2 { max-width: 16ch; }
.bb-ai__p { margin: 20px 0 0; max-width: 54ch; font-size: 14.5px; line-height: 1.78; color: var(--dim); }
.bb-ai__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.bb-ai__chips .bb-chip { padding: 8px 14px; }
.bb-ai__media { flex: 1 1 320px; min-width: 280px; min-height: clamp(260px, 26vw, 330px); }

.bb-mock--chat .bb-mock__body { gap: 12px; }
.bb-msg { padding: 10px 13px; font: 400 10.5px/1.6 var(--mono); }
.bb-msg--q {
    align-self: flex-end;
    max-width: 80%;
    border-radius: 14px 14px 4px 14px;
    background: rgba(245, 160, 27, .12);
    border: 1px solid var(--amber-line);
    color: rgba(242, 239, 234, .78);
}
.bb-msg--a {
    align-self: flex-start;
    max-width: 88%;
    border-radius: 14px 14px 14px 4px;
    background: rgba(242, 239, 234, .05);
    border: 1px solid rgba(242, 239, 234, .10);
    color: rgba(242, 239, 234, .66);
}
.bb-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 0; list-style: none; }
.bb-acts li {
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(242, 239, 234, .12);
    font: 700 7.5px/1.3 var(--mono);
    letter-spacing: .08em;
    color: rgba(242, 239, 234, .46);
}

/* ─── 8. PENUTUP AMBER ─────────────────────────────────────────────── */

.bb-close {
    position: relative;
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: radial-gradient(130% 160% at 50% -34%, #ffc660, #f5a01b 56%);
    color: var(--on-amber);
    padding: clamp(40px, 5.4vw, 96px) var(--pad-x);
    text-align: center;
}
.bb-close__inner { max-width: 900px; margin: 0 auto; position: relative; }
.bb-close__k { font: 500 10px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: rgba(20, 16, 5, .62); }
.bb-close__h {
    margin: clamp(18px, 2.4vw, 32px) 0 0;
    font-size: clamp(30px, 4.8vw, 62px);
    line-height: .98;
    letter-spacing: -.04em;
    font-weight: 600;
    color: var(--on-amber);
    max-width: 22ch;
    margin-inline: auto;
}
.bb-close__p { margin: 20px auto 0; max-width: 58ch; font-size: clamp(14px, 1.4vw, 15px); line-height: 1.68; color: rgba(20, 16, 5, .76); }
.bb-close__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.bb-close__notes { justify-content: center; margin: 28px 0 0; gap: 12px 26px; }
.bb-close__notes .bb-note { font-weight: 700; color: rgba(20, 16, 5, .66); }
.bb-close__notes .bb-note svg { color: var(--on-amber); }

/* ═══ RESPONSIF ═══════════════════════════════════════════════════════ */

/* Sebagian label bilah angka membungkus jadi dua baris. Selama item item
   itu masih duduk sebaris, blok teks yang lebih pendek ikut naik dan
   angkanya berhenti sejajar; tinggi minimum dua baris menahannya. */
@media (min-width: 721px) {
    .bb-band__l { min-height: 2.8em; }
}

/* Di lebar menengah empat item tidak muat sebaris. Dibiarkan membungkus
   sendiri, item keempat turun sambil membawa garis kirinya dan menggantung
   tanpa tetangga. Dua kolom rapi membuat garisnya kembali masuk akal. */
@media (min-width: 721px) and (max-width: 1080px) {
    .bb-band__i { flex: 1 1 50%; min-width: 0; }
    .bb-band__i + .bb-band__i { border-left: 0; padding-left: 0; }
    .bb-band__i:nth-child(2n) { border-left: 1px solid var(--line); padding-left: clamp(16px, 2vw, 30px); }
    .bb-band__i:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* Kisi 12 kolom hanya masuk akal selama tiga kartu muat sebaris. Di bawah
   ini semuanya turun ke dua kolom sama lebar dan --span diabaikan. */
@media (max-width: 1180px) {
    .bb-cov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bb-cov__card { grid-column: auto; }
    /* Kartunya lima, jadi di dua kolom yang terakhir selalu tersisa
       sendirian. Dibiarkan melebar dua kolom, bukan menggantung di kiri. */
    .bb-cov__card:last-child { grid-column: 1 / -1; }
}

/* Dinding wordmark: jumlah kolom turun bertahap. Aturan ini sengaja
   memakai selektor .bb-wall polos supaya menang atas .bb-wall--4 dan
   .bb-wall--7 yang spesifisitasnya sama tapi ditulis lebih dulu. */
@media (max-width: 1180px) { .bb-wall { --cols: 4; } }
@media (max-width: 860px)  { .bb-wall { --cols: 3; } }
@media (max-width: 560px)  {
    .bb-wall { --cols: 2; }
    .bb-wall__i { min-height: 84px; padding: 14px 10px; }
    .bb-wall__k { letter-spacing: .12em; }
}

@media (max-width: 900px) {
    .bb-early { grid-template-columns: minmax(0, 1fr); }
    /* Panel tiruan berhenti berbagi baris dengan teksnya: di bawah lebar
       ini ia sudah lebih sempit daripada isi yang harus dimuatnya. */
    .bb-split__media,
    .bb-alert__media,
    .bb-ai__media { min-height: 0; }
}

@media (max-width: 720px) {
    .bb-cov { grid-template-columns: minmax(0, 1fr); }
    /* Satu kolom: tidak ada tetangga yang perlu disejajarkan lagi. */
    .bb-cov__h { min-height: 0; }
    .bb-band__i { flex: 1 1 100%; }
    .bb-band__i + .bb-band__i { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
    .bb-chans { flex-wrap: wrap; }
    .bb-chans span { flex: 1 1 50%; }
}

@media (max-width: 520px) {
    .bb-head { align-items: flex-start; }
    .bb-h2,
    .bb-ai__h2 { max-width: none; }
    .bb-hero__ctas .bb-btn,
    .bb-close__ctas .bb-btn { flex: 1 1 100%; }
    .bb-frow { flex-direction: column; gap: 12px; }
    /* Label kanal terlalu panjang untuk dua kolom di lebar ponsel. */
    .bb-chans span { flex: 1 1 100%; }
}

/* Hormati setelan sistem. */
@media (prefers-reduced-motion: reduce) {
    .bb-blip { animation: none; }
    .bb-card,
    .bb-frow,
    .bb-btn,
    .bb-chip,
    .bb-wall__i,
    .bb-wall__n,
    .bb-cov__card::before { transition: none; }
    .bb-card:hover,
    .bb-frow:hover,
    .bb-btn:hover { transform: none; }
}