/* ═══════════════════════════════════════════════════════════════════════
   SKYCYBER /layanan — indeks layanan, tema "Amber Terminal"
   ═══════════════════════════════════════════════════════════════════════
   Basisnya home-v2.css yang ikut dimuat di halaman ini: token warna,
   tipografi, tombol, tag, kerangka section, .sc2-rows, dan .sc2-faq
   dipinjam dari sana. Berkas ini hanya menambah bentuk yang khas halaman
   indeks: panel direktori di hero, bilah komitmen, lembar rekaman per
   layanan, daftar pemilihan, dan alur kerja mendatar.

   Ritmenya sengaja berbeda dari /layanan/penetration-testing. Halaman
   detail beritme dokumen teknis (kartu ruang lingkup, rel metodologi
   tegak, pratinjau laporan); halaman ini beritme katalog: satu rekaman
   per layanan, bergantian gelap dan panel, dengan rel kiri yang menempel
   saat digulir.

   ATURAN PERFORMA sama dengan pentest-v2.css: tanpa `filter: blur()`,
   tanpa kanvas. Bilah navigasi fixed memakai backdrop-filter, jadi lapisan
   mahal di belakangnya membuat guliran tersendat. Animasi di sini hanya
   menyentuh opacity, transform, background, dan box-shadow.

   Semua kelas berawalan "sv-" dan hidup di dalam .sc2.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · HERO ═════════════════════════════════════════════════════════
   Kerangkanya .sc2-hero milik home-v2.css, sama persis dengan hero
   /tentang: satu kolom setinggi layar, penanda di atas, judul besar,
   tombol dan kalimat penjelas berdampingan di kaki, penunjuk gulir tegak
   di tepi kanan, dan bilah data menempel di tepi bawah. Karena kerangka
   itu dipinjam utuh, perilaku responsifnya tidak perlu ditulis ulang.

   Yang ditulis di sini hanya isi lapisan latarnya. /tentang menaruh arsir
   dan kolam cahaya utamanya di sisi kanan atas; halaman ini menariknya ke
   kiri atas, tepat di belakang judul, dengan kisi yang sedikit lebih rapat
   dan arsir yang mencondong ke arah berlawanan, supaya dua halaman
   bersaudara ini tidak terbaca sebagai satu gambar yang diulang.

   Ketiga lapisan berdiri di dalam .sc2-hero__media (z-index 0), lalu
   .sc2-hero__scrim menutup di atasnya. Tidak ada `filter: blur()` di sini,
   sesuai aturan performa di kepala berkas: semua kesan lembut datang dari
   gradasi dan mask-image. */

/* Kisi dua tingkat (96px mayor, 24px minor) dengan titik amber di tiap
   simpul 192px. Memudar ke bawah supaya kaki hero bersih di belakang
   bilah data. */
.sv-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 96px),
        repeating-linear-gradient(0deg,  rgba(242, 239, 234, .055) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .022) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(0deg,  rgba(242, 239, 234, .018) 0 1px, transparent 1px 24px);
    background-size: 192px 192px, auto, auto, auto, auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .78) 44%, rgba(0, 0, 0, .26) 74%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .78) 44%, rgba(0, 0, 0, .26) 74%, transparent 97%);
}

/* Arsir diagonal di sisi kanan, memudar ke kiri: mengisi bagian layar yang
   tidak ditempati teks. Sudutnya +45deg, kebalikan dari arsir /tentang. */
.sv-hx__hatch {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(52vw, 660px);
    background: repeating-linear-gradient(45deg, rgba(242, 239, 234, .075) 0 1px, transparent 1px 11px);
    -webkit-mask-image: linear-gradient(75deg, transparent 2%, rgba(0, 0, 0, .7) 46%, #000 100%);
    mask-image: linear-gradient(75deg, transparent 2%, rgba(0, 0, 0, .7) 46%, #000 100%);
}

/* Dua kolam cahaya amber. Yang utama duduk di tengah kanan, bukan di kanan
   atas seperti /tentang: judul halaman ini hanya dua baris, jadi bagian
   tengah hero perlu sesuatu yang mengisinya, dan sisi kanan adalah satu-
   satunya zona yang tidak ditempati teks. Yang kedua jauh lebih redup di
   sudut kiri atas, di belakang penanda. Perhentian bertahap pada gradasi
   radial sudah memberi tepi selembut blur tanpa lapisan raster tambahan. */
.sv-hx__glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(52% 50% at 74% 44%, rgba(245, 160, 27, .21), rgba(245, 160, 27, .06) 52%, transparent 78%),
        radial-gradient(40% 38% at 5% 7%, rgba(245, 160, 27, .1), transparent 72%);
}

/* Baris terpanjang di antara kedua bahasa adalah "Comprehensive
   cybersecurity" (27 huruf); 27ch menjaganya tetap satu baris sehingga
   judul patah tepat sebelum frasa beraksen, bukan di tengah frasa. */
.sv-hero .sc2-hero__h1 {
    font-size: clamp(29px, 4.4vw, 62px);
    max-width: 27ch;
}

/* Scrim beranda disetel untuk video yang ramai, jadi terlalu pekat untuk
   pattern yang tenang: kisi, arsir, dan kolam cahayanya nyaris lenyap.
   Di sini tirainya dilonggarkan. Tepi atas tetap pekat sebagai alas bilah
   navigasi dan tepi bawah sebagai alas bilah data; bagian tengah kiri
   sengaja dibiarkan tipis supaya cahaya amber di belakang judul terlihat. */
.sv-hero .sc2-hero__scrim {
    background:
        linear-gradient(96deg, rgba(11, 11, 13, .86) 0%, rgba(11, 11, 13, .52) 32%, rgba(11, 11, 13, .04) 62%, rgba(11, 11, 13, .26) 100%),
        linear-gradient(to bottom, rgba(11, 11, 13, .82) 0%, rgba(11, 11, 13, .04) 26%, rgba(11, 11, 13, .06) 58%, rgba(11, 11, 13, .8) 100%);
}
@media (max-width: 900px) {
    /* Teks memenuhi lebar layar, jadi tirai menyamping tidak perlu sepekat
       itu dan justru harus lebih rata supaya seluruh baris terbaca sama. */
    .sv-hero .sc2-hero__scrim {
        background:
            linear-gradient(96deg, rgba(11, 11, 13, .6) 0%, rgba(11, 11, 13, .4) 46%, rgba(11, 11, 13, .34) 100%),
            linear-gradient(to bottom, rgba(11, 11, 13, .88) 0%, rgba(11, 11, 13, .12) 26%, rgba(11, 11, 13, .46) 62%, rgba(11, 11, 13, .9) 100%);
    }
}

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

/* ═══ 2 · BILAH KOMITMEN ═══════════════════════════════════════════════
   Empat janji kerja, bukan angka. Halaman detail sudah memakai bilah
   angka; di sini yang relevan bagi pengunjung yang masih memilih adalah
   cara kami bekerja. */

.sv-band__wrap { background: var(--panel); border-bottom: 1px solid var(--line); }
.sv-band {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    padding-inline: var(--pad-x);
    background: var(--panel);
}
.sv-band__item {
    flex: 1 1 calc(25% - 1px);
    /* 210px: dua sel masih muat berdampingan di ponsel 360px setelah
       dikurangi --pad-x, jadi bilahnya tetap dua kolom. */
    min-width: 210px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(18px, 2.2vw, 26px) clamp(14px, 1.6vw, 22px);
    outline: 1px solid var(--line);
    background: var(--panel);
    transition: background .25s ease;
}
.sv-band__item:hover { background: var(--ink); }
.sv-band__ico { flex: none; display: grid; place-items: center; color: var(--amber); }
.sv-band__ico svg { width: clamp(20px, 2.2vw, 24px); height: clamp(20px, 2.2vw, 24px); }
.sv-band__txt { flex: 1; min-width: 0; }
.sv-band__t {
    display: block;
    font-size: clamp(12.5px, 1.15vw, 14px);
    letter-spacing: -.012em;
    color: var(--paper);
}
.sv-band__d {
    display: block;
    margin-top: 6px;
    font: 500 9px/1.4 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ═══ 3 · REKAMAN LAYANAN ══════════════════════════════════════════════
   Susunannya mengikuti konsep: satu kolom teks berdampingan dengan satu
   panel data, dan sisinya bertukar tiap rekaman supaya daftarnya punya
   ritme. Pemisah antar rekaman cukup garis rambut, tanpa selang-seling
   warna latar, jadi kelimanya terbaca sebagai satu daftar.

   Kolom kedua adalah penampung gambar, sama seperti konsep. Selama foto
   layanannya belum ada, isinya pelat kosong; lihat .sv-shot di bawah. */

.sv-recs { border-top: 1px solid var(--line); }

.sv-rec {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(24px, 3.2vw, 56px);
    align-items: stretch;
    padding: clamp(32px, 4vw, 62px) var(--pad-x);
    scroll-margin-top: 82px;
}
/* Garis pemisah hanya di antara rekaman: garis penutup section sudah
   digambar .sc2-sec sendiri, jadi tanpa ini tepi bawahnya jadi 2px. */
.sv-rec + .sv-rec { border-top: 1px solid var(--line); }

/* Rekaman genap: panel pindah ke kiri. Penempatannya lewat grid, bukan
   urutan DOM, jadi pembaca layar dan urutan tab tetap teks dulu. */
.sv-rec--flip .sv-rec__main { grid-column: 2; grid-row: 1; }
.sv-rec--flip .sv-shot { grid-column: 1; grid-row: 1; }

.sv-rec__main {
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 1.8vw, 21px);
    min-width: 0;
}

/* Baris pembuka: nomor, garis, lalu penanda di ujung kanan. */
.sv-rec__lede { display: flex; align-items: center; gap: 14px; }
.sv-rec__n {
    flex: none;
    font: 700 11px/1 var(--mono);
    letter-spacing: .14em;
    color: var(--amber);
}
.sv-rec__rule { flex: 1; height: 1px; background: var(--line); }

.sv-rec__head { display: flex; align-items: center; gap: 16px; }
.sv-rec__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(242, 239, 234, .18);
    background: var(--panel);
    color: var(--amber);
    transition: border-color .3s ease;
}
.sv-rec:hover .sv-rec__ico { border-color: rgba(245, 160, 27, .45); }
.sv-rec__ico img { display: block; width: 27px; height: 27px; object-fit: contain; }
.sv-rec__ico svg { width: 25px; height: 25px; }

.sv-rec__title { min-width: 0; }
.sv-rec__name {
    margin: 0;
    font-size: clamp(20px, 2.5vw, 31px);
    line-height: 1.06;
    letter-spacing: -.034em;
    font-weight: 500;
    color: var(--paper);
}
/* Kerangka acuan yang dipakai layanan ini. Label yang sama muncul di
   panel direktori pada hero, jadi pengunjung mengenalinya kembali. */
.sv-rec__std {
    display: block;
    margin-top: 9px;
    font: 500 9px/1.4 var(--mono);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--faint);
}

.sv-rec__lead {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(13px, 1.15vw, 14.5px);
    line-height: 1.78;
    color: var(--dim);
}

/* Daftar manfaat. Satu kolom, tanpa kotak dan tanpa garis per butir:
   yang dibutuhkan hanya centang dan kalimatnya. */
.sv-ben {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sv-ben li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 12.5px;
    line-height: 1.66;
    color: rgba(242, 239, 234, .76);
}
.sv-ben__tick { flex: none; margin-top: 3px; color: var(--amber); }
.sv-ben__tick svg { width: 13px; height: 13px; }

/* Nama produk sebagai label, bukan kartu. Kartu produk lengkap dengan
   keterangannya ada di halaman detail layanan. */
.sv-rec__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
}
.sv-rec__toolsl {
    margin-right: 4px;
    font: 700 8.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--faint);
}

/* margin-top:auto mendorong tombol ke dasar kolom, jadi tingginya
   bertemu dengan kaki panel di sebelahnya. */
.sv-rec__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
}

/* ─── Penampung gambar ──────────────────────────────────────────────
   Sisi kanan rekaman ganjil dan sisi kiri rekaman genap, mengisi tinggi
   kolom teks di sebelahnya persis seperti konsep. Foto layanan belum ada
   di repositori, jadi yang tampil sekarang pelat kosong: kisi teknis
   samar dengan ikon layanan di tengah. Begitu berkasnya ditaruh di
   public/images/services/shots/, <img> menggantikannya tanpa perubahan
   gaya apa pun. */

.sv-shot {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    min-width: 0;
    min-height: clamp(230px, 26vw, 360px);
    overflow: hidden;
    border: 1px solid var(--line);
    background:
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .03) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg, rgba(242, 239, 234, .03) 0 1px, transparent 1px 48px),
        var(--panel);
    transition: border-color .3s ease;
}
.sv-rec:hover .sv-shot { border-color: rgba(242, 239, 234, .22); }

/* Foto mengisi seluruh bidang; potongannya diambil dari tengah. */
.sv-shot__img {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pelat kosong: kotak bergaris dengan ikon layanan yang diredupkan, jadi
   terbaca sebagai tempat gambar, bukan sebagai lambang. */
.sv-shot__ph {
    display: grid;
    place-items: center;
    width: clamp(64px, 6.5vw, 86px);
    height: clamp(64px, 6.5vw, 86px);
    border: 1px solid var(--line);
    background: rgba(11, 11, 13, .5);
    color: rgba(245, 160, 27, .5);
    opacity: .7;
    transition: opacity .3s ease;
}
.sv-rec:hover .sv-shot__ph { opacity: 1; }
.sv-shot__ph img {
    display: block;
    width: clamp(30px, 3vw, 40px);
    height: clamp(30px, 3vw, 40px);
    object-fit: contain;
    opacity: .55;
}
.sv-shot__ph svg { width: clamp(28px, 2.8vw, 36px); height: clamp(28px, 2.8vw, 36px); }

@media (max-width: 900px) {
    .sv-rec { grid-template-columns: minmax(0, 1fr); }
    /* Penempatan kolom dilepas, jadi urutannya kembali ke urutan DOM:
       teks dulu, panel di bawahnya, sama untuk rekaman ganjil dan genap. */
    .sv-rec__main,
    .sv-rec--flip .sv-rec__main,
    .sv-shot,
    .sv-rec--flip .sv-shot { grid-column: 1; grid-row: auto; }
    .sv-rec__cta { margin-top: 4px; }
}

/* ═══ 4 · TABEL PERBANDINGAN ═══════════════════════════════════════════
   Katalog di atas menjelaskan tiap layanan satu per satu; tabel ini
   menaruh kelimanya berdampingan supaya bisa dibaca sekali lihat. Tanpa
   garis vertikal: pemisah kolomnya cukup dari ruang, sesuai bahasa
   visual halaman yang lain. Di layar sempit tiap baris berubah menjadi
   kartu bertumpuk, jadi tidak ada geser mendatar. */

.sv-cmp {
    margin-top: clamp(6px, 1vw, 12px);
    border: 1px solid var(--line);
    background: var(--panel);
}
.sv-cmp__t {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
/* Judul tabel hanya untuk pembaca layar: isinya sudah tertulis di h2. */
.sv-cmp__cap,
.sv-cmp__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.sv-cmp__t thead th {
    padding: 15px clamp(14px, 1.4vw, 20px);
    border-bottom: 1px solid var(--line);
    font: 700 9px/1.4 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dimmer);
    white-space: nowrap;
}
.sv-cmp__t tbody tr { transition: background .25s ease; }
.sv-cmp__t tbody tr:hover { background: var(--raise); }
.sv-cmp__t tbody tr + tr th,
.sv-cmp__t tbody tr + tr td { border-top: 1px solid var(--line-soft); }

.sv-cmp__t tbody th,
.sv-cmp__t tbody td {
    padding: clamp(15px, 1.7vw, 20px) clamp(14px, 1.4vw, 20px);
    vertical-align: top;
    font-size: 12.5px;
    line-height: 1.66;
    font-weight: 400;
    color: var(--dim);
}
.sv-cmp__t tbody th {
    padding-left: calc(clamp(14px, 1.4vw, 20px) + 26px);
    text-indent: -26px;
    font-size: 13.5px;
    letter-spacing: -.016em;
    color: var(--paper);
}
.sv-cmp__n {
    display: inline-block;
    width: 26px;
    /* text-indent menurun ke inline-block, dan indent gantung di sel akan
       terpakai dua kali kalau tidak dinolkan di sini. */
    text-indent: 0;
    font: 700 9.5px/1.66 var(--mono);
    letter-spacing: .1em;
    color: rgba(245, 160, 27, .55);
}
.sv-cmp__t tbody tr:hover .sv-cmp__n { color: var(--amber); }
.sv-cmp__dur {
    font: 500 11px/1.6 var(--mono);
    letter-spacing: .06em;
    color: rgba(242, 239, 234, .78);
    white-space: nowrap;
}
.sv-cmp__go { width: 1%; text-align: right; }
.sv-cmp__go a {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-strong);
    color: var(--amber);
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.sv-cmp__go a:hover {
    border-color: var(--amber);
    background: rgba(245, 160, 27, .1);
    transform: translateX(3px);
}
.sv-cmp__go svg { flex: none; width: 15px; height: 15px; }
.sv-cmp__golabel { display: none; }

/* Di bawah 880px tabelnya dibongkar jadi kartu: label kolom pindah ke
   dalam sel lewat data-l, jadi tidak ada satu pun kolom yang hilang. */
@media (max-width: 940px) {
    .sv-cmp { border: 0; background: none; }
    /* Tabelnya sendiri ikut jadi blok: kalau tetap display:table, lebar
       minimum kolomnya masih dihitung dan barisnya melebar melewati layar. */
    .sv-cmp__t,
    .sv-cmp__t tbody,
    .sv-cmp__t tbody tr,
    .sv-cmp__t tbody th,
    .sv-cmp__t tbody td { display: block; width: auto; }
    .sv-cmp__t thead { display: none; }

    .sv-cmp__t tbody tr {
        margin-top: 12px;
        border: 1px solid var(--line);
        background: var(--panel);
        padding: 4px clamp(14px, 3vw, 20px) 14px;
    }
    .sv-cmp__t tbody tr:first-child { margin-top: 0; }
    .sv-cmp__t tbody tr + tr th,
    .sv-cmp__t tbody tr + tr td { border-top: 0; }

    .sv-cmp__t tbody th {
        padding: 16px 0 14px;
        text-indent: 0;
        border-bottom: 1px solid var(--line);
        font-size: 15px;
    }
    .sv-cmp__t tbody td {
        display: grid;
        grid-template-columns: minmax(0, 108px) minmax(0, 1fr);
        gap: 4px 14px;
        padding: 11px 0;
        border-bottom: 1px solid var(--line-soft);
    }
    .sv-cmp__t tbody td::before {
        content: attr(data-l);
        font: 500 8.5px/1.8 var(--mono);
        letter-spacing: .18em;
        color: var(--faint);
    }
    /* Kolom tautan tidak punya label, jadi ia keluar dari pola dua kolom
       di atas. Selektornya disamakan bobotnya dengan aturan td di atas,
       kalau tidak sel kosong bekas label ikut mendorongnya ke kanan. */
    .sv-cmp__t tbody td.sv-cmp__go {
        display: block;
        width: auto;
        padding: 16px 0 2px;
        border-bottom: 0;
        text-align: left;
    }
    .sv-cmp__t tbody td.sv-cmp__go::before { content: none; }
    .sv-cmp__t tbody td.sv-cmp__go a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        height: auto;
        padding: 13px 15px;
        font: 500 10px/1 var(--mono);
        letter-spacing: .16em;
        text-transform: uppercase;
    }
    .sv-cmp__t tbody td.sv-cmp__go a:hover { transform: none; }
    .sv-cmp__golabel { display: block; }
}

/* ═══ 5 · PEMILIHAN ════════════════════════════════════════════════════
   Baris situasi, bukan baris produk: pengunjung mengenali keadaannya lalu
   dibawa ke layanan yang menjawabnya. Kerangkanya memakai .sc2-row dari
   home-v2.css, hanya isinya yang khas halaman ini. */

.sv-pick__need { flex: 2 1 340px; min-width: 260px; }
.sv-pick__q {
    display: block;
    font-size: clamp(13.5px, 1.4vw, 16.5px);
    line-height: 1.5;
    letter-spacing: -.018em;
    color: var(--paper);
}
.sv-pick__svc {
    flex: 1 1 220px;
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 10px/1.4 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--amber);
}
.sv-pick__svc::before { content: ''; flex: none; width: 14px; height: 1px; background: rgba(245, 160, 27, .5); }

/* ═══ 6 · ALUR KERJA ═══════════════════════════════════════════════════
   Empat langkah mendatar dengan rel penghubung di atas nomor. Sengaja
   mendatar: rel metodologi di halaman pentest tegak, jadi dua halaman
   tidak memakai bentuk yang sama untuk hal yang berbeda. */

.sv-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.sv-stepc {
    position: relative;
    padding: clamp(22px, 2.6vw, 32px) clamp(18px, 2vw, 26px) clamp(24px, 2.8vw, 34px);
    background: var(--panel);
    transition: background .3s ease;
}
.sv-stepc:hover { background: var(--raise); }
/* Rel mendatar: garis tipis di kepala tiap sel, terisi amber sampai
   sepertiga awal supaya arah bacanya jelas. */
.sv-stepc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(242, 239, 234, .1);
}
.sv-stepc::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--amber);
    transition: width .5s ease;
}
.sv-stepc:hover::after { width: 100%; }
.sv-stepc__head { display: flex; align-items: center; gap: 12px; }
.sv-stepc__n {
    font: 700 clamp(20px, 2.2vw, 30px)/.9 var(--mono);
    letter-spacing: -.02em;
    color: rgba(245, 160, 27, .32);
    transition: color .3s ease;
}
.sv-stepc:hover .sv-stepc__n { color: var(--amber); }
.sv-stepc__ico { flex: none; display: grid; place-items: center; color: rgba(242, 239, 234, .5); transition: color .3s ease; }
.sv-stepc:hover .sv-stepc__ico { color: var(--amber); }
.sv-stepc__ico svg { width: 20px; height: 20px; }
.sv-stepc__t {
    margin: 16px 0 0;
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.28;
    letter-spacing: -.024em;
    font-weight: 500;
    color: var(--paper);
}
.sv-stepc__d {
    margin: 11px 0 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--dim);
}

/* ═══ 7 · PENUTUP ══════════════════════════════════════════════════════
   Belahan dua: ajakan di kiri, kanal kontak langsung di kanan. Blok
   penutup beranda memakai kolom fakta (.sc2-close), halaman pentest
   memakai penampung gambar; di sini yang paling berguna bagi pengunjung
   yang masih memilih adalah jalur bicara yang konkret. */

.sv-close { position: relative; overflow: hidden; }
.sv-close__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 62% at 88% 8%, rgba(245, 160, 27, .13), transparent 68%),
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .03) 0 1px, transparent 1px 96px);
}
.sv-close__grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(26px, 3.4vw, 60px);
    align-items: center;
}
.sv-close__main { flex: 1.3 1 420px; min-width: 290px; }
.sv-close__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 34px); }

.sv-chs { flex: 1 1 330px; min-width: 280px; border: 1px solid var(--line); background: var(--ink); }
.sv-chs__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--line);
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    color: rgba(242, 239, 234, .56);
}
.sv-chs__bar b { font-weight: 500; letter-spacing: .14em; color: var(--amber); }
.sv-ch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--paper);
    text-decoration: none;
    transition: background .25s ease, padding-left .25s ease;
}
.sv-ch:last-child { border-bottom: 0; }
.sv-ch:hover { background: var(--panel); padding-left: 26px; }
.sv-ch__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(242, 239, 234, .18);
    color: var(--amber);
    transition: border-color .25s ease, background .25s ease;
}
.sv-ch:hover .sv-ch__ico { border-color: rgba(245, 160, 27, .5); background: rgba(245, 160, 27, .07); }
.sv-ch__ico svg { width: 17px; height: 17px; }
.sv-ch__txt { flex: 1; min-width: 0; }
.sv-ch__k {
    display: block;
    font: 500 9px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
}
.sv-ch__v {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    letter-spacing: -.01em;
    color: var(--paper);
    overflow-wrap: anywhere;
}
.sv-ch__go { flex: none; color: var(--amber); display: grid; place-items: center; transition: transform .25s ease; }
.sv-ch__go svg { width: 15px; height: 15px; }
.sv-ch:hover .sv-ch__go { transform: translateX(4px); }

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

@media (prefers-reduced-motion: reduce) {
    .sv-stepc::after { transition: none; }
}