/* =========================================================================
   PT SSBI - sistem desain sisi publik
   -------------------------------------------------------------------------
   Ditulis tangan, tanpa Bootstrap. Halaman publik hanya memakai sedikit pola
   tata letak, sehingga mengirim kerangka CSS lengkap ke setiap pengunjung
   justru bekerja melawan target performa di ponsel kelas menengah - yang
   merupakan mayoritas pengunjung situs ini. Panel admin tetap memakai
   Bootstrap, di mana komponen form dan tabelnya benar-benar menghemat waktu.

   Versi kedua. Yang pertama seragam: tiap bagian memakai bentuk yang sama -
   garis tipis, kartu putih, satu paragraf pengantar - sehingga tak ada yang
   menonjol dan halaman terbaca seperti dokumen. Di sini irama sengaja
   berganti (foto lebar, kisi rapat, pita gelap) dan teks dipangkas supaya
   mata punya tempat beristirahat.
   ========================================================================= */

/* --- Font ---------------------------------------------------------------- */

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/jakarta-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/jakarta-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Token --------------------------------------------------------------- */

:root {
    /*
     * Logo SSBI berwarna merah dan biru. Biru tua di sini sudah biru sejak
     * awal, jadi yang perlu berubah hanya aksennya: amber diganti merah logo.
     *
     * Biru logo sebenarnya hsl(240°) - nyaris ungu. Sempat dicoba mendorong
     * seluruh bidang gelap ke rona itu, dan hasilnya buruk: navy berubah
     * menjadi indigo menyala dan seluruh netral ikut berkabut ungu. Rona
     * biru situs karena itu dibiarkan di 212°, tetap terbaca sebagai biru
     * yang sama dengan logo tanpa menyilaukan pada bidang seluas satu layar.
     *
     * Merah dipakai hemat - garis, angka, satu tombol - persis seperti
     * proporsinya di logo.
     */
    --navy-950: #061626;
    --navy-900: #0b2545;
    --navy-800: #16395f;
    --blue-700: #0f5ea8;
    --blue-600: #1a78d0;
    --blue-300: #8fc0ee;
    --blue-100: #e7f0f9;

    /* Merah aksen. Yang -600 untuk tombol (putih di atasnya lolos AA),
       yang -500 untuk garis dan ikon yang bukan teks. */
    --red-600: #ce0e16;
    --red-500: #ed1c24;
    --red-300: #ff5a5f;
    --red-100: #fde8e9;

    /* Kuning bukan warna merek; ia hanya penanda semantik tenggat dekat. */
    --amber-100: #fdf3e2;
    --amber-700: #96631a;

    --ink: #101b28;
    --ink-soft: #43536a;
    --muted: #6b7d92;
    --line: #e3e9f0;
    --line-soft: #f0f4f8;
    --bg: #ffffff;
    --bg-soft: #f5f8fb;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;

    --shadow-sm: 0 1px 2px rgba(11, 37, 69, .05), 0 2px 6px rgba(11, 37, 69, .04);
    --shadow: 0 2px 6px rgba(11, 37, 69, .05), 0 12px 28px rgba(11, 37, 69, .07);
    --shadow-lg: 0 24px 60px rgba(11, 37, 69, .16);

    --step--1: clamp(.82rem, .79rem + .12vw, .88rem);
    --step-0: clamp(.95rem, .92rem + .17vw, 1.05rem);
    --step-1: clamp(1.08rem, 1.02rem + .3vw, 1.28rem);
    --step-2: clamp(1.3rem, 1.16rem + .68vw, 1.75rem);
    --step-3: clamp(1.62rem, 1.34rem + 1.35vw, 2.5rem);
    --step-4: clamp(2.05rem, 1.55rem + 2.4vw, 3.5rem);

    --gutter: clamp(1.15rem, .8rem + 1.6vw, 2.5rem);
    --section-y: clamp(3.4rem, 2.3rem + 4.4vw, 6.5rem);
    --measure: 62ch;

    --shell: 1200px;
    --header-h: 74px;
}

/* --- Dasar --------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
 * `display: none` bawaan peramban untuk [hidden] datang dari lembar gaya UA,
 * sehingga kalah oleh `display` apa pun yang disetel komponen. Bilah tab
 * wilayah (display: flex) sempat tetap terlihat meski sudah disembunyikan
 * lewat skrip. Aturan ini menutup seluruh kasus itu sekaligus.
 */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: var(--step-0);
    line-height: 1.62;
    font-feature-settings: 'cv11', 'ss01';
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    margin: 0 0 .55em;
    line-height: 1.12;
    letter-spacing: -.025em;
    font-weight: 800;
    color: var(--navy-900);
    text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--blue-700);
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}

a:hover { color: var(--blue-600); }

img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; }
li { margin-bottom: .3em; }

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2rem 0;
}

:focus-visible {
    outline: 3px solid var(--blue-600);
    outline-offset: 2px;
    border-radius: 3px;
}

::selection {
    background: var(--blue-100);
    color: var(--navy-900);
}

/* --- Tata letak ---------------------------------------------------------- */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.shell--narrow { max-width: 860px; }

.section {
    padding-block: var(--section-y);
}

/*
 * Bidang abu lembut sebelumnya benar-benar rata - satu warna selebar layar
 * tanpa apa pun di dalamnya selain kartu. Pada layar besar bidang seluas itu
 * terbaca sebagai ruang yang belum dikerjakan, bukan sebagai jeda.
 *
 * Yang ditambahkan sengaja nyaris tak terlihat: satu cahaya biru di sudut
 * bawah-kiri, dan kisi titik 22px pada opasitas .055 yang memudar sebelum
 * mencapai teks. Tekstur yang seragam sampai ke tepi akan bersaing dengan
 * isinya; yang memudar hanya memberi arah pada bidangnya.
 *
 * Bidang PUTIH sengaja dibiarkan putih. Pergantian putih dan abu itulah yang
 * memisahkan satu bagian dari bagian berikutnya - memberi hiasan pada
 * keduanya justru menghapus batas itu, dan kartu putih kehilangan kontrasnya.
 */
.section--soft {
    position: relative;
    background-color: var(--bg-soft);
    /* Cahaya ditaruh sebagai background-image milik bagiannya sendiri, bukan
       sebagai pseudo-elemen yang menjorok keluar. Alasannya satu: menahan
       jorokan itu butuh `overflow: hidden`, dan itu akan mematikan
       `position: sticky` pada kartu pendamping di dalamnya. */
    background-image: radial-gradient(38rem 26rem at 6% 106%, rgba(26, 120, 208, .08), transparent 68%);
}

.section--soft::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(11, 37, 69, .055) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(76% 58% at 88% 2%, #000, transparent 70%);
    mask-image: radial-gradient(76% 58% at 88% 2%, #000, transparent 70%);
}

/* Isi bagian naik di atas teksturnya. */
.section--soft > * {
    position: relative;
    z-index: 1;
}

.section--navy {
    background: var(--navy-900);
    color: #c4d6e8;
}

.section--navy h2,
.section--navy h3,
.section--navy h4 { color: #fff; }

.section--tight { padding-block: calc(var(--section-y) * .58); }

.section-head {
    max-width: 56ch;
    margin-bottom: clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head p:last-child { margin-bottom: 0; }

/* Judul bagian dengan pranala di sisi kanan: menghemat satu baris tombol. */
.section-head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    max-width: none;
}

.section-head--row > div { max-width: 52ch; }
.section-head--row h2 { margin-bottom: 0; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--blue-700);
    margin-bottom: .85rem;
}

.eyebrow::before {
    content: '';
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--red-500);
}

.section--navy .eyebrow { color: var(--red-300); }

.lede {
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: var(--measure);
}

.section--navy .lede { color: #a9c1d8; }

.grid {
    display: grid;
    gap: clamp(1rem, .6rem + 1.4vw, 1.6rem);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.stack > * + * { margin-top: 1rem; }

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-2); margin-top: 1.9em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.6em; }
.prose > :first-child { margin-top: 0; }

/* --- Tombol -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .82rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease,
        transform .18s ease, box-shadow .18s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--blue-700);
    border-color: var(--blue-700);
    color: #fff;
    box-shadow: 0 6px 18px rgba(15, 94, 168, .26);
}

.btn--primary:hover {
    background: var(--navy-800);
    border-color: var(--navy-800);
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 94, 168, .3);
}

.btn--accent {
    background: var(--red-600);
    border-color: var(--red-600);
    color: #fff;
    box-shadow: 0 6px 18px rgba(206, 14, 22, .32);
}

.btn--accent:hover {
    background: var(--red-500);
    border-color: var(--red-500);
    color: #fff;
}

.btn--ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--navy-900);
}

.btn--ghost:hover {
    border-color: var(--navy-900);
    background: var(--navy-900);
    color: #fff;
}

.btn--onnavy {
    background: transparent;
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

.btn--onnavy:hover {
    background: #fff;
    border-color: #fff;
    color: var(--navy-900);
}

.btn--sm { padding: .5rem 1.05rem; }
.btn--block { width: 100%; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: var(--step--1);
    text-decoration: none;
}

.link-arrow::after {
    content: '→';
    transition: transform .18s ease;
}

.link-arrow:hover::after { transform: translateX(4px); }

/* --- Header -------------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--navy-900);
    color: #fff;
    padding: .7rem 1.1rem;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus { left: 0; color: #fff; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.site-header[data-stuck='true'] {
    border-bottom-color: var(--line);
    box-shadow: 0 6px 24px rgba(11, 37, 69, .06);
}

.site-header__bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: var(--navy-900);
    margin-right: auto;
}

/* Logo asli menggantikan ubin "SSBI" buatan sendiri. Ukurannya 44px: di
   bawah itu cincin teks pada logo berubah jadi noda, bukan tulisan. */
.brand__logo {
    width: 44px;
    height: 44px;
    flex: none;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 800; font-size: 1.02rem; letter-spacing: -.015em; }

.brand__sub {
    font-size: .68rem;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.nav {
    display: flex;
    align-items: center;
    gap: .1rem;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .55rem .85rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.nav__link:hover { background: var(--bg-soft); color: var(--navy-900); }

.nav__link[aria-current],
.nav__group[data-open='true'] > .nav__link {
    color: var(--navy-900);
    background: var(--blue-100);
}

.nav__link svg { transition: transform .18s ease; }
.nav__group[data-open='true'] .nav__link svg { transform: rotate(180deg); }

.nav__group { position: relative; }

/* Panel menu: dua kolom dengan keterangan singkat. Tanpa keterangan, daftar
   sepuluh pranala memaksa pengunjung menebak isi tiap halaman. */
.nav__panel {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    width: max-content;
    max-width: min(92vw, 620px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .75rem;
    display: none;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: .15rem;
}

.nav__group[data-open='true'] .nav__panel { display: grid; }

/*
 * Jembatan tak terlihat menutup celah .5rem antara tombol dan panel. Celah
 * itu bukan bagian dari elemen mana pun, jadi begitu kursor melintasinya
 * `mouseleave` menutup panelnya sebelum sempat diklik - menu terlihat hilang
 * tepat ketika hendak dituju.
 *
 * Pseudo-elemen ini anak dari panel, dan mouseenter/mouseleave mengikuti
 * susunan DOM, bukan letak di layar. Melintasinya karena itu tetap terhitung
 * berada di dalam grup.
 */
.nav__panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-.5rem - 2px);
    height: calc(.5rem + 2px);
}

.nav__panel a {
    display: block;
    padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-weight: 700;
    color: var(--navy-900);
    text-decoration: none;
    line-height: 1.35;
}

.nav__panel a span {
    display: block;
    font-weight: 500;
    font-size: .78rem;
    color: var(--muted);
    margin-top: .1rem;
}

.nav__panel a:hover { background: var(--bg-soft); color: var(--blue-700); }

.header__actions {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.lang-switch {
    display: inline-flex;
    gap: .1rem;
    padding: .15rem;
    border-radius: 999px;
    background: var(--bg-soft);
}

.lang-switch a {
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--muted);
    text-decoration: none;
}

.lang-switch a[aria-current='true'] { background: var(--navy-900); color: #fff; }

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    padding: 0;
    place-items: center;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: var(--navy-900);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(4px); }

.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { transform: rotate(-45deg) translateY(-1px); }

@media (max-width: 1000px) {
    .nav-toggle { display: grid; }

    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        padding: .7rem var(--gutter) 1.3rem;
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
    }

    .nav[data-open='true'] { display: flex; }

    .nav__link { padding: .75rem .5rem; font-size: .98rem; border-radius: var(--radius-sm); }
    .nav__group[data-open='true'] > .nav__link { background: transparent; }

    .nav__panel {
        position: static;
        display: grid;
        grid-template-columns: 1fr;
        border: 0;
        box-shadow: none;
        padding: 0 0 .5rem .85rem;
        max-width: none;
        border-left: 2px solid var(--line);
        margin-left: .5rem;
    }

    .nav__panel::before { display: none; }
    .nav__panel a { padding: .55rem .5rem; }
    .nav__panel a span { display: none; }
}

@media (max-width: 560px) {
    .brand__sub { display: none; }
    .header__actions .btn { display: none; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
    position: relative;
    /* Tanpa gradien radial statis. Cahaya hero kini datang dari lingkaran
       aurora yang bergerak - lapisan diam di sini justru menenggelamkannya. */
    background: linear-gradient(158deg, var(--navy-950), var(--navy-900) 52%, var(--navy-800));
    color: #dce8f4;
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(75% 75% at 65% 25%, #000, transparent);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(3rem, 2rem + 4.5vw, 6rem);
    display: grid;
    gap: clamp(2.2rem, 1rem + 3.5vw, 4rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
}

@media (max-width: 940px) {
    .hero__inner { grid-template-columns: 1fr; }
}

.hero h1 {
    color: #fff;
    font-size: var(--step-4);
    line-height: 1.04;
    margin-bottom: .45em;
    max-width: 15ch;
}

.hero__lede {
    font-size: var(--step-1);
    line-height: 1.55;
    color: #a9c3dc;
    max-width: 46ch;
    margin-bottom: 2rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .9rem .4rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #c6dbef;
    margin-bottom: 1.5rem;
}

.hero__badge .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red-500);
    box-shadow: 0 0 0 4px rgba(237, 28, 36, .22);
}

/* Foto utama dengan kartu kecil yang menimpanya. Kartu itu menaruh satu
   fakta konkret tepat di sebelah gambar, bukan di blok statistik terpisah. */
.hero__media {
    position: relative;
    isolation: isolate;
    /*
     * Perspektif dipasang di sini, bukan di .hero__stage. Kalau elemen yang
     * sama memegang `perspective` dan `rotate`, titik hilangnya ikut berputar
     * dan kemiringannya terlihat seperti geser datar, bukan seperti kartu.
     */
    perspective: 1100px;
}

/*
 * Panggung 3D. `preserve-3d` membuat foto, chip, dan tag berada di satu ruang
 * yang sama, sehingga masing-masing bisa diberi kedalaman sendiri lewat
 * --depth dan bergeser dengan laju berbeda saat panggungnya dimiringkan.
 * Itulah yang membuat gerakannya terbaca sebagai kartu bertumpuk, bukan
 * sebagai satu gambar datar yang digoyang.
 */
.hero__stage {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--tilt-s, 1));
    /* Kembali ke posisi datar perlahan; mengikuti kursor harus hampir seketika. */
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.hero__media[data-tilting] .hero__stage { transition-duration: .12s; }

/* Kilau yang mengikuti kursor, di atas foto tetapi di bawah kartu kecil. */
.hero__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-lg);
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(420px circle at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 42%, transparent 66%);
}

.hero__media[data-tilting] .hero__stage::after { opacity: 1; }

.hero__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
    object-fit: cover;
    aspect-ratio: 4 / 5;
}

.hero__stage::before {
    content: '';
    position: absolute;
    inset: auto -14px -14px auto;
    width: 62%;
    height: 62%;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, .2);
    z-index: -1;
    transform: translateZ(-60px);
}

.hero__tag {
    position: absolute;
    left: -20px;
    bottom: -22px;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.15rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-lg);
    max-width: 88%;
}

.hero__tag svg { color: var(--blue-700); flex: none; }

.hero__tag strong {
    display: block;
    color: var(--navy-900);
    font-size: .95rem;
    line-height: 1.2;
}

.hero__tag span {
    font-size: .74rem;
    color: var(--muted);
    font-weight: 600;
}

@media (max-width: 940px) {
    .hero__media img { aspect-ratio: 16 / 10; }
    .hero__stage::before { display: none; }
    .hero__tag { left: 12px; }

    /* Tanpa penunjuk presisi panggungnya tak pernah miring, jadi kedalaman
       hanya menyisakan efek sampingnya: kedua kartu terdorong keluar dari
       titik tengah. Dinolkan supaya tata letaknya persis seperti semula. */
    .hero__media { perspective: none; }
    .hero__tag,
    .hero__chip { --depth: 0px; --depth-fix: 1; }
}

/* --- Statistik ----------------------------------------------------------- */

/* Pita angka menumpang di batas hero dan bagian berikutnya supaya tidak
   menjadi satu bagian penuh sendiri - cukup satu baris, bukan satu layar. */
.stats-band {
    background: linear-gradient(to bottom, var(--navy-800) 50%, var(--bg) 50%);
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.stat {
    padding: clamp(1.15rem, .9rem + 1vw, 1.8rem) clamp(1rem, .8rem + 1vw, 1.6rem);
    border-left: 1px solid var(--line-soft);
}

.stat:first-child { border-left: 0; }

@media (max-width: 720px) {
    .stat { border-left: 0; border-top: 1px solid var(--line-soft); }
    .stat:first-child { border-top: 0; }
}

.stat__value {
    display: block;
    font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
    font-weight: 800;
    color: var(--navy-900);
    letter-spacing: -.04em;
    line-height: 1.05;
}

.stat__value::after {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--red-500);
    margin: .55rem 0 .5rem;
}

.stat__label {
    font-size: var(--step--1);
    color: var(--muted);
    font-weight: 600;
    line-height: 1.35;
}

/* --- Kartu --------------------------------------------------------------- */

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.3rem, 1rem + .8vw, 1.8rem);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.card--link:hover {
    border-color: transparent;
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.card__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--blue-100);
    color: var(--blue-700);
    margin-bottom: 1rem;
}

.card h3 { font-size: var(--step-1); margin-bottom: .55rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--blue-700); }

.card p {
    color: var(--ink-soft);
    font-size: var(--step--1);
    line-height: 1.55;
    margin-bottom: .9rem;
}

.card p:last-child { margin-bottom: 0; }

/*
 * Kartu dengan ikon di samping, bukan di atasnya. Dipakai untuk daftar
 * sertifikasi: judulnya pendek, jadi menaruh ikon di atas hanya menambah
 * tinggi tanpa menambah keterbacaan.
 *
 * Sebelumnya bentuk ini ditulis sebagai lima gaya sebaris di dalam view, dan
 * di sanalah jarak judul-ke-keterangan sempat tertulis .25rem - terlalu rapat
 * dan tidak terlihat oleh siapa pun yang membaca berkas CSS.
 */
.card--row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.card--row__body { min-width: 0; }
.card--row .card__icon { margin-bottom: 0; flex: none; }
.card--row h3 { font-size: var(--step-0); margin-bottom: .4rem; }
.card--row .card__meta { margin-bottom: .6rem; }
.card--row p { margin: 0; font-size: var(--step--1); }

/*
 * Sebagian butir hanya membawa nama - Company Profile memang tidak
 * menguraikannya, dan menuliskan keterangan sendiri berarti mengarang. Kartu
 * seperti itu disejajarkan di tengah supaya ikonnya tidak menggantung di
 * bawah satu baris teks.
 */
.card--row h3:last-child { margin-bottom: 0; }
.card--row:not(:has(p)) { align-items: center; }

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .9rem;
    font-size: var(--step--1);
    color: var(--muted);
}

/*
 * SVG sebaris duduk pada garis alas teks. Karena tinggi ikon lebih besar
 * daripada tinggi huruf kecil, ia tampak terangkat - terlihat jelas pada
 * kartu kantor di Peta Bisnis, di mana ikon telepon dan surel melayang di
 * atas angkanya. Tiap butir dijadikan inline-flex supaya ikon disejajarkan
 * ke tengah teks, bukan ke garis alasnya.
 */
.card__meta > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.card__meta svg { flex: none; }

/* Ubin lini bisnis: nomor sebagai jangkar visual, teks satu-dua baris. */
.tile {
    position: relative;
    display: block;
    padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    text-decoration: none;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tile::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--red-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}

.tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: transparent;
}

.tile:hover::before { transform: scaleX(1); }

.tile__num {
    display: block;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--red-500);
    margin-bottom: 1.6rem;
}

.tile__icon { color: var(--blue-700); margin-bottom: .9rem; }

.tile h3 {
    font-size: var(--step-1);
    margin-bottom: .55rem;
    color: var(--navy-900);
}

.tile p {
    margin: 0;
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--ink-soft);
}

/* --- Media --------------------------------------------------------------- */

.media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-soft);
}

.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media--4x5 img { aspect-ratio: 4 / 5; }
.media--4x3 img { aspect-ratio: 4 / 3; }
.media--16x9 img { aspect-ratio: 16 / 9; }
.media--wide img { aspect-ratio: 21 / 9; }
.media--square img { aspect-ratio: 1 / 1; }

/* Susunan gambar-dan-teks. Sisi gambar dapat ditukar agar dua bagian
   berurutan tidak berbentuk sama. */
.split {
    display: grid;
    gap: clamp(1.8rem, 1rem + 3vw, 3.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    align-items: center;
}

.split--flip > *:first-child { order: 2; }

@media (max-width: 760px) {
    .split--flip > *:first-child { order: 0; }
}

/* Pita foto lebar dengan lapisan gelap agar teks tetap terbaca. */
.band {
    position: relative;
    isolation: isolate;
    color: #fff;
    background: var(--navy-900);
    overflow: hidden;
}

.band > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    /* Foto latar diredupkan di sini, bukan hanya ditutup gradien: gradien
       sendiri gagal begitu foto berikutnya kebetulan terang di sisi teks. */
    filter: saturate(.8) brightness(.62);
}

.band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(6, 22, 38, .9) 18%, rgba(6, 22, 38, .78) 55%, rgba(11, 37, 69, .62));
}

.band h2, .band h3 { color: #fff; }
.band .lede { color: #c2d5e7; }
.band .eyebrow { color: var(--red-300); }

/* --- Cuplik -------------------------------------------------------------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.chips li { margin: 0; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--navy-900);
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.chip svg { color: var(--blue-700); flex: none; }
.chip:hover { border-color: var(--blue-300); transform: translateY(-1px); color: var(--blue-700); }

.chip--onnavy {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    color: #e3edf7;
}

.chip--onnavy svg { color: var(--red-300); }

.chip--onnavy:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

.chip small { font-weight: 600; color: var(--muted); }
.chip--onnavy small { color: #92aac2; }

/* --- Daftar bercentang --------------------------------------------------- */

.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .7rem;
}

.checklist li {
    display: flex;
    gap: .7rem;
    margin: 0;
    font-size: var(--step-0);
    color: var(--ink-soft);
}

.checklist li::before {
    content: '';
    flex: none;
    width: 21px;
    height: 21px;
    margin-top: .22em;
    border-radius: 50%;
    background: var(--blue-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f5ea8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.section--navy .checklist li,
.band .checklist li { color: #c2d5e7; }

.section--navy .checklist li::before,
.band .checklist li::before {
    background-color: rgba(237, 28, 36, .22);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff5a5f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
}

/* Fakta ringkas berjajar, pengganti paragraf kedua dan ketiga. */
.facts {
    display: grid;
    gap: 1.1rem 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
}

.facts li { margin: 0; }

.facts strong {
    display: block;
    font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--navy-900);
    line-height: 1.1;
}

.facts span {
    display: block;
    font-size: var(--step--1);
    color: var(--muted);
    font-weight: 600;
    margin-top: .2rem;
}

.section--navy .facts strong,
.band .facts strong { color: #fff; }

.section--navy .facts span,
.band .facts span { color: #9fb8d0; }

/* --- Lencana ------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .65rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    background: var(--blue-100);
    color: var(--blue-700);
}

.badge--muted { background: var(--line-soft); color: var(--muted); }
.badge--amber { background: var(--amber-100); color: var(--amber-700); }
.badge--green { background: #e4f6ec; color: #17734a; }
.badge--red { background: #fdeaea; color: #a52a2a; }

/* --- Timeline ------------------------------------------------------------ */

.timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 2.1rem;
    border-left: 2px solid var(--line);
}

.timeline li { position: relative; margin: 0 0 2rem; }
.timeline li:last-child { margin-bottom: 0; }

.timeline li::before {
    content: '';
    position: absolute;
    left: calc(-2.1rem - 7px);
    top: .45rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--red-500);
    box-shadow: 0 0 0 4px var(--red-100);
}

.timeline__year {
    display: inline-block;
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--blue-700);
    margin-bottom: .2rem;
}

.timeline h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.timeline p { color: var(--ink-soft); font-size: var(--step--1); }

/* --- Daftar kontak langsung ---------------------------------------------- */

/*
 * Sebelumnya bentuk ini ditulis sebagai enam gaya sebaris di dalam view, dan
 * seperti biasa jarak yang terlalu rapat bersembunyi di sana: label dan
 * nilainya hanya berjarak 3px, dan butir terakhir masih membawa garis bawah
 * sehingga daftarnya terlihat terpotong.
 */
.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-list li {
    display: flex;
    gap: .8rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.contact-list li:first-child { padding-top: 0; }

.contact-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.contact-list__icon {
    color: var(--blue-700);
    flex: none;
}

.contact-list__label {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .3rem;
}

/* --- Bagan organisasi ---------------------------------------------------- */

/*
 * Penghubungnya digambar penuh, bukan sekadar satu tiang di tengah. Ketika
 * satu atasan membawahi dua orang, tiang tunggal turun di antara kedua kotak
 * dan tidak menyentuh keduanya - yang terlihat justru seperti garis yang
 * lupa disambung.
 *
 * Susunannya: tiang dari tingkat di atas turun setengah jarak, palang
 * mendatar membentang dari pusat kotak pertama ke pusat kotak terakhir, lalu
 * tiang pendek turun dari palang ke tiap kotak.
 */
.org {
    --org-gap: 1rem;      /* jarak mendatar antar-kotak sebaris */
    --org-drop: 2.4rem;   /* jarak tegak antar-tingkat */
    display: grid;
    gap: var(--org-drop);
    justify-items: center;
}

.org__level {
    display: flex;
    flex-wrap: wrap;
    gap: var(--org-gap);
    justify-content: center;
    position: relative;
}

/* Tiang dari tingkat di atasnya, turun sampai ketinggian palang. */
.org__level:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(var(--org-drop) * -1);
    margin-left: -1px;
    width: 2px;
    height: calc(var(--org-drop) / 2);
    background: var(--line);
}

/* Tiang pendek dari palang turun ke tiap kotak. */
.org__level:not(:first-child) .org__node::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(var(--org-drop) / -2);
    margin-left: -1px;
    width: 2px;
    height: calc(var(--org-drop) / 2);
    background: var(--line);
}

/*
 * Palang mendatar. Tiap kotak menggambar potongannya sendiri selebar kotak
 * plus setengah jarak di kiri dan kanan, sehingga potongan kotak bersebelahan
 * bertemu tepat di tengah jaraknya. Kotak pertama mulai dari pusatnya sendiri
 * dan kotak terakhir berhenti di pusatnya - dengan begitu palangnya tidak
 * menjorok keluar di kedua ujung, berapa pun jumlah kotaknya.
 */
.org__level--branch .org__node::after {
    content: '';
    position: absolute;
    top: calc(var(--org-drop) / -2);
    /* Satu jarak penuh, bukan setengah: potongan kotak bersebelahan jadi
       saling menindih sedikit, sehingga tidak menyisakan celah beberapa
       piksel ketika lebar jaraknya dibulatkan peramban. Ujung kiri dan kanan
       tetap dijepit oleh aturan :first-child dan :last-child di bawah. */
    left: calc(var(--org-gap) * -1);
    right: calc(var(--org-gap) * -1);
    height: 2px;
    background: var(--line);
}

.org__level--branch .org__node:first-child::after { left: 50%; }
.org__level--branch .org__node:last-child::after { right: 50%; }

/*
 * Di layar sempit dua kotak tidak muat berdampingan dan barisnya membungkus.
 * Palang mendatar tidak punya arti lagi di sana, jadi bagannya dijadikan satu
 * kolom penuh dengan tiang lurus di antara tiap kotak.
 */
@media (max-width: 680px) {
    .org__level {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .org__level--branch {
        /* Rapat, supaya dua kotak sederajat terbaca sebagai satu pasangan
           dan bukan sebagai dua tingkat berurutan. */
        gap: .5rem;
    }

    .org__level--branch .org__node::after { display: none; }

    /*
     * Tidak ada garis di antara saudara sederajat. Ditumpuk, garis tegak di
     * antara keduanya berbohong: ia menyatakan yang bawah melapor kepada yang
     * di atasnya, padahal keduanya sama-sama melapor ke Direktur. Lebih baik
     * tanpa garis daripada dengan garis yang salah.
     */
    .org__level--branch .org__node + .org__node::before { display: none; }
}

.org__node {
    position: relative;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue-700);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.org__title { font-weight: 700; color: var(--navy-900); }
.org__person { font-size: var(--step--1); color: var(--muted); margin-top: .25rem; }

/*
 * Ketika namanya sudah ada, dialah yang naik ke atas dan menjadi tebal -
 * pembaca bagan organisasi mencari orangnya dulu, baru jabatannya.
 *
 * Penukaran dilakukan di CSS lewat `order`, bukan dengan menukar urutan div
 * di view. Dengan begitu kelasnya tetap menyebut isinya dengan jujur: pada
 * jabatan yang namanya belum ada, .org__title memang masih yang utama.
 */
.org__node { display: flex; flex-direction: column; }

.org__node--named .org__person {
    order: -1;
    margin-top: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy-900);
}

.org__node--named .org__title {
    margin-top: .3rem;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--muted);
}

/* --- Peta bisnis --------------------------------------------------------- */

.region-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.8rem;
}

.region-tabs button {
    padding: .5rem 1.05rem;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    font: inherit;
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all .18s ease;
}

.region-tabs button:hover { border-color: var(--blue-300); }

.region-tabs button[aria-selected='true'] {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: #fff;
}

.region-panel[hidden] { display: none; }

.partner {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.3rem 1.5rem;
    background: #fff;
}

.partner h3 {
    font-size: var(--step-1);
    margin-bottom: .9rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--line-soft);
}

.plant-group { margin-bottom: 1rem; }
.plant-group:last-child { margin-bottom: 0; }

.plant-group__label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .45rem;
}

.plant-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.plant-list li {
    margin: 0;
    padding: .28rem .7rem;
    background: var(--bg-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    color: var(--ink-soft);
}

/* --- Klien --------------------------------------------------------------- */

.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(50%, 170px), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.client-cell {
    background: #fff;
    min-height: 104px;
    display: grid;
    place-items: center;
    padding: 1.1rem;
    text-align: center;
}

.client-cell img {
    max-height: 48px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .6;
    transition: filter .2s ease, opacity .2s ease;
}

.client-cell:hover img { filter: grayscale(0); opacity: 1; }

.client-cell__name {
    font-weight: 700;
    color: var(--navy-800);
    font-size: var(--step--1);
    line-height: 1.35;
}

/* --- Lowongan ------------------------------------------------------------ */

.job {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.3rem 1.5rem;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.job:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-2px); }

.job h3 { font-size: var(--step-1); margin-bottom: .45rem; }
.job h3 a { color: inherit; text-decoration: none; }
.job h3 a:hover { color: var(--blue-700); }

.job__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .95rem;
    font-size: var(--step--1);
    color: var(--muted);
}

.job__meta span { display: inline-flex; align-items: center; gap: .3rem; }

.job__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}

/* --- Baris pranala ringkas ----------------------------------------------- */

.linkrow {
    display: block;
    padding: .95rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.linkrow:hover {
    border-color: transparent;
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.linkrow__meta {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .3rem;
}

.linkrow__title {
    display: block;
    font-weight: 700;
    line-height: 1.35;
    color: var(--navy-900);
}

.linkrow:hover .linkrow__title { color: var(--blue-700); }

/* --- Stepper status lamaran ---------------------------------------------- */

.stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
}

.stepper li {
    margin: 0;
    padding: 1rem .6rem;
    text-align: center;
    border-top: 3px solid var(--line);
    font-size: var(--step--1);
    color: var(--muted);
}

.stepper li[data-state='done'] { border-top-color: var(--blue-700); color: var(--navy-900); font-weight: 700; }
.stepper li[data-state='current'] { border-top-color: var(--red-500); color: var(--navy-900); font-weight: 800; }

/* --- Form ---------------------------------------------------------------- */

.field { margin-bottom: 1.15rem; }

.field label {
    display: block;
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--navy-900);
    margin-bottom: .4rem;
}

.field .hint {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
    margin-top: .3rem;
}

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field input[type='date'],
.field input[type='number'],
.field input[type='password'],
.field input[type='file'],
.field select,
.field textarea {
    width: 100%;
    padding: .75rem .95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    font: inherit;
    font-size: var(--step-0);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field textarea { min-height: 140px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(18, 114, 204, .14);
}

.field--error input,
.field--error select,
.field--error textarea { border-color: #c0392b; }

.field__error {
    display: block;
    margin-top: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: #c0392b;
}

.field--check { display: flex; gap: .65rem; align-items: flex-start; }
.field--check input { margin-top: .3rem; flex: none; }

.field--check label {
    margin: 0;
    font-weight: 500;
    font-size: var(--step--1);
    color: var(--ink-soft);
}

/* Perangkap bot: tidak boleh terlihat maupun terbaca pembaca layar, dan
   tidak boleh dilewati saat navigasi keyboard. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-grid {
    display: grid;
    gap: 0 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.alert {
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
    margin-bottom: 1.5rem;
    font-size: var(--step--1);
}

.alert--ok { background: #e9f8ef; border-color: #a9dfc0; color: #15693f; }
.alert--warn { background: #fdf6e3; border-color: #ecd9a4; color: #85641a; }
.alert--error { background: #fdecec; border-color: #f0b6b6; color: #99271f; }

/* --- Keadaan kosong ------------------------------------------------------ */

/*
 * Ketika tidak ada lowongan, satu bilah peringatan setipis 50px berdiri
 * sendirian di bidang putih setinggi 700px. Yang terlihat "polos" di sana
 * bukan latarnya - melainkan ruang yang tidak membawa apa pun.
 *
 * Menambahkan tekstur ke bidang itu hanya akan menghias kekosongan. Yang
 * dibutuhkan adalah isi: satu ikon sebagai jangkar, kalimatnya, dan satu
 * langkah berikutnya supaya pengunjung yang sudah sampai ke halaman karier
 * tidak pulang dengan tangan kosong.
 */
.empty {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: .45rem;
    padding: clamp(2.4rem, 1.8rem + 3vw, 4.2rem) 1.5rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background:
        radial-gradient(22rem 13rem at 50% 0%, rgba(26, 120, 208, .06), transparent 70%),
        var(--bg-soft);
}

.empty__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: .55rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--blue-700);
}

.empty__text {
    margin: 0;
    max-width: 40ch;
    font-weight: 700;
    color: var(--navy-900);
}

.empty__hint {
    margin: 0 0 .7rem;
    max-width: 42ch;
    font-size: var(--step--1);
    color: var(--muted);
}

/* --- Kepala halaman dalam ------------------------------------------------ */

.page-head {
    position: relative;
    isolation: isolate;
    background: var(--navy-900);
    color: #b9cee2;
    padding-block: clamp(2.4rem, 1.8rem + 2.8vw, 4.2rem);
    overflow: hidden;
}

.page-head::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(150deg, var(--navy-950), var(--navy-900) 60%, var(--navy-800));
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: .8rem;
    color: #89a4bf;
}

.crumbs li { margin: 0; }
.crumbs li + li::before { content: '/'; margin-right: .4rem; color: #4d6a87; }
.crumbs a { color: #89a4bf; text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current='page'] { color: #fff; font-weight: 600; }

.page-head h1 { margin-bottom: .6rem; color: #fff; }
.page-head p { color: #a9c1d8; max-width: var(--measure); margin: 0; font-size: var(--step-1); }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
    background: var(--navy-950);
    color: #90a7bd;
    padding-block: clamp(2.8rem, 2rem + 2.8vw, 4.4rem) 1.6rem;
    font-size: var(--step--1);
}

.footer-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    padding-bottom: 2.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.site-footer h2 {
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1rem;
}

.site-footer a { color: #90a7bd; text-decoration: none; }
.site-footer a:hover { color: #fff; }

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }

.footer-brand__name { color: #fff; font-weight: 800; font-size: 1rem; margin-bottom: .6rem; }
.footer-brand p { max-width: 40ch; line-height: 1.7; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.2rem;
    justify-content: space-between;
    padding-top: 1.4rem;
    font-size: .78rem;
    color: #70889f;
}

/* --- Tombol WhatsApp mengambang ------------------------------------------ */

.wa-fab {
    position: fixed;
    right: clamp(1rem, .6rem + 1vw, 1.75rem);
    bottom: clamp(1rem, .6rem + 1vw, 1.75rem);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .72rem 1.1rem;
    border-radius: 999px;
    background: #128c7e;
    color: #fff;
    font-size: var(--step--1);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(18, 140, 126, .32);
    transition: transform .18s ease, background-color .18s ease;
}

.wa-fab:hover { background: #0f7568; color: #fff; transform: translateY(-2px); }

@media (max-width: 560px) {
    .wa-fab__text { display: none; }
    .wa-fab { padding: .85rem; }
}

/* =========================================================================
   Lapisan interaksi
   -------------------------------------------------------------------------
   Semuanya bersifat peningkatan. Tanpa JavaScript: hero menampilkan satu foto,
   showcase menampilkan seluruh panel bertumpuk, penyaring tetap berupa form,
   dan lightbox tidak pernah terbuka - gambarnya dibuka langsung oleh peramban.
   Setiap gerak di sini juga tunduk pada prefers-reduced-motion di bagian akhir
   berkas.
   ========================================================================= */

/* --- Hero: foto berganti ------------------------------------------------- */

.hero__slides {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
    aspect-ratio: 4 / 5;
    background: var(--navy-800);
}

.hero__slides img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.07);
    transition: opacity .9s ease, transform 7s cubic-bezier(.16, .6, .3, 1);
}

/* Slide pertama tampil tanpa menunggu JavaScript. */
.hero__slides img:first-of-type,
.hero__slides img[data-active='true'] {
    opacity: 1;
    transform: scale(1);
}

.hero__slides img[data-active='false'] {
    opacity: 0;
    transform: scale(1.07);
}

.hero__dots {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.hero__dots button {
    width: 26px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: background-color .25s ease, width .25s ease;
}

.hero__dots button:hover { background: rgba(255, 255, 255, .7); }

.hero__dots button[aria-current='true'] {
    background: var(--red-500);
    width: 34px;
}

@media (max-width: 940px) {
    .hero__slides { aspect-ratio: 16 / 10; }
}

/* --- Showcase lini bisnis ------------------------------------------------ */

.showcase {
    display: grid;
    gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: center;
}

@media (max-width: 900px) {
    .showcase { grid-template-columns: 1fr; }
}

.showcase__list {
    display: grid;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.showcase__list li { margin: 0; }

.showcase__btn {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    width: 100%;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.showcase__btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--red-500);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .28s ease;
}

.showcase__btn:hover { border-color: var(--blue-300); }

.showcase__btn[aria-selected='true'] {
    border-color: transparent;
    box-shadow: var(--shadow);
    transform: translateX(3px);
}

.showcase__btn[aria-selected='true']::before { transform: scaleY(1); }

.showcase__btn svg { flex: none; color: var(--muted); transition: color .2s ease; }
.showcase__btn[aria-selected='true'] svg { color: var(--blue-700); }

.showcase__name {
    display: block;
    font-weight: 700;
    color: var(--navy-900);
    line-height: 1.3;
}

.showcase__hint {
    display: block;
    font-size: var(--step--1);
    color: var(--muted);
    margin-top: .3rem;
}

.showcase__panel[hidden] { display: none; }

.showcase__panel {
    animation: showcaseIn .45s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes showcaseIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.showcase__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.showcase__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.showcase__media:hover img { transform: scale(1.04); }

/* Tanpa JavaScript seluruh panel tampil berurutan, jadi masing-masing perlu
   judulnya sendiri. Begitu JavaScript berjalan, judul itu disembunyikan dari
   skrip - ia mubazir karena sudah terbaca di daftar sebelah kiri. */
.showcase__panel h3 { font-size: var(--step-2); margin-bottom: .5rem; }

/* --- Sorotan mengikuti kursor -------------------------------------------- */

/*
 * Kilau lembut yang mengikuti kursor. Murni dekoratif dan hanya muncul pada
 * penunjuk presisi - di layar sentuh ia justru tersangkut menyala setelah
 * disentuh.
 */
@media (hover: hover) and (pointer: fine) {
    .tile,
    .card,
    .job,
    .linkrow,
    .showcase__btn,
    .partner,
    [data-spotlight] {
        position: relative;
        isolation: isolate;
    }

    /*
     * z-index -1 di dalam induk yang diisolasi: lapisan ini melintas di atas
     * warna kartunya tetapi tetap di bawah tulisannya. Kalau ia dibiarkan di
     * atas, teks kartu ikut bersemu dan ketajamannya hilang.
     *
     * Radius 360px dengan opasitas .14 - cukup besar untuk mewarnai hampir
     * seluruh kartu, bukan sekadar menyalakan titik kecil di bawah kursor.
     * Versi sebelumnya 260px/.09 dan praktis tidak terbaca.
     */
    .tile::after,
    .card::after,
    .job::after,
    .linkrow::after,
    .showcase__btn::after,
    .partner::after,
    [data-spotlight]::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--hover, .3s ease);
        background: radial-gradient(
            360px circle at var(--mx, 50%) var(--my, 50%),
            rgba(15, 94, 168, .14),
            transparent 58%
        );
    }

    .tile:hover::after,
    .card--link:hover::after,
    .job:hover::after,
    .linkrow:hover::after,
    .showcase__btn:hover::after,
    .partner:hover::after,
    [data-spotlight]:hover::after { opacity: 1; }

    /*
     * Bidang gelap besar - hero dan kepala halaman dalam - mendapat cahayanya
     * sendiri. Radiusnya jauh lebih lebar daripada versi kartu (520px lawan
     * 360px) karena di bidang selebar satu layar lingkaran kecil terbaca
     * sebagai senter, bukan sebagai cahaya ruangan.
     */
    .hero::before,
    .page-head::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity .5s ease;
        background: radial-gradient(
            520px circle at var(--mx, 50%) var(--my, 50%),
            rgba(143, 192, 238, .22),
            rgba(26, 120, 208, .10) 42%,
            transparent 68%
        );
    }

    /*
     * Dua tingkat berbeda, karena isi kedua bidang ini ditumpuk dengan cara
     * berbeda. Di hero, .hero__inner duduk di 2, jadi cahaya di 1 lewat di
     * atas kisi dan aurora tanpa mengaburkan teks. Di kepala halaman dalam
     * isinya mengalir tanpa z-index sama sekali, jadi apa pun yang positif
     * akan menutupi judulnya - di sana cahaya turun ke -1, tepat di atas
     * gradiennya yang sudah digeser ke -2.
     */
    .hero::before { z-index: 1; }
    .page-head::before { z-index: -1; }

    .hero:hover::before,
    .page-head:hover::before { opacity: 1; }
}

/* --- Media yang bisa diklik ---------------------------------------------- */

.media--zoom { display: block; }

.media--zoom img {
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.media--zoom:hover img { transform: scale(1.05); }

.media--zoom {
    position: relative;
}

.media--zoom::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 22, 38, .45), transparent 45%);
    opacity: 0;
    transition: opacity .3s ease;
}

.media--zoom:hover::after { opacity: 1; }

.media__label {
    position: absolute;
    left: 1.1rem;
    bottom: 1.1rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--step--1);
    font-weight: 700;
    color: #fff;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}

.media--zoom:hover .media__label { opacity: 1; transform: none; }

/* --- Bilah kemajuan gulir ------------------------------------------------ */

/*
 * Digerakkan oleh timeline gulir CSS, tanpa satu baris JavaScript pun.
 * Peramban yang belum mendukung tidak menampilkan bilahnya sama sekali -
 * lebih baik tidak ada daripada ada tapi diam di posisi nol.
 */
.scroll-progress { display: none; }

@supports (animation-timeline: scroll()) {
    .scroll-progress {
        display: block;
        position: fixed;
        inset: 0 0 auto 0;
        height: 3px;
        z-index: 120;
        transform-origin: 0 50%;
        background: linear-gradient(90deg, var(--blue-700), var(--red-500));
        animation: scrollProgress linear both;
        animation-timeline: scroll(root block);
    }

    @keyframes scrollProgress {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }
}

/* --- Kembali ke atas ----------------------------------------------------- */

.to-top {
    position: fixed;
    right: clamp(1rem, .6rem + 1vw, 1.75rem);
    bottom: calc(clamp(1rem, .6rem + 1vw, 1.75rem) + 58px);
    z-index: 89;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--navy-900);
    cursor: pointer;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.to-top[data-visible='true'] { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--blue-700); border-color: var(--blue-300); }

/* --- Penyaring langsung -------------------------------------------------- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-bottom: 1.6rem;
}

.filter-field {
    position: relative;
    flex: 1 1 280px;
    max-width: 420px;
}

.filter-field svg {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.filter-field input {
    width: 100%;
    padding: .72rem .95rem .72rem 2.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: var(--step-0);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.filter-field input:focus {
    outline: none;
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(18, 114, 204, .14);
}

.filter-count {
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--muted);
}

.filter-count b { color: var(--navy-900); }

.filter-empty {
    padding: 1.6rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    text-align: center;
    color: var(--muted);
    font-size: var(--step--1);
}

.plant-list li mark {
    background: var(--amber-100);
    color: var(--navy-900);
    padding: 0 1px;
    border-radius: 2px;
}

.plant-list li[data-hit='true'] {
    background: var(--blue-100);
    border-color: var(--blue-300);
    color: var(--navy-900);
    font-weight: 600;
}

/*
 * Nama wilayah biasanya sudah terbaca di tab, jadi judul panelnya hanya untuk
 * pembaca layar. Begitu penyaring aktif seluruh wilayah dibuka sekaligus dan
 * tabnya hilang - saat itulah judul ini perlu terlihat, kalau tidak hasil
 * pencarian muncul tanpa keterangan ada di wilayah mana.
 */
.region-panel__title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

[data-filtering='true'] .region-panel__title {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 .9rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-size: var(--step-1);
    color: var(--navy-900);
}

[data-filtering='true'] .region-panel + .region-panel { margin-top: 2rem; }

/* --- Lightbox ------------------------------------------------------------ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
    padding: clamp(1rem, .6rem + 1.6vw, 2rem);
    background: rgba(6, 22, 38, .94);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}

.lightbox[data-open='true'] { opacity: 1; visibility: visible; }

.lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #cadcee;
    font-size: var(--step--1);
}

.lightbox__stage {
    display: grid;
    place-items: center;
    min-height: 0;
}

.lightbox__stage img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.lightbox__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.lightbox button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.lightbox button:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.lightbox button[disabled] { opacity: .35; cursor: default; }

.lightbox__caption { text-align: center; }

/* --- Penghalus kecil ----------------------------------------------------- */

.nav__link { position: relative; }

.nav__link::after {
    content: '';
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .28rem;
    height: 2px;
    border-radius: 2px;
    background: var(--red-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}

.nav__link:hover::after { transform: scaleX(1); }

@media (max-width: 1000px) {
    .nav__link::after { display: none; }
}

/* Ikon di dalam tombol ikut bergeser, sama seperti panah pada .link-arrow. */
.btn svg { transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn--onnavy:hover svg,
.btn--ghost:hover svg { transform: translateX(3px); }

.client-cell a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* --- Gerak yang digerakkan gulir ----------------------------------------- */

/*
 * Foto latar pita bergerak pelan saat bagiannya dilewati. Dikerjakan penuh
 * oleh peramban lewat timeline tampilan, jadi tidak ada pendengar scroll yang
 * berjalan di thread utama.
 */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .band > img {
            animation: bandPan linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }

        @keyframes bandPan {
            from { transform: translateY(-5%) scale(1.14); }
            to { transform: translateY(5%) scale(1.14); }
        }
    }
}

/* --- Menghormati preferensi gerak ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hero__slides img {
        transition-duration: .001ms !important;
        transform: none !important;
    }

    .showcase__panel { animation: none; }
    .media--zoom:hover img { transform: none; }
    .showcase__media:hover img { transform: none; }
    .scroll-progress { display: none; }

    [data-spotlight]::after { display: none; }

    /* Kartu hero berhenti mengambang dan panggungnya berhenti miring. */
    .hero__tag,
    .hero__chip { animation: none; }
    .hero__stage { transform: none !important; }
    .hero__stage::after { display: none; }
    .hero::before,
    .page-head::before { display: none; }
}
/* =========================================================================
   Animasi latar dan aksen
   -------------------------------------------------------------------------
   Empat pola, seluruhnya CSS tanpa pustaka: aurora, float, marquee, dan ping.
   Ketiganya yang pertama berjalan terus-menerus, jadi semuanya dikerjakan
   lewat transform dan opacity saja - properti yang tidak memicu layout ulang.
   Semuanya berhenti sendiri di bawah prefers-reduced-motion lewat aturan
   umum di bagian akhir berkas.
   ========================================================================= */

/* --- Aurora -------------------------------------------------------------- */

/*
 * Tiga lingkaran besar yang buram dan bergerak lambat di balik bidang gelap.
 * Ukurannya jauh lebih besar dari wadahnya dan tepinya dikaburkan, sehingga
 * yang terlihat bukan bentuk lingkaran melainkan warna yang bergeser pelan.
 * Jeda tiap lingkaran digeser -6s dan -12s supaya ketiganya tidak pernah
 * bergerak serentak.
 */
.aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    animation: aurora 18s ease-in-out infinite;
}

/*
 * Ukuran, posisi, dan pekatnya ditentukan dari pengukuran, bukan selera.
 * Versi pertama memakai lingkaran 24rem yang sebagian besar di luar layar,
 * dengan latar hero yang masih membawa gradien radial statis sendiri. Hasil
 * ukurannya: rata-rata perubahan piksel 0,01 per enam detik - secara praktis
 * tidak bergerak sama sekali.
 *
 * Sekarang lingkarannya lebih besar, lebih masuk ke dalam layar, dan lebih
 * pekat; gradien radial statis di latar hero dicabut supaya cahayanya datang
 * dari lingkaran yang bergerak ini, bukan dari lapisan yang diam.
 */
.aurora span:nth-child(1) {
    width: 32rem;
    height: 32rem;
    left: -6rem;
    top: -8rem;
    background: rgba(26, 120, 208, .62);
}

.aurora span:nth-child(2) {
    width: 34rem;
    height: 34rem;
    right: -7rem;
    top: 18%;
    background: rgba(237, 28, 36, .3);
    animation-delay: -6s;
}

.aurora span:nth-child(3) {
    width: 28rem;
    height: 28rem;
    left: 28%;
    bottom: -10rem;
    background: rgba(143, 192, 238, .34);
    animation-delay: -12s;
}

@keyframes aurora {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.1); }
    66% { transform: translate(-30px, 25px) scale(.95); }
}

/*
 * Di layar sempit lingkarannya dikecilkan dan blur-nya dipangkas. Dua alasan:
 * radius blur besar justru paling mahal di perangkat yang paling lemah, dan
 * lingkaran selebar 26rem pada layar 390px berhenti terbaca sebagai kabut -
 * ia mewarnai separuh hero menjadi keunguan.
 */
@media (max-width: 640px) {
    .aurora span { filter: blur(42px); }
    .aurora span:nth-child(1) { width: 15rem; height: 15rem; left: -5rem; top: -5rem; }
    .aurora span:nth-child(2) { width: 16rem; height: 16rem; right: -7rem; }
    .aurora span:nth-child(3) { width: 14rem; height: 14rem; bottom: -5rem; }
}

/* --- Kartu mengambang ---------------------------------------------------- */

/*
 * Naik-turun dan kedalaman digabung dalam satu keyframe. Harus begitu:
 * `transform` cuma satu properti, jadi kalau kedalamannya ditaruh di aturan
 * terpisah animasi ini akan menimpanya dan kartunya kembali datar.
 *
 * --depth-fix membatalkan pembesaran akibat perspektif. Elemen yang didorong
 * 48px ke arah penonton tampak ~4,6% lebih besar; tanpa pengecilan balik,
 * kedua kartu terlihat kegedean saat diam padahal yang diinginkan hanya
 * parallax-nya saat panggung dimiringkan.
 */
@keyframes float {
    0%, 100% { transform: translate3d(0, 0, var(--depth, 0px)) scale(var(--depth-fix, 1)); }
    50% { transform: translate3d(0, -10px, var(--depth, 0px)) scale(var(--depth-fix, 1)); }
}

.hero__tag {
    --depth: 48px;
    --depth-fix: .9564;
    animation: float 6s ease-in-out infinite;
}

/* Kartu kedua di sisi berlawanan, dengan irama dan jeda berbeda supaya
   keduanya tidak naik-turun bersamaan seperti satu benda. */
.hero__chip {
    position: absolute;
    right: -16px;
    top: 30px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .95rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-lg);
    --depth: 32px;
    --depth-fix: .9709;
    animation: float 7.5s ease-in-out infinite;
    animation-delay: -2.5s;
}

.hero__chip svg { color: var(--red-600); flex: none; }

.hero__chip strong {
    display: block;
    font-size: 1.05rem;
    line-height: 1.1;
    color: var(--navy-900);
    letter-spacing: -.02em;
}

.hero__chip span {
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
}

@media (max-width: 940px) {
    .hero__chip { right: 12px; top: 14px; }
}

@media (max-width: 480px) {
    .hero__chip { display: none; }
}

/* --- Pita logo berjalan -------------------------------------------------- */

/*
 * Daftar klien digandakan tiga kali di HTML, lalu jalurnya digeser tepat
 * sepertiga lebar. Tiga, bukan dua: dengan lima klien satu salinan hanya
 * ~950px, lebih sempit dari wadahnya, sehingga dua salinan menyisakan celah
 * kosong di ujung kanan setiap satu putaran.
 * Salinan kedua dan ketiga ditandai aria-hidden supaya pembaca layar tidak
 * membacakan daftar klien berulang kali.
 */
.marquee {
    position: relative;
    overflow: hidden;
    padding-block: .5rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee var(--marquee-duration, 46s) linear infinite;
    will-change: transform;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-33.3333%); }
}

.marquee__item {
    flex: none;
    width: 190px;
    min-height: 92px;
    display: grid;
    place-items: center;
    padding: 1rem 1.2rem;
    text-align: center;
}

.marquee__item img {
    max-height: 44px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .58;
    transition: filter .25s ease, opacity .25s ease;
}

.marquee__item:hover img { filter: grayscale(0); opacity: 1; }

.marquee__item span {
    font-weight: 700;
    font-size: var(--step--1);
    line-height: 1.35;
    color: var(--navy-800);
}

.marquee__item a { text-decoration: none; display: grid; place-items: center; }

/* --- Denyut pada titik --------------------------------------------------- */

.hero__badge .dot { position: relative; }

.hero__badge .dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--red-500);
    animation: ping 1.9s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes ping {
    75%, 100% { transform: scale(2.6); opacity: 0; }
}

/* --- Kata yang disorot pada judul ---------------------------------------- */

/*
 * Satu frasa dalam judul diberi warna aksen. Frasanya dikirim sebagai
 * parameter terjemahan, bukan dipotong dari kalimat - urutan kata berbeda
 * antarbahasa, dan memotong berdasarkan posisi akan salah di salah satunya.
 */
.hl { color: var(--red-600); }

.hero .hl,
.band .hl,
.page-head .hl,
.section--navy .hl { color: var(--red-300); }
/* =========================================================================
   Koreografi sorot
   -------------------------------------------------------------------------
   Satu sorot memicu beberapa hal sekaligus: kartunya terangkat, ubin ikonnya
   membesar dan menyala, cincinnya menebal, panahnya muncul, dan kilau melintas
   di tombol. Itulah yang membuat halaman terasa menjawab, bukan sekadar
   bergerak sendiri di latar.

   Durasinya seragam 300ms. Keseragaman itu penting: nilai yang berbeda-beda
   di tiap komponen membuat halaman terasa dirakit dari beberapa sumber.
   ========================================================================= */

:root { --hover: .3s cubic-bezier(.22, .61, .36, 1); }

/* --- Kartu yang terangkat ------------------------------------------------ */

.tile,
.card,
.job,
.linkrow,
.showcase__btn,
.partner,
.org__node {
    transition: transform var(--hover), border-color var(--hover), box-shadow var(--hover);
}

.tile:hover,
.card--link:hover,
.job:hover,
.linkrow:hover {
    transform: translateY(-6px);
    border-color: var(--blue-300);
    box-shadow: var(--shadow);
}

.showcase__btn:hover { transform: translateY(-2px); }
.showcase__btn[aria-selected='true']:hover { transform: translateX(3px) translateY(-2px); }

/* --- Ubin ikon ------------------------------------------------------------ */

/*
 * Ikon tidak lagi berupa kotak datar. Ia punya gradien lembut dan cincin
 * tipis, dan ketiganya berubah bersamaan saat kartunya disorot - membesar,
 * gradiennya menguat, cincinnya menebal. Perubahan tunggal tidak cukup
 * terbaca; yang terasa adalah ketiganya sekaligus.
 */
.card__icon,
.tile__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(140deg, var(--blue-100), #f4f8fc);
    box-shadow: inset 0 0 0 1px rgba(15, 94, 168, .12);
    color: var(--blue-700);
    margin-bottom: 1.1rem;
    transition: transform var(--hover), background var(--hover),
        box-shadow var(--hover), color var(--hover);
}

.tile:hover .tile__icon,
.card--link:hover .card__icon {
    transform: scale(1.1);
    background: linear-gradient(140deg, #d5e6f7, var(--blue-100));
    box-shadow: inset 0 0 0 1px rgba(15, 94, 168, .3), 0 8px 18px rgba(15, 94, 168, .16);
}

/* --- Panah yang muncul saat disorot -------------------------------------- */

.tile__go {
    position: absolute;
    top: 1.15rem;
    right: 1.25rem;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--blue-700);
    color: #fff;
    opacity: 0;
    transform: translate(-5px, 5px) scale(.85);
    transition: opacity var(--hover), transform var(--hover);
    pointer-events: none;
}

.tile:hover .tile__go {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* --- Kilau melintas pada tombol ------------------------------------------ */

/*
 * Pita cahaya tipis yang menyapu tombol dari kiri ke kanan dalam 700ms.
 * Ditaruh di z-index -1 dengan induknya diisolasi, sehingga ia lewat di atas
 * warna tombol tetapi tetap di bawah tulisannya.
 */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, .3) 50%, transparent 78%);
    transform: translateX(-100%);
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

.btn:hover::before { transform: translateX(100%); }

/* --- Garis bawah menu ---------------------------------------------------- */

.nav__link::after {
    background: linear-gradient(90deg, var(--red-500), var(--blue-600));
    transition: transform var(--hover);
}

/* --- Pranala berpanah ---------------------------------------------------- */

.link-arrow::after { transition: transform var(--hover); }
.link-arrow:hover::after { transform: translateX(5px); }

/* --- Cuplik --------------------------------------------------------------- */

.chip {
    transition: border-color var(--hover), background-color var(--hover),
        transform var(--hover), box-shadow var(--hover);
}

.chip:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

/* --- Sel klien ------------------------------------------------------------ */

.client-cell img,
.marquee__item img {
    transition: filter var(--hover), opacity var(--hover), transform var(--hover);
}

.client-cell:hover img,
.marquee__item:hover img { transform: scale(1.06); }

/* --- Hormati preferensi gerak -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .tile:hover,
    .card--link:hover,
    .job:hover,
    .linkrow:hover,
    .chip:hover,
    .showcase__btn:hover { transform: none; }

    .tile:hover .tile__icon,
    .card--link:hover .card__icon { transform: none; }

    .btn::before { display: none; }
    .client-cell:hover img,
    .marquee__item:hover img { transform: none; }
}
/* --- Utilitas ------------------------------------------------------------ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
/*
 * Jarak antara blok pengantar dan kisi di bawahnya. Skalanya ikut lebar layar
 * seperti jarak antar-bagian, bukan angka tetap: pada layar lebar foto
 * pengantarnya jauh lebih tinggi, dan jarak tetap membuatnya terlihat
 * menempel pada kartu di bawahnya.
 */
.mb-block { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.2rem); }

.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }

.table-scroll { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
}

.data-table th,
.data-table td {
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.data-table th { font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.data-table tbody tr:hover { background: var(--bg-soft); }

/* --- Gerak --------------------------------------------------------------- */

/*
 * Kemunculan dikerjakan animasi, bukan transisi. Sebelumnya ia memakai
 * `transition`, dan karena banyak kartu membawa data-reveal sekaligus,
 * transisi itu menimpa transisi hover milik kartunya: angkatannya jadi 500ms
 * dan warna bordernya tidak ikut berubah sama sekali. Animasi berjalan di
 * jalurnya sendiri, jadi `transition` tetap sepenuhnya milik komponen.
 *
 * Sengaja tanpa fill-mode: setelah animasinya habis, transform kembali
 * ditentukan aturan biasa - kalau tidak, ia terkunci dan hover tidak bisa
 * mengangkat kartunya lagi.
 */
/*
 * Jaring pengaman. Elemen ini disembunyikan CSS dan hanya dimunculkan oleh
 * pengamat di app.js - artinya satu skrip yang gagal dimuat membuat seluruh
 * isi halaman tak terlihat, meski HTML, CSS, dan gambarnya baik-baik saja.
 * Itu benar-benar terjadi pada penempatan pertama ke produksi, ketika CSP
 * menolak app.js karena tag skripnya belum membawa nonce.
 *
 * Animasi di bawah ini tidak melakukan apa pun selama tiga detik, lalu
 * memunculkan elemennya. Bila app.js berjalan, ia memasang `data-js` pada
 * <html> dan animasi cadangan ini dimatikan sebelum sempat menyala - jadi
 * kemunculan saat digulir tetap berjalan seperti biasa, tanpa kedipan.
 *
 * Tidak dipasang lewat JavaScript, justru karena kegagalan yang dijaga di
 * sini adalah kegagalan JavaScript itu sendiri.
 */
[data-reveal] {
    opacity: 0;
    /* Ditulis longhand, bukan shorthand. Dengan `animation: revealFallback
       .01s linear 3s forwards`, Chrome membaca jedanya sebagai 0s sehingga
       elemennya langsung muncul dan jaring pengamannya justru merusak
       kemunculan saat digulir. */
    animation-name: revealFallback;
    animation-duration: .01s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
}

[data-js] [data-reveal] { animation: none; }

@keyframes revealFallback {
    to { opacity: 1; }
}

/* `backwards` - bukan tanpa fill dan bukan `both`. Tanpa fill, kartu yang
   jedanya belum habis sempat berkedip muncul lalu menghilang lagi; dengan
   `both`, transform-nya terkunci dan hover tidak bisa mengangkatnya. */
[data-js] [data-reveal].is-visible,
[data-reveal].is-visible {
    opacity: 1;
    animation: revealIn .5s cubic-bezier(.22, .61, .36, 1) backwards;
    /* Jeda bertingkat dibaca dari custom property, bukan dari gaya sebaris.
       Gaya sebaris `animation-delay` akan menimpa jeda tiga detik milik
       animasi cadangan di atas, sehingga jaring pengamannya tidak pernah
       menunggu - ia langsung menyala dan kemunculan saat digulir hilang. */
    animation-delay: var(--reveal-delay, 0ms);
}

@keyframes revealIn {
    from { opacity: 0; transform: translateY(16px); }
}

/* Transisi antar halaman. Browser yang belum mendukung mengabaikan blok ini
   dan tetap berpindah halaman seperti biasa. */
@view-transition {
    navigation: auto;
}

/*
 * Menghormati preferensi sistem sepenuhnya: animasi dimatikan, bukan
 * dipercepat. Memperpendek durasi tetap menghasilkan gerakan, dan bagi
 * sebagian orang gerakan itulah masalahnya.
 */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    [data-reveal] { opacity: 1; transform: none; }

    @view-transition { navigation: none; }
}

/* --- Susunan isi-dan-sisi ------------------------------------------------ */

/*
 * Delapan halaman memakai bentuk yang sama: satu kolom isi dan satu kolom
 * pendamping. Semuanya menuliskannya sebagai gaya sebaris di atas kelas
 * .grid--2 - dan gaya sebaris itu menimpa `auto-fit`, satu-satunya hal yang
 * membuat .grid--2 runtuh menjadi satu kolom di layar sempit.
 *
 * Akibatnya tidak kelihatan sampai diukur: di ponsel 390px, kolom hasil
 * pencarian halaman Karier tersisa selebar **39 piksel** - dua kolom tetap
 * dipaksakan berdampingan, dan yang 280px mengambil hampir semuanya.
 *
 * Perbandingan kolomnya berbeda-beda per halaman, jadi ditulis sebagai
 * variabel. Titik runtuhnya satu dan sama, dan sekarang ada di CSS.
 */
.with-side {
    display: grid;
    gap: clamp(1rem, .6rem + 1.4vw, 1.6rem);
    grid-template-columns: minmax(0, var(--side, 1.5fr)) minmax(0, 1fr);
    align-items: start;
}

.with-side--filter { --side: 280px; }
.with-side--even { --side: 1fr; }

/* Kartu pendamping yang mengikuti gulir. */
.side-sticky {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
}

@media (max-width: 860px) {
    .with-side { grid-template-columns: minmax(0, 1fr); }

    /* Ditumpuk, "mengikuti gulir" berarti menempel di tengah bacaan. */
    .side-sticky { position: static; }
}

/* =========================================================================
   Layar sempit
   -------------------------------------------------------------------------
   Aturan di berkas ini sudah responsif sejak awal - kisi memakai auto-fit,
   ukuran huruf memakai clamp. Bagian ini menangani hal yang tidak bisa
   diselesaikan dengan menyusut saja: bentuk yang harus berubah, sasaran
   sentuh yang harus membesar, dan gerak yang harus diganti karena di layar
   sentuh tidak ada kursor yang bisa melayang.
   ========================================================================= */

/* --- Tabel data menjadi tumpukan ----------------------------------------- */

/*
 * `.data-table th` memakai `white-space: nowrap` supaya nama kolomnya tidak
 * patah di tengah. Di layar 390px itu memaksa tabelnya selebar 500px dan
 * seluruh halaman ikut bisa digeser ke samping.
 *
 * Yang digulir mendatar bukan jawabannya untuk tabel kunci-nilai seperti ini:
 * tiap baris hanya dua sel, jadi lebih baik sel kedua turun ke bawah sel
 * pertama dan tabelnya dibaca sebagai daftar.
 */
@media (max-width: 560px) {
    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table th,
    .data-table td { display: block; }

    .data-table tr {
        padding-block: .8rem;
        border-bottom: 1px solid var(--line);
    }

    .data-table tr:first-child { padding-top: 0; }
    .data-table tr:last-child { padding-bottom: 0; border-bottom: 0; }

    .data-table th,
    .data-table td {
        padding: 0;
        border: 0;
        white-space: normal;
    }

    .data-table th {
        font-size: .74rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .data-table td { margin-top: .3rem; }
}

/* --- Teks panjang tanpa spasi -------------------------------------------- */

/*
 * Alamat surel sepanjang "rekrutmen.ssbi@gmail.com" tidak punya satu pun
 * titik patah yang sah menurut aturan baku, sehingga ia mendorong kartunya
 * melewati tepi layar. `anywhere` mengizinkan patah di mana saja - hanya
 * diberikan pada elemen yang memang berisi alamat, bukan pada seluruh teks.
 */
.contact-list a,
.contact-list span,
.site-footer a[href^="mailto:"] {
    overflow-wrap: anywhere;
}

.contact-list li > span:last-child { min-width: 0; }

/* --- Sasaran sentuh ------------------------------------------------------ */

/*
 * Di bawah pemeriksaan, pranala footer hanya setinggi 17px - setinggi
 * barisnya sendiri. Jari bukan kursor: yang bisa diketuk harus punya luas,
 * bukan sekadar terlihat.
 *
 * Bantalannya diberikan pada pranala, bukan pada butir daftarnya, supaya yang
 * membesar adalah daerah yang benar-benar menerima ketukan. Jarak antar-butir
 * dikurangi karena bantalan barunya sudah menggantikan jarak itu.
 */
@media (hover: none) {
    .site-footer li { margin-bottom: 0; }

    .site-footer li a {
        display: block;
        padding-block: .62rem;
    }

    .lang-switch a { padding: .62rem .85rem; }

    .crumbs a,
    .crumbs [aria-current="page"] { padding-block: .3rem; }

    .link-arrow { padding-block: .5rem; }

    .footer-bottom a,
    .contact-list a {
        display: inline-block;
        padding-block: .45rem;
    }

    /* Kotak centang bawaan hanya 13px. Persetujuan adalah syarat kirim, jadi
       ia justru tidak boleh menjadi sasaran tersempit di seluruh formulir. */
    .field--check input[type="checkbox"] {
        width: 22px;
        height: 22px;
        margin-top: .05rem;
    }

    .field--check label { padding-block: .35rem; }

    /*
     * Titik foto hero tetap setipis 4px, tetapi daerah ketuknya menjadi 24px.
     * `background-clip: content-box` memisahkan keduanya: bantalan menambah
     * luas yang menerima jari tanpa ikut menambah luas yang terlihat.
     */
    .hero__dots button {
        height: 24px;
        padding-block: 10px;
        background-clip: content-box;
    }
}

/* --- Foto hero ----------------------------------------------------------- */

/*
 * 16:10 pada layar 390px menyisakan potongan setinggi 244px, dan karena foto
 * aslinya tegak, yang tersisa hanya pucuk silo - orangnya terpotong habis.
 * 4:3 mengembalikan tinggi yang cukup untuk memperlihatkan subjeknya.
 */
@media (max-width: 640px) {
    .hero__slides { aspect-ratio: 4 / 3; }
    .hero__media img { aspect-ratio: 4 / 3; }
}

/* Tombol hero selebar layar: pada 390px dua tombol berdampingan tidak muat,
   dan tombol selebar isinya sendiri terlihat seperti sisa tata letak lebar. */
@media (max-width: 460px) {
    .hero__actions { display: grid; }
    .hero__actions .btn { justify-content: center; }
}

/* --- Pita angka ---------------------------------------------------------- */

/*
 * Bertumpuk, tiga angka memakan 230px layar untuk tiga kata. Berjajar tiga,
 * seluruhnya muat dalam satu pandangan - dan justru itu gunanya pita ini.
 */
@media (max-width: 560px) {
    .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr)); }

    .stat {
        padding: 1.1rem .6rem;
        text-align: center;
        border-top: 0;
        border-left: 1px solid var(--line-soft);
    }

    .stat:first-child { border-left: 0; }
    .stat__value { font-size: 1.7rem; }
    .stat__value::after { margin-inline: auto; }
    .stat__label { font-size: .74rem; }
}

/* --- Kaki halaman -------------------------------------------------------- */

/*
 * Kolom merek berisi nama panjang dan alamat tiga baris. Dipaksa berbagi
 * lebar dengan kolom pranala pada layar 390px, keduanya menjadi sempit dan
 * alamatnya patah di tempat yang salah ("Ruko Royal Crown / Palace Blok C1").
 * Merek karena itu mengambil satu baris penuh, dan empat kelompok pranala
 * berbagi dua kolom di bawahnya.
 */
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}

/* --- Pemilih lini bisnis menjadi pita geser ------------------------------ */

/*
 * Di layar lebar daftar ini berdiri di samping panelnya, jadi hubungan
 * "pilih di sini, lihat di sana" langsung terbaca. Ditumpuk pada layar
 * sempit, hubungan itu putus: empat kartu setinggi 360px mendorong panelnya
 * keluar layar, sehingga mengetuk pilihan kedua mengubah sesuatu yang tidak
 * terlihat.
 *
 * Bentuknya karena itu berubah, bukan sekadar menyusut: satu baris yang bisa
 * digeser, dengan panel tepat di bawahnya. Lebar kartu 72% disengaja - tepi
 * kartu berikutnya selalu mengintip, dan itulah satu-satunya petunjuk bahwa
 * barisnya masih bisa digeser.
 */
@media (max-width: 900px) {
    .showcase__list {
        grid-auto-flow: column;
        /* Persen murni, bukan minmax(): di dalam wadah yang bisa digulir
           ruang tersedianya tak tentu, sehingga minmax() selalu jatuh ke
           nilai terkecilnya dan kartunya menyusut jadi 180px. */
        grid-auto-columns: 72%;
        gap: .6rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        /* Keluar dari talang lalu memasangnya kembali sebagai bantalan:
           kartu pertama tetap sejajar teks, tetapi barisnya bisa digeser
           sampai menyentuh tepi layar. */
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        padding-bottom: .3rem;
    }

    .showcase__list::-webkit-scrollbar { display: none; }
    .showcase__list li { scroll-snap-align: start; }
    .showcase__btn { height: 100%; }

    /* Geseran 3px pada keadaan terpilih ikut menggeser posisi gulir. */
    .showcase__btn[aria-selected="true"] { transform: none; }
}

/* --- Umpan balik ketukan ------------------------------------------------- */

/*
 * Seluruh isyarat interaksi di situs ini bergantung pada `:hover`, dan di
 * layar sentuh keadaan itu tidak pernah terjadi - kartunya terasa mati saat
 * disentuh. `:active` menggantikannya: sedikit mengecil selama jari menekan,
 * lalu kembali.
 *
 * Sorotan bawaan peramban dimatikan hanya pada elemen yang sudah mendapat
 * umpan balik sendiri di sini. Mematikannya menyeluruh akan menghilangkan
 * satu-satunya isyarat pada elemen yang belum ditangani.
 */
@media (hover: none) {
    .tile,
    .card--link,
    .job,
    .linkrow,
    .partner,
    .showcase__btn,
    .org__node,
    .btn,
    .chip { -webkit-tap-highlight-color: transparent; }

    .tile:active,
    .card--link:active,
    .job:active,
    .linkrow:active,
    .partner:active,
    .showcase__btn:active {
        transform: scale(.985);
        border-color: var(--blue-300);
    }

    .btn:active,
    .chip:active { transform: scale(.97); }
}
@media print {
    .site-header,
    .site-footer,
    .wa-fab,
    .btn { display: none !important; }

    body { color: #000; }
}