/* =====================================================================================================================
   Halaman BERFOTO (CARA-BAKU 103, disetujui Devin 20 Okt 2026) — terang & hangat, foto suasana UMKM sebagai bintang.
   Dimuat oleh includes/header.php bila halaman menyetel $halamanBerfoto = true (html[data-berfoto], tema terang dipaksa).
   Pratinjau acuan: desain/situneo/foto-induk-20261020/beranda4.tpl.html
   ===================================================================================================================== */
[data-berfoto] {
    --bf-gading: #F7F4EE; --bf-gading2: #EFEADF; --bf-putih: #FFFFFF; --bf-tinta: #0B1730; --bf-tinta2: #22304D;
    --bf-redup: #545D72; --bf-garis: #E3DDD0; --bf-emas: #C9A227; --bf-emas-tua: #7A5E0B;   /* 20 Okt: #8A6C0E di #EFEADF hanya 4,14:1 (PSI) → 5,1:1 */ --bf-emas-lembut: #F5ECD2;
    --bf-navy: #0B1730; --bf-kurva: cubic-bezier(.2, .8, .2, 1);
    /* token situs ikut terang-hangat supaya kepala, menu HP, dan komponen bersama senada */
    --bg-body: #F7F4EE; --bg-nav: rgba(247, 244, 238, .92); --bg-card: #FFFFFF; --text-primary: #0B1730; --text-secondary: #22304D;
    --text-muted: #545D72; --border: rgba(11, 23, 48, .1);
    /* biru gaya lama (--primary #1E5C99) → navy merek di semua komponen bawaan */
    --primary: #0B1730; --primary-light: #1A2A4F; --primary-dark: #060D1D;
    /* teks label divisi di latar gading (20 Okt 2026 malam, axe: SITUDEV #2960FF di lencana 4,15:1) → ≥ 5,5:1 */
    --dev-teks: #1F4FD8; --digital-teks: #17665F; --serve-teks: #845304;
}
[data-berfoto] body { background: var(--bf-gading); color: var(--bf-tinta); }
[data-berfoto] .theme-toggle { display: none; }
[data-berfoto] .navbar { background: var(--bg-nav); }
[data-berfoto] .navbar.scrolled { box-shadow: 0 6px 24px -18px rgba(11, 23, 48, .4); }
[data-berfoto] .nav-link { color: var(--bf-tinta2); }
[data-berfoto] .nav-link:hover, [data-berfoto] .nav-link.active { color: var(--bf-tinta); }
[data-berfoto] .btn-accent { background: var(--bf-emas); color: var(--bf-tinta); border-radius: 999px; }
[data-berfoto] .lang-toggle { color: var(--bf-tinta); border-color: var(--bf-garis); }
/* tombol bawaan situs di halaman berfoto: navy + emas, bulat, timbul (bukan biru gaya lama) */
[data-berfoto] .btn { border-radius: 999px; }
[data-berfoto] .btn-primary { background: var(--bf-tinta); color: #FFFFFF; border-color: var(--bf-tinta); }
[data-berfoto] .btn-primary:hover { background: #1A2A4F; color: #FFFFFF; border-color: #1A2A4F; }
[data-berfoto] .btn-outline { background: transparent; color: var(--bf-tinta); border: 1.5px solid var(--bf-tinta); }
[data-berfoto] .btn-outline:hover { background: var(--bf-tinta); color: var(--bf-gading); }

/* 21 Okt 2026 (PSI Speed Index): blok [data-reveal] terlihat sejak bingkai pertama; main.js hanya menyembunyikan blok yang saat dimuat
   berada di luar layar (.bf-tunggu) lalu memunculkannya saat digulir. style.css lama: semua blok transparan sampai 0,5-1,1 dtk. */
[data-berfoto] [data-reveal] { opacity: 1; transform: none; animation: none; }
[data-berfoto] [data-reveal].bf-tunggu { opacity: 0; transform: translateY(30px); }
@media (prefers-reduced-motion: reduce) { [data-berfoto] [data-reveal].bf-tunggu { opacity: 1; transform: none; } }

/* 21 Okt 2026 (PSI /privacy aksesibilitas 96: "tautan hanya dibedakan warna"): tautan di dalam kalimat kartu bergaris bawah */
[data-berfoto] .card :is(p, li) > a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }

/* kaki situs navy */
[data-berfoto] .footer { background: var(--bf-navy); color: #C3CAD9; border-top: 0; }
[data-berfoto] .footer .footer-heading { color: #FFFFFF; }
[data-berfoto] .footer .footer-brand p, [data-berfoto] .footer .footer-links a, [data-berfoto] .footer .footer-bottom { color: #B9C1D2; }
[data-berfoto] .footer .footer-links li, [data-berfoto] .footer .footer-links li i { color: #B9C1D2; }
[data-berfoto] .footer .footer-links a:hover { color: #F2D477; }
[data-berfoto] .footer .footer-social a { color: #FFFFFF; border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); }
[data-berfoto] .footer .footer-bottom { border-top-color: rgba(255, 255, 255, .12); }
[data-berfoto] .footer .footer-bottom a { color: #E6EAF2; }

/* ---------- unsur bersama ---------- */
.bf-label { font: 600 .8125rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--bf-emas-tua); display: inline-flex; align-items: center; gap: .625rem; }
.bf-label::before { content: ""; width: 24px; height: 2px; background: var(--bf-emas); }
.bf-label-terang { color: #F2D477; }
.bf-seksi { padding-block: clamp(3.5rem, 7vw, 6rem); }
.bf-putih { background: var(--bf-putih); }
.bf-gading2 { background: var(--bf-gading2); }
.bf-seksi h2, .bf-karir h2, .bf-tutup h2 { font: 800 clamp(1.875rem, 3.6vw, 2.875rem)/1.12 var(--font-heading); letter-spacing: -.025em; margin: .75rem 0 .875rem; text-wrap: balance; color: inherit; }
.bf-kepala { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.bf-kepala > div { max-width: 40rem; }
.bf-kepala > p { color: var(--bf-redup); margin: 0; max-width: 30rem; line-height: 1.7; }
.bf-tengah { display: flex; justify-content: center; margin-top: 2rem; }
.bf-tbl { display: inline-flex; align-items: center; gap: .625rem; font: 700 1rem/1 var(--font-heading); padding: 1rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: transform .2s var(--bf-kurva), box-shadow .2s, background .2s, color .2s; }
.bf-tbl svg { width: 18px; height: 18px; flex: none; }
.bf-tbl-emas { background: var(--bf-emas); color: var(--bf-tinta); box-shadow: 0 8px 20px -8px rgba(201, 162, 39, .7); }
.bf-tbl-emas:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(201, 162, 39, .8); color: var(--bf-tinta); }
.bf-tbl-garis { border-color: var(--bf-tinta); color: var(--bf-tinta); background: transparent; }
.bf-tbl-garis:hover { transform: translateY(-2px); background: var(--bf-tinta); color: var(--bf-gading); }
.bf-tbl-putih { background: #FFFFFF; color: var(--bf-tinta); }
.bf-tbl-putih:hover { transform: translateY(-2px); color: var(--bf-tinta); }
.bf-tbl:active { transform: translateY(1px); }
.bf-tbl:focus-visible, .bf-panah:focus-visible, [data-berfoto] a:focus-visible { outline: 2px solid var(--bf-emas); outline-offset: 3px; }
.bf-panah { display: inline-flex; align-items: center; gap: .5rem; font: 700 .96875rem var(--font-heading); color: var(--bf-tinta); text-decoration: none; }
.bf-panah span { transition: transform .25s var(--bf-kurva); }
a:hover .bf-panah span, .bf-panah:hover span { transform: translateX(4px); }

/* ---------- hero berfoto ---------- */
.bf-hero { position: relative; min-height: min(86vh, 820px); display: flex; align-items: center; overflow: hidden; background: #D9CBB4; isolation: isolate; }
.bf-hero-foto { position: absolute; inset: 0; z-index: -2; }
.bf-hero-foto picture, .bf-hero-foto img { width: 100%; height: 100%; display: block; }
.bf-hero-foto img { object-fit: cover; object-position: 40% 45%; }
.bf-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(247, 244, 238, 0) 44%, rgba(247, 244, 238, .9) 56%, rgba(247, 244, 238, .96) 72%); }
.bf-hero .container { display: flex; justify-content: flex-end; width: 100%; }
.bf-hero-teks { max-width: 34rem; padding-block: 4.5rem; }
.bf-hero h1 { font: 800 clamp(2.375rem, 4.8vw, 4rem)/1.1 var(--font-heading); letter-spacing: -.03em; margin: 1rem 0 1.125rem; text-wrap: balance; color: var(--bf-tinta); }
.bf-hero h1 em { font-style: normal; color: var(--bf-emas-tua); white-space: nowrap; }
.bf-hero p { color: var(--bf-tinta2); margin: 0 0 1.75rem; font-size: 1.125rem; line-height: 1.7; }
.bf-aksi { display: flex; gap: .75rem; flex-wrap: wrap; }
.bf-percaya { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .625rem 1.375rem; color: var(--bf-redup); font-size: .9375rem; }
.bf-percaya li { display: inline-flex; align-items: center; gap: .5rem; }
.bf-percaya svg { width: 18px; height: 18px; color: var(--bf-emas-tua); }

/* ---------- karya ---------- */
.bf-karya-rel { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(18.5rem, 1fr); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1rem; scrollbar-width: thin; }
/* 20 Okt (uji_lengkap): span.sr-only absolut di kartu dulu lolos dari jalur geser → halaman melebar 237–752 px */
.bf-karya-kartu { position: relative; scroll-snap-align: start; background: var(--bf-putih); border-radius: 14px; padding: .75rem .75rem 1.125rem; text-decoration: none; color: inherit; box-shadow: 0 1px 0 var(--bf-garis), 0 18px 40px -28px rgba(11, 23, 48, .35); transition: transform .3s var(--bf-kurva), box-shadow .3s; }
.bf-karya-kartu:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--bf-garis), 0 28px 50px -28px rgba(11, 23, 48, .45); }
.bf-karya-layar { border-radius: 8px; overflow: hidden; background: var(--bf-gading2); }
.bf-peramban { display: flex; align-items: center; gap: 5px; height: 24px; padding-inline: 10px; background: #FFFFFF; border-bottom: 1px solid var(--bf-garis); font: 500 .75rem var(--font-body); color: var(--bf-redup); }
.bf-peramban i { width: 7px; height: 7px; border-radius: 50%; background: #D6D0C4; }
.bf-peramban span { margin-left: .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-karya-layar img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; display: block; }
.bf-karya-kartu h3 { font: 700 1.125rem/1.3 var(--font-heading); margin: .875rem .25rem .125rem; }
.bf-karya-kartu p { margin: 0 .25rem; color: var(--bf-redup); font-size: 1rem; }

/* ---------- divisi ---------- */
.bf-divisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.bf-divisi-kartu { background: var(--bf-putih); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; box-shadow: 0 1px 0 var(--bf-garis), 0 22px 44px -32px rgba(11, 23, 48, .4); transition: transform .3s var(--bf-kurva); }
.bf-divisi-kartu:hover { transform: translateY(-4px); }
.bf-divisi-foto { aspect-ratio: 5/3; overflow: hidden; }
.bf-divisi-foto picture, .bf-divisi-foto img { width: 100%; height: 100%; display: block; }
.bf-divisi-foto img { object-fit: cover; transition: transform .9s var(--bf-kurva); }
.bf-divisi-kartu:hover .bf-divisi-foto img { transform: scale(1.05); }
.bf-divisi-isi { padding: 1.5rem 1.625rem 1.625rem; display: flex; flex-direction: column; gap: .625rem; flex: 1; }
.bf-divisi-nama { font: 700 .8125rem var(--font-body); letter-spacing: .12em; color: var(--bf-emas-tua); }
.bf-divisi-isi h3 { font: 800 1.5rem/1.2 var(--font-heading); letter-spacing: -.015em; margin: 0; }
.bf-divisi-isi p { margin: 0; color: var(--bf-redup); line-height: 1.65; }
.bf-divisi-kaki { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; margin-top: auto; padding-top: .875rem; border-top: 1px solid var(--bf-garis); }
.bf-harga { font-size: .9375rem; color: var(--bf-redup); }
.bf-harga b { font: 800 1.1875rem var(--font-heading); color: var(--bf-tinta); }

/* ---------- paket ---------- */
.bf-paket { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.bf-paket-kartu { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1/1; color: #FFFFFF; text-decoration: none; isolation: isolate; display: block; }
.bf-paket-kartu picture, .bf-paket-kartu img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; }
.bf-paket-kartu img { object-fit: cover; transition: transform .9s var(--bf-kurva); }
.bf-paket-kartu::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 23, 48, 0) 38%, rgba(11, 23, 48, .9) 100%); }
.bf-paket-kartu:hover img { transform: scale(1.06); }
.bf-paket-isi { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.375rem; }
.bf-paket-isi h3 { font: 800 1.375rem/1.2 var(--font-heading); margin: 0 0 .375rem; color: #FFFFFF; }
.bf-paket-harga { font-size: .9375rem; color: #EEF1F7; }
.bf-paket-harga b { font: 800 1.125rem var(--font-heading); color: #F2D477; }
.bf-paket-lihat { display: inline-flex; align-items: center; gap: .375rem; margin-top: .75rem; font: 700 .90625rem var(--font-heading); background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); padding: .5rem .875rem; border-radius: 999px; transition: background .25s, color .25s; }
.bf-paket-kartu:hover .bf-paket-lihat, .bf-paket-kartu:focus-visible .bf-paket-lihat { background: var(--bf-emas); color: var(--bf-tinta); }

/* ---------- belah: foto + teks ---------- */
.bf-belah { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.bf-belah-foto { border-radius: 18px; overflow: hidden; }
.bf-belah-foto picture, .bf-belah-foto img { width: 100%; height: 100%; display: block; }
.bf-belah-foto img { object-fit: cover; }
.bf-tegak { aspect-ratio: 4/5; }
.bf-tegak img { object-position: 62% 50%; }
.bf-langkah { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.bf-langkah li { display: grid; grid-template-columns: 3.25rem 1fr; gap: 0 1.125rem; padding: 1.125rem 0; border-bottom: 1px solid var(--bf-garis); }
.bf-langkah li:last-child { border-bottom: 0; }
.bf-nomor { width: 44px; height: 44px; border-radius: 50%; background: var(--bf-emas-lembut); color: var(--bf-emas-tua); display: grid; place-items: center; font: 800 1.0625rem var(--font-heading); grid-row: span 2; }
.bf-langkah b { font: 700 1.1875rem/1.3 var(--font-heading); }
.bf-langkah span:not(.bf-nomor) { color: var(--bf-redup); }

/* ---------- panel klien ---------- */
.bf-belah-panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bf-perangkat { position: relative; padding: 0 4% 1.875rem; }   /* alas laptop -4% tidak keluar layar (uji_lengkap tablet/HP miring) */
.bf-laptop { background: #0A0F1D; border-radius: 14px 14px 0 0; padding: 12px 12px 0; box-shadow: 0 30px 60px -30px rgba(11, 23, 48, .6); }
.bf-laptop img { border-radius: 4px 4px 0 0; width: 100%; height: auto; display: block; }
.bf-alas { height: 14px; background: linear-gradient(#CFC8BA, #A99F8C); border-radius: 0 0 14px 14px; margin: 0 -4%; }
.bf-hp { position: absolute; right: -1%; bottom: 0; width: 25%; background: #0A0F1D; border-radius: 24px; padding: 8px; box-shadow: 0 24px 50px -20px rgba(11, 23, 48, .7); }
.bf-hp img { border-radius: 17px; width: 100%; height: auto; display: block; }
.bf-poin { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.bf-poin li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .125rem .875rem; }
.bf-poin svg { width: 22px; height: 22px; color: var(--bf-emas-tua); grid-row: span 2; margin-top: .1875rem; }
.bf-poin b { font: 700 1.125rem/1.3 var(--font-heading); }
.bf-poin span { color: var(--bf-redup); }

/* ---------- angka ---------- */
.bf-angka { background: var(--bf-navy); color: #FFFFFF; padding-block: 3rem; }
.bf-angka .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.bf-angka b { display: block; font: 800 clamp(2.25rem, 4vw, 3.25rem)/1 var(--font-heading); letter-spacing: -.02em; color: #F2D477; }
.bf-angka span { display: block; margin-top: .5rem; color: #C3CAD9; }

/* ---------- bukti ---------- */
.bf-bukti { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.bf-bukti li { background: var(--bf-putih); border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; box-shadow: 0 1px 0 var(--bf-garis); }
.bf-bukti h3 { font: 700 1.125rem/1.3 var(--font-heading); margin: 0; }
.bf-bukti p { margin: 0 0 .5rem; color: var(--bf-redup); font-size: .96875rem; line-height: 1.65; }
.bf-bukti .bf-panah { margin-top: auto; font-size: .9375rem; }

/* ---------- produk ---------- */
.bf-produk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.bf-produk-kartu { background: var(--bf-gading); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.bf-produk-gambar { aspect-ratio: 16/10; background: var(--bf-gading2); overflow: hidden; }
.bf-produk-gambar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-produk-isi { padding: 1.375rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.bf-produk-isi h3 { font: 800 1.25rem var(--font-heading); margin: 0; }
.bf-produk-isi p { margin: 0; color: var(--bf-redup); font-size: .96875rem; line-height: 1.65; flex: 1; }
.bf-segera { align-self: flex-start; font: 600 .8125rem var(--font-body); color: var(--bf-emas-tua); background: var(--bf-emas-lembut); padding: .3rem .75rem; border-radius: 999px; }

/* ---------- karier & penutup berfoto ---------- */
.bf-karir, .bf-tutup { position: relative; overflow: hidden; color: #FFFFFF; isolation: isolate; }
.bf-karir-foto, .bf-tutup-foto { position: absolute; inset: 0; z-index: -2; }
.bf-karir-foto picture, .bf-karir-foto img, .bf-tutup-foto picture, .bf-tutup-foto img { width: 100%; height: 100%; display: block; }
.bf-karir-foto img { object-fit: cover; object-position: 30% 40%; }
.bf-tutup-foto img { object-fit: cover; object-position: 70% 50%; }
.bf-karir::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(11, 23, 48, .94) 0%, rgba(11, 23, 48, .76) 44%, rgba(11, 23, 48, .08) 76%); }
.bf-tutup::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 23, 48, .93) 0%, rgba(11, 23, 48, .74) 42%, rgba(11, 23, 48, .1) 75%); }
.bf-karir .container { display: flex; justify-content: flex-end; }
.bf-karir-teks, .bf-tutup-teks { max-width: 31rem; padding-block: clamp(4.5rem, 9vw, 8rem); }
.bf-karir p, .bf-tutup p { color: #D6DCE8; margin: 0 0 1.75rem; font-size: 1.0625rem; line-height: 1.7; }
.bf-tutup h2 { font-size: clamp(2.125rem, 4.2vw, 3.5rem); }

/* ---------- artikel ---------- */
.bf-artikel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.bf-artikel-kartu { background: var(--bf-putih); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; box-shadow: 0 1px 0 var(--bf-garis), 0 18px 40px -32px rgba(11, 23, 48, .35); transition: transform .3s var(--bf-kurva); }
.bf-artikel-kartu:hover { transform: translateY(-4px); }
.bf-artikel-gambar { aspect-ratio: 16/10; background: var(--bf-gading2); overflow: hidden; }
.bf-artikel-gambar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-artikel-isi { padding: 1.125rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .375rem; flex: 1; }
.bf-artikel-kat { font: 600 .75rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--bf-emas-tua); }
.bf-artikel-isi h3 { font: 700 1.0625rem/1.4 var(--font-heading); margin: 0; }
.bf-artikel-isi p { margin: 0; color: var(--bf-redup); font-size: 1rem; line-height: 1.6; }
.bf-artikel-tgl { margin-top: auto; padding-top: .625rem; font-size: .8125rem; color: var(--bf-redup); }

/* ---------- pembuka halaman berfoto: teks kiri + foto kanan + busur SVG + lencana mengikuti kursor (kepalaFoto()) ---------- */
[data-berfoto] .page-header.bf-ph { text-align: left; padding: calc(var(--nav-height) + 2.5rem) 0 3.25rem; overflow: visible; }
[data-berfoto] .page-header.bf-ph::before { display: none; }
.bf-ph-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
.bf-ph-teks .section-label { font: 600 .8125rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--bf-emas-tua); display: inline-flex; align-items: center; gap: .625rem; background: none; border: 0; padding: 0; }
.bf-ph-teks .section-label::before { content: ""; width: 24px; height: 2px; background: var(--bf-emas); }
[data-berfoto] .bf-ph h1 { font: 800 clamp(2.25rem, 4.4vw, 3.5rem)/1.1 var(--font-heading); letter-spacing: -.03em; margin: .875rem 0 1rem; color: var(--bf-tinta); text-wrap: balance; }
[data-berfoto] .bf-ph-teks p { margin: 0; max-width: 34rem; color: var(--bf-tinta2); font-size: 1.125rem; line-height: 1.7; }
.bf-ph-teks > div[style] { margin-left: 0 !important; justify-content: flex-start !important; }
.bf-ph-aksi { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
[data-berfoto] .page-header.bf-ph-akhir { padding-bottom: 5rem; }
.bf-ph-foto { position: relative; --gx: 0; --gy: 0; }
.bf-ph-bingkai { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -34px rgba(11, 23, 48, .55); transform: translate(calc(var(--gx) * -6px), calc(var(--gy) * -6px)); transition: transform .6s var(--bf-kurva); z-index: 1; }
.bf-ph-bingkai picture, .bf-ph-bingkai img { width: 100%; height: 100%; display: block; }
.bf-ph-bingkai img { object-fit: cover; }
.bf-ph-titik { position: absolute; left: -26px; bottom: -26px; width: 132px; height: 132px; background: radial-gradient(circle, var(--bf-emas) 1.6px, transparent 2px) 0 0 / 14px 14px; opacity: .45; transform: translate(calc(var(--gx) * 8px), calc(var(--gy) * 8px)); transition: transform .6s var(--bf-kurva); }
.bf-ph-busur { position: absolute; right: -34px; top: -34px; width: 124px; height: 124px; z-index: 2; overflow: visible; transform: translate(calc(var(--gx) * 10px), calc(var(--gy) * 10px)); transition: transform .6s var(--bf-kurva); }
.bf-ph-busur path { fill: none; stroke: var(--bf-emas); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bf-ph-busur path + path { stroke-opacity: .5; }
.bf-ph-busur circle { fill: var(--bf-emas); }
/* 20 Okt 2026 malam (PSI Speed Index 4,3 dtk): busur & lencana TAMPIL UTUH sejak bingkai pertama; digambar ulang hanya saat
   pembuka disorot/diketuk (.bf-ulang dari main.js) — dulu lencana baru muncul 1 dtk, busur 1,6 dtk setelah halaman tampil */
.bf-ulang .bf-ph-busur path { animation: bfBusur 1.4s var(--bf-kurva) both; }
.bf-ulang .bf-ph-busur path + path { animation-delay: .2s; }
@keyframes bfBusur { from { stroke-dashoffset: 1; } }
@keyframes bfTitik { from { opacity: 0; transform: scale(0); } }
.bf-ph-lencana { position: absolute; left: -18px; bottom: 24px; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; background: #FFFFFF; color: var(--bf-tinta); font: 600 .9375rem/1.2 var(--font-body); padding: .75rem 1.125rem; border-radius: 999px; box-shadow: 0 16px 34px -16px rgba(11, 23, 48, .45); transform: translate(calc(var(--gx) * 14px), calc(var(--gy) * 14px)); transition: transform .6s var(--bf-kurva); }
.bf-ph-lencana svg { width: 18px; height: 18px; color: #FFFFFF; background: var(--bf-emas-tua); border-radius: 50%; padding: 3px; flex: none; }
@keyframes bfLencana { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 960px) {
    .bf-ph-grid { grid-template-columns: minmax(0, 1fr); }
    .bf-ph-foto { margin-inline: 8px; }
    /* 21 Okt 2026 (uji_lengkap keluar-tepi): titik hias tidak melewati tepi kiri layar HP (dulu mulai -6 px) */
    .bf-ph-titik { left: -8px; bottom: -18px; width: 112px; height: 112px; }
    .bf-ph-busur { right: -8px; top: -22px; width: 84px; height: 84px; }
    .bf-ph-lencana { left: 10px; bottom: 14px; font-size: .875rem; }
}
@media (max-width: 640px) {
    [data-berfoto] .bf-ph h1 { font-size: clamp(2rem, 8.6vw, 2.5rem) !important; }
}
@media (prefers-reduced-motion: reduce) {
    .bf-ph-bingkai, .bf-ph-titik, .bf-ph-busur, .bf-ph-lencana { transform: none !important; transition: none !important; }
    .bf-ph-busur path, .bf-ph-busur circle, .bf-ph-lencana { animation: none !important; }
}

/* ---------- ilustrasi SVG interaktif pembuka halaman tanpa foto (kepalaIlustrasi(), app/helpers/ilustrasi-svg.php) ----------
   Keadaan akhir tampil langsung. Gerak: lapis ikut kursor (--gx/--gy), disorot/diketuk → .bf-ulang menggambar ulang,
   gerak diam baru jalan setelah interaksi pertama (html.bf-gerak). Semua mati pada "kurangi gerak". */
.bf-il-bingkai { background: linear-gradient(160deg, #FCFAF5 0%, #EFE8DA 100%); }
.bf-il-svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.bf-il-l1, .bf-il-l2, .bf-il-l3, .bf-il-jarum { transition: transform .7s var(--bf-kurva); }
.bf-il-l1 { transform: translate(calc(var(--gx) * -5px), calc(var(--gy) * -5px)); }
.bf-il-l2 { transform: translate(calc(var(--gx) * 7px), calc(var(--gy) * 7px)); }
.bf-il-l3 { transform: translate(calc(var(--gx) * 16px), calc(var(--gy) * 16px)); }
.bf-il-jarum { transform-box: view-box; transform-origin: 374px 256px; transform: rotate(calc(var(--gx) * 50deg)); }
.il-p { fill: #FFFFFF; } .il-pg { fill: #FFFFFF; stroke: #E3DDD0; stroke-width: 1.5; }
.il-t { fill: #0B1730; } .il-t2 { fill: #22304D; } .il-e { fill: #C9A227; } .il-et { fill: #7A5E0B; } .il-el { fill: #F5ECD2; }
.il-g { fill: #EFEADF; } .il-b { fill: #E3DDD0; } .il-bb { fill: rgba(255, 255, 255, .55); } .il-bay { fill: rgba(11, 23, 48, .07); }
.il-ge, .il-gt, .il-gb, .il-cek { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.il-ge { stroke: #C9A227; stroke-width: 3; } .il-gt { stroke: #0B1730; stroke-width: 3; } .il-gb { stroke: #E3DDD0; stroke-width: 3; }
.il-cek { stroke: #FFFFFF; stroke-width: 3; }
.il-putus { stroke-dasharray: 5 9; }
.il-gambar { stroke-dasharray: 1; stroke-dashoffset: 0; }
.il-muncul, .il-ketik, .il-putar, .il-denyut, .il-titik { transform-box: fill-box; transform-origin: center; }
.il-ketik { transform-origin: left center; }
.il-ayun { transform-box: view-box; }
.bf-il-sisip { position: absolute; left: var(--sx); top: var(--sy); transform: translate(-50%, -50%); z-index: 1; display: grid; place-items: center; color: var(--bf-tinta); font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1; pointer-events: none; }
.bf-il-sisip img { width: 1.6em; height: 1.6em; object-fit: contain; }
.bf-il .bf-ph-bingkai { transform: translate(calc(var(--gx) * -3px), calc(var(--gy) * -3px)); }
.bf-il[data-ilus] { cursor: pointer; }
.bf-il .bf-ph-lencana { bottom: -20px; }   /* lencana menggantung di tepi bawah — tidak menutupi isi gambar */
@keyframes ilGambar { from { stroke-dashoffset: 1; } }
@keyframes ilMuncul { from { opacity: 0; transform: scale(.55); } }
@keyframes ilKetik { from { transform: scaleX(0); } }
@keyframes ilPutar { to { transform: rotate(360deg); } }
@keyframes ilApung { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
@keyframes ilTitik { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
@keyframes ilDenyut { from { transform: scale(.7); opacity: .4; } to { transform: scale(1.25); opacity: 0; } }
@keyframes ilKedip { 50% { opacity: .2; } }
@keyframes ilAyun { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@media (prefers-reduced-motion: no-preference) {
    .bf-ulang .il-gambar { animation: ilGambar 1.2s var(--d, 0s) var(--bf-kurva) both; }
    .bf-ulang .il-muncul { animation: ilMuncul .6s var(--d, 0s) var(--bf-kurva) both; }
    .bf-ulang .il-ketik { animation: ilKetik .7s var(--d, 0s) var(--bf-kurva) both; }
    .bf-gerak .il-putar { animation: ilPutar 60s linear infinite; }
    .bf-gerak .il-apung { animation: ilApung 4.5s ease-in-out infinite alternate; }
    .bf-gerak .il-titik { animation: ilTitik 1.2s var(--d, 0s) ease-in-out infinite; }
    .bf-gerak .il-denyut { animation: ilDenyut 2.4s var(--d, 0s) ease-out infinite; }
    .bf-gerak .il-kedip { animation: ilKedip 1.4s var(--d, 0s) steps(2) infinite; }
    .bf-gerak .il-ayun { animation: ilAyun 3.2s ease-in-out infinite alternate; }
}
@media (max-width: 960px) {
    .bf-il .bf-ph-bingkai { aspect-ratio: 16 / 10; }
    .bf-il-sisip { top: var(--sy2); }
}
@media (prefers-reduced-motion: reduce) {
    .bf-il-l1, .bf-il-l2, .bf-il-l3, .bf-il-jarum, .bf-il .bf-ph-bingkai { transform: none !important; transition: none !important; }
}

/* ---------- peta klik-untuk-buka (/contact) ---------- */
.peta-tunda { position: relative; height: 350px; background: var(--bf-gading2, #EFEADF); }
.peta-ilus { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pt-dasar { fill: #EDE7DA; }
.pt-blok { fill: #E2DACA; }
.pt-jalan { stroke: #FFFFFF; stroke-width: 14; fill: none; }
.pt-jalan-kecil { stroke: #FFFFFF; stroke-width: 6; fill: none; opacity: .85; }
.pt-rute { fill: none; stroke: #C9A227; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 8; animation: ptRute 1.2s linear infinite; }
.pt-pin path { fill: #0B1730; }
.pt-titik { fill: #C9A227; }
.pt-denyut { fill: rgba(201, 162, 39, .35); animation: ptDenyut 2s ease-out infinite; transform-origin: center; }
@keyframes ptRute { to { stroke-dashoffset: -18; } }
@keyframes ptDenyut { from { r: 6; opacity: 1; } to { r: 30; opacity: 0; } }
.peta-aksi { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: .625rem; flex-wrap: wrap; justify-content: center; width: calc(100% - 32px); }
.peta-aksi .btn-outline { background: #FFFFFF; }
.peta-tunda iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) { .pt-rute, .pt-denyut { animation: none; } }

/* ---------- HP & tablet ---------- */
@media (max-width: 960px) {
    .bf-hero { min-height: 0; flex-direction: column; align-items: stretch; background: var(--bf-gading); padding-top: var(--nav-height); }
    .bf-hero-foto { position: relative; aspect-ratio: 3 / 2; z-index: 0; }
    .bf-hero-foto img { object-position: 50% 0; }
    .bf-hero::after { display: none; }
    .bf-hero .container { justify-content: flex-start; }
    .bf-hero-teks { padding-block: 1.75rem 3rem; }
    .bf-divisi, .bf-belah, .bf-belah-panel { grid-template-columns: minmax(0, 1fr); }
    .bf-paket, .bf-produk, .bf-artikel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bf-bukti, .bf-angka .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bf-tegak { aspect-ratio: 4/3; }
    .bf-karir .container { justify-content: flex-start; }
    .bf-karir::before, .bf-tutup::before { background: linear-gradient(180deg, rgba(11, 23, 48, .55), rgba(11, 23, 48, .92)); }
}
@media (max-width: 640px) {
    /* style.css lama memaksa h1 1.75rem & h2 1.4rem !important di HP — halaman berfoto memakai ukurannya sendiri */
    .bf-hero h1 { font-size: clamp(2.125rem, 9.4vw, 2.75rem) !important; line-height: 1.1; }
    .bf-seksi h2, .bf-karir h2, .bf-tutup h2 { font-size: clamp(1.625rem, 7vw, 2.125rem) !important; line-height: 1.15; }
}
@media (max-width: 560px) {
    .bf-paket, .bf-produk, .bf-artikel, .bf-bukti { grid-template-columns: minmax(0, 1fr); }
    .bf-paket-kartu { aspect-ratio: 4/3; }
    .bf-tbl { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .bf-tbl, .bf-karya-kartu, .bf-divisi-kartu, .bf-artikel-kartu, .bf-divisi-foto img, .bf-paket-kartu img, .bf-panah span { transition: none !important; }
    .bf-tbl:hover, .bf-karya-kartu:hover, .bf-divisi-kartu:hover, .bf-artikel-kartu:hover { transform: none; }
    .bf-divisi-kartu:hover .bf-divisi-foto img, .bf-paket-kartu:hover img { transform: none; }
}

/* ---------- rombak visual 24 Okt 2026 (CARA-BAKU 139): visual ringan di kartu ---------- */
.bf-bukti-vis { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border-radius: 12px; background: var(--bf-gading); border: 1px solid var(--bf-garis); margin-bottom: .5rem; }
.bf-bukti-vis .va-svg { width: 36px; height: 36px; flex: none; color: var(--bf-emas-tua); }
.bf-bukti-vis span { flex: 1; display: grid; gap: 8px; }
.bf-bukti-vis i { display: block; height: 8px; border-radius: 5px; background: var(--bf-garis); }
.bf-bukti-vis i + i { width: 62%; }
.kartu-judul { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .5rem; }
.kartu-judul .card-title { margin: 0; flex: 1; min-width: 0; }
.kartu-ikon { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #F4E9C4; color: #7A5F0E; }
.kartu-ikon .va-svg { width: 22px; height: 22px; }
/* 25 Okt 2026 (cek_tipografi BARIS-PANJANG): paragraf kartu rincian layanan/paket tidak melebihi ±80 huruf per baris */
.paket-detail-grid .card p { max-width: 66ch; }