/* ==========================================================
   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;}
}