/* ==========================================================
   MSB Professional Responsive System v3
   Desktop + Tablet + Mobile, tanpa desktop zoom paksa
   Dibuat untuk seluruh halaman HTML MSB supaya aman di cPanel/public_html
   ========================================================== */

:root{
  --msb-page-gutter: clamp(16px, 3vw, 34px);
  --msb-card-radius: clamp(18px, 2.2vw, 30px);
  --msb-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html,
body{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}

html.msb-desktop-fit,
html.msb-zoom-allowed,
html.msb-desktop-lock,
body.msb-desktop-lock{
  min-width:0 !important;
  width:auto !important;
  overflow-x:hidden !important;
}

*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
iframe{border:0}
button,a,input,select,textarea{touch-action:manipulation}
input,select,textarea{max-width:100%}

.container,
.site-header .container,
.site-header .container.navbar{
  max-width: min(1880px, calc(100vw - (var(--msb-page-gutter) * 2))) !important;
}

.section{scroll-margin-top:94px}
.card,.mini-card,.price-card,.policy-card,.booking-box,.booking-info,.booking-form,.admin-card,.admin-dashboard-panel,.product-card,.book-panel,.official-video-panel,.market-side,.shop-banner,.doctor-result,.doctor-form,.modal-content{
  max-width:100% !important;
}

.tablewrap,.table-wrap,.pricing-table-wrap,.admin-table-wrap,.booking-breakdown,.admin-list,.admin-post-list{
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

table{max-width:100%}

/* Desktop profesional */
@media (min-width:1200px){
  .site-header{overflow:visible !important}
  .site-header .container.navbar,
  .navbar{
    display:grid !important;
    grid-template-columns:minmax(230px,300px) minmax(0,1fr) max-content !important;
    align-items:center !important;
    gap:12px !important;
    min-height:78px !important;
    padding:0 !important;
  }
  .site-header .navbar nav,
  .navbar nav{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    overflow:visible !important;
    min-width:0 !important;
  }
  .site-header .nav-menu,
  .nav-menu{
    position:static !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    width:auto !important;
    min-width:0 !important;
    gap:4px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .site-header .nav-menu a,
  .nav-menu a{
    min-height:34px !important;
    padding:7px 8px !important;
    font-size:clamp(10.4px,.67vw,12.2px) !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }
  .mobile-toggle{display:none !important}
  .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr) !important}
}

/* Tablet: layar menengah, menu menjadi bar geser horizontal */
@media (min-width:768px) and (max-width:1199px){
  body{overflow-x:hidden !important}
  .site-header{overflow:visible !important}
  .site-header .container.navbar,
  .navbar{
    width:min(100% - 28px, var(--max,1140px)) !important;
    max-width:calc(100vw - 28px) !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    min-height:82px !important;
    padding:10px 0 !important;
  }
  .site-header .brand,
  .brand{
    flex:1 1 360px !important;
    min-width:240px !important;
    gap:10px !important;
  }
  .site-header .brand-mark,
  .brand-mark{width:48px !important;height:48px !important;flex:0 0 48px !important}
  .site-header .brand strong{font-size:13px !important;line-height:1.13 !important}
  .site-header .brand span{font-size:11px !important;max-width:420px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
  .site-header .nav-actions,
  .nav-actions{flex:0 0 auto !important;gap:7px !important;order:2 !important}
  .site-header .nav-actions select{max-width:110px !important}
  .site-header .nav-actions button,
  .mobile-toggle{height:38px !important;min-height:38px !important;border-radius:12px !important;padding:0 10px !important;font-size:11px !important}
  .mobile-toggle{display:none !important}
  .site-header .navbar nav,
  .navbar nav{
    order:3 !important;
    flex:0 0 100% !important;
    width:100% !important;
    display:block !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:thin !important;
    padding:4px 0 2px !important;
  }
  .site-header .nav-menu,
  .nav-menu{
    position:static !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    width:max-content !important;
    min-width:100% !important;
    gap:6px !important;
    padding:0 2px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .site-header .nav-menu a,
  .nav-menu a{
    width:auto !important;
    min-height:36px !important;
    padding:8px 10px !important;
    border-radius:999px !important;
    font-size:11px !important;
    white-space:nowrap !important;
    justify-content:center !important;
  }
  .hero{min-height:auto !important}
  .hero-grid{grid-template-columns:1fr !important;gap:26px !important;padding:70px 0 80px !important}
  .hero-panel{max-width:760px !important}
  .grid-4,.service-overview-grid,.logo-row,.flow-grid,.amounts,.admin-overview-grid,.admin-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .grid-3,.testimony-grid,.voice-grid,.news-grid,.product-grid,.book-grid,.official-video-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .grid-2,.booking-box,.adopt-box,.impact-layout,.doctor-layout,.market-shell,.footer-grid,.admin-layout{grid-template-columns:1fr !important}
  .admin-sidebar,.market-side{position:static !important;top:auto !important}
  .form-2,.formgrid,.booking-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .modal-content{width:min(820px, calc(100vw - 36px)) !important}
}

/* Mobile: layar kecil, menu drawer dan semua box nyaman disentuh */
@media (max-width:767px){
  :root{--msb-page-gutter:14px}
  body{line-height:1.6 !important;background-attachment:scroll !important}
  .leaf-particle,.section.has-mangrove::before,.section.has-mangrove::after{display:none !important}
  .container,
  .site-header .container,
  .site-header .container.navbar{
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
  }
  .site-header{position:sticky !important;top:0 !important;overflow:visible !important;z-index:80 !important}
  .site-header .container.navbar,
  .navbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) max-content !important;
    grid-template-areas:"brand actions" "nav nav" !important;
    align-items:center !important;
    gap:8px !important;
    min-height:auto !important;
    padding:10px 0 !important;
  }
  .site-header .brand,
  .brand{
    grid-area:brand !important;
    min-width:0 !important;
    gap:8px !important;
  }
  .site-header .brand-mark,
  .brand-mark{width:42px !important;height:42px !important;flex:0 0 42px !important;border-radius:14px !important}
  .site-header .brand strong,
  .brand strong{
    font-size:12px !important;
    line-height:1.12 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    max-width:calc(100vw - 190px) !important;
  }
  .site-header .brand span,
  .brand span{
    font-size:10px !important;
    line-height:1.15 !important;
    max-width:calc(100vw - 190px) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .site-header .nav-actions,
  .nav-actions{
    grid-area:actions !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:5px !important;
    min-width:max-content !important;
  }
  .site-header .nav-actions select{display:none !important}
  .site-header .nav-actions button,
  .mobile-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:36px !important;
    min-height:36px !important;
    border-radius:12px !important;
    padding:0 10px !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }
  .site-header .nav-actions .voice-toggle{display:none !important}
  .mobile-toggle{font-size:0 !important;width:42px !important;padding:0 !important;position:relative !important}
  .mobile-toggle::before{content:"☰";font-size:20px;line-height:1;font-weight:900}
  .mobile-toggle[aria-expanded="true"]::before{content:"×";font-size:24px}
  .site-header .navbar nav,
  .navbar nav{
    grid-area:nav !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }
  .site-header .nav-menu,
  .nav-menu{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:14px !important;
    right:14px !important;
    width:auto !important;
    min-width:0 !important;
    max-height:min(74vh, 560px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    display:none !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    padding:12px !important;
    margin:0 !important;
    border:1px solid rgba(20,66,50,.16) !important;
    border-radius:22px !important;
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 24px 72px rgba(8,31,23,.22) !important;
    backdrop-filter:blur(16px) !important;
    z-index:120 !important;
  }
  body.dark .site-header .nav-menu,
  body.dark .nav-menu{background:rgba(13,34,26,.96) !important}
  .site-header .nav-menu.show,
  .nav-menu.show{display:grid !important}
  .site-header .nav-menu li,
  .nav-menu li{display:block !important;width:100% !important;min-width:0 !important}
  .site-header .nav-menu a,
  .nav-menu a{
    width:100% !important;
    min-height:46px !important;
    padding:10px 11px !important;
    justify-content:flex-start !important;
    gap:8px !important;
    border-radius:16px !important;
    background:rgba(231,245,236,.72) !important;
    font-size:12px !important;
    line-height:1.15 !important;
    white-space:normal !important;
    text-align:left !important;
  }
  .site-header .nav-menu a.active,
  .nav-menu a.active{background:linear-gradient(135deg,var(--green900,#0d2c21),var(--green700,#1f654c)) !important;color:#fff !important}
  .menu-ico{width:23px !important;height:23px !important;min-width:23px !important;border-radius:10px !important}
  .menu-text{font-size:12px !important;line-height:1.1 !important}

  h1{font-size:clamp(30px, 9.5vw, 44px) !important;letter-spacing:-.7px !important}
  h2{font-size:clamp(23px, 7vw, 34px) !important;letter-spacing:-.4px !important}
  h3{font-size:18px !important}
  p,.lead{font-size:14.5px !important;line-height:1.65 !important}
  .section{padding:52px 0 !important;overflow:hidden !important}
  .section-title{margin-bottom:22px !important}
  .hero{min-height:auto !important}
  .hero-grid{grid-template-columns:1fr !important;gap:22px !important;padding:54px 0 68px !important}
  .hero-panel{border-radius:24px !important;padding:14px !important}
  .hero-panel img,.real-photo,.card-photo img,.product-img,.book-cover,.official-video-thumb{height:auto !important;min-height:0 !important;max-height:none !important;object-fit:cover !important}
  .btn-row,.center-row{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;width:100% !important}
  .btn{width:100% !important;min-height:48px !important;padding:12px 16px !important;font-size:14px !important;white-space:normal !important;text-align:center !important}
  .grid-2,.grid-3,.grid-4,.hero-mini,.booking-box,.booking-grid,.adopt-box,.impact-layout,.structure-grid,.flow-grid,.testimony-grid,.voice-grid,.news-grid,.product-grid,.book-grid,.official-video-grid,.doctor-layout,.market-shell,.footer-grid,.admin-layout,.admin-dashboard-grid,.admin-dashboard-panels,.admin-overview-grid,.service-overview-grid,.logo-row,.amounts,.form-2,.formgrid,.paygrid,.pricecards,.stats,.grid,.rekap-grid{
    grid-template-columns:1fr !important;
  }
  .card,.mini-card,.price-card,.policy-card,.booking-box,.booking-info,.booking-form,.admin-card,.book-panel,.official-video-panel,.market-side,.shop-banner,.doctor-form,.doctor-result{
    border-radius:var(--msb-card-radius) !important;
    padding:18px !important;
  }
  .pad{padding:18px !important}
  .footer{padding-bottom:calc(82px + var(--msb-safe-bottom)) !important}
  .floating{right:12px !important;bottom:calc(12px + var(--msb-safe-bottom)) !important;left:12px !important;display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8px !important;max-width:none !important}
  .float-btn,.float-wa{width:100% !important;min-height:42px !important;border-radius:14px !important;font-size:12px !important;padding:8px !important}
  .modal{padding:14px !important;align-items:flex-end !important}
  .modal-content{width:100% !important;max-height:88vh !important;border-radius:22px 22px 0 0 !important}
  .modal-head{padding:14px 16px !important}.modal-body{padding:16px !important}
  input,select,textarea{font-size:16px !important;min-height:46px !important;border-radius:14px !important}
  .field,.admin-field,label{min-width:0 !important}
  .admin-sidebar,.market-side{position:static !important;top:auto !important}
  .admin-sidebar{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;padding:12px !important}
  .admin-tab{min-height:42px !important;font-size:12px !important;padding:8px !important}
  .admin-actions,.admin-card .btn-row,.live-edit-buttons{display:grid !important;grid-template-columns:1fr !important;gap:8px !important}
  .admin-table,.pricing-table{min-width:680px !important}
  .toast{left:14px !important;right:14px !important;bottom:calc(78px + var(--msb-safe-bottom)) !important;transform:translateY(18px) !important;text-align:center !important;border-radius:16px !important}
  .toast.show{transform:translateY(0) !important}
}

@media (max-width:430px){
  .site-header .nav-menu,.nav-menu{grid-template-columns:1fr !important}
  .site-header .brand strong,.brand strong{max-width:calc(100vw - 168px) !important;font-size:11.3px !important}
  .site-header .brand span,.brand span{max-width:calc(100vw - 168px) !important;font-size:9.3px !important}
  .site-header .brand-mark,.brand-mark{width:38px !important;height:38px !important;flex-basis:38px !important}
  .site-header .nav-actions button,.mobile-toggle{height:34px !important;min-height:34px !important;font-size:10px !important;padding:0 8px !important}
  .hero-grid{padding-top:42px !important}
}

/* Kasir desktop dibuat adaptif, bukan terkunci min-width */
@media (max-width:900px){
  .layout{min-width:0 !important;grid-template-columns:220px minmax(0,1fr) !important}
  body.kasir-side-hidden .layout{min-width:0 !important;grid-template-columns:0 minmax(0,1fr) !important}
  .main{min-width:0 !important;overflow:hidden !important}
  .side{min-width:0 !important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .grid{grid-template-columns:1fr !important}
  .formgrid,.paygrid,.pricecards{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

@media (max-width:640px){
  .layout{display:block !important;min-width:0 !important;width:100% !important}
  .side{position:static !important;width:100% !important;height:auto !important;max-height:none !important;padding:14px !important;border-radius:0 0 24px 24px !important}
  .side-toggle{display:none !important}
  .brand img{width:46px !important;height:46px !important}
  .nav{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important}
  .nav button,.quick a,.quick button{font-size:12px !important;text-align:center !important;margin:0 !important;min-height:42px !important;padding:9px !important}
  .quick{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;margin-top:10px !important}
  .main{padding:16px !important;overflow:hidden !important}
  .topbar{align-items:flex-start !important}
  .title h1{font-size:26px !important;line-height:1.1 !important}
  .actions{display:grid !important;grid-template-columns:1fr 1fr !important;width:100% !important;gap:8px !important}
  .actions .btn{width:100% !important}
  .stats,.grid,.formgrid,.paygrid,.pricecards{grid-template-columns:1fr !important}
  .fieldrow{grid-template-columns:44px 1fr 44px !important}
  .totalbox .grand{font-size:clamp(36px,12vw,54px) !important;word-break:break-word !important}
  .sync-status{left:12px !important;right:12px !important;bottom:12px !important;max-width:none !important;text-align:center !important;white-space:normal !important}
  .toast{left:12px !important;right:12px !important;bottom:66px !important}
}

/* Portal dan customer display */
@media (max-width:900px){
  .wrap{grid-template-columns:1fr !important;max-width:760px !important;width:100% !important}
}
@media (max-width:640px){
  body:has(.wrap){padding:16px !important}
  .wrap{display:grid !important;grid-template-columns:1fr !important;gap:16px !important}
  .wrap .card{padding:20px !important;border-radius:22px !important}
  .hero h1,.login h1{font-size:clamp(30px,9vw,38px) !important}
  .roles{grid-template-columns:1fr !important}
  .actions{display:grid !important;grid-template-columns:1fr !important}
  .display{width:100% !important;border-radius:24px !important;padding:18px !important}
  .display .top{display:grid !important;grid-template-columns:1fr !important;gap:12px !important}
  .display .brand img{width:56px !important;height:56px !important}
  .display .brand h1{font-size:22px !important;line-height:1.1 !important}
  .welcome{padding:20px !important;margin:18px 0 !important;border-radius:22px !important}
  .welcome h2{font-size:clamp(34px,12vw,52px) !important;word-break:break-word !important}
  .tariff-grid,.display .grid{grid-template-columns:1fr !important}
  .grand{font-size:clamp(40px,14vw,66px) !important;word-break:break-word !important}
}

/* Kasir mobile app khusus tetap nyaman */
@media (max-width:520px){
  .authbox-mobile,.page,.card{max-width:100% !important}
  .tabs{padding-bottom:var(--msb-safe-bottom) !important}
  .total-grand,.r-big{word-break:break-word !important}
}

/* Print tetap bersih */
@media print{
  .site-header,.floating,.mobile-toggle,.toast,.ambient-toggle,.voice-listen{display:none !important}
  body{background:#fff !important;color:#000 !important;overflow:visible !important}
  .section{padding:16px 0 !important}
}


/* ==========================================================
   MSB RESPONSIVE HOTFIX v4 - Fixed top menu, no dropdown, no viewport flash
   Catatan teknis: patch ini sengaja berada di paling bawah agar mengalahkan
   patch lama di styles.css yang pernah mengunci body menjadi 1180/1366px.
   ========================================================== */
html,
body{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}
html.msb-desktop-lock,
body.msb-desktop-lock,
html.msb-desktop-fit,
body.msb-desktop-fit{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
.site-header{
  position:sticky!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:9998!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
main,
footer{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
}
.section,
[id]{
  scroll-margin-top:150px!important;
}
.mobile-toggle,
#mobileBtn,
button.mobile-toggle{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.site-header .navbar nav,
.navbar nav{
  display:block!important;
  min-width:0!important;
}
.site-header .nav-menu,
.nav-menu,
.site-header .nav-menu.show,
.nav-menu.show{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  pointer-events:auto!important;
  max-height:none!important;
}

@media (min-width:1200px){
  .site-header .container.navbar,
  .navbar{
    display:grid!important;
    grid-template-columns:minmax(220px,300px) minmax(0,1fr) max-content!important;
    align-items:center!important;
    gap:12px!important;
    min-height:76px!important;
  }
  .site-header .navbar nav,
  .navbar nav{
    overflow:visible!important;
  }
  .site-header .nav-menu,
  .nav-menu,
  .site-header .nav-menu.show,
  .nav-menu.show{
    position:static!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    align-items:center!important;
    width:auto!important;
    min-width:0!important;
    gap:5px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .site-header .nav-menu li,
  .nav-menu li{
    display:block!important;
    flex:0 0 auto!important;
  }
  .site-header .nav-menu a,
  .nav-menu a{
    min-height:34px!important;
    padding:7px 9px!important;
    font-size:clamp(10.8px,.68vw,12.5px)!important;
    line-height:1.08!important;
    white-space:nowrap!important;
  }
}

@media (min-width:768px) and (max-width:1199px){
  html,
  body{
    min-width:0!important;
    overflow-x:hidden!important;
  }
  .site-header .container.navbar,
  .navbar{
    width:calc(100vw - 28px)!important;
    max-width:calc(100vw - 28px)!important;
    display:grid!important;
    grid-template-columns:minmax(250px,1fr) max-content!important;
    grid-template-areas:"brand actions" "nav nav"!important;
    align-items:center!important;
    gap:9px!important;
    padding:9px 0 10px!important;
    min-height:auto!important;
  }
  .site-header .brand,
  .brand{
    grid-area:brand!important;
    min-width:0!important;
  }
  .site-header .nav-actions,
  .nav-actions{
    grid-area:actions!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    min-width:0!important;
  }
  .site-header .nav-actions select,
  .nav-actions select{
    width:118px!important;
    max-width:118px!important;
  }
  .site-header .navbar nav,
  .navbar nav{
    grid-area:nav!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;
    overscroll-behavior-x:contain!important;
    padding:2px 0 5px!important;
  }
  .site-header .nav-menu,
  .nav-menu,
  .site-header .nav-menu.show,
  .nav-menu.show{
    position:static!important;
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,minmax(36px,auto))!important;
    grid-auto-columns:max-content!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:max-content!important;
    min-width:100%!important;
    max-width:none!important;
    gap:7px!important;
    padding:0 2px!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .site-header .nav-menu li,
  .nav-menu li{
    display:block!important;
    list-style:none!important;
    min-width:0!important;
  }
  .site-header .nav-menu a,
  .nav-menu a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    min-height:36px!important;
    padding:8px 11px!important;
    border-radius:999px!important;
    font-size:11.4px!important;
    line-height:1.08!important;
    white-space:nowrap!important;
  }
}

@media (max-width:767px){
  :root{--msb-page-gutter:14px!important;}
  html,
  body{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    touch-action:pan-y!important;
    overscroll-behavior-x:none!important;
  }
  body{
    font-size:15px!important;
    line-height:1.6!important;
    background-attachment:scroll!important;
  }
  .site-header,
  html.msb-desktop-lock .site-header,
  .mobile-fixed-desktop{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:9999!important;
    overflow:visible!important;
  }
  .site-header .container,
  .site-header .container.navbar,
  .navbar{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) max-content!important;
    grid-template-areas:"brand actions" "nav nav"!important;
    align-items:center!important;
    gap:8px!important;
    min-height:auto!important;
    padding:8px 0 9px!important;
  }
  .site-header .brand,
  .brand{
    grid-area:brand!important;
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    gap:8px!important;
  }
  .site-header .brand-mark,
  .brand-mark{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    border-radius:14px!important;
  }
  .site-header .brand strong,
  .brand strong{
    font-size:12px!important;
    line-height:1.12!important;
    max-width:calc(100vw - 180px)!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .site-header .brand span,
  .brand span{
    display:block!important;
    font-size:9.8px!important;
    line-height:1.1!important;
    max-width:calc(100vw - 180px)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .site-header .nav-actions,
  .nav-actions{
    grid-area:actions!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    min-width:0!important;
  }
  .site-header .nav-actions select,
  .nav-actions select{
    display:inline-block!important;
    width:82px!important;
    max-width:82px!important;
    min-width:82px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 6px!important;
    border-radius:11px!important;
    font-size:10.5px!important;
  }
  .site-header .nav-actions button:not(.mobile-toggle),
  .nav-actions button:not(.mobile-toggle){
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 8px!important;
    border-radius:11px!important;
    font-size:10.8px!important;
    white-space:nowrap!important;
  }
  .site-header .navbar nav,
  .navbar nav{
    grid-area:nav!important;
    width:100%!important;
    max-width:100%!important;
    display:block!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:thin!important;
    padding:1px 0 6px!important;
  }
  .site-header .nav-menu,
  .nav-menu,
  .site-header .nav-menu.show,
  .nav-menu.show{
    position:static!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,minmax(35px,auto))!important;
    grid-auto-columns:max-content!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:max-content!important;
    min-width:100%!important;
    max-width:none!important;
    max-height:none!important;
    gap:6px!important;
    padding:0 1px!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .site-header .nav-menu li,
  .nav-menu li{
    display:block!important;
    list-style:none!important;
    min-width:0!important;
    width:auto!important;
  }
  .site-header .nav-menu a,
  .nav-menu a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    min-height:35px!important;
    min-width:max-content!important;
    padding:7px 10px!important;
    border-radius:999px!important;
    font-size:11.2px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    background:rgba(255,255,255,.58)!important;
    border:1px solid rgba(6,59,42,.10)!important;
    box-shadow:0 4px 12px rgba(6,43,32,.08)!important;
  }
  body.dark .site-header .nav-menu a,
  body.dark .nav-menu a{
    background:rgba(255,255,255,.10)!important;
    border-color:rgba(255,255,255,.12)!important;
    box-shadow:none!important;
  }
  .site-header .menu-ico,
  .menu-ico{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    border-radius:7px!important;
  }
  .site-header .menu-ico:before,
  .menu-ico:before{
    width:11px!important;
    height:11px!important;
  }
  .container,
  .site-header .container,
  .site-header .container.navbar{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
  }
  .hero,
  .section{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  .hero-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .service-overview-grid,
  .flow-grid,
  .testimony-grid,
  .voice-grid,
  .news-grid,
  .product-grid,
  .book-grid,
  .official-video-grid,
  .booking-box,
  .adopt-box,
  .impact-layout,
  .doctor-layout,
  .market-shell,
  .footer-grid,
  .admin-layout,
  .admin-dashboard-grid,
  .admin-overview-grid,
  .form-2,
  .formgrid,
  .booking-grid,
  .amounts,
  .logo-row{
    grid-template-columns:1fr!important;
  }
  .hero-grid{
    padding:34px 0 58px!important;
    gap:20px!important;
  }
  .hero h1,
  #siteTitle{
    font-size:clamp(30px,9vw,42px)!important;
    line-height:1.08!important;
  }
  .lead,
  .hero p{
    font-size:15px!important;
  }
}

@media (max-width:420px){
  .site-header .container.navbar,
  .navbar{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    gap:7px!important;
  }
  .site-header .brand-mark,
  .brand-mark{
    width:36px!important;
    height:36px!important;
    flex-basis:36px!important;
  }
  .site-header .brand strong,
  .brand strong{
    font-size:11.2px!important;
    max-width:calc(100vw - 168px)!important;
  }
  .site-header .brand span,
  .brand span{
    font-size:9px!important;
    max-width:calc(100vw - 168px)!important;
  }
  .site-header .nav-actions select,
  .nav-actions select{
    width:76px!important;
    max-width:76px!important;
    min-width:76px!important;
    font-size:9.8px!important;
  }
  .site-header .nav-actions button:not(.mobile-toggle),
  .nav-actions button:not(.mobile-toggle){
    height:32px!important;
    min-height:32px!important;
    padding:0 7px!important;
    font-size:10px!important;
  }
  .site-header .nav-menu,
  .nav-menu,
  .site-header .nav-menu.show,
  .nav-menu.show{
    grid-template-rows:repeat(2,minmax(34px,auto))!important;
    gap:5px!important;
  }
  .site-header .nav-menu a,
  .nav-menu a{
    min-height:34px!important;
    padding:7px 9px!important;
    font-size:10.8px!important;
  }
  .container,
  .site-header .container,
  .site-header .container.navbar{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
  }
}

/* ==========================================================
   MSB MOBILE BOX GRID HOTFIX v5
   Tujuan: kartu/box di HP tampil dua kolom kiri-kanan seperti referensi,
   tanpa dropdown/hamburger, menu tetap di top, dan ukuran tetap nyaman dibaca.
   ========================================================== */
@media (max-width:767px){
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:99999!important;
  }

  .site-header .navbar nav,
  .navbar nav{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:7px!important;
  }

  .site-header .nav-menu,
  .nav-menu,
  .site-header .nav-menu.show,
  .nav-menu.show{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,minmax(38px,auto))!important;
    grid-auto-columns:max-content!important;
    gap:7px!important;
    width:max-content!important;
    min-width:100%!important;
    overflow:visible!important;
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
  }

  .site-header .nav-menu a,
  .nav-menu a{
    min-height:38px!important;
    padding:8px 11px!important;
    font-size:11.8px!important;
    line-height:1.08!important;
    border-radius:999px!important;
    white-space:nowrap!important;
  }

  .mobile-toggle,
  #mobileBtn,
  button.mobile-toggle{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .hero-grid,
  .booking-box,
  .booking-grid,
  .booking-info,
  .booking-form,
  .adopt-box,
  .impact-layout,
  .doctor-layout,
  .market-shell,
  .admin-layout,
  .admin-dashboard-panels,
  .footer-grid,
  .form-2,
  .formgrid,
  .paygrid,
  .book-controls,
  .official-video-toolbar,
  .shop-tools,
  .shop-searchbar,
  .shop-filter-row{
    grid-template-columns:1fr!important;
  }

  .hero-mini,
  .grid-3,
  .grid-4,
  .service-overview-grid,
  .flow-grid,
  .testimony-grid,
  .voice-grid,
  .news-grid,
  .product-grid,
  .shopee-grid,
  .book-grid,
  .official-video-grid,
  .amounts,
  .logo-row,
  .official-video-tabs,
  .admin-overview-grid,
  .admin-dashboard-grid,
  .pricecards,
  .stats,
  .tariff-grid,
  .display .grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:stretch!important;
  }

  .grid-2:has(> .card),
  .grid-2:has(> .policy-card),
  .grid-2:has(> .faq-item),
  .grid-2:has(> .price-card),
  .grid-2:has(> .mini-card),
  .grid-2:has(> .service-overview-card){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .grid-2:has(> .section-title),
  .grid-2:has(> .photo-frame),
  .grid-2:has(> .map-card),
  .grid-2:has(> .quick-contact-card),
  .grid-2:has(> .booking-form),
  .grid-2:has(> .booking-info){
    grid-template-columns:1fr!important;
  }

  .card,
  .mini-card,
  .service-overview-card,
  .news-card,
  .product-card,
  .book-card,
  .official-media-card,
  .policy-card,
  .price-card,
  .logo-card,
  .amount,
  .impact-badge,
  .admin-card,
  .stat-card,
  .tariff-card{
    min-width:0!important;
    border-radius:16px!important;
    padding:12px!important;
  }

  .news-card,
  .product-card,
  .book-card,
  .official-media-card{
    padding:0!important;
    overflow:hidden!important;
  }

  .book-card{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
  }

  .book-cover,
  .book-cover img,
  .book-cover-fallback{
    width:100%!important;
    height:132px!important;
    min-height:132px!important;
    border-radius:0!important;
    object-fit:cover!important;
  }

  .official-media-preview{
    min-height:0!important;
    height:auto!important;
  }

  .official-media-preview img,
  .news-card img,
  .card-photo,
  .testimony-card img,
  .voice-card img{
    width:100%!important;
    height:122px!important;
    min-height:122px!important;
    object-fit:cover!important;
  }

  .product-img,
  .shopee-grid .product-img{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1/1!important;
    border-radius:16px 16px 0 0!important;
  }

  .book-body,
  .official-media-body,
  .news-card-body,
  .product-body{
    padding:11px!important;
    gap:7px!important;
  }

  .card h3,
  .service-overview-card h3,
  .news-card-body h3,
  .product-body h3,
  .book-body h3,
  .official-media-body h3,
  .policy-card h3,
  .faq-question{
    font-size:13.2px!important;
    line-height:1.22!important;
    margin-bottom:4px!important;
  }

  .card p,
  .service-overview-card p,
  .news-card-body p,
  .product-body p,
  .book-body p,
  .official-media-body p,
  .policy-card li,
  .list li,
  .number-list li{
    font-size:11.2px!important;
    line-height:1.38!important;
  }

  .news-card-body p,
  .official-media-body p,
  .book-body p{
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  .product-body p{
    display:none!important;
  }

  .mini-card strong,
  .ticket-price,
  .amount strong,
  .impact-badge strong,
  .product-price{
    font-size:15px!important;
    line-height:1.15!important;
  }

  .mini-card span,
  .card small,
  .news-meta,
  .book-meta,
  .product-info,
  .product-meta,
  .official-video-tab,
  .book-tags span{
    font-size:9.5px!important;
    line-height:1.2!important;
  }

  .news-action-row,
  .book-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    margin-top:6px!important;
  }

  .news-read,
  .book-actions .btn,
  .product-buy,
  .official-media-play{
    min-height:34px!important;
    padding:7px 9px!important;
    font-size:10.2px!important;
    border-radius:12px!important;
  }

  .official-media-play{
    left:8px!important;
    bottom:8px!important;
    max-width:calc(100% - 16px)!important;
  }

  .partner-card{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:8px!important;
  }

  .partner-card p,
  .partner-card .quote-box{
    display:none!important;
  }

  .partner-photo{
    width:46px!important;
    height:46px!important;
  }

  .partner-photo img,
  .partner-initial{
    width:34px!important;
    height:34px!important;
  }

  .gallery-item,
  .gallery-item img{
    min-width:0!important;
  }
}

@media (max-width:420px){
  .hero-mini,
  .grid-3,
  .grid-4,
  .service-overview-grid,
  .flow-grid,
  .testimony-grid,
  .voice-grid,
  .news-grid,
  .product-grid,
  .shopee-grid,
  .book-grid,
  .official-video-grid,
  .amounts,
  .logo-row,
  .official-video-tabs,
  .admin-overview-grid,
  .admin-dashboard-grid,
  .pricecards,
  .stats,
  .tariff-grid,
  .display .grid,
  .grid-2:has(> .card),
  .grid-2:has(> .policy-card),
  .grid-2:has(> .faq-item),
  .grid-2:has(> .price-card),
  .grid-2:has(> .mini-card),
  .grid-2:has(> .service-overview-card){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .site-header .nav-menu a,
  .nav-menu a{
    min-height:37px!important;
    padding:8px 10px!important;
    font-size:11.4px!important;
  }

  .card,
  .mini-card,
  .service-overview-card,
  .policy-card,
  .price-card,
  .logo-card,
  .amount,
  .impact-badge,
  .admin-card,
  .stat-card,
  .tariff-card{
    padding:10px!important;
    border-radius:15px!important;
  }

  .book-body,
  .official-media-body,
  .news-card-body,
  .product-body{
    padding:10px!important;
  }

  .official-media-preview img,
  .news-card img,
  .card-photo,
  .testimony-card img,
  .voice-card img,
  .book-cover,
  .book-cover img,
  .book-cover-fallback{
    height:112px!important;
    min-height:112px!important;
  }

  .card h3,
  .service-overview-card h3,
  .news-card-body h3,
  .product-body h3,
  .book-body h3,
  .official-media-body h3,
  .policy-card h3,
  .faq-question{
    font-size:12.4px!important;
  }

  .card p,
  .service-overview-card p,
  .news-card-body p,
  .book-body p,
  .official-media-body p,
  .policy-card li,
  .list li,
  .number-list li{
    font-size:10.7px!important;
  }
}

/* ==========================================================
   MSB MOBILE READABILITY HOTFIX v6
   Perbaikan: box besar seperti Kontak/Aksi Cepat tidak dipaksa 2 kolom,
   bottom floating tidak menutup konten, dan grid 2 box hanya untuk card ringkas.
   ========================================================== */
@media (max-width:767px){
  body{
    padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))!important;
  }

  /* Section besar/teks panjang wajib satu kolom agar tidak sempit di HP */
  #contact > .container.grid-2,
  #location > .container.grid-2,
  .container.grid-2:has(> .quick-contact-card),
  .container.grid-2:has(> .map-card),
  .container.grid-2:has(> .booking-form),
  .container.grid-2:has(> .booking-info),
  .container.grid-2:has(> .section-title){
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  #contact .card,
  #contact .quick-contact-card{
    width:100%!important;
    max-width:100%!important;
    padding:18px!important;
    border-radius:22px!important;
  }

  #contact h2,
  #location h2{
    font-size:clamp(24px, 7.2vw, 31px)!important;
    line-height:1.08!important;
    letter-spacing:-.35px!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }

  #contact p,
  #location p{
    font-size:14px!important;
    line-height:1.55!important;
  }

  .contact-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .contact-list li{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:10px!important;
    padding:12px!important;
    border-radius:18px!important;
    min-width:0!important;
  }

  .contact-list strong{
    font-size:14px!important;
    line-height:1.2!important;
  }

  .contact-list p,
  .contact-list a{
    font-size:12px!important;
    line-height:1.35!important;
    overflow-wrap:anywhere!important;
  }

  .contact-symbol,
  .info-icon{
    width:42px!important;
    height:42px!important;
    border-radius:15px!important;
    font-size:12px!important;
  }

  .quick-action-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .quick-action-item{
    padding:14px!important;
    border-radius:18px!important;
    min-width:0!important;
  }

  .quick-action-item strong{
    font-size:15px!important;
    line-height:1.22!important;
    word-break:normal!important;
  }

  .quick-action-item span{
    font-size:12px!important;
    line-height:1.45!important;
  }

  /* Dua kolom hanya untuk kartu ringkas/thumbnail, bukan kartu teks besar */
  .news-grid,
  .product-grid,
  .shopee-grid,
  .book-grid,
  .official-video-grid,
  #galleryGrid,
  .logo-row,
  .tariff-grid,
  .display .grid,
  .official-video-tabs,
  .hero-mini,
  .amounts{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .grid-2:has(> .card):not(:has(> .quick-contact-card)):not(:has(> .map-card)):not(:has(> .booking-form)):not(:has(> .booking-info)){
    gap:12px!important;
  }

  .grid-2:has(> .faq-item),
  .grid-2:has(> .mini-card),
  .grid-2:has(> .price-card){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .faq-item{
    padding:12px!important;
    border-radius:18px!important;
  }

  .faq-question{
    font-size:12px!important;
    line-height:1.25!important;
  }

  /* Tombol melayang bawah dibuat satu baris 4 menu agar tidak pecah/menimpa */
  .floating{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px))!important;
    z-index:99990!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    width:auto!important;
    max-width:none!important;
    padding:0!important;
  }

  .float-btn,
  .float-wa{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    max-height:46px!important;
    padding:7px 5px!important;
    border-radius:15px!important;
    font-size:10.5px!important;
    line-height:1.05!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    box-shadow:0 12px 28px rgba(5,30,22,.22)!important;
  }

  .footer{
    padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))!important;
  }
}

@media (max-width:380px){
  #contact .card,
  #contact .quick-contact-card{
    padding:16px!important;
  }

  #contact h2,
  #location h2{
    font-size:clamp(23px, 7vw, 28px)!important;
  }

  .floating{
    left:8px!important;
    right:8px!important;
    gap:6px!important;
  }

  .float-btn,
  .float-wa{
    min-height:40px!important;
    font-size:10px!important;
    border-radius:14px!important;
  }
}

/* ==========================================================
   MSB MOBILE STANDARD FONT + 2 BOX GRID HOTFIX v7
   Prinsip ukuran mobile:
   - Title: 20px sampai 28px (setara pendekatan 20sp-28sp)
   - Body: 14px sampai 17px (setara pendekatan 14sp-17sp)
   - Semua box/card publik dipaksa 2 kolom di mobile, tetapi form tetap aman.
   ========================================================== */
@media (max-width:767px){
  :root{
    --msb-mobile-title: clamp(20px, 5.9vw, 28px);
    --msb-mobile-card-title: clamp(20px, 5.35vw, 24px);
    --msb-mobile-body: clamp(14px, 3.85vw, 17px);
    --msb-mobile-note: clamp(13px, 3.55vw, 15px);
    --msb-mobile-menu: clamp(14px, 3.8vw, 16px);
    --msb-mobile-gap: 12px;
    --msb-mobile-card-pad: 14px;
    --msb-mobile-card-radius: 20px;
  }

  body{
    font-size: var(--msb-mobile-body)!important;
    line-height: 1.55!important;
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px))!important;
  }

  /* Heading mobile mengikuti rentang 20sp-28sp untuk area section/card. */
  h2,
  .section-title h2,
  #contact h2,
  #location h2,
  .card h2,
  .box h2,
  .quick-contact-card h2{
    font-size: var(--msb-mobile-title)!important;
    line-height: 1.12!important;
    letter-spacing: -0.25px!important;
    overflow-wrap: anywhere!important;
    word-break: normal!important;
    hyphens: auto!important;
  }

  h3,
  .card h3,
  .box h3,
  .service-overview-card h3,
  .news-card-body h3,
  .product-body h3,
  .book-body h3,
  .official-media-body h3,
  .policy-card h3,
  .faq-question,
  .quick-action-item strong,
  .contact-list strong,
  .mini-card strong,
  .amount strong,
  .impact-badge strong,
  .ticket-price,
  .product-price{
    font-size: var(--msb-mobile-card-title)!important;
    line-height: 1.16!important;
    letter-spacing: -0.2px!important;
    overflow-wrap: anywhere!important;
    word-break: normal!important;
    hyphens: auto!important;
  }

  p,
  .lead,
  .hero p,
  .card p,
  .box p,
  .service-overview-card p,
  .news-card-body p,
  .product-body p,
  .book-body p,
  .official-media-body p,
  .policy-card li,
  .list li,
  .number-list li,
  .quick-action-item span,
  .contact-list p,
  .contact-list a,
  .info-item p,
  .section-title p{
    font-size: var(--msb-mobile-body)!important;
    line-height: 1.5!important;
    overflow-wrap: anywhere!important;
    word-break: normal!important;
  }

  small,
  .eyebrow,
  .news-meta,
  .book-meta,
  .product-info,
  .product-meta,
  .official-video-tab,
  .book-tags span,
  .mini-card span,
  .card small{
    font-size: var(--msb-mobile-note)!important;
    line-height: 1.25!important;
  }

  /* Menu tetap di top, tanpa dropdown/hamburger, ukuran teks tidak terlalu kecil. */
  .site-header .nav-menu,
  .nav-menu,
  .site-header .nav-menu.show,
  .nav-menu.show{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,minmax(44px,auto))!important;
    grid-auto-columns:max-content!important;
    gap:8px!important;
    width:max-content!important;
    min-width:100%!important;
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
    overflow:visible!important;
  }

  .site-header .nav-menu a,
  .nav-menu a{
    min-height:44px!important;
    padding:10px 13px!important;
    font-size:var(--msb-mobile-menu)!important;
    line-height:1.1!important;
    border-radius:999px!important;
    white-space:nowrap!important;
  }

  .site-header .menu-text,
  .menu-text{
    font-size:var(--msb-mobile-menu)!important;
    line-height:1.1!important;
  }

  /* Semua box/card publik dipaksa 2 kolom di mobile. */
  .hero-mini,
  .grid-2,
  .grid-3,
  .grid-4,
  .service-overview-grid,
  .flow-grid,
  .testimony-grid,
  .voice-grid,
  .news-grid,
  .product-grid,
  .shopee-grid,
  .book-grid,
  .official-video-grid,
  .amounts,
  .logo-row,
  .official-video-tabs,
  .admin-overview-grid,
  .admin-dashboard-grid,
  .pricecards,
  .stats,
  .tariff-grid,
  .display .grid,
  .roles,
  #galleryGrid,
  #contact > .container.grid-2,
  #location > .container.grid-2,
  .container.grid-2:has(> .quick-contact-card),
  .container.grid-2:has(> .map-card),
  .container.grid-2:has(> .section-title),
  .grid-2:has(> .card),
  .grid-2:has(> .policy-card),
  .grid-2:has(> .faq-item),
  .grid-2:has(> .price-card),
  .grid-2:has(> .mini-card),
  .grid-2:has(> .service-overview-card){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--msb-mobile-gap)!important;
    align-items:stretch!important;
  }

  /* Form dan panel kerja tetap dibuat aman, bukan box publik. */
  .booking-box,
  .booking-grid,
  .booking-form,
  .booking-info,
  .adopt-box,
  .doctor-layout,
  .doctor-form,
  .doctor-result,
  .market-shell,
  .admin-layout,
  .admin-dashboard-panels,
  .footer-grid,
  .form-2,
  .formgrid,
  .paygrid,
  .book-controls,
  .official-video-toolbar,
  .shop-tools,
  .shop-searchbar,
  .shop-filter-row,
  .wrap{
    grid-template-columns:1fr!important;
  }

  .card,
  .box,
  .mini-card,
  .service-overview-card,
  .news-card,
  .product-card,
  .book-card,
  .official-media-card,
  .policy-card,
  .price-card,
  .logo-card,
  .amount,
  .impact-badge,
  .stat-card,
  .tariff-card,
  .role,
  #contact .card,
  #contact .quick-contact-card,
  #location .card,
  #location .map-card{
    min-width:0!important;
    max-width:100%!important;
    width:100%!important;
    padding:var(--msb-mobile-card-pad)!important;
    border-radius:var(--msb-mobile-card-radius)!important;
    overflow:hidden!important;
  }

  .pad{padding:var(--msb-mobile-card-pad)!important;}

  .contact-list,
  .quick-action-list,
  .info-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .contact-list li,
  .quick-action-item,
  .info-item{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:10px!important;
    padding:12px!important;
    border-radius:18px!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .quick-action-item{
    grid-template-columns:1fr!important;
  }

  .contact-symbol,
  .info-icon{
    width:44px!important;
    height:44px!important;
    border-radius:15px!important;
    font-size:14px!important;
  }

  .btn,
  .news-read,
  .book-actions .btn,
  .product-buy,
  .official-media-play,
  .quick-action-item,
  button,
  input,
  select,
  textarea{
    font-size:var(--msb-mobile-body)!important;
  }

  .btn,
  .news-read,
  .book-actions .btn,
  .product-buy,
  .official-media-play{
    min-height:44px!important;
    padding:10px 12px!important;
    border-radius:14px!important;
  }

  /* Media thumbnail tetap proporsional untuk dua kolom. */
  .official-media-preview img,
  .news-card img,
  .card-photo,
  .testimony-card img,
  .voice-card img,
  .book-cover,
  .book-cover img,
  .book-cover-fallback{
    height:128px!important;
    min-height:128px!important;
    object-fit:cover!important;
  }

  .product-img,
  .shopee-grid .product-img{
    aspect-ratio:1/1!important;
    height:auto!important;
    object-fit:cover!important;
  }

  /* Deskripsi pada card thumbnail dibatasi agar dua box tetap bersih. */
  .news-card-body p,
  .official-media-body p,
  .book-body p,
  .product-body p,
  .service-overview-card p,
  .policy-card p{
    display:-webkit-box!important;
    -webkit-line-clamp:4!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  /* Kontak dan aksi cepat tetap dua kolom, tetapi teksnya tidak dikecilkan di bawah standar. */
  #contact .card,
  #contact .quick-contact-card{
    padding:16px!important;
    border-radius:22px!important;
  }

  #contact .btn-row,
  .quick-contact-card .btn-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  /* Floating bottom bar tidak menimpa konten, teks minimal body kecil yang masih terbaca. */
  .floating{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px))!important;
    z-index:99990!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    width:auto!important;
    max-width:none!important;
    padding:0!important;
  }

  .float-btn,
  .float-wa{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    padding:8px 6px!important;
    border-radius:16px!important;
    font-size:clamp(12px,3.3vw,14px)!important;
    line-height:1.1!important;
    text-align:center!important;
    white-space:normal!important;
    overflow:hidden!important;
    box-shadow:0 12px 28px rgba(5,30,22,.22)!important;
  }

  .footer{
    padding-bottom:calc(122px + env(safe-area-inset-bottom, 0px))!important;
  }
}

@media (max-width:420px){
  :root{
    --msb-mobile-title: clamp(20px, 6vw, 26px);
    --msb-mobile-card-title: 20px;
    --msb-mobile-body: 14px;
    --msb-mobile-note: 13px;
    --msb-mobile-menu: 14px;
    --msb-mobile-gap: 10px;
    --msb-mobile-card-pad: 12px;
    --msb-mobile-card-radius: 18px;
  }

  .site-header .nav-menu a,
  .nav-menu a{
    min-height:42px!important;
    padding:9px 12px!important;
  }

  .official-media-preview img,
  .news-card img,
  .card-photo,
  .testimony-card img,
  .voice-card img,
  .book-cover,
  .book-cover img,
  .book-cover-fallback{
    height:118px!important;
    min-height:118px!important;
  }

  .floating{
    left:8px!important;
    right:8px!important;
    gap:6px!important;
  }

  .float-btn,
  .float-wa{
    min-height:46px!important;
    font-size:12px!important;
    border-radius:15px!important;
  }
}


/* ==========================================================
   MSB MOBILE FONT COMPACT HOTFIX v8
   Permintaan: seluruh font pada versi mobile dikecilkan sekitar 40% lagi.
   Catatan: hanya aktif pada mobile max-width 767px, sehingga desktop dan tablet tidak tersentuh.
   ========================================================== */
@media (max-width:767px){
  :root{
    --msb-mobile-title: clamp(12px, 3.55vw, 17px) !important;
    --msb-mobile-card-title: clamp(12px, 3.25vw, 15px) !important;
    --msb-mobile-body: clamp(9px, 2.45vw, 10.5px) !important;
    --msb-mobile-note: clamp(8px, 2.18vw, 9.2px) !important;
    --msb-mobile-menu: clamp(8.8px, 2.35vw, 10px) !important;
    --msb-mobile-gap: 8px !important;
    --msb-mobile-card-pad: 8px !important;
    --msb-mobile-card-radius: 14px !important;
  }

  body,
  main,
  section,
  article,
  aside,
  footer,
  header,
  nav,
  .section,
  .card,
  .box,
  .mini-card,
  .service-overview-card,
  .news-card,
  .product-card,
  .book-card,
  .official-media-card,
  .policy-card,
  .price-card,
  .logo-card,
  .amount,
  .impact-badge,
  .stat-card,
  .tariff-card,
  .role,
  .quick-contact-card,
  .map-card,
  .admin-card,
  .booking-form,
  .booking-info,
  .doctor-form,
  .doctor-result{
    font-size: var(--msb-mobile-body) !important;
    line-height: 1.42 !important;
  }

  h1,
  h2,
  .hero h1,
  .login h1,
  .title h1,
  #siteTitle,
  .section-title h2,
  #contact h2,
  #location h2,
  .card h2,
  .box h2,
  .quick-contact-card h2{
    font-size: var(--msb-mobile-title) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.18px !important;
  }

  h3,
  h4,
  .card h3,
  .box h3,
  .service-overview-card h3,
  .news-card-body h3,
  .product-body h3,
  .book-body h3,
  .official-media-body h3,
  .policy-card h3,
  .faq-question,
  .quick-action-item strong,
  .contact-list strong,
  .mini-card strong,
  .amount strong,
  .impact-badge strong,
  .ticket-price,
  .product-price,
  .tariff-card b,
  .card b,
  .display .brand h1,
  .welcome h2,
  .visitor,
  .grand,
  .totalbox .grand,
  .r-big,
  .total-grand{
    font-size: var(--msb-mobile-card-title) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.15px !important;
  }

  p,
  .lead,
  .hero p,
  .card p,
  .box p,
  .service-overview-card p,
  .news-card-body p,
  .product-body p,
  .book-body p,
  .official-media-body p,
  .policy-card li,
  .list li,
  .number-list li,
  .quick-action-item span,
  .contact-list p,
  .contact-list a,
  .info-item p,
  .section-title p,
  li,
  label,
  .note,
  .msg,
  .footer,
  footer{
    font-size: var(--msb-mobile-body) !important;
    line-height: 1.42 !important;
  }

  small,
  .eyebrow,
  .news-meta,
  .book-meta,
  .product-info,
  .product-meta,
  .official-video-tab,
  .book-tags span,
  .mini-card span,
  .card small,
  .brand span,
  .site-header .brand span,
  .time,
  .usd,
  .tariff-card small{
    font-size: var(--msb-mobile-note) !important;
    line-height: 1.18 !important;
  }

  .site-header .brand strong,
  .brand strong{
    font-size: clamp(8px, 2.25vw, 9.5px) !important;
    line-height: 1.08 !important;
  }

  .site-header .nav-menu a,
  .nav-menu a,
  .site-header .menu-text,
  .menu-text,
  .nav button,
  .quick a,
  .quick button,
  .admin-tab{
    font-size: var(--msb-mobile-menu) !important;
    line-height: 1.08 !important;
  }

  button,
  .btn,
  .news-read,
  .book-actions .btn,
  .product-buy,
  .official-media-play,
  input,
  select,
  textarea,
  .float-btn,
  .float-wa,
  .actions .btn{
    font-size: var(--msb-mobile-body) !important;
    line-height: 1.15 !important;
  }

  input,
  select,
  textarea{
    min-height: 34px !important;
    padding: 8px 9px !important;
    border-radius: 10px !important;
  }

  .site-header .nav-menu,
  .nav-menu,
  .site-header .nav-menu.show,
  .nav-menu.show{
    grid-template-rows: repeat(2, minmax(32px, auto)) !important;
    gap: 5px !important;
  }

  .site-header .nav-menu a,
  .nav-menu a{
    min-height: 32px !important;
    padding: 6px 8px !important;
    border-radius: 999px !important;
  }

  .site-header .menu-ico,
  .menu-ico{
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    border-radius: 6px !important;
  }

  .site-header .brand-mark,
  .brand-mark{
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
    border-radius: 11px !important;
  }

  .site-header .nav-actions select,
  .nav-actions select,
  .site-header .nav-actions button:not(.mobile-toggle),
  .nav-actions button:not(.mobile-toggle){
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 6px !important;
    font-size: 8.8px !important;
    border-radius: 9px !important;
  }

  .card,
  .box,
  .mini-card,
  .service-overview-card,
  .news-card,
  .product-card,
  .book-card,
  .official-media-card,
  .policy-card,
  .price-card,
  .logo-card,
  .amount,
  .impact-badge,
  .stat-card,
  .tariff-card,
  .role,
  #contact .card,
  #contact .quick-contact-card,
  #location .card,
  #location .map-card,
  .booking-form,
  .booking-info,
  .admin-card,
  .wrap .card{
    padding: var(--msb-mobile-card-pad) !important;
    border-radius: var(--msb-mobile-card-radius) !important;
  }

  .book-body,
  .official-media-body,
  .news-card-body,
  .product-body,
  .pad{
    padding: var(--msb-mobile-card-pad) !important;
  }

  .contact-list li,
  .quick-action-item,
  .info-item{
    padding: 8px !important;
    gap: 7px !important;
    border-radius: 12px !important;
  }

  .contact-symbol,
  .info-icon{
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
  }

  .btn,
  .news-read,
  .book-actions .btn,
  .product-buy,
  .official-media-play{
    min-height: 34px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
  }

  .floating{
    left: 8px !important;
    right: 8px !important;
    gap: 5px !important;
  }

  .float-btn,
  .float-wa{
    min-height: 34px !important;
    max-height: 38px !important;
    padding: 5px 4px !important;
    border-radius: 11px !important;
    font-size: clamp(8px, 2.25vw, 9px) !important;
    line-height: 1.05 !important;
  }

  .official-media-preview img,
  .news-card img,
  .card-photo,
  .testimony-card img,
  .voice-card img,
  .book-cover,
  .book-cover img,
  .book-cover-fallback{
    height: 92px !important;
    min-height: 92px !important;
  }
}

@media (max-width:420px){
  :root{
    --msb-mobile-title: clamp(12px, 3.45vw, 15.5px) !important;
    --msb-mobile-card-title: clamp(11.5px, 3.15vw, 13.5px) !important;
    --msb-mobile-body: clamp(8.5px, 2.35vw, 9.5px) !important;
    --msb-mobile-note: clamp(7.6px, 2.05vw, 8.5px) !important;
    --msb-mobile-menu: clamp(8.2px, 2.2vw, 9.2px) !important;
    --msb-mobile-gap: 7px !important;
    --msb-mobile-card-pad: 7px !important;
    --msb-mobile-card-radius: 13px !important;
  }

  .site-header .nav-menu a,
  .nav-menu a{
    min-height: 30px !important;
    padding: 5px 7px !important;
  }

  .official-media-preview img,
  .news-card img,
  .card-photo,
  .testimony-card img,
  .voice-card img,
  .book-cover,
  .book-cover img,
  .book-cover-fallback{
    height: 84px !important;
    min-height: 84px !important;
  }
}

/* ==========================================================
   MSB MOBILE SCROLL + TOP UTILITY BAR HOTFIX v9
   Permintaan: khusus mobile, scroll atas-bawah wajib aktif; bar bahasa,
   suara, dan dark diperkecil serta dipindahkan agar tidak berada di atas
   bar menu utama. Desktop dan tablet tidak disentuh.
   ========================================================== */
@media (max-width:767px){
  html,
  body{
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:auto!important;
    overscroll-behavior:auto!important;
  }

  body{
    position:relative!important;
    padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px))!important;
  }

  main,
  #mainContent,
  footer,
  .section,
  .hero,
  .container{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:99999!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .site-header .container.navbar,
  .navbar{
    width:calc(100vw - 18px)!important;
    max-width:calc(100vw - 18px)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:
      "brand"
      "nav"
      "actions"!important;
    align-items:center!important;
    gap:4px!important;
    padding:5px 0 6px!important;
    min-height:auto!important;
  }

  .site-header .brand,
  .brand{
    grid-area:brand!important;
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
  }

  .site-header .brand-mark,
  .brand-mark{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    flex-basis:28px!important;
    border-radius:9px!important;
  }

  .site-header .brand strong,
  .brand strong{
    max-width:100%!important;
    font-size:8.4px!important;
    line-height:1.06!important;
    letter-spacing:-.05px!important;
    -webkit-line-clamp:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .site-header .brand span,
  .brand span{
    max-width:100%!important;
    font-size:7.2px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .site-header .navbar nav,
  .navbar nav{
    grid-area:nav!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x pan-y!important;
    overscroll-behavior:auto!important;
    padding:1px 0 3px!important;
    scrollbar-width:none!important;
  }
  .site-header .navbar nav::-webkit-scrollbar,
  .navbar nav::-webkit-scrollbar{display:none!important;}

  .site-header .nav-menu,
  .nav-menu,
  .site-header .nav-menu.show,
  .nav-menu.show{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,minmax(28px,auto))!important;
    grid-auto-columns:max-content!important;
    width:max-content!important;
    min-width:100%!important;
    max-width:none!important;
    gap:4px!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  .site-header .nav-menu a,
  .nav-menu a{
    min-height:28px!important;
    padding:5px 7px!important;
    border-radius:999px!important;
    font-size:8.2px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    box-shadow:0 2px 8px rgba(6,43,32,.06)!important;
  }

  .site-header .menu-text,
  .menu-text{font-size:8.2px!important;line-height:1.05!important;}
  .site-header .menu-ico,
  .menu-ico{width:13px!important;height:13px!important;min-width:13px!important;border-radius:5px!important;}

  .site-header .nav-actions,
  .nav-actions{
    grid-area:actions!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x pan-y!important;
    padding:0 0 1px!important;
    scrollbar-width:none!important;
  }
  .site-header .nav-actions::-webkit-scrollbar,
  .nav-actions::-webkit-scrollbar{display:none!important;}

  .site-header .nav-actions select,
  .nav-actions select,
  .site-header .nav-actions button,
  .nav-actions button,
  .site-header .nav-actions .voice-toggle,
  .nav-actions .voice-toggle,
  #voiceToggle,
  #themeBtn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    height:22px!important;
    min-height:22px!important;
    max-height:22px!important;
    padding:0 5px!important;
    border-radius:8px!important;
    font-size:7.4px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .site-header .nav-actions select,
  .nav-actions select{
    width:54px!important;
    max-width:54px!important;
    min-width:54px!important;
    padding:0 3px!important;
  }

  #voiceToggle,
  .voice-toggle{
    width:58px!important;
    max-width:58px!important;
  }

  #themeBtn{
    width:34px!important;
    max-width:34px!important;
  }

  .mobile-toggle,
  #mobileBtn,
  button.mobile-toggle{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .section,
  [id]{scroll-margin-top:112px!important;}

  .floating{
    z-index:99990!important;
    bottom:calc(7px + env(safe-area-inset-bottom, 0px))!important;
  }

  .footer{padding-bottom:calc(98px + env(safe-area-inset-bottom, 0px))!important;}
}

@media (max-width:420px){
  .site-header .container.navbar,
  .navbar{
    width:calc(100vw - 14px)!important;
    max-width:calc(100vw - 14px)!important;
    gap:3px!important;
  }
  .site-header .nav-menu,
  .nav-menu,
  .site-header .nav-menu.show,
  .nav-menu.show{
    grid-template-rows:repeat(2,minmax(26px,auto))!important;
    gap:3px!important;
  }
  .site-header .nav-menu a,
  .nav-menu a{
    min-height:26px!important;
    padding:4px 6px!important;
    font-size:7.8px!important;
  }
  .site-header .menu-text,
  .menu-text{font-size:7.8px!important;}
  .site-header .nav-actions select,
  .nav-actions select,
  .site-header .nav-actions button,
  .nav-actions button,
  .site-header .nav-actions .voice-toggle,
  .nav-actions .voice-toggle,
  #voiceToggle,
  #themeBtn{
    height:20px!important;
    min-height:20px!important;
    max-height:20px!important;
    font-size:6.9px!important;
    border-radius:7px!important;
  }
  .site-header .nav-actions select,
  .nav-actions select{width:50px!important;max-width:50px!important;min-width:50px!important;}
  #voiceToggle,.voice-toggle{width:54px!important;max-width:54px!important;}
  #themeBtn{width:32px!important;max-width:32px!important;}
  .section,[id]{scroll-margin-top:105px!important;}
}

/* ==========================================================
   MSB MOBILE/TABLET AUDIT HOTFIX v10
   Fokus: semua halaman diseragamkan ulang untuk HP dan tablet.
   - Mobile tetap 2 box, tetapi text scale dibuat proporsional.
   - Thumbnail/video diperbesar relatif terhadap card.
   - Section title, card title, body, button, form, toolbar dibuat compact.
   - Scroll tetap aktif, menu tetap sticky, tanpa dropdown/hamburger.
   ========================================================== */

@media (min-width:768px) and (max-width:1199px){
  :root{
    --msb-tab-section-title: clamp(20px, 2.8vw, 26px);
    --msb-tab-card-title: clamp(14px, 1.7vw, 18px);
    --msb-tab-body: clamp(11px, 1.35vw, 13px);
    --msb-tab-note: clamp(9px, 1.1vw, 11px);
    --msb-tab-gap: 12px;
    --msb-tab-pad: 14px;
  }

  html,body{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    height:auto!important;
    max-height:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .section{padding:48px 0!important;}
  .section-title{max-width:820px!important;margin-bottom:18px!important;}
  .section-title h2{font-size:var(--msb-tab-section-title)!important;line-height:1.14!important;}
  .section-title p,.lead{font-size:var(--msb-tab-body)!important;line-height:1.5!important;}
  .eyebrow,.news-meta,.book-meta,.product-meta,.product-info,.source-line{font-size:var(--msb-tab-note)!important;line-height:1.25!important;}

  .grid-2,.grid-3,.grid-4,.news-grid,.product-grid,.shopee-grid,.book-grid,.official-video-grid,.testimony-grid,.voice-grid,.service-overview-grid,.flow-grid,.logo-row,.amounts,.pricecards,.stats,.tariff-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--msb-tab-gap)!important;
    align-items:stretch!important;
  }

  .booking-box,.booking-grid,.booking-form,.booking-info,.doctor-layout,.doctor-form,.doctor-result,.market-shell,.admin-layout,.admin-dashboard-panels,.footer-grid,.form-2,.formgrid,.paygrid,.book-controls,.official-video-toolbar,.shop-tools,.shop-searchbar,.shop-filter-row{
    grid-template-columns:1fr!important;
  }

  .official-video-panel,.book-panel,.news-panel{
    padding:14px!important;
    border-radius:18px!important;
  }

  .official-video-tabs{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .official-video-tab{min-height:34px!important;padding:7px 8px!important;font-size:10.5px!important;border-radius:12px!important;}
  .official-video-tab span{font-size:9px!important;min-width:20px!important;height:20px!important;}

  .card,.mini-card,.service-overview-card,.news-card,.product-card,.book-card,.official-media-card,.policy-card,.price-card,.logo-card,.amount,.impact-badge,.stat-card,.tariff-card,.role,.partner-card,.voice-card,.testimony-card{
    min-width:0!important;
    padding:var(--msb-tab-pad)!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  .news-card,.product-card,.book-card,.official-media-card{padding:0!important;}
  .news-card-body,.product-body,.book-body,.official-media-body,.voice-body,.testimony-body{padding:12px!important;gap:6px!important;}

  .card h3,.service-overview-card h3,.news-card-body h3,.product-body h3,.book-body h3,.official-media-body h3,.policy-card h3,.faq-question,.quick-action-item strong,.contact-list strong,.mini-card strong,.amount strong,.impact-badge strong,.product-price{
    font-size:var(--msb-tab-card-title)!important;
    line-height:1.18!important;
    letter-spacing:-.12px!important;
  }
  .card p,.service-overview-card p,.news-card-body p,.product-body p,.book-body p,.official-media-body p,.policy-card li,.list li,.number-list li,.quick-action-item span,.contact-list p,.contact-list a,.voice-body p,.testimony-body p,blockquote{
    font-size:var(--msb-tab-body)!important;
    line-height:1.42!important;
  }

  .official-media-preview,.official-media-player{border-radius:16px!important;overflow:hidden!important;}
  .official-media-preview{min-height:0!important;aspect-ratio:16/9!important;background:#061b14!important;}
  .official-media-preview img,.news-card img,.card-photo,.testimony-card img,.voice-card img,.book-cover,.book-cover img,.book-cover-fallback{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/10!important;
    object-fit:cover!important;
  }
  .official-media-player iframe,.official-media-native{aspect-ratio:16/9!important;}

  .news-card-body h3,.product-body h3,.book-body h3,.official-media-body h3{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  .news-card-body p,.product-body p,.book-body p,.official-media-body p,.service-overview-card p,.policy-card p{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}

  .btn,.news-read,.book-actions .btn,.product-buy,.official-media-play,button,input,select,textarea{
    font-size:var(--msb-tab-body)!important;
  }
  .btn,.news-read,.book-actions .btn,.product-buy,.official-media-play{min-height:36px!important;padding:8px 11px!important;border-radius:12px!important;}
}

@media (max-width:767px){
  :root{
    --msb-m-title: clamp(13px, 3.7vw, 16px);
    --msb-m-card-title: clamp(8.8px, 2.65vw, 10.2px);
    --msb-m-body: clamp(7.4px, 2.18vw, 8.8px);
    --msb-m-note: clamp(6.7px, 1.95vw, 7.8px);
    --msb-m-menu: clamp(7.1px, 2.05vw, 8.2px);
    --msb-m-gap: 6px;
    --msb-m-pad: 6px;
    --msb-m-radius: 11px;
    --msb-m-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  html,body{
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x pan-y!important;
    overscroll-behavior-y:auto!important;
  }
  body{
    position:relative!important;
    font-size:var(--msb-m-body)!important;
    line-height:1.35!important;
    padding-bottom:calc(84px + var(--msb-m-safe-bottom))!important;
    background-attachment:scroll!important;
  }
  main,#mainContent,footer,.section,.hero,.container,.page,.wrap{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .container,.site-header .container,.site-header .container.navbar{
    width:calc(100vw - 10px)!important;
    max-width:calc(100vw - 10px)!important;
  }

  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:99999!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .site-header .container.navbar,.navbar{
    width:calc(100vw - 10px)!important;
    max-width:calc(100vw - 10px)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"brand" "nav" "actions"!important;
    gap:3px!important;
    padding:4px 0 5px!important;
    min-height:auto!important;
  }
  .site-header .brand,.brand{
    grid-area:brand!important;
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    align-items:center!important;
    gap:5px!important;
  }
  .site-header .brand-mark,.brand-mark{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    flex-basis:24px!important;
    border-radius:8px!important;
  }
  .site-header .brand strong,.brand strong{
    max-width:100%!important;
    font-size:7.6px!important;
    line-height:1.05!important;
    letter-spacing:-.04px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    -webkit-line-clamp:1!important;
  }
  .site-header .brand span,.brand span{
    max-width:100%!important;
    font-size:6.4px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .site-header .navbar nav,.navbar nav{
    grid-area:nav!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;
    padding:0 0 2px!important;
    scrollbar-width:none!important;
  }
  .site-header .navbar nav::-webkit-scrollbar,.navbar nav::-webkit-scrollbar{display:none!important;}
  .site-header .nav-menu,.nav-menu,.site-header .nav-menu.show,.nav-menu.show{
    position:static!important;
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,minmax(24px,auto))!important;
    grid-auto-columns:max-content!important;
    width:max-content!important;
    min-width:100%!important;
    max-width:none!important;
    gap:3px!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .site-header .nav-menu a,.nav-menu a{
    min-height:24px!important;
    padding:4px 6px!important;
    border-radius:999px!important;
    font-size:var(--msb-m-menu)!important;
    line-height:1.02!important;
    white-space:nowrap!important;
    background:rgba(255,255,255,.62)!important;
    border:1px solid rgba(6,59,42,.08)!important;
    box-shadow:0 2px 7px rgba(6,43,32,.05)!important;
  }
  .site-header .menu-text,.menu-text{font-size:var(--msb-m-menu)!important;line-height:1.02!important;}
  .site-header .menu-ico,.menu-ico{display:none!important;}

  .site-header .nav-actions,.nav-actions{
    grid-area:actions!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:3px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;
    padding:0!important;
    scrollbar-width:none!important;
  }
  .site-header .nav-actions::-webkit-scrollbar,.nav-actions::-webkit-scrollbar{display:none!important;}
  .site-header .nav-actions select,.nav-actions select,.site-header .nav-actions button,.nav-actions button,.site-header .nav-actions .voice-toggle,.nav-actions .voice-toggle,#voiceToggle,#themeBtn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    height:18px!important;
    min-height:18px!important;
    max-height:18px!important;
    padding:0 4px!important;
    border-radius:7px!important;
    font-size:6.4px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .site-header .nav-actions select,.nav-actions select{width:46px!important;max-width:46px!important;min-width:46px!important;padding:0 2px!important;}
  #voiceToggle,.voice-toggle{width:48px!important;max-width:48px!important;}
  #themeBtn{width:29px!important;max-width:29px!important;}
  .mobile-toggle,#mobileBtn,button.mobile-toggle{display:none!important;visibility:hidden!important;pointer-events:none!important;}

  .section{padding:26px 0!important;overflow:visible!important;}
  .section-title{max-width:100%!important;margin-bottom:9px!important;}
  .section-title .eyebrow,.eyebrow{font-size:var(--msb-m-note)!important;line-height:1.1!important;letter-spacing:.06em!important;}
  h1,.hero h1,#siteTitle,.login h1,.title h1{font-size:clamp(16px,5.2vw,21px)!important;line-height:1.08!important;letter-spacing:-.2px!important;}
  h2,.section-title h2,#contact h2,#location h2,.card h2,.box h2,.quick-contact-card h2{font-size:var(--msb-m-title)!important;line-height:1.12!important;letter-spacing:-.12px!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:auto!important;}
  .section-title h2{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  h3,h4,.card h3,.box h3,.service-overview-card h3,.news-card-body h3,.product-body h3,.book-body h3,.official-media-body h3,.policy-card h3,.faq-question,.quick-action-item strong,.contact-list strong,.mini-card strong,.amount strong,.impact-badge strong,.ticket-price,.product-price,.tariff-card b,.card b,.role strong{
    font-size:var(--msb-m-card-title)!important;
    line-height:1.13!important;
    letter-spacing:-.08px!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:auto!important;
  }
  p,.lead,.hero p,.card p,.box p,.service-overview-card p,.news-card-body p,.product-body p,.book-body p,.official-media-body p,.policy-card li,.list li,.number-list li,.quick-action-item span,.contact-list p,.contact-list a,.info-item p,.section-title p,li,label,.note,.msg,.footer,footer,blockquote,.voice-body p,.testimony-body p{
    font-size:var(--msb-m-body)!important;
    line-height:1.32!important;
  }
  small,.news-meta,.book-meta,.product-info,.product-meta,.official-video-tab,.book-tags span,.mini-card span,.card small,.brand span,.site-header .brand span,.time,.usd,.tariff-card small,.source-line,.tag{
    font-size:var(--msb-m-note)!important;
    line-height:1.14!important;
  }

  .hero-grid,.grid-2,.grid-3,.grid-4,.hero-mini,.service-overview-grid,.flow-grid,.testimony-grid,.voice-grid,.news-grid,.product-grid,.shopee-grid,.book-grid,.official-video-grid,.amounts,.logo-row,.official-video-tabs,.admin-overview-grid,.admin-dashboard-grid,.pricecards,.stats,.tariff-grid,.display .grid,.roles,#galleryGrid,.rekap-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--msb-m-gap)!important;
    align-items:stretch!important;
  }
  .booking-box,.booking-grid,.booking-form,.booking-info,.adopt-box,.doctor-layout,.doctor-form,.doctor-result,.market-shell,.admin-layout,.admin-dashboard-panels,.footer-grid,.form-2,.formgrid,.paygrid,.book-controls,.official-video-toolbar,.shop-tools,.shop-searchbar,.shop-filter-row,.wrap,.display .top{
    grid-template-columns:1fr!important;
  }
  .official-video-toolbar,.book-controls,.shop-tools,.shop-searchbar,.shop-filter-row,.news-controls{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
  }
  .official-video-panel,.book-panel,.news-panel{
    padding:7px!important;
    border-radius:12px!important;
    overflow:visible!important;
  }
  .official-video-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;}
  .official-video-tab{min-height:22px!important;padding:3px 4px!important;border-radius:8px!important;font-size:6.8px!important;line-height:1.05!important;}
  .official-video-tab span{min-width:14px!important;height:14px!important;font-size:6.4px!important;border-radius:999px!important;}

  .card,.box,.mini-card,.service-overview-card,.news-card,.product-card,.book-card,.official-media-card,.policy-card,.price-card,.logo-card,.amount,.impact-badge,.stat-card,.tariff-card,.role,#contact .card,#contact .quick-contact-card,#location .card,#location .map-card,.booking-form,.booking-info,.admin-card,.wrap .card,.partner-card,.voice-card,.testimony-card{
    min-width:0!important;
    max-width:100%!important;
    width:100%!important;
    padding:var(--msb-m-pad)!important;
    border-radius:var(--msb-m-radius)!important;
    overflow:hidden!important;
  }
  .news-card,.product-card,.book-card,.official-media-card{padding:0!important;}
  .book-body,.official-media-body,.news-card-body,.product-body,.pad,.voice-body,.testimony-body{padding:6px!important;gap:3px!important;}

  .official-media-preview,.official-media-player{border-radius:10px!important;overflow:hidden!important;background:#061b14!important;}
  .official-media-preview{min-height:0!important;height:auto!important;aspect-ratio:16/10!important;}
  .official-media-preview img,.news-card img,.card-photo,.testimony-card img,.voice-card img,.book-cover,.book-cover img,.book-cover-fallback{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:16/10!important;
    object-fit:cover!important;
    border-radius:0!important;
  }
  .official-media-player iframe,.official-media-native{width:100%!important;aspect-ratio:16/9!important;min-height:0!important;}
  .product-img,.shopee-grid .product-img{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:1/1!important;object-fit:cover!important;}

  .news-card-body h3,.product-body h3,.book-body h3,.official-media-body h3,.voice-body h3,.testimony-body h3{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;margin:0!important;}
  .news-card-body p,.product-body p,.book-body p,.official-media-body p,.service-overview-card p,.policy-card p,.voice-body p,.testimony-body p,blockquote{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;margin:0!important;}
  .news-meta,.book-meta,.product-meta,.product-info{display:flex!important;gap:3px!important;flex-wrap:wrap!important;}

  .official-media-play{left:5px!important;bottom:5px!important;min-height:20px!important;max-height:22px!important;max-width:calc(100% - 10px)!important;padding:3px 6px!important;border-radius:999px!important;font-size:6.6px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .btn,.news-read,.book-actions .btn,.product-buy,button,input,select,textarea,.actions .btn{font-size:var(--msb-m-body)!important;line-height:1.08!important;}
  .btn,.news-read,.book-actions .btn,.product-buy{min-height:24px!important;padding:5px 7px!important;border-radius:9px!important;}
  input,select,textarea{min-height:30px!important;padding:6px 7px!important;border-radius:9px!important;}
  .news-action-row,.book-actions{display:grid!important;grid-template-columns:1fr!important;gap:4px!important;margin-top:4px!important;}

  .contact-list,.quick-action-list,.info-list{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;}
  .contact-list li,.quick-action-item,.info-item{padding:6px!important;gap:5px!important;border-radius:10px!important;grid-template-columns:25px minmax(0,1fr)!important;}
  .quick-action-item{grid-template-columns:1fr!important;}
  .contact-symbol,.info-icon{width:25px!important;height:25px!important;border-radius:8px!important;font-size:7px!important;}

  .floating{position:fixed!important;left:7px!important;right:7px!important;bottom:calc(6px + var(--msb-m-safe-bottom))!important;z-index:99990!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;width:auto!important;max-width:none!important;padding:0!important;}
  .float-btn,.float-wa{width:100%!important;min-width:0!important;min-height:30px!important;max-height:34px!important;padding:4px 3px!important;border-radius:10px!important;font-size:7.3px!important;line-height:1.02!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .footer{padding-bottom:calc(94px + var(--msb-m-safe-bottom))!important;}
  .section,[id]{scroll-margin-top:92px!important;}
}

@media (max-width:420px){
  :root{
    --msb-m-title: clamp(12px, 3.45vw, 15px);
    --msb-m-card-title: clamp(8.2px, 2.45vw, 9.4px);
    --msb-m-body: clamp(6.9px, 2.05vw, 8px);
    --msb-m-note: clamp(6.2px, 1.85vw, 7px);
    --msb-m-menu: clamp(6.7px, 1.95vw, 7.5px);
    --msb-m-gap:5px;
    --msb-m-pad:5px;
    --msb-m-radius:10px;
  }
  .container,.site-header .container,.site-header .container.navbar{width:calc(100vw - 8px)!important;max-width:calc(100vw - 8px)!important;}
  .site-header .container.navbar,.navbar{width:calc(100vw - 8px)!important;max-width:calc(100vw - 8px)!important;gap:2px!important;padding:3px 0 4px!important;}
  .site-header .brand,.brand{grid-template-columns:22px minmax(0,1fr)!important;gap:4px!important;}
  .site-header .brand-mark,.brand-mark{width:22px!important;height:22px!important;min-width:22px!important;flex-basis:22px!important;}
  .site-header .brand strong,.brand strong{font-size:7px!important;}
  .site-header .brand span,.brand span{font-size:5.9px!important;}
  .site-header .nav-menu,.nav-menu,.site-header .nav-menu.show,.nav-menu.show{grid-template-rows:repeat(2,minmax(22px,auto))!important;gap:3px!important;}
  .site-header .nav-menu a,.nav-menu a{min-height:22px!important;padding:3px 5px!important;}
  .site-header .nav-actions select,.nav-actions select,.site-header .nav-actions button,.nav-actions button,.site-header .nav-actions .voice-toggle,.nav-actions .voice-toggle,#voiceToggle,#themeBtn{height:17px!important;min-height:17px!important;max-height:17px!important;font-size:6px!important;border-radius:6px!important;}
  .site-header .nav-actions select,.nav-actions select{width:43px!important;max-width:43px!important;min-width:43px!important;}
  #voiceToggle,.voice-toggle{width:45px!important;max-width:45px!important;}
  #themeBtn{width:27px!important;max-width:27px!important;}
  .official-video-tab{min-height:20px!important;font-size:6.2px!important;padding:3px!important;}
  .official-media-play{font-size:6px!important;min-height:18px!important;max-height:20px!important;padding:3px 5px!important;}
  .float-btn,.float-wa{min-height:28px!important;font-size:6.8px!important;border-radius:9px!important;}
}

/* ==========================================================
   MSB MOBILE/TABLET PROFESSIONAL AUDIT HOTFIX v11
   Fokus: video eksternal, menu mobile atas, bottom app navigation,
   anchor hash yang presisi, kontak mobile, dan ukuran card lintas menu.
   Desktop tetap dijaga.
   ========================================================== */

@media (min-width:768px) and (max-width:1199px){
  :root{
    --msb-tab-section-title-v11: clamp(18px, 2.35vw, 24px);
    --msb-tab-card-title-v11: clamp(12px, 1.45vw, 16px);
    --msb-tab-body-v11: clamp(10px, 1.15vw, 12.5px);
    --msb-tab-note-v11: clamp(8.5px, .95vw, 10.5px);
  }
  .section-title h2{font-size:var(--msb-tab-section-title-v11)!important;line-height:1.13!important;}
  .section-title p,.lead,.card p,.service-overview-card p,.news-card-body p,.product-body p,.book-body p,.official-media-body p,.policy-card li,.list li,.number-list li,.contact-list p,.contact-list a,.quick-action-item span{font-size:var(--msb-tab-body-v11)!important;line-height:1.42!important;}
  .card h3,.service-overview-card h3,.news-card-body h3,.product-body h3,.book-body h3,.official-media-body h3,.policy-card h3,.quick-action-item strong,.contact-list strong,.mini-card strong{font-size:var(--msb-tab-card-title-v11)!important;line-height:1.16!important;}
  small,.eyebrow,.news-meta,.book-meta,.product-meta,.product-info,.source-line,.tag{font-size:var(--msb-tab-note-v11)!important;line-height:1.18!important;}
  .official-media-preview{aspect-ratio:16/9!important;min-height:145px!important;}
  .official-media-body{padding:10px!important;}
  .official-media-body h3{font-size:clamp(11px,1.35vw,14px)!important;-webkit-line-clamp:2!important;}
  .official-media-body p{font-size:clamp(9px,1.05vw,11px)!important;-webkit-line-clamp:2!important;}
  .official-media-play{min-height:28px!important;font-size:9px!important;padding:6px 9px!important;}
  .official-media-player iframe,.official-media-native{min-height:150px!important;}
}

@media (max-width:767px){
  :root{
    --msb-v11-title: clamp(11.5px, 3.2vw, 14.5px);
    --msb-v11-card-title: clamp(7.1px, 2.05vw, 8.8px);
    --msb-v11-body: clamp(6.5px, 1.88vw, 7.8px);
    --msb-v11-note: clamp(5.9px, 1.68vw, 6.9px);
    --msb-v11-menu: clamp(7.4px, 2.05vw, 8.4px);
    --msb-v11-pad: 5px;
    --msb-v11-gap: 5px;
    --msb-v11-bottom-nav: 58px;
  }

  html,body{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    height:auto!important;
    max-height:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body{
    padding-bottom:calc(var(--msb-v11-bottom-nav) + 22px + env(safe-area-inset-bottom,0px))!important;
    font-size:var(--msb-v11-body)!important;
  }

  .site-header{position:sticky!important;top:0!important;z-index:99980!important;}
  .site-header .container.navbar,.navbar{
    width:calc(100vw - 10px)!important;
    max-width:calc(100vw - 10px)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"brand" "nav" "actions"!important;
    gap:3px!important;
    padding:4px 0 5px!important;
    min-height:0!important;
  }
  .site-header .brand,.brand{
    grid-area:brand!important;
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    gap:5px!important;
    align-items:center!important;
    width:100%!important;
  }
  .site-header .brand-mark,.brand-mark{width:22px!important;height:22px!important;min-width:22px!important;border-radius:8px!important;}
  .site-header .brand strong,.brand strong{font-size:7px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .site-header .brand span,.brand span{font-size:5.8px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}

  .site-header .navbar nav,.navbar nav{
    grid-area:nav!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    padding:1px 0 2px!important;
  }
  .site-header .navbar nav::-webkit-scrollbar,.navbar nav::-webkit-scrollbar{display:none!important;}
  .site-header .nav-menu,.nav-menu,.site-header .nav-menu.show,.nav-menu.show{
    display:flex!important;
    flex-flow:row nowrap!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:4px!important;
    width:max-content!important;
    min-width:100%!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .site-header .nav-menu li,.nav-menu li{flex:0 0 auto!important;width:auto!important;min-width:0!important;display:block!important;}
  .site-header .nav-menu a,.nav-menu a{
    min-height:23px!important;
    padding:4px 7px!important;
    border-radius:999px!important;
    font-size:var(--msb-v11-menu)!important;
    line-height:1.02!important;
    white-space:nowrap!important;
    background:rgba(255,255,255,.72)!important;
    border:1px solid rgba(6,59,42,.1)!important;
    box-shadow:0 2px 7px rgba(6,43,32,.05)!important;
    gap:3px!important;
  }
  .site-header .nav-menu a.active,.nav-menu a.active{background:#063b2a!important;color:#fff!important;}
  .site-header .menu-ico,.menu-ico{display:none!important;}
  .site-header .menu-text,.menu-text{font-size:var(--msb-v11-menu)!important;line-height:1.02!important;}

  .site-header .nav-actions,.nav-actions{
    grid-area:actions!important;
    display:flex!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:3px!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0!important;
    scrollbar-width:none!important;
  }
  .site-header .nav-actions::-webkit-scrollbar,.nav-actions::-webkit-scrollbar{display:none!important;}
  .site-header .nav-actions select,.nav-actions select,
  .site-header .nav-actions button,.nav-actions button,
  .site-header .nav-actions .voice-toggle,.nav-actions .voice-toggle,
  #voiceToggle,#themeBtn{
    flex:0 0 auto!important;
    height:17px!important;
    min-height:17px!important;
    max-height:17px!important;
    padding:0 4px!important;
    border-radius:7px!important;
    font-size:5.9px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .site-header .nav-actions select,.nav-actions select{width:43px!important;min-width:43px!important;max-width:43px!important;padding:0 2px!important;}
  #voiceToggle,.voice-toggle{width:46px!important;min-width:46px!important;max-width:46px!important;}
  #themeBtn{width:28px!important;min-width:28px!important;max-width:28px!important;}

  .section{padding:22px 0!important;}
  .section-title{margin-bottom:8px!important;}
  .section-title h2,h2,#contact h2,#location h2,.card h2,.box h2,.quick-contact-card h2{font-size:var(--msb-v11-title)!important;line-height:1.1!important;letter-spacing:-.1px!important;}
  .section-title p,.lead,p,.card p,.box p,.service-overview-card p,.news-card-body p,.product-body p,.book-body p,.official-media-body p,.policy-card li,.list li,.number-list li,.quick-action-item span,.contact-list p,.contact-list a,.info-item p,li,label,blockquote{font-size:var(--msb-v11-body)!important;line-height:1.28!important;}
  h3,h4,.card h3,.box h3,.service-overview-card h3,.news-card-body h3,.product-body h3,.book-body h3,.official-media-body h3,.policy-card h3,.faq-question,.quick-action-item strong,.contact-list strong,.mini-card strong,.amount strong,.impact-badge strong,.product-price,.ticket-price,.role strong{font-size:var(--msb-v11-card-title)!important;line-height:1.1!important;letter-spacing:-.06px!important;}
  small,.eyebrow,.news-meta,.book-meta,.product-info,.product-meta,.official-video-tab,.book-tags span,.mini-card span,.card small,.brand span,.site-header .brand span,.time,.usd,.source-line,.tag{font-size:var(--msb-v11-note)!important;line-height:1.08!important;}

  .grid-2,.grid-3,.grid-4,.hero-mini,.service-overview-grid,.flow-grid,.testimony-grid,.voice-grid,.news-grid,.product-grid,.shopee-grid,.book-grid,.official-video-grid,.amounts,.logo-row,.official-video-tabs,.pricecards,.stats,.tariff-grid,#galleryGrid,.rekap-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--msb-v11-gap)!important;
    align-items:stretch!important;
  }
  .card,.box,.mini-card,.service-overview-card,.news-card,.product-card,.book-card,.official-media-card,.policy-card,.price-card,.logo-card,.amount,.impact-badge,.stat-card,.tariff-card,.role,#contact .card,#contact .quick-contact-card,#location .card,#location .map-card,.booking-form,.booking-info,.admin-card,.partner-card,.voice-card,.testimony-card{
    padding:var(--msb-v11-pad)!important;
    border-radius:10px!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .news-card,.product-card,.book-card,.official-media-card{padding:0!important;}
  .book-body,.official-media-body,.news-card-body,.product-body,.voice-body,.testimony-body,.pad{padding:5px!important;gap:2px!important;}

  .official-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
  .official-media-card{display:flex!important;flex-direction:column!important;background:#fff!important;}
  .official-media-preview,.official-media-player{
    border-radius:9px 9px 0 0!important;
    overflow:hidden!important;
    background:#061b14!important;
  }
  .official-media-preview{
    width:100%!important;
    min-height:92px!important;
    height:clamp(92px, 26vw, 112px)!important;
    aspect-ratio:auto!important;
  }
  .official-media-preview img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    border-radius:0!important;
  }
  .official-media-body{flex:1 1 auto!important;min-height:0!important;}
  .official-media-body .news-meta{gap:2px!important;margin:0 0 2px!important;}
  .official-media-body h3{
    font-size:clamp(6.8px,1.95vw,8px)!important;
    line-height:1.08!important;
    margin:0!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .official-media-body p{
    font-size:clamp(5.9px,1.65vw,6.8px)!important;
    line-height:1.14!important;
    margin:1px 0 0!important;
    display:-webkit-box!important;
    -webkit-line-clamp:1!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .official-media-play{
    left:5px!important;
    bottom:5px!important;
    min-height:18px!important;
    max-height:20px!important;
    max-width:calc(100% - 10px)!important;
    padding:3px 6px!important;
    border-radius:999px!important;
    font-size:5.9px!important;
    line-height:1!important;
  }
  .official-media-player{margin-top:4px!important;min-height:0!important;}
  .official-media-player iframe,.official-media-native{
    width:100%!important;
    height:clamp(86px,24vw,105px)!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
    border-radius:8px!important;
  }
  .news-action-row,.book-actions{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;margin-top:3px!important;}
  .btn,.news-read,.book-actions .btn,.product-buy,.official-media-body .btn,button,input,select,textarea{font-size:var(--msb-v11-body)!important;line-height:1.05!important;}
  .btn,.news-read,.book-actions .btn,.product-buy{min-height:21px!important;padding:4px 6px!important;border-radius:8px!important;}

  #contact .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
  #contact .card h2,#contact .quick-contact-card h2{font-size:clamp(9px,2.55vw,11px)!important;line-height:1.08!important;-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  #contact .card p,#contact .quick-contact-card p{font-size:clamp(6.2px,1.75vw,7.2px)!important;line-height:1.2!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  .contact-list,.quick-action-list,.info-list{gap:4px!important;}
  .contact-list li,.quick-action-item,.info-item{padding:5px!important;gap:4px!important;border-radius:9px!important;grid-template-columns:21px minmax(0,1fr)!important;}
  .contact-symbol,.info-icon{width:21px!important;height:21px!important;border-radius:7px!important;font-size:6px!important;}
  .quick-action-item{grid-template-columns:1fr!important;}

  .floating{bottom:calc(var(--msb-v11-bottom-nav) + 10px + env(safe-area-inset-bottom,0px))!important;}
  .footer{padding-bottom:calc(var(--msb-v11-bottom-nav) + 28px + env(safe-area-inset-bottom,0px))!important;}
  .section,[id]{scroll-margin-top:72px!important;}

  .msb-mobile-bottom-nav{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(6px + env(safe-area-inset-bottom,0px))!important;
    z-index:99995!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    padding:5px!important;
    border-radius:18px!important;
    background:rgba(255,251,240,.96)!important;
    border:1px solid rgba(6,59,42,.13)!important;
    box-shadow:0 12px 32px rgba(6,43,32,.18)!important;
    backdrop-filter:blur(14px)!important;
  }
  .msb-mobile-bottom-nav a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    min-height:46px!important;
    text-decoration:none!important;
    color:#063b2a!important;
    border-radius:14px!important;
    font-weight:900!important;
    font-size:7px!important;
    line-height:1.05!important;
    padding:4px 2px!important;
  }
  .msb-mobile-bottom-nav a::before{
    content:attr(data-i);
    display:grid!important;
    place-items:center!important;
    width:18px!important;
    height:18px!important;
    border-radius:999px!important;
    margin-bottom:3px!important;
    background:#e8f3ea!important;
    color:#063b2a!important;
    font-size:6.5px!important;
    letter-spacing:-.2px!important;
    line-height:1!important;
  }
  .msb-mobile-bottom-nav a.active{background:#063b2a!important;color:#fff!important;}
  .msb-mobile-bottom-nav a.active::before{background:#d7b85c!important;color:#063b2a!important;}
}

@media (min-width:768px){
  .msb-mobile-bottom-nav{display:none!important;}
}

@media (max-width:420px){
  :root{
    --msb-v11-title: clamp(10.5px, 3vw, 13px);
    --msb-v11-card-title: clamp(6.6px, 1.95vw, 7.8px);
    --msb-v11-body: clamp(6px, 1.75vw, 7px);
    --msb-v11-note: clamp(5.4px, 1.55vw, 6.3px);
    --msb-v11-menu: clamp(6.8px, 1.95vw, 7.6px);
    --msb-v11-pad:4px;
    --msb-v11-gap:4px;
  }
  .official-media-preview{height:clamp(84px,25vw,98px)!important;min-height:84px!important;}
  .official-media-player iframe,.official-media-native{height:clamp(78px,23vw,94px)!important;}
  .msb-mobile-bottom-nav{left:6px!important;right:6px!important;border-radius:16px!important;gap:3px!important;padding:4px!important;}
  .msb-mobile-bottom-nav a{min-height:43px!important;font-size:6.5px!important;border-radius:12px!important;}
  .msb-mobile-bottom-nav a::before{width:16px!important;height:16px!important;font-size:6px!important;}
}

/* ==========================================================
   MSB UI/UX RESPONSIVE PATCH v12
   Fokus: tablet mengikuti konsep mobile, bottom navigation ikon,
   panel bahasa/suara/tema dipindah ke sisi kiri, portal pengelola
   dibuat akses khusus, dan card video/kontak dirapikan.
   ========================================================== */
@media (max-width:1024px){
  :root{
    --msb-v12-bottom-nav:72px;
    --msb-v12-header-gap:6px;
    --msb-v12-card-gap:8px;
    --msb-v12-card-pad:7px;
    --msb-v12-title:clamp(12px,2.25vw,18px);
    --msb-v12-card-title:clamp(8.8px,1.75vw,13px);
    --msb-v12-body:clamp(7.4px,1.45vw,11px);
    --msb-v12-small:clamp(6.8px,1.25vw,9.5px);
    --msb-v12-menu:clamp(8px,1.35vw,11px);
  }
  html,body{overflow-x:hidden!important;overflow-y:auto!important;height:auto!important;min-height:100%!important;}
  body{padding-bottom:calc(var(--msb-v12-bottom-nav) + 24px + env(safe-area-inset-bottom,0px))!important;}
  main,#mainContent,.main-content,.page,.wrapper,.container{max-width:100%!important;min-width:0!important;}
  .site-header{position:sticky!important;top:0!important;z-index:99990!important;}
  .site-header .navbar,.navbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"brand" "nav"!important;
    gap:var(--msb-v12-header-gap)!important;
    padding:6px 0 7px!important;
  }
  .site-header .brand,.brand{grid-area:brand!important;justify-self:center!important;width:min(96%,560px)!important;max-width:560px!important;display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;align-items:center!important;justify-content:center!important;gap:6px!important;text-align:left!important;}
  .site-header .brand-mark,.brand-mark{width:24px!important;height:24px!important;min-width:24px!important;border-radius:9px!important;}
  .site-header .brand strong,.brand strong{font-size:clamp(8px,1.55vw,12px)!important;line-height:1.02!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .site-header .brand span,.brand span{font-size:clamp(6.4px,1.2vw,9px)!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .site-header .navbar nav,.navbar nav{grid-area:nav!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;padding:0 5px 1px!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;}
  .site-header .navbar nav::-webkit-scrollbar,.navbar nav::-webkit-scrollbar{display:none!important;}
  .site-header .nav-menu,.nav-menu,.site-header .nav-menu.show,.nav-menu.show{
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    width:max-content!important;
    min-width:100%!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .site-header .nav-menu li,.nav-menu li{flex:0 0 auto!important;display:block!important;width:auto!important;min-width:0!important;}
  .site-header .nav-menu a,.nav-menu a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:26px!important;
    padding:5px 9px!important;
    border-radius:999px!important;
    font-size:var(--msb-v12-menu)!important;
    line-height:1!important;
    white-space:nowrap!important;
    background:rgba(255,255,255,.82)!important;
    border:1px solid rgba(6,59,42,.11)!important;
    box-shadow:0 2px 8px rgba(6,43,32,.05)!important;
  }
  .site-header .nav-menu a.active,.nav-menu a.active{background:#063b2a!important;color:#fff!important;}
  .site-header .menu-ico,.menu-ico{display:none!important;}
  .site-header .menu-text,.menu-text{font-size:var(--msb-v12-menu)!important;line-height:1!important;}
  .site-header .portal-link,.nav-menu .portal-link{display:none!important;}

  /* Panel samping untuk bahasa, suara, dark/light, portal. Tidak lagi mengganggu menu atas. */
  .site-header .nav-actions.msb-tools-panel,.nav-actions.msb-tools-panel{
    position:fixed!important;
    left:8px!important;
    top:calc(50% - 74px)!important;
    z-index:99997!important;
    width:52px!important;
    max-width:52px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    padding:8px 6px!important;
    border-radius:18px!important;
    background:rgba(255,251,240,.97)!important;
    border:1px solid rgba(6,59,42,.14)!important;
    box-shadow:0 16px 36px rgba(6,43,32,.22)!important;
    backdrop-filter:blur(14px)!important;
    transform:translateX(-74px)!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:transform .22s ease, opacity .22s ease!important;
    overflow:visible!important;
  }
  body.msb-tools-open .site-header .nav-actions.msb-tools-panel,body.msb-tools-open .nav-actions.msb-tools-panel{transform:translateX(0)!important;opacity:1!important;pointer-events:auto!important;}
  .msb-tools-toggle{
    position:fixed!important;
    left:8px!important;
    top:calc(50% - 126px)!important;
    z-index:99998!important;
    width:42px!important;
    height:42px!important;
    border:0!important;
    border-radius:16px!important;
    display:grid!important;
    place-items:center!important;
    background:#063b2a!important;
    color:#fff!important;
    box-shadow:0 12px 30px rgba(6,43,32,.28)!important;
  }
  .msb-tools-toggle svg{width:20px!important;height:20px!important;fill:currentColor!important;}
  .site-header .nav-actions.msb-tools-panel select,.nav-actions.msb-tools-panel select,
  .site-header .nav-actions.msb-tools-panel button,.nav-actions.msb-tools-panel button,
  .site-header .nav-actions.msb-tools-panel a,.nav-actions.msb-tools-panel a{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0!important;
    border-radius:13px!important;
    border:1px solid rgba(6,59,42,.12)!important;
    display:grid!important;
    place-items:center!important;
    background:#fff!important;
    color:#063b2a!important;
    box-shadow:0 5px 12px rgba(6,43,32,.08)!important;
    font-size:0!important;
    overflow:hidden!important;
    text-decoration:none!important;
  }
  .site-header .nav-actions.msb-tools-panel select,.nav-actions.msb-tools-panel select{
    appearance:none!important;
    -webkit-appearance:none!important;
    font-size:9px!important;
    font-weight:900!important;
    text-align:center!important;
    text-align-last:center!important;
    background:#fff!important;
  }
  .site-header .nav-actions.msb-tools-panel #mobileBtn,.nav-actions.msb-tools-panel #mobileBtn{display:none!important;}
  #themeBtn.msb-icon-only,#voiceToggle.msb-icon-only,.voice-toggle.msb-icon-only{font-size:0!important;color:#063b2a!important;}
  #themeBtn.msb-icon-only::before{content:"";width:18px;height:18px;display:block;border-radius:999px;background:linear-gradient(90deg,#063b2a 0 50%,#f7f3df 50% 100%);box-shadow:inset 0 0 0 2px rgba(6,59,42,.25);}
  #voiceToggle.msb-icon-only::before,.voice-toggle.msb-icon-only::before{content:"";width:18px;height:18px;display:block;background:#063b2a;clip-path:polygon(8% 37%,30% 37%,52% 18%,52% 82%,30% 63%,8% 63%);}
  #voiceToggle.voice-muted.msb-icon-only::after,.voice-toggle.voice-muted.msb-icon-only::after{content:"";position:absolute;width:23px;height:2px;background:#b42318;transform:rotate(-38deg);border-radius:99px;}
  .msb-portal-tool{font-size:0!important;}
  .msb-portal-icon{width:20px!important;height:20px!important;display:grid!important;place-items:center!important;}
  .msb-portal-icon svg{width:20px!important;height:20px!important;fill:#063b2a!important;display:block!important;}

  /* Bottom navigation mobile/tablet: ikon di atas, label di bawah. */
  .msb-mobile-bottom-nav{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;
    transform:translateX(-50%)!important;
    z-index:99995!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;
    width:min(620px,calc(100vw - 16px))!important;
    max-width:620px!important;
    padding:6px!important;
    border-radius:20px!important;
    background:rgba(255,251,240,.97)!important;
    border:1px solid rgba(6,59,42,.14)!important;
    box-shadow:0 16px 38px rgba(6,43,32,.22)!important;
    backdrop-filter:blur(16px)!important;
  }
  .msb-mobile-bottom-nav a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    min-width:0!important;
    min-height:52px!important;
    padding:4px 2px!important;
    border-radius:15px!important;
    text-decoration:none!important;
    color:#063b2a!important;
    font-size:clamp(8px,1.35vw,11px)!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:-.08px!important;
  }
  .msb-mobile-bottom-nav a::before{content:none!important;display:none!important;}
  .msb-mobile-bottom-nav .msb-nav-icon{
    width:24px!important;
    height:24px!important;
    border-radius:999px!important;
    display:grid!important;
    place-items:center!important;
    background:#e8f3ea!important;
    color:#063b2a!important;
  }
  .msb-mobile-bottom-nav .msb-nav-icon svg{width:15px!important;height:15px!important;fill:currentColor!important;display:block!important;}
  .msb-mobile-bottom-nav .msb-nav-label{font-size:inherit!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important;}
  .msb-mobile-bottom-nav a.active{background:#063b2a!important;color:#fff!important;}
  .msb-mobile-bottom-nav a.active .msb-nav-icon{background:#d7b85c!important;color:#063b2a!important;}

  /* Tablet mengikuti konsep mobile: dua kolom compact untuk card publik. */
  .grid-2,.grid-3,.grid-4,.hero-mini,.service-overview-grid,.flow-grid,.testimony-grid,.voice-grid,.news-grid,.product-grid,.shopee-grid,.book-grid,.official-video-grid,.amounts,.logo-row,.official-video-tabs,.pricecards,.stats,.tariff-grid,#galleryGrid,.rekap-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--msb-v12-card-gap)!important;
    align-items:stretch!important;
  }
  .card,.box,.mini-card,.service-overview-card,.news-card,.product-card,.book-card,.official-media-card,.policy-card,.price-card,.logo-card,.amount,.impact-badge,.stat-card,.tariff-card,.role,#contact .card,#contact .quick-contact-card,#location .card,#location .map-card,.booking-form,.booking-info,.partner-card,.voice-card,.testimony-card{
    min-width:0!important;
    overflow:hidden!important;
    border-radius:12px!important;
  }
  .card:not(.news-card):not(.product-card):not(.book-card):not(.official-media-card),.box,.mini-card,.service-overview-card,.policy-card,.price-card,.logo-card,.amount,.impact-badge,.stat-card,.tariff-card,.role,#contact .card,#contact .quick-contact-card,#location .card,#location .map-card,.booking-form,.booking-info,.partner-card,.voice-card,.testimony-card{padding:var(--msb-v12-card-pad)!important;}
  .section{padding:26px 0!important;}
  .section-title{margin-bottom:10px!important;}
  .section-title h2,h2,#contact h2,#location h2{font-size:var(--msb-v12-title)!important;line-height:1.12!important;letter-spacing:-.15px!important;}
  h3,h4,.card h3,.box h3,.service-overview-card h3,.news-card-body h3,.product-body h3,.book-body h3,.official-media-body h3,.policy-card h3,.faq-question,.quick-action-item strong,.contact-list strong,.mini-card strong,.amount strong,.impact-badge strong,.product-price,.ticket-price,.role strong{font-size:var(--msb-v12-card-title)!important;line-height:1.12!important;letter-spacing:-.08px!important;}
  .section-title p,.lead,p,.card p,.box p,.service-overview-card p,.news-card-body p,.product-body p,.book-body p,.official-media-body p,.policy-card li,.list li,.number-list li,.quick-action-item span,.contact-list p,.contact-list a,.info-item p,li,label,blockquote{font-size:var(--msb-v12-body)!important;line-height:1.25!important;}
  small,.eyebrow,.news-meta,.book-meta,.product-info,.product-meta,.official-video-tab,.book-tags span,.mini-card span,.card small,.time,.source-line,.tag{font-size:var(--msb-v12-small)!important;line-height:1.1!important;}
  .btn,.news-read,.book-actions .btn,.product-buy,.official-media-body .btn,button,input,select,textarea{font-size:var(--msb-v12-body)!important;line-height:1.06!important;}
  .btn,.news-read,.book-actions .btn,.product-buy{min-height:24px!important;padding:5px 7px!important;border-radius:9px!important;}

  /* Video eksternal dibuat lebih proporsional, thumbnail lebih dominan, teks tidak memakan ruang. */
  .official-video-panel{padding:8px!important;border-radius:14px!important;}
  .official-video-toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;align-items:end!important;}
  .official-video-toolbar .btn{grid-column:1/-1!important;}
  .official-video-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
  .official-video-tab{min-height:26px!important;padding:5px 6px!important;border-radius:10px!important;}
  .official-media-card{display:flex!important;flex-direction:column!important;padding:0!important;border-radius:13px!important;background:#fff!important;}
  .official-media-preview{width:100%!important;height:clamp(100px,24vw,170px)!important;min-height:100px!important;border-radius:13px 13px 0 0!important;overflow:hidden!important;background:#071f17!important;}
  .official-media-preview img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;border-radius:0!important;}
  .official-media-play{left:6px!important;bottom:6px!important;min-height:22px!important;max-height:24px!important;padding:4px 7px!important;border-radius:999px!important;font-size:clamp(7px,1.2vw,9px)!important;line-height:1!important;}
  .official-media-body,.news-card-body,.product-body,.book-body{padding:7px!important;gap:3px!important;}
  .official-media-body .news-meta{display:flex!important;gap:3px!important;flex-wrap:wrap!important;margin:0 0 3px!important;}
  .official-media-body h3{font-size:clamp(8.8px,1.65vw,13px)!important;line-height:1.12!important;margin:0!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  .official-media-body p{font-size:clamp(7.2px,1.35vw,10px)!important;line-height:1.22!important;margin:2px 0 0!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  .official-media-player{margin-top:5px!important;border-radius:9px!important;overflow:hidden!important;background:#061b14!important;}
  .official-media-player iframe,.official-media-native{width:100%!important;height:clamp(92px,22vw,150px)!important;min-height:92px!important;border-radius:9px!important;}
  .news-action-row,.book-actions{display:grid!important;grid-template-columns:1fr!important;gap:4px!important;margin-top:5px!important;}

  /* Kontak mobile/tablet lebih compact. */
  #contact .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  #contact .card h2,#contact .quick-contact-card h2{font-size:clamp(11px,2vw,16px)!important;line-height:1.1!important;margin-bottom:4px!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  #contact .card p,#contact .quick-contact-card p{font-size:clamp(7.4px,1.4vw,10.5px)!important;line-height:1.25!important;display:-webkit-box!important;-webkit-line-clamp:4!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  .contact-list,.quick-action-list,.info-list{gap:5px!important;}
  .contact-list li,.quick-action-item,.info-item{padding:6px!important;gap:5px!important;border-radius:10px!important;grid-template-columns:24px minmax(0,1fr)!important;}
  .contact-symbol,.info-icon{width:24px!important;height:24px!important;border-radius:8px!important;font-size:8px!important;}
  .quick-action-item{grid-template-columns:1fr!important;}

  .floating{bottom:calc(var(--msb-v12-bottom-nav) + 12px + env(safe-area-inset-bottom,0px))!important;}
  .footer{padding-bottom:calc(var(--msb-v12-bottom-nav) + 34px + env(safe-area-inset-bottom,0px))!important;}
  .section,[id]{scroll-margin-top:86px!important;}
}

@media (min-width:768px) and (max-width:1024px){
  :root{--msb-v12-bottom-nav:78px;--msb-v12-card-gap:10px;--msb-v12-card-pad:9px;}
  .container{width:min(94%,900px)!important;}
  .msb-mobile-bottom-nav a{min-height:58px!important;font-size:10.5px!important;}
  .msb-mobile-bottom-nav .msb-nav-icon{width:28px!important;height:28px!important;}
  .msb-mobile-bottom-nav .msb-nav-icon svg{width:17px!important;height:17px!important;}
  .official-media-preview{height:clamp(150px,24vw,210px)!important;min-height:150px!important;}
  .official-media-player iframe,.official-media-native{height:clamp(135px,21vw,190px)!important;}
}

@media (max-width:480px){
  :root{
    --msb-v12-bottom-nav:68px;
    --msb-v12-header-gap:4px;
    --msb-v12-card-gap:6px;
    --msb-v12-card-pad:5px;
    --msb-v12-title:clamp(10.5px,3.1vw,13.5px);
    --msb-v12-card-title:clamp(7.4px,2.15vw,9.2px);
    --msb-v12-body:clamp(6.4px,1.82vw,7.9px);
    --msb-v12-small:clamp(5.8px,1.62vw,7px);
    --msb-v12-menu:clamp(7px,2vw,8.4px);
  }
  .site-header .brand,.brand{grid-template-columns:21px minmax(0,1fr)!important;gap:5px!important;width:96%!important;}
  .site-header .brand-mark,.brand-mark{width:21px!important;height:21px!important;min-width:21px!important;border-radius:8px!important;}
  .site-header .nav-menu,.nav-menu{gap:4px!important;}
  .site-header .nav-menu a,.nav-menu a{min-height:23px!important;padding:4px 7px!important;}
  .msb-tools-toggle{width:38px!important;height:38px!important;left:7px!important;top:calc(50% - 118px)!important;border-radius:14px!important;}
  .site-header .nav-actions.msb-tools-panel,.nav-actions.msb-tools-panel{left:7px!important;top:calc(50% - 70px)!important;width:48px!important;max-width:48px!important;border-radius:16px!important;gap:6px!important;padding:7px 5px!important;}
  .site-header .nav-actions.msb-tools-panel select,.nav-actions.msb-tools-panel select,.site-header .nav-actions.msb-tools-panel button,.nav-actions.msb-tools-panel button,.site-header .nav-actions.msb-tools-panel a,.nav-actions.msb-tools-panel a{width:35px!important;min-width:35px!important;max-width:35px!important;height:35px!important;min-height:35px!important;max-height:35px!important;border-radius:12px!important;}
  .msb-mobile-bottom-nav{width:calc(100vw - 12px)!important;gap:3px!important;padding:5px!important;border-radius:17px!important;}
  .msb-mobile-bottom-nav a{min-height:46px!important;font-size:7.2px!important;border-radius:12px!important;gap:2px!important;}
  .msb-mobile-bottom-nav .msb-nav-icon{width:20px!important;height:20px!important;}
  .msb-mobile-bottom-nav .msb-nav-icon svg{width:13px!important;height:13px!important;}
  .section{padding:22px 0!important;}
  .official-video-toolbar{grid-template-columns:1fr 1fr!important;gap:5px!important;}
  .official-video-tabs{gap:4px!important;}
  .official-media-preview{height:clamp(86px,25vw,105px)!important;min-height:86px!important;}
  .official-media-play{min-height:18px!important;max-height:20px!important;padding:3px 6px!important;font-size:6.4px!important;}
  .official-media-body,.news-card-body,.product-body,.book-body{padding:5px!important;}
  .official-media-body h3{font-size:clamp(7.2px,2.05vw,8.8px)!important;-webkit-line-clamp:2!important;}
  .official-media-body p{font-size:clamp(6px,1.72vw,7px)!important;-webkit-line-clamp:1!important;}
  .official-media-player iframe,.official-media-native{height:clamp(78px,23vw,96px)!important;min-height:78px!important;}
  #contact .grid-2{gap:6px!important;}
  #contact .card h2,#contact .quick-contact-card h2{font-size:clamp(9px,2.65vw,11px)!important;}
  #contact .card p,#contact .quick-contact-card p{font-size:clamp(6.2px,1.78vw,7.2px)!important;}
  .contact-list li,.quick-action-item,.info-item{padding:5px!important;grid-template-columns:21px minmax(0,1fr)!important;}
  .contact-symbol,.info-icon{width:21px!important;height:21px!important;font-size:6px!important;}
}


/* ==========================================================
   MSB UI/UX HOTFIX v13
   Fokus: panel cepat keluar ke kanan dari tombol sisi kiri,
   hapus duplikasi portal/dark-light, dan tambah background MSB.
   ========================================================== */
:root{
  --msb-bg-hero:url("backgrounds/msb-sunset-hero-1.jpg");
  --msb-bg-secondary:url("backgrounds/msb-sunset-hero-2.jpg");
  --msb-bg-wide:url("backgrounds/msb-sunset-wide-4.jpg");
}
body{
  background:
    linear-gradient(180deg, rgba(248,244,234,.90) 0%, rgba(247,243,232,.96) 44%, var(--bg) 100%),
    var(--msb-bg-wide) center top/cover fixed no-repeat!important;
}
body.dark{
  background:
    linear-gradient(180deg, rgba(7,20,15,.94) 0%, rgba(9,25,19,.96) 55%, #07140f 100%),
    var(--msb-bg-wide) center top/cover fixed no-repeat!important;
}
.hero{
  background:
    linear-gradient(110deg, rgba(8,31,23,.94), rgba(20,66,50,.68), rgba(8,31,23,.32)),
    var(--msb-bg-hero) center/cover no-repeat!important;
}
.adopt-photo{
  background:
    linear-gradient(rgba(6,32,25,.10), rgba(6,32,25,.82)),
    var(--msb-bg-secondary) center/cover no-repeat!important;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(circle at 12% 20%, rgba(200,158,72,.12), transparent 28%), radial-gradient(circle at 88% 18%, rgba(68,164,118,.10), transparent 30%);
}
@media (max-width:1024px){
  body{background-attachment:scroll!important;}
  body.dark{background-attachment:scroll!important;}

  /* Tombol panel tetap di samping kiri tengah layar. */
  .msb-tools-toggle{
    position:fixed!important;
    left:8px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:100004!important;
    width:40px!important;
    height:40px!important;
    border-radius:15px!important;
  }

  /* Panel keluar ke kanan dari tombol, bukan naik ke atas. */
  .site-header .nav-actions.msb-tools-panel,
  .nav-actions.msb-tools-panel{
    position:fixed!important;
    left:54px!important;
    top:50%!important;
    transform:translate(-14px,-50%) scale(.96)!important;
    transform-origin:left center!important;
    z-index:100003!important;
    width:auto!important;
    max-width:calc(100vw - 66px)!important;
    min-width:0!important;
    height:44px!important;
    max-height:44px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    padding:4px 6px!important;
    border-radius:16px!important;
    opacity:0!important;
    pointer-events:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    transition:transform .22s ease, opacity .22s ease!important;
    scrollbar-width:none!important;
  }
  .site-header .nav-actions.msb-tools-panel::-webkit-scrollbar,
  .nav-actions.msb-tools-panel::-webkit-scrollbar{display:none!important;}
  body.msb-tools-open .site-header .nav-actions.msb-tools-panel,
  body.msb-tools-open .nav-actions.msb-tools-panel{
    transform:translate(0,-50%) scale(1)!important;
    opacity:1!important;
    pointer-events:auto!important;
  }

  .site-header .nav-actions.msb-tools-panel select,
  .nav-actions.msb-tools-panel select,
  .site-header .nav-actions.msb-tools-panel button,
  .nav-actions.msb-tools-panel button,
  .site-header .nav-actions.msb-tools-panel a,
  .nav-actions.msb-tools-panel a{
    flex:0 0 auto!important;
    width:35px!important;
    min-width:35px!important;
    max-width:35px!important;
    height:35px!important;
    min-height:35px!important;
    max-height:35px!important;
    border-radius:12px!important;
    padding:0!important;
  }

  /* Hilangkan duplikasi akses portal ikon gembok dari panel cepat.
     Portal Pengelola tetap memakai link/menu asli yang sudah ada di website. */
  .msb-portal-tool{display:none!important;visibility:hidden!important;pointer-events:none!important;}

  /* Tema dan suara tetap ikon saja, bukan teks ganda. */
  #themeBtn.msb-icon-only,
  #voiceToggle.msb-icon-only,
  .voice-toggle.msb-icon-only{
    font-size:0!important;
    text-indent:-9999px!important;
    overflow:hidden!important;
    position:relative!important;
  }
  #themeBtn.msb-icon-only::before,
  #voiceToggle.msb-icon-only::before,
  .voice-toggle.msb-icon-only::before,
  #voiceToggle.voice-muted.msb-icon-only::after,
  .voice-toggle.voice-muted.msb-icon-only::after{
    text-indent:0!important;
  }
}
@media (max-width:480px){
  .msb-tools-toggle{left:7px!important;width:37px!important;height:37px!important;border-radius:14px!important;}
  .site-header .nav-actions.msb-tools-panel,
  .nav-actions.msb-tools-panel{
    left:50px!important;
    height:41px!important;
    max-height:41px!important;
    gap:5px!important;
    padding:3px 5px!important;
    border-radius:15px!important;
  }
  .site-header .nav-actions.msb-tools-panel select,
  .nav-actions.msb-tools-panel select,
  .site-header .nav-actions.msb-tools-panel button,
  .nav-actions.msb-tools-panel button,
  .site-header .nav-actions.msb-tools-panel a,
  .nav-actions.msb-tools-panel a{
    width:32px!important;min-width:32px!important;max-width:32px!important;height:32px!important;min-height:32px!important;max-height:32px!important;border-radius:11px!important;
  }
}


/* ==========================================================
   MSB UI/UX HOTFIX v14
   Tambahan foto latar dan tampilan visual MSB dari aset terbaru.
   ========================================================== */
:root{
  --msb-bg-hero:url("backgrounds/msb-gerbang-tamu-tracking-2.jpg");
  --msb-bg-secondary:url("backgrounds/msb-edukasi-tanam-senja-1.jpg");
  --msb-bg-wide:url("backgrounds/msb-penanaman-relawan-4.jpg");
  --msb-bg-seedling:url("backgrounds/msb-bibit-anak-sekolah-3.jpg");
}
body{
  background:
    linear-gradient(180deg, rgba(248,244,234,.88) 0%, rgba(247,243,232,.95) 46%, var(--bg) 100%),
    var(--msb-bg-wide) center top/cover fixed no-repeat!important;
}
body.dark{
  background:
    linear-gradient(180deg, rgba(7,20,15,.93) 0%, rgba(9,25,19,.97) 58%, #07140f 100%),
    var(--msb-bg-wide) center top/cover fixed no-repeat!important;
}
.hero{
  background:
    linear-gradient(110deg, rgba(5,24,18,.95), rgba(13,66,47,.66), rgba(5,24,18,.25)),
    var(--msb-bg-hero) center/cover no-repeat!important;
}
#story,
#about{
  background:
    linear-gradient(180deg, rgba(255,250,238,.84), rgba(255,250,238,.94)),
    var(--msb-bg-hero) center/cover no-repeat!important;
  background-attachment:fixed!important;
}
#conservation,
#adopt{
  background:
    linear-gradient(180deg, rgba(6,46,32,.82), rgba(6,46,32,.92)),
    var(--msb-bg-secondary) center/cover no-repeat!important;
}
#gallery,
#testimonials{
  background:
    linear-gradient(180deg, rgba(6,46,32,.84), rgba(6,46,32,.93)),
    var(--msb-bg-seedling) center/cover no-repeat!important;
}
#location,
#contact{
  background:
    linear-gradient(180deg, rgba(255,250,238,.88), rgba(255,250,238,.96)),
    var(--msb-bg-wide) center/cover no-repeat!important;
}
.adopt-photo{
  background:
    linear-gradient(rgba(6,32,25,.05), rgba(6,32,25,.78)),
    var(--msb-bg-secondary) center/cover no-repeat!important;
}
.gallery-item img,
.testimony-card img,
.news-card img,
.article-cover{
  object-fit:cover!important;
  object-position:center!important;
}
.gallery-item:first-child img,
.gallery-item:nth-child(2) img,
.gallery-item:nth-child(3) img,
.gallery-item:nth-child(4) img{
  aspect-ratio:16/9!important;
}
@media (max-width:1024px){
  body,#story,#about{background-attachment:scroll!important;}
  #story,#about,#conservation,#adopt,#gallery,#testimonials,#location,#contact{
    background-size:cover!important;
    background-position:center!important;
  }
}
@media (max-width:640px){
  .hero{background-position:center top!important;}
  #story,#about{background-position:center!important;}
  #conservation,#adopt{background-position:center!important;}
  #gallery,#testimonials{background-position:center!important;}
  #location,#contact{background-position:center!important;}
}


/* =========================================================
   MSB V15 - Logo mitra konsisten di mobile/tablet/desktop
   ========================================================= */
.logo-card img,
.partner-photo img,
.brand-mark img{
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}
.logo-card,
.partner-photo,
.brand-mark{
  background:#fff!important;
  overflow:hidden!important;
}
.partner-card .partner-photo{
  display:grid!important;
  place-items:center!important;
  min-width:64px!important;
}
@media (max-width:1024px){
  .logo-card{aspect-ratio:1/1!important;min-height:84px!important;padding:9px!important;}
  .logo-card img{width:50px!important;height:50px!important;padding:3px!important;}
  .partner-card .partner-photo{width:58px!important;height:58px!important;min-width:58px!important;padding:5px!important;}
  .partner-card .partner-photo img{width:100%!important;height:100%!important;}
}
@media (max-width:600px){
  .logo-card{min-height:72px!important;padding:7px!important;}
  .logo-card img{width:38px!important;height:38px!important;padding:2px!important;}
  .logo-card strong{font-size:8.8px!important;line-height:1.12!important;}
  .partner-card .partner-photo{width:46px!important;height:46px!important;min-width:46px!important;border-radius:14px!important;}
}


/* =========================================================
   MSB V45 - Timeline added to backup base, audio untouched
   ========================================================= */

/* Mini timeline desktop under existing top menu */
@media (min-width:1025px){
  body{
    padding-top:150px!important;
  }
  #msbV45MiniTimeline{
    position:fixed!important;
    top:76px!important;
    left:0!important;
    right:0!important;
    z-index:214748300!important;
    min-height:68px!important;
    background:rgba(247,243,232,.96)!important;
    border-bottom:1px solid rgba(6,59,42,.10)!important;
    box-shadow:0 8px 22px rgba(7,31,23,.08)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }
  .msb-v46-mini-inner{
    width:min(100% - 28px,1880px)!important;
    min-height:68px!important;
    margin:auto!important;
    display:grid!important;
    grid-template-columns:220px minmax(0,1fr) 300px!important;
    align-items:center!important;
    gap:18px!important;
  }
  .msb-v46-mini-title{
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
    color:#073b2a!important;
  }
  .msb-v46-mini-title strong{
    font-size:13px!important;
    font-weight:950!important;
    line-height:1.1!important;
  }
  .msb-v46-mini-title span{
    font-size:11px!important;
    color:rgba(7,59,42,.70)!important;
    line-height:1.2!important;
  }
  .msb-v46-line-wrap{
    position:relative!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center!important;
    gap:10px!important;
    min-width:0!important;
    padding:6px 0!important;
  }
  .msb-v46-line{
    position:absolute!important;
    left:8%!important;
    right:8%!important;
    top:20px!important;
    height:2px!important;
    background:linear-gradient(90deg,rgba(9,94,65,.18),#0b7f57,rgba(9,94,65,.18))!important;
    z-index:0!important;
  }
  .msb-v46-step{
    position:relative!important;
    z-index:1!important;
    display:grid!important;
    justify-items:center!important;
    gap:2px!important;
    text-align:center!important;
    color:#073b2a!important;
  }
  .msb-v46-step i{
    width:15px!important;
    height:15px!important;
    display:block!important;
    border-radius:999px!important;
    background:#0b7f57!important;
    border:3px solid #f7f3e8!important;
    box-shadow:0 0 0 2px rgba(11,127,87,.20)!important;
  }
  .msb-v46-step b{
    font-size:11px!important;
    font-weight:950!important;
    line-height:1.1!important;
    margin-top:2px!important;
    white-space:nowrap!important;
  }
  .msb-v46-step small{
    font-size:9.5px!important;
    line-height:1.1!important;
    color:rgba(7,59,42,.72)!important;
    white-space:nowrap!important;
  }
  .msb-v46-mini-countdown{
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:6px!important;
  }
  .msb-v46-mini-countdown span{
    min-height:48px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:14px!important;
    background:linear-gradient(135deg,#073b2a,#0b7f57)!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(7,31,23,.10)!important;
  }
  .msb-v46-mini-countdown b{
    display:block!important;
    font-size:17px!important;
    line-height:1!important;
    font-weight:950!important;
    color:#f4d57a!important;
  }
  .msb-v46-mini-countdown small{
    display:block!important;
    font-size:9px!important;
    line-height:1!important;
    margin-top:3px!important;
    font-weight:800!important;
    color:rgba(255,255,255,.82)!important;
  }
  .hero,#home{
    scroll-margin-top:154px!important;
  }
}
@media (max-width:1280px) and (min-width:1025px){
  .msb-v46-mini-inner{
    grid-template-columns:180px minmax(0,1fr) 260px!important;
    gap:12px!important;
  }
  .msb-v46-mini-title span,
  .msb-v46-step small{
    display:none!important;
  }
}
@media (max-width:1024px){
  #msbV45MiniTimeline{
    display:none!important;
  }
}

/* Main popup style timeline section */
.msb-popupstyle-timeline{
  position:relative!important;
  padding:46px 0 56px!important;
  overflow:hidden!important;
  background-image:
    linear-gradient(135deg,rgba(4,22,15,.84),rgba(5,35,24,.76)),
    radial-gradient(circle at 12% 8%,rgba(54,139,92,.22),transparent 24%),
    radial-gradient(circle at 86% 12%,rgba(243,196,90,.14),transparent 24%),
    url("backgrounds/msb-timeline-banner-2026.jpg")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  color:#f4fff4!important;
}
.msb-popupstyle-timeline:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.22!important;
  background:
    linear-gradient(90deg,rgba(243,196,90,.04) 1px,transparent 1px),
    linear-gradient(rgba(243,196,90,.035) 1px,transparent 1px)!important;
  background-size:38px 38px!important;
}
.msb-popupstyle-timeline .container{
  position:relative!important;
  z-index:1!important;
}
.msb-popupstyle-card{
  width:min(1120px,100%)!important;
  margin:auto!important;
  border:1px solid rgba(243,196,90,.30)!important;
  border-radius:28px!important;
  background:linear-gradient(145deg,rgba(6,39,26,.96),rgba(4,22,15,.94))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.34)!important;
  padding:20px!important;
}
.msb-popupstyle-header{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 330px!important;
  gap:18px!important;
  align-items:center!important;
  margin-bottom:14px!important;
}
.msb-popupstyle-eyebrow{
  display:inline-flex!important;
  width:fit-content!important;
  max-width:100%!important;
  padding:7px 12px!important;
  margin-bottom:10px!important;
  border:1px solid rgba(243,196,90,.36)!important;
  border-radius:999px!important;
  background:rgba(243,196,90,.10)!important;
  color:#ffe9ac!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
}
.msb-popupstyle-header h2{
  margin:0 0 8px!important;
  color:#f3c45a!important;
  font-size:clamp(1.65rem,3vw,2.65rem)!important;
  line-height:1.08!important;
  text-transform:uppercase!important;
  letter-spacing:.3px!important;
  font-family:Arial, sans-serif!important;
  font-weight:950!important;
}
.msb-popupstyle-header p{
  margin:0!important;
  color:#eef8ee!important;
  font-size:14px!important;
  line-height:1.65!important;
  max-width:720px!important;
  padding-left:12px!important;
  border-left:3px solid #f3c45a!important;
}
.msb-popupstyle-countdown{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:8px!important;
}
.msb-popupstyle-countdown span{
  min-height:76px!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  border:1px solid rgba(243,196,90,.36)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(16,78,54,.82),rgba(5,31,21,.88))!important;
}
.msb-popupstyle-countdown strong{
  display:block!important;
  color:#fff7df!important;
  font-size:clamp(24px,2.8vw,36px)!important;
  line-height:1!important;
  font-weight:950!important;
}
.msb-popupstyle-countdown small{
  display:block!important;
  color:#f3c45a!important;
  margin-top:5px!important;
  font-weight:900!important;
  font-size:12px!important;
}
.msb-popupstyle-grid{
  display:grid!important;
  grid-template-columns:.86fr 1.14fr!important;
  gap:14px!important;
}
.msb-popupstyle-panel{
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.06)!important;
  border-radius:22px!important;
  padding:16px!important;
}
.msb-popupstyle-panel h3{
  margin:0 0 12px!important;
  color:#f3c45a!important;
  font-size:15px!important;
  text-transform:uppercase!important;
  letter-spacing:.4px!important;
  font-family:Arial, sans-serif!important;
  font-weight:950!important;
}
.msb-popupstyle-detail{
  display:grid!important;
  gap:9px!important;
}
.msb-popupstyle-detail div{
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:14px!important;
  padding:10px 11px!important;
}
.msb-popupstyle-detail small{
  display:block!important;
  color:#ffe9ac!important;
  font-weight:900!important;
  font-size:11.5px!important;
  margin-bottom:4px!important;
}
.msb-popupstyle-detail p{
  margin:0!important;
  color:#f7fff7!important;
  font-size:13px!important;
  line-height:1.45!important;
}
.msb-popupstyle-list{
  position:relative!important;
  padding-left:22px!important;
  display:grid!important;
  gap:10px!important;
}
.msb-popupstyle-list:before{
  content:""!important;
  position:absolute!important;
  left:6px!important;
  top:5px!important;
  bottom:5px!important;
  width:3px!important;
  border-radius:999px!important;
  background:linear-gradient(to bottom,#f3c45a,rgba(243,196,90,.16))!important;
}
.msb-popupstyle-list article{
  position:relative!important;
  padding:10px 12px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.045)!important;
  border-radius:15px!important;
}
.msb-popupstyle-list article:before{
  content:""!important;
  position:absolute!important;
  left:-21px!important;
  top:15px!important;
  width:12px!important;
  height:12px!important;
  border-radius:999px!important;
  background:#f3c45a!important;
  box-shadow:0 0 0 5px rgba(243,196,90,.12)!important;
}
.msb-popupstyle-list time{
  color:#f3c45a!important;
  display:block!important;
  font-size:11.8px!important;
  font-weight:950!important;
  margin-bottom:4px!important;
}
.msb-popupstyle-list strong{
  color:#fff!important;
  display:block!important;
  font-size:13.5px!important;
  line-height:1.25!important;
  margin-bottom:3px!important;
  font-weight:950!important;
}
.msb-popupstyle-list p{
  margin:0!important;
  color:#dcebdd!important;
  font-size:12px!important;
  line-height:1.48!important;
}
.msb-popupstyle-sponsor{
  margin-top:14px!important;
  display:grid!important;
  gap:10px!important;
  border:1px solid rgba(243,196,90,.30)!important;
  background:linear-gradient(135deg,rgba(243,196,90,.10),rgba(255,255,255,.045))!important;
  border-radius:18px!important;
  padding:12px 14px!important;
}
.msb-popupstyle-sponsor strong{
  display:block!important;
  color:#fff7df!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:950!important;
  margin-bottom:4px!important;
}
.msb-popupstyle-sponsor p{
  margin:0!important;
  color:#dcebdd!important;
  font-size:12.5px!important;
  line-height:1.5!important;
}
.msb-popupstyle-sponsor a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:fit-content!important;
  min-height:40px!important;
  padding:10px 15px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#0a8f53,#14b875)!important;
  color:#ffffff!important;
  text-decoration:none!important;
  font-size:12.5px!important;
  font-weight:950!important;
}
.msb-popupstyle-footer{
  margin-top:14px!important;
  text-align:center!important;
  color:#f3c45a!important;
  font-size:16px!important;
  font-weight:950!important;
  padding:8px 8px 2px!important;
}
@media(max-width:980px){
  .msb-popupstyle-header,
  .msb-popupstyle-grid{
    grid-template-columns:1fr!important;
  }
  .msb-popupstyle-countdown{
    max-width:520px!important;
  }
}
@media(max-width:640px){
  .msb-popupstyle-timeline{
    padding:34px 0 44px!important;
  }
  .msb-popupstyle-card{
    border-radius:22px!important;
    padding:15px!important;
  }
  .msb-popupstyle-header h2{
    font-size:1.45rem!important;
  }
  .msb-popupstyle-header p{
    font-size:12.5px!important;
    line-height:1.55!important;
  }
  .msb-popupstyle-countdown{
    grid-template-columns:repeat(2,1fr)!important;
  }
  .msb-popupstyle-countdown span{
    min-height:66px!important;
  }
}





.msb-popupstyle-formbox{
  margin-top:16px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr)!important;
  gap:16px!important;
  border:1px solid rgba(243,196,90,.28)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(6,39,26,.72))!important;
  border-radius:24px!important;
  padding:16px!important;
  box-shadow:0 14px 36px rgba(0,0,0,.18)!important;
}
.msb-popupstyle-formcopy{
  align-self:center!important;
}
.msb-popupstyle-formbadge{
  display:inline-flex!important;
  width:fit-content!important;
  padding:7px 12px!important;
  margin-bottom:10px!important;
  border-radius:999px!important;
  border:1px solid rgba(243,196,90,.35)!important;
  background:rgba(243,196,90,.11)!important;
  color:#ffe9ac!important;
  font-size:12px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
}
.msb-popupstyle-formcopy h3{
  margin:0 0 8px!important;
  color:#fff7df!important;
  font-size:clamp(20px,2.5vw,28px)!important;
  line-height:1.18!important;
  font-family:Arial,sans-serif!important;
  font-weight:950!important;
}
.msb-popupstyle-formcopy p{
  margin:0 0 10px!important;
  color:#e4f1e5!important;
  font-size:13px!important;
  line-height:1.62!important;
}
.msb-popupstyle-formcopy small{
  display:block!important;
  color:#ffe9ac!important;
  font-size:11.8px!important;
  line-height:1.5!important;
}
.msb-popupstyle-formactions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin:14px 0 10px!important;
}
.msb-popupstyle-formbtn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:11px 16px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#f3c45a,#ffd978)!important;
  color:#073727!important;
  text-decoration:none!important;
  font-size:12.8px!important;
  font-weight:950!important;
  box-shadow:0 8px 22px rgba(243,196,90,.17)!important;
}
.msb-popupstyle-formbtn:hover{
  transform:translateY(-1px)!important;
}
.msb-popupstyle-qrbox{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:10px!important;
  padding:14px!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.07)!important;
  text-align:center!important;
}
.msb-popupstyle-qrimage{
  display:block!important;
  width:min(100%,250px)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#fff!important;
  padding:10px!important;
  box-shadow:0 12px 28px rgba(0,0,0,.22)!important;
}
.msb-popupstyle-qrimage img{
  width:100%!important;
  height:auto!important;
  display:block!important;
  border-radius:10px!important;
}
.msb-popupstyle-qrbox p{
  margin:0!important;
  color:#dcebdd!important;
  font-size:12px!important;
  line-height:1.5!important;
  max-width:240px!important;
}
@media(max-width:980px){
  .msb-popupstyle-formbox{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:640px){
  .msb-popupstyle-formbox{
    padding:13px!important;
    border-radius:19px!important;
  }
  .msb-popupstyle-formcopy h3{
    font-size:1.35rem!important;
  }
  .msb-popupstyle-formcopy p{
    font-size:12.3px!important;
  }
  .msb-popupstyle-qrimage{
    width:min(100%,220px)!important;
  }
}

/* =========================================================
   MSB V47 - Visual Google Maps dalam Timeline Acara
   ========================================================= */
.msb-popupstyle-mapwrap{
  margin-top:16px!important;
  border:1px solid rgba(243,196,90,.28)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(6,39,26,.62))!important;
  border-radius:24px!important;
  padding:16px!important;
  overflow:hidden!important;
}
.msb-popupstyle-maphead{
  text-align:center!important;
  max-width:860px!important;
  margin:0 auto 14px!important;
}
.msb-popupstyle-maphead span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:7px 13px!important;
  border-radius:999px!important;
  border:1px solid rgba(243,196,90,.35)!important;
  background:rgba(243,196,90,.11)!important;
  color:#ffe9ac!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.03em!important;
  text-transform:uppercase!important;
}
.msb-popupstyle-maphead h3{
  margin:10px 0 6px!important;
  color:#fff7df!important;
  font-size:clamp(18px,2.4vw,27px)!important;
  line-height:1.18!important;
  font-family:Arial,sans-serif!important;
  font-weight:950!important;
}
.msb-popupstyle-maphead p{
  margin:0!important;
  color:#dcebdd!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.msb-popupstyle-mapgrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
.msb-popupstyle-mapcard{
  display:grid!important;
  grid-template-rows:auto 1fr!important;
  min-width:0!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.065)!important;
  border-radius:20px!important;
  overflow:hidden!important;
  box-shadow:0 14px 36px rgba(0,0,0,.18)!important;
}
.msb-popupstyle-mapinfo{
  padding:14px 14px 10px!important;
}
.msb-popupstyle-mapbadge{
  display:inline-flex!important;
  width:fit-content!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#0a8f53,#14b875)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.02em!important;
  margin-bottom:8px!important;
}
.msb-popupstyle-mapinfo h4{
  margin:0 0 6px!important;
  color:#ffffff!important;
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:950!important;
}
.msb-popupstyle-mapinfo p{
  margin:0 0 10px!important;
  color:#dcebdd!important;
  font-size:12.5px!important;
  line-height:1.5!important;
}
.msb-popupstyle-mapinfo a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:38px!important;
  padding:9px 13px!important;
  border-radius:999px!important;
  background:#f3c45a!important;
  color:#063d2d!important;
  text-decoration:none!important;
  font-size:12px!important;
  font-weight:950!important;
  box-shadow:0 8px 22px rgba(243,196,90,.17)!important;
}
.msb-popupstyle-mapframe{
  padding:0 14px 14px!important;
}
.msb-popupstyle-mapframe iframe{
  width:100%!important;
  min-height:280px!important;
  height:clamp(260px,28vw,360px)!important;
  border:0!important;
  display:block!important;
  border-radius:16px!important;
  background:#eaf3ea!important;
}
@media(max-width:980px){
  .msb-popupstyle-mapgrid{grid-template-columns:1fr!important;}
  .msb-popupstyle-mapframe iframe{min-height:260px!important;height:310px!important;}
}
@media(max-width:640px){
  .msb-popupstyle-mapwrap{padding:12px!important;border-radius:19px!important;}
  .msb-popupstyle-mapinfo{padding:12px 12px 9px!important;}
  .msb-popupstyle-mapframe{padding:0 12px 12px!important;}
  .msb-popupstyle-mapframe iframe{min-height:240px!important;height:260px!important;border-radius:14px!important;}
  .msb-popupstyle-mapinfo h4{font-size:14px!important;}
  .msb-popupstyle-mapinfo p{font-size:11.8px!important;}
}

/* =========================================================
   MSB V46 - Fixed top menu desktop + mobile, WA sponsor corrected
   ========================================================= */

/* Semua device: header/menu utama tetap di atas saat scroll */
.site-header,
header.site-header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:2147483000!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  background:rgba(247,243,232,.97)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  border-bottom:1px solid rgba(6,59,42,.12)!important;
  box-shadow:0 8px 24px rgba(7,31,23,.08)!important;
}
body.dark .site-header,
body.dark header.site-header{
  background:rgba(7,20,15,.97)!important;
  border-bottom-color:rgba(255,255,255,.10)!important;
}

/* Desktop: ruang header + mini timeline */
@media(min-width:1025px){
  body{
    padding-top:150px!important;
  }

  .site-header,
  header.site-header{
    min-height:76px!important;
  }

  #msbV45MiniTimeline{
    top:76px!important;
    z-index:2147482990!important;
  }

  .hero,
  #home,
  [id]{
    scroll-margin-top:156px!important;
  }
}

/* Tablet dan mobile: header fixed top, mini timeline desktop disembunyikan */
@media(max-width:1024px){
  #msbV45MiniTimeline{
    display:none!important;
  }

  body{
    padding-top:72px!important;
  }

  .site-header,
  header.site-header{
    min-height:64px!important;
  }

  .site-header .container,
  header.site-header .container,
  .site-header .navbar,
  header.site-header .navbar{
    max-width:100%!important;
  }

  .site-header nav,
  header.site-header nav{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  .site-header nav::-webkit-scrollbar,
  header.site-header nav::-webkit-scrollbar{
    display:none!important;
  }

  .site-header .nav-menu,
  header.site-header .nav-menu{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:max-content!important;
    min-width:100%!important;
    gap:6px!important;
  }

  .hero,
  #home,
  [id]{
    scroll-margin-top:78px!important;
  }
}

/* Mobile kecil: jangan sampai menu nutup konten terlalu banyak */
@media(max-width:640px){
  body{
    padding-top:66px!important;
  }

  .site-header,
  header.site-header{
    min-height:58px!important;
  }

  .site-header .brand,
  header.site-header .brand{
    display:flex!important;
  }

  .site-header .brand strong,
  header.site-header .brand strong{
    font-size:12px!important;
  }

  .site-header .brand span,
  header.site-header .brand span{
    font-size:9px!important;
  }

  .site-header .nav-menu a,
  header.site-header .nav-menu a{
    min-height:30px!important;
    padding:6px 9px!important;
    font-size:10.5px!important;
  }

  .hero,
  #home,
  [id]{
    scroll-margin-top:72px!important;
  }
}


/* =========================================================
   MSB V49 - Timeline mobile responsive refinement
   Fokus: tampilan Timeline, QR Google Form, countdown, dan map agar pas di HP.
   Audio guide tidak disentuh.
   ========================================================= */

.msb-popupstyle-timeline,
.msb-popupstyle-timeline *{
  box-sizing:border-box!important;
}

@media(max-width:768px){
  .msb-popupstyle-timeline{
    padding:24px 0 34px!important;
    background-position:center top!important;
    background-size:cover!important;
  }

  .msb-popupstyle-timeline .container{
    width:100%!important;
    max-width:100%!important;
    padding-left:10px!important;
    padding-right:10px!important;
    margin:0 auto!important;
  }

  .msb-popupstyle-card{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:12px!important;
    border-radius:20px!important;
  }

  .msb-popupstyle-header{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    align-items:start!important;
    margin-bottom:12px!important;
  }

  .msb-popupstyle-eyebrow{
    font-size:10.5px!important;
    padding:6px 10px!important;
    margin-bottom:8px!important;
  }

  .msb-popupstyle-header h2{
    font-size:clamp(1.28rem,6.2vw,1.72rem)!important;
    line-height:1.12!important;
    margin-bottom:8px!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }

  .msb-popupstyle-header p{
    font-size:12.1px!important;
    line-height:1.58!important;
    max-width:100%!important;
  }

  .msb-popupstyle-countdown{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    padding:0!important;
  }

  .msb-popupstyle-countdown span{
    min-width:0!important;
    min-height:58px!important;
    padding:7px 5px!important;
    border-radius:14px!important;
  }

  .msb-popupstyle-countdown strong{
    font-size:clamp(18px,7vw,27px)!important;
    line-height:1!important;
  }

  .msb-popupstyle-countdown small{
    font-size:9.5px!important;
  }

  .msb-popupstyle-grid{
    grid-template-columns:1fr!important;
    gap:11px!important;
  }

  .msb-popupstyle-panel{
    padding:12px!important;
    border-radius:17px!important;
  }

  .msb-popupstyle-panel h3{
    font-size:13px!important;
    margin-bottom:9px!important;
  }

  .msb-popupstyle-detail{
    gap:8px!important;
  }

  .msb-popupstyle-detail div{
    padding:9px 10px!important;
    border-radius:13px!important;
  }

  .msb-popupstyle-detail small{
    font-size:10.5px!important;
  }

  .msb-popupstyle-detail p{
    font-size:11.7px!important;
    line-height:1.45!important;
  }

  .msb-popupstyle-list{
    padding-left:16px!important;
    gap:8px!important;
  }

  .msb-popupstyle-list:before{
    left:5px!important;
    width:2px!important;
  }

  .msb-popupstyle-list article{
    padding:9px 10px!important;
    border-radius:13px!important;
  }

  .msb-popupstyle-list article:before{
    left:-16px!important;
    top:14px!important;
    width:9px!important;
    height:9px!important;
    box-shadow:0 0 0 4px rgba(243,196,90,.12)!important;
  }

  .msb-popupstyle-list time{
    font-size:10.8px!important;
    margin-bottom:3px!important;
  }

  .msb-popupstyle-list strong{
    font-size:12.2px!important;
    line-height:1.28!important;
  }

  .msb-popupstyle-list p{
    font-size:11.2px!important;
    line-height:1.45!important;
  }

  .msb-popupstyle-sponsor{
    margin-top:11px!important;
    padding:11px!important;
    border-radius:16px!important;
  }

  .msb-popupstyle-sponsor strong{
    font-size:12.8px!important;
  }

  .msb-popupstyle-sponsor p{
    font-size:11.4px!important;
  }

  .msb-popupstyle-sponsor a{
    width:100%!important;
    min-height:39px!important;
    padding:9px 11px!important;
    font-size:11.7px!important;
  }

  .msb-popupstyle-formbox{
    margin-top:12px!important;
    grid-template-columns:1fr!important;
    gap:11px!important;
    padding:12px!important;
    border-radius:18px!important;
  }

  .msb-popupstyle-formbadge{
    font-size:10.5px!important;
    padding:6px 10px!important;
    margin-bottom:8px!important;
  }

  .msb-popupstyle-formcopy h3{
    font-size:clamp(1.18rem,5.6vw,1.48rem)!important;
    line-height:1.16!important;
  }

  .msb-popupstyle-formcopy p{
    font-size:11.8px!important;
    line-height:1.55!important;
    margin-bottom:8px!important;
  }

  .msb-popupstyle-formactions{
    margin:11px 0 8px!important;
  }

  .msb-popupstyle-formbtn{
    width:100%!important;
    min-height:40px!important;
    padding:10px 12px!important;
    font-size:11.8px!important;
  }

  .msb-popupstyle-formcopy small{
    font-size:10.8px!important;
  }

  .msb-popupstyle-qrbox{
    padding:11px!important;
    border-radius:16px!important;
  }

  .msb-popupstyle-qrimage{
    width:min(100%,210px)!important;
    padding:8px!important;
    border-radius:15px!important;
  }

  .msb-popupstyle-qrbox p{
    font-size:11px!important;
    line-height:1.45!important;
  }

  .msb-popupstyle-mapwrap{
    margin-top:12px!important;
    padding:12px!important;
    border-radius:18px!important;
  }

  .msb-popupstyle-maphead{
    margin-bottom:11px!important;
  }

  .msb-popupstyle-maphead span{
    font-size:10.5px!important;
    padding:6px 10px!important;
  }

  .msb-popupstyle-maphead h3{
    font-size:clamp(1.12rem,5.5vw,1.45rem)!important;
    line-height:1.16!important;
  }

  .msb-popupstyle-maphead p{
    font-size:11.8px!important;
  }

  .msb-popupstyle-mapgrid{
    grid-template-columns:1fr!important;
    gap:11px!important;
  }

  .msb-popupstyle-mapcard{
    border-radius:17px!important;
  }

  .msb-popupstyle-mapinfo{
    padding:12px 12px 9px!important;
  }

  .msb-popupstyle-mapbadge{
    font-size:10px!important;
    padding:5px 9px!important;
  }

  .msb-popupstyle-mapinfo h4{
    font-size:13.5px!important;
    line-height:1.25!important;
  }

  .msb-popupstyle-mapinfo p{
    font-size:11.3px!important;
  }

  .msb-popupstyle-mapinfo a{
    width:100%!important;
    min-height:38px!important;
    font-size:11.2px!important;
  }

  .msb-popupstyle-mapframe{
    padding:0 10px 10px!important;
  }

  .msb-popupstyle-mapframe iframe{
    width:100%!important;
    min-height:210px!important;
    height:220px!important;
    border-radius:13px!important;
  }

  .msb-popupstyle-footer{
    font-size:12.5px!important;
    line-height:1.4!important;
    padding:8px 4px 0!important;
  }
}

@media(max-width:380px){
  .msb-popupstyle-timeline .container{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .msb-popupstyle-card{
    padding:10px!important;
    border-radius:18px!important;
  }

  .msb-popupstyle-countdown{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  .msb-popupstyle-countdown span{
    min-height:55px!important;
  }

  .msb-popupstyle-qrimage{
    width:min(100%,190px)!important;
  }

  .msb-popupstyle-mapframe iframe{
    min-height:190px!important;
    height:200px!important;
  }
}


/* =========================================================
   MSB V50 - Background foto pada bagian atas Timeline + smoke overlay
   Fokus: area atas Timeline memakai foto banner dengan lapisan warna tipis
   agar teks tetap terbaca namun background tetap terlihat.
   ========================================================= */
.msb-popupstyle-card{
  overflow:hidden!important;
}
.msb-popupstyle-header{
  position:relative!important;
  overflow:hidden!important;
  padding:18px!important;
  border:1px solid rgba(243,196,90,.20)!important;
  border-radius:24px!important;
  background-image:
    linear-gradient(135deg, rgba(4,22,15,.60), rgba(4,22,15,.42) 44%, rgba(4,22,15,.60)),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.14), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.10), transparent 28%),
    radial-gradient(circle at 55% 72%, rgba(255,255,255,.06), transparent 26%),
    url("backgrounds/msb-timeline-header-2026.jpg")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 16px 40px rgba(0,0,0,.18)!important;
}
.msb-popupstyle-header:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.12), transparent 20%),
    radial-gradient(circle at 78% 28%, rgba(255,255,255,.10), transparent 18%),
    radial-gradient(circle at 50% 62%, rgba(255,255,255,.07), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 45%, rgba(0,0,0,.05));
  opacity:.72!important;
}
.msb-popupstyle-header > *{
  position:relative!important;
  z-index:1!important;
}
.msb-popupstyle-header h2{
  text-shadow:0 2px 14px rgba(0,0,0,.38)!important;
}
.msb-popupstyle-header p{
  background:linear-gradient(90deg, rgba(4,22,15,.40), rgba(4,22,15,.18))!important;
  border-left:3px solid rgba(243,196,90,.95)!important;
  padding:10px 12px!important;
  border-radius:0 14px 14px 0!important;
  backdrop-filter:blur(1.5px)!important;
  -webkit-backdrop-filter:blur(1.5px)!important;
  text-shadow:0 1px 7px rgba(0,0,0,.30)!important;
}
@media(max-width:768px){
  .msb-popupstyle-header{
    padding:14px!important;
    border-radius:18px!important;
    background-position:center center!important;
  }
  .msb-popupstyle-header p{
    padding:9px 10px!important;
    border-radius:0 12px 12px 0!important;
  }
}
@media(max-width:380px){
  .msb-popupstyle-header{
    padding:12px!important;
    border-radius:16px!important;
  }
  .msb-popupstyle-header p{
    padding:8px 9px!important;
  }
}


/* =========================================================
   MSB V51 - CPanel Final Patch
   Perbaikan: QR form muncul kembali, menu Timeline dipisah rapi,
   header fixed tidak menutup konten mobile/tablet, dan background
   header timeline tetap terbaca.
   ========================================================= */
.ico-calendar:before{
  content:""!important;
  width:14px!important;
  height:14px!important;
  display:block!important;
  border-radius:4px!important;
  background:
    linear-gradient(#fff 0 0) 3px 4px/8px 1.6px no-repeat,
    linear-gradient(#fff 0 0) 3px 7px/8px 1.6px no-repeat,
    linear-gradient(#fff 0 0) 3px 10px/6px 1.6px no-repeat,
    linear-gradient(#fff 0 0);
  opacity:.96!important;
}
.msb-popupstyle-formbox{
  position:relative!important;
}
.msb-popupstyle-formcopy small{
  display:block!important;
  color:#ffe9ac!important;
  line-height:1.55!important;
}
.msb-popupstyle-qrimage{
  text-decoration:none!important;
}
.msb-popupstyle-header{
  isolation:isolate!important;
}
.msb-popupstyle-header:before{
  z-index:0!important;
}
@media(min-width:1025px){
  body{padding-top:150px!important;}
  .hero,#home,[id]{scroll-margin-top:156px!important;}
}
@media(min-width:768px) and (max-width:1024px){
  body{padding-top:92px!important;}
  .hero,#home,[id]{scroll-margin-top:102px!important;}
}
@media(max-width:767px){
  body{padding-top:118px!important;}
  .hero,#home,[id]{scroll-margin-top:128px!important;}
  .msb-popupstyle-formbox{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:11px!important;
    margin-top:12px!important;
  }
  .msb-popupstyle-formcopy small{
    font-size:10.8px!important;
  }
}
@media(max-width:420px){
  body{padding-top:108px!important;}
  .hero,#home,[id]{scroll-margin-top:118px!important;}
}