/* ══ Blok Kolom Flex (1/2/3/4 kolom) — background, lebar, margin ══

   ARSITEKTUR LEBAR (penting, jangan diubah tanpa baca ini):

   Wrapper konten halaman (.pg-body) sekarang FULL WIDTH — tidak lagi dibungkus
   .container oleh Blade. Batas container dipasang PER-BLOK:
     • saat render, page-builder.js membungkus blok-blok non-full-bleed yang
       berurutan ke dalam <div class="bk-cgroup"> (lihat renderHtml()), dan
     • .bk-cgroup diberi geometri container di file ini.

   Kenapa begitu? Teknik full-bleed sebelumnya memakai
       width:100vw; left:50%; margin-left:-50vw
   dan satuan `vw` IKUT MENGHITUNG lebar scrollbar vertikal, sedangkan sisa
   halaman (topbar, navbar, .container) memakai lebar area konten yang TANPA
   scrollbar. Selisih ~15px itu membuat blok full-width jadi lebih lebar dari
   ruang yang tersedia: dokumen melebar ~8px, muncul scrollbar horizontal, dan
   tepi kanan halaman terlihat tidak rata.
   Sekarang wrapper-nya sendiri sudah full-width, jadi full-bleed cukup
   `width:100%` — presisi, tanpa vw, tanpa overflow, apa pun kondisi scrollbar.

   CATATAN kompatibilitas: konten lama yang disimpan SEBELUM perubahan ini
   tersimpan sebagai blok-blok datar (tanpa .bk-cgroup). Aturan
   `.pg-body > *:not(.bk-flexrow-full)` di bawah membuatnya tetap terbatasi
   container, bukan mendadak edge-to-edge. Hanya blok berukuran PERSEN (mis.
   Gambar 75%/50%/33%) yang bisa tampak lebih lebar sampai halamannya disimpan
   ulang lewat builder, karena persentase dihitung terhadap parent.
*/

/* Geometri container — max-width & breakpoint SAMA PERSIS dengan .container
   Bootstrap 5, supaya semua elemen rata dari atas ke bawah.
   PENTING: padding horizontalnya harus sama dengan .container situs ini, yang
   di public/style.css DIOVERRIDE jadi max(1rem, 2vw) — bukan 12px bawaan
   Bootstrap. Kalau di sini dipakai 12px, blok mode "normal" jadi bergeser 22px
   (di lebar 1700px) dibanding blok mode "Full Width + Container" yang memang
   memakai .container asli. */
.pg-body > .bk-cgroup,
.pg-body > *:not(.bk-flexrow-full) {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: max(1rem, 2vw);
    padding-right: max(1rem, 2vw);
}
@media (min-width: 576px) {
    .pg-body > .bk-cgroup,
    .pg-body > *:not(.bk-flexrow-full) { max-width: 540px; }
}
@media (min-width: 768px) {
    .pg-body > .bk-cgroup,
    .pg-body > *:not(.bk-flexrow-full) { max-width: 720px; }
}
@media (min-width: 992px) {
    .pg-body > .bk-cgroup,
    .pg-body > *:not(.bk-flexrow-full) { max-width: 960px; }
}
@media (min-width: 1200px) {
    .pg-body > .bk-cgroup,
    .pg-body > *:not(.bk-flexrow-full) { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .pg-body > .bk-cgroup,
    .pg-body > *:not(.bk-flexrow-full) { max-width: 1320px; }
}

.bk-flexrow {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay di atas background (warna/gambar) — elemen-nya di-generate
   page-builder.js (renderHtml()), hanya membawa background-color (rgba
   dengan opacity sudah "dibakar" ke warnanya) sebagai inline style karena
   `position`/`inset`/`opacity`/`z-index` inline dibuang HtmlSanitizer.
   Geometrinya (menutupi seluruh .bk-flexrow) makanya harus lewat class di
   sini. pointer-events:none supaya link/tombol di dalam kolom tetap bisa
   diklik menembus overlay. */
.bk-flexrow-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Full-bleed: cukup 100% dari .pg-body yang memang sudah full-width. */
.bk-flexrow-full {
    width: 100%;
}

/* position:relative (z-index:auto, urutan DOM setelah .bk-flexrow-overlay)
   supaya konten tetap di atas overlay tanpa perlu z-index inline (dibuang
   HtmlSanitizer). Berlaku untuk pembungkus isi baris flex DAN untuk mode
   "Full Width + Container" yang memakai .container bawaan Bootstrap. */
.bk-flexrow-inner,
.bk-flexrow > .container {
    position: relative;
}

/* Pembungkus isi baris flex (mode "normal"/"full").
   Mode "normal": baris sudah berada di dalam .bk-cgroup, jadi TIDAK perlu
   padding horizontal lagi (kalau ditambah, baris flex jadi lebih menjorok ke
   dalam dibanding heading/paragraf di sekitarnya). */
.bk-flexrow-inner {
    margin-left: auto;
    margin-right: auto;
    padding: 32px 0;
}

/* Mode "Full Width" = BENAR-BENAR penuh layar: tanpa padding horizontal, dan
   gutter .row/.col Bootstrap dinolkan supaya isinya (mis. peta, banner, gambar)
   menempel tepat ke tepi layar.
   Kenapa gutter harus ikut dinolkan: .row punya margin-left/right negatif
   sebesar setengah gutter dan .col punya padding penyeimbangnya. Kalau padding
   wrapper 0 tapi gutter dibiarkan, baris itu jadi lebih lebar dari wrapper —
   halaman malah overflow ~10px lagi (persoalan yang baru saja diperbaiki).
   Kalau butuh jarak antar kolom / teks tidak mentok, pakai mode
   "Full Width + Container". */
.bk-flexrow-full > .bk-flexrow-inner > .row {
    margin-left: 0;
    margin-right: 0;
}
.bk-flexrow-full > .bk-flexrow-inner > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Mode "Full Width + Container" memakai .container bawaan Bootstrap di dalam
   .bk-flexrow-full (di-generate page-builder.js), sehingga lebarnya identik
   dengan .bk-cgroup di atas. */