/*
 * template.css — LembTrip Template for WebsiteBaker 2.10
 * Tailwind menangani layout utama (via Play CDN di index.php).
 * File ini menata output HTML dari show_menu2 (class .wb-menu /
 * .wb-mobile-menu / .wb-footer-menu) agar menyerupai dropdown
 * Tailwind pada prototype, plus utilitas dari <style> prototype.
 */

/* ---------- Utilitas dari prototype ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes lightboxZoom {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.animate-lightbox {
    animation: lightboxZoom 0.25s ease-out forwards;
}

/* ---------- Menu desktop (show_menu2, ul.wb-menu) ---------- */
.wb-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wb-menu li {
    position: relative;
    margin: 0;
    padding: 0;
}
.wb-menu a {
    display: block;
    color: #4b5563;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}
.wb-menu a:hover {
    color: #f97316;
}
.wb-menu > li > a {
    padding: 1.5rem 0;
}

/* Submenu (level 2) */
.wb-menu li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 16rem;
    list-style: none;
    margin: 0;
    padding: .5rem 0;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
    z-index: 60;
}
.wb-menu li:hover > ul,
.wb-menu li:focus-within > ul {
    display: block;
}
.wb-menu li > ul a {
    padding: .5rem 1rem;
    white-space: normal;
}
.wb-menu li > ul a:hover {
    background-color: #fff7ed;
    color: #f97316;
}

/* Flyout level 3 dan seterusnya */
.wb-menu li > ul li > ul {
    top: 0;
    left: 100%;
}

/* Halaman aktif */
.wb-menu .menu-current > a,
.wb-menu .menu-parent > a {
    color: #f97316;
    font-weight: 700;
}

/* ---------- Menu mobile (show_menu2, ul.wb-mobile-menu) ---------- */
.wb-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wb-mobile-menu li {
    position: relative;
    margin: 0;
    padding: 0;
}
.wb-mobile-menu a {
    display: block;
    padding: .5rem 0;
    color: #374151;
    text-decoration: none;
}
.wb-mobile-menu a:hover {
    color: #f97316;
}
.wb-mobile-menu .menu-current > a {
    color: #f97316;
    font-weight: 600;
}
/* Submenu mobile tersembunyi sampai dibuka via tombol chevron */
.wb-mobile-menu li > ul {
    display: none;
    list-style: none;
    margin: .25rem 0 .25rem .5rem;
    padding: .25rem 0 .25rem 1rem;
    border-left: 2px solid #ffedd5;
    font-size: .8rem;
}
.wb-mobile-menu li > ul.open {
    display: block;
}
.wb-mobile-menu .wb-mobile-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.wb-mobile-menu .wb-mobile-toggle:hover {
    color: #f97316;
}
.wb-mobile-menu .wb-mobile-toggle i {
    transition: transform .3s ease;
}
.wb-mobile-menu .wb-mobile-toggle.rotated i {
    transform: rotate(180deg);
}

/* ---------- Menu footer (Menu 2) ---------- */
.wb-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wb-footer-menu li {
    margin: 0 0 .625rem 0;
    padding: 0;
}
.wb-footer-menu li > ul {
    list-style: none;
    margin: .625rem 0 0 1rem;
    padding: 0;
}
.wb-footer-menu a {
    color: #9ca3af;
    text-decoration: none;
    transition: color .2s ease;
}
.wb-footer-menu a:hover {
    color: #f97316;
}

/* ---------- Default kecil untuk konten modul WB ---------- */
/* v2.9.1: hanya gambar TANPA class. Aturan lama (semua img di
   .wb-content) menimpa class Tailwind h-full pada gambar kartu
   home ("Find the Best Day Trips") — height kembali auto sehingga
   foto tidak memenuhi wadah 380px-nya dan tampak terpotong di
   bagian bawah. Gambar konten lama umumnya polos, tetap aman. */
.wb-content img:not([class]),
main img:not([class]) {
    max-width: 100%;
    height: auto;
}

/* ---------- v2.2: panah penanda submenu (desktop) ---------- */
/* show_menu2 memberi class .menu-expand pada <li> yang punya anak.
   Panah memakai ikon FontAwesome yang sudah dimuat template. */
.wb-menu li.menu-expand > a::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .72rem;
    margin-left: .45rem;
    color: #374151;
    display: inline-block;
    vertical-align: middle;
}
.wb-menu li li.menu-expand > a::after {
    content: "\f054";
    float: right;
    margin-left: 0;
    margin-top: .3rem;
    font-size: .58rem;
}

/* ---------- v2.2: anti geser horizontal ---------- */
html, body { overflow-x: clip; }

/* ==========================================================
   SETUP GLOBAL — Typography dasar teks konten
   ----------------------------------------------------------
   Satu tempat mengatur teks badan (paragraf, daftar, tabel)
   untuk SEMUA halaman: kedua block konten template ini sudah
   dibungkus .wb-content, dan teks di dalamnya MEWARISI nilai
   di bawah ini — tidak perlu mengedit konten per halaman.

   Nilai bawaan = Tailwind "text-sm text-gray-600":
     ukuran teks 0.875rem (14px), warna #4b5563.
   Ubah cukup di sini. Elemen yang memakai class Tailwind
   sendiri TIDAK terpengaruh (class-nya menang); judul polos
   tetap gelap (diatur blok kompatibilitas di bawah).
   ========================================================== */
.wb-content {
    --wb-body-size: 0.875rem;   /* ukuran teks badan */
    --wb-body-color: #4b5563;   /* warna teks badan (gray-600) */
    --wb-body-leading: 1.7;     /* jarak antar baris */
    font-size: var(--wb-body-size);
    color: var(--wb-body-color);
    line-height: var(--wb-body-leading);
}

/* ==========================================================
   KELAS PRAKTIS KONTEN (untuk dipakai di WYSIWYG, mode Source)
   ----------------------------------------------------------
   Pengganti rangkaian class Tailwind yang panjang untuk pola
   yang berulang di banyak halaman. Ketik class pendeknya saja:

     <div class="lt-lead"><p>...paragraf pembuka...</p></div>
     <h3 class="lt-h3-check">Facilities included:</h3>
     <h3 class="lt-h3-doc">Lembongan Trip Cancellation Policy</h3>
     <h3 class="lt-h3-info">Terms and Conditions</h3>

   Ikon pada h3 muncul otomatis dari CSS (::before FontAwesome),
   tidak perlu menempel tag <i> lagi. Mengubah tampilan semua
   halaman cukup dari blok ini.
   ========================================================== */
.lt-lead {
    margin-bottom: .75rem;
    color: #374151;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.625;
    background-color: rgba(255, 247, 237, .5);
    padding: 1.5rem;
    border-radius: 1rem;
    border-left: 4px solid #f97316;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}
@media (min-width: 640px) {
    .lt-lead { font-size: 1.25rem; }
}
.lt-lead p { margin: 0 0 .5em; }
.lt-lead p:last-child { margin-bottom: 0; }

.lt-h3-check, .lt-h3-doc, .lt-h3-info {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
    color: #f97316;
    margin: 0 0 1rem;
}
.lt-h3-check::before, .lt-h3-doc::before, .lt-h3-info::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
.lt-h3-check::before { content: "\f058"; }  /* fa-circle-check */
.lt-h3-doc::before   { content: "\f15c"; }  /* fa-file-contract */
.lt-h3-info::before  { content: "\f05a"; }  /* fa-circle-info */

/* ---------- Typography footer (blok global lama) ----------
   Isi kolom footer berasal dari GlobalBlocks template lama
   (h3/ul/li/p polos tanpa class), jadi tidak ikut typography
   .wb-content. Blok ini menyamakan ukuran teks footer dengan
   teks badan (text-sm) dan memberi gaya judul/link footer
   seperti mockup. Hanya menyentuh elemen TANPA class agar
   bagian footer yang sudah berkelas Tailwind tidak berubah. */
.wb-footer {
    font-size: 0.875rem;
    color: #9ca3af;
    line-height: 1.7;
}
.wb-footer h3:not([class]) {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0 0 1.25rem;
}
.wb-footer ul:not([class]) { list-style: none; margin: 0; padding: 0; }
.wb-footer li:not([class]) { margin: .55rem 0; }
.wb-footer p:not([class]) { margin: 0 0 1em; }
.wb-footer a:not([class]) { color: #9ca3af; text-decoration: none; }
.wb-footer a:not([class]):hover { color: #f97316; }

/* ---------- v2.9.0: tema Accordion (modul wb-accordion) ----------
   CSS bawaan modul accordion tidak selalu ikut termuat di head,
   dan tampilannya pun gaya lama. Blok ini memberi gaya yang
   menyatu dengan template: judul berupa bar oranye muda dengan
   chevron FontAwesome 6 (modul memakai class .open + display
   pada konten, di-toggle oleh JS modulnya sendiri). */
.wb-accordion {
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
    background: #ffffff;
}
.wb-accordion .accordion-title {
    display: block;
    margin: 0;
    background: #fff7ed;
    border-bottom: 1px solid #ffedd5;
    cursor: pointer;
}
.wb-accordion .accordion-title a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.1rem;
    font-weight: 700;
    color: #111827;
    text-decoration: none;
    line-height: 1.35;
}
.wb-accordion .accordion-title a::before {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .78rem;
    color: #f97316;
    transition: transform .2s ease;
    flex-shrink: 0;
}
.wb-accordion .accordion-title.open a::before { transform: rotate(180deg); }
.wb-accordion .accordion-title.open { background: #ffedd5; }
.wb-accordion .accordion-content {
    padding: 1.1rem 1.25rem;
    background: #ffffff;
    border-bottom: 1px solid #f3f4f6;
}
.wb-accordion .accordion-content:last-child { border-bottom: 0; }
.wb-accordion .accordion-content > :first-child { margin-top: 0; }
.wb-accordion .accordion-content > :last-child { margin-bottom: 0; }

/* ---------- v2.2: kompatibilitas konten lama (WYSIWYG / modul) ----------
   Konten dari template lama tidak punya class Tailwind. Semua selector
   elemen di bawah HANYA menyentuh elemen TANPA class (:not([class]))
   dan dibungkus :where(). Dua alasan:
   1) Semua elemen snippet baru selalu memakai class Tailwind, jadi
      aturan ini tidak pernah menyentuhnya sama sekali.
   2) Judul banner tidak memakai class warna sendiri — warnanya
      WARISAN dari induknya (.text-white). Deklarasi warna langsung
      pada elemen, sekecil apa pun spesifisitasnya (bahkan :where),
      selalu memutus warisan itu dan membuat judul jadi hitam.
      Karena itu aturan warna hanya boleh menimpa elemen polos
      milik konten lama. */
/* v2.9.2: modul LembTrip (home & booking) mengatur lebarnya
   sendiri (full-bleed / max-w internal) — jangan dikontain,
   supaya latar section gelap bisa selebar layar dan kolom
   Welcome tidak menyempit seperti saat memakai snippet. */
.wb-content > :not(section):not(main):not(script):not(style):not(iframe):not(.m_code):not(.m_lembtrip_home):not(.m_lembtrip_booking):not(.m_lembtrip_tourlist) {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
:where(.wb-content) h1:not([class]), :where(.wb-content) h2:not([class]),
:where(.wb-content) h3:not([class]), :where(.wb-content) h4:not([class]),
:where(.wb-content) h5:not([class]), :where(.wb-content) h6:not([class]) {
    color: #111827;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.4em 0 .6em;
}
:where(.wb-content) h1:not([class]) { font-size: 2rem; }
:where(.wb-content) h2:not([class]) { font-size: 1.75rem; }
:where(.wb-content) h3:not([class]) { font-size: 1.375rem; }
:where(.wb-content) h4:not([class]) { font-size: 1.125rem; }
:where(.wb-content) p:not([class]) { margin: 0 0 1em; }
:where(.wb-content) ul:not([class]) { list-style: disc; padding-left: 1.6em; margin: 0 0 1em; }
:where(.wb-content) ol:not([class]) { list-style: decimal; padding-left: 1.6em; margin: 0 0 1em; }
:where(.wb-content) li:not([class]) { margin: .25em 0; }
:where(.wb-content) a:not([class]) { color: #ea580c; }
:where(.wb-content) img:not([class]) { max-width: 100%; height: auto; }
:where(.wb-content) img[align="left"]  { float: left;  margin: 0 1rem 1rem 0; }
:where(.wb-content) img[align="right"] { float: right; margin: 0 0 1rem 1rem; }
:where(.wb-content) blockquote {
    border-left: 4px solid #f97316;
    padding-left: 1rem;
    color: #4b5563;
    margin: 1.5em 0;
}
:where(.wb-content) table { border-collapse: collapse; max-width: 100%; font-size: .925em; }
:where(.wb-content) td, :where(.wb-content) th { padding: .4rem .6rem; }

/* ---------- v2.3: shim grid Bootstrap 3 untuk konten lama ----------
   Konten lama (WYSIWYG / News) memakai class .row dan .col-md-* /
   .col-sm-* / .col-xs-* dari template lama (Bootstrap 3), sementara
   template baru tidak memuat Bootstrap. Shim terbatas di dalam
   .wb-content ini membuat susunan kolom konten lama tampil lagi
   seperti semula, tanpa mempengaruhi snippet baru (yang memakai
   class Tailwind, bukan class Bootstrap). */
.wb-content .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
.wb-content .row > [class*="col-"] {
    position: relative;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
.wb-content .col-xs-1 { width: 8.333%; }  .wb-content .col-xs-2 { width: 16.666%; }
.wb-content .col-xs-3 { width: 25%; }     .wb-content .col-xs-4 { width: 33.333%; }
.wb-content .col-xs-5 { width: 41.666%; }.wb-content .col-xs-6 { width: 50%; }
.wb-content .col-xs-7 { width: 58.333%; }.wb-content .col-xs-8 { width: 66.666%; }
.wb-content .col-xs-9 { width: 75%; }     .wb-content .col-xs-10 { width: 83.333%; }
.wb-content .col-xs-11 { width: 91.666%; }.wb-content .col-xs-12 { width: 100%; }
@media (min-width: 768px) {
    .wb-content .col-sm-1 { width: 8.333%; }  .wb-content .col-sm-2 { width: 16.666%; }
    .wb-content .col-sm-3 { width: 25%; }     .wb-content .col-sm-4 { width: 33.333%; }
    .wb-content .col-sm-5 { width: 41.666%; }.wb-content .col-sm-6 { width: 50%; }
    .wb-content .col-sm-7 { width: 58.333%; }.wb-content .col-sm-8 { width: 66.666%; }
    .wb-content .col-sm-9 { width: 75%; }     .wb-content .col-sm-10 { width: 83.333%; }
    .wb-content .col-sm-11 { width: 91.666%; }.wb-content .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
    .wb-content .col-md-1 { width: 8.333%; }  .wb-content .col-md-2 { width: 16.666%; }
    .wb-content .col-md-3 { width: 25%; }     .wb-content .col-md-4 { width: 33.333%; }
    .wb-content .col-md-5 { width: 41.666%; }.wb-content .col-md-6 { width: 50%; }
    .wb-content .col-md-7 { width: 58.333%; }.wb-content .col-md-8 { width: 66.666%; }
    .wb-content .col-md-9 { width: 75%; }     .wb-content .col-md-10 { width: 83.333%; }
    .wb-content .col-md-11 { width: 91.666%; }.wb-content .col-md-12 { width: 100%; }
}
.wb-content .img-responsive { display: block; max-width: 100%; height: auto; }
.wb-content .text-center { text-align: center; }
.wb-content .text-right { text-align: right; }
.wb-content .clearfix::after { content: ""; display: table; clear: both; }

/* ---------- v2.3.3: banner di dalam konten selalu full width ----------
   Di prototype, section banner adalah anak langsung <body> sehingga
   lebar penuh. Di WB, snippet banner berada di dalam .wb-content
   (dan pembungkus section modul), jadi banner ikut menyempit selebar
   kolom konten. Aturan full-bleed ini mengeluarkan section
   berbackground (bg-cover) dari kolom: lebar 100vw dan digeser
   dengan margin negatif calc(50% - 50vw), sama seperti lebar penuh
   di prototype. */
.wb-content section.bg-cover {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ---------- v2.4: galeri MiniGallery2 tampil sebagai mosaic ----------
   Modul minigal2 mengeluarkan thumbnail 140px + lightbox lightcase
   bawaan modul. CSS ini menyusunnya seperti mosaic prototype
   (tile pertama besar 2x2, sisanya grid rapi). */
.m_minigal2 .mgimages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.m_minigal2 .mgimages a {
    display: block;
    overflow: hidden;
    border-radius: 1rem;
    height: 207px;
    box-shadow: 0 1px 3px rgb(0 0 0 / .08);
}
.m_minigal2 .mgimages a:first-child {
    grid-column: span 2;
    grid-row: span 2;
    height: 430px;
}
.m_minigal2 .mgimages a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- v2.5: mosaic MiniGallery2 sama seperti mockup ----------
   Desktop: hanya 5 tile pertama tampil (tile ke-5 berisi overlay
   "+N More Photos" yang ditambahkan template.js); foto selebihnya
   tetap bisa dibuka lewat lightbox lightcase bawaan modul.
   Mobile: slider horizontal snap seperti mockup, semua foto tampil,
   tile terakhir berisi overlay "View All Photos". */
.m_minigal2 .mgimages a { position: relative; }
.m_minigal2 .mg-more-overlay {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    background: linear-gradient(to top, rgb(0 0 0 / .8), rgb(0 0 0 / .4) 55%, transparent);
    color: #fff; font-weight: 700; font-size: 1rem; text-align: center;
}
.m_minigal2 .mg-all-overlay {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    background: rgb(0 0 0 / .5);
    color: #fff; font-weight: 700; font-size: 1.125rem;
}
@media (min-width: 768px) {
    .m_minigal2 .mgimages a:nth-child(n+6) { display: none; }
    .m_minigal2 .mg-more-overlay { display: flex; }
}
@media (max-width: 767px) {
    .m_minigal2 .mgimages {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem;
    }
    .m_minigal2 .mgimages a {
        flex: 0 0 85vw;
        height: 280px;
        scroll-snap-align: center;
    }
    .m_minigal2 .mgimages a:first-child { grid-column: auto; grid-row: auto; height: 280px; }
    .m_minigal2 .mg-all-overlay { display: flex; }
}

/* ---------- v2.9.4: grid galeri khusus HALAMAN GALLERY ----------
   Halaman Gallery (dev.lembongantrip.com/new/gallery.php) memakai
   modul minigal2 yang sama dengan halaman detail produk. Supaya
   perubahan ini TIDAK menyentuh halaman produk, aturan di sini
   dikunci ganda: hanya berlaku bila section minigal2 adalah SATU-
   SATUNYA section di .wb-content DAN container itu bukan .wb-detail
   (halaman detail memakai .wb-detail + beberapa section, jadi tidak
   pernah kena aturan ini). Tampilannya mengikuti mockup gallery.php:
   grid rata 1/3/6 kolom, tile tinggi 12rem, foto cover penuh,
   hover zoom + overlay gelap dengan ikon kaca pembesar.
   Yang TIDAK dibawa dari mockup: tombol filter kategori & Load More
   (modul minigal2 tidak menyimpan kategori per foto) dan bar
   caption di bawah foto (modul tidak menyimpan caption — alt kosong);
   semua foto modul tampil sekaligus dan lightbox bawaannya tetap
   jalan. Catatan: thumbnail modul hanya 140px, jadi di tile lebar
   ~200px tampil agak lembut; klik tetap membuka foto resolusi penuh. */
.wb-content:not(.wb-detail) > .m_minigal2:only-child {
    max-width: 95rem;
}
.wb-content:not(.wb-detail) > .m_minigal2:only-child .mgimages {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .wb-content:not(.wb-detail) > .m_minigal2:only-child .mgimages {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .wb-content:not(.wb-detail) > .m_minigal2:only-child .mgimages {
        grid-template-columns: repeat(6, 1fr);
    }
}
.wb-content:not(.wb-detail) > .m_minigal2:only-child .mgimages a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    background: #ffffff;
    box-shadow: 0 1px 2px rgb(0 0 0 / .05);
    height: 12rem;
    grid-column: auto;
    grid-row: auto;
}
.wb-content:not(.wb-detail) > .m_minigal2:only-child .mgimages a:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}
.wb-content:not(.wb-detail) > .m_minigal2:only-child .mgimages a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s ease;
}
.wb-content:not(.wb-detail) > .m_minigal2:only-child .mgimages a:hover img {
    transform: scale(1.1);
}
.wb-content:not(.wb-detail) > .m_minigal2:only-child .mgimages a::before {
    content: "";
    position: absolute; inset: 0;
    background: rgb(0 0 0 / .4);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 1;
}
.wb-content:not(.wb-detail) > .m_minigal2:only-child .mgimages a::after {
    content: "\f00e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: rgb(255 255 255 / .9);
    color: #111827;
    font-size: .75rem;
    padding: .4rem .7rem;
    border-radius: .5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 2;
}
.wb-content:not(.wb-detail) > .m_minigal2:only-child .mgimages a:hover::before,
.wb-content:not(.wb-detail) > .m_minigal2:only-child .mgimages a:hover::after {
    opacity: 1;
}
/* Netralisir aturan mosaic halaman detail di halaman ini: semua foto
   tampil (bukan hanya 5), tanpa tile besar 2x2. */
.wb-content:not(.wb-detail) > .m_minigal2:only-child .mgimages a:nth-child(n+6) {
    display: block;
}

/* v2.9.5: overlay mosaic halaman detail (dari template.js) tidak boleh
   muncul di halaman Gallery — di sini tile ke-5 bukan "sampul" album. */
.wb-content:not(.wb-detail) > .m_minigal2:only-child .mg-more-overlay,
.wb-content:not(.wb-detail) > .m_minigal2:only-child .mg-all-overlay {
    display: none;
}

/* ==========================================================
   v2.9.6–v2.9.8 — HALAMAN KONTAK (scope: .wb-content yang berisi
   section MiniForm; saat ini hanya halaman Contact).
   Block 1 disusun menjadi grid mockup: kartu info di kolom 1,
   kepala kartu form + MiniForm di kolom 2. MiniForm diberi
   gaya kartu + field seperti form mockup. Halaman lain tidak
   tersentuh: aturan layout berada di bawah :has(> .m_miniform),
   aturan field di bawah .m_miniform (modul itu hanya dipakai
   di halaman Contact).
   ========================================================== */
.wb-content:has(> .m_miniform) {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
    padding: 4rem 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.wb-content:has(> .m_miniform) > .section {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Jarak peta dari form pada susunan tumpuk (seluler). */
.wb-content:has(> .m_miniform) > .section:has(iframe[src*="google.com/maps"]) { margin-top: 1.5rem; }
/* Kepala kartu dan badan kartu (MiniForm) menempel jadi satu
   kartu: batalkan jarak tumpuk antar keduanya. */
.wb-content:has(> .m_miniform) > .m_miniform { margin-top: -2.5rem; }
@media (min-width: 1024px) {
    .wb-content:has(> .m_miniform) {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 2.5rem;
        row-gap: 0;
        align-items: start;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .wb-content:has(> .m_miniform) > .section:has(.lt-contact-formhead) {
        grid-column: 2;
        grid-row: 1;
    }
    .wb-content:has(> .m_miniform) > .m_miniform {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
    }
    /* Kartu info merentang 2 baris kolom form: tanpa ini baris 1
       setinggi kartu info dan kepala form terpisah jauh dari
       badan form di baris 2. */
    .wb-content:has(> .m_miniform) > .section:not(.m_miniform):not(:has(.lt-contact-formhead)):not(:has(iframe[src*="google.com/maps"])) {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .wb-content:has(> .m_miniform) > .section:has(iframe[src*="google.com/maps"]) {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 4rem;
    }
}

/* Badan kartu form (kepalanya: section .lt-contact-formhead). */
.wb-content:has(> .m_miniform) > .m_miniform {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-top: 0;
    border-radius: 0 0 1.5rem 1.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    padding: 2rem !important;
}
@media (min-width: 640px) {
    .wb-content:has(> .m_miniform) > .m_miniform { padding: 2rem 2.5rem 2.5rem !important; }
}

/* ---- Field-field MiniForm mengikuti form mockup ---- */
.m_miniform:has(.half) .miniform form { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.m_miniform .miniform form > .half { flex: 0 0 calc(50% - .75rem); }
.m_miniform .miniform form > .onethird { flex: 0 0 calc(33.333% - 1rem); }
.m_miniform .miniform form > .full { flex: 0 0 100%; }
@media (max-width: 639px) {
    .m_miniform:has(.half) .miniform form > .half,
    .m_miniform:has(.half) .miniform form > .onethird { flex-basis: 100%; }
}
.m_miniform:has(.half) .form-group { margin: 0; }
.m_miniform:has(.half) label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #374151;
    margin-bottom: .5rem;
}
.m_miniform:has(.half) label span span { color: #f97316; }
.m_miniform:has(.half) label.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: .875rem;
    color: #4b5563;
    margin: 0 .9rem .3rem 0;
}
.m_miniform:has(.half) .form-control {
    width: 100%;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: .75rem 1rem;
    font-size: .875rem;
    color: #111827;
}
.m_miniform:has(.half) .form-control:focus { outline: none; border-color: #f97316; background: #fff; }
.m_miniform input[type="checkbox"] { accent-color: #f97316; }
.m_miniform input[name="captcha"] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    width: 100%;
}
.m_miniform .captcha_expl {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: .75rem;
    color: #6b7280;
    margin-top: .35rem;
}
.m_miniform .row small { color: #6b7280; font-size: .75rem; }
.m_miniform button.btn_1 {
    background: #f97316;
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    padding: .875rem 2rem;
    border: 0;
    border-radius: .75rem;
    box-shadow: 0 10px 15px -3px rgb(249 115 22 / .25);
    cursor: pointer;
    width: 100%;
}
.m_miniform button.btn_1:hover { background: #ea580c; }
@media (min-width: 640px) {
    .m_miniform button.btn_1 { width: auto; }
}
.m_miniform .banner { margin-top: 1.5rem; }

/* ==========================================================
   v2.9.9 — BLOG (modul News): daftar blog + halaman post.
   Markup kartu/hero berasal dari template modul News
   (news-templates-mockup); di sini hanya tata ruang halaman,
   badge kosong, paginasi, dan tipografi isi artikel .lt-post.
   ========================================================== */
/* Daftar blog: ruang atas/bawah seperti <main> mockup (py-16). */
.wb-content:has(> .m_news):not(.wb-news-post) {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
/* Halaman post: section News selebar penuh — hero dan kolom
   artikel mengatur lebarnya sendiri. */
.wb-content.wb-news-post > .m_news {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Badge kategori pada post tanpa grup (placeholder kosong). */
.m_news .js-cat-badge:empty { display: none; }
/* Paginasi daftar blog. */
.m_news .page-header a { color: #ea580c; font-weight: 600; }

/* ---- Tipografi isi artikel (samakan mockup blog-detail) ---- */
.lt-post { font-size: .875rem; line-height: 1.75; color: #374151; }
@media (min-width: 640px) {
    .lt-post { font-size: 1rem; }
}
.lt-post p { margin: 0 0 1.5rem; }
.lt-post .lead { font-weight: 500; color: #1f2937; font-size: 1rem; }
@media (min-width: 640px) {
    .lt-post .lead { font-size: 1.125rem; }
}
.lt-post h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    padding-top: 1rem;
    margin: 0 0 .75rem;
}
@media (min-width: 640px) {
    .lt-post h2 { font-size: 1.5rem; }
}
.lt-post h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    padding-top: .5rem;
    margin: 0 0 .75rem;
}
@media (min-width: 640px) {
    .lt-post h3 { font-size: 1.25rem; }
}
.lt-post blockquote {
    border-left: 4px solid #f97316;
    background: rgb(255 247 237 / .5);
    padding: 1.5rem;
    border-radius: 0 .75rem .75rem 0;
    font-style: italic;
    font-weight: 500;
    color: #374151;
    margin: 1.5rem 0;
}
.lt-post img { border-radius: .75rem; max-width: 100%; height: auto; }

/* v2.9.10 — kartu blog selalu bertumpuk vertikal (jaring
   pengaman: walau ada skrip yang menampilkan kartu sebagai
   flex, arahnya tetap kolom). */
.m_news .blog-card { display: flex; flex-direction: column; }