@import '_content/AMS_RentGuard.Shared/AMS_RentGuard.Shared.ur2fvxw1eg.bundle.scp.css';

/* _content/AMS_RentGuard.Web/Components/Public/CompanyProfile.razor.rz.scp.css */
/*
    Company profile. Terang, lapang, navy dan emas mengikuti gambar hero dan warna merek.

    Pindah dari gelap ke terang menuntut satu hal diubah cara berpikirnya:
    pada latar gelap, benda dibuat terlihat lewat garis terang di tepi atas.
    Pada latar terang, yang bekerja adalah BAYANGAN — kartu putih di atas
    putih hanya terbaca kalau ia menjatuhkan bayangan.

    Yang membuatnya tidak membosankan bukan warnanya sendiri, melainkan
    iramanya: putih -> bertint -> putih -> bertint, lalu satu pita navy
    di bagian ajakan menghubungi. Halaman terang yang seluruhnya seragam
    justru lebih cepat membosankan daripada halaman gelap.

    Seluruh gaya halaman ini berdiri sendiri dan TIDAK memakai Bootstrap selain
    ikonnya. Alasannya sederhana: halaman ini punya bahasa visual yang berbeda
    dari bagian dalam aplikasi, dan menimpanya satu per satu justru menghasilkan
    lebih banyak aturan daripada menulisnya dari awal.
*/

.cp[b-kh96hzjm86] {
    --ink: #131a28;
    --ink-soft: #4a5568;
    --ink-dim: #7a8697;

    /* Tiga permukaan terang: dasar halaman, kartu, dan bagian bertint.
       Permukaan keempat — pita gelap di bagian kontak — memakai --brand-deep,
       karena warnanya memang warna merek, bukan sekadar "latar gelap". */
    --bg: #f6f8fb;
    --bg-card: #ffffff;
    --bg-tint: #eef2f8;

    --brand: #12305e;
    --brand-deep: #0b1f3f;
    --brand-darkest: #071630;

    /*
        Dua nada emas, dan pemisahan ini penting. Emas cerah di atas putih
        punya kontras terlalu rendah untuk dibaca — dipakai hanya sebagai
        garis dan bidang. Untuk tulisan dipakai nada tua yang tetap terbaca.
    */
    --gold: #c9a227;
    --gold-ink: #8a6d12;

    --line: #e3e8f0;
    --line-strong: #cdd6e4;

    --shadow-sm: 0 1px 2px rgba(11, 31, 63, .04), 0 2px 8px rgba(11, 31, 63, .05);
    --shadow-lg: 0 1rem 2.25rem rgba(11, 31, 63, .10);

    background: var(--bg);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.65;
    min-height: 100vh;
    overflow-x: hidden;
}

.cp p[b-kh96hzjm86] {
    color: var(--ink-soft);
}

.cp-wrap[b-kh96hzjm86] {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding-inline: 1.25rem;
}

/* ---------- Bagian ---------- */

.cp-section[b-kh96hzjm86] {
    position: relative;
    padding: 6rem 0;
    background: var(--bg-card);
}

/* Bagian selang-seling diberi tint kebiruan tipis. Inilah yang membentuk
   irama; tanpanya halaman terang yang panjang terasa satu lembar tanpa ujung. */
.cp-section--alt[b-kh96hzjm86] {
    background:
        radial-gradient(46rem 26rem at 84% 6%, rgba(18, 48, 94, .05), transparent 62%),
        var(--bg-tint);
}

/* Pemisah antarbagian: garis emas yang memudar di kedua ujung, bukan garis
   penuh yang membelah halaman menjadi tumpukan kotak. */
.cp-section[b-kh96hzjm86]::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(201, 162, 39, .5) 22%,
        rgba(201, 162, 39, .5) 78%,
        transparent);
}

.cp-kicker[b-kh96hzjm86] {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    margin: 0 0 .875rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--brand);
}

/* Garis pendek emas sebelum teks. Penanda kecil yang membuat tiap bagian
   punya pembuka yang sama, dan keseragaman itulah yang terbaca sebagai tertata. */
.cp-kicker[b-kh96hzjm86]::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold));
}

.cp-h2[b-kh96hzjm86] {
    margin: 0 0 1.125rem;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.025em;
    color: var(--ink);
}

.cp-h3[b-kh96hzjm86] {
    margin: 3rem 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}

.cp-lead[b-kh96hzjm86] {
    max-width: 46rem;
    font-size: 1.0625rem;
}

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

   Latar berupa foto armada: navy pekat di kiri, menerang ke arah kanan tempat
   mobil dan siluet kota berada. Susunan itu yang menentukan tata letak di sini:
   tulisan ditaruh di KIRI, di atas bidang navy yang memang kosong, sehingga
   tidak ada satu pun huruf yang jatuh di atas mobil.

   Foto dipasang lewat custom property yang diisi komponen, bukan url() di sini.
   Lihat catatan pada HeroStyle di CompanyProfile.razor.
*/

.cp-hero[b-kh96hzjm86] {
    position: relative;
    overflow: hidden;
    /* Warna dasar tetap ada di bawah foto. Bila fotonya gagal dimuat — jaringan
       putus, berkas terhapus — hero tetap berupa bidang navy dengan tulisan
       terang yang terbaca, bukan tulisan putih di atas putih. */
    background-color: var(--brand-deep);
    background-image: var(--cp-hero-image, none);
    background-size: cover;
    /* Titik jangkar di kanan: bagian kanan foto yang berisi mobil harus tetap
       terlihat saat layar menyempit, dan bidang navy di kiri boleh terpotong
       karena isinya memang kosong. */
    background-position: right center;
    background-repeat: no-repeat;
}

/*
    Lapisan gelap dari kiri. Ini yang menjamin tulisan tetap terbaca berapa pun
    terangnya foto: navy pekat di kiri tempat tulisan berada, memudar menjadi
    bening di kanan agar mobil dan kota tidak ikut tertutup.
*/
.cp-hero[b-kh96hzjm86]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            100deg,
            rgba(7, 22, 48, .93) 0%,
            rgba(7, 22, 48, .82) 32%,
            rgba(11, 31, 63, .45) 58%,
            rgba(11, 31, 63, .10) 78%,
            transparent 100%);
    pointer-events: none;
}

/* Peralihan ke bagian putih di bawahnya. Tanpa ini, foto bertemu bidang putih
   sebagai garis potong yang tajam. */
.cp-hero[b-kh96hzjm86]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 6rem;
    background: linear-gradient(180deg, transparent, var(--bg-card));
    pointer-events: none;
    z-index: 1;
}

/* Cahaya emas samar di kiri bawah, mengikuti garis emas pada foto. */
.cp-hero__glow[b-kh96hzjm86] {
    position: absolute;
    inset-inline-start: -12%;
    bottom: -18%;
    width: 40rem;
    height: 40rem;
    background: radial-gradient(circle, rgba(201, 162, 39, .16), transparent 62%);
    pointer-events: none;
}

/* Navigasi berada DI ATAS foto navy, jadi seluruh tulisannya terang —
   kebalikan dari bagian halaman lain yang berlatar putih. */
.cp-nav[b-kh96hzjm86] {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
    padding: 1.375rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- Lockup nama perusahaan ---------- */

.cp-nav__brand[b-kh96hzjm86] {
    display: inline-flex;
    align-items: center;
    gap: .875rem;
    text-decoration: none;
    /* flex-shrink dimatikan supaya lockup tidak ikut mengecil saat menu tengah
       memakan ruang; yang boleh menyempit adalah menunya, bukan identitasnya. */
    flex: 0 0 auto;
}

/*
    Wadah logo. Bulat, berlatar navy pekat, dengan cincin emas tipis.

    Logo perusahaan berupa emas di atas gelap, jadi ia butuh alas gelap sendiri
    — tanpa itu ia lenyap begitu berada di atas bagian foto yang terang. Cincin
    emasnya sekaligus mengikat logo dengan tulisan di sebelahnya menjadi satu
    kesatuan, bukan dua benda yang kebetulan bersebelahan.
*/
.cp-nav__brand-mark[b-kh96hzjm86] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    padding: .4375rem;

    background: radial-gradient(circle at 30% 25%, rgba(18, 48, 94, .95), rgba(7, 22, 48, .98));
    border: 1px solid rgba(201, 162, 39, .55);
    border-radius: 50%;
    box-shadow:
        0 0 0 .25rem rgba(201, 162, 39, .08),
        0 .5rem 1.25rem rgba(7, 22, 48, .5);

    transition: border-color .2s ease, box-shadow .2s ease;
}

.cp-nav__brand:hover .cp-nav__brand-mark[b-kh96hzjm86] {
    border-color: rgba(201, 162, 39, .9);
    box-shadow:
        0 0 0 .3125rem rgba(201, 162, 39, .16),
        0 .5rem 1.5rem rgba(7, 22, 48, .6);
}

.cp-nav__brand-mark img[b-kh96hzjm86] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cp-nav__brand-text[b-kh96hzjm86] {
    display: flex;
    flex-direction: column;
    /* Rapat, supaya dua baris terbaca sebagai satu blok — bukan dua kalimat. */
    line-height: 1.15;
}

/*
    Nama memakai gradasi emas, bukan warna rata. Emas rata pada tulisan
    sekecil ini terbaca kuning kusam; gradasi tipis dari terang ke tua yang
    membuatnya terbaca sebagai logam.

    Aman memakai background-clip di sini karena elemen ini TIDAK dianimasikan
    transform — berbeda dengan pita berjalan di tepi kanan, yang justru gagal
    tergambar karena kombinasi itu.
*/
.cp-nav__brand-name[b-kh96hzjm86] {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;

    background: linear-gradient(100deg, #fff6d8 0%, var(--gold) 45%, #a8842a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cp-nav__brand-tag[b-kh96hzjm86] {
    margin-top: .1875rem;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    transition: color .2s ease;
}

.cp-nav__brand:hover .cp-nav__brand-tag[b-kh96hzjm86] {
    color: rgba(255, 255, 255, .85);
}

.cp-nav__links[b-kh96hzjm86] {
    display: flex;
    gap: 2rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.cp-nav__links a[b-kh96hzjm86] {
    position: relative;
    font-size: .875rem;
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    transition: color .18s ease;
}

/* Garis bawah yang tumbuh dari kiri saat disentuh. */
.cp-nav__links a[b-kh96hzjm86]::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -.375rem;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width .22s ease;
}

.cp-nav__links a:hover[b-kh96hzjm86] {
    color: #fff;
}

.cp-nav__links a:hover[b-kh96hzjm86]::after {
    width: 100%;
}

.cp-nav__cta[b-kh96hzjm86] {
    padding: .5625rem 1.125rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.cp-nav__cta:hover[b-kh96hzjm86] {
    color: var(--gold);
    border-color: rgba(201, 162, 39, .7);
    background: rgba(201, 162, 39, .12);
}

/*
    Isi hero rata kiri, dibatasi 40rem, dan menempel pada lebar isi halaman
    yang sama dengan bagian lain. Rata tengah akan menaruh tulisan tepat di
    atas mobil pada foto.
*/
.cp-hero__body[b-kh96hzjm86] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
    padding: 2rem 1.25rem 8rem;
    text-align: start;
}

.cp-hero__body > *[b-kh96hzjm86] {
    max-width: 40rem;
}

/* ---------- Masuknya isi hero ----------

   Judul saja yang bergerak akan terlihat seperti satu elemen yang dianimasikan,
   bukan halaman yang tersusun. Label di atas dan kalimat di bawahnya ikut masuk
   dengan jeda yang menyambung urutan judul, sehingga seluruh hero terbaca
   sebagai satu gerakan yang direncanakan.

   Geraknya lebih kecil daripada judul — 12px, bukan setinggi baris. Bagian
   pendukung tidak boleh menarik perhatian sebesar judulnya.
*/
@keyframes cp-fade-up-b-kh96hzjm86 {
    from {
        transform: translateY(12px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.cp-hero__eyebrow[b-kh96hzjm86],
.cp-hero__lead[b-kh96hzjm86],
.cp-hero__actions[b-kh96hzjm86],
.cp-hero__note[b-kh96hzjm86] {
    animation: cp-fade-up-b-kh96hzjm86 .8s ease-out both;
}

.cp-hero__eyebrow[b-kh96hzjm86] { animation-delay: 0s; }
.cp-hero__lead[b-kh96hzjm86]    { animation-delay: .55s; }
.cp-hero__actions[b-kh96hzjm86] { animation-delay: .68s; }
.cp-hero__note[b-kh96hzjm86]    { animation-delay: .82s; }

.cp-hero__eyebrow[b-kh96hzjm86] {
    display: inline-block;
    margin: 0 0 1.5rem;
    padding: .375rem 1rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold) !important;
    border: 1px solid rgba(201, 162, 39, .45);
    border-radius: 999px;
    background: rgba(201, 162, 39, .10);
}

/* Putih di atas foto navy. Bayangan tipis menjaga huruf tetap terbaca andai
   bagian foto di baliknya kebetulan lebih terang dari perkiraan. */
.cp-hero__title[b-kh96hzjm86] {
    margin: 0 0 1.75rem;
    font-size: clamp(2.25rem, 6.2vw, 4.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.035em;
    color: #fff;
    text-shadow: 0 .125rem 1.5rem rgba(7, 22, 48, .45);
}

/* ---------- Tersingkapnya judul ----------

   Tiap baris punya topeng sendiri. Yang bergerak adalah lapis di dalamnya,
   naik dari bawah garis potong topeng — sehingga hurufnya terlihat tersingkap
   dari balik tepi, bukan melayang masuk dari luar layar.

   padding-bottom pada topeng WAJIB ada. Tanpa itu, overflow:hidden memotong
   ekor huruf turun seperti "g" dan "y"; kebetulan tidak ada di tiga baris ini,
   tetapi naskahnya bisa diganti kapan saja. margin-bottom negatif senilai
   sama mengembalikan jarak antarbaris seperti semula.
*/

.cp-hero__line[b-kh96hzjm86] {
    display: block;
    overflow: hidden;
    padding-bottom: .14em;
    margin-bottom: -.14em;
}

.cp-hero__line > span[b-kh96hzjm86] {
    display: block;
    /* both: keadaan awal berlaku sebelum jeda mulai, keadaan akhir dipertahankan
       sesudahnya. Tanpa itu tulisan berkedip muncul lebih dulu, lalu melompat
       ke bawah saat animasinya benar-benar dimulai. */
    animation: cp-rise-b-kh96hzjm86 .95s cubic-bezier(.22, .68, .24, 1) both;
}

/* Jeda bertingkat. Selisih 0,13 detik cukup untuk terbaca sebagai urutan,
   dan masih terlalu cepat untuk terasa lambat. */
.cp-hero__line:nth-child(1) > span[b-kh96hzjm86] { animation-delay: .10s; }
.cp-hero__line:nth-child(2) > span[b-kh96hzjm86] { animation-delay: .23s; }
.cp-hero__line:nth-child(3) > span[b-kh96hzjm86] { animation-delay: .36s; }

@keyframes cp-rise-b-kh96hzjm86 {
    from {
        transform: translateY(105%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/*
    Baris ketiga memakai gradasi hijau ke emas tua. Di atas latar terang,
    emas cerah pada huruf sebesar ini kehilangan kontras dan terbaca pudar —
    karena itu gradasinya berakhir pada nada emas yang jauh lebih tua.

    Gradasinya dibuat 2,6 kali lebih lebar dari tulisannya, dengan pita emas
    terang di tengah. Menggeser posisinya membuat pita itu menyapu huruf
    seperti pantulan cahaya pada logam.
*/
.cp-hero__title-accent[b-kh96hzjm86] {
    /* Di atas foto navy, nada diamnya emas — bukan warna merek seperti pada
       versi berlatar putih. Pita terang di tengah yang menyapu. */
    background: linear-gradient(
        100deg,
        var(--gold) 0%,
        var(--gold) 34%,
        #f0d98a 46%,
        #fff6d8 52%,
        #f0d98a 58%,
        var(--gold) 70%,
        var(--gold) 100%);
    background-size: 260% 100%;
    background-position: 128% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* Jeda 1,4 detik: menunggu sampai ketiga baris selesai tersingkap dulu.
       Dua gerakan yang berjalan bersamaan saling menutupi. */
    animation: cp-sheen-b-kh96hzjm86 7s ease-in-out 1.4s infinite;
}

/*
    Sapuan berlangsung sekitar dua detik, lalu diam lima detik. Perbandingan
    inilah yang menentukan kesannya: sapuan yang terus-menerus terbaca sebagai
    hiasan murahan, sedangkan yang sesekali terbaca sebagai kilau bahan.
*/
@keyframes cp-sheen-b-kh96hzjm86 {
    0%, 62% {
        background-position: 128% 0;
    }
    92%, 100% {
        background-position: -34% 0;
    }
}

.cp-hero__lead[b-kh96hzjm86] {
    margin: 0 0 2.5rem;
    max-width: 34rem !important;
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, .82) !important;
}

.cp-hero__actions[b-kh96hzjm86] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .75rem;
}

.cp-hero__note[b-kh96hzjm86] {
    position: relative;
    margin: 3.5rem 0 0;
    max-width: 30rem !important;
    padding-top: 2rem;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .72) !important;
}

/* Garis penanda di kiri, bukan di tengah — mengikuti tata letak rata kiri. */
.cp-hero__note[b-kh96hzjm86]::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 3rem;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
}

.cp-hero__note strong[b-kh96hzjm86] {
    display: block;
    margin-top: .375rem;
    font-size: 1.0625rem;
    color: #fff;
}

/* ---------- Pita nama berjalan ----------

   PENTING, dan ini penyebab tulisan raksasa sebelumnya menabrak judul:

   Pada elemen ber-position absolute, inset-inline-start/end dipetakan ke sisi
   fisik menurut writing-mode ELEMEN ITU SENDIRI, bukan menurut induknya.
   Elemen ini memakai writing-mode: vertical-rl, sehingga sumbu inline-nya
   TEGAK — inset-inline-end berarti "bawah", bukan "kanan". Akibatnya sisi
   kanan tidak pernah diatur, elemennya jatuh ke posisi statis di kiri, dan
   menimpa judul hero.

   Karena itu di sini dipakai properti fisik "right". Untuk elemen yang
   writing-mode-nya diputar, properti logis justru menyesatkan.
*/

.cp-hero__rail[b-kh96hzjm86] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 6.5rem;
    overflow: hidden;

    /*
        Alas navy yang memekat ke arah tepi kanan.

        Ini bukan hiasan, melainkan syarat agar pitanya terbaca. Pita berada di
        sisi kanan foto — tempat gedung dan langit justru paling TERANG. Emas di
        atas bidang seterang itu akan tenggelam berapa pun pekat warnanya.
        Alas ini yang memastikan hurufnya selalu berdiri di atas bidang gelap,
        apa pun foto yang dipasang kemudian.
    */
    background: linear-gradient(
        90deg,
        rgba(7, 22, 48, 0) 0%,
        rgba(7, 22, 48, .55) 30%,
        rgba(7, 22, 48, .78) 100%);

    /* Memudar di kedua ujung, sehingga tulisannya seolah muncul dari balik
       tepi layar dan lenyap kembali — bukan terpotong mendadak. */
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);

    pointer-events: none;
    user-select: none;
}

/* Garis emas di sisi dalam pita, menegaskan bahwa ini satu jalur tersendiri. */
.cp-hero__rail[b-kh96hzjm86]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(201, 162, 39, .85) 28%,
        rgba(255, 246, 216, .95) 50%,
        rgba(201, 162, 39, .85) 72%,
        transparent);
}

/*
    Jalur teks. Tugasnya HANYA bergerak — warnanya rata, tanpa kliping gradasi
    ke bentuk huruf. Lihat catatan pada berkas cahaya di markup untuk alasannya.
*/
.cp-hero__rail-track[b-kh96hzjm86] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    /* vertical-rl membuat sumbu inline menjadi tegak, sehingga anak-anak flex
       tersusun dari atas ke bawah dan hurufnya ikut berdiri. */
    writing-mode: vertical-rl;
    justify-content: flex-start;
    align-items: center;
    gap: 2.25rem;

    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .45em;
    text-transform: uppercase;
    white-space: nowrap;

    /* Emas pekat, bukan putih samar. Ini nama perusahaan — memang pantas
       terlihat, bukan sekadar tekstur latar. */
    color: var(--gold);

    /* Pendar tipis di sekeliling huruf. Bukan untuk gaya: ia yang menjaga
       tepi huruf tetap tegas ketika bagian foto di baliknya kebetulan terang. */
    text-shadow:
        0 0 1.5rem rgba(201, 162, 39, .55),
        0 .0625rem .125rem rgba(7, 22, 48, .9);

    animation: cp-rail-scroll-b-kh96hzjm86 30s linear infinite;
}

.cp-hero__rail-dot[b-kh96hzjm86] {
    font-size: .875rem;
    letter-spacing: 0;
    color: #fff6d8;
    text-shadow: 0 0 1rem rgba(255, 246, 216, .8);
}

/*
    Berkas cahaya yang turun menyusuri pita, dengan irama berbeda dari jalur
    teksnya. Dua gerak berperiode berbeda — 30 detik dan 7 detik — tidak pernah
    berulang pada pola yang sama, dan itulah yang membuatnya tidak terbaca
    sebagai animasi berputar.
*/
.cp-hero__rail-beam[b-kh96hzjm86] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 12rem;

    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(201, 162, 39, .32) 32%,
        rgba(255, 246, 216, .82) 50%,
        rgba(201, 162, 39, .32) 68%,
        transparent 100%);

    animation: cp-rail-beam-b-kh96hzjm86 7s ease-in-out infinite;
}

/* Jalur digeser tepat separuh panjangnya. Isinya ditulis dua rangkap di
   markup, jadi pada titik itu tampilannya identik dengan keadaan awal. */
@keyframes cp-rail-scroll-b-kh96hzjm86 {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

/*
    Berkas cahaya dimulai dan berakhir di luar pita, sehingga tidak pernah
    terlihat "muncul" atau "hilang" di tengah jalan.
*/
@keyframes cp-rail-beam-b-kh96hzjm86 {
    0%   { transform: translateY(-14rem); opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* ---------- Tombol di dalam hero ----------

   Hero kini berlatar gelap, sedangkan seluruh halaman lainnya terang. Tombol
   memakai kelas yang sama, jadi versi terangnya ditimpa khusus di sini —
   bukan dengan membuat kelas tombol kedua yang harus diingat.
*/

.cp-hero .cp-btn--primary[b-kh96hzjm86] {
    color: #14100a;
    background: linear-gradient(140deg, #e0c069, var(--gold));
    box-shadow: 0 .75rem 1.75rem rgba(7, 22, 48, .45);
}

.cp-hero .cp-btn--ghost[b-kh96hzjm86] {
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .38);
}

.cp-hero .cp-btn--ghost:hover[b-kh96hzjm86] {
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .65);
    box-shadow: none;
}

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

.cp-btn[b-kh96hzjm86] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3.125rem;
    padding: .8125rem 1.875rem;

    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.cp-btn:active[b-kh96hzjm86] {
    transform: translateY(1px);
}

.cp-btn--primary[b-kh96hzjm86] {
    color: #fff;
    background: linear-gradient(140deg, var(--brand) 0%, var(--brand-deep) 100%);
    box-shadow: 0 .75rem 1.75rem rgba(11, 31, 63, .24);
}

.cp-btn--primary:hover[b-kh96hzjm86] {
    box-shadow: 0 1rem 2.25rem rgba(11, 31, 63, .32);
}

.cp-btn--ghost[b-kh96hzjm86] {
    color: var(--ink);
    border-color: var(--line-strong);
    background: #fff;
}

.cp-btn--ghost:hover[b-kh96hzjm86] {
    border-color: var(--brand);
    color: var(--brand);
    box-shadow: var(--shadow-sm);
}

/* ---------- Permukaan bersama ----------

   Pada latar terang, yang membuat kartu terbaca sebagai benda adalah bayangan
   lembut, bukan garis tepi tebal. Garis tepi tetap dipakai tipis agar kartu
   punya batas walaupun bayangannya tidak tampak — misalnya di layar dengan
   kecerahan rendah atau saat dicetak.
*/

.cp-reason[b-kh96hzjm86],
.cp-service[b-kh96hzjm86],
.cp-fleet-group[b-kh96hzjm86],
.cp-card[b-kh96hzjm86],
.cp-tile[b-kh96hzjm86],
.cp-commit[b-kh96hzjm86] {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Di bagian bertint, kartu putih sudah menonjol dengan sendirinya. */
.cp-section--alt .cp-reason[b-kh96hzjm86],
.cp-section--alt .cp-service[b-kh96hzjm86],
.cp-section--alt .cp-fleet-group[b-kh96hzjm86],
.cp-section--alt .cp-card[b-kh96hzjm86],
.cp-section--alt .cp-tile[b-kh96hzjm86] {
    box-shadow: none;
}

.cp-reason:hover[b-kh96hzjm86],
.cp-service:hover[b-kh96hzjm86],
.cp-card:hover[b-kh96hzjm86],
.cp-tile:hover[b-kh96hzjm86] {
    transform: translateY(-3px);
    border-color: rgba(18, 48, 94, .28);
    box-shadow: var(--shadow-lg);
}

/* ---------- Tentang ---------- */

.cp-about[b-kh96hzjm86] {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 4rem;
    align-items: start;
}

.cp-commit[b-kh96hzjm86] {
    margin-top: 2.25rem;
    padding: 1.5rem;
    /* Satu-satunya kartu yang diberi warna: ini pernyataan komitmen, dan
       pantas menonjol dari kartu keterangan biasa. */
    background: linear-gradient(150deg, rgba(18, 48, 94, .06), rgba(201, 162, 39, .05));
    border-color: rgba(18, 48, 94, .16);
}

.cp-commit strong[b-kh96hzjm86] {
    display: block;
    margin-top: .25rem;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
    color: var(--brand-deep);
}

.cp-perspective[b-kh96hzjm86] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-perspective li[b-kh96hzjm86] {
    position: relative;
    padding: 1.375rem 0 1.375rem 1.25rem;
    border-top: 1px solid var(--line);
}

.cp-perspective li:first-child[b-kh96hzjm86] {
    border-top: 0;
}

.cp-perspective li[b-kh96hzjm86]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 1.85rem;
    width: .375rem;
    height: .375rem;
    background: var(--gold);
    border-radius: 50%;
}

.cp-perspective span[b-kh96hzjm86] {
    display: block;
    margin-bottom: .25rem;
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-ink);
}

.cp-perspective strong[b-kh96hzjm86] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
}

/* ---------- Alasan ---------- */

.cp-reasons[b-kh96hzjm86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 3rem;
}

.cp-reason[b-kh96hzjm86] {
    padding: 1.75rem 1.5rem;
    overflow: hidden;
}

/* Angka besar di belakang judul. Pada latar terang ia harus gelap beralpha
   rendah dan memudar ke bawah, supaya tidak bersaing dengan tulisannya. */
.cp-reason__no[b-kh96hzjm86] {
    position: absolute;
    top: -.5rem;
    inset-inline-end: .75rem;
    font-size: 4.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(180deg, rgba(18, 48, 94, .14), transparent 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cp-reason h3[b-kh96hzjm86] {
    position: relative;
    margin: 0 0 .625rem;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-deep);
}

.cp-reason p[b-kh96hzjm86] {
    position: relative;
    margin: 0;
    font-size: .875rem;
}

/* ---------- Layanan ---------- */

.cp-services[b-kh96hzjm86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin-top: 3rem;
}

.cp-service[b-kh96hzjm86] {
    padding: 1.875rem 1.5rem;
}

.cp-service__icon[b-kh96hzjm86] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    margin-bottom: 1.125rem;
    font-size: 1.3125rem;
    color: #fff;
    background: linear-gradient(150deg, var(--brand), var(--brand-deep));
    border-radius: .9375rem;
    box-shadow: 0 .375rem .875rem rgba(11, 31, 63, .22);
}

.cp-service h3[b-kh96hzjm86] {
    margin: 0 0 .5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}

.cp-service p[b-kh96hzjm86] {
    margin: 0;
    font-size: .875rem;
}

.cp-service ul[b-kh96hzjm86] {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
}

.cp-service ul li[b-kh96hzjm86] {
    position: relative;
    padding: .1875rem 0 .1875rem 1rem;
    color: var(--ink-dim);
}

.cp-service ul li[b-kh96hzjm86]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .875rem;
    width: .375rem;
    height: 2px;
    background: var(--gold);
}

/* ---------- Armada ---------- */

.cp-fleet[b-kh96hzjm86] {
    margin-top: 3.5rem;
}

.cp-fleet__head[b-kh96hzjm86] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line-strong);
}

.cp-fleet__head h3[b-kh96hzjm86] {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--brand-deep);
}

.cp-fleet__head p[b-kh96hzjm86] {
    margin: 0;
    font-size: .875rem;
}

.cp-fleet-groups[b-kh96hzjm86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 3rem;
}

.cp-fleet-group[b-kh96hzjm86] {
    padding: 1.625rem 1.5rem;
}

.cp-fleet-group h3[b-kh96hzjm86] {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.cp-fleet-group p[b-kh96hzjm86] {
    margin: 0;
    font-size: .875rem;
}

.cp-empty[b-kh96hzjm86] {
    margin-top: 1.75rem;
    font-size: .9375rem;
}

.cp-empty a[b-kh96hzjm86] {
    color: var(--brand);
    font-weight: 600;
}

.cp-cards[b-kh96hzjm86] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: 1.25rem;
}

.cp-card[b-kh96hzjm86] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cp-card__photo[b-kh96hzjm86] {
    position: relative;
    /* Rasio dikunci supaya kartu tetap sejajar walaupun foto yang diunggah
       admin berbeda-beda ukurannya. */
    aspect-ratio: 16 / 10;
    background: linear-gradient(160deg, #eef2f8, #dde5f1);
    overflow: hidden;
}

.cp-card__photo img[b-kh96hzjm86] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.cp-card:hover .cp-card__photo img[b-kh96hzjm86] {
    transform: scale(1.04);
}

.cp-card__placeholder[b-kh96hzjm86] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.75rem;
    color: rgba(18, 48, 94, .16);
}

.cp-card__body[b-kh96hzjm86] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem;
}

.cp-card__body h4[b-kh96hzjm86] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}

.cp-card__tagline[b-kh96hzjm86] {
    margin: .3125rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
}

.cp-card__specs[b-kh96hzjm86] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.cp-card__specs li[b-kh96hzjm86] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .5625rem;
    font-size: .75rem;
    color: var(--ink-soft);
    background: var(--bg-tint);
    border: 1px solid var(--line);
    border-radius: .4375rem;
}

.cp-card__specs i[b-kh96hzjm86] {
    font-size: .8125rem;
    color: var(--brand);
}

.cp-card__foot[b-kh96hzjm86] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: 1.25rem;
}

.cp-card__price[b-kh96hzjm86] {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.cp-card__price small[b-kh96hzjm86] {
    font-size: .6875rem;
    color: var(--ink-dim);
}

.cp-card__price strong[b-kh96hzjm86] {
    font-size: 1.0625rem;
    letter-spacing: -.01em;
    color: var(--brand-deep);
}

.cp-card__ask[b-kh96hzjm86] {
    flex: 0 0 auto;
    padding: .5rem 1rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.cp-card__ask:hover[b-kh96hzjm86] {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
}

/* ---------- Korporat ---------- */

.cp-grid4[b-kh96hzjm86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    margin-top: 2.25rem;
}

.cp-tile[b-kh96hzjm86] {
    padding: 1.5rem 1.375rem;
}

.cp-tile h3[b-kh96hzjm86] {
    margin: 0 0 .4375rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-deep);
}

.cp-tile p[b-kh96hzjm86] {
    margin: 0;
    font-size: .8125rem;
}

.cp-custom[b-kh96hzjm86] {
    margin-top: 1.5rem;
}

.cp-axis[b-kh96hzjm86] {
    padding: 1.25rem 0 0;
    border-top: 2px solid var(--line-strong);
}

.cp-axis p[b-kh96hzjm86] {
    margin: 0;
    font-size: .875rem;
    color: var(--ink);
}

.cp-fineprint[b-kh96hzjm86] {
    margin-top: 1.75rem;
    font-size: .8125rem;
    font-style: italic;
    color: var(--ink-dim);
}

/* ---------- Langkah ---------- */

.cp-steps[b-kh96hzjm86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.5rem 1.25rem;
    margin: 3rem 0 0;
    padding: 0;
    list-style: none;
}

.cp-steps li[b-kh96hzjm86] {
    display: flex;
    gap: 1rem;
    padding-top: 1.375rem;
    /* Garis hijau yang memudar ke kanan: memberi arah baca tanpa panah. */
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--brand), rgba(18, 48, 94, .08)) 1;
}

.cp-steps__no[b-kh96hzjm86] {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: rgba(18, 48, 94, .32);
}

.cp-steps h3[b-kh96hzjm86] {
    margin: 0 0 .25rem;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
}

.cp-steps p[b-kh96hzjm86] {
    margin: 0;
    font-size: .875rem;
}

/* ---------- Dua kolom ---------- */

.cp-two[b-kh96hzjm86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 4rem;
    align-items: start;
}

.cp-check[b-kh96hzjm86] {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.cp-check li[b-kh96hzjm86] {
    position: relative;
    padding: .4375rem 0 .4375rem 1.875rem;
    font-size: .9375rem;
    color: var(--ink-soft);
}

.cp-check li[b-kh96hzjm86]::before {
    content: "\2713";
    position: absolute;
    inset-inline-start: 0;
    top: .4375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: .6875rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border-radius: 50%;
}

.cp-quote[b-kh96hzjm86] {
    margin-top: 1.75rem;
    padding: .375rem 0 .375rem 1.125rem;
    border-inline-start: 3px solid var(--gold);
    font-size: 1rem;
    font-style: italic;
    color: var(--ink) !important;
}

.cp-values[b-kh96hzjm86] {
    margin-top: 2rem;
}

.cp-values div[b-kh96hzjm86] {
    padding: .875rem 0;
    border-top: 1px solid var(--line);
}

.cp-values strong[b-kh96hzjm86] {
    display: block;
    margin-bottom: .125rem;
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-ink);
}

.cp-values span[b-kh96hzjm86] {
    font-size: .875rem;
    color: var(--ink-soft);
}

/* ---------- Visi & misi ---------- */

.cp-vision[b-kh96hzjm86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 4rem;
    align-items: start;
}

.cp-mission[b-kh96hzjm86] {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: misi;
}

.cp-mission li[b-kh96hzjm86] {
    position: relative;
    padding: .875rem 0 .875rem 2.75rem;
    font-size: .9375rem;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
    counter-increment: misi;
}

.cp-mission li:first-child[b-kh96hzjm86] {
    border-top: 0;
}

/* Nomor ditulis sendiri sebagai counter dua digit, supaya sejajar dan
   sepadan dengan penomoran 01..05 di bagian lain halaman. */
.cp-mission li[b-kh96hzjm86]::before {
    content: "0" counter(misi);
    position: absolute;
    inset-inline-start: 0;
    top: .9375rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--gold-ink);
}

/* ---------- Kontak: satu-satunya pita gelap ----------

   Setelah sembilan bagian terang, pita hijau tua di sini bekerja sebagai
   penutup. Ia menandai bahwa halaman sudah sampai pada ajakan bertindak, dan
   perubahan mendadak itulah yang menahan mata sebelum pengunjung pergi.
*/

.cp-cta[b-kh96hzjm86] {
    text-align: center;
    color: #fff;
    background:
        radial-gradient(42rem 24rem at 50% 0%, rgba(201, 162, 39, .18), transparent 62%),
        linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 62%, var(--brand-darkest) 100%);
}

.cp-cta[b-kh96hzjm86]::before {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.cp-cta .cp-kicker[b-kh96hzjm86] {
    justify-content: center;
    color: var(--gold);
}

.cp-cta .cp-h2[b-kh96hzjm86] {
    color: #fff;
}

.cp-cta p[b-kh96hzjm86] {
    color: rgba(255, 255, 255, .78);
}

.cp-cta .cp-lead[b-kh96hzjm86] {
    margin-inline: auto;
}

/* Di atas latar hijau, tombol utama dibalik menjadi emas agar tetap menonjol. */
.cp-cta .cp-btn--primary[b-kh96hzjm86] {
    color: #14100a;
    background: linear-gradient(140deg, #e0c069, var(--gold));
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .28);
}

.cp-cta .cp-btn--ghost[b-kh96hzjm86] {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .35);
}

.cp-cta .cp-btn--ghost:hover[b-kh96hzjm86] {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .6);
}

.cp-contact[b-kh96hzjm86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
    margin: 3.5rem 0 0;
    text-align: start;
}

.cp-contact > div[b-kh96hzjm86] {
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .875rem;
    background: rgba(255, 255, 255, .06);
}

.cp-contact dt[b-kh96hzjm86] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .375rem;
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
}

.cp-contact dd[b-kh96hzjm86] {
    margin: 0;
    font-size: .9375rem;
    color: #fff;
    word-break: break-word;
}

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

.cp-footer[b-kh96hzjm86] {
    padding: 3.5rem 0;
    text-align: center;
    background: var(--brand-darkest);
}

.cp-footer__name[b-kh96hzjm86] {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff !important;
}

.cp-footer__tag[b-kh96hzjm86] {
    margin: .5rem 0 1.75rem;
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold) !important;
}

.cp-footer__links[b-kh96hzjm86] {
    margin: 0 0 1.5rem;
}

/* Bergaris bawah, bukan berbentuk tombol. Ini pintu bagi karyawan, dan tidak
   pantas bersaing perhatian dengan ajakan menghubungi di atasnya. */
.cp-footer__login[b-kh96hzjm86] {
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .25rem;
    text-decoration-thickness: 1px;
    transition: color .18s ease;
}

.cp-footer__login:hover[b-kh96hzjm86] {
    color: var(--gold);
    text-decoration-color: var(--gold);
}

.cp-footer__copy[b-kh96hzjm86] {
    margin: 0;
    font-size: .75rem;
    color: rgba(255, 255, 255, .5) !important;
}

/* ---------- Layar sempit ---------- */

@media (max-width: 991.98px) {

    .cp-section[b-kh96hzjm86] {
        padding: 4rem 0;
    }

    .cp-about[b-kh96hzjm86] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Menu tautan disembunyikan, bukan dijadikan drawer. Halaman ini hanya satu
       halaman: menggulir sudah melewati seluruh isinya, dan menu yang perlu
       dibuka justru menambah satu ketukan tanpa menghemat apa pun. */
    .cp-nav__links[b-kh96hzjm86] {
        display: none;
    }

    .cp-nav[b-kh96hzjm86] {
        justify-content: space-between;
    }

    /* Lockup dikecilkan di layar sempit, tetapi tetap dua baris — yang
       dikurangi ukurannya, bukan susunannya. */
    .cp-nav__brand-mark[b-kh96hzjm86] {
        width: 2.875rem;
        height: 2.875rem;
        padding: .3125rem;
    }

    .cp-nav__brand-name[b-kh96hzjm86] {
        font-size: 1.0625rem;
        letter-spacing: .05em;
    }

    .cp-nav__brand-tag[b-kh96hzjm86] {
        font-size: .625rem;
        letter-spacing: .14em;
    }

    /* Pita nama disembunyikan di layar sempit. Di sana lebarnya berebut dengan
       tulisan hero, dan hiasan tidak boleh mengalahkan isi. */
    .cp-hero__rail[b-kh96hzjm86] {
        display: none;
    }

    .cp-hero__body[b-kh96hzjm86] {
        padding: 3rem 1.25rem 5rem;
    }

    .cp-two[b-kh96hzjm86],
    .cp-vision[b-kh96hzjm86] {
        gap: 2.5rem;
    }
}

/* Di layar sangat sempit, keterangan bidang usaha dilepas. Pada lebar 360px,
   mempertahankannya memaksa nama perusahaan sendiri membungkus ke dua baris —
   dan nama yang patah lebih buruk daripada keterangan yang hilang. */
@media (max-width: 420px) {

    .cp-nav__brand-tag[b-kh96hzjm86] {
        display: none;
    }

    .cp-nav__brand-mark[b-kh96hzjm86] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .cp-nav__brand-name[b-kh96hzjm86] {
        font-size: .9375rem;
    }
}

/* ---------- Menghormati permintaan tanpa gerak ----------

   Sebagian orang mengalami pusing atau mual karena gerakan di layar, dan
   menyatakannya lewat pengaturan sistem. Efek di halaman ini tidak membawa
   informasi apa pun, jadi tidak ada yang hilang bila dihentikan.

   animation: none WAJIB disertai penegasan opacity dan transform. Animasi
   masuk memakai fill-mode both, artinya keadaan awalnya — tak terlihat dan
   tergeser ke bawah — melekat pada elemen. Mematikan animasinya saja tanpa
   mengembalikan keduanya akan membuat judul hero tidak pernah muncul.
*/
@media (prefers-reduced-motion: reduce) {

    .cp-hero__line > span[b-kh96hzjm86],
    .cp-hero__eyebrow[b-kh96hzjm86],
    .cp-hero__lead[b-kh96hzjm86],
    .cp-hero__actions[b-kh96hzjm86],
    .cp-hero__note[b-kh96hzjm86],
    .cp-hero__title-accent[b-kh96hzjm86],
    .cp-hero__rail-track[b-kh96hzjm86],
    .cp-hero__rail-beam[b-kh96hzjm86] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    /*
        Pita nama berjalan tanpa henti — justru jenis gerak yang paling
        mengganggu bagi yang peka. Dihentikan sepenuhnya, dan karena isinya
        ditulis dua rangkap untuk keperluan animasi, sisanya disembunyikan
        supaya tidak tampak sebagai pengulangan yang janggal.
    */
    .cp-hero__rail[b-kh96hzjm86] {
        display: none;
    }

    /* Tanpa sapuan, gradasinya dikunci pada posisi diam supaya tulisannya
       terbaca sebagai emas rata, bukan terpotong di tengah pita terang. */
    .cp-hero__title-accent[b-kh96hzjm86] {
        background-position: 128% 0;
    }

    .cp-reason[b-kh96hzjm86],
    .cp-service[b-kh96hzjm86],
    .cp-card[b-kh96hzjm86],
    .cp-tile[b-kh96hzjm86],
    .cp-card__photo img[b-kh96hzjm86],
    .cp-nav__links a[b-kh96hzjm86]::after,
    .cp-btn[b-kh96hzjm86] {
        transition: none;
    }

    .cp-reason:hover[b-kh96hzjm86],
    .cp-service:hover[b-kh96hzjm86],
    .cp-card:hover[b-kh96hzjm86],
    .cp-tile:hover[b-kh96hzjm86],
    .cp-card:hover .cp-card__photo img[b-kh96hzjm86] {
        transform: none;
    }
}