/* ═══════════════════════════════════════════════════════════════════════
   SKYCYBER /layanan/security-training
   ═══════════════════════════════════════════════════════════════════════
   Satu sistem visual dengan beranda, /tentang, /layanan, dan tiga halaman
   layanan yang sudah diredesign: token warna, tipografi, tombol, kerangka
   section, dan FAQ dipinjam dari home-v2.css yang ikut dimuat di halaman
   ini. Berkas ini hanya menambah bentuk khas halaman pelatihan.

   Ritmenya sengaja BEDA dari halaman layanan lain. Pentest bercerita soal
   kedalaman, vulnerability assessment soal keluasan dan urutan, awareness
   soal perubahan perilaku. Halaman ini bercerita soal kurikulum: papan
   jadwal di hero, jenjang tiga tingkat, lembar silabus per jalur, dan
   pratinjau rencana kelas harian.

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

   IKON: ikon jalur pelatihan datang dari basis data (admin mengisinya di
   /admin/layanan/{id}/detail). Sisanya SVG inline di partial. Tidak ada
   icon font dari CDN.

   ATURAN PERFORMA: tidak ada `filter: blur()` dan tidak ada kanvas. Bilah
   navigasi bersifat fixed dan memakai backdrop-filter, jadi lapisan mahal
   di belakangnya membuat guliran tersendat. Animasi di sini hanya
   menyentuh opacity, transform, width, dan background.

   Semua kelas berawalan "st-" (mockup silabus memakai "sts-") dan hidup
   di dalam .sc2.
   ═══════════════════════════════════════════════════════════════════════ */

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

.st-hero {
    position: relative;
    overflow: hidden;
    /* 66px = tinggi bilah navigasi tetap (chrome-v2.css) */
    padding: calc(66px + clamp(34px, 4.2vw, 62px)) var(--pad-x) clamp(40px, 5vw, 78px);
    border-bottom: 1px solid var(--line);
}

/* Latar hero memakai bahasa yang sama dengan halaman layanan lain: kisi
   teknis dan kolam cahaya amber, semuanya gradasi murni. Teksturnya di
   sini kisi kolom sempit, mengingatkan pada kolom jadwal. */
.st-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.st-hero__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1.6px at 1px 1px, rgba(245, 160, 27, .46) 0 1px, transparent 1.6px),
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .07) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg,  rgba(242, 239, 234, .05) 0 1px, transparent 1px 96px);
    background-size: 192px 192px, auto, auto;
}

/* Kolom-kolom sempit di sisi kanan, memudar ke kiri. */
.st-hero__cols {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(50vw, 640px);
    background: repeating-linear-gradient(90deg, rgba(242, 239, 234, .08) 0 1px, transparent 1px 28px);
    -webkit-mask-image: linear-gradient(100deg, transparent 2%, rgba(0, 0, 0, .58) 52%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 2%, rgba(0, 0, 0, .58) 52%, #000 100%);
}

.st-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(45% 44% at 80% 18%, rgba(245, 160, 27, .16), rgba(245, 160, 27, .05) 54%, transparent 76%),
        linear-gradient(to bottom, rgba(11, 11, 13, 0) 0%, rgba(11, 11, 13, .16) 54%, rgba(11, 11, 13, .62) 100%);
}

/* Selebar bilah header, sama seperti hero halaman layanan lain. */
.st-hero__inner { position: relative; z-index: 1; max-width: none; }

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

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

.st-hero__h1 {
    margin: clamp(20px, 2.6vw, 34px) 0 0;
    font-size: clamp(30px, 3.6vw, 62px);
    line-height: 1;
    letter-spacing: -.046em;
    font-weight: 500;
    color: var(--paper);
    max-width: 23ch;
}
.st-hero__h1 .sc2-hl { color: var(--amber); }

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

/* ── Papan jadwal ─────────────────────────────────────────────────────
   Jalur pelatihan dibaca sebagai papan jadwal: nama jalur di kiri, durasi
   sebagai angka besar di kanan. Bentuk ini sengaja tidak memakai ubin
   (vulnerability assessment) maupun bilah meter (awareness). */

.st-plan {
    flex: 1 1 400px;
    min-width: 300px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: linear-gradient(200deg, var(--panel), var(--ink) 76%);
}
.st-plan::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(115% 60% at 100% 0%, rgba(245, 160, 27, .1), transparent 62%);
}

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

.st-plan__list { position: relative; }

.st-slot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--line-soft);
    transition: background .25s ease;
}
.st-slot:hover { background: rgba(245, 160, 27, .05); }
.st-slot__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(242, 239, 234, .16);
    color: var(--amber);
}
.st-slot__ico svg { width: 18px; height: 18px; }
.st-slot__txt { flex: 1; min-width: 0; }
.st-slot__n {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--paper);
}
.st-slot__c {
    display: block;
    margin-top: 6px;
    font: 500 8.5px/1.4 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .4);
}
/* Durasi dibuat besar dan rata kanan supaya panel ini terbaca sebagai
   jadwal, bukan sebagai daftar centang. */
.st-slot__d {
    flex: none;
    text-align: right;
    font: 700 clamp(17px, 1.9vw, 22px)/1 var(--mono);
    letter-spacing: -.035em;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

/* ─── 2 · Jenjang tiga tingkat ─────────────────────────────────────────
   Pengganti bilah angka di halaman pentest. Isinya jenjang kurikulum:
   tiga tingkat dengan durasi, sasaran peserta, dan indikator kedalaman
   berupa tiga batang yang menyala bertambah. */

/* Warna garis dipakai HANYA sebagai celah 1px antar sel. Wadah luarnya
   ikut warna sel supaya di layar lebar area di luar batas 1280px tidak
   tampil sebagai pita abu terang. */
.st-levels__wrap { background: var(--panel); border-bottom: 1px solid var(--line); }
.st-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    padding-inline: var(--pad-x);
    background: var(--panel);
}

.st-lv {
    flex: 1 1 calc(33.333% - 1px);
    min-width: 260px;
    outline: 1px solid var(--line);
    background: var(--panel);
    padding: clamp(24px, 3vw, 38px) clamp(18px, 2vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background .3s ease;
}
.st-lv:hover { background: var(--ink); }

.st-lv__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.st-lv__k {
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--amber);
}
/* Indikator kedalaman: tiga batang, jumlah yang menyala menandai tingkat. */
.st-lv__steps { display: flex; align-items: flex-end; gap: 4px; }
.st-lv__steps i { width: 7px; background: rgba(242, 239, 234, .14); }
.st-lv__steps i:nth-child(1) { height: 9px; }
.st-lv__steps i:nth-child(2) { height: 14px; }
.st-lv__steps i:nth-child(3) { height: 19px; }
.st-lv--1 .st-lv__steps i:nth-child(-n + 1),
.st-lv--2 .st-lv__steps i:nth-child(-n + 2),
.st-lv--3 .st-lv__steps i:nth-child(-n + 3) { background: var(--amber); }

.st-lv__d {
    font: 700 clamp(24px, 2.8vw, 34px)/1 var(--mono);
    letter-spacing: -.04em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.st-lv__for {
    font-size: 12.5px;
    line-height: 1.68;
    color: rgba(242, 239, 234, .5);
    max-width: 36ch;
}

/* ─── 3 · Lembar silabus per jalur ─────────────────────────────────────
   Tiap jalur satu lembar penuh: pelat durasi di kiri, uraian di kanan,
   sertifikasi yang disiapkan sebagai chip di kakinya. Bentuknya sengaja
   tidak memakai kartu mengambang (pentest) maupun baris bernomor
   (vulnerability assessment). */

.st-tracks { display: grid; gap: 14px; }

.st-track {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 1px solid var(--line);
    background: var(--panel);
    transition: border-color .3s ease, background .3s ease;
}
.sc2-sec--panel .st-track { background: var(--ink); }
.st-track:hover { border-color: rgba(242, 239, 234, .3); }

/* Pelat durasi: kolom kiri berlatar amber redup dengan angka besar. */
.st-track__plate {
    flex: 0 0 clamp(120px, 17vw, 210px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: clamp(20px, 2.4vw, 30px);
    background: rgba(245, 160, 27, .06);
    border-right: 1px solid var(--line);
}
.st-track__ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(245, 160, 27, .35);
    color: var(--amber);
}
.st-track__ico svg { width: 19px; height: 19px; }
.st-track__d {
    font: 700 clamp(20px, 2.4vw, 30px)/1 var(--mono);
    letter-spacing: -.04em;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}
.st-track__dl {
    font: 500 8px/1.4 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .4);
}

.st-track__body {
    flex: 1 1 340px;
    min-width: 260px;
    padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.2vw, 30px);
}
.st-track__n {
    margin: 0;
    font-size: clamp(18px, 2.1vw, 24px);
    line-height: 1.14;
    letter-spacing: -.03em;
    font-weight: 500;
    color: var(--paper);
}
.st-track__t {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.76;
    color: rgba(242, 239, 234, .58);
    max-width: 68ch;
}
.st-track__prep {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
.st-track__pl {
    font: 500 8px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .36);
    margin-right: 4px;
}
.st-chip {
    padding: 6px 11px;
    border: 1px solid rgba(245, 160, 27, .3);
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .1em;
    color: var(--amber);
    white-space: nowrap;
}
.st-chip--dim { border-color: rgba(242, 239, 234, .14); color: rgba(242, 239, 234, .6); }

/* ─── 4 · Metodologi: kuadran ──────────────────────────────────────────
   Empat tahap disusun 2x2 dengan nomor besar sebagai cap air. Bentuk ini
   belum dipakai halaman layanan mana pun: pentest memakai rel tegak,
   vulnerability assessment pita mendatar, awareness pita kematangan. */

.st-quad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.st-qi {
    position: relative;
    overflow: hidden;
    background: var(--panel);
    padding: clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background .3s ease;
}
.sc2-sec--panel .st-qi { background: var(--ink); }
.st-qi:hover { background: var(--raise); }
/* Nomor besar sebagai cap air di sudut kanan atas. */
.st-qi__ghost {
    position: absolute;
    top: -12px;
    right: 6px;
    font: 700 clamp(64px, 8vw, 108px)/1 var(--mono);
    letter-spacing: -.06em;
    color: rgba(242, 239, 234, .045);
    pointer-events: none;
    transition: color .3s ease;
}
.st-qi:hover .st-qi__ghost { color: rgba(245, 160, 27, .1); }
.st-qi__phase {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    font: 500 9px/1.4 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
}
.st-qi__phase svg { flex: none; width: 14px; height: 14px; }
.st-qi__t {
    position: relative;
    margin: 0;
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.16;
    letter-spacing: -.028em;
    font-weight: 500;
    color: var(--paper);
}
.st-qi__d {
    position: relative;
    margin: 0;
    font-size: 13px;
    line-height: 1.76;
    color: rgba(242, 239, 234, .56);
    max-width: 52ch;
}

/* ─── 5 · Yang termasuk: daftar centang dua kolom ──────────────────────
   Manfaat dari basis data adalah daftar "apa yang didapat peserta", jadi
   bentuknya daftar centang bergaris rambut, bukan kartu bernomor. */

.st-inc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.st-ii {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background: var(--panel);
    padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 28px);
    transition: background .3s ease;
}
.sc2-sec--panel .st-ii { background: var(--ink); }
.st-ii:hover { background: var(--raise); }
.st-ii__ico { flex: none; color: var(--amber); margin-top: 2px; }
.st-ii__ico svg { width: 18px; height: 18px; display: block; }
.st-ii__txt { min-width: 0; }
.st-ii__t {
    margin: 0;
    font-size: clamp(15px, 1.6vw, 17.5px);
    line-height: 1.26;
    letter-spacing: -.024em;
    font-weight: 500;
    color: var(--paper);
}
.st-ii__d {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.76;
    color: rgba(242, 239, 234, .56);
}

/* ─── 6 · Kurikulum: kerangka acuan & sertifikasi ──────────────────── */

.st-fw {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.st-fw__i {
    background: var(--panel);
    padding: clamp(22px, 2.6vw, 30px);
    transition: background .3s ease;
}
.sc2-sec--panel .st-fw__i { background: var(--ink); }
.st-fw__i:hover { background: var(--raise); }
.st-fw__n {
    display: block;
    font: 500 12px/1.4 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--amber);
}
.st-fw__d {
    display: block;
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.75;
    color: rgba(242, 239, 234, .56);
}

/* Dinding sertifikasi: chip dikumpulkan dari kolom cert_prep tiap jalur,
   jadi isinya ikut berubah kalau admin menyunting jalur pelatihan. */
.st-certs {
    margin-top: clamp(18px, 2.2vw, 30px);
    border: 1px solid var(--line);
    background: var(--panel);
}
.sc2-sec--panel .st-certs { background: var(--ink); }
.st-certs__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--raise);
}
.sc2-sec--panel .st-certs__bar { background: var(--panel); }
.st-certs__t {
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .62);
}
.st-certs__n { font: 700 9.5px/1 var(--mono); letter-spacing: .14em; color: var(--amber); }
.st-certs__list { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px; }
.st-certs__note {
    padding: 0 18px 18px;
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(242, 239, 234, .46);
    max-width: 82ch;
}

/* ─── 7 · Sektor: kisi empat kolom bergaris atas ───────────────────── */

.st-sect {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
}
.st-sect__i {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(24px, 2.8vw, 34px) clamp(16px, 1.8vw, 24px);
    background: var(--panel);
    color: var(--paper);
    text-decoration: none;
    transition: background .3s ease;
}
.sc2-sec--panel .st-sect__i { background: var(--ink); }
.st-sect__i:hover { background: var(--raise); }
.st-sect__i::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--amber);
    opacity: .32;
    transition: opacity .3s ease;
}
.st-sect__i:hover::before { opacity: 1; }
.st-sect__head { display: flex; align-items: center; gap: 11px; }
.st-sect__ico { flex: none; color: var(--amber); }
.st-sect__ico svg { width: 20px; height: 20px; display: block; }
.st-sect__n {
    font-size: clamp(14.5px, 1.6vw, 17px);
    line-height: 1.2;
    letter-spacing: -.024em;
    font-weight: 500;
}
.st-sect__d {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.72;
    color: rgba(242, 239, 234, .54);
}
.st-sect__go {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    font: 500 9px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
    transition: gap .25s ease;
}
.st-sect__go svg { flex: none; width: 13px; height: 13px; }
.st-sect__i:hover .st-sect__go { gap: 13px; }

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

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

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

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

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

/* ─── 8b · Pratinjau rencana kelas ─────────────────────────────────────
   Keluaran layanan ini bukan laporan temuan melainkan kelas yang berjalan
   beberapa hari, jadi pratinjaunya berbentuk rencana harian, bukan
   register (vulnerability assessment) atau dasbor (awareness).

   Seluruhnya HTML dan CSS, bukan gambar: teksnya tajam di layar retina,
   ikut tema gelap, terbaca pembaca layar, dan tidak menambah satu pun
   berkas gambar.

   Isinya ILUSTRASI, bukan silabus kelas sungguhan. Nomor dokumen, judul
   sesi, dan angkanya contoh; penanda "CONTOH" ada di bilah atas supaya
   tidak terbaca sebagai dokumen asli. */

.sts {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--ink);
}
/* Garis amber tipis di tepi atas, penanda dokumen aktif. */
.sts::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--amber), rgba(245, 160, 27, .12));
    z-index: 1;
}

.sts__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}
.sts__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(242, 239, 234, .16);
    color: var(--amber);
}
.sts__ico svg { width: 16px; height: 16px; }
.sts__id { flex: 1; min-width: 0; }
.sts__no {
    display: block;
    font: 700 10.5px/1.3 var(--mono);
    letter-spacing: .12em;
    color: var(--paper);
}
.sts__meta {
    display: block;
    margin-top: 4px;
    font: 500 8.5px/1.3 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .38);
}
.sts__badge {
    flex: none;
    padding: 6px 10px;
    border: 1px solid rgba(245, 160, 27, .35);
    font: 500 8.5px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
    white-space: nowrap;
}

.sts__body { padding: clamp(14px, 1.8vw, 20px); display: grid; gap: clamp(16px, 2vw, 22px); }
.sts__h {
    font: 700 8.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .42);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 12px;
}

/* ── Ringkas kelas ── */
.sts__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); }
.sts__stat { background: var(--ink); padding: 11px 12px; }
.sts__sv {
    display: block;
    font: 700 clamp(15px, 1.7vw, 19px)/1 var(--mono);
    letter-spacing: -.03em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.sts__sl {
    display: block;
    margin-top: 7px;
    font: 500 8px/1.45 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .4);
}

/* ── Rencana harian ── */
.sts__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 74px;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
}
.sts__row:last-child { border-bottom: 0; }
.sts__row--head { padding-bottom: 8px; }
.sts__row--head span {
    font: 500 7.5px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .32);
}
.sts__day { font: 700 10px/1 var(--mono); letter-spacing: .1em; color: var(--amber); }
.sts__topic { min-width: 0; }
.sts__tn {
    display: block;
    font-size: 11.5px;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: rgba(242, 239, 234, .82);
}
.sts__ts {
    display: block;
    margin-top: 4px;
    font: 500 8.5px/1.3 var(--mono);
    letter-spacing: .06em;
    color: rgba(242, 239, 234, .36);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sts__tag {
    justify-self: end;
    padding: 5px 8px;
    border: 1px solid rgba(242, 239, 234, .16);
    font: 500 7.5px/1 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .48);
    white-space: nowrap;
}
.sts__tag--lab { border-color: rgba(245, 160, 27, .4); color: var(--amber); }
.sts__tag--exam { border-color: var(--amber); background: var(--amber); color: var(--on-amber); }

/* ── Bobot waktu ──
   Bilahnya tumbuh saat blok masuk layar (kelas .revealed dipasang
   observer milik layout). Kalau observer tidak pernah jalan, angkanya
   tetap terbaca di sisi kanan tiap bilah. */
.sts__bar2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(80px, 1.1fr) 40px;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
}
.sts__bar2:last-child { border-bottom: 0; }
.sts__bk { font-size: 11px; line-height: 1.3; color: rgba(242, 239, 234, .72); }
.sts__bt { height: 5px; background: rgba(242, 239, 234, .08); }
.sts__bf {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--amber), rgba(245, 160, 27, .4));
    transition: width .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
.reveal.revealed .sts__bf { width: var(--w, 0%); }
.sts__bv {
    font: 700 10px/1 var(--mono);
    text-align: right;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}

/* ── Setelah kelas ── */
.sts__map { display: flex; flex-wrap: wrap; gap: 7px; }
.sts__map span {
    padding: 6px 10px;
    border: 1px solid rgba(242, 239, 234, .14);
    font: 500 8.5px/1 var(--mono);
    letter-spacing: .1em;
    color: rgba(242, 239, 234, .55);
    white-space: nowrap;
}

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

.st-close { position: relative; overflow: hidden; }
.st-close__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.st-close__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1.5px at 1px 1px, rgba(245, 160, 27, .3) 0 1px, transparent 1.5px),
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .05) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg,  rgba(242, 239, 234, .038) 0 1px, transparent 1px 96px);
    background-size: 192px 192px, auto, auto;
}
.st-close__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(44% 52% at 14% 88%, rgba(245, 160, 27, .17), rgba(245, 160, 27, .05) 52%, transparent 74%),
        linear-gradient(to top, rgba(19, 19, 21, .1) 0%, rgba(19, 19, 21, .5) 46%, rgba(19, 19, 21, .88) 100%);
}
.st-close > .sc2-wrap { position: relative; z-index: 1; }
.st-close__foot { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 30px; }
.st-close__foot span {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .46);
}
.st-close__foot svg { flex: none; width: 14px; height: 14px; color: var(--amber); }

/* Kartu mode penyampaian di sisi kanan penutup, menggantikan penampung
   foto yang dipakai halaman pentest di posisi ini. */
.st-mode { border: 1px solid var(--line); background: rgba(11, 11, 13, .72); }
.st-mode__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .58);
}
.st-mode__bar i {
    width: 6px;
    height: 6px;
    background: var(--amber);
    animation: sc2-blip 1.6s ease-in-out infinite;
}
.st-mode__i {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.st-mode__i:last-child { border-bottom: 0; }
.st-mode__ico { flex: none; color: var(--amber); }
.st-mode__ico svg { width: 17px; height: 17px; display: block; }
.st-mode__txt { min-width: 0; }
.st-mode__k {
    display: block;
    font: 700 9px/1.4 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--paper);
}
.st-mode__v {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(242, 239, 234, .56);
}

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

@media (max-width: 1180px) {
    .st-sect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-fw { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .st-inc { grid-template-columns: 1fr; }
    .st-quad { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    /* Pelat durasi jadi pita mendatar di atas isinya, supaya teks jalur
       tidak terjepit di layar sempit. */
    .st-track__plate {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 14px clamp(14px, 4vw, 20px);
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .st-track__d { font-size: 20px; }
    .st-track__body { flex: 1 1 100%; }
}
@media (max-width: 620px) {
    .st-sect { grid-template-columns: 1fr; }
    .sts__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .st-ctas .sc2-btn,
    .st-hero__ctas .sc2-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 420px) {
    .sts__row { grid-template-columns: 34px minmax(0, 1fr); }
    .sts__tag { grid-column: 2 / -1; justify-self: start; margin-top: 2px; }
    .sts__row--head span:last-child { display: none; }
    .sts__bar2 { grid-template-columns: minmax(0, 1.3fr) minmax(56px, 1fr) 36px; }
}

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

@media (prefers-reduced-motion: reduce) {
    .sts__bf { transition: none; }
    .st-sect__i:hover .st-sect__go { gap: 8px; }
}