/* ═══════════════════════════════════════════════════════════════════════
   SKYCYBER HOMEPAGE — "AMBER TERMINAL"
   ═══════════════════════════════════════════════════════════════════════
   CSS biasa, bukan Tailwind. Sumber Tailwind situs ini tidak ada di repo,
   jadi utility baru tidak bisa dibuat; seluruh tampilan homepage baru
   ditulis di sini supaya tidak butuh langkah build apa pun saat deploy.

   Semua kelas diawali "sc2-" dan tokennya hidup di dalam .sc2 saja, jadi
   halaman lain (yang masih memakai tema warm cream) tidak ikut berubah.
   ═══════════════════════════════════════════════════════════════════════ */

.sc2 {
    /* Permukaan — hitam hangat, bukan abu biru */
    --ink:          #0b0b0d;
    --panel:        #131315;
    --raise:        #1b1b1e;
    /* Teks — putih gading hangat */
    --paper:        #f2efea;
    --dim:          rgba(242, 239, 234, .62);
    --dimmer:       rgba(242, 239, 234, .46);
    --faint:        rgba(242, 239, 234, .38);
    /* Aksen — amber dari logo */
    --amber:        #f5a01b;
    --amber-hi:     #ffb43c;
    --on-amber:     #141005;
    /* Garis */
    --line:         rgba(242, 239, 234, .13);
    --line-soft:    rgba(242, 239, 234, .07);
    --line-strong:  rgba(242, 239, 234, .26);

    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    /* Judul dan teks isi memakai keluarga yang sama dengan label. Skala di
       bawah sudah diturunkan ~12% dan tracking negatifnya dilonggarkan,
       karena monospace tampil lebih besar dan lebih lebar per huruf. */
    --sans: var(--mono);

    --pad-x: clamp(20px, 4vw, 64px);
    --pad-y: clamp(56px, 7vw, 110px);

    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    /* Matikan ligatur kode — tanpa ini "->" atau "!=" di tengah kalimat
       berubah jadi glyph panah. */
    font-variant-ligatures: none;
    font-feature-settings: "calt" 0, "liga" 0, "dlig" 0;
}

/* Sudut tajam di mana pun — ciri utama konsep ini */
.sc2 *,
.sc2 *::before,
.sc2 *::after { border-radius: 0; }

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

.sc2-sec {
    position: relative;
    padding: var(--pad-y) var(--pad-x);
    border-bottom: 1px solid var(--line);
}
.sc2-sec--flush { padding-left: 0; padding-right: 0; }
.sc2-sec--tight { padding-top: clamp(38px, 4.6vw, 64px); padding-bottom: clamp(38px, 4.6vw, 64px); }
.sc2-sec--panel { background: var(--panel); }
.sc2-sec--nobottom { padding-bottom: 0; }

.sc2-wrap { max-width: 1280px; margin: 0 auto; }
/* Selebar bilah header: header (.sc-nav__bar di chrome-v2.css) tidak
   memakai batas 1280px, hanya padding sisi yang sama dengan --pad-x.
   Varian ini melepas batas itu supaya tepi kiri-kanan section sejajar
   persis dengan logo dan menu di header pada layar lebar. */
.sc2-wrap--wide { max-width: none; }

/* ─── Tipografi ────────────────────────────────────────────────────── */

.sc2-eyebrow {
    display: inline-block;
    font: 500 10px/1 var(--mono);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--amber);
}

.sc2-h1 {
    margin: clamp(22px, 3vw, 40px) 0 0;
    font-size: clamp(31px, 5.2vw, 72px);
    line-height: 1;
    letter-spacing: -.035em;
    font-weight: 500;
    max-width: 21ch;
    color: var(--paper);
}
.sc2-h1 .sc2-hl { color: var(--amber); }

.sc2-h2 {
    margin: 18px 0 0;
    font-size: clamp(24px, 3.7vw, 46px);
    line-height: 1.06;
    letter-spacing: -.028em;
    font-weight: 500;
    color: var(--paper);
    max-width: 27ch;
}
.sc2-h2 .sc2-hl { color: var(--amber); }

.sc2-h3 {
    margin: 0;
    font-size: clamp(16px, 1.8vw, 21px);
    line-height: 1.26;
    letter-spacing: -.02em;
    font-weight: 500;
    color: var(--paper);
}

.sc2-lead {
    margin: 0;
    max-width: 52ch;
    font-size: 13px;
    line-height: 1.75;
    color: var(--dim);
}
.sc2-body { margin: 0; font-size: 13px; line-height: 1.75; color: var(--dim); }

/* Kepala section: judul kiri, kalimat pengantar kanan */
.sc2-head {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 60px);
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: clamp(24px, 3vw, 40px);
}
.sc2-head__aside { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Di layar sempit sisi kanan kepala section ditumpuk: kalimat pengantar di
   atas, tombol di bawah. Berlaku untuk semua section yang memakai pola ini
   (Tentang, Jurnal, FAQ) supaya perilakunya seragam. */
@media (max-width: 640px) {
    .sc2-head__aside { flex-direction: column; align-items: flex-start; gap: 14px; }
    .sc2-head__aside .sc2-lead { max-width: none; }
}

/* Varian rata tengah — judul dan kalimat pengantar bertumpuk di tengah. */
.sc2-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.sc2-head--center .sc2-h2 { max-width: 31ch; }
.sc2-head--center .sc2-lead { max-width: 68ch; }

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

.sc2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 22px;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.01em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.sc2-btn svg { flex: none; }

.sc2-btn--amber { background: var(--amber); color: var(--on-amber); font-weight: 600; }
.sc2-btn--amber:hover { background: var(--amber-hi); transform: translateY(-2px); }

.sc2-btn--ghost { background: transparent; color: var(--paper); border-color: var(--line-strong); }
.sc2-btn--ghost:hover { background: rgba(242, 239, 234, .08); border-color: rgba(242, 239, 234, .45); }

/* Varian untuk tombol yang berdiri di atas gambar atau video: kacanya
   sedikit buram supaya tepinya tetap terbaca di atas latar apa pun. */
.sc2-btn--glass {
    background: rgba(242, 239, 234, .1);
    color: var(--paper);
    border-color: rgba(242, 239, 234, .26);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.sc2-btn--glass:hover { background: rgba(242, 239, 234, .2); border-color: rgba(242, 239, 234, .5); }

.sc2-btn--sm { padding: 10px 15px; font-size: 12.5px; }

/* Tautan teks bergaya terminal */
.sc2-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 11px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
    text-decoration: none;
    transition: gap .25s ease, color .25s ease;
}
.sc2-link:hover { gap: 13px; color: var(--amber-hi); }

/* ─── Label kecil ──────────────────────────────────────────────────── */

.sc2-tag {
    display: inline-block;
    padding: 5px 9px;
    border: 1px solid var(--line);
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dimmer);
    white-space: nowrap;
}
.sc2-tag--amber { border-color: rgba(245, 160, 27, .35); color: var(--amber); }

.sc2-meta {
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}

/* Titik berkedip "siap merespons" */
.sc2-blip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 10px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dimmer);
}
.sc2-blip::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--amber);
    animation: sc2-blip 2s ease-in-out infinite;
}
@keyframes sc2-blip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ─── Baris daftar (layanan, sektor, artikel, FAQ) ─────────────────── */

.sc2-rows { border-top: 1px solid var(--line); }

.sc2-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 2vw, 34px);
    align-items: flex-start;
    padding: clamp(20px, 2.4vw, 30px) clamp(6px, 1vw, 14px);
    border-bottom: 1px solid var(--line);
    color: var(--paper);
    text-decoration: none;
    transition: background .25s ease, padding-left .25s ease;
}
.sc2-row:hover { background: var(--panel); padding-left: 22px; }
.sc2-sec--panel .sc2-row:hover { background: var(--raise); }

.sc2-row__num {
    flex: none;
    width: 52px;
    font: 700 13px/1.2 var(--mono);
    letter-spacing: .06em;
    color: var(--amber);
}

/* Nomor tahap Metodologi dibuat besar — penanda urutan jadi kuat dan
   barisnya punya ritme editorial. Dikunci di .sc2-row--step supaya daftar
   baris di bagian Sektor dan Jurnal, yang memakai .sc2-row yang sama,
   tidak ikut membesar. */
.sc2-row--step .sc2-row__num {
    width: clamp(58px, 5.4vw, 84px);
    font-size: clamp(25px, 2.9vw, 39px);
    line-height: .86;
    letter-spacing: -.02em;
}

.sc2-row__head {
    flex: 1 1 260px;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.sc2-row__desc { flex: 2 1 320px; min-width: 260px; font-size: 13.5px; line-height: 1.7; color: var(--dim); }
.sc2-row__end {
    flex: none;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 4px;
    margin-left: auto;
}

/* Kotak ikon garis 38×38 */
.sc2-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(242, 239, 234, .20);
    color: var(--amber);
    transition: border-color .25s ease, background .25s ease;
}
.sc2-row:hover .sc2-ico { border-color: rgba(245, 160, 27, .5); background: rgba(245, 160, 27, .07); }
.sc2-ico svg { width: 18px; height: 18px; }
.sc2-ico--arrow svg { width: 15px; height: 15px; }

/* ─── Tab view Layanan (services tab view) ─────────────────────────

   Sengaja dibedakan dari tab view Produk: di sana bilah tabnya mendatar
   dan panelnya dipimpin gambar, di sini bilahnya tegak di sisi kiri dan
   panelnya dipimpin teks. Dua section tab pada satu halaman jadi tidak
   terbaca sebagai komponen yang sama diulang.

   Di bawah 900px bilahnya berputar jadi baris yang bisa digulir mendatar,
   dan di bawah 700px seluruh modulnya menembus tepi layar. */

.sc2-stv {
    display: grid;
    grid-template-columns: minmax(0, 344px) minmax(0, 1fr);
    align-items: stretch;
    margin-top: clamp(6px, 1vw, 16px);
    background: var(--panel);
    border: 1px solid var(--line);
}

/* ── Bilah tab tegak ── */

.sc2-stv__nav {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--ink);
    border-right: 1px solid var(--line);
    /* Bilah gulir disembunyikan; dipakai hanya saat bilahnya mendatar. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sc2-stv__nav::-webkit-scrollbar { display: none; }

.sc2-stv__tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    padding: 17px 20px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--dimmer);
    font-family: var(--mono);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .28s ease, color .28s ease;
}
.sc2-stv__tab:last-child { border-bottom: 0; }
.sc2-stv__tab:hover { background: rgba(242, 239, 234, .045); }
.sc2-stv__tab.is-active { background: var(--panel); color: var(--paper); }
.sc2-stv__tab:focus-visible { outline: 2px solid var(--amber); outline-offset: -3px; }

/* Garis penanda tab aktif, menempel di tepi yang bersebelahan dengan
   panel: di kiri saat bilahnya tegak, di bawah saat bilahnya mendatar. */
.sc2-stv__tab::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}
.sc2-stv__tab.is-active::before { transform: scaleX(1); }

/* Ikon layanan. Berkas PNG-nya sudah berbentuk lencana bulat berlatar
   amber, jadi tidak diberi kotak garis di sekelilingnya. Ikon garis dari
   kolom icon_svg tetap kebagian warna amber lewat `currentColor`. */
.sc2-stv__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--amber);
    opacity: .48;
    filter: grayscale(1);
    transition: opacity .28s ease, filter .28s ease;
}
.sc2-stv__ico img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sc2-stv__ico svg { width: 22px; height: 22px; }
.sc2-stv__tab:hover .sc2-stv__ico { opacity: .78; filter: grayscale(.3); }
.sc2-stv__tab.is-active .sc2-stv__ico { opacity: 1; filter: none; }

.sc2-stv__txt {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.sc2-stv__no {
    font: 500 9px/1 var(--mono);
    letter-spacing: .2em;
    color: var(--faint);
    transition: color .28s ease;
}
.sc2-stv__tab.is-active .sc2-stv__no { color: var(--amber); }
.sc2-stv__name {
    font-size: 14px;
    line-height: 1.28;
    letter-spacing: -.022em;
    font-weight: 500;
}

/* Panah kecil yang baru muncul saat tab disorot atau aktif. */
.sc2-stv__caret {
    flex: none;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--amber);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .28s ease, transform .28s ease;
}
.sc2-stv__caret svg { width: 15px; height: 15px; }
.sc2-stv__tab:hover .sc2-stv__caret { opacity: .55; transform: none; }
.sc2-stv__tab.is-active .sc2-stv__caret { opacity: 1; transform: none; }

/* ── Panel isi ── */

.sc2-stv__panels { display: flex; flex-direction: column; min-width: 0; }

.sc2-stv__panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
    padding: clamp(24px, 2.8vw, 46px);
}
.sc2-stv__panel[hidden] { display: none; }
.sc2-stv__panel:focus-visible { outline: 2px solid var(--amber); outline-offset: -3px; }

@media (prefers-reduced-motion: no-preference) {
    .sc2-stv__panel { animation: sc2-ptv-in .38s cubic-bezier(.22, 1, .36, 1) both; }
}

.sc2-stv__meta {
    margin: 0;
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--amber);
}
.sc2-stv__title {
    margin: 0;
    font-size: clamp(22px, 2.3vw, 31px);
    line-height: 1.1;
    letter-spacing: -.032em;
    font-weight: 500;
    color: var(--paper);
}
.sc2-stv__lead {
    margin: 0;
    /* Satu-satunya teks di panel ini yang lebar barisnya dibatasi: daftar
       manfaat di bawahnya sudah terpecah dua kolom, sedangkan kalimat
       pembuka ini akan jadi satu baris sepanjang 110 huruf di layar lebar
       kalau dibiarkan. */
    max-width: 86ch;
    font-size: clamp(14px, 1.3vw, 16.5px);
    line-height: 1.6;
    letter-spacing: -.016em;
    color: var(--dim);
}

.sc2-stv__rule {
    width: 100%;
    height: 1px;
    margin: 5px 0 2px;
    background: var(--line);
}
.sc2-stv__label {
    margin: 0;
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dimmer);
}

.sc2-stv__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px clamp(20px, 2.4vw, 40px);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sc2-stv__item {
    display: flex;
    gap: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--dim);
}
.sc2-stv__check {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    color: var(--amber);
}

.sc2-stv__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}

/* ── Penyesuaian layar ── */

@media (max-width: 900px) {
    /* Bilahnya berputar jadi baris mendatar di atas panel. */
    .sc2-stv { grid-template-columns: 1fr; }
    .sc2-stv__nav {
        flex-direction: row;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .sc2-stv__tab {
        flex: 1 0 190px;
        min-width: 190px;
        flex-direction: column;
        align-items: flex-start;
        gap: 11px;
        padding: 15px 17px 17px;
        border-bottom: 0;
        border-right: 1px solid var(--line);
        scroll-snap-align: start;
    }
    .sc2-stv__tab:last-child { border-right: 0; }
    .sc2-stv__tab::before {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: 2px;
        transform: scaleY(0);
        transform-origin: bottom;
    }
    .sc2-stv__tab.is-active::before { transform: scaleY(1); }
    .sc2-stv__caret { display: none; }
    .sc2-stv__list { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    /* Seluruh modul menembus tepi layar supaya bilahnya punya ruang gulir
       penuh. Sisa ruang di ujung dibuat lewat padding tab pertama dan
       terakhir, karena padding pada wadah bergulir tidak dihormati semua
       peramban di sisi kanannya. */
    .sc2-stv {
        margin-left: calc(var(--pad-x) * -1);
        margin-right: calc(var(--pad-x) * -1);
        border-left: 0;
        border-right: 0;
    }
    .sc2-stv__tab { flex: 0 0 auto; min-width: 166px; }
    .sc2-stv__tab:first-child { padding-left: var(--pad-x); min-width: calc(166px + var(--pad-x) - 17px); }
    .sc2-stv__tab:last-child { padding-right: var(--pad-x); min-width: calc(166px + var(--pad-x) - 17px); }
    .sc2-stv__ctas .sc2-btn { flex: 1 1 auto; justify-content: center; }
}

/* ─── Hero sinematik ───────────────────────────────────────────────── */

/* Satu layar penuh dengan latar video. Susunannya mengikuti konsep:
   penanda + judul menempel di atas, tombol dan kalimat penjelas berbagi
   baris di bawah, penunjuk gulir berdiri di tepi kanan, dan angka kunci
   duduk di bilah tipis yang menyatu dengan garis batas hero. */
.sc2-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;   /* svh: tidak ikut melompat saat bilah URL ponsel muncul */
    /* 66px = tinggi bilah navigasi tetap (chrome-v2.css) */
    padding: calc(66px + clamp(30px, 6vh, 76px)) var(--pad-x) 0;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

/* ── Lapisan latar ─────────────────────────────────────────────────── */

/* URUTAN GAMBAR HERO — jangan diubah jadi implisit lagi.
   Sebelumnya lapisan ini memakai `z-index: -1` di dalam `isolation: isolate`
   pada .sc2-hero, sementara .sc2-hero__inner tidak diberi z-index sama
   sekali. Susunan itu bergantung pada tebakan peramban: <video> di sini
   memakai `transform: scale()` + `filter`, jadi ia dipromosikan menjadi
   lapisan komposit tersendiri, dan pada sebagian Chrome ber-GPU lapisan itu
   tergambar DI ATAS elemen yang z-index-nya masih `auto`. Akibatnya judul,
   tombol, dan bilah angka hilang tertutup video, sementara penunjuk gulir
   (satu-satunya yang punya z-index positif) tetap terlihat.

   Sekarang keempat lapisannya bernomor tegas dan tidak ada nilai negatif:
     0 = latar (poster, video, tirai, kisi)
     1 = isi hero (penanda, judul, tombol, kalimat penjelas)
     2 = penunjuk gulir dan bilah angka kunci
   Dengan begitu urutannya tidak lagi bergantung pada kompositor. */
.sc2-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--ink);
}

/* Warna asli videonya sian terang; disamakan dulu ke abu lalu ditarik ke
   amber supaya menyatu dengan tema. Satu baris ini yang mengatur nadanya —
   ubah di sini kalau ingin lebih terang atau lebih netral. */
.sc2-hero__media {
    --hero-tint: grayscale(1) sepia(.62) hue-rotate(-14deg) saturate(1.5) brightness(.5) contrast(1.12);
}

/* Perlakuan yang sama dipakai poster dan video supaya pergantian keduanya
   tidak terlihat sebagai lompatan:

   - scale       : memperbesar komposisi sehingga bingkai dasbor HUD beserta
                   panel teks kecilnya terdorong keluar layar, dan tepi yang
                   melunak karena blur ikut terbuang.
   - blur        : melembutkan latar supaya judul putih di atasnya menonjol,
                   sekaligus membuat teks kecil bawaan template tidak terbaca.
   - --hero-tint : menyamakan warna sian video dengan amber tema. */
.sc2-hero__media {
    --hero-zoom: 1.22;
    --hero-blur: 2px;
}

/* Poster: satu bingkai diam dari video yang sama. Tampil seketika, dan
   tetap menjadi latar permanen bila video gagal dimuat, autoplay ditolak
   peramban, atau pengunjung meminta "kurangi gerak". */
.sc2-hero__poster {
    position: absolute;
    inset: 0;
    background: url('/images/hero-video-poster.jpg') center / cover no-repeat;
    filter: var(--hero-tint) blur(var(--hero-blur));
    transform: scale(var(--hero-zoom));
}

/* Video menyeberang menutup poster hanya setelah benar-benar berputar
   (kelas .is-live dipasang dari _hero.blade.php), jadi tidak ada kedipan
   hitam di awal. Menghilangnya dibuat cepat supaya saat pemutaran berhenti
   poster segera mengambil alih. */
.sc2-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .28s ease;
    transform: scale(var(--hero-zoom));
    filter: var(--hero-tint) blur(var(--hero-blur));
    pointer-events: none;
}
.sc2-hero__video.is-live { opacity: 1; transition: opacity 1.1s ease .3s; }

/* Tirai gelap — dua arah: dari kiri (tempat judul) dan dari atas-bawah
   (tempat navbar dan bilah angka). Tanpa ini teks putih akan bertabrakan
   dengan bagian terang animasinya. */
.sc2-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(11, 11, 13, .95) 0%, rgba(11, 11, 13, .78) 36%, rgba(11, 11, 13, .40) 66%, rgba(11, 11, 13, .58) 100%),
        linear-gradient(to bottom, rgba(11, 11, 13, .88) 0%, rgba(11, 11, 13, .10) 24%, rgba(11, 11, 13, .18) 54%, rgba(11, 11, 13, .93) 100%);
}

/* Kisi tipis khas terminal, memudar ke bawah. */
.sc2-hero__mesh {
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        linear-gradient(rgba(242, 239, 234, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 234, .05) 1px, transparent 1px);
    background-size: 76px 76px;
    -webkit-mask-image: radial-gradient(130% 88% at 50% 0%, #000 0%, transparent 74%);
    mask-image: radial-gradient(130% 88% at 50% 0%, #000 0%, transparent 74%);
}

/* ── Isi ───────────────────────────────────────────────────────────── */

.sc2-hero__inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(36px, 7vh, 88px);
    padding-bottom: clamp(24px, 3vh, 44px);
}

.sc2-hero__kicker { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sc2-hero__rule { flex: 1; height: 1px; background: var(--line); max-width: 120px; }

/* Judul memakai monospace — sama seperti label di seluruh situs, dan itu
   yang memberi hero nada "terminal" seperti pada konsep. */
.sc2-hero__h1 {
    margin: clamp(18px, 3vh, 38px) 0 0;
    font-family: var(--mono);
    font-size: clamp(29px, 5.2vw, 72px);
    line-height: 1.07;
    letter-spacing: -.035em;
    font-weight: 500;
    max-width: 18ch;
    color: var(--paper);
    text-shadow: 0 2px 26px rgba(11, 11, 13, .55);
}
/* Frasa beraksen selalu memulai barisnya sendiri, seperti pada konsep —
   judulnya jadi tumpukan baris pendek, bukan kalimat yang patah sembarangan. */
.sc2-hero__h1 .sc2-hl { display: block; color: var(--amber); }

.sc2-hero__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(20px, 4vw, 60px);
    flex-wrap: wrap;
}
.sc2-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.sc2-hero__sub {
    /* Cukup lebar untuk menampung tagline pendek dalam dua baris seimbang,
       dan tetap masuk akal kalau admin mengisinya dengan paragraf panjang. */
    flex: 0 1 52ch;
    margin: 0;
    text-align: right;
    /* Mencegah satu kata tersisa sendirian di baris terakhir. Peramban lama
       mengabaikannya dan pembungkusannya kembali seperti biasa. */
    text-wrap: balance;
    font-family: var(--mono);
    font-size: clamp(11.5px, 1vw, 13.5px);
    line-height: 1.85;
    color: var(--dim);
    text-shadow: 0 2px 18px rgba(11, 11, 13, .6);
}

/* ── Penunjuk gulir ────────────────────────────────────────────────── */

.sc2-hero__scroll {
    position: absolute;
    right: clamp(14px, 2vw, 30px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: var(--dimmer);
    transition: color .25s ease;
}
.sc2-hero__scroll span:first-child {
    writing-mode: vertical-rl;
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .36em;
    text-transform: uppercase;
}
.sc2-hero__scroll:hover { color: var(--amber); }
.sc2-hero__scroll-line {
    position: relative;
    width: 1px;
    height: 68px;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(242, 239, 234, .32), rgba(242, 239, 234, 0));
}
.sc2-hero__scroll-line::after {
    content: '';
    position: absolute;
    left: 0;
    width: 1px;
    height: 42%;
    background: var(--amber);
    animation: sc2-scroll-run 2.4s ease-in-out infinite;
}
@keyframes sc2-scroll-run {
    0%   { top: -46%; opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ── Bilah angka kunci ─────────────────────────────────────────────── */

/* Margin negatif membawanya melebar penuh sampai tepi layar, sementara
   isinya tetap sejajar dengan judul dan logo di navbar. */
.sc2-hero__meta {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(14px, 3vw, 40px);
    flex-wrap: wrap;
    margin: 0 calc(var(--pad-x) * -1);
    /* Padding kanan menyisakan ruang untuk tombol WhatsApp melayang
       (.sc-float di chrome-v2.css) yang menempel di sudut yang sama. */
    padding: clamp(13px, 1.5vw, 19px) clamp(var(--pad-x), 14vw, 200px) clamp(13px, 1.5vw, 19px) var(--pad-x);
    border-top: 1px solid var(--line);
    background: rgba(11, 11, 13, .5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.sc2-hero__facts { display: flex; align-items: center; gap: clamp(18px, 3vw, 46px); flex-wrap: wrap; }
.sc2-hero__fact { display: flex; align-items: baseline; gap: 9px; }
.sc2-hero__fact-num {
    font: 700 clamp(16px, 1.7vw, 23px)/1 var(--mono);
    letter-spacing: -.03em;
    color: var(--amber);
}
.sc2-hero__fact-label {
    font: 500 8.5px/1.4 var(--mono);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--faint);
}
.sc2-hero__trust {
    margin: 0;
    text-align: right;
    font: 500 9px/1.7 var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ── Layar sempit ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    /* Penunjuk gulir dilepas: ruang tepi kanan sudah dipakai teks. */
    .sc2-hero__scroll { display: none; }
}

@media (max-width: 900px) {
    .sc2-hero__h1 { max-width: 100%; }
    .sc2-hero__foot { flex-direction: column; align-items: stretch; gap: clamp(22px, 4vh, 34px); }
    /* Kalimat penjelas naik ke atas tombol dan kembali rata kiri. */
    .sc2-hero__sub { order: -1; flex: 1 1 auto; max-width: 54ch; text-align: left; }
    .sc2-hero__trust { flex: 1 1 100%; text-align: left; }

    /* Tombol WhatsApp melayang kini melebar hampir separuh layar, jadi ruang
       untuknya dipindah ke sisi bawah: teks berhenti di atas tombol, bukan
       menyisih ke kiri. */
    .sc2-hero__meta {
        padding-right: var(--pad-x);
        padding-bottom: clamp(54px, 10vw, 72px);
    }

    /* Tirai kiri dilunakkan: di layar sempit gradien menyamping menutupi
       hampir seluruh video, padahal teksnya sudah pindah ke bawah. */
    .sc2-hero__scrim {
        background:
            linear-gradient(100deg, rgba(11, 11, 13, .8) 0%, rgba(11, 11, 13, .5) 45%, rgba(11, 11, 13, .42) 100%),
            linear-gradient(to bottom, rgba(11, 11, 13, .9) 0%, rgba(11, 11, 13, .18) 26%, rgba(11, 11, 13, .55) 62%, rgba(11, 11, 13, .95) 100%);
    }
}

@media (max-width: 640px) {
    .sc2-hero { padding-top: calc(66px + 34px); }
    .sc2-hero__ctas .sc2-btn { flex: 1 1 100%; }
    .sc2-hero__facts { gap: 16px; width: 100%; justify-content: space-between; }
    .sc2-hero__fact { flex-direction: column; align-items: flex-start; gap: 4px; }
    .sc2-hero__fact-label { font-size: 7.5px; letter-spacing: .1em; }
    .sc2-hero__mesh { background-size: 52px 52px; }
    /* Layar sempit sudah memangkas banyak sendiri lewat object-fit: cover,
       jadi pembesaran tambahannya dikurangi. */
    .sc2-hero__media { --hero-zoom: 1.1; --hero-blur: 1.5px; }
}

/* Ponsel dimiringkan: tinggi layar tinggal sedikit, jadi hero dibiarkan
   setinggi isinya saja supaya tombol tidak terdorong keluar layar. */
@media (max-height: 620px) and (orientation: landscape) {
    .sc2-hero { min-height: auto; padding-top: calc(66px + 26px); }
    .sc2-hero__inner { gap: 26px; padding-bottom: 22px; }
    .sc2-hero__scroll { display: none; }
}

/* ─── Marquee logo (gambar) ─────────────────────────────────────────── */

/* Pita lencana sertifikasi menempel langsung di bawah hero — hero sudah
   punya garis bawah, jadi di sini cukup garis penutup di sisi bawah. */
.sc2-logostrip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.sc2-logos { overflow: hidden; }
@keyframes sc2-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sc2-logos__track { display: flex; width: max-content; align-items: stretch; animation: sc2-marquee 46s linear infinite; }
.sc2-logos:hover .sc2-logos__track { animation-play-state: paused; }
.sc2-logo {
    flex: none;
    display: grid;
    place-items: center;
    width: clamp(140px, 15vw, 190px);
    padding: 22px 26px;
    border-right: 1px solid var(--line);
    background: var(--ink);
    transition: background .3s ease;
}
.sc2-logo:hover { background: var(--panel); }
.sc2-logo img {
    max-width: 100%;
    max-height: 62px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Perlakuan siluet HANYA untuk logo klien. Berkas logo klien dibuat untuk
   latar terang, jadi dibalik jadi putih supaya terbaca di atas hitam.
   Lencana sertifikasi dikecualikan lewat :not() — kalau tidak, aturan
   :hover di sini (spesifisitas 0,2,1) akan mengalahkan .sc2-logo--cert img
   (0,1,1) dan membuat semua lencana memutih saat kursor lewat. */
.sc2-logo:not(.sc2-logo--cert) img {
    filter: brightness(0) invert(1) opacity(.62);
    transition: filter .35s ease;
}
.sc2-logo:not(.sc2-logo--cert):hover img { filter: brightness(0) invert(1) opacity(1); }
.sc2-logo span { font: 500 12px/1.3 var(--mono); letter-spacing: .1em; color: var(--dimmer); text-align: center; }

/* ─── Kartu bernomor (keunggulan, metodologi) ──────────────────────── */

.sc2-cards { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.sc2-card {
    position: relative;
    flex: 1 1 260px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 2.8vw, 38px) clamp(20px, 2vw, 30px);
    background: var(--ink);
    transition: background .3s ease;
}
.sc2-sec--panel .sc2-card { background: var(--panel); }
.sc2-card:hover { background: var(--raise); }

/* Garis amber tipis menyala dari kiri ke kanan saat kursor lewat. */
.sc2-card::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.sc2-card:hover::before { transform: scaleX(1); }

/* Nomor diikuti garis rambut — memberi ritme editorial pada tiap kartu. */
.sc2-card__num {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 12px/1 var(--mono);
    letter-spacing: .1em;
    color: var(--amber);
}
.sc2-card__num::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.sc2-card .sc2-h3 { margin: 18px 0 0; }
.sc2-card p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--dim); }
/* margin-top: auto — kaki ketiga kartu sejajar walau panjang teksnya beda. */
.sc2-card__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.sc2-card__chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* ─── Pita penutup yang ditengahkan ────────────────────────────────── */

.sc2-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: clamp(40px, 4.6vw, 68px) var(--pad-x) clamp(44px, 5vw, 74px);
    border-top: 1px solid var(--line);
}
.sc2-band__title {
    margin: 0;
    max-width: 26ch;
    font-size: clamp(18.5px, 2.25vw, 28px);
    line-height: 1.22;
    letter-spacing: -.024em;
    font-weight: 500;
    color: var(--paper);
}
.sc2-band__desc { max-width: 72ch; }
.sc2-band__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }

/* ─── Rel kartu mendatar (carousel sektor) ─────────────────────────

   --peek = berapa kartu yang terlihat sekaligus. Angka pecahan disengaja:
   kartu yang terpotong di tepi kanan adalah petunjuk bahwa daftarnya masih
   bisa digeser, tanpa perlu tulisan tambahan.

   Lebar kartunya dihitung dari 100vw dikurangi padding kiri saja, jadi
   relnya sengaja menembus batas container ke kanan sampai tepi layar. */

.sc2-rail {
    --peek: 4.5;
    --cgap: 14px;

    display: flex;
    gap: var(--cgap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad-x);
    padding: 2px var(--pad-x);
    /* Bilah gulir disembunyikan; menggeser tetap bisa lewat usap, roda
       mendatar, tombol panah, dan keyboard. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sc2-rail::-webkit-scrollbar { display: none; }

.sc2-scard {
    flex: 0 0 calc((100vw - var(--pad-x) - var(--peek) * var(--cgap)) / var(--peek));
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--ink);
    border: 1px solid var(--line);
    text-decoration: none;
    transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.sc2-scard:hover {
    background: var(--raise);
    border-color: rgba(245, 160, 27, .42);
    transform: translateY(-3px);
}

.sc2-scard__media {
    position: relative;
    display: block;
    aspect-ratio: 300 / 160;
    overflow: hidden;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.sc2-scard__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Foto stok sektor warnanya terang; diredupkan sedikit supaya tidak
       lebih menyala daripada isi kartunya sendiri. */
    opacity: .78;
    transition: opacity .3s ease, transform .5s ease;
}
.sc2-scard:hover .sc2-scard__media img { opacity: 1; transform: scale(1.04); }

.sc2-scard__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    padding: clamp(15px, 1.5vw, 21px);
}
.sc2-scard__title {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.26;
    letter-spacing: -.024em;
    font-weight: 500;
    color: var(--paper);
}
.sc2-scard__desc { font-size: 12.5px; line-height: 1.65; color: var(--dim); }
.sc2-scard__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    font: 500 10px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
    transition: gap .25s ease;
}
.sc2-scard:hover .sc2-scard__cta { gap: 13px; }

/* Tombol geser */
.sc2-rail__nav { display: flex; gap: 8px; }
.sc2-rail__btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--paper);
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background .25s ease, opacity .25s ease;
}
.sc2-rail__btn svg { width: 17px; height: 17px; }
.sc2-rail__btn:hover:not(:disabled) { color: var(--amber); border-color: rgba(245, 160, 27, .6); background: rgba(245, 160, 27, .08); }
.sc2-rail__btn:disabled { opacity: .3; cursor: default; }

@media (max-width: 900px) {
    /* Di layar sentuh usap sudah lebih alami daripada tombol. */
    .sc2-rail__nav { display: none; }
    .sc2-rail { --peek: 1.5; --cgap: 12px; }
}

/* ─── Tab produk (platform tab view) ───────────────────────────────

   Menggantikan rel kartu (carousel) lama. Bilah tab memakai wordmark
   produk; panel di bawahnya berisi judul, tagline, deskripsi, tangkapan
   layar, dan tombol aksi untuk produk yang sedang dipilih.

   Di layar sempit bilah tabnya digulir mendatar dan seluruh modulnya
   menembus tepi layar, supaya jelas daftarnya masih berlanjut. */

.sc2-ptv { margin-top: clamp(6px, 1vw, 16px); }

/* ── Bilah tab ── */

.sc2-ptv__tabs {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    background: var(--ink);
    border: 1px solid var(--line);
    border-bottom: 0;
    /* Bilah gulir disembunyikan; menggeser tetap bisa lewat usap, roda
       horizontal, dan tombol panah keyboard. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sc2-ptv__tabs::-webkit-scrollbar { display: none; }

.sc2-ptv__tab {
    position: relative;
    /* Basis tetap: di desktop kelima tab melar rata memenuhi baris, di
       ponsel lebarnya tetap dan barisnya jadi bisa digulir. */
    flex: 1 0 168px;
    min-width: 168px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    box-sizing: border-box;
    padding: 15px 18px 17px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line);
    color: var(--dimmer);
    font-family: var(--mono);
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    transition: background .28s ease, color .28s ease;
}
.sc2-ptv__tab:last-child { border-right: 0; }
.sc2-ptv__tab:hover { background: rgba(242, 239, 234, .045); }
.sc2-ptv__tab.is-active { background: var(--panel); }
.sc2-ptv__tab:focus-visible { outline: 2px solid var(--amber); outline-offset: -3px; }

/* Garis penanda tab aktif, duduk tepat di atas garis panel di bawahnya. */
.sc2-ptv__tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--amber);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .28s ease;
}
.sc2-ptv__tab.is-active::after { transform: scaleY(1); }

.sc2-ptv__idx {
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .2em;
    color: var(--faint);
    transition: color .28s ease;
}
.sc2-ptv__tab.is-active .sc2-ptv__idx { color: var(--amber); }

/* Wordmark langsung di atas latar hitam, tanpa keping putih. Kotaknya tetap
   berukuran seragam supaya tinggi semua tab sama, dan logo yang lebar (4:1)
   maupun yang hampir bujur sangkar muat tanpa menjebol tab. Logo rata kiri
   mengikuti indeks dan kategori di atas dan bawahnya. */
.sc2-ptv__chip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    /* Pengaman kedua: tanpa ini lebar asli berkas wordmark masih bisa
       ikut menentukan lebar tab di peramban yang memperhitungkannya. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    height: 56px;
    padding: 6px 0;
}

/* Perlakuan sama dengan pita logo klien: tab yang tidak aktif menampilkan
   siluet putih redup, dan warna asli baru keluar saat kursor lewat atau
   tab dipilih. Ukuran dikunci ke kotak, bukan ke ukuran asli berkas. */
.sc2-ptv__mark {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1);
    opacity: .62;
    transition: filter .28s ease, opacity .28s ease;
}
.sc2-ptv__tab:hover .sc2-ptv__mark,
.sc2-ptv__tab.is-active .sc2-ptv__mark { filter: none; opacity: 1; }

/* Logo bertinta hitam (kelas .is-ink-dark dipasang dari Blade setelah
   piksel berkasnya dicuplik) akan lenyap di atas latar gelap kalau warna
   aslinya ditampilkan apa adanya. invert() membalik terang-gelapnya dan
   hue-rotate(180deg) mengembalikan ronanya: hitam jadi putih, merah tetap
   merah, biru tetap biru. Bagian yang terang di berkas asli ikut menjadi
   gelap, tetapi pada wordmark hal itu jarang terjadi. */
.sc2-ptv__tab.is-ink-dark:hover .sc2-ptv__mark,
.sc2-ptv__tab.is-ink-dark.is-active .sc2-ptv__mark { filter: invert(1) hue-rotate(180deg); }

/* Cadangan kalau platform belum punya berkas logo. */
.sc2-ptv__markfallback {
    font: 600 14px/1 var(--mono);
    letter-spacing: -.02em;
    color: var(--dimmer);
    transition: color .28s ease;
}
.sc2-ptv__tab:hover .sc2-ptv__markfallback,
.sc2-ptv__tab.is-active .sc2-ptv__markfallback { color: var(--paper); }

.sc2-ptv__tabcat {
    font: 500 9px/1.4 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
    /* Dipangkas satu baris supaya tinggi semua tab tetap sama walau nama
       kategorinya panjang. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .28s ease;
}
.sc2-ptv__tab.is-active .sc2-ptv__tabcat { color: var(--dim); }

/* ── Panel isi ── */

.sc2-ptv__panels {
    background: var(--panel);
    border: 1px solid var(--line);
}

.sc2-ptv__panel {
    display: grid;
    /* Sisi gambar sengaja lebih sempit daripada sisi keterangan: tangkapan
       layarnya cuma pendukung, yang perlu terbaca duluan judul dan
       deskripsinya. */
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: clamp(280px, 22vw, 340px);
}
.sc2-ptv__panel[hidden] { display: none; }
.sc2-ptv__panel:focus-visible { outline: 2px solid var(--amber); outline-offset: -3px; }

@media (prefers-reduced-motion: no-preference) {
    .sc2-ptv__panel { animation: sc2-ptv-in .38s cubic-bezier(.22, 1, .36, 1) both; }
    @keyframes sc2-ptv-in {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: none; }
    }
}

/* Sisi gambar dibingkai seperti jendela aplikasi supaya tangkapan
   layarnya terbaca sebagai produk, bukan foto hiasan. */
.sc2-ptv__media {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--ink);
    border-right: 1px solid var(--line);
}
.sc2-ptv__chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.sc2-ptv__dots { display: inline-flex; flex: none; gap: 5px; }
.sc2-ptv__dots i { width: 7px; height: 7px; background: var(--line-strong); }
.sc2-ptv__dots i:first-child { background: var(--tone, var(--amber)); }
.sc2-ptv__path {
    min-width: 0;
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc2-ptv__frame {
    position: relative;
    flex: 1;
    min-height: 190px;
    overflow: hidden;
}
.sc2-ptv__shot { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Selubung menahan foto stok yang biru terang agar tidak lebih menyala
   dari isi panelnya sendiri, sekaligus menyapukan warna merek produk. */
.sc2-ptv__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--tone) 26%, transparent) 0%, transparent 62%),
        linear-gradient(to top, rgba(11, 11, 13, .74) 0%, rgba(11, 11, 13, .26) 55%, rgba(11, 11, 13, .44) 100%);
}

/* Belum ada tangkapan layar — kisi tenang bersemburat warna merek. */
.sc2-ptv__ph {
    position: absolute;
    inset: 0;
    display: block;
    background:
        radial-gradient(120% 90% at 50% 50%, color-mix(in srgb, var(--tone) 24%, transparent) 0%, transparent 68%),
        repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 34px);
}

/* Sisi keterangan */
.sc2-ptv__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: clamp(22px, 2.6vw, 40px);
}
.sc2-ptv__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
}
.sc2-ptv__no { color: var(--amber); }
.sc2-ptv__cat {
    padding: 6px 9px;
    border: 1px solid var(--line);
    color: var(--dim);
}

/* Nama produk sebagai teks di baris keterangan, menggantikan keping
   wordmark yang dulu berdiri di atas judul. */
.sc2-ptv__pname { color: var(--paper); }

/* Lebar baris tidak dibatasi: teksnya mengisi penuh kolomnya sendiri,
   dan lebar kolom itu yang sudah menjaga panjang barisnya tetap wajar. */
.sc2-ptv__tagline {
    margin: 0;
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.34;
    letter-spacing: -.024em;
    font-weight: 500;
    color: var(--paper);
}
.sc2-ptv__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--dim);
}
.sc2-ptv__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

/* ── Penyesuaian layar ── */

/* Layar sangat lebar: sejak batas 1280px dilepas, kolom keterangan jadi
   terlalu lapang untuk teks yang lebar barisnya tetap dibatasi. Sisi
   gambar diberi porsi lebih besar dan skala teksnya sedikit dinaikkan. */
@media (min-width: 1500px) {
    .sc2-ptv__panel {
        grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
        min-height: clamp(300px, 17vw, 350px);
    }
    .sc2-ptv__desc { font-size: 13.5px; }
}

@media (max-width: 1024px) {
    /* Gambar naik ke atas, keterangan di bawahnya. */
    .sc2-ptv__panel { grid-template-columns: 1fr; min-height: 0; }
    .sc2-ptv__media { border-right: 0; border-bottom: 1px solid var(--line); }
    .sc2-ptv__frame { aspect-ratio: 16 / 7; flex: none; min-height: 0; }
}

@media (max-width: 700px) {
    /* Seluruh modul menembus tepi layar: bilah tab jadi punya ruang gulir
       penuh dan panelnya tetap sejajar dengannya. */
    .sc2-ptv__tabs,
    .sc2-ptv__panels {
        margin-left: calc(var(--pad-x) * -1);
        margin-right: calc(var(--pad-x) * -1);
        border-left: 0;
        border-right: 0;
    }
    /* Lebar tab dikunci ke pecahan lebar layar lewat --ptab-peek, bukan ke
       isinya.

       Sebelumnya `flex: 0 0 auto` membuat lebar tab ditentukan oleh isi,
       dan isi terlebarnya adalah wordmark produk yang berkas aslinya
       852 px. Chrome mengabaikan lebar itu karena gambarnya diberi
       width: 100%, lalu jatuh ke min-width 152px. Safari iOS tetap
       memakainya, jadi tiap tab selebar logonya masing-masing: tidak
       seragam dan menjebol bilahnya.

       Basis pasti dari 100vw menyamakan keduanya. Bilah ini sudah
       menembus kedua tepi layar, jadi acuannya 100vw penuh. Ubah
       --ptab-peek kalau mau lebih banyak tab yang terlihat sekaligus. */
    .sc2-ptv__tabs { --ptab-peek: 1.5; }
    .sc2-ptv__tab {
        flex: 0 0 calc(100vw / var(--ptab-peek));
        width: calc(100vw / var(--ptab-peek));
        min-width: 0;
        max-width: none;
        padding: 14px 15px 16px;
    }
    /* Tab pertama dan terakhir tetap selebar yang lain. Sisipan tepi layar
       diambil dari paddingnya sendiri, dan karena box-sizing sudah
       border-box, lebar luarnya tidak ikut bertambah. */
    .sc2-ptv__tab:first-child { padding-left: var(--pad-x); }
    .sc2-ptv__tab:last-child { padding-right: var(--pad-x); }
    .sc2-ptv__chip { height: 50px; padding: 5px 0; }
    .sc2-ptv__frame { aspect-ratio: 16 / 9; }
    .sc2-ptv__ctas .sc2-btn { flex: 1 1 auto; justify-content: center; }
}

/* ─── Blok penutup (konsultasi gratis) ─────────────────────────────── */

.sc2-close { display: flex; flex-wrap: wrap; }
.sc2-close__main { flex: 1 1 460px; min-width: 300px; padding: clamp(44px, 5vw, 84px) var(--pad-x); }
.sc2-close__side {
    flex: 1 1 300px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--panel);
    border-left: 1px solid var(--line);
}
.sc2-close__fact { padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 32px); }
.sc2-close__fact + .sc2-close__fact { border-top: 1px solid var(--line); }
.sc2-close__fact dt { font: 500 9.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.sc2-close__fact dd { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--dim); }

/* ─── FAQ ──────────────────────────────────────────────────────────── */

.sc2-faq { border-top: 1px solid var(--line); }
.sc2-faq details { border-bottom: 1px solid var(--line); }
.sc2-faq summary {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 2vw, 26px);
    padding: clamp(18px, 2.2vw, 26px) clamp(6px, 1vw, 14px);
    cursor: pointer;
    list-style: none;
    transition: background .25s ease, padding-left .25s ease;
}
.sc2-faq summary::-webkit-details-marker { display: none; }
.sc2-faq summary:hover { background: var(--raise); padding-left: 20px; }
.sc2-faq__q { flex: 1; font-size: clamp(14px, 1.45vw, 17px); line-height: 1.48; letter-spacing: -.016em; color: var(--paper); }
.sc2-faq__sign { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); color: var(--amber); transition: transform .3s ease; }
.sc2-faq details[open] .sc2-faq__sign { transform: rotate(45deg); }
/* Tanpa kolom nomor, jawaban cukup sejajar dengan pertanyaannya. */
.sc2-faq__a { margin: 0; padding: 0 clamp(6px, 1vw, 14px) clamp(22px, 2.4vw, 30px); font-size: 12.5px; line-height: 1.8; color: var(--dim); max-width: 84ch; }

/* ─── Artikel ──────────────────────────────────────────────────────── */

/* Rasio 3:2 dikunci lewat aspect-ratio, bukan tinggi tetap, supaya
   thumbnail ikut menyesuaikan lebar layar tanpa gambar jadi gepeng. */
.sc2-art__thumb {
    flex: none;
    width: clamp(112px, 13vw, 190px);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color .3s ease;
}
.sc2-art__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sc2-row--art:hover .sc2-art__thumb { border-color: rgba(245, 160, 27, .45); }

/* Cadangan untuk peramban tanpa aspect-ratio (Safari < 15). */
@supports not (aspect-ratio: 1) {
    .sc2-art__thumb { height: clamp(75px, 8.7vw, 127px); }
}
.sc2-art__thumb--blank { display: grid; place-items: center; color: var(--amber); }
.sc2-art__main { flex: 2 1 340px; min-width: 260px; }
.sc2-art__cat { display: flex; align-items: center; gap: 12px; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.sc2-art__cat b { color: var(--amber); font-weight: 500; }
.sc2-art__title { margin: 10px 0 0; font-size: clamp(14px, 1.55vw, 18px); line-height: 1.38; letter-spacing: -.018em; color: var(--paper); }
.sc2-art__excerpt { flex: 1.4 1 260px; min-width: 220px; font-size: 12.5px; line-height: 1.75; color: var(--dim); }

/* ─── Kondisi kosong ───────────────────────────────────────────────── */

.sc2-empty { padding: clamp(40px, 5vw, 70px) 0; text-align: center; font: 500 11px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); border-top: 1px solid var(--line); }

/* ─── Penyesuaian layar kecil ──────────────────────────────────────── */

@media (max-width: 900px) {
    .sc2-close__side { border-left: 0; border-top: 1px solid var(--line); }
    .sc2-row__end { margin-left: 0; }
}

@media (max-width: 640px) {
    .sc2-row { gap: 12px; }
    .sc2-row__num { width: 38px; }
    .sc2-row--step .sc2-row__num { width: 46px; font-size: 24px; }
    .sc2-art__thumb { width: 96px; border-radius: 8px; }
    .sc2-row:hover, .sc2-faq summary:hover { padding-left: 12px; }
    .sc2-stat + .sc2-stat { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .sc2-logos__track,
    .sc2-blip::before,
    .sc2-hero__scroll-line::after { animation: none; }
    .sc2-btn--amber:hover { transform: none; }
}

/* Lencana sertifikasi tampil dengan warna aslinya — bentuk dan warna seal
   itu bagian dari identitas lembaga penerbitnya, jadi tidak disiluetkan
   seperti logo klien. Berkasnya bertransparansi dan dibiarkan begitu:
   tidak ada keping latar terang di belakangnya. */
.sc2-logo--cert img {
    filter: none;
    opacity: 1;
    max-height: 84px;
    background: none;
}
/* Lencana ini penanda kredibilitas, bukan tautan — tidak ada perubahan
   apa pun saat kursor lewat, baik pada gambar maupun pada petaknya. */
.sc2-logo--cert,
.sc2-logo--cert:hover { background: var(--ink); }

/* Dua lencana (C|EH dan C|HFI) hanya berupa tinta hitam di atas
   transparansi, jadi lenyap di atas panel hitam. Keduanya dijadikan siluet
   putih supaya wordmark-nya tetap terbaca tanpa mengubah berkas gambar.
   Kalau nanti ada berkas bertinta gelap lain, tambahkan namanya ke daftar
   $inkGelap di partials/home/_certifications.blade.php. */
.sc2-logo--cert.is-ink-dark img { filter: brightness(0) invert(1); }