/* ═══════════════════════════════════════════════════════════════════════
   /platform/phishcraft — mengikuti "Assets/SkyCyber PhishCraft.html"
   ═══════════════════════════════════════════════════════════════════════
   CSS biasa, bukan Tailwind. Dipakai HANYA oleh platform/_phishcraft.blade.php.

   Seperti tiga halaman platform lain yang sudah diredesign, berkas ini
   BERDIRI SENDIRI dan sengaja TIDAK memuat home-v2.css. Konsep PhishCraft
   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, kelas .reveal milik layouts/app, serta
   pengendali tab di public/js/sc-tabs.js yang sudah dipakai beranda.

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

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

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

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

    /* 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);

    /* Dua warna sinyal, hanya untuk bilah angka dan lencana bahaya.
       Konsepnya memakai keduanya untuk membedakan hasil yang buruk
       (kredensial terkirim, departemen berisiko) dari yang baik. */
    --bad:        #ef5b4c;
    --good:       #4ec38a;

    --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;

    /* Konsepnya menahan isi section di 1400px, lebih lebar dari tiga
       halaman platform lain karena banyak barisnya berlajur lima dan
       enam. Kepala section dan grid kartu punya batasnya sendiri. */
    --w:     1400px;

    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 .pc
   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.pc-btn". */
.pc p,
.pc li,
.pc h1, .pc h2, .pc h3, .pc h4,
.pc th, .pc td,
.pc blockquote,
.pc-flow__h,
.pc-mail__subj,
.pc-sms__bubble,
.pc-qr__h,
.pc-tech__h,
.pc-side__h,
.pc-trig__a,
.pc-dept__n,
.pc-auth__v,
.pc-mail__v,
.pc-role__d,
.pc-ai__h { font-family: var(--sans); }

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

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

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

.pc img { display: block; max-width: 100%; }

/* ─── 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. */
.pc-sec {
    position: relative;
    padding: var(--pad-y) var(--pad-x);
    overflow: hidden;
}
.pc-sec--panel {
    background: var(--panel);
    border-block: 1px solid var(--line);
}
.pc-wrap { position: relative; max-width: var(--w); margin-inline: auto; }

/* ─── Lencana, judul, kepala section ───────────────────────────────── */

.pc-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);
}
.pc-h2 {
    margin: 20px 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;
}
.pc-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: clamp(32px, 4vw, 56px);
}
.pc-head__p {
    margin: 18px 0 0;
    max-width: 66ch;
    font-size: 13.5px;
    line-height: 1.78;
    color: var(--mute);
}

/* Label monospace kecil di pojok panel. */
.pc-k {
    display: block;
    font: 700 9.5px/1.4 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--faint);
}
.pc-k--amber { color: var(--amber); }

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

.pc-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;
}
.pc-btn svg { flex: none; }

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

.pc-btn--ghost {
    background: rgba(242, 239, 234, .04);
    color: var(--paper);
    border-color: rgba(242, 239, 234, .18);
}
.pc-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. */
.pc-btn--ink { background: var(--on-amber); color: var(--amber); }
.pc-btn--ink:hover { background: #000; color: var(--amber); transform: translateY(-2px); }

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

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

.pc-ico {
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 13px;
    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);
}
.pc-ico--xs { width: 36px; height: 36px; border-radius: 11px; }
.pc-ico--sm { width: 38px; height: 38px; border-radius: 12px; }
.pc-ico--rg { width: 40px; height: 40px; }
.pc-ico--md { width: 42px; height: 42px; }
.pc-ico svg { width: 18px; height: 18px; }
.pc-ico--xs svg { width: 16px; height: 16px; }
.pc-ico--sm svg { width: 17px; height: 17px; }

/* Lingkaran garis tipis untuk tahapan alur kampanye. */
.pc-step {
    flex: none;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid rgba(245, 160, 27, .3);
    background: var(--ink);
    color: var(--amber);
}
.pc-step svg { width: 22px; height: 22px; }

/* ─── Chip, lencana bahaya, baris keterangan ───────────────────────── */

.pc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pc-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);
}

/* Lencana kecil bertanda: amber untuk keterangan netral, merah untuk
   menandai teknik yang menembus kendali keamanan. */
.pc-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(245, 160, 27, .27);
    background: rgba(245, 160, 27, .10);
    font: 700 9px/1.4 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
}
.pc-tag--bad {
    border-color: rgba(239, 91, 76, .27);
    background: rgba(239, 91, 76, .10);
    color: var(--bad);
}

.pc-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pc-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: rgba(242, 239, 234, .42);
}
.pc-note svg { flex: none; width: 14px; height: 14px; }

/* ─── Kartu dasar ──────────────────────────────────────────────────── */

.pc-card {
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    padding: clamp(22px, 2.6vw, 32px);
}
.pc-card--dash {
    background: rgba(245, 160, 27, .05);
    border: 1px dashed rgba(245, 160, 27, .35);
}

/* Bilah kemajuan, dipakai bilah metrik dan risiko per departemen. */
.pc-bar {
    border-radius: 999px;
    background: rgba(242, 239, 234, .07);
    overflow: hidden;
}
.pc-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--amber);
}

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

.pc-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    padding: 0 var(--pad-x);
}
/* Enam lapis latar, sama seperti hero Threvix: pijar amber di puncak,
   titik titik, kisi besar, dua cincin orbit, lalu peluruhan ke ground.
   Semuanya dekoratif dan tidak menangkap pointer. */
.pc-hero__pool,
.pc-hero__dots,
.pc-hero__grid,
.pc-hero__ring,
.pc-hero__fade { position: absolute; pointer-events: none; }

.pc-hero__pool { inset: 0; background: radial-gradient(78% 62% at 50% -12%, rgba(245, 160, 27, .20), transparent 62%); }
.pc-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%);
}
.pc-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%);
}
.pc-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%);
}
.pc-hero__ring--1 { top: clamp(120px, 20vw, 240px); width: min(94vw, 1080px); border: 1px solid rgba(245, 160, 27, .14); }
.pc-hero__ring--2 { top: clamp(190px, 28vw, 330px); width: min(72vw, 820px);  border: 1px solid rgba(245, 160, 27, .10); }
.pc-hero__fade { inset: auto 0 0 0; height: 180px; background: linear-gradient(#0b0b0d00, #0b0b0d); }

/* Wordmark produk di atas judul. Berkasnya biru-navy beralas tembus
   pandang sehingga tidak berdiri sendiri di atas hero gelap; kepingnya
   putih, sama seperti hero Threvix, Cytectra, Cybrion, dan Bitbait. */
.pc-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;
}
.pc-hero__inner {
    position: relative;
    max-width: 1200px;
    margin-inline: auto;
    /* .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, 15vw, 220px);
    padding-bottom: clamp(80px, 10vw, 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.pc-hero__h1 {
    margin: clamp(24px, 3vw, 40px) 0 0;
    font-size: clamp(44px, 8vw, 116px);
    line-height: .94;
    letter-spacing: -.05em;
    font-weight: 500;
    color: var(--paper);
}
/* Titik di ujung nama produk. Konsepnya memakainya sebagai tanda baca
   sekaligus satu satunya aksen warna di judul. */
.pc-hero__h1 i { font-style: normal; color: var(--amber); }

.pc-hero__tag {
    margin: clamp(20px, 2.6vw, 32px) 0 0;
    max-width: 30ch;
    font-size: clamp(19px, 2.8vw, 34px);
    line-height: 1.2;
    letter-spacing: -.032em;
    font-weight: 500;
    color: rgba(242, 239, 234, .76);
}
.pc-hero__tag em { font-style: normal; color: var(--amber); }

.pc-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(28px, 3.4vw, 44px);
}
.pc-hero__notes {
    justify-content: center;
    margin-top: clamp(30px, 3.4vw, 46px);
}

/* ─── 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 .pc-hero__fade, dan position relative membuat
   bingkainya menimpa gradasi penutup itu, bukan tertutup olehnya. */
.pc-hero__shot { position: relative; }
.pc-shot {
    max-width: 1200px;
    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: var(--r) var(--r) 0 0;
    box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .9);
}
.pc-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);
}
.pc-shot__dots { display: flex; gap: 6px; flex: none; }
.pc-shot__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(242, 239, 234, .14); }
.pc-shot__dots i:last-child { background: rgba(245, 160, 27, .5); }
.pc-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;
}
.pc-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. */
.pc-hero--shot .pc-hero__inner { padding-bottom: clamp(38px, 4.4vw, 64px); }

/* ═══ 2. BILAH METRIK KAMPANYE ══════════════════════════════════════ */

.pc-metrics {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: clamp(34px, 4.4vw, 64px) var(--pad-x);
}
.pc-metrics__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: clamp(20px, 2.4vw, 30px);
}
.pc-metrics__h {
    margin: 0;
    font-size: clamp(19px, 2.2vw, 26px);
    line-height: 1.2;
    letter-spacing: -.026em;
    font-weight: 500;
    color: var(--paper);
}
.pc-metrics__note {
    font: 500 9.5px/1.4 var(--mono);
    letter-spacing: .16em;
    color: rgba(242, 239, 234, .38);
}
.pc-metrics__row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1.4vw, 18px);
}
.pc-metric { flex: 1 1 180px; min-width: 150px; }
.pc-metric__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.pc-metric__l {
    font: 500 9.5px/1.4 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}
.pc-metric__n {
    font: 700 clamp(18px, 2vw, 24px)/1 var(--mono);
    letter-spacing: -.03em;
    color: var(--paper);
}
.pc-metric .pc-bar { margin-top: 12px; height: 8px; }
.pc-metric__p {
    margin: 10px 0 0;
    font: 400 10.5px/1.4 var(--mono);
    color: var(--wisp);
}
/* Empat warna bilah, mengikuti arti angkanya. */
.pc-bar--full  > span { background: rgba(242, 239, 234, .22); }
.pc-bar--soft  > span { background: rgba(245, 160, 27, .55); }
.pc-bar--amber > span { background: rgba(245, 160, 27, .85); }
.pc-bar--bad   > span { background: var(--bad); }
.pc-bar--good  > span { background: var(--good); }

/* ═══ 3. ALUR KAMPANYE ══════════════════════════════════════════════ */

.pc-flow { position: relative; }
/* Garis penghubung antar tahap, setinggi titik tengah lingkaran 58px.
   Hanya digambar saat keenam tahap benar benar sebaris; begitu ada yang
   turun, garisnya justru memotong isi. Enam kolom 190px plus lima jarak
   16px butuh 1220px isi, jadi ambangnya di 1360px. */
.pc-flow__line { display: none; }
@media (min-width: 1360px) {
    .pc-flow__line {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 29px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(245, 160, 27, .4), rgba(245, 160, 27, .4), transparent);
    }
}
.pc-flow__row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1.2vw, 16px);
}
.pc-flow__item { flex: 1 1 190px; min-width: 170px; }
.pc-flow__k { display: flex; align-items: center; gap: 12px; }
.pc-flow__i {
    font: 700 10px/1.4 var(--mono);
    letter-spacing: .18em;
    color: var(--wisp);
}
.pc-flow__h {
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -.022em;
    font-weight: 500;
    color: var(--paper);
}
.pc-flow__p {
    margin: 9px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(242, 239, 234, .54);
}

/* ═══ 4. KANAL KAMPANYE — tab ═══════════════════════════════════════ */

.pc-tabs { max-width: 1080px; margin-inline: auto; }
.pc-tabs__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.pc-tab {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(242, 239, 234, .14);
    background: rgba(242, 239, 234, .03);
    color: rgba(242, 239, 234, .58);
    font: 500 11px/1.2 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .25s, background .25s, border-color .25s;
}
.pc-tab svg { flex: none; width: 15px; height: 15px; }
.pc-tab:hover { color: var(--paper); background: rgba(242, 239, 234, .07); }
.pc-tab.is-active {
    color: var(--amber);
    border-color: rgba(245, 160, 27, .4);
    background: rgba(245, 160, 27, .12);
}
.pc-tabs__panels {
    margin-top: clamp(20px, 2.4vw, 30px);
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    padding: clamp(22px, 2.6vw, 34px);
    min-height: 230px;
}
.pc-panel { display: flex; flex-direction: column; gap: 12px; }
.pc-panel[hidden] { display: none; }
.pc-panel__p {
    margin: 0;
    font-size: 13px;
    line-height: 1.72;
    color: var(--soft);
}

/* Pratinjau email */
.pc-mail__to {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}
.pc-mail__l { font: 400 11px/1.4 var(--mono); color: var(--faint); }
.pc-mail__v { font-size: 13px; color: var(--paper); }
.pc-mail__to .pc-tag { margin-left: auto; }
.pc-mail__subj {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -.018em;
    color: var(--paper);
}

/* Gelembung pesan SMS dan WhatsApp */
.pc-sms__bubble {
    align-self: flex-start;
    max-width: 34ch;
    margin: 0;
    padding: 13px 15px;
    border-radius: 16px 16px 16px 4px;
    background: rgba(242, 239, 234, .07);
    font-size: 13px;
    line-height: 1.6;
    color: var(--paper);
}
.pc-sms__bubble a,
.pc-sms__bubble em { font-style: normal; color: var(--amber); }
.pc-sms__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    font: 400 10.5px/1.4 var(--mono);
    color: var(--ghost);
}
.pc-sms__meta span { display: inline-flex; align-items: center; gap: 7px; }
.pc-sms__meta svg { flex: none; width: 13px; height: 13px; }

/* Kode QR hiasan. Modulnya digambar dari sebuah pola tetap di Blade, jadi
   bentuknya sama di setiap muat dan tidak butuh gambar. */
.pc-qr { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.pc-qr__code {
    flex: none;
    padding: 12px;
    border-radius: 14px;
    background: rgba(242, 239, 234, .07);
    display: grid;
    grid-template-columns: repeat(8, 10px);
    grid-auto-rows: 10px;
    gap: 2px;
}
.pc-qr__code i { border-radius: 1px; }
.pc-qr__code i.on { background: var(--amber); }
.pc-qr__body { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 12px; }
.pc-qr__h {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -.018em;
    color: var(--paper);
}

/* ═══ 5. LIMA TEKNIK ════════════════════════════════════════════════ */

.pc-grid {
    display: grid;
    gap: clamp(10px, 1.2vw, 14px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    max-width: 1160px;
    margin-inline: auto;
}
.pc-tech {
    position: relative;
    overflow: hidden;
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    padding: clamp(22px, 2.5vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .3s, transform .3s;
}
.pc-tech:hover { border-color: var(--amber-lit); transform: translateY(-4px); }
/* Nomor besar yang nyaris tenggelam ke alas kartu. */
.pc-tech__n {
    position: absolute;
    top: -12px;
    right: 6px;
    font: 700 clamp(58px, 6vw, 86px)/1 var(--mono);
    letter-spacing: -.06em;
    color: rgba(242, 239, 234, .05);
}
.pc-tech__k { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pc-tech__h {
    position: relative;
    margin: 0;
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -.026em;
    font-weight: 500;
    color: var(--paper);
}
.pc-tech__p {
    position: relative;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.74;
    color: var(--soft);
}
/* Kartu terakhir bukan salah satu teknik melainkan catatan yang berlaku
   untuk kelimanya, jadi bentuknya dibedakan dan tidak ikut terangkat. */
.pc-tech--note {
    background: rgba(245, 160, 27, .05);
    border: 1px dashed rgba(245, 160, 27, .35);
    justify-content: center;
}
.pc-tech--note:hover { border-color: rgba(245, 160, 27, .35); transform: none; }
.pc-tech--note .pc-tech__h { max-width: 18ch; }

/* ═══ 6. PELATIHAN OTOMATIS ═════════════════════════════════════════ */

.pc-two {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 2vw, 26px);
    align-items: stretch;
}
.pc-two__main { flex: 1.2 1 380px; min-width: 290px; }
.pc-two__side { flex: 1 1 300px; min-width: 270px; display: grid; gap: 14px; align-content: start; }

.pc-trigs { margin-top: 20px; display: grid; gap: 12px; }
.pc-trig {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(242, 239, 234, .10);
    background: rgba(242, 239, 234, .02);
}
.pc-trig__a { flex: 1 1 150px; min-width: 130px; font-size: 13.5px; line-height: 1.4; color: var(--paper); }
.pc-trig__arrow { flex: none; display: grid; place-items: center; color: var(--amber); }
.pc-trig__arrow svg { width: 15px; height: 15px; }
.pc-trig__b {
    flex: 1 1 170px;
    min-width: 150px;
    font: 400 11px/1.5 var(--mono);
    color: var(--mute);
}
/* Saat baris pemicu menumpuk, panah ke bawah lebih tepat daripada ke
   samping; memutarnya cukup dan tidak menuntut ikon kedua. */
@media (max-width: 519px) {
    .pc-trig { gap: 8px; }
    .pc-trig__arrow { transform: rotate(90deg); }
}

/* Kartu samping: ikon di kiri, judul dan kalimat di kanan. */
.pc-side {
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    padding: clamp(20px, 2.2vw, 26px);
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.pc-side--stack { flex-direction: column; gap: 12px; }
.pc-side__txt { min-width: 0; }
.pc-side__h {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.25;
    letter-spacing: -.022em;
    font-weight: 500;
    color: var(--paper);
}
.pc-side__p {
    margin: 9px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(242, 239, 234, .54);
}
.pc-side--stack .pc-side__p { margin: 0; }

.pc-foot-note {
    margin: 20px 0 0;
    font-size: 12.5px;
    line-height: 1.72;
    color: rgba(242, 239, 234, .50);
}

/* ═══ 7. ANALITIK DAN PELAPORAN ═════════════════════════════════════ */

.pc-three { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 20px); }
.pc-three__a { flex: 1 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.pc-three__b { flex: 1.4 1 340px; min-width: 280px; }
.pc-three__c { flex: 1 1 280px; min-width: 250px; display: grid; gap: 12px; align-content: start; }
.pc-three__a .pc-k { align-self: flex-start; }

/* Cincin skor. Sudut sapuannya ditulis di atribut style elemen karena
   nilainya berasal dari data, bukan dari desain. */
.pc-gauge {
    position: relative;
    width: 170px;
    height: 170px;
    max-width: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.pc-gauge__hole {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: var(--cell);
    display: grid;
    place-items: center;
    text-align: center;
}
.pc-gauge__n {
    font: 700 40px/1 var(--mono);
    letter-spacing: -.04em;
    color: var(--paper);
}
.pc-gauge__s {
    margin-top: 8px;
    font: 500 9px/1.4 var(--mono);
    letter-spacing: .2em;
    color: var(--amber);
}

.pc-dept__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.pc-dept__win { font: 400 10px/1.4 var(--mono); color: var(--wisp); }
.pc-dept__list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.pc-dept__top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: rgba(242, 239, 234, .66);
}
.pc-dept__n { font-family: var(--sans); }
.pc-dept__v { font: 500 11px/1.4 var(--mono); color: var(--amber); }
.pc-dept__v--bad { color: var(--bad); }
.pc-dept__v--good { color: var(--good); }
.pc-dept__list .pc-bar { margin-top: 9px; height: 7px; }

/* ═══ 8. EKSTENSI BROWSER ═══════════════════════════════════════════ */

.pc-ext {
    background: linear-gradient(168deg, var(--card-a), var(--card-b));
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    overflow: hidden;
}
.pc-ext__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(242, 239, 234, .03);
}
.pc-ext__dots { display: flex; gap: 6px; flex: none; }
.pc-ext__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(242, 239, 234, .14); }
.pc-ext__dots i:last-child { background: rgba(245, 160, 27, .5); }
.pc-ext__url {
    flex: 1;
    min-width: 0;
    max-width: 420px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(242, 239, 234, .05);
    font: 400 10.5px/1.4 var(--mono);
    color: rgba(242, 239, 234, .38);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Empat kolom yang dipisahkan garis rambut. Jarak 1px pada grid dengan
   alas terang menghasilkan garisnya tanpa border per sel, jadi tidak ada
   garis ganda di persimpangan. */
.pc-ext__grid {
    display: grid;
    gap: 1px;
    background: rgba(242, 239, 234, .08);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.pc-ext__col {
    background: var(--cell);
    padding: clamp(20px, 2.2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pc-ext__k { display: flex; align-items: center; gap: 12px; }
.pc-ext__h {
    margin: 0;
    font: 700 9.5px/1.4 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--amber);
}
.pc-ext__ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pc-ext__ul li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--dim);
}
.pc-ext__ul li::before {
    content: '';
    flex: none;
    margin-top: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--amber);
}
.pc-ext__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-top: 1px solid var(--line-soft);
    background: rgba(242, 239, 234, .02);
}

/* ═══ 9. KEAMANAN ENTERPRISE ════════════════════════════════════════ */

.pc-two--even .pc-two__main,
.pc-two--even .pc-two__side { flex: 1 1 340px; min-width: 280px; }
.pc-two--even .pc-two__side { display: block; }

.pc-auth { margin-top: 18px; border-top: 1px solid var(--line-soft); }
.pc-auth__row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-hair);
}
.pc-auth__row:last-child { border-bottom: 0; padding-bottom: 0; }
.pc-auth__l {
    flex: none;
    width: 120px;
    font: 500 11px/1.5 var(--mono);
    letter-spacing: .08em;
    color: var(--paper);
}
.pc-auth__v {
    flex: 1 1 180px;
    min-width: 160px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--soft);
}
@media (max-width: 419px) {
    .pc-auth__l { width: 100%; }
}

/* Enam peran, digambar sebagai tangga yang menyempit ke bawah: makin
   sedikit wewenangnya, makin pendek bilahnya. Lebar dan kepekatannya
   ditulis di atribut style karena keduanya berasal dari urutan data. */
.pc-roles { margin-top: 20px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pc-role {
    min-width: 220px;
    max-width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(245, 160, 27, .34);
}
.pc-role__n {
    display: block;
    font: 700 11.5px/1.2 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--paper);
}
.pc-role__d {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mute);
}
/* Di bawah lebar itu tangganya tidak lagi muat; semua bilah dibuat penuh
   supaya tidak ada yang keluar dari kartunya. */
@media (max-width: 419px) {
    .pc-role { min-width: 0; width: 100% !important; }
}

.pc-ai {
    margin-top: clamp(14px, 2vw, 20px);
    padding: clamp(22px, 2.6vw, 32px);
    border-radius: var(--r);
    border: 1px dashed rgba(245, 160, 27, .35);
    background: rgba(245, 160, 27, .05);
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    align-items: center;
}
.pc-ai__txt { flex: 1 1 300px; min-width: 260px; }
.pc-ai__k { display: flex; align-items: center; gap: 12px; }
.pc-ai__h {
    margin: 0;
    font-size: 17.5px;
    line-height: 1.25;
    letter-spacing: -.024em;
    font-weight: 500;
    color: var(--paper);
}
.pc-ai__p {
    margin: 12px 0 0;
    max-width: 52ch;
    font-size: 12.5px;
    line-height: 1.72;
    color: var(--soft);
}
.pc-ai__chips { flex: 1 1 260px; min-width: 240px; }

/* ═══ 10. PENUTUP ═══════════════════════════════════════════════════ */

.pc-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);
}
.pc-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%);
}
.pc-close__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.pc-close__k {
    font: 700 10px/1.4 var(--mono);
    letter-spacing: .22em;
    color: var(--on-amber);
}
.pc-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;
}
.pc-close__p {
    margin: 20px 0 0;
    max-width: 62ch;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(20, 16, 5, .76);
}
.pc-close__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}
.pc-close__notes {
    justify-content: center;
    gap: 12px 26px;
    margin-top: 28px;
}
.pc-close .pc-note {
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(20, 16, 5, .62);
}

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