/* ═══════════════════════════════════════════════════════════════════════
   SKYCYBER /tentang — "AMBER TERMINAL", mengikuti NEW UI KONSEP/
   SkyCyber Tentang Kami.html
   ═══════════════════════════════════════════════════════════════════════
   Berkas ini HANYA berisi gaya khusus halaman Tentang. Token warna, skala
   tipografi, tombol, kerangka section, dan seluruh kerangka hero dipinjam
   dari public/css/home-v2.css yang ikut dimuat di halaman ini, supaya
   kedua halaman benar-benar memakai satu sistem visual dan satu font.

   Hero memakai kelas .sc2-hero milik homepage apa adanya; bedanya hanya
   isi lapisan latarnya: homepage memutar video, halaman ini menggambar
   pattern (kisi, arsir diagonal, cahaya amber) murni dengan gradasi CSS.

   ATURAN PERFORMA: tidak ada `filter: blur()` di halaman ini. Bilah
   navigasi bersifat fixed dan memakai backdrop-filter, jadi lapisan blur
   besar di belakangnya membuat guliran tersendat (pernah terjadi).
   mask-image pada lapisan cat biasa aman: hero homepage sudah bertahun
   memakainya tanpa masalah. Semua kesan lembut di sini dari gradasi.

   Semua kelas berawalan "ab-" dan hidup di dalam .sc2, jadi halaman lain
   yang masih memakai tema warm cream tidak ikut berubah.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1 · Hero: pattern pengganti video ────────────────────────────────
   Ketiga lapisan di bawah berdiri di dalam .sc2-hero__media (z-index 0),
   lalu .sc2-hero__scrim milik homepage menutup di atasnya sehingga zona
   teks tetap tenang dan versi mobile-nya ikut aturan scrim homepage. */

/* Kisi teknis dua tingkat (104px mayor, 26px minor) dengan titik amber di
   setiap simpul 208px. Memudar ke bawah supaya kaki hero bersih. */
.ab-hx__grid {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1.6px at 1px 1px, rgba(245, 160, 27, .5) 0 1px, transparent 1.6px),
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .075) 0 1px, transparent 1px 104px),
        repeating-linear-gradient(0deg,  rgba(242, 239, 234, .055) 0 1px, transparent 1px 104px),
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .022) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(0deg,  rgba(242, 239, 234, .018) 0 1px, transparent 1px 26px);
    background-size: 208px 208px, auto, auto, auto, auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .75) 46%, rgba(0, 0, 0, .25) 76%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .75) 46%, rgba(0, 0, 0, .25) 76%, transparent 98%);
}

/* Arsir diagonal di sisi kanan, memudar ke kiri: memberi tekstur pada
   bagian layar yang tidak ditempati teks. */
.ab-hx__hatch {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(46vw, 600px);
    background: repeating-linear-gradient(-45deg, rgba(242, 239, 234, .07) 0 1px, transparent 1px 10px);
    -webkit-mask-image: linear-gradient(105deg, transparent 4%, rgba(0, 0, 0, .65) 55%, #000 100%);
    mask-image: linear-gradient(105deg, transparent 4%, rgba(0, 0, 0, .65) 55%, #000 100%);
}

/* Dua kolam cahaya amber. Gradasi radial dengan perhentian bertahap sudah
   memberi tepi selembut blur tanpa lapisan raster tambahan. */
.ab-hx__glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(46% 42% at 82% 24%, rgba(245, 160, 27, .17), rgba(245, 160, 27, .05) 55%, transparent 74%),
        radial-gradient(40% 48% at 4% 82%,  rgba(245, 160, 27, .09), transparent 70%);
}

/* Judul halaman ini lebih panjang dari judul homepage (10 kata vs 3),
   jadi skalanya diturunkan sedikit supaya tetap muat empat baris di
   dalam hero satu layar. */
.ab-hero .sc2-hero__h1 {
    font-size: clamp(30px, 4.8vw, 66px);
    /* 24ch: cukup untuk "melindungi aset digital" (23 huruf) berdiri satu
       baris, sehingga judulnya patah menjadi empat baris yang rapi. */
    max-width: 24ch;
}

/* Scrim beranda disetel untuk video yang ramai, jadi terlalu pekat untuk
   pattern yang tenang: kisi dan arsirnya nyaris lenyap. Di halaman ini
   tirainya dilonggarkan; sisi kiri tetap paling gelap untuk zona teks,
   dan tepi bawah tetap pekat sebagai alas bilah data. */
.ab-hero .sc2-hero__scrim {
    background:
        linear-gradient(100deg, rgba(11, 11, 13, .88) 0%, rgba(11, 11, 13, .5) 38%, rgba(11, 11, 13, .08) 68%, rgba(11, 11, 13, .3) 100%),
        linear-gradient(to bottom, rgba(11, 11, 13, .8) 0%, rgba(11, 11, 13, 0) 24%, rgba(11, 11, 13, .05) 60%, rgba(11, 11, 13, .72) 100%);
}
@media (max-width: 900px) {
    /* Teks pindah ke bawah, jadi tirai menyamping tidak perlu sepekat itu. */
    .ab-hero .sc2-hero__scrim {
        background:
            linear-gradient(100deg, rgba(11, 11, 13, .68) 0%, rgba(11, 11, 13, .38) 45%, rgba(11, 11, 13, .3) 100%),
            linear-gradient(to bottom, rgba(11, 11, 13, .85) 0%, rgba(11, 11, 13, .1) 26%, rgba(11, 11, 13, .5) 62%, rgba(11, 11, 13, .9) 100%);
    }
}

/* Sel data perusahaan pada bilah kaki hero: label kecil pudar + nilai.
   Menumpang pada .sc2-hero__facts/.sc2-hero__fact milik homepage supaya
   perilaku responsifnya (menumpuk di ponsel) ikut otomatis. */
.ab-rec__k {
    font: 500 8.5px/1.4 var(--mono);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--faint);
}
.ab-rec__v {
    font: 500 12.5px/1.3 var(--mono);
    letter-spacing: -.01em;
    color: var(--paper);
}

/* ─── 2 · Bilah angka ──────────────────────────────────────────────────
   Empat sel di atas panel, dipisah garis rambut. Garisnya digambar
   sebagai outline tiap sel (bukan celah berwarna) supaya baris yang tidak
   penuh tidak meninggalkan blok abu menggantung. */

.ab-figs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.ab-fig {
    position: relative;
    outline: 1px solid var(--line);
    padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 30px);
    transition: background .3s ease;
}
.ab-fig::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.ab-fig:hover { background: var(--raise); }
.ab-fig:hover::before { transform: scaleX(1); }

.ab-fig__idx {
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .18em;
    color: var(--amber);
}
.ab-fig__num {
    display: block;
    margin-top: 16px;
    font: 700 clamp(30px, 3.8vw, 48px)/1 var(--mono);
    letter-spacing: -.045em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.ab-fig__num i { font-style: normal; color: var(--amber); }
.ab-fig__label {
    display: block;
    margin-top: 11px;
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dimmer);
}

@media (max-width: 820px) {
    .ab-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── 3 · Visi & Misi ──────────────────────────────────────────────────
   Dua pernyataan besar berdampingan. Tiap blok dibuka baris label
   (nama amber + garis + keterangan pudar) lalu kalimatnya ditulis besar,
   karena ini kutipan sikap, bukan paragraf penjelas. */

.ab-creed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-block: 1px solid var(--line);
    margin-top: clamp(8px, 1.2vw, 18px);
}

.ab-creed__block { padding: clamp(26px, 3vw, 44px) clamp(26px, 3.4vw, 52px) clamp(26px, 3vw, 44px) 0; }
.ab-creed__block + .ab-creed__block {
    border-left: 1px solid var(--line);
    padding-right: 0;
    padding-left: clamp(26px, 3.4vw, 52px);
}

.ab-creed__top { display: flex; align-items: center; gap: 12px; }
.ab-creed__name {
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    color: var(--amber);
}
.ab-creed__line { flex: 1; height: 1px; background: var(--line-soft); }
.ab-creed__tag {
    font: 500 9px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
}

.ab-creed__text {
    margin: 18px 0 0;
    max-width: 44ch;
    font-size: clamp(17px, 2vw, 26px);
    line-height: 1.42;
    letter-spacing: -.028em;
    font-weight: 500;
    color: rgba(242, 239, 234, .88);
}

@media (max-width: 860px) {
    .ab-creed { grid-template-columns: 1fr; }
    .ab-creed__block { padding-right: 0; }
    .ab-creed__block + .ab-creed__block {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
    }
}

/* ─── 4 · Lembar kompetensi ────────────────────────────────────────────
   Lima sel dalam grid dua kolom (baris pertama selebar penuh), bukan lagi
   lima baris memanjang: tingginya kira-kira separuh versi sebelumnya.
   Tiap sel dibuka baris indeks amber + nama + garis + jumlah butir, lalu
   chip-nya mengalir di bawahnya. Saat disorot, garis amber menyala di tepi
   atas sel, sama seperti sel bilah angka. */

.ab-spec {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(8px, 1.2vw, 18px);
    border: 1px solid var(--line);
    background: var(--ink);
}

.ab-spec__cell {
    position: relative;
    outline: 1px solid var(--line);
    padding: clamp(16px, 1.9vw, 24px) clamp(16px, 2vw, 26px) clamp(18px, 2.1vw, 26px);
    transition: background .25s ease;
}
.ab-spec__cell--wide { grid-column: 1 / -1; }
.ab-spec__cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.ab-spec__cell:hover { background: var(--panel); }
.ab-spec__cell:hover::before { transform: scaleX(1); }

.ab-spec__head {
    display: flex;
    align-items: baseline;
    gap: 11px;
    margin-bottom: 13px;
}
.ab-spec__no {
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .18em;
    color: var(--amber);
}
.ab-spec__key {
    font: 500 9.5px/1.4 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim);
}
.ab-spec__line { flex: 1; height: 1px; background: var(--line-soft); }
.ab-spec__tally {
    font: 500 9px/1 var(--mono);
    letter-spacing: .14em;
    color: var(--faint);
}

.ab-spec__vals {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ab-chip {
    padding: 6px 11px;
    border: 1px solid rgba(242, 239, 234, .16);
    font: 500 10px/1 var(--mono);
    letter-spacing: .1em;
    color: rgba(242, 239, 234, .72);
    white-space: nowrap;
    transition: border-color .25s ease, color .25s ease;
}
.ab-chip:hover { border-color: var(--amber); color: var(--paper); }

@media (max-width: 700px) {
    .ab-spec { grid-template-columns: 1fr; }
}

/* ─── 5 · Prinsip: indeks menempel di kiri, isi mengalir di kanan ───── */

.ab-spread {
    display: grid;
    grid-template-columns: minmax(0, 292px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(26px, 4vw, 68px);
}

.ab-spread__aside {
    position: sticky;
    /* 66px bilah nav + jarak nafas */
    top: 98px;
}

.ab-nav {
    margin-top: clamp(22px, 2.6vw, 34px);
    border-top: 1px solid var(--line);
}
.ab-nav__item {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 13px 12px;
    border-bottom: 1px solid var(--line);
    border-left: 2px solid transparent;
    font: 500 10.5px/1.4 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dimmer);
    text-decoration: none;
    transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.ab-nav__n { color: var(--amber); }
.ab-nav__item:hover { color: var(--paper); background: var(--panel); }
.ab-nav__item.is-active {
    color: var(--paper);
    background: var(--panel);
    border-left-color: var(--amber);
}

.ab-list { border-top: 1px solid var(--line); }

.ab-item {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 3vw, 44px) 0;
    border-bottom: 1px solid var(--line);
    /* Supaya tautan #prinsip-n tidak berhenti persis di bawah bilah nav. */
    scroll-margin-top: 92px;
}

/* Nomor besar samar di sudut kanan: penanda urutan tanpa beban gambar. */
.ab-item__ghost {
    position: absolute;
    top: clamp(16px, 2vw, 28px);
    right: 0;
    font: 700 clamp(54px, 8vw, 110px)/1 var(--mono);
    letter-spacing: -.06em;
    color: rgba(242, 239, 234, .06);
    pointer-events: none;
    user-select: none;
    transition: color .35s ease;
}
.ab-item:hover .ab-item__ghost { color: rgba(245, 160, 27, .1); }

.ab-item__top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ab-item__no {
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    color: var(--amber);
}
.ab-item__label {
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .4);
}

.ab-item__title {
    position: relative;
    margin: 18px 0 0;
    font-size: clamp(20px, 2.3vw, 29px);
    line-height: 1.14;
    letter-spacing: -.03em;
    font-weight: 500;
    color: var(--paper);
    /* Cukup lebar supaya judul terpanjang jatuh di dua-tiga baris, bukan
       lima; kolomnya sendiri masih menyisakan ruang untuk nomor samar. */
    max-width: 34ch;
    text-wrap: balance;
}
.ab-item__desc {
    position: relative;
    margin: 14px 0 0;
    max-width: 66ch;
    font-size: 13.5px;
    line-height: 1.78;
    color: rgba(242, 239, 234, .58);
}

@media (max-width: 1000px) {
    .ab-spread { grid-template-columns: 1fr; }
    .ab-spread__aside { position: static; }
    /* Daftar indeks jadi mubazir saat menumpuk: tiap blok sudah membawa
       nomor dan labelnya sendiri. */
    .ab-nav { display: none; }
}

/* ─── 6 · Pita sertifikasi ─────────────────────────────────────────────
   Lencana berjalan sebagai marquee, memakai kelas .sc2-logostrip /
   .sc2-logos / .sc2-logo--cert milik beranda apa adanya (home-v2.css ikut
   dimuat di halaman ini), jadi kecepatan, jeda saat kursor di atasnya, dan
   penanganan lencana bertinta gelap semuanya identik dengan beranda.
   Kelas ini hanya menarik pitanya menembus padding section dan melepas
   garis bawahnya, karena garis bawah section sudah menjadi penutup. */

.ab-marq {
    margin: clamp(20px, 2.6vw, 36px) calc(var(--pad-x) * -1) 0;
    border-bottom: 0;
}

/* ─── 7 · Blok penutup ───────────────────────────────────────────────── */

.ab-close {
    position: relative;
    overflow: hidden;
}

/* Kolam cahaya sudut kanan bawah, murni gradasi (lihat aturan performa
   di kepala berkas). */
.ab-close__glow {
    position: absolute;
    z-index: 0;
    right: -120px;
    bottom: -180px;
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(245, 160, 27, .15), rgba(245, 160, 27, .04) 52%, transparent 70%);
    pointer-events: none;
}
.ab-close > .sc2-wrap { position: relative; z-index: 1; }

.ab-close__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(26px, 3vw, 38px);
}

.ab-close__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px clamp(16px, 2.4vw, 30px);
    margin-top: clamp(28px, 3.2vw, 42px);
}
.ab-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, .44);
}
.ab-close__foot span::before {
    content: '';
    flex: none;
    width: 5px;
    height: 5px;
    background: var(--amber);
}

@media (max-width: 560px) {
    .ab-close__ctas .sc2-btn { flex: 1 1 auto; justify-content: center; }
}

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

@media (prefers-reduced-motion: reduce) {
    .ab-fig::before { transition: none; }
    .ab-spread__aside { position: static; }
}