/* ═══════════════════════════════════════════════════════════════════════
   SKYCYBER /platform — indeks platform, tema "Amber Terminal"
   ═══════════════════════════════════════════════════════════════════════
   Basisnya home-v2.css yang ikut dimuat di halaman ini: token warna,
   tipografi, tombol, tag, kerangka section, .sc2-hero, dan .sc2-close
   dipinjam dari sana. Berkas ini hanya menambah bentuk yang khas halaman
   indeks produk.

   RITMENYA sengaja tidak sama dengan dua halaman bersaudaranya:
     - Beranda memakai tab view: satu produk tampil, empat lainnya
       tersembunyi di balik bilah tab.
     - /layanan memakai katalog rekaman berpanel data.
     - Halaman ini memakai ritme papan produk: satu bilah warna yang
       memecah lima merek, lalu satu papan bento bergaris rambut yang
       menampung kelima kartu dalam ukuran berbeda dan bisa dipindai
       sekali lihat.

   WARNA MEREK. Tiap produk punya `color_hex` sendiri di basis data. Nilai
   itu dikirim ke sini sebagai triplet RGB (`--tone-rgb: 75, 100, 255`),
   bukan hex, supaya bisa dipakai dengan alpha lewat rgba() tanpa perlu
   color-mix() yang belum merata dukungannya. Amber tetap memimpin: warna
   merek hanya muncul sebagai garis tepi, titik, dan angka metrik, tidak
   pernah sebagai bidang besar.

   ATURAN PERFORMA sama dengan services-v2.css: tanpa `filter: blur()`,
   tanpa kanvas. Bilah navigasi fixed memakai backdrop-filter, jadi lapisan
   mahal di belakangnya membuat guliran tersendat.

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

/* ═══ 1 · HERO ═════════════════════════════════════════════════════════
   Kerangkanya .sc2-hero milik home-v2.css, sama dengan /tentang dan
   /layanan: satu kolom setinggi layar, penanda di atas, judul besar,
   tombol dan kalimat penjelas berdampingan di kaki, penunjuk gulir tegak
   di tepi kanan, bilah data menempel di tepi bawah.

   Yang khas halaman ini hanya isi lapisan latarnya: kisi tegak yang
   terbaca seperti kolom rak produk, lalu lima kolam cahaya di kaki hero,
   masing-masing memakai warna satu produk. Kolam itu yang membuat hero
   ini langsung berbeda dari hero /layanan yang seluruhnya amber. */

/* Kisi kolom: garis tegak 112px yang lebih tegas daripada garis mendatar,
   supaya latarnya terbaca sebagai rak, bukan kertas grafik. */
.pf-hx__grid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .085) 0 1px, transparent 1px 112px),
        repeating-linear-gradient(0deg,  rgba(242, 239, 234, .04)  0 1px, transparent 1px 112px),
        repeating-linear-gradient(90deg, rgba(242, 239, 234, .022) 0 1px, transparent 1px 28px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .7) 48%, rgba(0, 0, 0, .2) 78%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .7) 48%, rgba(0, 0, 0, .2) 78%, transparent 98%);
}

/* Lima kolam cahaya sewarna produk, berjajar di kaki hero dan saling
   menumpuk di tepinya sehingga terbaca sebagai satu spektrum, bukan lima
   noda terpisah. Nilai --t1 sampai --t5 dipasang dari Blade mengikuti
   urutan produk di basis data; kalau ada produk ditambah atau dinonaktifkan
   lewat /admin/platforms, warnanya ikut bergeser sendiri. Kalau produknya
   kurang dari lima, slot sisanya diisi amber oleh Blade. */
.pf-hx__spec {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(66%, 560px);
    background:
        radial-gradient(30% 74% at 10% 104%, rgba(var(--t1), .30), transparent 72%),
        radial-gradient(30% 74% at 30% 104%, rgba(var(--t2), .28), transparent 72%),
        radial-gradient(30% 74% at 50% 104%, rgba(var(--t3), .26), transparent 72%),
        radial-gradient(30% 74% at 70% 104%, rgba(var(--t4), .28), transparent 72%),
        radial-gradient(30% 74% at 90% 104%, rgba(var(--t5), .30), transparent 72%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 88%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 88%);
}

/* Kolam amber di belakang judul, supaya aksen utama situs tetap yang
   memimpin dan warna merek hanya jadi dasar di kaki hero. */
.pf-hx__glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(46% 44% at 16% 30%, rgba(245, 160, 27, .2), rgba(245, 160, 27, .05) 54%, transparent 78%),
        radial-gradient(40% 36% at 88% 16%, rgba(245, 160, 27, .08), transparent 74%);
}

/* Tirai: tepi atas pekat sebagai alas bilah navigasi, tepi bawah pekat
   sebagai alas bilah data, bagian tengah dilonggarkan supaya kisi dan
   kolam cahayanya tidak lenyap. */
.pf-hero .sc2-hero__scrim {
    background:
        linear-gradient(94deg, rgba(11, 11, 13, .84) 0%, rgba(11, 11, 13, .5) 34%, rgba(11, 11, 13, .06) 64%, rgba(11, 11, 13, .3) 100%),
        linear-gradient(to bottom, rgba(11, 11, 13, .84) 0%, rgba(11, 11, 13, .06) 26%, rgba(11, 11, 13, .2) 56%, rgba(11, 11, 13, .86) 100%);
}
@media (max-width: 900px) {
    .pf-hero .sc2-hero__scrim {
        background:
            linear-gradient(94deg, rgba(11, 11, 13, .62) 0%, rgba(11, 11, 13, .42) 46%, rgba(11, 11, 13, .36) 100%),
            linear-gradient(to bottom, rgba(11, 11, 13, .9) 0%, rgba(11, 11, 13, .14) 26%, rgba(11, 11, 13, .5) 62%, rgba(11, 11, 13, .92) 100%);
    }
}

/* Judul dua sampai tiga baris; 24ch menahannya patah di tempat yang sama
   pada kedua bahasa. */
.pf-hero .sc2-hero__h1 {
    font-size: clamp(29px, 4.4vw, 62px);
    max-width: 24ch;
}

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

/* ═══ 2 · BILAH SPEKTRUM ═══════════════════════════════════════════════
   Satu garis selebar layar yang terbagi lima, satu ruas per produk, dengan
   lebar yang sama. Fungsinya dua: menutup hero dengan tegas, dan
   memperkenalkan kode warna yang dipakai matriks dan rekaman di bawahnya.
   Gradasinya sendiri dirakit di Blade (hard stop per ruas), jadi jumlah
   ruasnya mengikuti jumlah produk aktif. */
.pf-rail {
    height: 3px;
    width: 100%;
}

/* ═══ 3 · PAPAN BENTO ══════════════════════════════════════════════════
   Inti halaman: lima kartu dalam satu papan bergaris rambut, tiap kartu
   langsung menuju halaman produknya.

   Susunan di layar lebar, 4 kolom x 9 baris satuan:

       a a c c        a = kartu 1, pendek melebar
       a a c c        c = kartu 3, kartu terbesar
       a a c c        b = kartu 5, tinggi melebar
       b b c c        d = kartu 4 dan e = kartu 2, keduanya sekotak
       b b c c
       b b d e
       b b d e
       b b d e
       b b d e

   Sambungan mendatar kiri (a|b) dan kanan (c|d e) sengaja tidak sejajar,
   itu yang membuatnya terbaca sebagai bento, bukan tabel. Slot mengikuti
   URUTAN produk di /admin/platforms (kartu ke-1 selalu slot a, ke-2 slot
   e, dst.), jadi menyusun ulang urutan di admin ikut memindahkan kartu.
   Produk ke-6 dan seterusnya ditempatkan otomatis di baris baru.

   Kartu besar (slot c dan b, kelas --lg) memuat kutipan uraian, tiga angka
   kunci, dan tangkapan layar produk sebagai latar berona merek. Kartu lain
   memuat satu angka kunci. Tinggi baris satuannya minmax(), jadi kalau
   isi sebuah kartu lebih tinggi dari jatah slotnya, barisnya tumbuh dan
   kartu lain ikut menyesuaikan, tidak ada yang terpotong.

   Amber tetap memimpin; warna merek muncul sebagai garis atas yang tumbuh
   saat kartu disentuh, kicker kategori, semburat sudut, dan rona
   tangkapan layar. Logo tampil sebagai siluet putih redup dan berwarna
   penuh saat disentuh, sama persis dengan bilah tab beranda. */

.pf-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(70px, auto);
    grid-template-areas:
        "a a c c"
        "a a c c"
        "a a c c"
        "b b c c"
        "b b c c"
        "b b d e"
        "b b d e"
        "b b d e"
        "b b d e";
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.pf-cell--1 { grid-area: a; }
.pf-cell--2 { grid-area: e; }
.pf-cell--3 { grid-area: c; }
.pf-cell--4 { grid-area: d; }
.pf-cell--5 { grid-area: b; }

.pf-cell {
    position: relative;
    /* Stacking context sendiri supaya z-index gambar latar dan isi kartu
       tidak bercampur dengan kartu tetangga. */
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 20px);
    min-width: 0;
    padding: clamp(18px, 2vw, 28px);
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    overflow: hidden;
    transition: background .3s ease;
}
.pf-cell:hover,
.pf-cell:focus-visible { background: var(--panel); }
.pf-cell:focus-visible { outline: 1px solid var(--amber); outline-offset: -1px; }

/* Garis warna merek yang tumbuh dari kiri di tepi atas kartu. */
.pf-cell::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background: rgb(var(--tone-rgb));
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
    z-index: 2;
}
.pf-cell:hover::before,
.pf-cell:focus-visible::before { transform: scaleX(1); }

/* Semburat warna merek di sudut kanan bawah, hanya saat disentuh. */
.pf-cell__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(58% 52% at 100% 100%, rgba(var(--tone-rgb), .2), transparent 72%);
    opacity: 0;
    transition: opacity .45s ease;
}
.pf-cell:hover .pf-cell__glow,
.pf-cell:focus-visible .pf-cell__glow { opacity: 1; }

/* Tangkapan layar produk di kartu besar. Gambarnya diabukan lalu diberi
   rona merek lewat lapisan mix-blend-mode: color, dan dipudarkan ke arah
   kiri atas supaya teks di atasnya tetap bersih. Saat disentuh sedikit
   menguat dan membesar; transform, bukan filter, jadi murah. */
.pf-cell__art {
    position: absolute;
    right: -4%;
    bottom: -6%;
    width: 64%;
    height: 66%;
    z-index: 0;
    isolation: isolate;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top left, #000 18%, rgba(0, 0, 0, .55) 45%, transparent 78%);
    mask-image: linear-gradient(to top left, #000 18%, rgba(0, 0, 0, .55) 45%, transparent 78%);
    opacity: .3;
    transform: scale(1) translateZ(0);
    transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.pf-cell__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
}
.pf-cell__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(var(--tone-rgb));
    mix-blend-mode: color;
}
.pf-cell:hover .pf-cell__art,
.pf-cell:focus-visible .pf-cell__art { opacity: .5; transform: scale(1.04) translateZ(0); }

/* Isi kartu berdiri di atas gambar latar dan semburat. */
.pf-cell__top,
.pf-cell__mark,
.pf-cell__body,
.pf-cell__k { position: relative; z-index: 1; }

/* Baris atas: nomor, kicker kategori, panah di ujung kanan. */
.pf-cell__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.pf-cell__n {
    flex: none;
    padding-top: 10px;
    font: 700 12px/1 var(--mono);
    letter-spacing: .08em;
    color: var(--amber);
}
/* --tone-text-rgb, bukan --tone-rgb: warna merek versi terang yang sudah
   dijamin mencapai kontras 4.5 : 1 di atas panel. Perhitungannya di
   platform/index.blade.php, jadi warna apa pun yang dipilih admin tetap
   terbaca. */
.pf-cell__c {
    min-width: 0;
    padding-top: 11px;
    font: 500 9px/1.5 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgb(var(--tone-text-rgb, var(--tone-rgb)));
}
.pf-cell__go {
    flex: none;
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(242, 239, 234, .2);
    color: var(--amber);
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.pf-cell__go svg { width: 15px; height: 15px; transition: transform .25s ease; }
.pf-cell:hover .pf-cell__go,
.pf-cell:focus-visible .pf-cell__go {
    border-color: var(--amber);
    background: var(--amber);
    color: var(--on-amber);
}
.pf-cell:hover .pf-cell__go svg,
.pf-cell:focus-visible .pf-cell__go svg { transform: translateX(2px); }

/* Wordmark tanpa keping putih. Ukurannya dikunci ke kotak, bukan ke ukuran
   asli berkas: logo Bitbait hampir bujur sangkar (700 x 748) sementara
   empat lainnya memanjang (852 x 251), dan semuanya harus muat di kotak
   setinggi ini. Rata kiri mengikuti nomor dan kalimat di bawahnya. */
.pf-cell__mark {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-width: 0;
    overflow: hidden;
}
.pf-cell--lg .pf-cell__mark { height: 52px; }
.pf-cell__mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1);
    opacity: .62;
    transition: filter .3s ease, opacity .3s ease;
}
.pf-cell:hover .pf-cell__mark img,
.pf-cell:focus-visible .pf-cell__mark img { filter: none; opacity: 1; }
/* Logo bertinta hitam (kelas .is-ink-dark dari sc_ink_gelap() di Blade):
   invert() membalik terang-gelapnya, hue-rotate(180deg) mengembalikan
   ronanya. Hitam jadi putih, merah tetap merah, biru tetap biru. */
.pf-cell.is-ink-dark:hover .pf-cell__mark img,
.pf-cell.is-ink-dark:focus-visible .pf-cell__mark img { filter: invert(1) hue-rotate(180deg); }
.pf-cell__markfallback {
    font: 600 15px/1 var(--mono);
    letter-spacing: -.02em;
    color: var(--dimmer);
    transition: color .3s ease;
}
.pf-cell:hover .pf-cell__markfallback,
.pf-cell:focus-visible .pf-cell__markfallback { color: var(--paper); }

/* Kalimat posisi, plus kutipan uraian di kartu besar. */
.pf-cell__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.pf-cell__t {
    font-size: 14.5px;
    line-height: 1.45;
    letter-spacing: -.014em;
    color: var(--paper);
}
.pf-cell--lg .pf-cell__t {
    max-width: 26ch;
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.02em;
}
.pf-cell__d {
    max-width: 54ch;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--dim);
}

/* Angka kunci menempel di kaki kartu. Kisi auto-fit: tiga angka berjajar
   di kartu besar yang lebar, turun jadi dua-satu di layar sempit. */
.pf-cell__k {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 14px 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.pf-cell__kv {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.pf-cell__kv b {
    font: 600 16px/1 var(--mono);
    letter-spacing: -.02em;
    color: var(--paper);
    white-space: nowrap;
}
.pf-cell--lg .pf-cell__kv b { font-size: 19px; }
.pf-cell__kv small {
    font: 500 8.5px/1.4 var(--mono);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--faint);
}

@media (max-width: 1080px) {
    /* Dua kolom: kartu 1 dan 5 bertumpuk di kiri, kartu besar 3 menjulang
       di kanan sepanjang keduanya, lalu 4 dan 2 berdampingan di bawah. */
    .pf-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(190px, auto);
        grid-template-areas:
            "a c"
            "b c"
            "d e";
    }
}
@media (max-width: 640px) {
    /* Satu kolom mengikuti urutan produk; slot bento dilepas. */
    .pf-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        grid-template-areas: none;
    }
    .pf-cell--1, .pf-cell--2, .pf-cell--3, .pf-cell--4, .pf-cell--5 { grid-area: auto; }
    .pf-cell { padding: 20px 18px 22px; gap: 14px; }
    .pf-cell--lg .pf-cell__t { font-size: 17px; }
    .pf-cell__art { width: 74%; height: 58%; }
}

/* ═══ 4 · ALASAN ═══════════════════════════════════════════════════════
   Sel bergaris berjajar: kenapa memakai platform yang dibangun sendiri.
   Bentuknya sengaja polos (nomor, judul pendek, satu kalimat) karena
   berdiri tepat setelah papan bento yang padat gambar dan angka.
   Jumlah kolomnya dibaca dari --pf-why-n yang dipasang Blade sesuai
   jumlah poin, jadi menambah atau mengurangi poin tidak menyentuh CSS. */

.pf-why {
    display: grid;
    grid-template-columns: repeat(var(--pf-why-n, 4), minmax(0, 1fr));
    border-top: 1px solid var(--line);
    margin-top: clamp(24px, 3vw, 40px);
}
.pf-why__cell {
    padding: clamp(24px, 2.6vw, 34px) clamp(18px, 2vw, 28px) clamp(24px, 2.6vw, 34px) 0;
}
.pf-why__cell + .pf-why__cell {
    padding-left: clamp(18px, 2vw, 28px);
    border-left: 1px solid var(--line);
}
.pf-why__n {
    display: block;
    font: 700 11px/1 var(--mono);
    letter-spacing: .16em;
    color: var(--amber);
}
.pf-why__t {
    margin: 16px 0 0;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.3;
    letter-spacing: -.02em;
    font-weight: 500;
    color: var(--paper);
}
.pf-why__d {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.72;
    color: var(--dim);
}

@media (max-width: 900px) {
    .pf-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-why__cell { padding-right: clamp(16px, 3vw, 26px); }
    .pf-why__cell:nth-child(odd) { padding-left: 0; border-left: 0; }
    .pf-why__cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
    .pf-why { grid-template-columns: minmax(0, 1fr); }
    .pf-why__cell { padding: 22px 0; border-left: 0; padding-left: 0; }
    .pf-why__cell + .pf-why__cell { border-left: 0; border-top: 1px solid var(--line); }
}

/* ═══ 5 · GERAK DIKURANGI ══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .pf-cell,
    .pf-cell::before,
    .pf-cell__glow,
    .pf-cell__art,
    .pf-cell__go,
    .pf-cell__go svg,
    .pf-cell__mark img,
    .pf-cell__markfallback { transition: none; }
    .pf-cell:hover .pf-cell__art,
    .pf-cell:focus-visible .pf-cell__art { transform: none; }
    .pf-cell:hover .pf-cell__go svg,
    .pf-cell:focus-visible .pf-cell__go svg { transform: none; }
}