/* ==========================================================================
   BIRO UMUM — BASE
   Dasar tipografi, aksesibilitas, dan utilitas kecil.
   Semua nilai diambil dari 1-tokens.css — jangan tulis warna/font mentah
   di sini, cukup pakai var(--bu-*).
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--bu-nav-h) + 20px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Atribut [hidden] harus selalu menang.
   Tanpa aturan ini, elemen seperti .bu-gallery { display: grid } akan
   mengalahkan aturan bawaan peramban sehingga elemen tetap terlihat
   walau sudah diberi atribut hidden lewat JavaScript. */
[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   BODY HALAMAN PUBLIK
   -------------------------------------------------------------------------- */
body.bu-body {
    margin: 0;
    font-family: var(--bu-font-body);
    font-size: var(--bu-fs-base);
    font-weight: var(--bu-fw-normal);
    line-height: var(--bu-lh-body);
    color: var(--bu-text);
    background-color: var(--bu-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    font-feature-settings: "cv11", "ss01";
}

/* Kunci scroll saat menu mobile terbuka */
body.bu-body.is-locked {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   JUDUL & TEKS
   Hanya berlaku di dalam pembungkus .bu-* agar tidak mengganggu
   halaman lama yang masih memakai Bootstrap.
   -------------------------------------------------------------------------- */
.bu-display,
.bu-h1,
.bu-h2,
.bu-h3,
.bu-h4 {
    margin: 0 0 0.5em;
    font-family: var(--bu-font-display);
    font-weight: var(--bu-fw-semibold);
    line-height: var(--bu-lh-tight);
    letter-spacing: var(--bu-ls-tight);
    color: inherit;
    text-wrap: balance;
}

.bu-display {
    font-size: var(--bu-fs-hero);
    font-weight: var(--bu-fw-bold);
}
.bu-h1 {
    font-size: var(--bu-fs-h1);
}
.bu-h2 {
    font-size: var(--bu-fs-h2);
}
.bu-h3 {
    font-size: var(--bu-fs-h3);
    line-height: var(--bu-lh-snug);
}
.bu-h4 {
    font-family: var(--bu-font-body);
    font-size: var(--bu-fs-h4);
    font-weight: var(--bu-fw-bold);
    line-height: var(--bu-lh-snug);
    letter-spacing: 0;
}

/* Sub-judul / paragraf pengantar */
.bu-lead {
    margin: 0 0 1.25rem;
    font-size: var(--bu-fs-lead);
    line-height: 1.65;
    color: var(--bu-text-2);
    font-weight: var(--bu-fw-normal);
}

.bu-text {
    margin: 0 0 1rem;
    color: var(--bu-text-2);
}
.bu-text:last-child {
    margin-bottom: 0;
}

.bu-small {
    font-size: var(--bu-fs-sm);
    line-height: 1.6;
}

/* Label kecil huruf kapital berspasi lebar — ciri khas tampilan sinematik */
.bu-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
    font-family: var(--bu-font-body);
    font-size: 0.72rem;
    font-weight: var(--bu-fw-bold);
    letter-spacing: var(--bu-ls-kicker);
    text-transform: uppercase;
    color: var(--bu-brand);
}
.bu-kicker::before {
    content: "";
    width: clamp(20px, 4vw, 42px);
    height: 1px;
    background: currentColor;
    opacity: 0.75;
}
.bu-kicker--center {
    justify-content: center;
}
.bu-kicker--center::after {
    content: "";
    width: clamp(20px, 4vw, 42px);
    height: 1px;
    background: currentColor;
    opacity: 0.75;
}
.bu-kicker--gold {
    color: var(--bu-gold);
}
.bu-kicker--light {
    color: var(--bu-gold-light);
}

/* Penegas warna pada sebagian judul */
.bu-accent-gold {
    color: var(--bu-gold);
}
.bu-accent-brand {
    color: var(--bu-brand);
}
.bu-italic {
    font-style: italic;
}

/* Blok teks panjang (dipakai di kartu berisi paragraf) */
.bu-prose p {
    margin: 0 0 0.9rem;
    color: var(--bu-text-2);
}
.bu-prose p:last-child {
    margin-bottom: 0;
}
.bu-prose strong,
.bu-prose b {
    color: var(--bu-text);
    font-weight: var(--bu-fw-bold);
}

/* --------------------------------------------------------------------------
   TAUTAN

   PENTING — soal spesifisitas CSS:
   Aturan dasar di bawah sengaja memakai selektor `a` polos (spesifisitas
   0-0-1), BUKAN `.bu-body a` (0-1-1). Alasannya, tautan sering dipakai
   sebagai komponen — tombol (.bu-btn--primary), menu (.bu-nav__link),
   kartu layanan (.bu-service) — yang warnanya diatur lewat satu kelas
   (0-1-0). Kalau aturan dasarnya lebih kuat, warna komponen akan tertimpa
   dan teks tombol bisa jadi tak terbaca (mis. hijau di atas hijau).

   Jadi: tautan mewarisi warna induknya, dan warna khas tautan hanya
   diberikan di dalam blok teks (prosa) atau lewat kelas .bu-link.
   Berkas ini hanya dimuat pada layout publik, sehingga selektor `a`
   polos aman dan tidak mengganggu halaman admin.
   -------------------------------------------------------------------------- */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--bu-dur-fast) var(--bu-ease);
}

/* Tautan di dalam teks berjalan — tetap terlihat sebagai tautan */
.bu-link,
p a,
.bu-prose a,
.bu-text a,
.bu-lead a,
.bu-small a,
.bu-vm__item a,
.bu-auth__help a,
.bu-auth__foot a {
    color: var(--bu-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.bu-link:hover,
p a:hover,
.bu-prose a:hover,
.bu-text a:hover,
.bu-lead a:hover,
.bu-small a:hover,
.bu-vm__item a:hover,
.bu-auth__help a:hover,
.bu-auth__foot a:hover {
    color: var(--bu-brand-dark);
}

/* Tautan di atas latar gelap */
.bu-on-dark .bu-link,
.bu-on-dark p a,
.bu-on-dark .bu-prose a,
.bu-on-dark .bu-small a {
    color: var(--bu-gold-light);
}

.bu-link-quiet {
    text-decoration: none;
    color: inherit;
}

/* --------------------------------------------------------------------------
   AKSESIBILITAS
   Cincin fokus jelas untuk pengguna keyboard — penting bagi semua usia.
   -------------------------------------------------------------------------- */
.bu-body :focus-visible {
    outline: 2px solid var(--bu-brand);
    outline-offset: 3px;
    border-radius: var(--bu-radius-xs);
}
.bu-body .bu-on-dark :focus-visible,
.bu-nav--overlay:not(.is-stuck) :focus-visible {
    outline-color: var(--bu-gold-light);
}

/* Lewati ke konten (screen reader / keyboard) */
.bu-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 0.85rem 1.4rem;
    background: var(--bu-brand);
    color: #fff;
    border-radius: 0 0 var(--bu-radius-sm) 0;
    font-weight: var(--bu-fw-semibold);
}
.bu-skip:focus {
    left: 0;
}

.bu-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   MEDIA
   -------------------------------------------------------------------------- */
.bu-body img,
.bu-body svg,
.bu-body video {
    max-width: 100%;
    height: auto;
}

.bu-figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--bu-radius-lg);
    background: var(--bu-bg-3);
}
.bu-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   GARIS PEMISAH
   -------------------------------------------------------------------------- */
.bu-rule {
    height: 1px;
    border: 0;
    margin: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--bu-line-strong) 18%,
        var(--bu-line-strong) 82%,
        transparent
    );
}
.bu-rule--gold {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--bu-gold-rgb), 0.55) 20%,
        rgba(var(--bu-gold-rgb), 0.55) 80%,
        transparent
    );
}

/* --------------------------------------------------------------------------
   ANIMASI MUNCUL SAAT DIGULIR (cinematic reveal)
   Elemen hanya disembunyikan bila JavaScript aktif (html.bu-js),
   sehingga konten tetap terbaca kalau JS gagal dimuat.
   -------------------------------------------------------------------------- */
/* Catatan: pergeseran memakai properti `translate`, BUKAN `transform`.
   Sebabnya, banyak komponen memakai `transform` untuk efek sorot
   (mis. .bu-card--hover:hover { transform: translateY(-6px) }). Bila
   reveal juga memakai `transform`, aturan .bu-reveal.is-visible yang
   lebih spesifik akan mematikan efek sorot tersebut. */
/* Catatan: TIDAK memakai `will-change`. Properti itu memaksa setiap elemen
   ber-reveal menjadi lapisan GPU tersendiri secara permanen. Bila banyak
   elemen semacam itu berada dalam satu induk terisolasi (isolation: isolate
   + overflow: hidden) yang juga berisi lapisan ber-animasi, sebagian lapisan
   bisa gagal dilukis — elemennya tetap bisa diklik tetapi tampak kosong.
   Transisi di bawah ini sudah mulus tanpa petunjuk tersebut. */
.bu-js .bu-reveal {
    opacity: 0;
    translate: 0 26px;
    transition:
        opacity var(--bu-dur-cinematic) var(--bu-ease-out),
        translate var(--bu-dur-cinematic) var(--bu-ease-out);
}
.bu-js .bu-reveal.is-visible {
    opacity: 1;
    translate: none;
}
/* Penundaan bertingkat agar terasa berlapis seperti adegan film */
.bu-js .bu-reveal[data-delay="1"] {
    transition-delay: 90ms;
}
.bu-js .bu-reveal[data-delay="2"] {
    transition-delay: 180ms;
}
.bu-js .bu-reveal[data-delay="3"] {
    transition-delay: 270ms;
}
.bu-js .bu-reveal[data-delay="4"] {
    transition-delay: 360ms;
}
.bu-js .bu-reveal[data-delay="5"] {
    transition-delay: 450ms;
}

@media (prefers-reduced-motion: reduce) {
    .bu-js .bu-reveal {
        opacity: 1;
        translate: none;
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   UTILITAS KECIL
   -------------------------------------------------------------------------- */
.bu-center {
    text-align: center;
}
.bu-mt-0 {
    margin-top: 0;
}
.bu-mb-0 {
    margin-bottom: 0;
}
.bu-nowrap {
    white-space: nowrap;
}
.bu-on-dark {
    color: var(--bu-text-inv);
}
.bu-on-dark .bu-text,
.bu-on-dark .bu-lead,
.bu-on-dark .bu-prose p {
    color: var(--bu-text-inv-2);
}
.bu-on-dark .bu-prose strong,
.bu-on-dark .bu-prose b {
    color: #fff;
}

/* Lapisan butiran film — ditempel di atas media gelap.

   CATATAN: sengaja TIDAK memakai mix-blend-mode. Lapisan ber-blend-mode
   memaksa induknya menjadi grup terisolasi saat komposit, dan bila di
   dalam induk yang sama ada elemen ber-backdrop-filter, sebagian elemen
   bisa dirender transparan (hilang) tergantung pembagian tile GPU.
   Pada opasitas serendah ini hasilnya praktis sama tanpa blend mode. */
.bu-grain {
    position: absolute;
    inset: 0;
    z-index: -1; /* di atas scrim (-2), tetap di belakang konten */
    pointer-events: none;
    background-image: var(--bu-grain);
    background-size: 160px 160px;
    opacity: 0.05;
}