/* =========================================================
   DASHBOARD.CSS - PART 1/4
   BASE LAYOUT, SIDEBAR, TOPBAR, USER MENU, CONTENT CARD
   ========================================================= */


/* =========================================================
   DASHBOARD INDEPENDENT FOUNDATION V1
   =========================================================
   TUJUAN:
   - Dashboard tidak lagi bergantung pada css/login.css.
   - Reset dasar, layout root, switch, dan footer dimiliki
     langsung oleh dashboard.css.
   - Seluruh rule penting dipagari oleh .dashboard-page agar
     perubahan stylesheet halaman lain tidak bocor ke dashboard.
   - Tidak mengubah Auth, Firestore, audit, i18n, theme logic,
     routing, drawer controller, atau fitur dashboard.
   ========================================================= */

/* =========================================================
   RESET & ROOT LAYOUT KHUSUS DASHBOARD
   ========================================================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  min-height:100%;
}

html{
  background:var(--bg, #f6f8fb);
  overflow-x:clip;
  scroll-behavior:smooth;
}

@supports not (overflow-x:clip){
  html{
    overflow-x:hidden;
  }
}

body.dashboard-page{
  margin:0;
  width:100%;
  min-height:100svh;
  font-family:
    "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  background:var(--bg, #f6f8fb);
  color:var(--ink, #17384c);
  overflow-x:clip;
  overscroll-behavior-x:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}

@supports not (overflow-x:clip){
  body.dashboard-page{
    overflow-x:hidden;
  }
}

.dashboard-page a{
  color:inherit;
}

.dashboard-page button,
.dashboard-page input,
.dashboard-page select,
.dashboard-page textarea{
  font:inherit;
}

.dashboard-page .wrap{
  position:relative;
  z-index:2;
  width:100%;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

.dashboard-page .overlay{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* =========================================================
   SWITCH BASE - MILIK DASHBOARD
   ========================================================= */
.dashboard-page .switch{
  appearance:none;
  -webkit-appearance:none;
  height:var(--switch-h, 44px);
  margin:0;
  padding:0 var(--switch-pad, 6px);
  border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radiusPill, 999px);
  background:var(--surface, #ffffff);
  color:var(--ink, #17384c);
  box-shadow:var(--neu-out-sm);
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  flex:0 0 auto;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.dashboard-page .switch:hover{
  transform:translateY(-1px);
}

.dashboard-page .switch:active{
  transform:translateY(0);
  box-shadow:var(--neu-in-sm);
}

.dashboard-page .switch:focus-visible{
  outline:3px solid var(--focus, rgba(15,159,141,.30));
  outline-offset:3px;
}

.dashboard-page .switchTrack{
  position:relative;
  height:calc(var(--switch-h, 44px) - (var(--switch-pad, 6px) * 2));
  min-width:118px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radiusPill, 999px);
  background:var(--surface, #ffffff);
  box-shadow:var(--neu-in-sm);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  overflow:hidden;
}

.dashboard-page .switchLabel{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(91,107,132,.78);
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:
    color .18s ease,
    opacity .18s ease;
}

.dashboard-page .switchLabel i{
  color:currentColor;
  font-size:13px;
  line-height:1;
  opacity:.95;
}

.dashboard-page .switchThumb{
  position:absolute;
  top:50%;
  left:6px;
  z-index:0;
  width:50%;
  height:calc(var(--switch-h, 44px) - (var(--switch-pad, 6px) * 2) - 10px);
  border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radiusPill, 999px);
  background:var(--surface2, #f4fbf9);
  box-shadow:var(--neu-out-sm);
  transform:translateY(-50%);
  transition:left .22s cubic-bezier(.2,.8,.2,1);
}

.dashboard-page .switch[data-on="1"] .switchThumb{
  left:calc(50% - 6px);
}

.dashboard-page .switch[data-on="0"] .switchLabel[data-side="left"],
.dashboard-page .switch[data-on="1"] .switchLabel[data-side="right"]{
  color:var(--ink, #17384c);
  opacity:1;
}

.dashboard-page .switch[data-on="0"] .switchLabel[data-side="right"],
.dashboard-page .switch[data-on="1"] .switchLabel[data-side="left"]{
  opacity:.62;
}

.dashboard-page .switch.switch--lang .switchTrack{
  min-width:108px;
}

.dashboard-page .switch.switch--theme .switchTrack{
  min-width:92px;
}

.dashboard-page .switch.switch--theme .switchLabel{
  gap:0;
  letter-spacing:0;
}

html[data-theme="dark"] .dashboard-page .switch{
  border-color:rgba(255,255,255,.06);
}

html[data-theme="dark"] .dashboard-page .switchTrack{
  border-color:rgba(255,255,255,.06);
}

html[data-theme="dark"] .dashboard-page .switchLabel{
  color:rgba(169,183,214,.74);
}

html[data-theme="dark"] .dashboard-page .switchThumb{
  border-color:rgba(255,255,255,.06);
  background:var(--surface2, #102b30);
}

/* =========================================================
   FOOTER BASE - MILIK DASHBOARD
   ========================================================= */
.dashboard-page footer.siteFooter{
  position:relative;
  z-index:2;
  width:100%;
  margin-top:auto;
  padding:14px 34px;
  background:rgba(255,255,255,.35);
  border-top:1px solid rgba(255,255,255,.45);
  color:rgba(15,23,42,.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    0 -8px 28px rgba(0,0,0,.05);
  font-size:12.5px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
}

.dashboard-page footer.siteFooter .footerInner{
  width:100%;
  max-width:1480px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.dashboard-page footer.siteFooter .footerLeft{
  color:inherit;
  text-align:left;
  line-height:1.6;
}

.dashboard-page footer.siteFooter .footerRight{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.dashboard-page footer.siteFooter .footerRight a{
  color:rgba(15,23,42,.68);
  text-decoration:none;
  font-weight:600;
  transition:
    color .18s ease,
    transform .18s ease,
    opacity .18s ease;
}

.dashboard-page footer.siteFooter .footerRight a:hover{
  color:#0b1220;
  opacity:1;
  transform:translateY(-1px);
}

.dashboard-page footer.siteFooter .footerRight .sep{
  opacity:.45;
}

html[data-theme="dark"] .dashboard-page footer.siteFooter{
  background:rgba(15,23,42,.45);
  border-top-color:rgba(255,255,255,.08);
  color:rgba(234,241,255,.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 -10px 34px rgba(0,0,0,.35);
}

html[data-theme="dark"] .dashboard-page footer.siteFooter .footerRight a{
  color:rgba(234,241,255,.74);
}

/* =========================================================
   MOBILE FOOTER OWNERSHIP LOCK
   =========================================================
   Specificity dibuat lebih tinggi daripada footer.siteFooter
   generik sehingga style halaman lain tidak dapat mengambil alih
   posisi bottom navigation dashboard jika stylesheet tambahan
   kelak tidak sengaja dimuat.
   ========================================================= */
@media (max-width:740px){
  .dashboard-page footer.siteFooter{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:88 !important;
  }

  .dashboard-page footer.siteFooter .dashboardMobileFooterNav{
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
}


/* =========================================================
   PAGE BASE
========================================================= */

body{
  visibility: hidden;
}

.dashboard-page{
  background:
    radial-gradient(circle at 50% 100%, rgba(0,172,170,.05), transparent 34%),
    var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

.dashboard-page .wrap{
  background: transparent;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.dashboardLayout{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 22px 30px 0;
  display: grid;
  grid-template-columns: 274px minmax(0, 1fr);
  gap: 24px;
  flex: 1;
  align-items: start;
}

/* =========================================================
   SIDEBAR
========================================================= */

.dashboardSidebar{
  position: sticky;
  top: 16px;
  align-self: start;
  justify-self: start;
  width: 100%;
  height: fit-content;
  min-height: auto;
  margin: 0;
  padding: 16px 18px 40px 18px;
  border-radius: 0 22px 22px 0;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.35);
  border-left: none;
  box-shadow: var(--neu-out);
  overflow: hidden;
}

.dashboardSidebar::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(0,172,170,.10), transparent 24%),
    radial-gradient(circle at bottom left, rgba(0,172,170,.05), transparent 22%);
  pointer-events: none;
}

html[data-theme="dark"] .dashboardSidebar{
  border-color: rgba(255,255,255,.06);
}

.dashboardSidebarTop{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* =========================================================
   SIDEBAR BRAND
========================================================= */

.dashboardBrand{
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  padding: 8px 6px 4px;
}

.dashboardBrandLogo{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: contain;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
  flex: 0 0 auto;
  padding: 8px;
}

html[data-theme="dark"] .dashboardBrandLogo{
  border-color: rgba(255,255,255,.06);
}

.dashboardBrandText{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboardBrandText strong{
  color: var(--blue);
  font-size: 21px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.dashboardBrandText span{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
}

/* =========================================================
   SIDEBAR MENU + ACCORDION
========================================================= */

.dashboardMenu{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboardMenuGroup{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dashboardMenuBtn{
  appearance: none;
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(255,255,255,.35);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--neu-out-sm);
  border-radius: 11px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

html[data-theme="dark"] .dashboardMenuBtn{
  border-color: rgba(255,255,255,.06);
}

.dashboardMenuBtn:hover{
  transform: translateY(-2px);
  background: var(--surface2);
  box-shadow: var(--neu-out-sm);
}

.dashboardMenuBtn:active{
  box-shadow: var(--neu-in-sm);
}

.dashboardMenuBtn.is-active{
  background: var(--primaryGrad);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: var(--primaryShadow);
}

.dashboardMenuBtn.is-active i,
.dashboardMenuBtn.is-active span{
  color: #FFFFFF;
}

.dashboardMenuBtn i{
  width: 18px;
  text-align: center;
  flex: 0 0 auto;
  font-size: 15px;
}

.dashboardMenuBtnLeft{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.dashboardMenuToggle{
  justify-content: space-between;
}

.dashboardMenuChevron{
  width: auto !important;
  flex: 0 0 auto;
  font-size: 13px !important;
  opacity: .72;
  transition: transform .2s ease, opacity .2s ease;
}

.dashboardMenuGroup.is-open .dashboardMenuChevron{
  transform: rotate(180deg);
  opacity: 1;
}

.dashboardMenuGroup.is-open > .dashboardMenuToggle{
  background: var(--surface2);
  border-color: rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
}

html[data-theme="dark"] .dashboardMenuGroup.is-open > .dashboardMenuToggle{
  border-color: rgba(255,255,255,.06);
}

/* =========================================================
   SIDEBAR SUBMENU
========================================================= */

.dashboardSubmenu{
  display: none;
  position: relative;
  margin-left: 16px;
  padding-left: 18px;
  gap: 4px;
}

.dashboardMenuGroup.is-open .dashboardSubmenu{
  display: flex;
  flex-direction: column;
}

.dashboardSubmenu::before{
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 2px;
  width: 1px;
  background: rgba(127,145,179,.28);
}

html[data-theme="dark"] .dashboardSubmenu::before{
  background: rgba(255,255,255,.10);
}

.dashboardSubmenuBtn{
  appearance: none;
  width: 100%;
  min-height: 34px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  cursor: pointer;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.dashboardSubmenuBtn:hover{
  color: var(--ink);
  background: var(--surface2);
  border-color: rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
  transform: translateX(2px);
}

html[data-theme="dark"] .dashboardSubmenuBtn:hover{
  border-color: rgba(255,255,255,.06);
}

.dashboardSubmenuBtn.is-active{
  color: var(--blue);
  background: var(--surface2);
  border-color: rgba(0,172,170,.16);
  box-shadow: var(--neu-in-sm);
}

html[data-theme="dark"] .dashboardSubmenuBtn.is-active{
  border-color: rgba(0,172,170,.22);
}

/* =========================================================
   DESKTOP SIDEBAR LOGOUT BUTTON
========================================================= */

.dashboardSubmenuLogoutBtn{
  margin-top: 6px;
  color: #d64545 !important;
  gap: 9px;
}

.dashboardSubmenuLogoutBtn i{
  width: 15px;
  min-width: 15px;
  text-align: center;
  font-size: 13px;
  color: currentColor !important;
}

.dashboardSubmenuLogoutBtn span{
  color: currentColor !important;
}

.dashboardSubmenuLogoutBtn:hover{
  color: #d64545 !important;
  background: rgba(220,38,38,.08) !important;
  border-color: rgba(220,38,38,.16) !important;
}

html[data-theme="dark"] .dashboardSubmenuLogoutBtn{
  color: #f87171 !important;
}

html[data-theme="dark"] .dashboardSubmenuLogoutBtn:hover{
  color: #f87171 !important;
  background: rgba(248,113,113,.10) !important;
  border-color: rgba(248,113,113,.18) !important;
}

/* =========================================================
   CONTENT AREA
========================================================= */

.dashboardContent{
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 16px;
}

.dashboardPanels{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* =========================================================
   TOPBAR
========================================================= */

.dashboardTopbar{
  width: 100%;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out);
}

html[data-theme="dark"] .dashboardTopbar{
  border-color: rgba(255,255,255,.06);
}

.dashboardTopbarInner{
  width: 100%;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.dashboardTopbarLeft{
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.dashboardPageTitle{
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.dashboardPageSub{
  margin: 0;
  min-height: 26px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
  max-width: 760px;
}

.dashboardTopbarRight{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.topbarControlGroup{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
}

html[data-theme="dark"] .topbarControlGroup{
  border-color: rgba(255,255,255,.06);
}

/* Search sudah tidak dipakai di tampilan final */
.dashboardTopbarRight .searchBtn,
#btnSearch{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   USER DROPDOWN CARD
========================================================= */

.dashboardUserDropdown{
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.dashboardUserCard{
  appearance: none;
  min-width: 290px;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.35);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--neu-out-sm);
  border-radius: 11px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

html[data-theme="dark"] .dashboardUserCard{
  border-color: rgba(255,255,255,.06);
}

.dashboardUserCard:hover{
  transform: translateY(-2px);
  background: var(--surface2);
  box-shadow: var(--neu-out-sm);
}

.dashboardUserCard.is-open{
  background: var(--surface2);
  box-shadow: var(--neu-in-sm);
}

.dashboardUserCardPhotoWrap{
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  align-self: center;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html[data-theme="dark"] .dashboardUserCardPhotoWrap{
  border-color: rgba(255,255,255,.06);
}

.dashboardUserPhotoNav{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dashboardUserCardInfo{
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.dashboardUserNameNav{
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboardUserEmailNav{
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboardUserChevronWrap{
  min-width: 16px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  padding-bottom: 4px;
  color: var(--muted);
  flex-shrink: 0;
}

.dashboardUserChevron{
  font-size: 12px;
  transition: transform .18s ease;
}

.dashboardUserCard.is-open .dashboardUserChevron{
  transform: rotate(180deg);
}

.dashboardUserMenu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out);
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 80;
}

html[data-theme="dark"] .dashboardUserMenu{
  border-color: rgba(255,255,255,.06);
}

.dashboardUserDropdown.is-open .dashboardUserMenu{
  display: flex;
}

.dashboardUserMenuItem{
  appearance: none;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    color .18s ease;
}

.dashboardUserMenuItem:hover{
  background: var(--surface2);
  border-color: rgba(255,255,255,.35);
  transform: translateX(2px);
}

html[data-theme="dark"] .dashboardUserMenuItem:hover{
  border-color: rgba(255,255,255,.06);
}

.dashboardUserMenuItem i{
  width: 16px;
  text-align: center;
  flex: 0 0 auto;
}

.dashboardUserMenuItem.is-danger{
  color: #d64545;
}

/* =========================================================
   PANEL + CONTENT CARD
========================================================= */

.dashboardSection{
  display: none;
  width: 100%;
}

.dashboardSection.is-active{
  display: block;
  width: 100%;
}

.dashboardOverviewGrid{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}

.dashboardSectionInner{
  width: 100%;
}

.dashboardHeroCard,
.dashboardContentCard,
.dashboardTechnologyCard,
.technologyInfoCard{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out);
  border-radius: 22px;
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .18s ease;
}

html[data-theme="dark"] .dashboardHeroCard,
html[data-theme="dark"] .dashboardContentCard,
html[data-theme="dark"] .dashboardTechnologyCard,
html[data-theme="dark"] .technologyInfoCard{
  border-color: rgba(255,255,255,.06);
}

.dashboardSection:not(#section-dashboard) .dashboardContentCard{
  width: 100%;
  min-height: 320px;
}

.dashboardContentCard{
  width: 100%;
  max-width: 100%;
  padding: 30px 28px;
  min-height: 320px;
}

.dashboardSectionHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.dashboardSectionTitle{
  margin: 0;
  color: var(--ink);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.dashboardSectionText{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.95;
  max-width: 920px;
}

/* =========================================================
   TECHNOLOGY SECTION
========================================================= */

.dashboardTechnologySection{
  width: 100%;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}

.dashboardTechnologyCard{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 24px 18px 24px;
  min-height: auto;
}

.dashboardTechnologyCard::before{
  content: "";
  position: absolute;
  top: -90px;
  right: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,172,170,.08), transparent 68%);
  pointer-events: none;
}

.dashboardSectionHeader{
  width: 100%;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

.dashboardSectionHeading{
  width: 100%;
}

.dashboardSectionBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] .dashboardSectionBadge{
  border-color: rgba(255,255,255,.06);
}

.dashboardTechnologySection .dashboardSectionTitle{
  margin-top: 12px;
  margin-bottom: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.dashboardSectionDescription{
  margin: 12px 0 0;
  max-width: 920px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
  position: relative;
  z-index: 1;
}

.dashboardTechnologyGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.technologyInfoCard{
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
  box-shadow: var(--neu-out-sm);
}

.technologyInfoCard:hover{
  transform: translateY(-4px);
  box-shadow: var(--neu-out);
}

.technologyInfoImageWrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8.6;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(0,172,170,.12), transparent 45%),
    var(--surface2);
  border-bottom: 1px solid rgba(255,255,255,.35);
}

html[data-theme="dark"] .technologyInfoImageWrap{
  border-bottom-color: rgba(255,255,255,.06);
}

.technologyInfoImage{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}

.technologyInfoCard:hover .technologyInfoImage{
  transform: scale(1.04);
}

.technologyInfoBody{
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  flex: 1 1 auto;
}

.technologyInfoTag{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-in-sm);
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html[data-theme="dark"] .technologyInfoTag{
  border-color: rgba(255,255,255,.06);
}

.technologyInfoTitle{
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.28;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.technologyInfoText{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

/* =========================================================
   RESPONSIVE - TABLET / DESKTOP KECIL
========================================================= */

@media (max-width: 1240px){
  .dashboardLayout{
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
  }

  .dashboardContent,
  .dashboardTopbarInner{
    max-width: 100%;
  }

  .dashboardOverviewGrid{
    grid-template-columns: 1fr;
  }

  .dashboardTechnologyGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .dashboardContentCard{
    width: 100%;
  }

  .dashboardHeroTitle,
  .dashboardHeroSub{
    max-width: 100%;
  }

  .dashboardTechnologyCard{
    min-height: auto;
  }
}

@media (max-width: 900px) and (min-width: 741px){
  .dashboardLayout{
    grid-template-columns: 1fr;
    padding: 14px 10px 22px;
  }

  .dashboardSidebar{
    position: relative;
    top: 0;
    min-height: auto;
    padding: 16px 14px;
    border-radius: 18px;
    border-left: 1px solid rgba(255,255,255,.35);
  }

  html[data-theme="dark"] .dashboardSidebar{
    border-left-color: rgba(255,255,255,.06);
  }

  .dashboardMenu{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .dashboardTopbar{
    min-height: auto;
    padding: 16px;
    border-radius: 18px;
  }

  .dashboardTopbarInner{
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .dashboardTopbarLeft{
    width: 100%;
  }

  .dashboardTopbarRight{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .dashboardUserDropdown{
    width: 100%;
  }

  .dashboardUserCard{
    width: 100%;
    min-width: 0;
  }

  .dashboardUserMenu{
    width: 100%;
    min-width: 0;
  }

  .dashboardHeroIntro{
    align-items: flex-start;
  }

  .dashboardTechnologyCard{
    padding: 24px 18px 24px;
    min-height: auto;
  }

  .dashboardSectionHeader{
    margin-bottom: 18px;
  }
}


/* =========================================================
   DASHBOARD.CSS - PART 2/4
   HERO CARD, MOBILE HERO NAVBAR, MOBILE INFO CARD
   ========================================================= */

/* =========================================================
   HERO CARD - DESKTOP DEFAULT
========================================================= */

.dashboardHeroCard{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 28px 24px 24px;
  background: #00acaa !important;
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}

.dashboardHeroCard::before{
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%) !important;
  pointer-events: none;
}

.dashboardHeroIntro{
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
  width: 100%;
}

.dashboardHeroProfileMedia{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboardHeroUserPhoto{
  width: 88px;
  height: 88px;
  border-radius: 20px;
  object-fit: cover;
  display: block;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.45) !important;
  box-shadow:
    rgba(0, 0, 0, 0.16) 0px 3px 6px,
    rgba(0, 0, 0, 0.23) 0px 3px 6px !important;
}

.dashboardHeroText{
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.dashboardHeroTitle{
  margin: 0;
  color: #FFFFFF !important;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: none;
}

.dashboardHeroTitleSplit{
  display: block;
}

.dashboardWelcomeGreeting,
.dashboardWelcomeName{
  display: inline;
  color: #FFFFFF !important;
}

.dashboardHeroSub{
  margin: 0;
  color: rgba(255,255,255,.86) !important;
  font-size: 15px;
  line-height: 1.85;
  max-width: 920px;
}

.dashboardHeroMeta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}

.dashboardHeroMetaItem{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

html[data-theme="dark"] .dashboardHeroMetaItem{
  border-color: rgba(255,255,255,.06);
}

.metaDot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--blue);
  flex: 0 0 auto;
  box-shadow: 0 0 0 6px rgba(0,172,170,.10);
}

/* =========================================================
   HERO ACTION BUTTONS - DEFAULT HIDDEN ON DESKTOP
========================================================= */

.dashboardHeroBellBtn,
.dashboardHeroBurgerBtn{
  display: none !important;
}

@media (min-width: 741px){
  .dashboardHeroBellBtn,
  .dashboardHeroBurgerBtn{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   MOBILE HERO NAVBAR
========================================================= */

@media (max-width: 740px){
  .dashboardTopbar{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .dashboardLayout{
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0 8px 20px !important;
  }

  .dashboardContent{
    width: 100%;
    max-width: 100%;
    padding-top: 0 !important;
    gap: 14px !important;
  }

  .dashboardPanels{
    gap: 14px !important;
    padding-top: 0 !important;
  }

  .dashboardOverviewGrid{
    gap: 14px !important;
    padding-top: 0 !important;
    overflow: visible !important;
  }

  .dashboardHeroCard{
    width: calc(100% + 24px) !important;
    max-width: none !important;
    min-height: 120px !important;
    margin-top: -12px !important;
    margin-right: -12px !important;
    margin-left: -12px !important;
    padding: 28px 62px 18px 14px !important;
    box-sizing: border-box !important;
    border-radius: 0 0 24px 24px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow:
      rgba(0, 0, 0, 0.4) 0px 2px 4px,
      rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
      rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
  }

  .dashboardHeroCard::before{
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  .dashboardHeroIntro{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    padding-right: 102px;
    transform: translateX(5px) !important;
  }

  .dashboardHeroProfileMedia{
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .dashboardHeroUserPhoto{
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
    border-radius: 15px !important;
  }

  .dashboardHeroText{
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .dashboardHeroTitle,
  .dashboardHeroTitleSplit{
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    font-size: clamp(15px, 4.35vw, 19px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.018em !important;
    font-weight: 700 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .dashboardWelcomeGreeting{
    display: block !important;
    color: #FFFFFF !important;
    font-size: calc(1em + 4px) !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .dashboardWelcomeName{
    display: block !important;
    max-width: 100% !important;
    color: #FFFFFF !important;
    font-size: calc(.72em + 4px) !important;
    line-height: 1.18 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .dashboardHeroText .dashboardHeroSub,
  .dashboardHeroSub{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .dashboardHeroBellBtn,
  .dashboardHeroBurgerBtn,
  .dashboardHeroCard > .dashboardBurgerBtn{
    appearance: none !important;
    border: 0 !important;
    background: transparent !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 28px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .dashboardHeroBellBtn{
    right: 62px !important;
    z-index: 9 !important;
  }

  .dashboardHeroBurgerBtn,
  .dashboardHeroCard > .dashboardBurgerBtn{
    right: 14px !important;
    z-index: 8 !important;
  }

  .dashboardHeroBellBtn:hover,
  .dashboardHeroBurgerBtn:hover,
  .dashboardHeroCard > .dashboardBurgerBtn:hover{
    color: #FFFFFF !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .dashboardHeroBellBtn i{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    transform: translate(7px, 9px) !important;
  }

  .dashboardHeroBurgerBtn i,
  .dashboardHeroCard > .dashboardBurgerBtn i{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    transform: translate(-3px, 10px) !important;
  }
}

@media (max-width: 380px){
  .dashboardHeroCard{
    width: calc(100% + 24px) !important;
    min-height: 112px !important;
    margin-top: -12px !important;
    margin-right: -12px !important;
    margin-left: -12px !important;
    padding: 26px 56px 16px 12px !important;
    box-sizing: border-box !important;
    border-radius: 0 0 22px 22px !important;
  }

  .dashboardHeroIntro{
    gap: 10px !important;
    transform: translateX(5px) !important;
  }

  .dashboardHeroUserPhoto{
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 14px !important;
  }

  .dashboardHeroTitle,
  .dashboardHeroTitleSplit{
    font-size: clamp(14.5px, 4.25vw, 18px) !important;
  }

  .dashboardWelcomeGreeting{
    font-size: calc(1em + 4px) !important;
    line-height: 1.12 !important;
  }

  .dashboardWelcomeName{
    font-size: calc(.70em + 4px) !important;
    line-height: 1.18 !important;
  }

  .dashboardHeroBellBtn,
  .dashboardHeroBurgerBtn,
  .dashboardHeroCard > .dashboardBurgerBtn{
    top: 26px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 14px !important;
  }

  .dashboardHeroBellBtn{
    right: 58px !important;
  }

  .dashboardHeroBurgerBtn,
  .dashboardHeroCard > .dashboardBurgerBtn{
    right: 16px !important;
  }
}

/* =========================================================
   MOBILE INFO CARD UNDER HERO
========================================================= */

.dashboardMobileInfoCardSection,
.dashboardMobileInfoCard,
.dashboardMobileInfoCardIcon,
.dashboardMobileInfoCardBody,
.dashboardMobileInfoCardImg,
.dashboardMobileInfoCardLabel,
.dashboardMobileInfoCardTitle,
.dashboardMobileInfoCardText,
.dashboardMobileMenuTitle{
  box-sizing: border-box;
}

.dashboardMobileInfoCardSection,
.dashboardMobileMenuTitle{
  display: none;
}

@media (max-width: 740px){
  .dashboardMobileInfoCardSection{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .dashboardMobileInfoCard{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 92px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    background: #FFFFFF !important;
    box-shadow:
      12px 12px 24px rgba(163,177,198,.24),
      -10px -10px 22px rgba(255,255,255,.78),
      inset 1px 1px 0 rgba(255,255,255,.66) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .dashboardMobileInfoCard::before{
    content: "" !important;
    position: absolute !important;
    top: -78px !important;
    right: -76px !important;
    width: 170px !important;
    height: 170px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(0,172,170,.12), transparent 68%) !important;
    pointer-events: none !important;
  }

  html[data-theme="dark"] .dashboardMobileInfoCard{
    background:
      linear-gradient(145deg, rgba(22,31,49,.88), rgba(11,18,32,.96)),
      var(--surface) !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow:
      12px 12px 24px rgba(0,0,0,.30),
      -8px -8px 18px rgba(255,255,255,.025),
      inset 1px 1px 0 rgba(255,255,255,.05) !important;
  }

  .dashboardMobileInfoCardIcon{
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    border-radius: 19px !important;
    color: var(--blue) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .dashboardMobileInfoCardIcon i{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .dashboardMobileInfoCardImg{
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  .dashboardMobileInfoCardBody{
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .dashboardMobileInfoCardLabel{
    display: block !important;
    width: 100% !important;
    color: var(--blue) !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dashboardMobileInfoCardTitle{
    margin: 0 !important;
    width: 100% !important;
    color: var(--ink) !important;
    font-size: 14.5px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: -.018em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dashboardMobileInfoCardText{
    margin: 0 !important;
    width: 100% !important;
    color: var(--muted) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    display: block !important;
    max-height: 31px !important;
    overflow: hidden !important;
  }

  .dashboardMobileMenuTitle{
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 11px 0 -6px !important;
    padding: 0 2px !important;
    color: var(--ink) !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    text-align: left !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
  }

  .dashboardMobileMenuTitle i{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--blue) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    text-align: center !important;
    flex: 0 0 auto !important;
    transform: translateY(0) !important;
  }

  .dashboardMobileMenuTitle span{
    display: inline-block !important;
    min-width: 0 !important;
    color: var(--ink) !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 380px){
  .dashboardMobileInfoCard{
    min-height: 86px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    gap: 11px !important;
  }

  .dashboardMobileInfoCardIcon{
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 17px !important;
  }

  .dashboardMobileInfoCardImg{
    width: 50px !important;
    height: 50px !important;
  }

  .dashboardMobileInfoCardLabel{
    font-size: 10px !important;
  }

  .dashboardMobileInfoCardTitle{
    font-size: 13.5px !important;
  }

  .dashboardMobileInfoCardText{
    font-size: 11px !important;
    line-height: 1.32 !important;
    max-height: 29px !important;
  }

  .dashboardMobileMenuTitle{
    margin: 11px 0 -6px !important;
    padding: 0 1px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  .dashboardMobileMenuTitle i{
    font-size: 14px !important;
  }
}


/* =========================================================
   DASHBOARD.CSS - PART 3/4
   MOBILE DRAWER, DRAWER USER CARD, APP MENU CARDS
   ========================================================= */

/* =========================================================
   MOBILE DRAWER BACKDROP
========================================================= */

.dashboardMobileBackdrop{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(11,18,32,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  cursor: pointer;
}

html[data-theme="dark"] .dashboardMobileBackdrop{
  background: rgba(0,0,0,.55);
}

body.dashboard-drawer-open{
  overflow: hidden;
  touch-action: none;
}

body.dashboard-drawer-open .dashboardMobileBackdrop{
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   MOBILE DRAWER CONTAINER
========================================================= */

.dashboardMobileDrawer{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(420px, 92vw);
  height: 100dvh;
  z-index: 100;
  transform: translate3d(-100%,0,0);
  opacity: 0;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease;
  background: var(--surface);
  border-right: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out);
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}

html[data-theme="dark"] .dashboardMobileDrawer{
  border-right-color: rgba(255,255,255,.06);
}

body.dashboard-drawer-open .dashboardMobileDrawer{
  transform: translate3d(0,0,0);
  opacity: 1;
}

/* =========================================================
   MOBILE DRAWER HEADER
========================================================= */

.dashboardMobileDrawerHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}

.dashboardMobileDrawerBrand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}

.dashboardMobileDrawerLogo{
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 14px;
  object-fit: contain;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
  padding: 7px;
}

html[data-theme="dark"] .dashboardMobileDrawerLogo{
  border-color: rgba(255,255,255,.06);
}

.dashboardMobileDrawerTitle{
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--blue);
  line-height: 1.1;
  font-size: 22px;
}

.dashboardMobileDrawerSub{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 2px;
  font-weight: 500;
}

.dashboardMobileDrawerClose,
.dashboardBurgerBtn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.35);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--neu-out-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  border-radius: 16px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}

html[data-theme="dark"] .dashboardMobileDrawerClose,
html[data-theme="dark"] .dashboardBurgerBtn{
  border-color: rgba(255,255,255,.06);
}

.dashboardMobileDrawerClose:hover,
.dashboardBurgerBtn:hover{
  background: var(--surface2);
  color: var(--blue);
  transform: translateY(-1px);
}

.dashboardMobileDrawerClose:active,
.dashboardBurgerBtn:active{
  transform: translateY(0);
  box-shadow: var(--neu-in-sm);
}

.dashboardBurgerBtn{
  display: none;
  flex: 0 0 auto;
  z-index: 3;
}

/* =========================================================
   MOBILE DRAWER USER CARD
========================================================= */

.dashboardMobileUserPanel,
.dashboardMobileUserCard,
.dashboardMobileDrawerFooter,
.dashboardMobileDrawerLogoutBtn{
  box-sizing: border-box;
}

.dashboardMobileUserPanel{
  display: none;
}

.dashboardMobileUserCard{
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  padding: 10px 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.35);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--neu-out-sm);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  cursor: default;
  user-select: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

html[data-theme="dark"] .dashboardMobileUserCard{
  border-color: rgba(255,255,255,.06);
}

.dashboardMobileUserPhotoWrap{
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

html[data-theme="dark"] .dashboardMobileUserPhotoWrap{
  border-color: rgba(255,255,255,.06);
}

.dashboardMobileUserPhoto{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dashboardMobileUserInfo{
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.dashboardMobileUserName{
  display: block;
  max-width: 100%;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboardMobileUserEmail{
  display: block;
  max-width: 100%;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboardMobileUserChevron,
.dashboardMobileUserMenu,
.dashboardMobileUserActions,
.dashboardMobileUserAction{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   MOBILE DRAWER QUICK TOGGLES
========================================================= */

.dashboardMobileDrawerTopToggles{
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
}

.dashboardMobileDrawerTopToggles .switch{
  flex: 1 1 0;
  min-width: 0;
}

.dashboardMobileDrawerTopToggles .switchTrack{
  width: 100%;
  min-width: 0 !important;
}

/* =========================================================
   MOBILE DRAWER NAVIGATION
========================================================= */

.dashboardMobileDrawerNav{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.dashboardMobileDrawerItem{
  border: 1px solid rgba(255,255,255,.35);
  background: var(--surface);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--neu-out-sm);
}

html[data-theme="dark"] .dashboardMobileDrawerItem{
  border-color: rgba(255,255,255,.06);
}

.dashboardMobileDrawerBtn{
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
}

.dashboardMobileDrawerBtnLeft{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.005em;
  min-width: 0;
}

.dashboardMobileDrawerBtnLeft i{
  width: 20px;
  text-align: center;
  flex: 0 0 auto;
}

.dashboardMobileDrawerChevron{
  color: rgba(91,107,132,.75);
  font-size: 18px;
  transition: transform .16s ease;
  flex: 0 0 auto;
}

html[data-theme="dark"] .dashboardMobileDrawerChevron{
  color: rgba(169,183,214,.70);
}

.dashboardMobileDrawerItem.is-open .dashboardMobileDrawerChevron{
  transform: rotate(180deg);
}

.dashboardMobileDrawerItem.is-link .dashboardMobileDrawerChevron{
  transform: none !important;
}

.dashboardMobileDrawerSubmenu{
  display: none;
  padding: 0 12px 12px;
  gap: 10px;
}

.dashboardMobileDrawerItem.is-open .dashboardMobileDrawerSubmenu{
  display: grid;
  grid-template-columns: 1fr;
}

.dashboardMobileDrawerSubmenu button{
  appearance: none;
  width: 100%;
  border-radius: 16px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.35);
  background: var(--surface2);
  color: var(--ink);
  box-shadow: var(--neu-in-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

html[data-theme="dark"] .dashboardMobileDrawerSubmenu button{
  border-color: rgba(255,255,255,.06);
}

.dashboardMobileDrawerSubmenu small{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}

/* =========================================================
   MOBILE DRAWER LOGOUT FOOTER
========================================================= */

.dashboardMobileDrawerFooter{
  display: none;
}

.dashboardMobileDrawerLogoutBtn{
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radiusPill, 999px);
  background: var(--primaryGrad);
  color: #FFFFFF;
  box-shadow: var(--primaryShadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.dashboardMobileDrawerLogoutBtn i,
.dashboardMobileDrawerLogoutBtn span{
  color: #FFFFFF !important;
}

.dashboardMobileDrawerLogoutBtn i{
  font-size: 16px;
  line-height: 1;
}

.dashboardMobileDrawerLogoutBtn:hover{
  transform: translateY(-1px);
  box-shadow: var(--primaryShadow);
}

.dashboardMobileDrawerLogoutBtn:active{
  transform: translateY(0);
  box-shadow:
    inset 7px 7px 14px rgba(0,0,0,.14),
    inset -7px -7px 14px rgba(255,255,255,.20),
    0 8px 18px rgba(0,172,170,.18);
}

.dashboardMobileDrawerLogoutBtn:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* =========================================================
   MOBILE DRAWER RESPONSIVE
========================================================= */

@media (max-width: 740px){
  .dashboardSidebar{
    display: none !important;
  }

  .dashboardMobileDrawer{
    inset: 0;
    width: 100dvw;
    max-width: 100dvw;
    height: 100dvh;
    border-radius: 0;
    border-right: 0;
    box-shadow: none;
    padding:
      max(16px, env(safe-area-inset-top))
      16px
      max(18px, env(safe-area-inset-bottom))
      16px;
    display: flex !important;
    flex-direction: column !important;
  }

  .dashboardMobileDrawerHeader{
    flex: 0 0 auto;
  }

  .dashboardMobileUserPanel{
    order: 1;
    display: block !important;
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    margin: 0;
  }

  .dashboardMobileDrawerTopToggles{
    order: 2;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 2px;
  }

  .dashboardMobileDrawerTopToggles .switch{
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }

  .dashboardMobileDrawerTopToggles .switchTrack{
    width: 100%;
    min-width: 0 !important;
    flex: 1 1 auto;
  }

  .dashboardMobileDrawerNav{
    order: 3;
    flex: 0 0 auto;
    margin-top: 0;
  }

  .dashboardMobileDrawerFooter{
    order: 4;
    display: block !important;
    width: 100%;
    min-width: 0;
    margin-top: auto;
    padding-top: 14px;
    padding-bottom: 2px;
    flex: 0 0 auto;
  }

  .dashboardMobileUserCard{
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 22px;
    gap: 12px;
  }

  .dashboardMobileUserPhotoWrap{
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    border-radius: 15px;
  }

  .dashboardMobileUserName{
    font-size: 14px;
  }

  .dashboardMobileUserEmail{
    font-size: 11.5px;
  }

  .dashboardMobileDrawerLogoutBtn{
    min-height: 52px;
    height: 52px;
    padding: 0 18px;
    border-radius: var(--radiusPill, 999px);
    font-size: 13.5px;
    letter-spacing: .10em;
  }

  .dashboardTopbar .dashboardUserDropdown,
  .dashboardTopbarRight > .dashboardUserDropdown,
  .dashboardTopbarRight .topbarControlGroup{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 380px){
  .dashboardMobileUserCard{
    min-height: 60px;
    padding: 9px 10px;
    border-radius: 20px;
    gap: 10px;
  }

  .dashboardMobileUserPhotoWrap{
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 14px;
  }

  .dashboardMobileUserName{
    font-size: 13px;
  }

  .dashboardMobileUserEmail{
    font-size: 11px;
  }

  .dashboardMobileDrawerLogoutBtn{
    min-height: 50px;
    height: 50px;
    font-size: 13px;
    letter-spacing: .09em;
  }
}

/* =========================================================
   APP MENU SECTION + IMAGE ICONS
========================================================= */

.dashboardAppMenuSection,
.dashboardAppMenuGrid,
.dashboardAppMenuCard,
.dashboardAppMenuIcon,
.dashboardAppMenuImg,
.dashboardAppMenuText{
  box-sizing: border-box !important;
}

.dashboardAppMenuSection{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 24px !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.64), rgba(230,237,247,.86)),
    var(--surface) !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  box-shadow:
    16px 16px 34px rgba(110,124,145,.18),
    -12px -12px 28px rgba(255,255,255,.80),
    inset 1px 1px 0 rgba(255,255,255,.72) !important;
  overflow: hidden !important;
  position: relative !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.dashboardAppMenuSection::before{
  content: "";
  position: absolute;
  top: -118px;
  right: -108px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,172,170,.14), transparent 68%) !important;
  pointer-events: none;
}

.dashboardAppMenuSection::after{
  content: "";
  position: absolute;
  left: -90px;
  bottom: -95px;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(195,218,62,.10), transparent 70%);
  pointer-events: none;
}

html[data-theme="dark"] .dashboardAppMenuSection{
  background:
    linear-gradient(145deg, rgba(22,31,49,.84), rgba(11,18,32,.92)),
    var(--surface) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow:
    16px 16px 34px rgba(0,0,0,.28),
    -10px -10px 24px rgba(255,255,255,.03),
    inset 1px 1px 0 rgba(255,255,255,.06) !important;
}

.dashboardAppMenuGrid{
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.dashboardAppMenuCard{
  appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 132px !important;
  padding: 18px 12px 16px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  background: #FFFFFF !important;
  color: var(--ink) !important;
  box-shadow:
    rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
    rgba(255, 255, 255, 0.8) -6px -2px 16px 0px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 13px !important;
  text-align: center !important;
  cursor: pointer !important;
  transform: translateY(0);
  -webkit-tap-highlight-color: transparent !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease !important;
}

html[data-theme="dark"] .dashboardAppMenuCard{
  border-color: rgba(255,255,255,.06) !important;
  background:
    linear-gradient(145deg, rgba(28,39,60,.88), rgba(15,23,42,.92)) !important;
}

.dashboardAppMenuCard:hover{
  background: #FFFFFF !important;
  border-color: rgba(0,172,170,.16) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px !important;
}

.dashboardAppMenuCard:active{
  transform: translateY(0) scale(.985) !important;
  box-shadow:
    rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px !important;
}

.dashboardAppMenuIcon{
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  border-radius: 22px !important;
  color: var(--blue) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

.dashboardAppMenuIcon::before,
.dashboardAppMenuIcon::after{
  display: none !important;
}

.dashboardAppMenuIcon i{
  display: none !important;
}

.dashboardAppMenuImg{
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

.dashboardAppMenuText{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-size: 13.6px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================================
   APP MENU RESPONSIVE
========================================================= */

@media (max-width: 1240px){
  .dashboardAppMenuGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 740px){
  .dashboardOverviewGrid{
    gap: 16px !important;
  }

  .dashboardAppMenuSection{
    padding: 16px !important;
    margin-top: -3px !important;
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.62), rgba(230,238,249,.88)),
      var(--surface) !important;
  }

  .dashboardAppMenuSection::before{
    width: 170px !important;
    height: 170px !important;
    top: -78px !important;
    right: -78px !important;
  }

  .dashboardAppMenuGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .dashboardAppMenuCard{
    min-height: 116px !important;
    padding: 14px 8px 12px !important;
    border-radius: 20px !important;
    gap: 10px !important;
  }

  .dashboardAppMenuIcon{
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    border-radius: 20px !important;
  }

  .dashboardAppMenuImg{
    width: 60px !important;
    height: 60px !important;
  }

  .dashboardAppMenuText{
    font-size: 13px !important;
    line-height: 1.18 !important;
  }
}

@media (max-width: 380px){
  .dashboardAppMenuSection{
    padding: 13px !important;
    border-radius: 20px !important;
  }

  .dashboardAppMenuGrid{
    gap: 11px !important;
  }

  .dashboardAppMenuCard{
    min-height: 104px !important;
    padding: 12px 7px 10px !important;
    border-radius: 18px !important;
    gap: 9px !important;
  }

  .dashboardAppMenuIcon{
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    border-radius: 18px !important;
  }

  .dashboardAppMenuImg{
    width: 54px !important;
    height: 54px !important;
  }

  .dashboardAppMenuText{
    font-size: 12.4px !important;
  }
}



/* =========================================================
   DASHBOARD.CSS - PART 4/4
   MOBILE FOOTER NAVIGATION + FINAL RESPONSIVE
   ========================================================= */

/* =========================================================
   MOBILE FOOTER BASE
========================================================= */

.dashboardMobileFooterNav,
.dashboardMobileFooterBtn{
  box-sizing: border-box;
}

.dashboardMobileFooterNav{
  display: none;
}

.dashboardMobileFooterBtn{
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   MOBILE FOOTER BOTTOM NAVIGATION
========================================================= */

@media (max-width: 740px){
  .dashboard-page{
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .dashboard-page .wrap{
    padding-bottom: 0 !important;
  }

  .siteFooter{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 88 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 10px max(8px, env(safe-area-inset-bottom)) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  .siteFooter .footerInner,
  .siteFooter .footerLeft,
  .siteFooter .footerRight{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .dashboardMobileFooterNav{
    pointer-events: auto !important;
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    min-height: 68px !important;
    height: 68px !important;
    margin: 0 auto !important;
    padding: 8px !important;
    border-radius: 24px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,.52) !important;
    box-shadow:
      12px 12px 24px rgba(163,177,198,.30),
      -10px -10px 22px rgba(255,255,255,.84),
      inset 1px 1px 0 rgba(255,255,255,.62) !important;
    overflow: hidden !important;
  }

  html[data-theme="dark"] .dashboardMobileFooterNav{
    background: var(--surface) !important;
    border-color: rgba(255,255,255,.06) !important;
    box-shadow: var(--neu-out-sm) !important;
  }

  .dashboardMobileFooterBtn{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 7px 4px 6px !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--muted) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    text-align: center !important;
    line-height: 1 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition:
      transform .16s ease,
      background .16s ease,
      box-shadow .16s ease,
      border-color .16s ease,
      color .16s ease !important;
  }

  .dashboardMobileFooterBtn i{
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: currentColor !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    filter: none !important;
  }

  .dashboardMobileFooterBtn span{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: currentColor !important;
    font-size: 10.5px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: -.015em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dashboardMobileFooterBtn:not(.is-active):hover,
  .dashboardMobileFooterBtn:not(.is-active):focus-visible{
    color: var(--blue) !important;
    background: var(--surface2) !important;
    border-color: rgba(255,255,255,.42) !important;
    box-shadow: var(--neu-in-sm) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
  }

  html[data-theme="dark"] .dashboardMobileFooterBtn:not(.is-active):hover,
  html[data-theme="dark"] .dashboardMobileFooterBtn:not(.is-active):focus-visible{
    border-color: rgba(255,255,255,.06) !important;
  }

  .dashboardMobileFooterBtn.is-active{
    color: #FFFFFF !important;
    background: var(--primaryGrad) !important;
    border-color: transparent !important;
    box-shadow: var(--primaryShadow) !important;
    transform: translateY(-1px) !important;
  }

  .dashboardMobileFooterBtn.is-active i,
  .dashboardMobileFooterBtn.is-active span{
    color: #FFFFFF !important;
  }

  .dashboardMobileFooterBtn:active{
    transform: translateY(0) scale(.98) !important;
    box-shadow: var(--neu-in-sm) !important;
  }

  .dashboardMobileFooterBtn.is-active:active{
    box-shadow:
      inset 7px 7px 14px rgba(0,0,0,.14),
      inset -7px -7px 14px rgba(255,255,255,.20),
      0 8px 18px rgba(0,172,170,.18) !important;
  }
}

/* =========================================================
   MOBILE FOOTER SMALL SCREEN
========================================================= */

@media (max-width: 380px){
  .dashboard-page{
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }

  .siteFooter{
    padding: 0 10px max(7px, env(safe-area-inset-bottom)) !important;
  }

  .dashboardMobileFooterNav{
    min-height: 64px !important;
    height: 64px !important;
    padding: 7px !important;
    border-radius: 22px !important;
    gap: 5px !important;
  }

  .dashboardMobileFooterBtn{
    min-height: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    gap: 3px !important;
  }

  .dashboardMobileFooterBtn i{
    font-size: 18.5px !important;
  }

  .dashboardMobileFooterBtn span{
    font-size: 10px !important;
  }
}

/* =========================================================
   MOBILE CONTENT RESPONSIVE CLEANUP
========================================================= */

@media (max-width: 740px){
  .dashboardSidebar{
    display: none !important;
  }

  .dashboardContentCard,
  .dashboardTechnologyCard,
  .technologyInfoCard{
    border-radius: 16px;
  }

  .dashboardContentCard{
    padding: 22px 16px;
    min-height: 220px;
  }

  .dashboardSectionText{
    font-size: 14px;
  }

  .dashboardTechnologySection{
    margin-top: 18px;
    gap: 16px;
  }

  .dashboardTechnologyCard{
    padding: 20px 14px 20px;
  }

  .dashboardTechnologyGrid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dashboardSectionHeader{
    margin-bottom: 16px;
  }

  .dashboardTechnologySection .dashboardSectionTitle{
    font-size: 20px;
    line-height: 1.3;
  }

  .technologyInfoBody{
    padding: 16px 14px 18px;
    gap: 8px;
  }

  .technologyInfoTitle{
    font-size: 18px;
  }

  .technologyInfoText{
    font-size: 14px;
  }

  .dashboardSubmenu{
    gap: 3px;
  }

  .dashboardSubmenuBtn{
    min-height: 32px;
    padding: 5px 12px;
    font-size: 13px;
    border-radius: 9px;
  }
}

/* =========================================================
   FINAL COLOR ALIGNMENT
========================================================= */

.dashboardSidebar,
.dashboardTopbar,
.dashboardContentCard,
.dashboardTechnologyCard,
.technologyInfoCard,
.dashboardMobileDrawer,
.dashboardMobileDrawerItem,
.dashboardMobileUserCard,
.dashboardUserCard,
.dashboardUserMenu,
.topbarControlGroup{
  background: var(--surface);
  border-color: rgba(255,255,255,.35);
  box-shadow: var(--neu-out);
}

html[data-theme="dark"] .dashboardSidebar,
html[data-theme="dark"] .dashboardTopbar,
html[data-theme="dark"] .dashboardContentCard,
html[data-theme="dark"] .dashboardTechnologyCard,
html[data-theme="dark"] .technologyInfoCard,
html[data-theme="dark"] .dashboardMobileDrawer,
html[data-theme="dark"] .dashboardMobileDrawerItem,
html[data-theme="dark"] .dashboardMobileUserCard,
html[data-theme="dark"] .dashboardUserCard,
html[data-theme="dark"] .dashboardUserMenu,
html[data-theme="dark"] .topbarControlGroup{
  border-color: rgba(255,255,255,.06);
}

.dashboardUserCardPhotoWrap,
.dashboardMobileUserPhotoWrap,
.dashboardMobileDrawerLogo,
.dashboardBrandLogo{
  background: var(--surface2);
  border-color: rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
}

html[data-theme="dark"] .dashboardUserCardPhotoWrap,
html[data-theme="dark"] .dashboardMobileUserPhotoWrap,
html[data-theme="dark"] .dashboardMobileDrawerLogo,
html[data-theme="dark"] .dashboardBrandLogo{
  border-color: rgba(255,255,255,.06);
}

.dashboardPageTitle,
.dashboardHeroTitle,
.dashboardWelcomeGreeting,
.dashboardUserNameNav,
.dashboardMobileUserName,
.dashboardSectionTitle,
.dashboardMobileDrawerTitle{
  color: var(--ink);
}

.dashboardPageSub,
.dashboardHeroSub,
.dashboardWelcomeName,
.dashboardUserEmailNav,
.dashboardMobileUserEmail,
.dashboardSectionText,
.dashboardMobileDrawerSub,
.dashboardMobileFooterBtn,
.dashboardMobileFooterBtn i,
.dashboardMobileFooterBtn span{
  color: var(--muted);
}

.dashboardBrandText strong,
.dashboardMobileDrawerTitle{
  color: var(--blue);
}

.dashboardMobileBackdrop{
  background: rgba(11,18,32,.28);
}

html[data-theme="dark"] .dashboardMobileBackdrop{
  background: rgba(0,0,0,.55);
}

/* =========================================================
   FINAL HERO COLOR PROTECTION
========================================================= */

.dashboardHeroCard{
  background: #00acaa !important;
}

.dashboardHeroCard .dashboardHeroTitle,
.dashboardHeroCard .dashboardWelcomeGreeting,
.dashboardHeroCard .dashboardWelcomeName{
  color: #FFFFFF !important;
}

.dashboardHeroCard .dashboardHeroSub{
  color: rgba(255,255,255,.86) !important;
}

.dashboardHeroCard .dashboardHeroBellBtn,
.dashboardHeroCard .dashboardHeroBurgerBtn,
.dashboardHeroCard > .dashboardBurgerBtn{
  color: #FFFFFF !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   END OF DASHBOARD.CSS
========================================================= */
/* =========================================================
   DASHBOARD.CSS - FINAL INDEX STYLE ALIGNMENT
   =========================================================
   TUJUAN:
   - Menyamakan karakter visual dashboard dengan index.css.
   - Palet utama teal #00acaa, teal gelap #0a8684,
     aksen lime #c3da3e.
   - Background soft, panel putih/glass, shadow ringan.
   - Dark mode memakai nuansa hijau-teal.
   - Tidak mengubah layout, ID, atribut data, route,
     autentikasi, Firestore, bahasa, tema, audit, atau logout.
   ========================================================= */

/* =========================================================
   COLOR TOKENS - SAMA DENGAN INDEX
   ========================================================= */
:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface2:#f7fbfc;
  --surface3:#ffffff;
  --ink:#020617;
  --muted:#64748b;

  --blue:#00acaa;
  --blue2:#0a8684;
  --blue3:#c3da3e;

  --line:rgba(15,23,42,.08);
  --radius:18px;
  --radiusLg:24px;
  --radiusPill:999px;

  --neu-out-1:12px 12px 24px rgba(15,23,42,.08);
  --neu-out-2:-12px -12px 24px rgba(255,255,255,.92);
  --neu-out:var(--neu-out-1), var(--neu-out-2);

  --neu-out-sm-1:8px 8px 16px rgba(15,23,42,.07);
  --neu-out-sm-2:-8px -8px 16px rgba(255,255,255,.95);
  --neu-out-sm:var(--neu-out-sm-1), var(--neu-out-sm-2);

  --neu-in-1:inset 10px 10px 18px rgba(15,23,42,.055);
  --neu-in-2:inset -10px -10px 18px rgba(255,255,255,.92);
  --neu-in:var(--neu-in-1), var(--neu-in-2);

  --neu-in-sm-1:inset 7px 7px 12px rgba(15,23,42,.045);
  --neu-in-sm-2:inset -7px -7px 12px rgba(255,255,255,.92);
  --neu-in-sm:var(--neu-in-sm-1), var(--neu-in-sm-2);

  --primaryGrad:linear-gradient(
    145deg,
    rgba(195,218,62,1) 0%,
    rgba(0,172,170,1) 45%,
    rgba(10,134,132,1) 100%
  );

  --primaryShadow:
    12px 12px 24px rgba(0,172,170,.22),
    -12px -12px 24px rgba(255,255,255,.72);

  --focus:rgba(0,172,170,.26);

  --success:#16a34a;
  --successBg:rgba(22,163,74,.10);
  --successBorder:rgba(22,163,74,.22);

  --danger:#dc2626;
  --dangerBg:rgba(220,38,38,.10);
  --dangerBorder:rgba(220,38,38,.22);

  --warning:#b45309;
  --warningBg:rgba(180,83,9,.10);
  --warningBorder:rgba(180,83,9,.22);

  --switch-h:44px;
  --switch-pad:6px;

  --dashboard-glass:rgba(255,255,255,.86);
  --dashboard-glass-strong:rgba(255,255,255,.94);
  --dashboard-border:rgba(148,163,184,.22);
  --dashboard-soft-teal:#e5f7fb;
  --dashboard-soft-lime:#f3ffe1;
  --dashboard-shadow:
    0 18px 44px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.92);
  --dashboard-shadow-sm:
    0 9px 24px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.92);
}

html[data-theme="dark"]{
  color-scheme:dark;

  --bg:#07181c;
  --surface:#0b2024;
  --surface2:#102b30;
  --surface3:#14343a;
  --ink:#EAFBFF;
  --muted:#A8C6CA;

  --blue:#00d6d2;
  --blue2:#53ebe8;
  --blue3:#c3da3e;
  --line:rgba(255,255,255,.10);

  --neu-out-1:12px 12px 26px rgba(0,0,0,.55);
  --neu-out-2:-12px -12px 26px rgba(255,255,255,.05);
  --neu-out:var(--neu-out-1), var(--neu-out-2);

  --neu-out-sm-1:8px 8px 18px rgba(0,0,0,.50);
  --neu-out-sm-2:-8px -8px 18px rgba(255,255,255,.045);
  --neu-out-sm:var(--neu-out-sm-1), var(--neu-out-sm-2);

  --neu-in-1:inset 10px 10px 18px rgba(0,0,0,.55);
  --neu-in-2:inset -10px -10px 18px rgba(255,255,255,.05);
  --neu-in:var(--neu-in-1), var(--neu-in-2);

  --neu-in-sm-1:inset 7px 7px 12px rgba(0,0,0,.55);
  --neu-in-sm-2:inset -7px -7px 12px rgba(255,255,255,.05);
  --neu-in-sm:var(--neu-in-sm-1), var(--neu-in-sm-2);

  --primaryShadow:
    12px 12px 26px rgba(0,0,0,.45),
    -12px -12px 26px rgba(255,255,255,.055);

  --focus:rgba(0,214,210,.32);

  --dashboard-glass:rgba(11,32,36,.84);
  --dashboard-glass-strong:rgba(11,32,36,.94);
  --dashboard-border:rgba(255,255,255,.08);
  --dashboard-soft-teal:rgba(0,214,210,.10);
  --dashboard-soft-lime:rgba(195,218,62,.08);
  --dashboard-shadow:
    0 22px 50px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);
  --dashboard-shadow-sm:
    0 12px 28px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.055);
}

/* =========================================================
   PAGE BACKGROUND
   ========================================================= */
html,
body,
.dashboard-page,
.dashboard-page .wrap,
.dashboard-page .dashboardLayout,
.dashboard-page .dashboardContent{
  background:transparent !important;
  color:var(--ink) !important;
}

html{
  background:var(--bg) !important;
}

.dashboard-page{
  background:var(--bg) !important;
}

.dashboard-page #bg{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.dashboard-page .overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:1 !important;
  background:
    radial-gradient(circle at top left, #e0f9ff 0, transparent 55%),
    radial-gradient(circle at bottom right, #f3ffe1 0, transparent 55%),
    linear-gradient(180deg, #f5f7fb 0%, #ffffff 100%) !important;
}

html[data-theme="dark"] .dashboard-page .overlay{
  background:
    radial-gradient(880px 520px at 12% 14%, rgba(0,214,210,.15), transparent 64%),
    radial-gradient(760px 480px at 86% 24%, rgba(195,218,62,.10), transparent 70%),
    radial-gradient(860px 560px at 52% 94%, rgba(0,0,0,.44), transparent 70%),
    linear-gradient(180deg, #07181c 0%, #0b2024 58%, #07181c 100%) !important;
}

.dashboard-page .wrap{
  position:relative !important;
  z-index:2 !important;
}

/* =========================================================
   SHARED GLASS SURFACES
   ========================================================= */
.dashboardSidebar,
.dashboardTopbar,
.dashboardContentCard,
.dashboardTechnologyCard,
.technologyInfoCard,
.dashboardUserCard,
.dashboardUserMenu,
.topbarControlGroup,
.dashboardMobileDrawer,
.dashboardMobileDrawerItem,
.dashboardMobileUserCard{
  background:var(--dashboard-glass) !important;
  border-color:var(--dashboard-border) !important;
  box-shadow:var(--dashboard-shadow) !important;
  backdrop-filter:blur(16px) saturate(1.10) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.10) !important;
}

.dashboardMenuBtn,
.dashboardSubmenuBtn,
.dashboardUserMenuItem,
.dashboardMobileDrawerSubmenu button,
.dashboardMobileDrawerClose,
.dashboardBurgerBtn{
  transition:
    transform .18s ease,
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.dashboardSidebar{
  background:
    radial-gradient(circle at top left, rgba(0,172,170,.10), transparent 34%),
    radial-gradient(circle at bottom left, rgba(195,218,62,.09), transparent 32%),
    var(--dashboard-glass) !important;
  border-right:1px solid var(--dashboard-border) !important;
}

html[data-theme="dark"] .dashboardSidebar{
  background:
    radial-gradient(circle at top left, rgba(0,214,210,.12), transparent 34%),
    radial-gradient(circle at bottom left, rgba(195,218,62,.07), transparent 32%),
    var(--dashboard-glass) !important;
}

.dashboardSidebar::before{
  background:
    radial-gradient(circle at top left, rgba(0,172,170,.12), transparent 25%),
    radial-gradient(circle at bottom left, rgba(195,218,62,.08), transparent 24%) !important;
}

.dashboardBrandLogo,
.dashboardMobileDrawerLogo{
  background:rgba(255,255,255,.88) !important;
  border-color:rgba(0,172,170,.16) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

html[data-theme="dark"] .dashboardBrandLogo,
html[data-theme="dark"] .dashboardMobileDrawerLogo{
  background:rgba(16,43,48,.92) !important;
  border-color:rgba(0,214,210,.18) !important;
}

.dashboardBrandText strong,
.dashboardMobileDrawerTitle{
  color:#00acaa !important;
}

html[data-theme="dark"] .dashboardBrandText strong,
html[data-theme="dark"] .dashboardMobileDrawerTitle{
  color:#53ebe8 !important;
}

.dashboardBrandText span,
.dashboardMobileDrawerSub{
  color:var(--muted) !important;
}

/* Sidebar button normal */
.dashboardMenuBtn{
  background:rgba(255,255,255,.86) !important;
  border-color:var(--dashboard-border) !important;
  color:var(--ink) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

html[data-theme="dark"] .dashboardMenuBtn{
  background:rgba(16,43,48,.86) !important;
}

.dashboardMenuBtn:hover,
.dashboardMenuGroup.is-open > .dashboardMenuToggle{
  transform:translateY(-1px) !important;
  color:#00acaa !important;
  background:#e5f7fb !important;
  border-color:rgba(0,172,170,.18) !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .dashboardMenuBtn:hover,
html[data-theme="dark"] .dashboardMenuGroup.is-open > .dashboardMenuToggle{
  color:#53ebe8 !important;
  background:rgba(0,214,210,.10) !important;
  border-color:rgba(0,214,210,.22) !important;
}

/* Sidebar button aktif mengikuti tombol utama index */
.dashboardMenuBtn.is-active{
  background:var(--primaryGrad) !important;
  color:#FFFFFF !important;
  border-color:transparent !important;
  box-shadow:var(--primaryShadow) !important;
}

.dashboardMenuBtn.is-active i,
.dashboardMenuBtn.is-active span{
  color:#FFFFFF !important;
}

/* Submenu */
.dashboardSubmenu::before{
  background:linear-gradient(
    180deg,
    rgba(195,218,62,.60),
    rgba(0,172,170,.48)
  ) !important;
}

.dashboardSubmenuBtn:hover,
.dashboardSubmenuBtn.is-active{
  color:#00acaa !important;
  background:#e5f7fb !important;
  border-color:rgba(0,172,170,.16) !important;
}

html[data-theme="dark"] .dashboardSubmenuBtn:hover,
html[data-theme="dark"] .dashboardSubmenuBtn.is-active{
  color:#53ebe8 !important;
  background:rgba(0,214,210,.10) !important;
  border-color:rgba(0,214,210,.20) !important;
}

/* Tombol logout tetap merah agar makna aksinya jelas */
.dashboardSubmenuLogoutBtn,
.dashboardUserMenuItem.is-danger{
  color:#dc2626 !important;
}

html[data-theme="dark"] .dashboardSubmenuLogoutBtn,
html[data-theme="dark"] .dashboardUserMenuItem.is-danger{
  color:#f87171 !important;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.dashboardTopbar{
  background:var(--dashboard-glass) !important;
  border:1px solid var(--dashboard-border) !important;
}

.dashboardPageTitle{
  color:var(--ink) !important;
  font-weight:700 !important;
}

.dashboardPageSub{
  color:var(--muted) !important;
}

.topbarControlGroup{
  background:rgba(255,255,255,.82) !important;
  border-color:var(--dashboard-border) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

html[data-theme="dark"] .topbarControlGroup{
  background:rgba(16,43,48,.84) !important;
}

/* Switch - sama dengan index */
.dashboard-page .switch{
  background:rgba(255,255,255,.92) !important;
  border-color:var(--dashboard-border) !important;
  color:var(--ink) !important;
  box-shadow:var(--neu-out-sm) !important;
}

html[data-theme="dark"] .dashboard-page .switch{
  background:rgba(16,43,48,.92) !important;
}

.dashboard-page .switchTrack{
  background:rgba(255,255,255,.92) !important;
  border-color:var(--dashboard-border) !important;
  box-shadow:var(--neu-in-sm) !important;
}

html[data-theme="dark"] .dashboard-page .switchTrack{
  background:rgba(16,43,48,.92) !important;
}

.dashboard-page .switchThumb{
  background:#e5f7fb !important;
  border-color:rgba(0,172,170,.16) !important;
  box-shadow:var(--neu-out-sm) !important;
}

html[data-theme="dark"] .dashboard-page .switchThumb{
  background:rgba(0,214,210,.14) !important;
  border-color:rgba(0,214,210,.22) !important;
}

.dashboard-page .switch[data-on="0"] .switchLabel[data-side="left"],
.dashboard-page .switch[data-on="1"] .switchLabel[data-side="right"],
.dashboard-page .switch[data-on="0"] .switchLabel:nth-child(2),
.dashboard-page .switch[data-on="1"] .switchLabel:nth-child(3){
  color:#00acaa !important;
  opacity:1 !important;
}

html[data-theme="dark"] .dashboard-page .switch[data-on="0"] .switchLabel[data-side="left"],
html[data-theme="dark"] .dashboard-page .switch[data-on="1"] .switchLabel[data-side="right"],
html[data-theme="dark"] .dashboard-page .switch[data-on="0"] .switchLabel:nth-child(2),
html[data-theme="dark"] .dashboard-page .switch[data-on="1"] .switchLabel:nth-child(3){
  color:#53ebe8 !important;
}

/* =========================================================
   USER CARD + DROPDOWN
   ========================================================= */
.dashboardUserCard{
  background:rgba(255,255,255,.88) !important;
  border-color:var(--dashboard-border) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

html[data-theme="dark"] .dashboardUserCard{
  background:rgba(16,43,48,.90) !important;
}

.dashboardUserCard:hover,
.dashboardUserCard.is-open{
  background:#ecfeff !important;
  border-color:rgba(0,172,170,.20) !important;
}

html[data-theme="dark"] .dashboardUserCard:hover,
html[data-theme="dark"] .dashboardUserCard.is-open{
  background:rgba(0,214,210,.10) !important;
  border-color:rgba(0,214,210,.22) !important;
}

.dashboardUserCardPhotoWrap,
.dashboardMobileUserPhotoWrap{
  background:var(--surface2) !important;
  border-color:rgba(0,172,170,.14) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

.dashboardUserNameNav,
.dashboardMobileUserName{
  color:var(--ink) !important;
}

.dashboardUserEmailNav,
.dashboardMobileUserEmail,
.dashboardUserChevronWrap{
  color:var(--muted) !important;
}

.dashboardUserMenu{
  background:var(--dashboard-glass-strong) !important;
  border-color:var(--dashboard-border) !important;
  box-shadow:var(--dashboard-shadow) !important;
}

.dashboardUserMenuItem:hover{
  color:#00acaa !important;
  background:#e5f7fb !important;
  border-color:rgba(0,172,170,.16) !important;
}

html[data-theme="dark"] .dashboardUserMenuItem:hover{
  color:#53ebe8 !important;
  background:rgba(0,214,210,.10) !important;
  border-color:rgba(0,214,210,.20) !important;
}

/* =========================================================
   HERO CARD
   ========================================================= */
.dashboardHeroCard{
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.22), transparent 24%),
    radial-gradient(circle at 12% 120%, rgba(195,218,62,.28), transparent 35%),
    linear-gradient(
      135deg,
      #c3da3e 0%,
      #00acaa 38%,
      #0a8684 100%
    ) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  box-shadow:
    0 20px 40px rgba(0,172,170,.24),
    0 8px 18px rgba(10,134,132,.16),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -2px 0 rgba(0,0,0,.10) !important;
}

.dashboardHeroCard::before{
  background:
    radial-gradient(circle, rgba(255,255,255,.24), transparent 68%) !important;
}

html[data-theme="dark"] .dashboardHeroCard{
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.12), transparent 24%),
    radial-gradient(circle at 12% 120%, rgba(195,218,62,.16), transparent 35%),
    linear-gradient(
      135deg,
      #487069 0%,
      #008f8d 42%,
      #075d5c 100%
    ) !important;
  box-shadow:
    0 22px 46px rgba(0,0,0,.36),
    0 8px 18px rgba(0,214,210,.12),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.22) !important;
}

.dashboardHeroCard .dashboardHeroTitle,
.dashboardHeroCard .dashboardWelcomeGreeting,
.dashboardHeroCard .dashboardWelcomeName{
  color:#FFFFFF !important;
}

.dashboardHeroCard .dashboardHeroSub{
  color:rgba(255,255,255,.90) !important;
}

.dashboardHeroUserPhoto{
  background:rgba(255,255,255,.92) !important;
  border-color:rgba(255,255,255,.66) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.74) !important;
}

/* =========================================================
   APP MENU SECTION + MENU CARDS
   ========================================================= */
.dashboardAppMenuSection{
  background:
    radial-gradient(circle at top right, rgba(0,172,170,.10), transparent 32%),
    radial-gradient(circle at bottom left, rgba(195,218,62,.10), transparent 30%),
    rgba(255,255,255,.72) !important;
  border:1px solid var(--dashboard-border) !important;
  box-shadow:var(--dashboard-shadow) !important;
  backdrop-filter:blur(16px) saturate(1.10) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.10) !important;
}

.dashboardAppMenuSection::before{
  background:
    radial-gradient(circle, rgba(0,172,170,.16), transparent 68%) !important;
}

.dashboardAppMenuSection::after{
  background:
    radial-gradient(circle, rgba(195,218,62,.13), transparent 70%) !important;
}

html[data-theme="dark"] .dashboardAppMenuSection{
  background:
    radial-gradient(circle at top right, rgba(0,214,210,.12), transparent 32%),
    radial-gradient(circle at bottom left, rgba(195,218,62,.07), transparent 30%),
    rgba(11,32,36,.82) !important;
  border-color:var(--dashboard-border) !important;
  box-shadow:var(--dashboard-shadow) !important;
}

.dashboardAppMenuCard{
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(0,172,170,.12) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

.dashboardAppMenuCard:hover{
  background:#ecfeff !important;
  border-color:rgba(0,172,170,.28) !important;
  box-shadow:
    0 18px 34px rgba(15,23,42,.12),
    0 8px 18px rgba(0,172,170,.10),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

html[data-theme="dark"] .dashboardAppMenuCard{
  background:rgba(16,43,48,.92) !important;
  border-color:rgba(0,214,210,.14) !important;
}

html[data-theme="dark"] .dashboardAppMenuCard:hover{
  background:rgba(0,214,210,.10) !important;
  border-color:rgba(0,214,210,.26) !important;
}

.dashboardAppMenuIcon{
  background:
    linear-gradient(145deg, rgba(229,247,251,.88), rgba(243,255,225,.92)) !important;
  border:1px solid rgba(0,172,170,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 10px 20px rgba(15,23,42,.06) !important;
}

html[data-theme="dark"] .dashboardAppMenuIcon{
  background:
    linear-gradient(145deg, rgba(0,214,210,.10), rgba(195,218,62,.06)) !important;
  border-color:rgba(0,214,210,.16) !important;
}

.dashboardAppMenuText{
  color:var(--ink) !important;
}

/* Recolor icon biru monokrom menjadi lebih dekat ke teal.
   Filter ringan agar detail aset tetap terjaga. */
.dashboardAppMenuImg{
  filter:hue-rotate(-34deg) saturate(.88) brightness(.98) !important;
}

/* =========================================================
   MOBILE INFO CARD
   ========================================================= */
.dashboardMobileInfoCard{
  background:
    radial-gradient(circle at top right, rgba(0,172,170,.10), transparent 36%),
    rgba(255,255,255,.94) !important;
  border-color:rgba(0,172,170,.14) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

.dashboardMobileInfoCard::before{
  background:
    radial-gradient(circle, rgba(195,218,62,.17), transparent 68%) !important;
}

html[data-theme="dark"] .dashboardMobileInfoCard{
  background:
    radial-gradient(circle at top right, rgba(0,214,210,.10), transparent 36%),
    rgba(11,32,36,.94) !important;
  border-color:rgba(0,214,210,.16) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

.dashboardMobileInfoCardTitle,
.dashboardMobileMenuTitle,
.dashboardMobileMenuTitle span{
  color:var(--ink) !important;
}

.dashboardMobileInfoCardText{
  color:var(--muted) !important;
}

.dashboardMobileMenuTitle i{
  color:#00acaa !important;
}

html[data-theme="dark"] .dashboardMobileMenuTitle i{
  color:#53ebe8 !important;
}

/* =========================================================
   MOBILE DRAWER
   ========================================================= */
.dashboardMobileBackdrop{
  background:rgba(15,23,42,.22) !important;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
}

html[data-theme="dark"] .dashboardMobileBackdrop{
  background:rgba(0,0,0,.58) !important;
}

.dashboardMobileDrawer{
  background:
    radial-gradient(circle at top left, rgba(0,172,170,.10), transparent 30%),
    radial-gradient(circle at bottom left, rgba(195,218,62,.08), transparent 28%),
    rgba(255,255,255,.96) !important;
  border-right-color:var(--dashboard-border) !important;
}

html[data-theme="dark"] .dashboardMobileDrawer{
  background:
    radial-gradient(circle at top left, rgba(0,214,210,.12), transparent 30%),
    radial-gradient(circle at bottom left, rgba(195,218,62,.06), transparent 28%),
    rgba(11,32,36,.98) !important;
}

.dashboardMobileUserCard,
.dashboardMobileDrawerItem{
  background:rgba(255,255,255,.90) !important;
  border-color:var(--dashboard-border) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

html[data-theme="dark"] .dashboardMobileUserCard,
html[data-theme="dark"] .dashboardMobileDrawerItem{
  background:rgba(16,43,48,.90) !important;
}

.dashboardMobileDrawerBtn:hover{
  color:#00acaa !important;
  background:#e5f7fb !important;
}

html[data-theme="dark"] .dashboardMobileDrawerBtn:hover{
  color:#53ebe8 !important;
  background:rgba(0,214,210,.10) !important;
}

.dashboardMobileDrawerChevron{
  color:#00acaa !important;
}

html[data-theme="dark"] .dashboardMobileDrawerChevron{
  color:#53ebe8 !important;
}

.dashboardMobileDrawerSubmenu button{
  background:#e5f7fb !important;
  border-color:rgba(0,172,170,.14) !important;
  color:var(--ink) !important;
}

html[data-theme="dark"] .dashboardMobileDrawerSubmenu button{
  background:rgba(0,214,210,.10) !important;
  border-color:rgba(0,214,210,.18) !important;
}

.dashboardMobileDrawerClose{
  background:rgba(255,255,255,.92) !important;
  border-color:var(--dashboard-border) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

html[data-theme="dark"] .dashboardMobileDrawerClose{
  background:rgba(16,43,48,.92) !important;
}

.dashboardMobileDrawerClose:hover{
  color:#00acaa !important;
  background:#e5f7fb !important;
}

html[data-theme="dark"] .dashboardMobileDrawerClose:hover{
  color:#53ebe8 !important;
  background:rgba(0,214,210,.10) !important;
}

.dashboardMobileDrawerLogoutBtn{
  background:var(--primaryGrad) !important;
  color:#FFFFFF !important;
  box-shadow:var(--primaryShadow) !important;
}

/* =========================================================
   GENERAL CONTENT CARDS
   ========================================================= */
.dashboardContentCard,
.dashboardTechnologyCard,
.technologyInfoCard{
  background:var(--dashboard-glass) !important;
  border-color:var(--dashboard-border) !important;
  box-shadow:var(--dashboard-shadow) !important;
}

.dashboardSectionTitle,
.technologyInfoTitle{
  color:var(--ink) !important;
}

.dashboardSectionText,
.dashboardSectionDescription,
.technologyInfoText{
  color:var(--muted) !important;
}

.dashboardSectionBadge,
.technologyInfoTag{
  background:#e5f7fb !important;
  border-color:rgba(0,172,170,.14) !important;
  color:#00acaa !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .dashboardSectionBadge,
html[data-theme="dark"] .technologyInfoTag{
  background:rgba(0,214,210,.10) !important;
  border-color:rgba(0,214,210,.18) !important;
  color:#53ebe8 !important;
}

.dashboardTechnologyCard::before{
  background:
    radial-gradient(circle, rgba(0,172,170,.11), transparent 68%) !important;
}

.technologyInfoImageWrap{
  background:
    radial-gradient(circle at top left, rgba(0,172,170,.12), transparent 45%),
    var(--surface2) !important;
  border-bottom-color:var(--dashboard-border) !important;
}

/* =========================================================
   DESKTOP FOOTER
   ========================================================= */
@media (min-width:741px){
  .dashboard-page footer.siteFooter{
    background:rgba(255,255,255,.62) !important;
    border-top:1px solid rgba(0,172,170,.18) !important;
    color:rgba(15,23,42,.66) !important;
    box-shadow:
      0 -10px 32px rgba(15,23,42,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    backdrop-filter:blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.08) !important;
  }

  html[data-theme="dark"] .dashboard-page footer.siteFooter{
    background:rgba(11,32,36,.72) !important;
    border-top-color:rgba(0,214,210,.18) !important;
    color:rgba(234,251,255,.72) !important;
  }

  .dashboard-page footer.siteFooter .footerRight a{
    color:#00acaa !important;
    font-weight:700 !important;
  }

  .dashboard-page footer.siteFooter .footerRight a:hover{
    color:#0a8684 !important;
  }

  html[data-theme="dark"] .dashboard-page footer.siteFooter .footerRight a{
    color:#53ebe8 !important;
  }

  html[data-theme="dark"] .dashboard-page footer.siteFooter .footerRight a:hover{
    color:#c3da3e !important;
  }
}

/* =========================================================
   MOBILE FOOTER NAVIGATION
   ========================================================= */
@media (max-width:740px){
  .dashboardMobileFooterNav{
    background:rgba(255,255,255,.94) !important;
    border-color:rgba(0,172,170,.14) !important;
    box-shadow:
      0 16px 36px rgba(15,23,42,.13),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
    backdrop-filter:blur(18px) saturate(1.10) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.10) !important;
  }

  html[data-theme="dark"] .dashboardMobileFooterNav{
    background:rgba(11,32,36,.96) !important;
    border-color:rgba(0,214,210,.16) !important;
    box-shadow:
      0 16px 36px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  .dashboardMobileFooterBtn:not(.is-active):hover,
  .dashboardMobileFooterBtn:not(.is-active):focus-visible{
    color:#00acaa !important;
    background:#e5f7fb !important;
    border-color:rgba(0,172,170,.16) !important;
  }

  html[data-theme="dark"] .dashboardMobileFooterBtn:not(.is-active):hover,
  html[data-theme="dark"] .dashboardMobileFooterBtn:not(.is-active):focus-visible{
    color:#53ebe8 !important;
    background:rgba(0,214,210,.10) !important;
    border-color:rgba(0,214,210,.20) !important;
  }

  .dashboardMobileFooterBtn.is-active{
    background:var(--primaryGrad) !important;
    color:#FFFFFF !important;
    border-color:transparent !important;
    box-shadow:var(--primaryShadow) !important;
  }

  .dashboardMobileFooterBtn.is-active i,
  .dashboardMobileFooterBtn.is-active span{
    color:#FFFFFF !important;
  }
}

/* =========================================================
   FOCUS ACCESSIBILITY
   ========================================================= */
.dashboardMenuBtn:focus-visible,
.dashboardSubmenuBtn:focus-visible,
.dashboardUserCard:focus-visible,
.dashboardUserMenuItem:focus-visible,
.dashboardAppMenuCard:focus-visible,
.dashboardMobileDrawerBtn:focus-visible,
.dashboardMobileDrawerClose:focus-visible,
.dashboardMobileDrawerLogoutBtn:focus-visible,
.dashboardMobileFooterBtn:focus-visible{
  outline:3px solid var(--focus) !important;
  outline-offset:3px !important;
}

/* =========================================================
   MOBILE HERO FINAL COLOR LOCK
   ========================================================= */
@media (max-width:740px){
  .dashboardHeroCard{
    background:
      radial-gradient(circle at 88% 14%, rgba(255,255,255,.20), transparent 24%),
      linear-gradient(
        135deg,
        #c3da3e 0%,
        #00acaa 40%,
        #0a8684 100%
      ) !important;
  }

  .dashboardHeroCard .dashboardHeroBellBtn,
  .dashboardHeroCard .dashboardHeroBurgerBtn,
  .dashboardHeroCard > .dashboardBurgerBtn{
    color:#FFFFFF !important;
    background:transparent !important;
  }

  .dashboardAppMenuSection{
    background:
      radial-gradient(circle at top right, rgba(0,172,170,.10), transparent 34%),
      radial-gradient(circle at bottom left, rgba(195,218,62,.10), transparent 32%),
      rgba(255,255,255,.78) !important;
  }

  html[data-theme="dark"] .dashboardAppMenuSection{
    background:
      radial-gradient(circle at top right, rgba(0,214,210,.12), transparent 34%),
      radial-gradient(circle at bottom left, rgba(195,218,62,.07), transparent 32%),
      rgba(11,32,36,.88) !important;
  }
}

/* =========================================================
   END FINAL INDEX STYLE ALIGNMENT
   ========================================================= */

/* =========================================================
   BUMIL KU - DASHBOARD FINAL INDEX BASELINE ALIGNMENT V1
   =========================================================
   Acuan visual:
   - index.css Bumil Ku final
   - Primary RSAB   #0F9F8D
   - Secondary RSAB #0E9382
   - CTA desktop index #087F78 -> #25B79A

   Prinsip:
   - Tidak mengubah struktur layout dashboard yang sudah stabil.
   - Tidak mengubah route, auth, audit, Firestore, i18n, atau logout.
   - Override diletakkan paling akhir agar legacy rule dashboard
     tidak kembali mengambil alih warna/visual final.
   ========================================================= */

:root{
  --bg:#f6f8fb !important;
  --surface:#ffffff !important;
  --surface2:#f4fbf9 !important;
  --surface3:#ffffff !important;
  --ink:#17384c !important;
  --muted:#65788a !important;

  --blue:#0F9F8D !important;
  --blue2:#0E9382 !important;
  --blue3:#c3da3e !important;

  --dashboard-primary:#0F9F8D;
  --dashboard-primary-strong:#0E9382;
  --dashboard-primary-deep:#087f78;
  --dashboard-aqua:#5edee7;
  --dashboard-lime:#c3da3e;

  --line:rgba(58,105,119,.14) !important;
  --dashboard-border:rgba(58,105,119,.14) !important;
  --dashboard-glass:rgba(255,255,255,.90) !important;
  --dashboard-glass-strong:rgba(255,255,255,.96) !important;
  --dashboard-soft-teal:rgba(15,159,141,.10) !important;
  --dashboard-soft-lime:rgba(195,218,62,.10) !important;

  --neu-out:
    0 18px 40px rgba(16,70,80,.10),
    0 4px 12px rgba(16,70,80,.055),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
  --neu-out-sm:
    0 10px 24px rgba(16,70,80,.085),
    0 3px 8px rgba(16,70,80,.045),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
  --neu-in:
    inset 6px 6px 14px rgba(16,70,80,.08),
    inset -6px -6px 14px rgba(255,255,255,.94) !important;
  --neu-in-sm:
    inset 4px 4px 10px rgba(16,70,80,.065),
    inset -4px -4px 10px rgba(255,255,255,.92) !important;

  --dashboard-shadow:
    0 18px 40px rgba(16,70,80,.105),
    0 4px 12px rgba(16,70,80,.05),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
  --dashboard-shadow-sm:
    0 10px 24px rgba(16,70,80,.08),
    0 3px 8px rgba(16,70,80,.045),
    inset 0 1px 0 rgba(255,255,255,.94) !important;

  --primaryGrad:
    radial-gradient(
      circle at 18% 0%,
      rgba(255,255,255,.17) 0%,
      rgba(255,255,255,.07) 28%,
      rgba(255,255,255,0) 52%
    ),
    linear-gradient(
      105deg,
      #087f78 0%,
      #0b8f84 28%,
      #119b8a 52%,
      #19a78f 74%,
      #25b79a 100%
    ) !important;

  --primaryShadow:
    0 11px 24px rgba(4,112,103,.22),
    0 4px 10px rgba(7,126,116,.13),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(3,102,96,.12) !important;

  --focus:rgba(15,159,141,.30) !important;
}

html[data-theme="dark"]{
  --bg:#07181c !important;
  --surface:#0b2024 !important;
  --surface2:#102b30 !important;
  --surface3:#14343a !important;
  --ink:#eafcff !important;
  --muted:#aac8cc !important;

  --blue:#53ebe8 !important;
  --blue2:#25b79a !important;
  --blue3:#c3da3e !important;

  --line:rgba(255,255,255,.10) !important;
  --dashboard-border:rgba(255,255,255,.09) !important;
  --dashboard-glass:rgba(16,43,48,.90) !important;
  --dashboard-glass-strong:rgba(16,43,48,.96) !important;

  --neu-out:
    0 20px 46px rgba(0,0,0,.34),
    0 4px 14px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  --neu-out-sm:
    0 12px 28px rgba(0,0,0,.30),
    0 3px 10px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
  --dashboard-shadow:
    0 20px 46px rgba(0,0,0,.34),
    0 4px 14px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  --dashboard-shadow-sm:
    0 12px 28px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}

html,
body,
.dashboard-page{
  font-family:
    "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.dashboard-page{
  background:
    radial-gradient(circle at 14% 10%, rgba(94,222,231,.24), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(15,159,141,.20), transparent 25%),
    radial-gradient(circle at 78% 86%, rgba(15,159,141,.13), transparent 28%),
    linear-gradient(160deg, #f8fbfd 0%, #ffffff 46%, #f3fbf6 100%) !important;
}

.dashboard-page .overlay{
  background:
    radial-gradient(circle at 14% 10%, rgba(94,222,231,.24), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(15,159,141,.20), transparent 25%),
    radial-gradient(circle at 78% 86%, rgba(195,218,62,.11), transparent 28%),
    linear-gradient(160deg, #f8fbfd 0%, #ffffff 46%, #f3fbf6 100%) !important;
}

html[data-theme="dark"] .dashboard-page,
html[data-theme="dark"] .dashboard-page .overlay{
  background:
    radial-gradient(circle at 14% 10%, rgba(15,159,141,.16), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(15,159,141,.10), transparent 25%),
    radial-gradient(circle at 78% 86%, rgba(14,147,130,.14), transparent 28%),
    linear-gradient(160deg, #07181c 0%, #0b2024 48%, #07181c 100%) !important;
}

/* ---------------------------------------------------------
   Shared surfaces
   --------------------------------------------------------- */
.dashboardSidebar,
.dashboardTopbar,
.dashboardContentCard,
.dashboardTechnologyCard,
.technologyInfoCard,
.dashboardUserCard,
.dashboardUserMenu,
.topbarControlGroup,
.dashboardMobileDrawer,
.dashboardMobileDrawerItem,
.dashboardMobileUserCard{
  background:var(--dashboard-glass) !important;
  border-color:var(--dashboard-border) !important;
  box-shadow:var(--dashboard-shadow) !important;
}

.dashboardSidebar,
.dashboardTopbar,
.dashboardContentCard,
.dashboardTechnologyCard,
.technologyInfoCard,
.dashboardUserCard,
.dashboardUserMenu,
.topbarControlGroup{
  backdrop-filter:blur(14px) saturate(1.05) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.05) !important;
}

/* ---------------------------------------------------------
   Brand + RSAB identity
   --------------------------------------------------------- */
.dashboardBrandLogo,
.dashboardMobileDrawerLogo{
  padding:3px !important;
  background:#ffffff !important;
  border-color:rgba(15,159,141,.15) !important;
  box-shadow:
    0 8px 18px rgba(0,80,86,.14),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

html[data-theme="dark"] .dashboardBrandLogo,
html[data-theme="dark"] .dashboardMobileDrawerLogo{
  background:#ffffff !important;
  border-color:rgba(255,255,255,.88) !important;
}

.dashboardBrandText strong,
.dashboardMobileDrawerTitle{
  color:#0F9F8D !important;
  letter-spacing:-.035em !important;
}

html[data-theme="dark"] .dashboardBrandText strong,
html[data-theme="dark"] .dashboardMobileDrawerTitle{
  color:#53ebe8 !important;
}

.dashboardInstitutionLockup{
  display:flex;
  align-items:center;
  min-width:0;
  color:var(--muted);
}

.dashboardInstitutionDivider{
  width:1px;
  height:34px;
  flex:0 0 auto;
  background:linear-gradient(180deg, transparent, rgba(15,159,141,.38), transparent);
}

.dashboardInstitutionCopy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.dashboardInstitutionCopy small{
  color:var(--muted);
  font-size:8px;
  line-height:1;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
}

.dashboardInstitutionCopy img{
  width:auto;
  height:24px;
  max-width:118px;
  object-fit:contain;
  object-position:left center;
  display:block;
}

.dashboardInstitutionLockup--sidebar{
  margin:-10px 6px 0;
  gap:11px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(15,159,141,.10);
}

html[data-theme="dark"] .dashboardInstitutionLockup--sidebar{
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.07);
}

.dashboardInstitutionLockup--drawer{
  display:none;
}

/* ---------------------------------------------------------
   Sidebar
   --------------------------------------------------------- */
.dashboardSidebar{
  background:
    radial-gradient(circle at 5% 8%, rgba(94,222,231,.16), transparent 30%),
    radial-gradient(circle at 8% 92%, rgba(195,218,62,.10), transparent 28%),
    rgba(255,255,255,.88) !important;
}

html[data-theme="dark"] .dashboardSidebar{
  background:
    radial-gradient(circle at 5% 8%, rgba(15,159,141,.15), transparent 30%),
    radial-gradient(circle at 8% 92%, rgba(195,218,62,.055), transparent 28%),
    rgba(11,32,36,.92) !important;
}

.dashboardSidebar::before{
  opacity:.50 !important;
}

.dashboardMenuBtn{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(58,105,119,.11) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
  color:var(--ink) !important;
}

html[data-theme="dark"] .dashboardMenuBtn{
  background:rgba(16,43,48,.82) !important;
  border-color:rgba(255,255,255,.07) !important;
}

.dashboardMenuBtn:hover,
.dashboardMenuGroup.is-open > .dashboardMenuToggle{
  color:#0E9382 !important;
  background:rgba(15,159,141,.085) !important;
  border-color:rgba(15,159,141,.18) !important;
  transform:translateY(-1px) !important;
  box-shadow:none !important;
}

.dashboardMenuBtn.is-active{
  color:#ffffff !important;
  background:var(--primaryGrad) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:var(--primaryShadow) !important;
}

.dashboardMenuBtn.is-active i,
.dashboardMenuBtn.is-active span{
  color:#ffffff !important;
}

.dashboardSubmenu::before{
  background:linear-gradient(180deg, rgba(195,218,62,.66), rgba(15,159,141,.50)) !important;
}

.dashboardSubmenuBtn:hover,
.dashboardSubmenuBtn.is-active{
  color:#0E9382 !important;
  background:rgba(15,159,141,.085) !important;
  border-color:rgba(15,159,141,.16) !important;
}

html[data-theme="dark"] .dashboardSubmenuBtn:hover,
html[data-theme="dark"] .dashboardSubmenuBtn.is-active{
  color:#53ebe8 !important;
  background:rgba(15,159,141,.10) !important;
  border-color:rgba(83,235,232,.14) !important;
}

/* ---------------------------------------------------------
   Topbar + controls
   --------------------------------------------------------- */
.dashboardTopbar{
  background:
    radial-gradient(circle at 98% 0%, rgba(94,222,231,.08), transparent 26%),
    rgba(255,255,255,.88) !important;
  border-color:rgba(58,105,119,.12) !important;
}

html[data-theme="dark"] .dashboardTopbar{
  background:
    radial-gradient(circle at 98% 0%, rgba(15,159,141,.09), transparent 28%),
    rgba(11,32,36,.92) !important;
}

.dashboardPageTitle{
  color:var(--ink-strong, #0d3343) !important;
  font-weight:800 !important;
  letter-spacing:-.035em !important;
}

.dashboardPageSub{
  color:var(--muted) !important;
}

.topbarControlGroup{
  background:rgba(255,255,255,.76) !important;
  border-color:rgba(58,105,119,.11) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

html[data-theme="dark"] .topbarControlGroup{
  background:rgba(16,43,48,.82) !important;
  border-color:rgba(255,255,255,.08) !important;
}

.dashboardUserCard{
  background:rgba(255,255,255,.84) !important;
  border-color:rgba(58,105,119,.11) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

html[data-theme="dark"] .dashboardUserCard{
  background:rgba(16,43,48,.86) !important;
  border-color:rgba(255,255,255,.08) !important;
}

.dashboardUserCardPhotoWrap,
.dashboardMobileUserPhotoWrap{
  background:#ffffff !important;
  border-color:rgba(15,159,141,.13) !important;
  box-shadow:
    0 7px 14px rgba(27,75,85,.10),
    inset 0 1px rgba(255,255,255,1) !important;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.dashboardHeroCard{
  background:
    radial-gradient(circle at 84% -18%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 3% 110%, rgba(195,218,62,.24) 0%, rgba(195,218,62,0) 34%),
    linear-gradient(
      105deg,
      #087f78 0%,
      #0b8f84 28%,
      #119b8a 52%,
      #19a78f 74%,
      #25b79a 100%
    ) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:
    0 18px 34px rgba(4,112,103,.21),
    0 6px 14px rgba(7,126,116,.12),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(3,102,96,.13) !important;
}

.dashboardHeroCard::before{
  background:radial-gradient(circle, rgba(255,255,255,.20), transparent 68%) !important;
}

.dashboardHeroCard .dashboardHeroTitle,
.dashboardHeroCard .dashboardWelcomeGreeting,
.dashboardHeroCard .dashboardWelcomeName{
  color:#ffffff !important;
}

.dashboardHeroCard .dashboardHeroSub{
  color:rgba(255,255,255,.90) !important;
}

.dashboardHeroUserPhoto{
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 12px 24px rgba(0,64,62,.20),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

/* ---------------------------------------------------------
   Six main service cards
   --------------------------------------------------------- */
.dashboardAppMenuSection{
  background:
    radial-gradient(circle at 100% 0%, rgba(94,222,231,.14), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(195,218,62,.13), transparent 29%),
    rgba(255,255,255,.76) !important;
  border-color:rgba(58,105,119,.12) !important;
  box-shadow:var(--dashboard-shadow) !important;
}

html[data-theme="dark"] .dashboardAppMenuSection{
  background:
    radial-gradient(circle at 100% 0%, rgba(15,159,141,.12), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(195,218,62,.055), transparent 29%),
    rgba(11,32,36,.88) !important;
  border-color:rgba(255,255,255,.08) !important;
}

.dashboardAppMenuCard{
  background:rgba(255,255,255,.92) !important;
  border-color:rgba(58,105,119,.11) !important;
  box-shadow:
    0 12px 26px rgba(16,70,80,.085),
    0 3px 8px rgba(16,70,80,.04),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html[data-theme="dark"] .dashboardAppMenuCard{
  background:rgba(16,43,48,.92) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.dashboardAppMenuCard:hover{
  background:#ffffff !important;
  border-color:rgba(15,159,141,.20) !important;
  box-shadow:
    0 16px 32px rgba(16,70,80,.13),
    0 5px 10px rgba(16,70,80,.055),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

html[data-theme="dark"] .dashboardAppMenuCard:hover{
  background:#14343a !important;
}

.dashboardAppMenuIcon{
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  border:1px solid rgba(184,252,248,.64) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 38%, rgba(255,255,255,0) 74%),
    radial-gradient(circle at 22% 16%, rgba(255,255,255,.28), transparent 36%),
    linear-gradient(145deg, #0f9f8d 0%, #0f9f8d 62%, #0e9382 100%) !important;
  box-shadow:
    0 8px 18px rgba(15,159,141,.25),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}

.dashboardAppMenuCard:nth-child(2) .dashboardAppMenuIcon,
.dashboardAppMenuCard:nth-child(5) .dashboardAppMenuIcon{
  background:
    linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,0) 76%),
    radial-gradient(circle at 22% 16%, rgba(255,255,255,.38), transparent 38%),
    linear-gradient(145deg, #52b99a 0%, #72c588 44%, #add252 100%) !important;
  border-color:rgba(226,248,207,.82) !important;
}

.dashboardAppMenuCard:nth-child(3) .dashboardAppMenuIcon,
.dashboardAppMenuCard:nth-child(6) .dashboardAppMenuIcon{
  background:
    linear-gradient(90deg, rgba(255,255,255,.38), rgba(255,255,255,0) 78%),
    radial-gradient(circle at 22% 16%, rgba(255,255,255,.46), transparent 38%),
    linear-gradient(145deg, #9dca58 0%, #bad33f 40%, #d6df50 100%) !important;
  border-color:rgba(248,255,194,.90) !important;
}

.dashboardAppMenuIcon i{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  color:#ffffff !important;
  font-size:27px !important;
  line-height:1 !important;
  filter:drop-shadow(0 1px 1.5px rgba(0,70,66,.22)) !important;
}

.dashboardAppMenuImg{
  display:none !important;
}

.dashboardAppMenuText{
  color:var(--ink) !important;
}

/* ---------------------------------------------------------
   Content cards
   --------------------------------------------------------- */
.dashboardContentCard,
.dashboardTechnologyCard,
.technologyInfoCard{
  background:rgba(255,255,255,.88) !important;
  border-color:rgba(58,105,119,.12) !important;
  box-shadow:var(--dashboard-shadow) !important;
}

html[data-theme="dark"] .dashboardContentCard,
html[data-theme="dark"] .dashboardTechnologyCard,
html[data-theme="dark"] .technologyInfoCard{
  background:rgba(16,43,48,.90) !important;
  border-color:rgba(255,255,255,.08) !important;
}

.dashboardSectionBadge,
.technologyInfoTag{
  color:#0E9382 !important;
  background:rgba(15,159,141,.09) !important;
  border-color:rgba(15,159,141,.14) !important;
}

html[data-theme="dark"] .dashboardSectionBadge,
html[data-theme="dark"] .technologyInfoTag{
  color:#53ebe8 !important;
  background:rgba(15,159,141,.10) !important;
  border-color:rgba(83,235,232,.12) !important;
}

/* ---------------------------------------------------------
   Drawer
   --------------------------------------------------------- */
.dashboardMobileDrawer,
.dashboardMobileBackdrop{
  will-change:auto;
}

.dashboardMobileDrawer.is-motion-active{
  will-change:transform, opacity;
}

.dashboardMobileBackdrop.is-motion-active{
  will-change:opacity;
}

.dashboardMobileDrawer{
  background:
    radial-gradient(circle at 0% 0%, rgba(94,222,231,.14), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(195,218,62,.09), transparent 28%),
    rgba(255,255,255,.97) !important;
}

html[data-theme="dark"] .dashboardMobileDrawer{
  background:
    radial-gradient(circle at 0% 0%, rgba(15,159,141,.14), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(195,218,62,.05), transparent 28%),
    rgba(11,32,36,.985) !important;
}

.dashboardMobileDrawerClose:hover{
  color:#0E9382 !important;
  background:rgba(15,159,141,.085) !important;
}

.dashboardMobileDrawerItem{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(58,105,119,.11) !important;
  box-shadow:var(--dashboard-shadow-sm) !important;
}

html[data-theme="dark"] .dashboardMobileDrawerItem{
  background:rgba(16,43,48,.84) !important;
  border-color:rgba(255,255,255,.07) !important;
}

.dashboardMobileDrawerLogoutBtn{
  background:var(--primaryGrad) !important;
  box-shadow:var(--primaryShadow) !important;
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
@media (min-width:741px){
  .dashboard-page footer.siteFooter{
    background:rgba(255,255,255,.68) !important;
    border-top:1px solid rgba(15,159,141,.14) !important;
    color:var(--muted) !important;
    box-shadow:
      0 -10px 30px rgba(22,75,84,.045),
      inset 0 1px rgba(255,255,255,.90) !important;
  }

  .dashboard-page footer.siteFooter .footerRight a{
    color:#0E9382 !important;
    font-weight:700 !important;
  }

  .dashboard-page footer.siteFooter .footerRight a:hover{
    color:#087f78 !important;
  }

  html[data-theme="dark"] .dashboard-page footer.siteFooter{
    background:rgba(11,32,36,.82) !important;
    border-top-color:rgba(15,159,141,.14) !important;
  }

  html[data-theme="dark"] .dashboard-page footer.siteFooter .footerRight a{
    color:#53ebe8 !important;
  }
}

/* ---------------------------------------------------------
   Mobile baseline: layout tetap, visual mengikuti index
   --------------------------------------------------------- */
@media (max-width:740px){
  .dashboardHeroCard{
    background:
      radial-gradient(circle at 86% -18%, rgba(255,255,255,.23), transparent 37%),
      radial-gradient(circle at 0% 110%, rgba(195,218,62,.20), transparent 34%),
      linear-gradient(105deg, #087f78 0%, #0b8f84 30%, #119b8a 56%, #25b79a 100%) !important;
  }

  .dashboardAppMenuSection{
    background:
      radial-gradient(circle at top right, rgba(94,222,231,.12), transparent 34%),
      radial-gradient(circle at bottom left, rgba(195,218,62,.10), transparent 32%),
      rgba(255,255,255,.84) !important;
  }

  html[data-theme="dark"] .dashboardAppMenuSection{
    background:
      radial-gradient(circle at top right, rgba(15,159,141,.11), transparent 34%),
      radial-gradient(circle at bottom left, rgba(195,218,62,.05), transparent 32%),
      rgba(11,32,36,.92) !important;
  }

  .dashboardMobileInfoCard{
    background:rgba(255,255,255,.92) !important;
    border-color:rgba(58,105,119,.11) !important;
    box-shadow:var(--dashboard-shadow-sm) !important;
  }

  html[data-theme="dark"] .dashboardMobileInfoCard{
    background:rgba(16,43,48,.92) !important;
    border-color:rgba(255,255,255,.08) !important;
  }

  .dashboardMobileMenuTitle i{
    color:#0F9F8D !important;
  }

  .dashboardMobileFooterNav{
    background:rgba(255,255,255,.96) !important;
    border-color:rgba(15,159,141,.13) !important;
    box-shadow:
      0 16px 36px rgba(16,70,80,.14),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html[data-theme="dark"] .dashboardMobileFooterNav{
    background:rgba(11,32,36,.97) !important;
    border-color:rgba(255,255,255,.08) !important;
  }

  .dashboardMobileFooterBtn.is-active{
    background:var(--primaryGrad) !important;
    box-shadow:var(--primaryShadow) !important;
  }

  .dashboardMobileFooterBtn:not(.is-active):hover,
  .dashboardMobileFooterBtn:not(.is-active):focus-visible{
    color:#0E9382 !important;
    background:rgba(15,159,141,.085) !important;
    border-color:rgba(15,159,141,.14) !important;
  }

  .dashboardMobileDrawer{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .dashboardInstitutionLockup--drawer{
    display:flex;
    gap:9px;
    margin-left:auto;
    margin-right:4px;
  }

  .dashboardInstitutionLockup--drawer .dashboardInstitutionDivider{
    height:30px;
  }

  .dashboardInstitutionLockup--drawer .dashboardInstitutionCopy small{
    font-size:6.6px;
  }

  .dashboardInstitutionLockup--drawer .dashboardInstitutionCopy img{
    height:20px;
    max-width:88px;
  }
}

@media (max-width:420px){
  .dashboardInstitutionLockup--drawer{
    display:none;
  }

  .dashboardAppMenuIcon i{
    font-size:23px !important;
  }
}

/* =========================================================
   END BUMIL KU - DASHBOARD FINAL INDEX BASELINE ALIGNMENT V1
   ========================================================= */


/* =========================================================
   BUMIL KU - FINAL 8 SERVICE MENU GRID
   =========================================================
   TUJUAN:
   - Mengubah menu layanan dashboard dari 6 menjadi 8 card.
   - Laptop/desktop: 8 menu tersusun proporsional satu baris.
   - Tablet: 4 kolom x 2 baris.
   - HP <=740px: WAJIB 4 kolom x 2 baris.
   - Memperkecil card/icon/text pada HP agar empat menu muat
     tanpa horizontal scroll dan tetap nyaman disentuh.
   - Tidak mengubah sidebar, hero, footer, auth, drawer,
     theme, bahasa, routing existing, atau fungsi dashboard.
   ========================================================= */

/* Desktop / laptop besar: 8 menu dalam satu baris. */
.dashboardAppMenuGrid{
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  gap:12px !important;
}

.dashboardAppMenuCard{
  min-height:118px !important;
  padding:14px 8px 13px !important;
  gap:10px !important;
  border-radius:21px !important;
}

.dashboardAppMenuIcon{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  border-radius:18px !important;
}

.dashboardAppMenuIcon i{
  font-size:23px !important;
}

.dashboardAppMenuText{
  font-size:12.2px !important;
  line-height:1.18 !important;
}

/*
 * Warna tambahan untuk card ke-7 dan ke-8 agar pola gradien
 * teal -> green -> lime tetap menyatu dengan enam menu lama.
 */
.dashboardAppMenuCard:nth-child(8) .dashboardAppMenuIcon{
  background:
    linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,0) 76%),
    radial-gradient(circle at 22% 16%, rgba(255,255,255,.38), transparent 38%),
    linear-gradient(145deg, #52b99a 0%, #72c588 44%, #add252 100%) !important;
  border-color:rgba(226,248,207,.82) !important;
}

/* Tablet dan desktop kecil: 4 + 4. */
@media (max-width:1240px){
  .dashboardAppMenuGrid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
  }
}

/* =========================================================
   HP - 4 MENU BARIS PERTAMA + 4 MENU BARIS KEDUA
   ========================================================= */
@media (max-width:740px){
  .dashboardAppMenuSection{
    padding:10px !important;
    border-radius:20px !important;
  }

  .dashboardAppMenuGrid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    gap:8px !important;
    align-items:stretch !important;
  }

  .dashboardAppMenuCard{
    min-width:0 !important;
    min-height:88px !important;
    height:auto !important;
    padding:9px 4px 8px !important;
    border-radius:16px !important;
    gap:7px !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .dashboardAppMenuIcon{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    border-radius:14px !important;
  }

  .dashboardAppMenuIcon i{
    font-size:18px !important;
  }

  .dashboardAppMenuText{
    width:100% !important;
    min-height:24px !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    padding:0 1px !important;
    font-size:10.2px !important;
    line-height:1.14 !important;
    font-weight:800 !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
    text-align:center !important;
  }
}

/* HP kecil tetap empat kolom; hanya skala dipadatkan. */
@media (max-width:380px){
  .dashboardAppMenuSection{
    padding:8px !important;
    border-radius:18px !important;
  }

  .dashboardAppMenuGrid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .dashboardAppMenuCard{
    min-height:82px !important;
    padding:8px 3px 7px !important;
    border-radius:14px !important;
    gap:6px !important;
  }

  .dashboardAppMenuIcon{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:13px !important;
  }

  .dashboardAppMenuIcon i{
    font-size:16.5px !important;
  }

  .dashboardAppMenuText{
    min-height:22px !important;
    font-size:9.4px !important;
    line-height:1.12 !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE MENU CARD REFINEMENT V3
   =========================================================
   KHUSUS HP <= 740px

   Tujuan:
   - Tetap mempertahankan 8 menu dalam susunan 4 x 2.
   - Nama menu berada DI LUAR card visual icon.
   - Button tetap menjadi area klik penuh, tetapi tidak lagi
     terlihat sebagai card putih besar.
   - Card visual hanya membungkus icon.
   - Padding dan jarak antar menu dipadatkan agar layout lebih
     ringan dan proporsional pada layar HP.
   - Desktop / tablet >740px tidak berubah.
   ========================================================= */
@media (max-width: 740px){
  .dashboardAppMenuSection{
    padding:10px 8px 12px !important;
    border-radius:20px !important;
  }

  .dashboardAppMenuGrid{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    column-gap:8px !important;
    row-gap:13px !important;
    align-items:start !important;
  }

  /*
   * Button menjadi wrapper transparan.
   * Dengan demikian text secara visual berada di luar card icon.
   */
  .dashboardAppMenuCard,
  html[data-theme="dark"] .dashboardAppMenuCard{
    min-height:0 !important;
    padding:2px 0 0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    overflow:visible !important;
    transform:none !important;
  }

  .dashboardAppMenuCard:hover,
  html[data-theme="dark"] .dashboardAppMenuCard:hover{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .dashboardAppMenuCard:active{
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
  }

  /*
   * Card sebenarnya sekarang hanya berada di area icon.
   */
  .dashboardAppMenuIcon{
    width:62px !important;
    height:62px !important;
    min-width:62px !important;
    min-height:62px !important;
    max-width:62px !important;
    max-height:62px !important;
    margin:0 auto !important;
    border-radius:19px !important;
    flex:0 0 62px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(15,159,141,.13) !important;
    box-shadow:
      0 8px 18px rgba(15,23,42,.08),
      0 3px 8px rgba(15,159,141,.07),
      inset 0 1px 0 rgba(255,255,255,.94) !important;
    transition:
      transform .16s ease,
      box-shadow .16s ease,
      border-color .16s ease !important;
  }

  html[data-theme="dark"] .dashboardAppMenuIcon{
    background:rgba(16,43,48,.94) !important;
    border-color:rgba(83,235,232,.14) !important;
    box-shadow:
      0 9px 20px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.055) !important;
  }

  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translateY(-2px) !important;
    border-color:rgba(15,159,141,.28) !important;
    box-shadow:
      0 11px 22px rgba(15,23,42,.11),
      0 5px 12px rgba(15,159,141,.10),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  html[data-theme="dark"] .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    border-color:rgba(83,235,232,.27) !important;
    box-shadow:
      0 12px 24px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.065) !important;
  }

  .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translateY(0) scale(.96) !important;
  }

  .dashboardAppMenuIcon i{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    font-size:25px !important;
    line-height:1 !important;
  }

  /*
   * Text tidak lagi ikut berada di dalam surface/card visual.
   */
  .dashboardAppMenuText{
    width:100% !important;
    min-height:28px !important;
    margin:0 !important;
    padding:0 1px !important;
    color:var(--ink) !important;
    font-size:10.8px !important;
    line-height:1.18 !important;
    font-weight:750 !important;
    letter-spacing:-.012em !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }

  .dashboardAppMenuCard:focus-visible{
    outline:0 !important;
  }
}

/* =========================================================
   HP KECIL <= 380px
   ========================================================= */
@media (max-width: 380px){
  .dashboardAppMenuSection{
    padding:9px 6px 11px !important;
  }

  .dashboardAppMenuGrid{
    column-gap:6px !important;
    row-gap:11px !important;
  }

  .dashboardAppMenuCard,
  html[data-theme="dark"] .dashboardAppMenuCard{
    padding-top:1px !important;
    gap:6px !important;
  }

  .dashboardAppMenuIcon{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    max-width:56px !important;
    max-height:56px !important;
    flex-basis:56px !important;
    border-radius:17px !important;
  }

  .dashboardAppMenuIcon i{
    font-size:23px !important;
  }

  .dashboardAppMenuText{
    min-height:26px !important;
    font-size:10px !important;
    line-height:1.16 !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE SERVICE ICON COLOR FIX V4
   =========================================================
   KHUSUS HP <= 740px

   Tujuan:
   - Menghilangkan icon card yang terlihat putih pada menu
     Kesehatan, Pengobatan, dan Vaksin.
   - Seluruh 8 icon card sekarang memiliki warna gradient.
   - Pola warna dibuat berulang:
       1 / 4 / 7 = teal RSAB
       2 / 5 / 8 = green-soft
       3 / 6     = lime
   - Text tetap berada di luar card icon.
   - Layout 4 x 2, ukuran, padding, routing, dan desktop
     tidak diubah.
   ========================================================= */
@media (max-width: 740px){
  /* 1, 4, 7 - teal */
  .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 38%, rgba(255,255,255,0) 74%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.28), transparent 36%),
      linear-gradient(145deg, #0f9f8d 0%, #0f9f8d 62%, #0e9382 100%) !important;
    border-color:rgba(184,252,248,.64) !important;
    box-shadow:
      0 8px 18px rgba(15,159,141,.25),
      inset 0 1px 0 rgba(255,255,255,.58) !important;
  }

  /* 2, 5, 8 - green soft */
  .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,0) 76%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.38), transparent 38%),
      linear-gradient(145deg, #52b99a 0%, #72c588 44%, #add252 100%) !important;
    border-color:rgba(226,248,207,.82) !important;
    box-shadow:
      0 8px 18px rgba(105,187,126,.24),
      inset 0 1px 0 rgba(255,255,255,.64) !important;
  }

  /* 3, 6 - lime */
  .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.38), rgba(255,255,255,0) 78%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.46), transparent 38%),
      linear-gradient(145deg, #9dca58 0%, #bad33f 40%, #d6df50 100%) !important;
    border-color:rgba(248,255,194,.90) !important;
    box-shadow:
      0 8px 18px rgba(188,207,63,.25),
      inset 0 1px 0 rgba(255,255,255,.70) !important;
  }

  .dashboardAppMenuIcon i{
    color:#ffffff !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:drop-shadow(0 1px 1.5px rgba(0,70,66,.22)) !important;
  }
}


/* =========================================================
   BUMIL KU - SELECTED MOBILE DASHBOARD CONCEPT V5
   =========================================================
   ACUAN VISUAL:
   - Mockup pilihan pengguna: Brand Header + Floating Service Deck.
   - KHUSUS HP <= 740px.
   - Desktop / laptop / tablet > 740px tetap memakai layout existing.

   PRIORITAS:
   1. Header brand Bumil Ku + identitas Peningkatan Mutu.
   2. Hero personal gradient dengan avatar + status kehamilan.
   3. Card pendamping kehamilan.
   4. Floating menu panel 4 x 2.
   5. Card pemantauan harian + tombol Lengkapi.
   6. Bottom navigation premium.
   ========================================================= */

.dashboardMobileBrandHeader,
.dashboardHeroSupport,
.dashboardPregnancyStatusCard,
.dashboardMobileInfoChevron,
.dashboardMobileDailyCard{
  display:none;
}

@media (max-width:740px){
  /* -------------------------------------------------------
     PAGE / CONTENT RHYTHM
     ------------------------------------------------------- */
  .dashboard-page{
    background:#f8fcfb !important;
  }

  .dashboard-page .overlay{
    background:
      radial-gradient(circle at 5% 5%, rgba(94,222,231,.12), transparent 30%),
      radial-gradient(circle at 95% 42%, rgba(195,218,62,.08), transparent 28%),
      linear-gradient(180deg, #fbfefd 0%, #f7fbfa 48%, #ffffff 100%) !important;
  }

  .dashboardLayout{
    padding:0 12px 24px !important;
  }

  .dashboardContent,
  .dashboardPanels,
  .dashboardOverviewGrid{
    gap:0 !important;
  }

  .dashboardOverviewGrid{
    overflow:visible !important;
  }

  /* -------------------------------------------------------
     MOBILE BRAND HEADER
     ------------------------------------------------------- */
  .dashboardMobileBrandHeader{
    width:100% !important;
    min-height:80px !important;
    margin:0 !important;
    padding:14px 4px 12px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    align-items:center !important;
    gap:8px !important;
    position:relative !important;
    z-index:14 !important;
    background:transparent !important;
  }

  .dashboardMobileBrandLockup{
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    color:inherit !important;
    text-decoration:none !important;
  }

  .dashboardMobileBrandLogo{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    object-fit:contain !important;
    display:block !important;
    filter:drop-shadow(0 7px 10px rgba(15,159,141,.16)) !important;
  }

  .dashboardMobileBrandCopy{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    line-height:1.05 !important;
  }

  .dashboardMobileBrandCopy strong{
    color:#0F9F8D !important;
    font-size:19px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:-.045em !important;
    white-space:nowrap !important;
  }

  .dashboardMobileBrandCopy small{
    color:#607789 !important;
    font-size:8px !important;
    line-height:1.1 !important;
    font-weight:600 !important;
    white-space:nowrap !important;
  }

  .dashboardMobileInstitution{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    min-width:0 !important;
  }

  .dashboardMobileInstitutionDivider{
    width:1px !important;
    height:36px !important;
    flex:0 0 auto !important;
    background:linear-gradient(180deg, transparent, rgba(15,159,141,.28), transparent) !important;
  }

  .dashboardMobileInstitutionCopy{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
  }

  .dashboardMobileInstitutionCopy small{
    color:#607789 !important;
    font-size:6.2px !important;
    line-height:1 !important;
    font-weight:700 !important;
    white-space:nowrap !important;
  }

  .dashboardMobileInstitutionCopy img{
    width:auto !important;
    height:22px !important;
    max-width:82px !important;
    object-fit:contain !important;
    object-position:left center !important;
    display:block !important;
  }

  .dashboardMobileHeaderActions{
    display:flex !important;
    align-items:center !important;
    gap:3px !important;
  }

  .dashboardHeroBellBtn,
  .dashboardHeroBurgerBtn,
  .dashboardHeroCard > .dashboardBurgerBtn{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    bottom:auto !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    display:inline-grid !important;
    place-items:center !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:13px !important;
    background:transparent !important;
    color:#557083 !important;
    box-shadow:none !important;
    cursor:pointer !important;
    transform:none !important;
  }

  .dashboardHeroBellBtn i,
  .dashboardHeroBurgerBtn i,
  .dashboardHeroCard > .dashboardBurgerBtn i{
    display:block !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    font-size:21px !important;
    line-height:1 !important;
    color:currentColor !important;
    transform:none !important;
  }

  .dashboardHeroBellBtn:hover,
  .dashboardHeroBurgerBtn:hover,
  .dashboardHeroCard > .dashboardBurgerBtn:hover{
    color:#0F9F8D !important;
    background:rgba(15,159,141,.075) !important;
  }

  .dashboardMobileNotificationDot{
    position:absolute !important;
    top:2px !important;
    right:1px !important;
    min-width:17px !important;
    height:17px !important;
    padding:0 4px !important;
    border-radius:999px !important;
    display:grid !important;
    place-items:center !important;
    color:#ffffff !important;
    background:#0F9F8D !important;
    border:2px solid #ffffff !important;
    font-size:8px !important;
    line-height:1 !important;
    font-weight:800 !important;
    box-shadow:0 3px 8px rgba(15,159,141,.18) !important;
  }

  /* -------------------------------------------------------
     HERO PERSONAL
     ------------------------------------------------------- */
  .dashboardHeroCard{
    width:100% !important;
    max-width:100% !important;
    min-height:210px !important;
    margin:0 !important;
    padding:24px 18px 20px !important;
    border-radius:24px !important;
    overflow:hidden !important;
    position:relative !important;
    isolation:isolate !important;
    background:
      radial-gradient(circle at 88% 8%, rgba(221,255,163,.34) 0%, rgba(221,255,163,0) 34%),
      radial-gradient(circle at 10% 105%, rgba(0,115,106,.18) 0%, rgba(0,115,106,0) 38%),
      linear-gradient(112deg, #22b8ae 0%, #39c8b4 50%, #c7df4a 118%) !important;
    border:1px solid rgba(255,255,255,.42) !important;
    box-shadow:
      0 16px 34px rgba(15,159,141,.16),
      0 6px 14px rgba(14,147,130,.08),
      inset 0 1px 0 rgba(255,255,255,.40) !important;
  }

  .dashboardHeroCard::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    width:230px !important;
    height:230px !important;
    top:68px !important;
    right:-85px !important;
    border-radius:50% !important;
    background:radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 68%) !important;
    pointer-events:none !important;
  }

  .dashboardHeroWatermark{
    position:absolute !important;
    z-index:0 !important;
    right:-6px !important;
    bottom:-22px !important;
    display:grid !important;
    place-items:center !important;
    width:126px !important;
    height:126px !important;
    color:rgba(255,255,255,.10) !important;
    pointer-events:none !important;
  }

  .dashboardHeroWatermark i{
    font-size:102px !important;
  }

  .dashboardHeroIntro{
    width:calc(100% - 108px) !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    position:relative !important;
    z-index:2 !important;
    transform:none !important;
  }

  .dashboardHeroProfileMedia{
    flex:0 0 auto !important;
  }

  .dashboardHeroUserPhoto{
    width:62px !important;
    height:62px !important;
    min-width:62px !important;
    min-height:62px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    background:#ffffff !important;
    border:3px solid rgba(255,255,255,.88) !important;
    box-shadow:0 10px 24px rgba(0,86,81,.16) !important;
  }

  .dashboardHeroText{
    min-width:0 !important;
    flex:1 1 auto !important;
    gap:0 !important;
  }

  .dashboardHeroTitle,
  .dashboardHeroTitleSplit{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:2px !important;
    margin:0 !important;
    font-size:22px !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
  }

  .dashboardWelcomeGreeting{
    display:block !important;
    color:#ffffff !important;
    font-size:19px !important;
    line-height:1.08 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
  }

  .dashboardWelcomeName{
    display:block !important;
    max-width:100% !important;
    color:#ffffff !important;
    font-size:20px !important;
    line-height:1.12 !important;
    font-weight:500 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  .dashboardHeroText .dashboardHeroSub,
  .dashboardHeroSub{
    display:none !important;
  }

  .dashboardHeroSupport{
    width:calc(100% - 116px) !important;
    margin:23px 0 0 !important;
    padding:0 !important;
    position:relative !important;
    z-index:2 !important;
    display:flex !important;
    align-items:flex-start !important;
    gap:8px !important;
    color:#ffffff !important;
    font-size:13px !important;
    line-height:1.42 !important;
    font-weight:500 !important;
  }

  .dashboardHeroSupport i{
    margin-top:2px !important;
    flex:0 0 auto !important;
    font-size:14px !important;
    color:#ffffff !important;
  }

  .dashboardPregnancyStatusCard{
    position:absolute !important;
    z-index:3 !important;
    top:20px !important;
    right:14px !important;
    width:104px !important;
    min-height:62px !important;
    padding:10px 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    border-radius:18px !important;
    color:#ffffff !important;
    background:rgba(255,255,255,.12) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
  }

  .dashboardPregnancyStatusIcon{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    display:grid !important;
    place-items:center !important;
    color:#ffffff !important;
    font-size:14px !important;
  }

  .dashboardPregnancyStatusCopy{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
  }

  .dashboardPregnancyStatusCopy strong{
    color:#ffffff !important;
    font-size:10px !important;
    line-height:1.1 !important;
    font-weight:800 !important;
  }

  .dashboardPregnancyStatusCopy small{
    color:rgba(255,255,255,.90) !important;
    font-size:8.5px !important;
    line-height:1.1 !important;
    font-weight:500 !important;
  }

  /* -------------------------------------------------------
     INFO CARD
     ------------------------------------------------------- */
  .dashboardMobileInfoCardSection{
    width:100% !important;
    margin:14px 0 0 !important;
    padding:0 !important;
    display:block !important;
  }

  .dashboardMobileInfoCard{
    width:100% !important;
    min-height:96px !important;
    margin:0 !important;
    padding:14px 14px !important;
    display:grid !important;
    grid-template-columns:52px minmax(0,1fr) 20px !important;
    align-items:center !important;
    gap:12px !important;
    border-radius:22px !important;
    overflow:hidden !important;
    position:relative !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(58,105,119,.11) !important;
    box-shadow:
      0 14px 28px rgba(16,70,80,.09),
      0 4px 10px rgba(16,70,80,.04),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  .dashboardMobileInfoCard::before{
    display:none !important;
  }

  .dashboardMobileInfoCardIcon{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    color:#0F9F8D !important;
    background:linear-gradient(145deg, #f0fcf9, #ffffff) !important;
    border:1px solid rgba(15,159,141,.14) !important;
    box-shadow:0 8px 18px rgba(15,159,141,.09) !important;
    position:relative !important;
    z-index:1 !important;
  }

  .dashboardMobileInfoCardIcon i{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    color:inherit !important;
    font-size:21px !important;
  }

  .dashboardMobileInfoCardImg{
    display:none !important;
  }

  .dashboardMobileInfoCardBody{
    min-width:0 !important;
    gap:4px !important;
  }

  .dashboardMobileInfoCardTitle{
    margin:0 !important;
    color:#17384c !important;
    font-size:13.2px !important;
    line-height:1.22 !important;
    font-weight:800 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  .dashboardMobileInfoCardText{
    margin:0 !important;
    color:#65788a !important;
    font-size:10.4px !important;
    line-height:1.38 !important;
    font-weight:500 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .dashboardMobileInfoChevron{
    display:grid !important;
    place-items:center !important;
    width:20px !important;
    height:36px !important;
    color:#5d7689 !important;
    font-size:16px !important;
  }

  /* -------------------------------------------------------
     FLOATING MENU PANEL
     ------------------------------------------------------- */
  .dashboardAppMenuSection{
    width:calc(100% + 16px) !important;
    max-width:none !important;
    margin:14px -8px 0 !important;
    padding:15px 12px 17px !important;
    border-radius:24px !important;
    overflow:hidden !important;
    position:relative !important;
    background:
      radial-gradient(circle at 96% 4%, rgba(94,222,231,.10), transparent 32%),
      radial-gradient(circle at 2% 94%, rgba(195,218,62,.08), transparent 30%),
      rgba(255,255,255,.97) !important;
    border:1px solid rgba(15,159,141,.09) !important;
    box-shadow:
      0 18px 34px rgba(16,70,80,.12),
      0 6px 14px rgba(16,70,80,.05),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }

  .dashboardAppMenuSection::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    width:180px !important;
    height:180px !important;
    top:-100px !important;
    right:-70px !important;
    border-radius:50% !important;
    background:radial-gradient(circle, rgba(94,222,231,.10), transparent 70%) !important;
  }

  .dashboardAppMenuSection::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    width:170px !important;
    height:170px !important;
    left:-88px !important;
    bottom:-92px !important;
    border-radius:50% !important;
    background:radial-gradient(circle, rgba(195,218,62,.08), transparent 70%) !important;
  }

  .dashboardMobileMenuTitle{
    width:100% !important;
    margin:0 0 15px !important;
    padding:0 2px !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    position:relative !important;
    z-index:3 !important;
    color:#17384c !important;
    font-size:18px !important;
    line-height:1.1 !important;
    font-weight:800 !important;
    letter-spacing:-.03em !important;
  }

  .dashboardMobileMenuTitleIcon{
    width:24px !important;
    height:24px !important;
    display:grid !important;
    place-items:center !important;
    flex:0 0 auto !important;
    color:#0F9F8D !important;
    font-size:15px !important;
  }

  .dashboardMobileMenuTitleIcon i{
    color:inherit !important;
  }

  .dashboardAppMenuGrid{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:8px !important;
    row-gap:17px !important;
    align-items:start !important;
    position:relative !important;
    z-index:3 !important;
  }

  .dashboardAppMenuCard,
  html[data-theme="dark"] .dashboardAppMenuCard{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    transform:none !important;
  }

  .dashboardAppMenuIcon{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    max-width:54px !important;
    max-height:54px !important;
    flex:0 0 54px !important;
    margin:0 !important;
    border-radius:16px !important;
    box-shadow:
      0 9px 18px rgba(15,159,141,.13),
      0 3px 7px rgba(16,70,80,.05),
      inset 0 1px 0 rgba(255,255,255,.60) !important;
  }

  .dashboardAppMenuIcon i{
    font-size:22px !important;
  }

  .dashboardAppMenuText{
    width:100% !important;
    min-height:24px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    color:#17384c !important;
    font-size:9.4px !important;
    line-height:1.16 !important;
    font-weight:800 !important;
    letter-spacing:-.015em !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
  }

  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translateY(-2px) !important;
  }

  .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translateY(0) scale(.96) !important;
  }

  /* -------------------------------------------------------
     DAILY MONITOR CARD
     ------------------------------------------------------- */
  .dashboardMobileDailyCard{
    width:100% !important;
    min-height:84px !important;
    margin:14px 0 0 !important;
    padding:13px 13px !important;
    display:grid !important;
    grid-template-columns:50px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:11px !important;
    border-radius:22px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(58,105,119,.11) !important;
    box-shadow:
      0 14px 28px rgba(16,70,80,.085),
      0 4px 10px rgba(16,70,80,.04),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  .dashboardMobileDailyIcon{
    width:50px !important;
    height:50px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:17px !important;
    color:#ffffff !important;
    background:
      linear-gradient(145deg, #62d4bc 0%, #0F9F8D 100%) !important;
    border:1px solid rgba(255,255,255,.52) !important;
    box-shadow:
      0 9px 18px rgba(15,159,141,.17),
      inset 0 1px 0 rgba(255,255,255,.42) !important;
  }

  .dashboardMobileDailyIcon i{
    font-size:23px !important;
  }

  .dashboardMobileDailyCopy{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
  }

  .dashboardMobileDailyCopy strong{
    color:#17384c !important;
    font-size:11.4px !important;
    line-height:1.24 !important;
    font-weight:800 !important;
  }

  .dashboardMobileDailyCopy small{
    color:#65788a !important;
    font-size:9.4px !important;
    line-height:1.34 !important;
    font-weight:500 !important;
  }

  .dashboardMobileDailyAction{
    min-width:72px !important;
    min-height:34px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#ffffff !important;
    background:
      linear-gradient(105deg, #0b8f84 0%, #25b79a 100%) !important;
    box-shadow:0 8px 18px rgba(15,159,141,.17) !important;
    text-decoration:none !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:800 !important;
  }

  .dashboardMobileDailyAction:active{
    transform:scale(.97) !important;
  }

  /* -------------------------------------------------------
     HIDE EMPTY DESKTOP TECHNOLOGY SECTION ON MOBILE
     ------------------------------------------------------- */
  .dashboardTechnologySection:empty{
    display:none !important;
    margin:0 !important;
  }

  /* -------------------------------------------------------
     BOTTOM NAV
     ------------------------------------------------------- */
  .dashboard-page{
    padding-bottom:calc(88px + env(safe-area-inset-bottom)) !important;
  }

  .siteFooter{
    padding:0 10px max(8px, env(safe-area-inset-bottom)) !important;
  }

  .dashboardMobileFooterNav{
    width:min(calc(100% - 0px), 430px) !important;
    max-width:430px !important;
    min-height:66px !important;
    height:66px !important;
    padding:7px !important;
    border-radius:23px !important;
    background:rgba(255,255,255,.97) !important;
    border:1px solid rgba(15,159,141,.11) !important;
    box-shadow:
      0 16px 34px rgba(16,70,80,.13),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }

  .dashboardMobileFooterBtn{
    min-height:50px !important;
    height:50px !important;
    padding:6px 4px 5px !important;
    border-radius:17px !important;
    gap:3px !important;
  }

  .dashboardMobileFooterBtn i{
    font-size:19px !important;
  }

  .dashboardMobileFooterBtn span{
    font-size:9.6px !important;
  }

  .dashboardMobileFooterBtn.is-active{
    background:
      linear-gradient(105deg, #0b8f84 0%, #25b79a 100%) !important;
    box-shadow:
      0 9px 20px rgba(15,159,141,.22),
      inset 0 1px 0 rgba(255,255,255,.30) !important;
  }

  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"] .dashboard-page{
    background:#07181c !important;
  }

  html[data-theme="dark"] .dashboard-page .overlay{
    background:
      radial-gradient(circle at 8% 8%, rgba(15,159,141,.12), transparent 30%),
      radial-gradient(circle at 92% 42%, rgba(195,218,62,.045), transparent 28%),
      linear-gradient(180deg, #07181c 0%, #0b2024 52%, #07181c 100%) !important;
  }

  html[data-theme="dark"] .dashboardMobileBrandCopy strong,
  html[data-theme="dark"] .dashboardMobileMenuTitle,
  html[data-theme="dark"] .dashboardAppMenuText,
  html[data-theme="dark"] .dashboardMobileInfoCardTitle,
  html[data-theme="dark"] .dashboardMobileDailyCopy strong{
    color:#eafcff !important;
  }

  html[data-theme="dark"] .dashboardMobileBrandCopy small,
  html[data-theme="dark"] .dashboardMobileInstitutionCopy small,
  html[data-theme="dark"] .dashboardMobileInfoCardText,
  html[data-theme="dark"] .dashboardMobileDailyCopy small{
    color:#aac8cc !important;
  }

  html[data-theme="dark"] .dashboardMobileBrandHeader{
    background:transparent !important;
  }

  html[data-theme="dark"] .dashboardHeroBellBtn,
  html[data-theme="dark"] .dashboardHeroBurgerBtn{
    color:#c5e4e7 !important;
  }

  html[data-theme="dark"] .dashboardMobileNotificationDot{
    border-color:#07181c !important;
  }

  html[data-theme="dark"] .dashboardMobileInfoCard,
  html[data-theme="dark"] .dashboardAppMenuSection,
  html[data-theme="dark"] .dashboardMobileDailyCard{
    background:rgba(16,43,48,.95) !important;
    border-color:rgba(255,255,255,.08) !important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.055) !important;
  }

  html[data-theme="dark"] .dashboardMobileInfoCardIcon{
    color:#53ebe8 !important;
    background:rgba(15,159,141,.09) !important;
    border-color:rgba(83,235,232,.13) !important;
  }

  html[data-theme="dark"] .dashboardMobileInfoChevron{
    color:#aac8cc !important;
  }

  html[data-theme="dark"] .dashboardPregnancyStatusCard{
    background:rgba(7,24,28,.16) !important;
    border-color:rgba(255,255,255,.16) !important;
  }
}

@media (max-width:420px){
  .dashboardMobileBrandHeader{
    min-height:74px !important;
    padding:12px 2px 10px !important;
    gap:5px !important;
  }

  .dashboardMobileBrandLogo{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
  }

  .dashboardMobileBrandCopy strong{
    font-size:17px !important;
  }

  .dashboardMobileBrandCopy small{
    font-size:7.4px !important;
  }

  .dashboardMobileInstitutionCopy img{
    height:19px !important;
    max-width:70px !important;
  }

  .dashboardMobileInstitutionCopy small{
    font-size:5.8px !important;
  }

  .dashboardHeroBellBtn,
  .dashboardHeroBurgerBtn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }

  .dashboardHeroBellBtn i,
  .dashboardHeroBurgerBtn i{
    font-size:19px !important;
  }

  .dashboardHeroCard{
    min-height:198px !important;
    padding:21px 15px 18px !important;
    border-radius:22px !important;
  }

  .dashboardHeroIntro{
    width:calc(100% - 100px) !important;
    gap:10px !important;
  }

  .dashboardHeroUserPhoto{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
  }

  .dashboardWelcomeGreeting{
    font-size:17px !important;
  }

  .dashboardWelcomeName{
    font-size:18px !important;
  }

  .dashboardHeroSupport{
    width:calc(100% - 105px) !important;
    margin-top:20px !important;
    font-size:11.8px !important;
  }

  .dashboardPregnancyStatusCard{
    top:17px !important;
    right:11px !important;
    width:96px !important;
    min-height:58px !important;
    padding:9px 8px !important;
    border-radius:16px !important;
  }

  .dashboardPregnancyStatusCopy strong{
    font-size:9.2px !important;
  }

  .dashboardPregnancyStatusCopy small{
    font-size:7.8px !important;
  }

  .dashboardMobileInfoCard{
    min-height:90px !important;
    padding:12px !important;
    grid-template-columns:48px minmax(0,1fr) 18px !important;
    gap:10px !important;
  }

  .dashboardMobileInfoCardIcon{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
  }

  .dashboardMobileInfoCardTitle{
    font-size:12.2px !important;
  }

  .dashboardMobileInfoCardText{
    font-size:9.6px !important;
  }

  .dashboardAppMenuSection{
    margin-top:12px !important;
    padding:14px 9px 16px !important;
  }

  .dashboardMobileMenuTitle{
    margin-bottom:13px !important;
    font-size:17px !important;
  }

  .dashboardAppMenuGrid{
    column-gap:6px !important;
    row-gap:15px !important;
  }

  .dashboardAppMenuIcon{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    max-width:50px !important;
    max-height:50px !important;
    flex-basis:50px !important;
    border-radius:15px !important;
  }

  .dashboardAppMenuIcon i{
    font-size:20px !important;
  }

  .dashboardAppMenuText{
    font-size:8.8px !important;
  }

  .dashboardMobileDailyCard{
    min-height:78px !important;
    padding:11px !important;
    grid-template-columns:46px minmax(0,1fr) auto !important;
    gap:9px !important;
  }

  .dashboardMobileDailyIcon{
    width:46px !important;
    height:46px !important;
    border-radius:15px !important;
  }

  .dashboardMobileDailyCopy strong{
    font-size:10.4px !important;
  }

  .dashboardMobileDailyCopy small{
    font-size:8.7px !important;
  }

  .dashboardMobileDailyAction{
    min-width:64px !important;
    min-height:31px !important;
    padding:0 10px !important;
    font-size:9.2px !important;
  }
}


/* =========================================================
   BUMIL KU - MOBILE DASHBOARD NAVBAR INDEX FRAME V6
   =========================================================
   ACUAN:
   - Frame/navbar mobile pada index Bumil Ku.
   - Brand Bumil Ku di kiri.
   - Identitas Peningkatan Mutu di tengah.
   - Bell icon-only + grid dalam neumorphism card di kanan.

   KHUSUS:
   - Tampilan HP dashboard <=740px.
   - Desktop/laptop tidak disentuh.
   - ID tombol bell dan grid tetap sama agar JavaScript existing
     tidak berubah.
   ========================================================= */

@media (max-width:740px){
  .dashboardMobileBrandHeader{
    width:calc(100% + 24px) !important;
    max-width:none !important;
    min-height:72px !important;

    margin:0 -12px !important;
    padding:
      max(7px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      7px
      max(12px, env(safe-area-inset-left)) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:5px !important;

    position:relative !important;
    z-index:14 !important;

    background:#ffffff !important;
    background-image:none !important;

    border:0 !important;
    border-bottom:1px solid rgba(58,105,119,.10) !important;
    border-radius:0 !important;

    box-shadow:
      0 7px 18px rgba(16,70,80,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    overflow:visible !important;
  }

  html[data-theme="dark"] .dashboardMobileBrandHeader{
    background:#102b30 !important;
    border-bottom-color:rgba(255,255,255,.075) !important;
    box-shadow:
      0 8px 20px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  .dashboardMobileBrandHeader::before,
  .dashboardMobileBrandHeader::after{
    content:none !important;
    display:none !important;
  }

  /* -------------------------------------------------------
     BRAND LOCKUP - MENGIKUTI PROPORSI INDEX MOBILE
     ------------------------------------------------------- */
  .dashboardMobileBrandLockup{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:148px !important;

    display:flex !important;
    align-items:center !important;
    gap:3px !important;

    margin:0 !important;
    padding:0 !important;

    color:inherit !important;
    text-decoration:none !important;
  }

  .dashboardMobileBrandLogoShadow{
    position:relative !important;
    display:inline-grid !important;
    place-items:center !important;
    flex:0 0 auto !important;
    overflow:visible !important;

    filter:
      drop-shadow(0 2px 3px rgba(17,72,79,.16))
      drop-shadow(0 5px 8px rgba(16,70,80,.15))
      drop-shadow(0 10px 15px rgba(14,147,130,.11)) !important;
  }

  .dashboardMobileBrandLogoWrap{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;

    display:grid !important;
    place-items:center !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    overflow:visible !important;
  }

  .dashboardMobileBrandLogo{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    min-height:42px !important;
    max-height:42px !important;

    display:block !important;
    object-fit:contain !important;
    object-position:center !important;

    margin:0 !important;
    padding:0 !important;

    filter:none !important;
    transform:translate3d(-.4%, 1.3%, 0) !important;
  }

  .dashboardMobileBrandCopy{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:96px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;

    gap:0 !important;
    margin-left:-1px !important;
    line-height:1 !important;
  }

  .dashboardMobileBrandCopy strong{
    display:inline-block !important;

    max-width:none !important;
    margin:0 !important;
    padding:0 !important;

    color:#0e9382 !important;

    background:
      linear-gradient(
        90deg,
        #0e9382 0%,
        #0f9f8d 24%,
        #43b796 46%,
        #79c875 66%,
        #a8d653 83%,
        #c4d63c 100%
      ) !important;

    background-clip:text !important;
    -webkit-background-clip:text !important;
    -webkit-text-fill-color:transparent !important;

    font-size:18px !important;
    line-height:1.02 !important;
    font-weight:800 !important;
    letter-spacing:-.040em !important;

    white-space:nowrap !important;
    overflow:visible !important;

    filter:
      drop-shadow(0 1px 1px rgba(14,93,82,.13))
      drop-shadow(0 2px 4px rgba(16,70,80,.075)) !important;
  }

  .dashboardMobileBrandCopy small{
    display:block !important;

    max-width:none !important;
    margin:3px 0 0 !important;
    padding:0 !important;

    color:#65788a !important;

    font-size:7.8px !important;
    line-height:1.05 !important;
    font-weight:600 !important;
    letter-spacing:0 !important;

    white-space:nowrap !important;
    overflow:visible !important;
  }

  html[data-theme="dark"] .dashboardMobileBrandCopy small{
    color:#aac8cc !important;
  }

  /* -------------------------------------------------------
     INSTITUTION LOCKUP
     ------------------------------------------------------- */
  .dashboardMobileInstitution{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:108px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    gap:7px !important;
    margin:0 0 0 1px !important;
    padding:0 !important;
  }

  .dashboardMobileInstitutionDivider{
    width:1px !important;
    min-width:1px !important;
    height:34px !important;
    flex:0 0 1px !important;

    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(58,105,119,.16) 16%,
        rgba(15,159,141,.28) 50%,
        rgba(58,105,119,.16) 84%,
        transparent 100%
      ) !important;
  }

  .dashboardMobileInstitutionCopy{
    min-width:0 !important;
    max-width:100px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;

    gap:3px !important;
  }

  .dashboardMobileInstitutionCopy small{
    display:block !important;

    width:100% !important;
    max-width:92px !important;

    margin:0 !important;
    padding:0 !important;

    color:#65788a !important;

    font-size:6.4px !important;
    line-height:1.08 !important;
    font-weight:600 !important;
    letter-spacing:.012em !important;

    white-space:normal !important;
    text-align:left !important;
  }

  .dashboardMobileInstitutionCopy img{
    display:block !important;

    width:auto !important;
    height:auto !important;
    max-width:92px !important;
    max-height:22px !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:left center !important;
  }

  html[data-theme="dark"] .dashboardMobileInstitutionCopy small{
    color:#aac8cc !important;
  }

  html[data-theme="dark"] .dashboardMobileInstitutionDivider{
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(255,255,255,.07) 16%,
        rgba(15,159,141,.22) 50%,
        rgba(255,255,255,.07) 84%,
        transparent 100%
      ) !important;
  }

  html[data-theme="dark"] .dashboardMobileInstitutionCopy img{
    box-sizing:content-box !important;
    padding:2px 3px !important;
    background:#ffffff !important;
    border-radius:5px !important;
    box-shadow:0 3px 8px rgba(0,0,0,.14) !important;
  }

  /* -------------------------------------------------------
     HEADER ACTIONS - BELL ICON ONLY + MENU NEUMORPHISM
     ------------------------------------------------------- */
  .dashboardMobileHeaderActions{
    flex:0 0 auto !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    gap:8px !important;
    margin:0 0 0 auto !important;
    padding:0 !important;

    overflow:visible !important;
  }

  .dashboardHeroBellBtn{
    position:relative !important;

    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#607789 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    transform:none !important;
  }

  .dashboardHeroBellBtn:hover{
    color:#0f9f8d !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:translateY(-1px) !important;
  }

  .dashboardHeroBellBtn:active{
    transform:translateY(0) scale(.92) !important;
  }

  .dashboardHeroBellBtn i,
  .dashboardHeroBellBtn .svg-inline--fa{
    color:currentColor !important;
    font-size:21px !important;
    line-height:1 !important;
    transform:none !important;

    filter:
      drop-shadow(0 2px 3px rgba(14,147,130,.08)) !important;
  }

  html[data-theme="dark"] .dashboardHeroBellBtn{
    color:#b2c9ce !important;
  }

  html[data-theme="dark"] .dashboardHeroBellBtn:hover{
    color:#53ebe8 !important;
  }

  .dashboardMobileNotificationDot{
    top:-1px !important;
    right:-2px !important;

    min-width:17px !important;
    height:17px !important;

    padding:0 4px !important;

    color:#ffffff !important;
    background:#0f9f8d !important;

    border:2px solid #ffffff !important;
    border-radius:999px !important;

    box-shadow:
      0 3px 8px rgba(15,159,141,.18) !important;

    font-size:8px !important;
    line-height:1 !important;
    font-weight:800 !important;
  }

  html[data-theme="dark"] .dashboardMobileNotificationDot{
    border-color:#102b30 !important;
  }

  .dashboardMobileMenuNeumorph{
    position:relative !important;

    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    flex:0 0 42px !important;

    margin:0 !important;
    padding:4px !important;

    display:grid !important;
    place-items:center !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;

    border:1px solid rgba(255,255,255,.90) !important;
    border-radius:13px !important;

    box-shadow:
      7px 7px 15px rgba(26,72,80,.14),
      -5px -5px 12px rgba(255,255,255,.96),
      inset 1px 1px 1px rgba(255,255,255,.95),
      inset -1px -1px 1px rgba(74,111,120,.045) !important;

    overflow:visible !important;
  }

  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn{
    position:relative !important;
    inset:auto !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#0f9f8d !important;
    background:transparent !important;

    border:0 !important;
    border-radius:9px !important;

    box-shadow:none !important;
    transform:none !important;
  }

  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn:hover{
    color:#0e9382 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn:active{
    transform:scale(.94) !important;
  }

  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn i,
  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn .fa-grid-round-4,
  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn .svg-inline--fa{
    color:currentColor !important;
    font-size:26px !important;
    line-height:1 !important;
    transform:none !important;

    filter:
      drop-shadow(0 2px 3px rgba(14,147,130,.13)) !important;
  }

  html[data-theme="dark"] .dashboardMobileMenuNeumorph{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 48%,
        #0b2227 100%
      ) !important;

    border-color:rgba(255,255,255,.055) !important;

    box-shadow:
      7px 7px 15px rgba(0,0,0,.32),
      -4px -4px 10px rgba(40,78,84,.20),
      inset 1px 1px 1px rgba(255,255,255,.045),
      inset -1px -1px 1px rgba(0,0,0,.20) !important;
  }

  html[data-theme="dark"]
  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn{
    color:#53ebe8 !important;
  }
}

/* =========================================================
   HP COMPACT - PROPORSI SAMA DENGAN INDEX
   ========================================================= */
@media (max-width:420px){
  .dashboardMobileBrandHeader{
    min-height:68px !important;

    padding:
      max(4px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      4px
      max(12px, env(safe-area-inset-left)) !important;

    gap:4px !important;
  }

  .dashboardMobileBrandLockup{
    max-width:120px !important;
    gap:2px !important;
  }

  .dashboardMobileBrandLogoWrap{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
  }

  .dashboardMobileBrandLogo{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    min-height:38px !important;
    max-height:38px !important;
  }

  .dashboardMobileBrandCopy{
    max-width:90px !important;
  }

  .dashboardMobileBrandCopy strong{
    font-size:16.8px !important;
    letter-spacing:-.042em !important;
  }

  .dashboardMobileBrandCopy small{
    margin-top:2px !important;
    font-size:7.2px !important;
  }

  .dashboardMobileInstitution{
    gap:6px !important;
    max-width:78px !important;
    margin-left:1px !important;
  }

  .dashboardMobileInstitutionDivider{
    height:31px !important;
  }

  .dashboardMobileInstitutionCopy{
    max-width:72px !important;
    gap:2px !important;
  }

  .dashboardMobileInstitutionCopy small{
    max-width:72px !important;
    font-size:5.9px !important;
    line-height:1.06 !important;
  }

  .dashboardMobileInstitutionCopy img{
    max-width:72px !important;
    max-height:20px !important;
  }

  .dashboardMobileHeaderActions{
    gap:7px !important;
  }

  .dashboardHeroBellBtn{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
  }

  .dashboardHeroBellBtn i,
  .dashboardHeroBellBtn .svg-inline--fa{
    font-size:20px !important;
  }

  .dashboardMobileMenuNeumorph{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    flex-basis:40px !important;

    padding:4px !important;
    border-radius:12px !important;
  }

  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn i,
  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn .fa-grid-round-4,
  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn .svg-inline--fa{
    font-size:25px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL
   ========================================================= */
@media (max-width:350px){
  .dashboardMobileBrandHeader{
    padding-left:max(10px, env(safe-area-inset-left)) !important;
    padding-right:max(10px, env(safe-area-inset-right)) !important;
    gap:3px !important;
  }

  .dashboardMobileBrandLockup{
    max-width:110px !important;
    gap:1px !important;
  }

  .dashboardMobileBrandLogoWrap{
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
  }

  .dashboardMobileBrandLogo{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    min-height:34px !important;
    max-height:34px !important;
  }

  .dashboardMobileBrandCopy{
    max-width:78px !important;
  }

  .dashboardMobileBrandCopy strong{
    font-size:15.2px !important;
  }

  .dashboardMobileBrandCopy small{
    font-size:6.4px !important;
  }

  .dashboardMobileInstitution{
    gap:5px !important;
    max-width:66px !important;
  }

  .dashboardMobileInstitutionDivider{
    height:28px !important;
  }

  .dashboardMobileInstitutionCopy{
    max-width:60px !important;
  }

  .dashboardMobileInstitutionCopy small{
    max-width:60px !important;
    font-size:5.35px !important;
  }

  .dashboardMobileInstitutionCopy img{
    max-width:60px !important;
    max-height:18px !important;
  }

  .dashboardMobileHeaderActions{
    gap:6px !important;
  }

  .dashboardHeroBellBtn{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }

  .dashboardHeroBellBtn i,
  .dashboardHeroBellBtn .svg-inline--fa{
    font-size:19px !important;
  }

  .dashboardMobileMenuNeumorph{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    flex-basis:38px !important;
    border-radius:11px !important;
  }

  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn i,
  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn .fa-grid-round-4,
  .dashboardMobileMenuNeumorph > .dashboardHeroBurgerBtn .svg-inline--fa{
    font-size:24px !important;
  }
}



/* =========================================================
   BUMIL KU - MENU LAYANAN ROW GRADIENT ORDER V7
   =========================================================
   TUJUAN:
   - Khusus 8 card Menu Layanan.
   - Warna per baris diurutkan dari kiri ke kanan.
   - Acuan warna: gradient tulisan "Bumil Ku".
   - Urutan: teal pekat -> teal segar -> hijau transisi ->
     hijau daun muda.
   - Baris pertama (1-4) dan baris kedua (5-8) memakai
     urutan yang sama.
   - Area lain dashboard tidak diubah.
   ========================================================= */

@media (max-width:740px){
  /* Kolom 1: teal pekat */
  .dashboardAppMenuCard:nth-child(1) .dashboardAppMenuIcon,
  .dashboardAppMenuCard:nth-child(5) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.10) 38%, rgba(255,255,255,0) 76%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.30), transparent 38%),
      linear-gradient(145deg, #0e9382 0%, #0f9f8d 54%, #21b39c 100%) !important;
    border-color:rgba(177,244,234,.82) !important;
    box-shadow:
      0 10px 20px rgba(15,159,141,.19),
      0 4px 9px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.62) !important;
  }

  /* Kolom 2: teal menuju green */
  .dashboardAppMenuCard:nth-child(2) .dashboardAppMenuIcon,
  .dashboardAppMenuCard:nth-child(6) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,0) 78%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.34), transparent 38%),
      linear-gradient(145deg, #25b69b 0%, #54c38e 55%, #79c875 100%) !important;
    border-color:rgba(204,245,211,.84) !important;
    box-shadow:
      0 10px 20px rgba(72,191,142,.18),
      0 4px 9px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.64) !important;
  }

  /* Kolom 3: green menuju lime */
  .dashboardAppMenuCard:nth-child(3) .dashboardAppMenuIcon,
  .dashboardAppMenuCard:nth-child(7) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.13) 42%, rgba(255,255,255,0) 80%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.40), transparent 40%),
      linear-gradient(145deg, #78c875 0%, #a4d457 54%, #bfda43 100%) !important;
    border-color:rgba(236,247,188,.90) !important;
    box-shadow:
      0 10px 20px rgba(156,205,82,.17),
      0 4px 9px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.66) !important;
  }

  /* Kolom 4: hijau daun muda */
  .dashboardAppMenuCard:nth-child(4) .dashboardAppMenuIcon,
  .dashboardAppMenuCard:nth-child(8) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.14) 44%, rgba(255,255,255,0) 82%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.44), transparent 40%),
      linear-gradient(145deg, #9bd258 0%, #b7d94a 52%, #c9df57 100%) !important;
    border-color:rgba(244,250,189,.94) !important;
    box-shadow:
      0 10px 20px rgba(182,211,74,.16),
      0 4px 9px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.68) !important;
  }

  .dashboardAppMenuIcon i{
    color:#ffffff !important;
  }
}


/* =========================================================
   BUMIL KU - MENU LAYANAN PEKAT REFINEMENT V8
   =========================================================
   REVISI:
   - Tombol kolom 4 memakai nuansa lama tombol kolom 3.
   - Tombol kolom 2 dan 3 dibuat lebih pekat/saturated.
   - Berlaku sama untuk baris 1 dan baris 2.
   ========================================================= */

@media (max-width:740px){
  /* Kolom 1: tetap teal pekat */
  .dashboardAppMenuCard:nth-child(1) .dashboardAppMenuIcon,
  .dashboardAppMenuCard:nth-child(5) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.10) 38%, rgba(255,255,255,0) 76%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.30), transparent 38%),
      linear-gradient(145deg, #0e9382 0%, #0f9f8d 54%, #21b39c 100%) !important;
    border-color:rgba(177,244,234,.82) !important;
    box-shadow:
      0 10px 20px rgba(15,159,141,.19),
      0 4px 9px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.62) !important;
  }

  /* Kolom 2: dibuat lebih pekat */
  .dashboardAppMenuCard:nth-child(2) .dashboardAppMenuIcon,
  .dashboardAppMenuCard:nth-child(6) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,0) 78%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.36), transparent 38%),
      linear-gradient(145deg, #22ae98 0%, #46bc92 48%, #69c67f 100%) !important;
    border-color:rgba(196,243,205,.85) !important;
    box-shadow:
      0 10px 20px rgba(66,185,138,.19),
      0 4px 9px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.64) !important;
  }

  /* Kolom 3: lebih pekat, masih menuju lime */
  .dashboardAppMenuCard:nth-child(3) .dashboardAppMenuIcon,
  .dashboardAppMenuCard:nth-child(7) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.13) 42%, rgba(255,255,255,0) 80%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.40), transparent 40%),
      linear-gradient(145deg, #67c376 0%, #8dce63 50%, #add34e 100%) !important;
    border-color:rgba(232,246,185,.90) !important;
    box-shadow:
      0 10px 20px rgba(144,201,88,.18),
      0 4px 9px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.66) !important;
  }

  /* Kolom 4: pakai nuansa lama tombol kolom 3 */
  .dashboardAppMenuCard:nth-child(4) .dashboardAppMenuIcon,
  .dashboardAppMenuCard:nth-child(8) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.38), rgba(255,255,255,0) 78%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.46), transparent 38%),
      linear-gradient(145deg, #9dca58 0%, #bad33f 40%, #d6df50 100%) !important;
    border-color:rgba(248,255,194,.90) !important;
    box-shadow:
      0 10px 20px rgba(178,207,72,.17),
      0 4px 9px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.67) !important;
  }
}


/* =========================================================
   BUMIL KU - MENU LAYANAN WARNA RESMI KEMENKES V9
   =========================================================
   TUJUAN:
   - Khusus 8 card Menu Layanan pada tampilan mobile.
   - Menggunakan 3 warna resmi Kemenkes secara berulang.
   - Urutan warna:
       1) Turqoise Gelap  : #00B9AD
       2) Hijau Kuning    : #CDDC29
       3) Turqoise Medium : #60C0D0
     lalu diulang lagi dari awal.
   - Area dashboard lain tidak diubah.
   ========================================================= */

@media (max-width:740px){
  /* Pola A = Turqoise Gelap */
  .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,0) 78%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.36), transparent 38%),
      linear-gradient(145deg, #00b9ad 0%, #00b9ad 56%, #0aaea6 100%) !important;
    border-color:rgba(184,247,239,.88) !important;
    box-shadow:
      0 10px 20px rgba(0,185,173,.22),
      0 4px 9px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.62) !important;
  }

  /* Pola B = Hijau Kuning */
  .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.37) 0%, rgba(255,255,255,.14) 42%, rgba(255,255,255,0) 80%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.42), transparent 40%),
      linear-gradient(145deg, #cddc29 0%, #cddc29 58%, #bfd22f 100%) !important;
    border-color:rgba(248,252,199,.94) !important;
    box-shadow:
      0 10px 20px rgba(205,220,41,.22),
      0 4px 9px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.68) !important;
  }

  /* Pola C = Turqoise Medium */
  .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon{
    background:
      linear-gradient(90deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.13) 41%, rgba(255,255,255,0) 79%),
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.40), transparent 39%),
      linear-gradient(145deg, #60c0d0 0%, #60c0d0 56%, #55b5c7 100%) !important;
    border-color:rgba(217,244,250,.92) !important;
    box-shadow:
      0 10px 20px rgba(96,192,208,.21),
      0 4px 9px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.66) !important;
  }

  .dashboardAppMenuIcon i{
    color:#ffffff !important;
  }
}


/* =========================================================
   BUMIL KU - MENU LAYANAN WARNA KEMENKES SOLID V10
   =========================================================
   TUJUAN:
   - Menampilkan warna resmi Kemenkes TANPA efek pudar.
   - Menghapus gradient putih, radial highlight, dan glow
     berwarna yang sebelumnya membuat warna tampak lebih muda.
   - Warna tombol sekarang benar-benar solid sesuai hex:
       1) Turqoise Gelap  : #00B9AD
       2) Hijau Kuning    : #CDDC29
       3) Turqoise Medium : #60C0D0
   - Pola diulang 1 -> 2 -> 3 pada 8 menu.
   - Area dashboard lain tidak diubah.
   ========================================================= */

@media (max-width:740px){
  /* =======================================================
     1 / 4 / 7 = TURQOISE GELAP #00B9AD
     ======================================================= */
  .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon{
    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border:1px solid #00B9AD !important;

    box-shadow:
      0 7px 14px rgba(16,70,80,.14),
      0 2px 5px rgba(16,70,80,.08) !important;

    filter:none !important;
    opacity:1 !important;
  }

  /* =======================================================
     2 / 5 / 8 = HIJAU KUNING #CDDC29
     ======================================================= */
  .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon{
    background:#CDDC29 !important;
    background-color:#CDDC29 !important;
    background-image:none !important;

    border:1px solid #CDDC29 !important;

    box-shadow:
      0 7px 14px rgba(16,70,80,.14),
      0 2px 5px rgba(16,70,80,.08) !important;

    filter:none !important;
    opacity:1 !important;
  }

  /* =======================================================
     3 / 6 = TURQOISE MEDIUM #60C0D0
     ======================================================= */
  .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon{
    background:#60C0D0 !important;
    background-color:#60C0D0 !important;
    background-image:none !important;

    border:1px solid #60C0D0 !important;

    box-shadow:
      0 7px 14px rgba(16,70,80,.14),
      0 2px 5px rgba(16,70,80,.08) !important;

    filter:none !important;
    opacity:1 !important;
  }

  /* =======================================================
     ICON PUTIH TETAP KONTRAS
     ======================================================= */
  .dashboardAppMenuIcon i,
  html[data-theme="dark"] .dashboardAppMenuIcon i{
    color:#FFFFFF !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    text-shadow:none !important;
  }

  /* =======================================================
     HOVER / FOCUS
     Hanya bergerak. Warna solid tidak berubah.
     ======================================================= */
  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    box-shadow:
      0 10px 18px rgba(16,70,80,.18),
      0 3px 7px rgba(16,70,80,.10) !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE HERO COMPACT REFINEMENT V12
   =========================================================
   TUJUAN:
   - Khusus memperpendek dashboardHeroCard pada tampilan HP.
   - Mendekatkan proporsi hero ke mockup acuan.
   - Struktur HTML, data user, badge kehamilan, warna hero,
     navbar, Menu Layanan, footer, drawer, dan JavaScript
     tidak diubah.
   - Support text dibuat lebih lebar agar cenderung 2 baris,
     bukan 3 baris.
   ========================================================= */

/* =========================================================
   MOBILE UMUM <= 740PX
   ========================================================= */
@media (max-width:740px){
  .dashboardHeroCard{
    min-height:176px !important;
    padding:18px 16px 15px !important;
    border-radius:22px !important;
  }

  .dashboardHeroCard::before{
    width:190px !important;
    height:190px !important;
    top:48px !important;
    right:-72px !important;
  }

  .dashboardHeroWatermark{
    right:-4px !important;
    bottom:-24px !important;
    width:108px !important;
    height:108px !important;
  }

  .dashboardHeroWatermark i{
    font-size:88px !important;
  }

  .dashboardHeroIntro{
    width:calc(100% - 100px) !important;
    gap:10px !important;
  }

  .dashboardHeroUserPhoto{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    border-width:3px !important;
  }

  .dashboardHeroTitle,
  .dashboardHeroTitleSplit{
    gap:1px !important;
    font-size:19px !important;
    line-height:1.05 !important;
  }

  .dashboardWelcomeGreeting{
    font-size:17px !important;
    line-height:1.06 !important;
  }

  .dashboardWelcomeName{
    font-size:18px !important;
    line-height:1.08 !important;
  }

  /*
   * Support text tidak lagi menyisakan area sebesar badge,
   * karena posisinya berada di bawah badge.
   * Ini membantu text menjadi 2 baris dan memangkas tinggi hero.
   */
  .dashboardHeroSupport{
    width:calc(100% - 42px) !important;
    max-width:270px !important;
    margin:13px 0 0 !important;
    gap:7px !important;
    font-size:11.6px !important;
    line-height:1.32 !important;
  }

  .dashboardHeroSupport i{
    margin-top:1px !important;
    font-size:13px !important;
  }

  .dashboardPregnancyStatusCard{
    top:15px !important;
    right:12px !important;
    width:94px !important;
    min-height:54px !important;
    padding:8px 8px !important;
    gap:6px !important;
    border-radius:16px !important;
  }

  .dashboardPregnancyStatusIcon{
    width:21px !important;
    height:21px !important;
    min-width:21px !important;
    font-size:12px !important;
  }

  .dashboardPregnancyStatusCopy{
    gap:1px !important;
  }

  .dashboardPregnancyStatusCopy strong{
    font-size:9px !important;
    line-height:1.06 !important;
  }

  .dashboardPregnancyStatusCopy small{
    font-size:7.6px !important;
    line-height:1.08 !important;
  }
}

/* =========================================================
   HP UMUM / COMPACT <= 420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardHeroCard{
    min-height:166px !important;
    padding:16px 13px 13px !important;
    border-radius:21px !important;
  }

  .dashboardHeroCard::before{
    width:176px !important;
    height:176px !important;
    top:44px !important;
    right:-68px !important;
  }

  .dashboardHeroWatermark{
    right:-5px !important;
    bottom:-22px !important;
    width:100px !important;
    height:100px !important;
  }

  .dashboardHeroWatermark i{
    font-size:82px !important;
  }

  .dashboardHeroIntro{
    width:calc(100% - 92px) !important;
    gap:9px !important;
  }

  .dashboardHeroUserPhoto{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
  }

  .dashboardWelcomeGreeting{
    font-size:16px !important;
  }

  .dashboardWelcomeName{
    font-size:17px !important;
  }

  .dashboardHeroSupport{
    width:calc(100% - 28px) !important;
    max-width:250px !important;
    margin-top:11px !important;
    font-size:10.9px !important;
    line-height:1.28 !important;
  }

  .dashboardHeroSupport i{
    font-size:12.5px !important;
  }

  .dashboardPregnancyStatusCard{
    top:13px !important;
    right:10px !important;
    width:88px !important;
    min-height:50px !important;
    padding:7px 7px !important;
    gap:5px !important;
    border-radius:15px !important;
  }

  .dashboardPregnancyStatusIcon{
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    font-size:11px !important;
  }

  .dashboardPregnancyStatusCopy strong{
    font-size:8.4px !important;
  }

  .dashboardPregnancyStatusCopy small{
    font-size:7.1px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <= 350PX
   ========================================================= */
@media (max-width:350px){
  .dashboardHeroCard{
    min-height:158px !important;
    padding:14px 11px 12px !important;
  }

  .dashboardHeroIntro{
    width:calc(100% - 84px) !important;
    gap:8px !important;
  }

  .dashboardHeroUserPhoto{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
  }

  .dashboardWelcomeGreeting{
    font-size:14.8px !important;
  }

  .dashboardWelcomeName{
    font-size:15.8px !important;
  }

  .dashboardHeroSupport{
    width:calc(100% - 18px) !important;
    max-width:232px !important;
    margin-top:10px !important;
    font-size:10.2px !important;
  }

  .dashboardPregnancyStatusCard{
    top:12px !important;
    right:8px !important;
    width:82px !important;
    min-height:48px !important;
    padding:6px !important;
  }

  .dashboardPregnancyStatusCopy strong{
    font-size:7.9px !important;
  }

  .dashboardPregnancyStatusCopy small{
    font-size:6.7px !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE MENU LAYANAN 3D V13
   =========================================================
   TUJUAN:
   - Khusus 8 tombol Menu Layanan pada HP.
   - Mempertahankan 3 warna solid Kemenkes yang dipilih:
       Turqoise Gelap  #00B9AD
       Hijau Kuning    #CDDC29
       Turqoise Medium #60C0D0
   - Membuat tombol terlihat lebih 3D melalui:
       1. depth / lapisan bawah
       2. highlight permukaan
       3. inner bevel
       4. shadow objek
       5. efek pressed saat disentuh
   - Nama menu, susunan 4 x 2, ukuran, dan warna dasar
     tidak diubah.
   - Area dashboard lain tidak diubah.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     BASE 3D SURFACE
     ------------------------------------------------------- */
  .dashboardAppMenuIcon{
    --menu-3d-color:#00B9AD;
    --menu-3d-depth:#078E86;
    --menu-3d-shadow:rgba(16,70,80,.20);

    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    background:var(--menu-3d-color) !important;
    background-color:var(--menu-3d-color) !important;
    background-image:none !important;

    border:1px solid rgba(255,255,255,.26) !important;

    box-shadow:
      0 5px 0 var(--menu-3d-depth),
      0 11px 17px var(--menu-3d-shadow),
      0 4px 7px rgba(16,70,80,.10),
      inset 0 2px 0 rgba(255,255,255,.34),
      inset 0 -3px 0 rgba(0,0,0,.10),
      inset 2px 0 0 rgba(255,255,255,.07),
      inset -2px 0 0 rgba(0,0,0,.035) !important;

    transform:translate3d(0,0,0) !important;

    transition:
      transform .15s cubic-bezier(.2,.8,.2,1),
      box-shadow .15s cubic-bezier(.2,.8,.2,1),
      filter .15s ease !important;
  }

  /*
   * Highlight tipis di bagian atas permukaan.
   * Transparansinya rendah agar warna resmi tetap dominan.
   */
  .dashboardAppMenuIcon::before{
    content:"" !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute !important;
    z-index:0 !important;

    top:3px !important;
    left:5px !important;
    right:5px !important;
    height:42% !important;

    border-radius:12px 12px 9px 9px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.24) 0%,
        rgba(255,255,255,.10) 44%,
        rgba(255,255,255,0) 100%
      ) !important;

    pointer-events:none !important;
  }

  /*
   * Shading halus di sisi bawah untuk memperkuat bevel.
   */
  .dashboardAppMenuIcon::after{
    content:"" !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute !important;
    z-index:0 !important;

    left:5px !important;
    right:5px !important;
    bottom:3px !important;
    height:27% !important;

    border-radius:8px 8px 12px 12px !important;

    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.065) 100%
      ) !important;

    pointer-events:none !important;
  }

  /* -------------------------------------------------------
     1 / 4 / 7 - TURQOISE GELAP
     ------------------------------------------------------- */
  .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon{
    --menu-3d-color:#00B9AD;
    --menu-3d-depth:#078E86;
    --menu-3d-shadow:rgba(0,126,119,.23);

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;
  }

  /* -------------------------------------------------------
     2 / 5 / 8 - HIJAU KUNING
     ------------------------------------------------------- */
  .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon{
    --menu-3d-color:#CDDC29;
    --menu-3d-depth:#A8B51B;
    --menu-3d-shadow:rgba(151,166,24,.22);

    background:#CDDC29 !important;
    background-color:#CDDC29 !important;
    background-image:none !important;
  }

  /* -------------------------------------------------------
     3 / 6 - TURQOISE MEDIUM
     ------------------------------------------------------- */
  .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon{
    --menu-3d-color:#60C0D0;
    --menu-3d-depth:#4499A8;
    --menu-3d-shadow:rgba(55,139,153,.22);

    background:#60C0D0 !important;
    background-color:#60C0D0 !important;
    background-image:none !important;
  }

  /* -------------------------------------------------------
     ICON 3D / EMBOSSED
     ------------------------------------------------------- */
  .dashboardAppMenuIcon i,
  html[data-theme="dark"] .dashboardAppMenuIcon i{
    position:relative !important;
    z-index:2 !important;

    color:#FFFFFF !important;
    opacity:1 !important;
    visibility:visible !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,55,58,.20))
      drop-shadow(0 -1px 0 rgba(255,255,255,.14)) !important;

    text-shadow:
      0 1px 0 rgba(255,255,255,.14),
      0 2px 2px rgba(0,60,60,.14) !important;
  }

  /* -------------------------------------------------------
     HOVER / KEYBOARD FOCUS
     Naik sedikit dan depth terlihat lebih dalam.
     ------------------------------------------------------- */
  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translate3d(0,-2px,0) !important;

    box-shadow:
      0 7px 0 var(--menu-3d-depth),
      0 15px 21px var(--menu-3d-shadow),
      0 5px 9px rgba(16,70,80,.11),
      inset 0 2px 0 rgba(255,255,255,.36),
      inset 0 -3px 0 rgba(0,0,0,.10),
      inset 2px 0 0 rgba(255,255,255,.07),
      inset -2px 0 0 rgba(0,0,0,.035) !important;
  }

  /* -------------------------------------------------------
     ACTIVE / TAP
     Tombol terlihat benar-benar ditekan.
     ------------------------------------------------------- */
  .dashboardAppMenuCard:active .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(0,3px,0) scale(.985) !important;

    box-shadow:
      0 2px 0 var(--menu-3d-depth),
      0 5px 9px rgba(16,70,80,.14),
      inset 0 2px 0 rgba(255,255,255,.20),
      inset 0 -2px 0 rgba(0,0,0,.08) !important;
  }

  /* Dark mode: shadow dibuat lebih natural, warna tombol tetap sama. */
  html[data-theme="dark"] .dashboardAppMenuIcon{
    box-shadow:
      0 5px 0 var(--menu-3d-depth),
      0 12px 20px rgba(0,0,0,.30),
      0 4px 8px rgba(0,0,0,.18),
      inset 0 2px 0 rgba(255,255,255,.26),
      inset 0 -3px 0 rgba(0,0,0,.15),
      inset 2px 0 0 rgba(255,255,255,.055),
      inset -2px 0 0 rgba(0,0,0,.06) !important;
  }
}

/* =========================================================
   HP KECIL - 3D DEPTH DIPADATKAN
   ========================================================= */
@media (max-width:420px){
  .dashboardAppMenuIcon{
    box-shadow:
      0 4px 0 var(--menu-3d-depth),
      0 9px 14px var(--menu-3d-shadow),
      0 3px 6px rgba(16,70,80,.09),
      inset 0 2px 0 rgba(255,255,255,.32),
      inset 0 -3px 0 rgba(0,0,0,.09) !important;
  }

  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    box-shadow:
      0 6px 0 var(--menu-3d-depth),
      0 12px 17px var(--menu-3d-shadow),
      0 4px 7px rgba(16,70,80,.10),
      inset 0 2px 0 rgba(255,255,255,.34),
      inset 0 -3px 0 rgba(0,0,0,.09) !important;
  }

  .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    box-shadow:
      0 1px 0 var(--menu-3d-depth),
      0 4px 7px rgba(16,70,80,.13),
      inset 0 2px 0 rgba(255,255,255,.18),
      inset 0 -2px 0 rgba(0,0,0,.07) !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE MENU LAYANAN 3D EDGE-TO-EDGE V14
   =========================================================
   REVISI DARI V13:
   - Efek 3D/highlight sekarang menempel sampai TEPI tombol.
   - Tidak ada lagi jarak 3px / 5px dari sisi tombol.
   - Seluruh permukaan terlihat sebagai satu benda 3D utuh.
   - 3 warna solid Kemenkes tetap dipertahankan.
   - Layout, ukuran, label, icon, dan fungsi menu tidak diubah.
   ========================================================= */

@media (max-width:740px){

  .dashboardAppMenuIcon{
    --menu-3d-color:#00B9AD;
    --menu-3d-depth:#078E86;
    --menu-3d-shadow:rgba(16,70,80,.20);

    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;

    background:var(--menu-3d-color) !important;
    background-color:var(--menu-3d-color) !important;
    background-image:none !important;

    border:1px solid rgba(255,255,255,.24) !important;

    box-shadow:
      0 6px 0 var(--menu-3d-depth),
      0 12px 18px var(--menu-3d-shadow),
      0 4px 8px rgba(16,70,80,.10),
      inset 0 2px 0 rgba(255,255,255,.22),
      inset 0 -3px 0 rgba(0,0,0,.10),
      inset 2px 0 0 rgba(255,255,255,.045),
      inset -2px 0 0 rgba(0,0,0,.035) !important;

    transform:translate3d(0,0,0) !important;

    transition:
      transform .15s cubic-bezier(.2,.8,.2,1),
      box-shadow .15s cubic-bezier(.2,.8,.2,1) !important;
  }

  /* =======================================================
     FULL EDGE TOP HIGHLIGHT
     Tidak ada inset kiri/kanan/atas.
     ======================================================= */
  .dashboardAppMenuIcon::before{
    content:"" !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute !important;
    z-index:0 !important;
    inset:0 !important;

    border-radius:inherit !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.20) 0%,
        rgba(255,255,255,.10) 23%,
        rgba(255,255,255,.035) 42%,
        rgba(255,255,255,0) 58%
      ) !important;

    pointer-events:none !important;
  }

  /* =======================================================
     FULL EDGE BEVEL / SIDE SHADING
     Juga menempel sampai tepi.
     ======================================================= */
  .dashboardAppMenuIcon::after{
    content:"" !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute !important;
    z-index:0 !important;
    inset:0 !important;

    border-radius:inherit !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.055) 0%,
        rgba(255,255,255,0) 42%,
        rgba(0,0,0,.025) 66%,
        rgba(0,0,0,.075) 100%
      ) !important;

    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.12),
      inset -1px -1px 0 rgba(0,0,0,.08) !important;

    pointer-events:none !important;
  }

  /* 1 / 4 / 7 = Turqoise Gelap */
  .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon{
    --menu-3d-color:#00B9AD;
    --menu-3d-depth:#078E86;
    --menu-3d-shadow:rgba(0,126,119,.23);

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;
  }

  /* 2 / 5 / 8 = Hijau Kuning */
  .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon{
    --menu-3d-color:#CDDC29;
    --menu-3d-depth:#A8B51B;
    --menu-3d-shadow:rgba(151,166,24,.22);

    background:#CDDC29 !important;
    background-color:#CDDC29 !important;
    background-image:none !important;
  }

  /* 3 / 6 = Turqoise Medium */
  .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon{
    --menu-3d-color:#60C0D0;
    --menu-3d-depth:#4499A8;
    --menu-3d-shadow:rgba(55,139,153,.22);

    background:#60C0D0 !important;
    background-color:#60C0D0 !important;
    background-image:none !important;
  }

  /* Icon tetap paling depan */
  .dashboardAppMenuIcon i,
  html[data-theme="dark"] .dashboardAppMenuIcon i{
    position:relative !important;
    z-index:2 !important;

    color:#FFFFFF !important;
    opacity:1 !important;
    visibility:visible !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,55,58,.20))
      drop-shadow(0 -1px 0 rgba(255,255,255,.13)) !important;

    text-shadow:
      0 1px 0 rgba(255,255,255,.12),
      0 2px 2px rgba(0,60,60,.14) !important;
  }

  /* Hover: elevasi sedikit */
  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translate3d(0,-2px,0) !important;

    box-shadow:
      0 8px 0 var(--menu-3d-depth),
      0 16px 22px var(--menu-3d-shadow),
      0 5px 9px rgba(16,70,80,.11),
      inset 0 2px 0 rgba(255,255,255,.24),
      inset 0 -3px 0 rgba(0,0,0,.10),
      inset 2px 0 0 rgba(255,255,255,.05),
      inset -2px 0 0 rgba(0,0,0,.04) !important;
  }

  /* Tap: tombol turun mendekati depth layer */
  .dashboardAppMenuCard:active .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(0,4px,0) scale(.988) !important;

    box-shadow:
      0 2px 0 var(--menu-3d-depth),
      0 5px 9px rgba(16,70,80,.14),
      inset 0 2px 0 rgba(255,255,255,.14),
      inset 0 -2px 0 rgba(0,0,0,.07) !important;
  }

  html[data-theme="dark"] .dashboardAppMenuIcon{
    box-shadow:
      0 6px 0 var(--menu-3d-depth),
      0 13px 20px rgba(0,0,0,.30),
      0 4px 8px rgba(0,0,0,.18),
      inset 0 2px 0 rgba(255,255,255,.18),
      inset 0 -3px 0 rgba(0,0,0,.14),
      inset 2px 0 0 rgba(255,255,255,.035),
      inset -2px 0 0 rgba(0,0,0,.06) !important;
  }
}

/* =========================================================
   HP COMPACT
   ========================================================= */
@media (max-width:420px){
  .dashboardAppMenuIcon{
    box-shadow:
      0 5px 0 var(--menu-3d-depth),
      0 10px 15px var(--menu-3d-shadow),
      0 3px 6px rgba(16,70,80,.09),
      inset 0 2px 0 rgba(255,255,255,.20),
      inset 0 -3px 0 rgba(0,0,0,.09) !important;
  }

  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    box-shadow:
      0 7px 0 var(--menu-3d-depth),
      0 13px 18px var(--menu-3d-shadow),
      0 4px 7px rgba(16,70,80,.10),
      inset 0 2px 0 rgba(255,255,255,.22),
      inset 0 -3px 0 rgba(0,0,0,.09) !important;
  }

  .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(0,3px,0) scale(.988) !important;

    box-shadow:
      0 1px 0 var(--menu-3d-depth),
      0 4px 7px rgba(16,70,80,.13),
      inset 0 2px 0 rgba(255,255,255,.12),
      inset 0 -2px 0 rgba(0,0,0,.06) !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE MENU LAYANAN CLEAN 3D V15
   =========================================================
   PERBAIKAN DARI V14:
   - Menghapus seluruh pseudo-layer 3D (::before / ::after)
     yang menimbulkan garis/band di permukaan tombol.
   - Efek 3D sekarang dibentuk LANGSUNG dari tepi tombol
     memakai outer depth + inset bevel.
   - Tidak ada card/lapisan kecil di dalam tombol.
   - Seluruh tombol tetap satu surface utuh.
   - 3 warna Kemenkes tetap solid dan tidak dibuat pudar.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     HAPUS LAYER INTERNAL V13/V14
     ------------------------------------------------------- */
  .dashboardAppMenuIcon::before,
  .dashboardAppMenuIcon::after{
    content:none !important;
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    background:none !important;
    box-shadow:none !important;
  }

  /* -------------------------------------------------------
     BASE CLEAN 3D
     ------------------------------------------------------- */
  .dashboardAppMenuIcon{
    --menu-3d-color:#00B9AD;
    --menu-3d-depth:#078E86;
    --menu-3d-shadow:rgba(16,70,80,.18);

    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    background:var(--menu-3d-color) !important;
    background-color:var(--menu-3d-color) !important;
    background-image:none !important;

    border:1px solid rgba(255,255,255,.20) !important;

    /*
     * 3D langsung sampai tepi:
     * - lapisan bawah = ketebalan tombol
     * - shadow luar = tombol terangkat
     * - inset atas/samping/bawah = bevel dari tepi
     */
    box-shadow:
      0 5px 0 var(--menu-3d-depth),
      0 10px 17px var(--menu-3d-shadow),
      0 3px 6px rgba(16,70,80,.08),
      inset 0 2px 1px rgba(255,255,255,.22),
      inset 2px 0 1px rgba(255,255,255,.055),
      inset -2px 0 1px rgba(0,0,0,.025),
      inset 0 -3px 2px rgba(0,0,0,.085) !important;

    transform:translate3d(0,0,0) !important;

    transition:
      transform .15s cubic-bezier(.2,.8,.2,1),
      box-shadow .15s cubic-bezier(.2,.8,.2,1) !important;
  }

  /* -------------------------------------------------------
     1 / 4 / 7 = TURQOISE GELAP
     ------------------------------------------------------- */
  .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon{
    --menu-3d-color:#00B9AD;
    --menu-3d-depth:#078E86;
    --menu-3d-shadow:rgba(0,126,119,.20);

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;
  }

  /* -------------------------------------------------------
     2 / 5 / 8 = HIJAU KUNING
     ------------------------------------------------------- */
  .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon{
    --menu-3d-color:#CDDC29;
    --menu-3d-depth:#A9B718;
    --menu-3d-shadow:rgba(150,165,22,.19);

    background:#CDDC29 !important;
    background-color:#CDDC29 !important;
    background-image:none !important;
  }

  /* -------------------------------------------------------
     3 / 6 = TURQOISE MEDIUM
     ------------------------------------------------------- */
  .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon{
    --menu-3d-color:#60C0D0;
    --menu-3d-depth:#479AA8;
    --menu-3d-shadow:rgba(55,139,153,.19);

    background:#60C0D0 !important;
    background-color:#60C0D0 !important;
    background-image:none !important;
  }

  /* -------------------------------------------------------
     ICON - tetap bersih, hanya depth tipis
     ------------------------------------------------------- */
  .dashboardAppMenuIcon i,
  html[data-theme="dark"] .dashboardAppMenuIcon i{
    position:relative !important;
    z-index:2 !important;

    color:#FFFFFF !important;
    opacity:1 !important;
    visibility:visible !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,60,60,.18)) !important;

    text-shadow:none !important;
  }

  /* -------------------------------------------------------
     HOVER / FOCUS
     ------------------------------------------------------- */
  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translate3d(0,-1px,0) !important;

    box-shadow:
      0 6px 0 var(--menu-3d-depth),
      0 13px 19px var(--menu-3d-shadow),
      0 4px 7px rgba(16,70,80,.09),
      inset 0 2px 1px rgba(255,255,255,.24),
      inset 2px 0 1px rgba(255,255,255,.06),
      inset -2px 0 1px rgba(0,0,0,.025),
      inset 0 -3px 2px rgba(0,0,0,.085) !important;
  }

  /* -------------------------------------------------------
     TAP / ACTIVE
     Tombol turun ke lapisan depth tanpa berubah bentuk.
     ------------------------------------------------------- */
  .dashboardAppMenuCard:active .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(0,3px,0) scale(.99) !important;

    box-shadow:
      0 2px 0 var(--menu-3d-depth),
      0 4px 7px rgba(16,70,80,.12),
      inset 0 2px 1px rgba(255,255,255,.15),
      inset 0 -2px 1px rgba(0,0,0,.06) !important;
  }

  /* Dark mode tetap memakai warna solid yang sama */
  html[data-theme="dark"] .dashboardAppMenuIcon{
    border-color:rgba(255,255,255,.17) !important;

    box-shadow:
      0 5px 0 var(--menu-3d-depth),
      0 11px 18px rgba(0,0,0,.28),
      0 3px 6px rgba(0,0,0,.16),
      inset 0 2px 1px rgba(255,255,255,.17),
      inset 2px 0 1px rgba(255,255,255,.035),
      inset -2px 0 1px rgba(0,0,0,.05),
      inset 0 -3px 2px rgba(0,0,0,.13) !important;
  }
}

/* =========================================================
   HP COMPACT
   ========================================================= */
@media (max-width:420px){
  .dashboardAppMenuIcon{
    box-shadow:
      0 4px 0 var(--menu-3d-depth),
      0 9px 14px var(--menu-3d-shadow),
      0 3px 5px rgba(16,70,80,.075),
      inset 0 2px 1px rgba(255,255,255,.20),
      inset 2px 0 1px rgba(255,255,255,.045),
      inset -2px 0 1px rgba(0,0,0,.02),
      inset 0 -3px 2px rgba(0,0,0,.08) !important;
  }

  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    box-shadow:
      0 5px 0 var(--menu-3d-depth),
      0 11px 16px var(--menu-3d-shadow),
      0 3px 6px rgba(16,70,80,.085),
      inset 0 2px 1px rgba(255,255,255,.22),
      inset 0 -3px 2px rgba(0,0,0,.08) !important;
  }

  .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(0,2px,0) scale(.99) !important;

    box-shadow:
      0 1px 0 var(--menu-3d-depth),
      0 3px 5px rgba(16,70,80,.11),
      inset 0 2px 1px rgba(255,255,255,.13),
      inset 0 -2px 1px rgba(0,0,0,.055) !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE MENU LAYANAN SUBTLE 3D V17
   =========================================================
   TUJUAN:
   - Mempertahankan tampilan icon putih yang sudah terasa 3D.
   - Membuat permukaan tombol ikut terlihat timbul / 3D.
   - Efek dibuat HALUS, tidak berlebihan.
   - Tidak menggunakan pseudo layer / garis internal.
   - Warna Kemenkes tetap solid:
       #00B9AD
       #CDDC29
       #60C0D0
   - Layout 4 x 2, ukuran, label, icon, dan fungsi tidak berubah.
   ========================================================= */

@media (max-width:740px){

  /* =======================================================
     RESET PSEUDO LAYER
     ======================================================= */
  .dashboardAppMenuIcon::before,
  .dashboardAppMenuIcon::after{
    content:none !important;
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    background:none !important;
    box-shadow:none !important;
  }

  /* =======================================================
     BASE SUBTLE 3D
     ======================================================= */
  .dashboardAppMenuIcon{
    --menu-face:#00B9AD;
    --menu-depth:#078E86;
    --menu-shadow:rgba(16,70,80,.17);

    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    background:var(--menu-face) !important;
    background-color:var(--menu-face) !important;
    background-image:none !important;

    border:1px solid rgba(255,255,255,.22) !important;

    /*
     * 3D halus:
     * - 2px ke kanan + 4px ke bawah = sisi bawah tombol
     * - soft shadow = tombol tampak terangkat
     * - inset tipis = bevel di permukaan
     */
    box-shadow:
      2px 4px 0 var(--menu-depth),
      0 8px 14px var(--menu-shadow),
      0 3px 6px rgba(16,70,80,.075),
      inset 0 2px 1px rgba(255,255,255,.20),
      inset 1px 0 1px rgba(255,255,255,.045),
      inset -1px 0 1px rgba(0,0,0,.020),
      inset 0 -2px 1px rgba(0,0,0,.065) !important;

    transform:translate3d(-1px,-1px,0) !important;

    transition:
      transform .15s cubic-bezier(.2,.8,.2,1),
      box-shadow .15s cubic-bezier(.2,.8,.2,1) !important;
  }

  /* =======================================================
     1 / 4 / 7 = TURQOISE GELAP
     ======================================================= */
  .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon{
    --menu-face:#00B9AD;
    --menu-depth:#078E86;
    --menu-shadow:rgba(0,126,119,.18);

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;
  }

  /* =======================================================
     2 / 5 / 8 = HIJAU KUNING
     ======================================================= */
  .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon{
    --menu-face:#CDDC29;
    --menu-depth:#A9B718;
    --menu-shadow:rgba(150,165,22,.17);

    background:#CDDC29 !important;
    background-color:#CDDC29 !important;
    background-image:none !important;
  }

  /* =======================================================
     3 / 6 = TURQOISE MEDIUM
     ======================================================= */
  .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon{
    --menu-face:#60C0D0;
    --menu-depth:#479AA8;
    --menu-shadow:rgba(55,139,153,.17);

    background:#60C0D0 !important;
    background-color:#60C0D0 !important;
    background-image:none !important;
  }

  /* =======================================================
     ICON - PERTAHANKAN 3D YANG SUDAH BAGUS
     ======================================================= */
  .dashboardAppMenuIcon i,
  html[data-theme="dark"] .dashboardAppMenuIcon i{
    position:relative !important;
    z-index:2 !important;

    color:#FFFFFF !important;
    opacity:1 !important;
    visibility:visible !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,55,58,.20))
      drop-shadow(0 -1px 0 rgba(255,255,255,.12)) !important;

    text-shadow:
      0 1px 0 rgba(255,255,255,.10) !important;
  }

  /* =======================================================
     HOVER / FOCUS
     Sedikit naik, tetap halus.
     ======================================================= */
  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translate3d(-1px,-2px,0) !important;

    box-shadow:
      2px 5px 0 var(--menu-depth),
      0 10px 16px var(--menu-shadow),
      0 4px 7px rgba(16,70,80,.085),
      inset 0 2px 1px rgba(255,255,255,.22),
      inset 0 -2px 1px rgba(0,0,0,.065) !important;
  }

  /* =======================================================
     TAP / ACTIVE
     Tombol terasa ditekan tanpa animasi berlebihan.
     ======================================================= */
  .dashboardAppMenuCard:active .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(1px,2px,0) scale(.992) !important;

    box-shadow:
      1px 1px 0 var(--menu-depth),
      0 3px 6px rgba(16,70,80,.11),
      inset 0 2px 1px rgba(255,255,255,.13),
      inset 0 -1px 1px rgba(0,0,0,.05) !important;
  }

  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"] .dashboardAppMenuIcon{
    border-color:rgba(255,255,255,.17) !important;

    box-shadow:
      2px 4px 0 var(--menu-depth),
      0 8px 14px rgba(0,0,0,.24),
      0 3px 6px rgba(0,0,0,.14),
      inset 0 2px 1px rgba(255,255,255,.15),
      inset 0 -2px 1px rgba(0,0,0,.10) !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardAppMenuIcon{
    box-shadow:
      1.5px 3.5px 0 var(--menu-depth),
      0 7px 12px var(--menu-shadow),
      0 2px 5px rgba(16,70,80,.07),
      inset 0 2px 1px rgba(255,255,255,.18),
      inset 0 -2px 1px rgba(0,0,0,.06) !important;

    transform:translate3d(-.5px,-.5px,0) !important;
  }

  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translate3d(-.5px,-1.5px,0) !important;

    box-shadow:
      1.5px 4.5px 0 var(--menu-depth),
      0 9px 14px var(--menu-shadow),
      0 3px 6px rgba(16,70,80,.08),
      inset 0 2px 1px rgba(255,255,255,.20),
      inset 0 -2px 1px rgba(0,0,0,.06) !important;
  }

  .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(.5px,1.5px,0) scale(.992) !important;

    box-shadow:
      .5px .8px 0 var(--menu-depth),
      0 2px 4px rgba(16,70,80,.10),
      inset 0 1px 1px rgba(255,255,255,.12) !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE MENU LAYANAN SUBTLE 3D V18
   =========================================================
   REFINEMENT DARI V17:
   - Menambah sedikit kedalaman tombol.
   - Icon putih 3D tetap dipertahankan.
   - Depth dibuat lebih terbaca, tetapi tidak berlebihan.
   - Tidak memakai pseudo layer / garis internal.
   - Warna resmi Kemenkes tetap solid.
   ========================================================= */

@media (max-width:740px){

  .dashboardAppMenuIcon::before,
  .dashboardAppMenuIcon::after{
    content:none !important;
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    background:none !important;
    box-shadow:none !important;
  }

  .dashboardAppMenuIcon{
    --menu-face:#00B9AD;
    --menu-depth:#078E86;
    --menu-shadow:rgba(16,70,80,.19);

    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    background:var(--menu-face) !important;
    background-color:var(--menu-face) !important;
    background-image:none !important;

    border:1px solid rgba(255,255,255,.23) !important;

    box-shadow:
      2.5px 5px 0 var(--menu-depth),
      0 10px 16px var(--menu-shadow),
      0 3px 7px rgba(16,70,80,.085),
      inset 0 2px 1px rgba(255,255,255,.22),
      inset 1px 0 1px rgba(255,255,255,.05),
      inset -1px 0 1px rgba(0,0,0,.022),
      inset 0 -2.5px 1.5px rgba(0,0,0,.075) !important;

    transform:translate3d(-1px,-1.5px,0) !important;

    transition:
      transform .15s cubic-bezier(.2,.8,.2,1),
      box-shadow .15s cubic-bezier(.2,.8,.2,1) !important;
  }

  /* 1 / 4 / 7 = TURQOISE GELAP */
  .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon{
    --menu-face:#00B9AD;
    --menu-depth:#078E86;
    --menu-shadow:rgba(0,126,119,.20);

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;
  }

  /* 2 / 5 / 8 = HIJAU KUNING */
  .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon{
    --menu-face:#CDDC29;
    --menu-depth:#A9B718;
    --menu-shadow:rgba(150,165,22,.19);

    background:#CDDC29 !important;
    background-color:#CDDC29 !important;
    background-image:none !important;
  }

  /* 3 / 6 = TURQOISE MEDIUM */
  .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon{
    --menu-face:#60C0D0;
    --menu-depth:#479AA8;
    --menu-shadow:rgba(55,139,153,.19);

    background:#60C0D0 !important;
    background-color:#60C0D0 !important;
    background-image:none !important;
  }

  /* Icon putih tetap memakai efek 3D yang sekarang */
  .dashboardAppMenuIcon i,
  html[data-theme="dark"] .dashboardAppMenuIcon i{
    position:relative !important;
    z-index:2 !important;

    color:#FFFFFF !important;
    opacity:1 !important;
    visibility:visible !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,55,58,.21))
      drop-shadow(0 -1px 0 rgba(255,255,255,.13)) !important;

    text-shadow:
      0 1px 0 rgba(255,255,255,.10) !important;
  }

  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translate3d(-1px,-2.5px,0) !important;

    box-shadow:
      2.5px 6px 0 var(--menu-depth),
      0 12px 18px var(--menu-shadow),
      0 4px 8px rgba(16,70,80,.095),
      inset 0 2px 1px rgba(255,255,255,.24),
      inset 0 -2.5px 1.5px rgba(0,0,0,.075) !important;
  }

  .dashboardAppMenuCard:active .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(1px,2px,0) scale(.992) !important;

    box-shadow:
      1px 1.2px 0 var(--menu-depth),
      0 3px 6px rgba(16,70,80,.11),
      inset 0 2px 1px rgba(255,255,255,.13),
      inset 0 -1px 1px rgba(0,0,0,.05) !important;
  }

  html[data-theme="dark"] .dashboardAppMenuIcon{
    border-color:rgba(255,255,255,.18) !important;

    box-shadow:
      2.5px 5px 0 var(--menu-depth),
      0 10px 16px rgba(0,0,0,.26),
      0 3px 7px rgba(0,0,0,.15),
      inset 0 2px 1px rgba(255,255,255,.16),
      inset 0 -2.5px 1.5px rgba(0,0,0,.11) !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardAppMenuIcon{
    box-shadow:
      2px 4.5px 0 var(--menu-depth),
      0 8px 13px var(--menu-shadow),
      0 2px 5px rgba(16,70,80,.075),
      inset 0 2px 1px rgba(255,255,255,.20),
      inset 0 -2px 1px rgba(0,0,0,.065) !important;

    transform:translate3d(-.75px,-1px,0) !important;
  }

  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translate3d(-.75px,-2px,0) !important;

    box-shadow:
      2px 5.5px 0 var(--menu-depth),
      0 10px 15px var(--menu-shadow),
      0 3px 6px rgba(16,70,80,.085),
      inset 0 2px 1px rgba(255,255,255,.22),
      inset 0 -2px 1px rgba(0,0,0,.065) !important;
  }

  .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(.5px,1.5px,0) scale(.992) !important;

    box-shadow:
      .6px .9px 0 var(--menu-depth),
      0 2px 4px rgba(16,70,80,.10),
      inset 0 1px 1px rgba(255,255,255,.12) !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE HERO NAVBAR GAP + SUBTLE 3D V19
   =========================================================
   TUJUAN:
   - Khusus dashboardHeroCard pada tampilan HP.
   - Memberikan jarak visual dari navbar atas.
   - Membuat hero terasa lebih timbul / 3D secara halus.
   - Tidak mengubah struktur HTML, ukuran internal hero,
     data user, status kehamilan, menu layanan, drawer,
     footer, desktop, maupun JavaScript.
   ========================================================= */

@media (max-width:740px){

  .dashboardHeroCard{
    /*
     * Jarak terhadap navbar mobile.
     * Sebelumnya hero langsung menempel setelah header.
     */
    margin-top:12px !important;

    /*
     * Surface 3D elegan:
     * - lapisan bawah sangat tipis
     * - shadow utama lembut
     * - highlight atas dan shading bawah
     */
    border:1px solid rgba(255,255,255,.48) !important;

    box-shadow:
      2px 4px 0 rgba(7,126,116,.18),
      0 15px 28px rgba(7,126,116,.18),
      0 5px 11px rgba(16,70,80,.09),
      inset 0 2px 1px rgba(255,255,255,.28),
      inset 1px 0 1px rgba(255,255,255,.055),
      inset -1px 0 1px rgba(0,0,0,.020),
      inset 0 -2px 1px rgba(0,76,71,.08) !important;
  }

  /*
   * Watermark/radial layer existing tetap dipakai.
   * Tidak ditambah pseudo-layer baru agar permukaan hero
   * tidak memiliki garis atau band.
   */

  html[data-theme="dark"] .dashboardHeroCard{
    border-color:rgba(255,255,255,.16) !important;

    box-shadow:
      2px 4px 0 rgba(4,83,79,.34),
      0 16px 30px rgba(0,0,0,.30),
      0 5px 11px rgba(0,0,0,.18),
      inset 0 2px 1px rgba(255,255,255,.12),
      inset 0 -2px 1px rgba(0,0,0,.16) !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardHeroCard{
    margin-top:10px !important;

    box-shadow:
      1.5px 3.5px 0 rgba(7,126,116,.17),
      0 12px 22px rgba(7,126,116,.16),
      0 4px 9px rgba(16,70,80,.085),
      inset 0 2px 1px rgba(255,255,255,.25),
      inset 0 -2px 1px rgba(0,76,71,.075) !important;
  }

  html[data-theme="dark"] .dashboardHeroCard{
    box-shadow:
      1.5px 3.5px 0 rgba(4,83,79,.30),
      0 13px 24px rgba(0,0,0,.28),
      0 4px 9px rgba(0,0,0,.17),
      inset 0 2px 1px rgba(255,255,255,.10),
      inset 0 -2px 1px rgba(0,0,0,.15) !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .dashboardHeroCard{
    margin-top:9px !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE HERO BALANCED SHADOW V20
   =========================================================
   TUJUAN:
   - Mempertahankan jarak hero dari navbar mobile.
   - Mengurangi shadow V19 yang terlalu kuat.
   - Menghapus arah depth kanan-bawah yang membuat sudut
     terasa tidak merata.
   - Membuat radius dan bayangan hero seimbang seperti
     dashboardMobileInfoCard.
   - Struktur, gradient, isi hero, data user, Menu Layanan,
     drawer, footer, desktop, dan JavaScript tidak diubah.
   ========================================================= */

@media (max-width:740px){
  .dashboardHeroCard{
    margin-top:12px !important;

    /* Sudut dibuat merata di seluruh sisi */
    border-radius:22px !important;

    border:1px solid rgba(255,255,255,.42) !important;

    /*
     * Shadow mengikuti karakter dashboardMobileInfoCard:
     * - tidak ada extrusion 2px/4px
     * - bayangan jatuh lurus ke bawah
     * - lebih ringan dan proporsional
     */
    box-shadow:
      0 14px 28px rgba(16,70,80,.09),
      0 4px 10px rgba(16,70,80,.04),
      inset 0 1px 0 rgba(255,255,255,.46) !important;
  }

  html[data-theme="dark"] .dashboardHeroCard{
    border-color:rgba(255,255,255,.12) !important;

    box-shadow:
      0 14px 28px rgba(0,0,0,.24),
      0 4px 10px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardHeroCard{
    margin-top:10px !important;
    border-radius:21px !important;

    box-shadow:
      0 12px 24px rgba(16,70,80,.085),
      0 4px 9px rgba(16,70,80,.035),
      inset 0 1px 0 rgba(255,255,255,.44) !important;
  }

  html[data-theme="dark"] .dashboardHeroCard{
    box-shadow:
      0 12px 24px rgba(0,0,0,.22),
      0 4px 9px rgba(0,0,0,.13),
      inset 0 1px 0 rgba(255,255,255,.075) !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .dashboardHeroCard{
    margin-top:9px !important;
    border-radius:20px !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE HERO WHITE BORDER V21
   =========================================================
   TUJUAN:
   - Khusus dashboardHeroCard pada tampilan HP.
   - Menambahkan border putih yang lebih terlihat seperti
     mockup acuan, tetapi tetap tipis dan elegan.
   - Shadow balanced V20 tetap dipertahankan.
   - Radius, spacing, gradient, avatar, badge kehamilan,
     watermark, Menu Layanan, navbar, drawer, footer,
     desktop, dan JavaScript tidak diubah.
   ========================================================= */

@media (max-width:740px){
  .dashboardHeroCard{
    /*
     * Border putih tipis.
     * 1px dipilih agar frame terlihat jelas tanpa membuat
     * hero terasa berat atau mengecilkan area visual.
     */
    border:1px solid rgba(255,255,255,.78) !important;

    /*
     * Inner highlight sangat halus agar border putih menyatu
     * dengan surface hero dan tetap terlihat premium.
     */
    box-shadow:
      0 14px 28px rgba(16,70,80,.09),
      0 4px 10px rgba(16,70,80,.04),
      inset 0 1px 0 rgba(255,255,255,.56) !important;
  }

  html[data-theme="dark"] .dashboardHeroCard{
    border-color:rgba(255,255,255,.34) !important;

    box-shadow:
      0 14px 28px rgba(0,0,0,.24),
      0 4px 10px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.12) !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardHeroCard{
    border:1px solid rgba(255,255,255,.76) !important;

    box-shadow:
      0 12px 24px rgba(16,70,80,.085),
      0 4px 9px rgba(16,70,80,.035),
      inset 0 1px 0 rgba(255,255,255,.54) !important;
  }

  html[data-theme="dark"] .dashboardHeroCard{
    border-color:rgba(255,255,255,.32) !important;

    box-shadow:
      0 12px 24px rgba(0,0,0,.22),
      0 4px 9px rgba(0,0,0,.13),
      inset 0 1px 0 rgba(255,255,255,.11) !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .dashboardHeroCard{
    border-color:rgba(255,255,255,.74) !important;
  }

  html[data-theme="dark"] .dashboardHeroCard{
    border-color:rgba(255,255,255,.30) !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE HERO WHITE BORDER V22
   =========================================================
   REFINEMENT DARI V21:
   - Border hero ditebalkan sedikit.
   - Dari 1px menjadi 1.5px.
   - Warna, shadow, radius, spacing, gradient, dan isi hero
     tetap sama seperti V21.
   ========================================================= */

@media (max-width:740px){
  .dashboardHeroCard{
    border:1.5px solid rgba(255,255,255,.78) !important;
  }

  html[data-theme="dark"] .dashboardHeroCard{
    border:1.5px solid rgba(255,255,255,.34) !important;
  }
}

@media (max-width:420px){
  .dashboardHeroCard{
    border:1.5px solid rgba(255,255,255,.76) !important;
  }

  html[data-theme="dark"] .dashboardHeroCard{
    border:1.5px solid rgba(255,255,255,.32) !important;
  }
}

@media (max-width:350px){
  .dashboardHeroCard{
    border:1.5px solid rgba(255,255,255,.74) !important;
  }

  html[data-theme="dark"] .dashboardHeroCard{
    border:1.5px solid rgba(255,255,255,.30) !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE INFO TEXT COMPACT V23
   =========================================================
   TUJUAN:
   - Membatasi deskripsi dashboardMobileInfoCard maksimal 2 baris.
   - Copy utama dipersingkat menjadi maksimal 8 kata.
   - Tidak mengubah title, icon, chevron, card size,
     Hero, Menu Layanan, navbar, drawer, atau footer.
   ========================================================= */

@media (max-width:740px){
  .dashboardMobileInfoCardText{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;

    max-height:2.76em !important;
    overflow:hidden !important;

    white-space:normal !important;
    text-overflow:ellipsis !important;
  }
}

@media (max-width:420px){
  .dashboardMobileInfoCardText{
    max-height:2.72em !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE HERO + INFO CARD COMPACT V24
   =========================================================
   TUJUAN:
   - Khusus tampilan HP <=740px.
   - Mengurangi tinggi dashboardHeroCard.
   - Mengurangi tinggi dashboardMobileInfoCard.
   - Mempertahankan border putih V22, balanced shadow,
     gradient, status kehamilan, teks, warna, Menu Layanan,
     navbar, drawer, footer, dan fungsi existing.
   - Desktop / tablet >740px tidak diubah.
   ========================================================= */

/* =========================================================
   MOBILE UMUM <=740PX
   ========================================================= */
@media (max-width:740px){

  /* -------------------------------------------------------
     HERO CARD - DIPENDEKKAN SECARA PROPORSIONAL
     ------------------------------------------------------- */
  .dashboardHeroCard{
    min-height:158px !important;
    padding:14px 14px 12px !important;
  }

  .dashboardHeroIntro{
    width:calc(100% - 94px) !important;
    gap:9px !important;
  }

  .dashboardHeroUserPhoto{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
  }

  .dashboardHeroTitle,
  .dashboardHeroTitleSplit{
    gap:1px !important;
    font-size:18px !important;
    line-height:1.04 !important;
  }

  .dashboardWelcomeGreeting{
    font-size:16px !important;
    line-height:1.05 !important;
  }

  .dashboardWelcomeName{
    font-size:17px !important;
    line-height:1.06 !important;
  }

  .dashboardHeroSupport{
    width:calc(100% - 22px) !important;
    max-width:270px !important;
    margin-top:8px !important;
    gap:6px !important;
    font-size:10.8px !important;
    line-height:1.26 !important;
  }

  .dashboardHeroSupport i{
    margin-top:1px !important;
    font-size:12px !important;
  }

  .dashboardPregnancyStatusCard{
    top:12px !important;
    right:10px !important;
    width:88px !important;
    min-height:48px !important;
    padding:6px 7px !important;
    gap:5px !important;
    border-radius:15px !important;
  }

  .dashboardPregnancyStatusIcon{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    font-size:10.5px !important;
  }

  .dashboardPregnancyStatusCopy strong{
    font-size:8.4px !important;
    line-height:1.04 !important;
  }

  .dashboardPregnancyStatusCopy small{
    font-size:7px !important;
    line-height:1.05 !important;
  }

  .dashboardHeroCard::before{
    width:164px !important;
    height:164px !important;
    top:40px !important;
    right:-62px !important;
  }

  .dashboardHeroWatermark{
    right:-5px !important;
    bottom:-25px !important;
    width:92px !important;
    height:92px !important;
  }

  .dashboardHeroWatermark i{
    font-size:76px !important;
  }

  /* -------------------------------------------------------
     INFO CARD - DIPENDEKKAN
     ------------------------------------------------------- */
  .dashboardMobileInfoCardSection{
    margin-top:11px !important;
  }

  .dashboardMobileInfoCard{
    min-height:78px !important;
    padding:9px 11px !important;
    grid-template-columns:44px minmax(0,1fr) 18px !important;
    gap:9px !important;
    border-radius:20px !important;
  }

  .dashboardMobileInfoCardIcon{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }

  .dashboardMobileInfoCardIcon i{
    font-size:18px !important;
  }

  .dashboardMobileInfoCardBody{
    gap:2px !important;
  }

  .dashboardMobileInfoCardTitle{
    font-size:12.5px !important;
    line-height:1.16 !important;
  }

  .dashboardMobileInfoCardText{
    font-size:9.5px !important;
    line-height:1.25 !important;
    max-height:2.5em !important;
  }

  .dashboardMobileInfoChevron{
    width:18px !important;
    height:30px !important;
    font-size:14px !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardHeroCard{
    min-height:150px !important;
    padding:12px 12px 10px !important;
  }

  .dashboardHeroIntro{
    width:calc(100% - 88px) !important;
    gap:8px !important;
  }

  .dashboardHeroUserPhoto{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
  }

  .dashboardWelcomeGreeting{
    font-size:15px !important;
  }

  .dashboardWelcomeName{
    font-size:16px !important;
  }

  .dashboardHeroSupport{
    width:calc(100% - 16px) !important;
    max-width:245px !important;
    margin-top:7px !important;
    font-size:10.1px !important;
    line-height:1.24 !important;
  }

  .dashboardHeroSupport i{
    font-size:11.5px !important;
  }

  .dashboardPregnancyStatusCard{
    top:10px !important;
    right:9px !important;
    width:84px !important;
    min-height:45px !important;
    padding:6px !important;
    border-radius:14px !important;
  }

  .dashboardPregnancyStatusIcon{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    font-size:10px !important;
  }

  .dashboardPregnancyStatusCopy strong{
    font-size:8px !important;
  }

  .dashboardPregnancyStatusCopy small{
    font-size:6.7px !important;
  }

  .dashboardHeroCard::before{
    width:154px !important;
    height:154px !important;
    top:38px !important;
    right:-59px !important;
  }

  .dashboardHeroWatermark{
    width:86px !important;
    height:86px !important;
    bottom:-24px !important;
  }

  .dashboardHeroWatermark i{
    font-size:71px !important;
  }

  .dashboardMobileInfoCardSection{
    margin-top:10px !important;
  }

  .dashboardMobileInfoCard{
    min-height:72px !important;
    padding:8px 10px !important;
    grid-template-columns:41px minmax(0,1fr) 17px !important;
    gap:8px !important;
    border-radius:19px !important;
  }

  .dashboardMobileInfoCardIcon{
    width:41px !important;
    height:41px !important;
    min-width:41px !important;
    min-height:41px !important;
  }

  .dashboardMobileInfoCardIcon i{
    font-size:17px !important;
  }

  .dashboardMobileInfoCardTitle{
    font-size:11.8px !important;
    line-height:1.15 !important;
  }

  .dashboardMobileInfoCardText{
    font-size:9px !important;
    line-height:1.22 !important;
    max-height:2.44em !important;
  }

  .dashboardMobileInfoChevron{
    width:17px !important;
    height:28px !important;
    font-size:13px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .dashboardHeroCard{
    min-height:144px !important;
    padding:11px 10px 9px !important;
  }

  .dashboardHeroUserPhoto{
    width:43px !important;
    height:43px !important;
    min-width:43px !important;
    min-height:43px !important;
  }

  .dashboardWelcomeGreeting{
    font-size:14.2px !important;
  }

  .dashboardWelcomeName{
    font-size:15px !important;
  }

  .dashboardHeroSupport{
    margin-top:6px !important;
    font-size:9.6px !important;
  }

  .dashboardPregnancyStatusCard{
    width:80px !important;
    min-height:43px !important;
    top:9px !important;
    right:8px !important;
  }

  .dashboardMobileInfoCard{
    min-height:68px !important;
    padding:7px 9px !important;
    grid-template-columns:39px minmax(0,1fr) 16px !important;
    gap:7px !important;
    border-radius:18px !important;
  }

  .dashboardMobileInfoCardIcon{
    width:39px !important;
    height:39px !important;
    min-width:39px !important;
    min-height:39px !important;
  }

  .dashboardMobileInfoCardTitle{
    font-size:11.2px !important;
  }

  .dashboardMobileInfoCardText{
    font-size:8.6px !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE MENU LAYANAN RAISED SHADOW V25
   =========================================================
   TUJUAN:
   - Membuat 8 tombol Menu Layanan terlihat sedikit lebih timbul.
   - Menambah kedalaman + shadow secara proporsional.
   - Tidak membuat efek 3D berlebihan.
   - Tidak memakai pseudo-layer / garis internal.
   - Warna Kemenkes, ukuran, posisi, label, dan layout 4 x 2
     tetap dipertahankan.
   ========================================================= */

@media (max-width:740px){

  /* =======================================================
     BASE RAISED SURFACE
     ======================================================= */
  .dashboardAppMenuIcon{
    /*
     * V25 sedikit lebih tinggi dari V18:
     * - depth naik tipis
     * - shadow utama lebih lebar tetapi tetap transparan
     * - bevel atas/bawah tetap halus
     */
    box-shadow:
      3px 5.8px 0 var(--menu-depth),
      0 11px 19px var(--menu-shadow),
      0 4px 8px rgba(16,70,80,.08),
      inset 0 2px 1px rgba(255,255,255,.23),
      inset 1px 0 1px rgba(255,255,255,.05),
      inset -1px 0 1px rgba(0,0,0,.022),
      inset 0 -2.5px 1.5px rgba(0,0,0,.075) !important;

    transform:translate3d(-1px,-1.8px,0) !important;
  }

  /* Hover/focus: sedikit naik, bukan melayang berlebihan */
  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translate3d(-1px,-2.8px,0) !important;

    box-shadow:
      3px 6.8px 0 var(--menu-depth),
      0 13px 21px var(--menu-shadow),
      0 4px 8px rgba(16,70,80,.09),
      inset 0 2px 1px rgba(255,255,255,.25),
      inset 0 -2.5px 1.5px rgba(0,0,0,.075) !important;
  }

  /* Tap tetap natural */
  .dashboardAppMenuCard:active .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(.8px,1.8px,0) scale(.992) !important;

    box-shadow:
      .8px 1.1px 0 var(--menu-depth),
      0 3px 6px rgba(16,70,80,.11),
      inset 0 2px 1px rgba(255,255,255,.13),
      inset 0 -1px 1px rgba(0,0,0,.05) !important;
  }

  /* Dark mode: tetap raised, shadow tidak terlalu berat */
  html[data-theme="dark"] .dashboardAppMenuIcon{
    box-shadow:
      3px 5.8px 0 var(--menu-depth),
      0 11px 19px rgba(0,0,0,.27),
      0 4px 8px rgba(0,0,0,.15),
      inset 0 2px 1px rgba(255,255,255,.16),
      inset 0 -2.5px 1.5px rgba(0,0,0,.11) !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardAppMenuIcon{
    box-shadow:
      2.4px 5px 0 var(--menu-depth),
      0 9px 15px var(--menu-shadow),
      0 3px 6px rgba(16,70,80,.075),
      inset 0 2px 1px rgba(255,255,255,.21),
      inset 0 -2px 1px rgba(0,0,0,.065) !important;

    transform:translate3d(-.8px,-1.3px,0) !important;
  }

  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translate3d(-.8px,-2.2px,0) !important;

    box-shadow:
      2.4px 5.8px 0 var(--menu-depth),
      0 11px 17px var(--menu-shadow),
      0 3px 6px rgba(16,70,80,.085),
      inset 0 2px 1px rgba(255,255,255,.22),
      inset 0 -2px 1px rgba(0,0,0,.065) !important;
  }

  .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(.5px,1.5px,0) scale(.992) !important;

    box-shadow:
      .5px .8px 0 var(--menu-depth),
      0 2px 4px rgba(16,70,80,.10),
      inset 0 1px 1px rgba(255,255,255,.12) !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE MENU LAYANAN NEUMORPHISM V26
   =========================================================
   TUJUAN:
   - Membuat 8 tombol Menu Layanan terlihat lebih neumorphism.
   - Warna solid resmi Kemenkes tetap dipertahankan:
       #00B9AD
       #CDDC29
       #60C0D0
   - Tidak memakai gradient putih yang mengubah warna tombol.
   - Tidak memakai pseudo-layer internal.
   - Efek timbul berasal dari kombinasi:
       1. shadow gelap kanan-bawah
       2. shadow terang kiri-atas
       3. bevel tipis dari inset shadow
   - Tetap halus, bersih, dan tidak berlebihan.
   ========================================================= */

@media (max-width:740px){

  /* =======================================================
     RESET LAYER INTERNAL
     ======================================================= */
  .dashboardAppMenuIcon::before,
  .dashboardAppMenuIcon::after{
    content:none !important;
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    background:none !important;
    box-shadow:none !important;
  }

  /* =======================================================
     BASE NEUMORPHISM SURFACE
     ======================================================= */
  .dashboardAppMenuIcon{
    --menu-face:#00B9AD;
    --menu-neu-dark:rgba(40,82,88,.22);
    --menu-neu-soft:rgba(40,82,88,.11);

    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    background:var(--menu-face) !important;
    background-color:var(--menu-face) !important;
    background-image:none !important;

    border:1px solid rgba(255,255,255,.24) !important;

    /*
     * Neumorphism:
     * - kanan/bawah = shadow gelap
     * - kiri/atas = highlight terang
     * - inset = bevel sangat halus
     */
    box-shadow:
      7px 8px 15px var(--menu-neu-dark),
      -5px -5px 11px rgba(255,255,255,.90),
      0 3px 7px var(--menu-neu-soft),
      inset 1.5px 1.5px 1px rgba(255,255,255,.25),
      inset -1.5px -1.5px 1.5px rgba(0,0,0,.075) !important;

    transform:translate3d(0,-1px,0) !important;

    transition:
      transform .16s cubic-bezier(.2,.8,.2,1),
      box-shadow .16s cubic-bezier(.2,.8,.2,1) !important;
  }

  /* =======================================================
     WARNA 1 / 4 / 7
     TURQOISE GELAP #00B9AD
     ======================================================= */
  .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 1) .dashboardAppMenuIcon{
    --menu-face:#00B9AD;
    --menu-neu-dark:rgba(0,111,105,.25);
    --menu-neu-soft:rgba(0,111,105,.12);

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;
  }

  /* =======================================================
     WARNA 2 / 5 / 8
     HIJAU KUNING #CDDC29
     ======================================================= */
  .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n + 2) .dashboardAppMenuIcon{
    --menu-face:#CDDC29;
    --menu-neu-dark:rgba(132,145,20,.24);
    --menu-neu-soft:rgba(132,145,20,.11);

    background:#CDDC29 !important;
    background-color:#CDDC29 !important;
    background-image:none !important;
  }

  /* =======================================================
     WARNA 3 / 6
     TURQOISE MEDIUM #60C0D0
     ======================================================= */
  .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:nth-child(3n) .dashboardAppMenuIcon{
    --menu-face:#60C0D0;
    --menu-neu-dark:rgba(45,126,139,.24);
    --menu-neu-soft:rgba(45,126,139,.11);

    background:#60C0D0 !important;
    background-color:#60C0D0 !important;
    background-image:none !important;
  }

  /* =======================================================
     ICON 3D - DIPERTAHANKAN
     ======================================================= */
  .dashboardAppMenuIcon i,
  html[data-theme="dark"] .dashboardAppMenuIcon i{
    position:relative !important;
    z-index:2 !important;

    color:#FFFFFF !important;
    opacity:1 !important;
    visibility:visible !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,55,58,.22))
      drop-shadow(0 -1px 0 rgba(255,255,255,.14)) !important;

    text-shadow:
      0 1px 0 rgba(255,255,255,.10) !important;
  }

  /* =======================================================
     HOVER / FOCUS
     Sedikit lebih terangkat.
     ======================================================= */
  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translate3d(0,-2.5px,0) !important;

    box-shadow:
      8px 10px 18px var(--menu-neu-dark),
      -6px -6px 12px rgba(255,255,255,.94),
      0 4px 8px var(--menu-neu-soft),
      inset 1.5px 1.5px 1px rgba(255,255,255,.27),
      inset -1.5px -1.5px 1.5px rgba(0,0,0,.075) !important;
  }

  /* =======================================================
     ACTIVE / TAP
     Neumorphism ditekan: shadow luar mengecil,
     inset sedikit diperkuat.
     ======================================================= */
  .dashboardAppMenuCard:active .dashboardAppMenuIcon,
  html[data-theme="dark"] .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(0,1px,0) scale(.988) !important;

    box-shadow:
      2px 3px 6px var(--menu-neu-soft),
      -1px -1px 3px rgba(255,255,255,.55),
      inset 2px 2px 3px rgba(0,0,0,.075),
      inset -2px -2px 3px rgba(255,255,255,.16) !important;
  }

  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"] .dashboardAppMenuIcon{
    border-color:rgba(255,255,255,.16) !important;

    box-shadow:
      7px 8px 15px rgba(0,0,0,.32),
      -4px -4px 10px rgba(255,255,255,.055),
      0 3px 7px rgba(0,0,0,.18),
      inset 1.5px 1.5px 1px rgba(255,255,255,.14),
      inset -1.5px -1.5px 1.5px rgba(0,0,0,.13) !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardAppMenuIcon{
    box-shadow:
      6px 7px 13px var(--menu-neu-dark),
      -4px -4px 9px rgba(255,255,255,.88),
      0 3px 6px var(--menu-neu-soft),
      inset 1.25px 1.25px 1px rgba(255,255,255,.23),
      inset -1.25px -1.25px 1px rgba(0,0,0,.07) !important;

    transform:translate3d(0,-.8px,0) !important;
  }

  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:translate3d(0,-2px,0) !important;

    box-shadow:
      7px 8px 15px var(--menu-neu-dark),
      -5px -5px 10px rgba(255,255,255,.92),
      0 3px 7px var(--menu-neu-soft),
      inset 1.25px 1.25px 1px rgba(255,255,255,.25),
      inset -1.25px -1.25px 1px rgba(0,0,0,.07) !important;
  }

  .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:translate3d(0,.8px,0) scale(.988) !important;

    box-shadow:
      1.5px 2px 5px var(--menu-neu-soft),
      -1px -1px 2px rgba(255,255,255,.50),
      inset 1.8px 1.8px 2.5px rgba(0,0,0,.07),
      inset -1.8px -1.8px 2.5px rgba(255,255,255,.14) !important;
  }
}

/* =========================================================
   BUMIL KU - SERVICE ICON NEUMORPH COLOR LOCK V29
   =========================================================
   TUJUAN:
   - Outer neumorphism card hanya membungkus icon berwarna.
   - Nama menu tetap berada di luar card.
   - Warna tombol WAJIB dipertahankan persis:
       1 / 4 / 7 = #00B9AD
       2 / 5 / 8 = #CDDC29
       3 / 6     = #60C0D0
   - Outer card mengikuti karakter dashboardMobileMenuNeumorph.
   - Tidak mengubah routing, label, grid 4x2, JavaScript,
     desktop, atau tablet.
   ========================================================= */

.dashboardServiceIconNeumorph{
  display:contents;
}

@media (max-width:740px){

  /* =======================================================
     BUTTON UTAMA TETAP TRANSPARAN
     ======================================================= */
  .dashboardAppMenuCard,
  html[data-theme="dark"] .dashboardAppMenuCard{
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;

    overflow:visible !important;
    transform:none !important;
  }

  .dashboardAppMenuCard:hover,
  .dashboardAppMenuCard:focus-visible,
  .dashboardAppMenuCard:active,
  html[data-theme="dark"] .dashboardAppMenuCard:hover,
  html[data-theme="dark"] .dashboardAppMenuCard:focus-visible,
  html[data-theme="dark"] .dashboardAppMenuCard:active{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /* =======================================================
     OUTER NEUMORPH WRAPPER
     ======================================================= */
  .dashboardServiceIconNeumorph{
    width:62px !important;
    height:62px !important;
    min-width:62px !important;
    min-height:62px !important;
    max-width:62px !important;
    max-height:62px !important;
    flex:0 0 62px !important;

    padding:5px !important;
    margin:0 auto !important;

    display:grid !important;
    place-items:center !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;

    border:1px solid rgba(255,255,255,.90) !important;
    border-radius:18px !important;

    box-shadow:
      7px 7px 15px rgba(26,72,80,.14),
      -5px -5px 12px rgba(255,255,255,.96),
      inset 1px 1px 1px rgba(255,255,255,.95),
      inset -1px -1px 1px rgba(74,111,120,.045) !important;

    transition:
      transform .16s ease,
      box-shadow .16s ease !important;
  }

  /* =======================================================
     INNER ICON BUTTON - UKURAN
     ======================================================= */
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    max-width:50px !important;
    max-height:50px !important;
    flex:0 0 50px !important;

    margin:0 !important;
    border-radius:15px !important;
    border-width:1px !important;

    transform:none !important;
    background-image:none !important;

    /*
     * Shadow internal dibuat ringan.
     * Warna permukaan dikunci oleh selector di bawah.
     */
    box-shadow:
      0 5px 10px rgba(16,70,80,.13),
      inset 1px 1px 1px rgba(255,255,255,.18),
      inset -1px -1px 1px rgba(0,0,0,.055) !important;
  }

  /* =======================================================
     WARNA TOMBOL - LOCK
     1 / 4 / 7 = TURQOISE GELAP
     ======================================================= */
  .dashboardAppMenuCard:nth-child(3n + 1)
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon,
  html[data-theme="dark"]
  .dashboardAppMenuCard:nth-child(3n + 1)
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    --menu-face:#00B9AD !important;
    --menu-neu-dark:rgba(0,111,105,.25) !important;
    --menu-neu-soft:rgba(0,111,105,.12) !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border-color:#00B9AD !important;
  }

  /* =======================================================
     WARNA TOMBOL - LOCK
     2 / 5 / 8 = HIJAU KUNING
     ======================================================= */
  .dashboardAppMenuCard:nth-child(3n + 2)
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon,
  html[data-theme="dark"]
  .dashboardAppMenuCard:nth-child(3n + 2)
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    --menu-face:#CDDC29 !important;
    --menu-neu-dark:rgba(132,145,20,.24) !important;
    --menu-neu-soft:rgba(132,145,20,.11) !important;

    background:#CDDC29 !important;
    background-color:#CDDC29 !important;
    background-image:none !important;

    border-color:#CDDC29 !important;
  }

  /* =======================================================
     WARNA TOMBOL - LOCK
     3 / 6 = TURQOISE MEDIUM
     ======================================================= */
  .dashboardAppMenuCard:nth-child(3n)
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon,
  html[data-theme="dark"]
  .dashboardAppMenuCard:nth-child(3n)
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    --menu-face:#60C0D0 !important;
    --menu-neu-dark:rgba(45,126,139,.24) !important;
    --menu-neu-soft:rgba(45,126,139,.11) !important;

    background:#60C0D0 !important;
    background-color:#60C0D0 !important;
    background-image:none !important;

    border-color:#60C0D0 !important;
  }

  /* =======================================================
     ICON PUTIH TETAP 3D
     ======================================================= */
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon i,
  html[data-theme="dark"]
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon i{
    position:relative !important;
    z-index:2 !important;

    color:#FFFFFF !important;
    opacity:1 !important;
    visibility:visible !important;

    font-size:20px !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,55,58,.22))
      drop-shadow(0 -1px 0 rgba(255,255,255,.14)) !important;

    text-shadow:
      0 1px 0 rgba(255,255,255,.10) !important;
  }

  /* Nama menu tetap di luar card */
  .dashboardAppMenuText{
    width:100% !important;
    min-height:22px !important;
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;

    color:#17384c !important;
    font-size:9.2px !important;
    line-height:1.15 !important;
    font-weight:800 !important;

    text-align:center !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  /* =======================================================
     INTERACTION
     Outer wrapper bergerak, warna tombol tidak berubah.
     ======================================================= */
  .dashboardAppMenuCard:hover .dashboardServiceIconNeumorph,
  .dashboardAppMenuCard:focus-visible .dashboardServiceIconNeumorph{
    transform:translateY(-1.5px) !important;

    box-shadow:
      8px 8px 17px rgba(26,72,80,.16),
      -6px -6px 13px rgba(255,255,255,.98),
      inset 1px 1px 1px rgba(255,255,255,.96),
      inset -1px -1px 1px rgba(74,111,120,.05) !important;
  }

  .dashboardAppMenuCard:hover .dashboardAppMenuIcon,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuIcon{
    transform:none !important;
  }

  .dashboardAppMenuCard:active .dashboardServiceIconNeumorph{
    transform:translateY(1px) scale(.985) !important;

    box-shadow:
      3px 3px 7px rgba(26,72,80,.11),
      -2px -2px 5px rgba(255,255,255,.72),
      inset 1.5px 1.5px 2px rgba(74,111,120,.055),
      inset -1.5px -1.5px 2px rgba(255,255,255,.62) !important;
  }

  .dashboardAppMenuCard:active .dashboardAppMenuIcon{
    transform:scale(.97) !important;
  }

  /* =======================================================
     DARK MODE OUTER WRAPPER
     Inner tombol tetap memakai warna yang sama.
     ======================================================= */
  html[data-theme="dark"] .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 48%,
        #0b2227 100%
      ) !important;

    border-color:rgba(255,255,255,.055) !important;

    box-shadow:
      7px 7px 15px rgba(0,0,0,.32),
      -4px -4px 10px rgba(40,78,84,.20),
      inset 1px 1px 1px rgba(255,255,255,.045),
      inset -1px -1px 1px rgba(0,0,0,.20) !important;
  }

  html[data-theme="dark"] .dashboardAppMenuText{
    color:#eafcff !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardServiceIconNeumorph{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    max-width:58px !important;
    max-height:58px !important;
    flex-basis:58px !important;

    padding:4px !important;
    border-radius:17px !important;

    box-shadow:
      6px 6px 13px rgba(26,72,80,.13),
      -4px -4px 10px rgba(255,255,255,.94),
      inset 1px 1px 1px rgba(255,255,255,.94),
      inset -1px -1px 1px rgba(74,111,120,.04) !important;
  }

  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    max-width:48px !important;
    max-height:48px !important;
    flex-basis:48px !important;
    border-radius:14px !important;
  }

  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon i{
    font-size:19px !important;
  }

  .dashboardAppMenuText{
    font-size:8.8px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .dashboardServiceIconNeumorph{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    max-width:54px !important;
    max-height:54px !important;
    flex-basis:54px !important;
    border-radius:16px !important;
  }

  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    flex-basis:44px !important;
    border-radius:13px !important;
  }

  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon i{
    font-size:18px !important;
  }

  .dashboardAppMenuText{
    font-size:8.3px !important;
  }
}

/* =========================================================
   BUMIL KU - MOBILE REKOMENDASI ARTIKEL VARIAN 4 V32
   =========================================================
   TUJUAN:
   - Implementasi visual Varian 4 pilihan pengguna.
   - Tiga card rekomendasi artikel pada tampilan HP.
   - Foto artikel di kiri, konten artikel di kanan.
   - Bookmark outline di kanan bawah setiap card.
   - Tombol "Lihat semua artikel" di bawah daftar.
   - Sumber gambar tetap dari ./assets/artikel/.
   - Tidak mengubah Hero, Menu Layanan 4x2, navbar,
     drawer, bottom navigation, desktop, Auth, Firestore,
     routing existing, maupun dashboard.js.
   ========================================================= */

.dashboardMobileArticleRecommendation{
  display:none;
}

@media (max-width:740px){
  .dashboardMobileDailyCard{
    display:none !important;
  }

  .dashboardMobileArticleRecommendation,
  .dashboardMobileArticleRecommendation *{
    box-sizing:border-box;
  }

  .dashboardMobileArticleRecommendation{
    width:100% !important;
    max-width:100% !important;
    margin:14px 0 0 !important;
    padding:0 !important;
    display:block !important;
  }

  /* -------------------------------------------------------
     SECTION HEADER
     ------------------------------------------------------- */
  .dashboardMobileArticleSectionHead{
    width:100% !important;
    margin:0 0 9px !important;
    padding:0 3px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:12px !important;
  }

  .dashboardMobileArticleHeading{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
  }

  .dashboardMobileArticleEyebrow{
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    width:max-content !important;
    max-width:100% !important;
    color:#0F9F8D !important;
    font-size:9.2px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.018em !important;
  }

  .dashboardMobileArticleEyebrow i{
    color:#0F9F8D !important;
    font-size:10px !important;
  }

  .dashboardMobileArticleHeading h2{
    margin:0 !important;
    color:#17384c !important;
    font-size:16px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    letter-spacing:-.028em !important;
  }

  .dashboardMobileArticleSeeAll{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:28px !important;
    padding:0 2px !important;
    color:#0E9382 !important;
    text-decoration:none !important;
    font-size:9.5px !important;
    line-height:1 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .dashboardMobileArticleSeeAll:active{
    transform:scale(.97) !important;
  }

  /* -------------------------------------------------------
     ARTICLE LIST
     ------------------------------------------------------- */
  .dashboardMobileArticleList{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:9px !important;
  }

  .dashboardMobileArticleCard{
    width:100% !important;
    min-height:112px !important;

    display:grid !important;
    grid-template-columns:100px minmax(0,1fr) !important;
    align-items:stretch !important;

    overflow:hidden !important;
    position:relative !important;

    color:inherit !important;
    text-decoration:none !important;

    background:rgba(255,255,255,.97) !important;
    border:1px solid rgba(58,105,119,.10) !important;
    border-radius:18px !important;

    box-shadow:
      0 10px 22px rgba(16,70,80,.072),
      0 3px 7px rgba(16,70,80,.032),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    -webkit-tap-highlight-color:transparent !important;

    transition:
      transform .18s ease,
      box-shadow .18s ease,
      border-color .18s ease !important;
  }

  .dashboardMobileArticleCard:hover,
  .dashboardMobileArticleCard:focus-visible{
    border-color:rgba(15,159,141,.18) !important;
    box-shadow:
      0 13px 26px rgba(16,70,80,.095),
      0 4px 9px rgba(15,159,141,.04),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    outline:none !important;
  }

  .dashboardMobileArticleCard:active{
    transform:scale(.992) !important;
  }

  /* -------------------------------------------------------
     IMAGE LEFT
     ------------------------------------------------------- */
  .dashboardMobileArticleMedia{
    position:relative !important;
    width:100px !important;
    height:100% !important;
    min-height:112px !important;
    margin:0 !important;
    overflow:hidden !important;
    background:#eaf8f5 !important;
  }

  .dashboardMobileArticleImage{
    width:100% !important;
    height:100% !important;
    min-height:112px !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    transform:scale(1.001) !important;
    transition:transform .28s ease !important;
  }

  .dashboardMobileArticleCard:hover .dashboardMobileArticleImage{
    transform:scale(1.025) !important;
  }

  /* -------------------------------------------------------
     CONTENT RIGHT
     ------------------------------------------------------- */
  .dashboardMobileArticleContent{
    min-width:0 !important;
    padding:9px 10px 8px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  .dashboardMobileArticleCategory{
    width:max-content !important;
    max-width:100% !important;
    min-height:19px !important;
    margin:0 0 5px !important;
    padding:0 8px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#0E9382 !important;
    background:rgba(15,159,141,.075) !important;

    border:1px solid rgba(15,159,141,.095) !important;
    border-radius:999px !important;

    font-size:7.7px !important;
    line-height:1 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
  }

  .dashboardMobileArticleTitle{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;

    margin:0 !important;
    overflow:hidden !important;

    color:#17384c !important;
    font-size:10.7px !important;
    line-height:1.24 !important;
    font-weight:800 !important;
    letter-spacing:-.018em !important;
  }

  .dashboardMobileArticleDescription{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;

    margin:4px 0 0 !important;
    overflow:hidden !important;

    color:#65788a !important;
    font-size:8.1px !important;
    line-height:1.32 !important;
    font-weight:500 !important;
  }

  /* -------------------------------------------------------
     META + BOOKMARK
     ------------------------------------------------------- */
  .dashboardMobileArticleFooter{
    width:100% !important;
    margin-top:7px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }

  .dashboardMobileArticleMeta{
    min-width:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:4px !important;

    color:#7b909b !important;

    font-size:7.8px !important;
    line-height:1 !important;
    font-weight:700 !important;
  }

  .dashboardMobileArticleMeta i{
    color:#0F9F8D !important;
    font-size:8.7px !important;
  }

  .dashboardMobileArticleBookmark{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
    flex:0 0 24px !important;

    display:grid !important;
    place-items:center !important;

    color:#0F9F8D !important;
    background:transparent !important;
    border:0 !important;
    border-radius:7px !important;
    box-shadow:none !important;

    font-size:13px !important;

    transition:
      transform .16s ease,
      color .16s ease,
      background .16s ease !important;
  }

  .dashboardMobileArticleCard:hover .dashboardMobileArticleBookmark{
    color:#0E9382 !important;
    background:rgba(15,159,141,.06) !important;
    transform:translateY(-1px) !important;
  }

  .dashboardMobileArticleBookmark i{
    color:currentColor !important;
  }

  /* -------------------------------------------------------
     BOTTOM "LIHAT SEMUA ARTIKEL" BUTTON
     ------------------------------------------------------- */
  .dashboardMobileArticleAllButton{
    width:100% !important;
    min-height:42px !important;

    margin:10px 0 0 !important;
    padding:0 14px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;

    position:relative !important;

    color:#0E9382 !important;
    text-decoration:none !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.98) 0%,
        rgba(247,252,251,.98) 100%
      ) !important;

    border:1px solid rgba(15,159,141,.10) !important;
    border-radius:999px !important;

    box-shadow:
      0 8px 18px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    -webkit-tap-highlight-color:transparent !important;

    transition:
      transform .16s ease,
      box-shadow .16s ease,
      border-color .16s ease !important;
  }

  .dashboardMobileArticleAllButtonLabel{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;

    font-size:9px !important;
    line-height:1 !important;
    font-weight:800 !important;
  }

  .dashboardMobileArticleAllButtonLabel i{
    font-size:10px !important;
    color:#0F9F8D !important;
  }

  .dashboardMobileArticleAllButtonArrow{
    position:absolute !important;
    right:14px !important;

    color:#0F9F8D !important;
    font-size:9px !important;
  }

  .dashboardMobileArticleAllButton:hover,
  .dashboardMobileArticleAllButton:focus-visible{
    border-color:rgba(15,159,141,.18) !important;

    box-shadow:
      0 10px 21px rgba(16,70,80,.075),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    transform:translateY(-1px) !important;
    outline:none !important;
  }

  .dashboardMobileArticleAllButton:active{
    transform:translateY(0) scale(.994) !important;
  }

  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"] .dashboardMobileArticleHeading h2,
  html[data-theme="dark"] .dashboardMobileArticleTitle{
    color:#eafcff !important;
  }

  html[data-theme="dark"] .dashboardMobileArticleDescription,
  html[data-theme="dark"] .dashboardMobileArticleMeta{
    color:#aac8cc !important;
  }

  html[data-theme="dark"] .dashboardMobileArticleCard{
    background:rgba(16,43,48,.95) !important;
    border-color:rgba(255,255,255,.075) !important;

    box-shadow:
      0 13px 27px rgba(0,0,0,.23),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  html[data-theme="dark"] .dashboardMobileArticleCategory{
    color:#53ebe8 !important;
    background:rgba(83,235,232,.07) !important;
    border-color:rgba(83,235,232,.10) !important;
  }

  html[data-theme="dark"] .dashboardMobileArticleSeeAll,
  html[data-theme="dark"] .dashboardMobileArticleEyebrow,
  html[data-theme="dark"] .dashboardMobileArticleEyebrow i,
  html[data-theme="dark"] .dashboardMobileArticleMeta i,
  html[data-theme="dark"] .dashboardMobileArticleBookmark{
    color:#53ebe8 !important;
  }

  html[data-theme="dark"] .dashboardMobileArticleAllButton{
    color:#53ebe8 !important;
    background:
      linear-gradient(
        145deg,
        #16363c 0%,
        #102b30 100%
      ) !important;
    border-color:rgba(83,235,232,.10) !important;

    box-shadow:
      0 9px 19px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"] .dashboardMobileArticleAllButtonLabel i,
  html[data-theme="dark"] .dashboardMobileArticleAllButtonArrow{
    color:#53ebe8 !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardMobileArticleRecommendation{
    margin-top:12px !important;
  }

  .dashboardMobileArticleSectionHead{
    margin-bottom:8px !important;
    padding:0 2px !important;
  }

  .dashboardMobileArticleEyebrow{
    font-size:8.7px !important;
  }

  .dashboardMobileArticleHeading h2{
    font-size:15px !important;
  }

  .dashboardMobileArticleSeeAll{
    font-size:9px !important;
  }

  .dashboardMobileArticleList{
    gap:8px !important;
  }

  .dashboardMobileArticleCard{
    min-height:104px !important;
    grid-template-columns:92px minmax(0,1fr) !important;
    border-radius:17px !important;
  }

  .dashboardMobileArticleMedia{
    width:92px !important;
    min-height:104px !important;
  }

  .dashboardMobileArticleImage{
    min-height:104px !important;
  }

  .dashboardMobileArticleContent{
    padding:8px 9px 7px !important;
  }

  .dashboardMobileArticleCategory{
    min-height:18px !important;
    margin-bottom:4px !important;
    padding:0 7px !important;
    font-size:7.3px !important;
  }

  .dashboardMobileArticleTitle{
    font-size:10px !important;
    line-height:1.22 !important;
  }

  .dashboardMobileArticleDescription{
    margin-top:3px !important;
    font-size:7.7px !important;
    line-height:1.29 !important;
  }

  .dashboardMobileArticleFooter{
    margin-top:6px !important;
  }

  .dashboardMobileArticleMeta{
    font-size:7.3px !important;
  }

  .dashboardMobileArticleBookmark{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    flex-basis:22px !important;
    font-size:12px !important;
  }

  .dashboardMobileArticleAllButton{
    min-height:40px !important;
    margin-top:9px !important;
    padding:0 13px !important;
  }

  .dashboardMobileArticleAllButtonLabel{
    font-size:8.7px !important;
  }

  .dashboardMobileArticleAllButtonArrow{
    right:13px !important;
    font-size:8.7px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .dashboardMobileArticleRecommendation{
    margin-top:11px !important;
  }

  .dashboardMobileArticleHeading h2{
    font-size:14px !important;
  }

  .dashboardMobileArticleSeeAll{
    font-size:8.5px !important;
  }

  .dashboardMobileArticleCard{
    min-height:96px !important;
    grid-template-columns:84px minmax(0,1fr) !important;
    border-radius:16px !important;
  }

  .dashboardMobileArticleMedia{
    width:84px !important;
    min-height:96px !important;
  }

  .dashboardMobileArticleImage{
    min-height:96px !important;
  }

  .dashboardMobileArticleContent{
    padding:7px 8px 6px !important;
  }

  .dashboardMobileArticleTitle{
    font-size:9.4px !important;
  }

  .dashboardMobileArticleDescription{
    font-size:7.3px !important;
  }

  .dashboardMobileArticleCategory{
    font-size:6.9px !important;
  }

  .dashboardMobileArticleAllButton{
    min-height:38px !important;
  }

  .dashboardMobileArticleAllButtonLabel{
    font-size:8.3px !important;
  }
}

/* =========================================================
   END BUMIL KU - MOBILE REKOMENDASI ARTIKEL VARIAN 4 V32
   ========================================================= */

/* =========================================================
   BUMIL KU - VARIAN 4 PHOTO INSET REFINEMENT V33
   =========================================================
   PERBAIKAN:
   - Menyamakan komposisi foto artikel dengan mockup Varian 4.
   - Foto tidak lagi menempel / full-bleed ke sisi card.
   - Foto menjadi elemen mandiri dengan ruang putih di sekeliling.
   - Radius foto terlihat di empat sudut.
   - Proporsi foto dibuat portrait-compact.
   - Konten tetap di kanan dan bookmark tetap di kanan bawah.
   - Hanya area rekomendasi artikel mobile yang berubah.
   ========================================================= */

@media (max-width:740px){
  .dashboardMobileArticleCard{
    min-height:126px !important;
    padding:8px !important;

    grid-template-columns:102px minmax(0,1fr) !important;
    column-gap:10px !important;

    align-items:center !important;

    border-radius:20px !important;
    overflow:hidden !important;
  }

  .dashboardMobileArticleMedia{
    width:102px !important;
    height:110px !important;
    min-height:110px !important;

    align-self:center !important;

    margin:0 !important;

    border-radius:14px !important;
    overflow:hidden !important;

    background:#eef8f6 !important;

    box-shadow:
      0 4px 10px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.76) !important;
  }

  .dashboardMobileArticleImage{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;

    object-fit:cover !important;
    object-position:center !important;

    border-radius:inherit !important;
  }

  .dashboardMobileArticleContent{
    min-width:0 !important;

    padding:2px 4px 2px 0 !important;

    align-self:stretch !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  .dashboardMobileArticleCategory{
    margin-bottom:5px !important;
  }

  .dashboardMobileArticleFooter{
    margin-top:7px !important;
  }

  html[data-theme="dark"] .dashboardMobileArticleMedia{
    background:#102b30 !important;

    box-shadow:
      0 5px 11px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardMobileArticleCard{
    min-height:116px !important;
    padding:7px !important;

    grid-template-columns:92px minmax(0,1fr) !important;
    column-gap:9px !important;

    border-radius:18px !important;
  }

  .dashboardMobileArticleMedia{
    width:92px !important;
    height:102px !important;
    min-height:102px !important;

    border-radius:13px !important;
  }

  .dashboardMobileArticleContent{
    padding:2px 3px 2px 0 !important;
  }

  .dashboardMobileArticleTitle{
    font-size:10px !important;
  }

  .dashboardMobileArticleDescription{
    font-size:7.7px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .dashboardMobileArticleCard{
    min-height:108px !important;
    padding:6px !important;

    grid-template-columns:84px minmax(0,1fr) !important;
    column-gap:8px !important;

    border-radius:17px !important;
  }

  .dashboardMobileArticleMedia{
    width:84px !important;
    height:96px !important;
    min-height:96px !important;

    border-radius:12px !important;
  }

  .dashboardMobileArticleContent{
    padding-right:2px !important;
  }
}

/* =========================================================
   END BUMIL KU - VARIAN 4 PHOTO INSET REFINEMENT V33
   ========================================================= */

/* =========================================================
   BUMIL KU - PROFESSIONAL HEALTH SECTION V36
   WIDTH CONTAINMENT FIX
   =========================================================
   PERBAIKAN:
   - Section profesional tidak boleh memperlebar parent dashboard.
   - Carousel diubah menjadi flex horizontal dengan width 100%.
   - min-width:0 diterapkan pada container yang relevan.
   - Overflow hanya terjadi di dalam carousel profesional.
   - Menu Layanan sama sekali tidak disentuh.
   ========================================================= */

.dashboardProfessionalSection{
  display:none;
}

@media (max-width:740px){
  .dashboardProfessionalSection,
  .dashboardProfessionalSection *{
    box-sizing:border-box;
  }

  .dashboardProfessionalSection{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:16px 0 0 !important;
    padding:0 !important;

    display:block !important;

    overflow:hidden !important;
  }

  .dashboardProfessionalHeader{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 0 10px !important;
    padding:0 3px !important;
  }

  .dashboardProfessionalEyebrow{
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;

    width:max-content !important;
    max-width:100% !important;

    margin:0 0 4px !important;

    color:#0F9F8D !important;

    font-size:9px !important;
    line-height:1 !important;
    font-weight:800 !important;
  }

  .dashboardProfessionalEyebrow i{
    color:#0F9F8D !important;
    font-size:10px !important;
  }

  .dashboardProfessionalHeader h2{
    margin:0 !important;
    max-width:330px !important;

    color:#17384c !important;

    font-size:16px !important;
    line-height:1.16 !important;
    font-weight:800 !important;
    letter-spacing:-.028em !important;
  }

  .dashboardProfessionalIntro{
    margin:5px 0 0 !important;
    max-width:330px !important;

    color:#65788a !important;

    font-size:8.4px !important;
    line-height:1.38 !important;
    font-weight:500 !important;
  }

  /* -------------------------------------------------------
     CAROUSEL
     Penting: flex dipakai agar lebar keseluruhan daftar
     tidak menjadi intrinsic width parent dashboard.
     ------------------------------------------------------- */
  .dashboardProfessionalTrack{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:2px 0 11px !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;
    gap:10px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:x mandatory !important;
    scroll-padding-left:0 !important;

    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
    -webkit-overflow-scrolling:touch !important;

    overscroll-behavior-x:contain !important;
  }

  .dashboardProfessionalTrack::-webkit-scrollbar{
    display:none !important;
  }

  .dashboardProfessionalCard{
    width:min(78vw,292px) !important;
    max-width:min(78vw,292px) !important;
    min-width:min(78vw,292px) !important;
    flex:0 0 min(78vw,292px) !important;

    min-height:148px !important;

    margin:0 !important;
    padding:9px !important;

    display:grid !important;
    grid-template-columns:82px minmax(0,1fr) !important;
    align-items:center !important;
    gap:10px !important;

    scroll-snap-align:start !important;

    position:relative !important;
    overflow:hidden !important;

    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(94,222,231,.075),
        transparent 34%
      ),
      rgba(255,255,255,.97) !important;

    border:1px solid rgba(58,105,119,.10) !important;
    border-radius:20px !important;

    box-shadow:
      0 11px 23px rgba(16,70,80,.075),
      0 3px 7px rgba(16,70,80,.030),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }

  .dashboardProfessionalCard::after{
    content:"" !important;

    position:absolute !important;
    right:-34px !important;
    bottom:-42px !important;

    width:96px !important;
    height:96px !important;

    border-radius:50% !important;

    background:
      radial-gradient(
        circle,
        rgba(195,218,62,.10),
        transparent 68%
      ) !important;

    pointer-events:none !important;
  }

  .dashboardProfessionalPhotoWrap{
    width:82px !important;
    height:116px !important;
    min-width:82px !important;

    margin:0 !important;
    padding:0 !important;

    position:relative !important;
    z-index:2 !important;

    overflow:hidden !important;

    background:#eef9f6 !important;

    border:1px solid rgba(15,159,141,.10) !important;
    border-radius:16px !important;

    box-shadow:
      0 7px 15px rgba(16,70,80,.075),
      inset 0 1px 0 rgba(255,255,255,.90) !important;
  }

  .dashboardProfessionalPhoto{
    width:100% !important;
    height:100% !important;

    display:block !important;

    object-fit:cover !important;
    object-position:center top !important;

    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .dashboardProfessionalContent{
    min-width:0 !important;

    position:relative !important;
    z-index:2 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .dashboardProfessionalRoleBadge{
    min-height:20px !important;
    margin:0 0 6px !important;
    padding:0 7px !important;

    display:inline-flex !important;
    align-items:center !important;
    gap:4px !important;

    color:#0E9382 !important;
    background:rgba(15,159,141,.075) !important;

    border:1px solid rgba(15,159,141,.095) !important;
    border-radius:999px !important;

    font-size:7.2px !important;
    line-height:1 !important;
    font-weight:800 !important;

    white-space:nowrap !important;
  }

  .dashboardProfessionalRoleBadge i{
    color:#0F9F8D !important;
    font-size:7.8px !important;
  }

  .dashboardProfessionalContent h3{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;

    margin:0 !important;
    overflow:hidden !important;

    color:#17384c !important;

    font-size:10.6px !important;
    line-height:1.22 !important;
    font-weight:800 !important;
    letter-spacing:-.018em !important;
  }

  .dashboardProfessionalDescription{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;

    margin:4px 0 0 !important;
    overflow:hidden !important;

    color:#65788a !important;

    font-size:7.7px !important;
    line-height:1.30 !important;
    font-weight:500 !important;
  }

  .dashboardProfessionalTags{
    width:100% !important;
    margin:7px 0 0 !important;

    display:flex !important;
    flex-wrap:wrap !important;
    gap:4px !important;
  }

  .dashboardProfessionalTags span{
    min-height:18px !important;
    padding:0 6px !important;

    display:inline-flex !important;
    align-items:center !important;

    color:#54707c !important;
    background:#f4faf8 !important;

    border:1px solid rgba(58,105,119,.075) !important;
    border-radius:999px !important;

    font-size:6.7px !important;
    line-height:1 !important;
    font-weight:700 !important;

    white-space:nowrap !important;
  }

  .dashboardProfessionalProfileLink{
    width:100% !important;
    margin-top:8px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;

    color:#0E9382 !important;

    font-size:7.6px !important;
    line-height:1 !important;
    font-weight:800 !important;
  }

  .dashboardProfessionalProfileLink i{
    color:#0F9F8D !important;
    font-size:7.5px !important;
  }

  .dashboardProfessionalSwipeHint{
    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 4px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:5px !important;

    color:#7b909b !important;

    font-size:6.9px !important;
    line-height:1 !important;
    font-weight:600 !important;
  }

  .dashboardProfessionalSwipeHint i{
    color:#0F9F8D !important;
    font-size:7px !important;
  }

  html[data-theme="dark"] .dashboardProfessionalHeader h2,
  html[data-theme="dark"] .dashboardProfessionalContent h3{
    color:#eafcff !important;
  }

  html[data-theme="dark"] .dashboardProfessionalIntro,
  html[data-theme="dark"] .dashboardProfessionalDescription,
  html[data-theme="dark"] .dashboardProfessionalSwipeHint{
    color:#aac8cc !important;
  }

  html[data-theme="dark"] .dashboardProfessionalEyebrow,
  html[data-theme="dark"] .dashboardProfessionalEyebrow i,
  html[data-theme="dark"] .dashboardProfessionalProfileLink,
  html[data-theme="dark"] .dashboardProfessionalProfileLink i{
    color:#53ebe8 !important;
  }

  html[data-theme="dark"] .dashboardProfessionalCard{
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(83,235,232,.055),
        transparent 34%
      ),
      rgba(16,43,48,.95) !important;

    border-color:rgba(255,255,255,.075) !important;

    box-shadow:
      0 13px 27px rgba(0,0,0,.23),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  html[data-theme="dark"] .dashboardProfessionalPhotoWrap{
    background:#102b30 !important;
    border-color:rgba(83,235,232,.10) !important;

    box-shadow:
      0 6px 13px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"] .dashboardProfessionalRoleBadge{
    color:#53ebe8 !important;
    background:rgba(83,235,232,.07) !important;
    border-color:rgba(83,235,232,.10) !important;
  }

  html[data-theme="dark"] .dashboardProfessionalRoleBadge i{
    color:#53ebe8 !important;
  }

  html[data-theme="dark"] .dashboardProfessionalTags span{
    color:#c5e4e7 !important;
    background:rgba(255,255,255,.035) !important;
    border-color:rgba(255,255,255,.065) !important;
  }
}

@media (max-width:420px){
  .dashboardProfessionalSection{
    margin-top:14px !important;
  }

  .dashboardProfessionalHeader{
    margin-bottom:9px !important;
    padding:0 2px !important;
  }

  .dashboardProfessionalHeader h2{
    max-width:300px !important;
    font-size:15px !important;
  }

  .dashboardProfessionalIntro{
    max-width:310px !important;
    font-size:8px !important;
  }

  .dashboardProfessionalTrack{
    gap:9px !important;
  }

  .dashboardProfessionalCard{
    width:min(80vw,278px) !important;
    max-width:min(80vw,278px) !important;
    min-width:min(80vw,278px) !important;
    flex-basis:min(80vw,278px) !important;

    min-height:140px !important;
    padding:8px !important;

    grid-template-columns:76px minmax(0,1fr) !important;
    gap:9px !important;

    border-radius:18px !important;
  }

  .dashboardProfessionalPhotoWrap{
    width:76px !important;
    height:106px !important;
    min-width:76px !important;

    border-radius:14px !important;
  }

  .dashboardProfessionalContent h3{
    font-size:10px !important;
  }

  .dashboardProfessionalDescription{
    font-size:7.3px !important;
  }

  .dashboardProfessionalRoleBadge{
    min-height:19px !important;
    margin-bottom:5px !important;
    font-size:6.9px !important;
  }

  .dashboardProfessionalTags{
    margin-top:6px !important;
  }

  .dashboardProfessionalTags span{
    min-height:17px !important;
    font-size:6.4px !important;
  }

  .dashboardProfessionalProfileLink{
    margin-top:7px !important;
    font-size:7.2px !important;
  }

  .dashboardProfessionalSwipeHint{
    font-size:6.6px !important;
  }
}

@media (max-width:350px){
  .dashboardProfessionalHeader h2{
    font-size:14px !important;
  }

  .dashboardProfessionalCard{
    width:min(83vw,258px) !important;
    max-width:min(83vw,258px) !important;
    min-width:min(83vw,258px) !important;
    flex-basis:min(83vw,258px) !important;

    min-height:132px !important;
    padding:7px !important;

    grid-template-columns:70px minmax(0,1fr) !important;
    gap:8px !important;

    border-radius:17px !important;
  }

  .dashboardProfessionalPhotoWrap{
    width:70px !important;
    height:98px !important;
    min-width:70px !important;

    border-radius:13px !important;
  }

  .dashboardProfessionalContent h3{
    font-size:9.5px !important;
  }

  .dashboardProfessionalDescription{
    font-size:7px !important;
  }

  .dashboardProfessionalSwipeHint{
    font-size:6.2px !important;
  }
}

/* =========================================================
   END PROFESSIONAL HEALTH SECTION V36
   ========================================================= */


/* =========================================================
   BUMIL KU - PROFESSIONAL CAROUSEL NAVIGATION V37
   =========================================================
   TUJUAN:
   - Judul menjadi "Tenaga Kesehatan Profesional".
   - Tombol kiri / kanan berada tepat di sisi kanan judul.
   - Hanya mengatur elemen dashboardProfessional*.
   - Tidak mengubah Menu Layanan, Hero, Artikel, Navbar,
     Drawer, Bottom Navigation, Auth, Firestore, atau layout lain.
   ========================================================= */

@media (max-width:740px){

  .dashboardProfessionalTitleRow{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;

    margin:0 !important;
    padding:0 !important;
  }

  .dashboardProfessionalTitleRow > h2{
    min-width:0 !important;
    max-width:none !important;
    flex:1 1 auto !important;

    margin:0 !important;
  }

  .dashboardProfessionalNavControls{
    flex:0 0 auto !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;

    margin:0 !important;
    padding:0 !important;
  }

  .dashboardProfessionalNavBtn{
    appearance:none !important;

    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#0F9F8D !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 48%,
        #edf4f3 100%
      ) !important;

    border:1px solid rgba(15,159,141,.10) !important;
    border-radius:10px !important;

    box-shadow:
      4px 4px 9px rgba(26,72,80,.10),
      -3px -3px 8px rgba(255,255,255,.92),
      inset 1px 1px 0 rgba(255,255,255,.96) !important;

    cursor:pointer !important;
    user-select:none !important;
    -webkit-tap-highlight-color:transparent !important;

    transition:
      transform .16s ease,
      color .16s ease,
      border-color .16s ease,
      box-shadow .16s ease,
      opacity .16s ease !important;
  }

  .dashboardProfessionalNavBtn i{
    color:currentColor !important;
    font-size:10px !important;
    line-height:1 !important;
  }

  .dashboardProfessionalNavBtn:hover,
  .dashboardProfessionalNavBtn:focus-visible{
    color:#0E9382 !important;
    border-color:rgba(15,159,141,.18) !important;

    transform:translateY(-1px) !important;

    box-shadow:
      5px 5px 11px rgba(26,72,80,.12),
      -4px -4px 9px rgba(255,255,255,.96),
      inset 1px 1px 0 rgba(255,255,255,.98) !important;

    outline:none !important;
  }

  .dashboardProfessionalNavBtn:focus-visible{
    outline:2px solid rgba(15,159,141,.24) !important;
    outline-offset:2px !important;
  }

  .dashboardProfessionalNavBtn:active{
    transform:translateY(1px) scale(.97) !important;

    box-shadow:
      2px 2px 5px rgba(26,72,80,.08),
      inset 1px 1px 2px rgba(74,111,120,.06) !important;
  }

  .dashboardProfessionalNavBtn:disabled{
    color:#9ab0b6 !important;
    opacity:.46 !important;
    cursor:default !important;
    pointer-events:none !important;
    transform:none !important;
  }

  html[data-theme="dark"] .dashboardProfessionalNavBtn{
    color:#53ebe8 !important;

    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 52%,
        #0b2227 100%
      ) !important;

    border-color:rgba(83,235,232,.08) !important;

    box-shadow:
      4px 4px 9px rgba(0,0,0,.26),
      -3px -3px 7px rgba(40,78,84,.14),
      inset 1px 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"] .dashboardProfessionalNavBtn:hover,
  html[data-theme="dark"] .dashboardProfessionalNavBtn:focus-visible{
    color:#7ff2ee !important;
    border-color:rgba(83,235,232,.16) !important;
  }

  html[data-theme="dark"] .dashboardProfessionalNavBtn:disabled{
    color:#668187 !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){

  .dashboardProfessionalTitleRow{
    gap:8px !important;
  }

  .dashboardProfessionalNavControls{
    gap:5px !important;
  }

  .dashboardProfessionalNavBtn{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
    border-radius:9px !important;
  }

  .dashboardProfessionalNavBtn i{
    font-size:9px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboardProfessionalTitleRow{
    gap:6px !important;
  }

  .dashboardProfessionalNavControls{
    gap:4px !important;
  }

  .dashboardProfessionalNavBtn{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    min-height:26px !important;
    border-radius:8px !important;
  }

  .dashboardProfessionalNavBtn i{
    font-size:8.5px !important;
  }
}

/* =========================================================
   END PROFESSIONAL CAROUSEL NAVIGATION V37
   ========================================================= */


/* =========================================================
   BUMIL KU - MOBILE ARTICLE CARD COMPACT REFINEMENT V40
   =========================================================
   TUJUAN:
   - Mengurangi tinggi masing-masing card Rekomendasi Artikel.
   - Mempertahankan proporsi foto portrait-compact.
   - Judul, deskripsi, kategori, meta baca, bookmark, warna,
     shadow, dark mode, dan tombol "Lihat semua artikel"
     tetap menggunakan baseline existing.
   - Hanya menyentuh selector dashboardMobileArticle*.
   - Hero, Menu Layanan, Profesional Kesehatan, Navbar,
     Drawer, Bottom Navigation, dan area lain tidak diubah.
   ========================================================= */

/* =========================================================
   MOBILE UMUM <=740PX
   ========================================================= */
@media (max-width:740px){

  .dashboardMobileArticleList{
    gap:8px !important;
  }

  .dashboardMobileArticleCard{
    min-height:112px !important;
    padding:7px !important;

    grid-template-columns:92px minmax(0,1fr) !important;
    column-gap:9px !important;

    border-radius:18px !important;
  }

  .dashboardMobileArticleMedia{
    width:92px !important;
    height:98px !important;
    min-height:98px !important;

    border-radius:13px !important;
  }

  .dashboardMobileArticleContent{
    padding:1px 3px 1px 0 !important;
  }

  .dashboardMobileArticleCategory{
    margin-bottom:4px !important;
  }

  .dashboardMobileArticleDescription{
    margin-top:3px !important;
  }

  .dashboardMobileArticleFooter{
    margin-top:5px !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){

  .dashboardMobileArticleList{
    gap:7px !important;
  }

  .dashboardMobileArticleCard{
    min-height:104px !important;
    padding:6px !important;

    grid-template-columns:84px minmax(0,1fr) !important;
    column-gap:8px !important;

    border-radius:17px !important;
  }

  .dashboardMobileArticleMedia{
    width:84px !important;
    height:92px !important;
    min-height:92px !important;

    border-radius:12px !important;
  }

  .dashboardMobileArticleContent{
    padding:1px 2px 1px 0 !important;
  }

  .dashboardMobileArticleCategory{
    margin-bottom:3px !important;
  }

  .dashboardMobileArticleFooter{
    margin-top:4px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboardMobileArticleCard{
    min-height:98px !important;
    padding:5px !important;

    grid-template-columns:78px minmax(0,1fr) !important;
    column-gap:7px !important;

    border-radius:16px !important;
  }

  .dashboardMobileArticleMedia{
    width:78px !important;
    height:88px !important;
    min-height:88px !important;

    border-radius:11px !important;
  }

  .dashboardMobileArticleContent{
    padding-right:1px !important;
  }
}

/* =========================================================
   END MOBILE ARTICLE CARD COMPACT REFINEMENT V40
   ========================================================= */


/* =========================================================
   BUMIL KU - MOBILE ARTICLE CARD ULTRA COMPACT V41
   =========================================================
   TUJUAN:
   - Membuat card Rekomendasi Artikel lebih compact dari V40.
   - Proporsi foto, isi, kategori, meta, dan bookmark tetap seimbang.
   - Typography utama tetap dipertahankan agar keterbacaan tidak turun.
   - Hanya menyentuh selector dashboardMobileArticle*.
   - Hero, Menu Layanan, Profesional Kesehatan, Navbar,
     Drawer, Bottom Navigation, dan area lain tidak diubah.
   ========================================================= */

/* =========================================================
   MOBILE UMUM <=740PX
   ========================================================= */
@media (max-width:740px){

  .dashboardMobileArticleList{
    gap:7px !important;
  }

  .dashboardMobileArticleCard{
    min-height:104px !important;
    padding:6px !important;

    grid-template-columns:86px minmax(0,1fr) !important;
    column-gap:8px !important;

    border-radius:17px !important;
  }

  .dashboardMobileArticleMedia{
    width:86px !important;
    height:92px !important;
    min-height:92px !important;

    border-radius:12px !important;
  }

  .dashboardMobileArticleContent{
    padding:1px 2px 1px 0 !important;
  }

  .dashboardMobileArticleCategory{
    min-height:18px !important;
    margin-bottom:3px !important;
    padding:0 7px !important;
  }

  .dashboardMobileArticleDescription{
    margin-top:2px !important;
  }

  .dashboardMobileArticleFooter{
    margin-top:4px !important;
  }

  .dashboardMobileArticleBookmark{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    flex-basis:22px !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){

  .dashboardMobileArticleList{
    gap:6px !important;
  }

  .dashboardMobileArticleCard{
    min-height:96px !important;
    padding:5px !important;

    grid-template-columns:78px minmax(0,1fr) !important;
    column-gap:7px !important;

    border-radius:16px !important;
  }

  .dashboardMobileArticleMedia{
    width:78px !important;
    height:86px !important;
    min-height:86px !important;

    border-radius:11px !important;
  }

  .dashboardMobileArticleContent{
    padding:0 2px 0 0 !important;
  }

  .dashboardMobileArticleCategory{
    min-height:17px !important;
    margin-bottom:3px !important;
    padding:0 6px !important;
  }

  .dashboardMobileArticleDescription{
    margin-top:2px !important;
  }

  .dashboardMobileArticleFooter{
    margin-top:3px !important;
  }

  .dashboardMobileArticleBookmark{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    flex-basis:20px !important;
    font-size:11.5px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboardMobileArticleCard{
    min-height:90px !important;
    padding:4px !important;

    grid-template-columns:72px minmax(0,1fr) !important;
    column-gap:6px !important;

    border-radius:15px !important;
  }

  .dashboardMobileArticleMedia{
    width:72px !important;
    height:82px !important;
    min-height:82px !important;

    border-radius:10px !important;
  }

  .dashboardMobileArticleCategory{
    min-height:16px !important;
    padding:0 6px !important;
  }

  .dashboardMobileArticleFooter{
    margin-top:2px !important;
  }

  .dashboardMobileArticleBookmark{
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    min-height:19px !important;
    flex-basis:19px !important;
    font-size:11px !important;
  }
}

/* =========================================================
   END MOBILE ARTICLE CARD ULTRA COMPACT V41
   ========================================================= */


/* =========================================================
   BUMIL KU - PROFESSIONAL PHOTO WIDE + SHARPER RADIUS V42
   =========================================================
   TUJUAN:
   - Membuat area foto tenaga kesehatan lebih lebar.
   - Tinggi foto tetap agar proporsi portrait tetap elegan.
   - Border radius foto dikurangi agar sudut lebih terlihat
     dan tidak terlalu tumpul.
   - Hanya menyentuh selector dashboardProfessional*.
   - Lebar section, carousel containment, navigasi kiri/kanan,
     Menu Layanan, Artikel, Hero, Navbar, Drawer,
     Bottom Navigation, dan JavaScript tidak diubah.
   ========================================================= */

/* =========================================================
   MOBILE UMUM <=740PX
   ========================================================= */
@media (max-width:740px){

  .dashboardProfessionalCard{
    grid-template-columns:92px minmax(0,1fr) !important;
    gap:10px !important;
  }

  .dashboardProfessionalPhotoWrap{
    width:92px !important;
    min-width:92px !important;
    height:116px !important;

    border-radius:10px !important;
  }

  .dashboardProfessionalPhoto{
    border-radius:inherit !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){

  .dashboardProfessionalCard{
    grid-template-columns:86px minmax(0,1fr) !important;
    gap:9px !important;
  }

  .dashboardProfessionalPhotoWrap{
    width:86px !important;
    min-width:86px !important;
    height:106px !important;

    border-radius:9px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboardProfessionalCard{
    grid-template-columns:78px minmax(0,1fr) !important;
    gap:8px !important;
  }

  .dashboardProfessionalPhotoWrap{
    width:78px !important;
    min-width:78px !important;
    height:98px !important;

    border-radius:8px !important;
  }
}

/* =========================================================
   END PROFESSIONAL PHOTO WIDE + SHARPER RADIUS V42
   ========================================================= */


/* =========================================================
   BUMIL KU - PROFESSIONAL CARD COMPACT HEIGHT V43
   =========================================================
   TUJUAN:
   - Mengurangi tinggi card Tenaga Kesehatan Profesional.
   - Mempertahankan lebar foto V42.
   - Tinggi foto dipangkas agar proporsinya lebih horizontal.
   - Spacing internal dipadatkan sedikit agar seluruh konten
     tetap muat tanpa terlihat sesak.
   - Border radius foto tajam V42 tetap dipertahankan.
   - Hanya menyentuh selector dashboardProfessional*.
   - Lebar card, carousel, tombol navigasi, Menu Layanan,
     Artikel, Hero, Navbar, Drawer, Bottom Navigation,
     dan JavaScript tidak diubah.
   ========================================================= */

/* =========================================================
   MOBILE UMUM <=740PX
   ========================================================= */
@media (max-width:740px){

  .dashboardProfessionalCard{
    min-height:134px !important;
    padding:7px !important;
  }

  .dashboardProfessionalPhotoWrap{
    width:92px !important;
    min-width:92px !important;
    height:102px !important;
    border-radius:10px !important;
  }

  .dashboardProfessionalRoleBadge{
    margin-bottom:5px !important;
  }

  .dashboardProfessionalDescription{
    margin-top:3px !important;
  }

  .dashboardProfessionalTags{
    margin-top:5px !important;
  }

  .dashboardProfessionalProfileLink{
    margin-top:6px !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){

  .dashboardProfessionalCard{
    min-height:126px !important;
    padding:7px !important;
  }

  .dashboardProfessionalPhotoWrap{
    width:86px !important;
    min-width:86px !important;
    height:94px !important;
    border-radius:9px !important;
  }

  .dashboardProfessionalRoleBadge{
    margin-bottom:4px !important;
  }

  .dashboardProfessionalDescription{
    margin-top:3px !important;
  }

  .dashboardProfessionalTags{
    margin-top:5px !important;
  }

  .dashboardProfessionalProfileLink{
    margin-top:6px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboardProfessionalCard{
    min-height:118px !important;
    padding:6px !important;
  }

  .dashboardProfessionalPhotoWrap{
    width:78px !important;
    min-width:78px !important;
    height:86px !important;
    border-radius:8px !important;
  }

  .dashboardProfessionalRoleBadge{
    margin-bottom:4px !important;
  }

  .dashboardProfessionalDescription{
    margin-top:2px !important;
  }

  .dashboardProfessionalTags{
    margin-top:4px !important;
  }

  .dashboardProfessionalProfileLink{
    margin-top:5px !important;
  }
}

/* =========================================================
   END PROFESSIONAL CARD COMPACT HEIGHT V43
   ========================================================= */


/* =========================================================
   BUMIL KU - PROFESSIONAL CARD EVEN PADDING V44
   =========================================================
   TUJUAN:
   - Menyamakan ruang atas/bawah dengan ruang kiri/kanan card.
   - Menghilangkan kesan padding vertikal terlalu besar.
   - Foto V42 dan ukuran compact V43 tetap dipertahankan.
   - Tinggi minimum card disesuaikan dengan:
       tinggi foto + padding atas + padding bawah
     sehingga ruang visual menjadi benar-benar seimbang.
   - Hanya menyentuh selector dashboardProfessionalCard.
   - Carousel, tombol navigasi, foto, konten, Menu Layanan,
     Artikel, Hero, Navbar, Drawer, Bottom Navigation,
     dan JavaScript tidak diubah.
   ========================================================= */

/* =========================================================
   MOBILE UMUM <=740PX
   Foto 102px + padding 7px atas/bawah = 116px
   ========================================================= */
@media (max-width:740px){

  .dashboardProfessionalCard{
    min-height:116px !important;
    padding:7px !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   Foto 94px + padding 7px atas/bawah = 108px
   ========================================================= */
@media (max-width:420px){

  .dashboardProfessionalCard{
    min-height:108px !important;
    padding:7px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   Foto 86px + padding 6px atas/bawah = 98px
   ========================================================= */
@media (max-width:350px){

  .dashboardProfessionalCard{
    min-height:98px !important;
    padding:6px !important;
  }
}

/* =========================================================
   END PROFESSIONAL CARD EVEN PADDING V44
   ========================================================= */


/* =========================================================
   BUMIL KU - MENU LAYANAN 8 ITEM EXACT ORDER V46
   =========================================================
   URUTAN MOBILE:
   BARIS 1 = Kesehatan · Video · Janin · Informasi
   BARIS 2 = Vaksin · Vaksin Link · Percakapan · Menu lainnya

   KHUSUS MENU LAINNYA:
   - Surface tombol putih / neumorphism.
   - Icon teal #00B9AD, mengikuti warna Kesehatan.
   - Layout 4 x 2 existing tetap dipertahankan.
   ========================================================= */

@media (max-width:740px){

  .dashboardAppMenuGrid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
  }

  /* =======================================================
     MENU LAINNYA - PUTIH + ICON TEAL
     ======================================================= */
  .dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;

    border:1px solid rgba(255,255,255,.92) !important;

    box-shadow:
      7px 7px 15px rgba(26,72,80,.14),
      -5px -5px 12px rgba(255,255,255,.96),
      inset 1px 1px 1px rgba(255,255,255,.95),
      inset -1px -1px 1px rgba(74,111,120,.045) !important;
  }

  .dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon,
  html[data-theme="dark"]
  .dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border:1px solid rgba(15,159,141,.10) !important;

    box-shadow:
      0 5px 10px rgba(16,70,80,.10),
      inset 1px 1px 1px rgba(255,255,255,.98),
      inset -1px -1px 1px rgba(74,111,120,.04) !important;
  }

  .dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon i{
    color:#00B9AD !important;
    opacity:1 !important;
    visibility:visible !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,185,173,.14)) !important;

    text-shadow:none !important;
  }

  html[data-theme="dark"]
  .dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 48%,
        #0b2227 100%
      ) !important;

    border-color:rgba(255,255,255,.055) !important;

    box-shadow:
      7px 7px 15px rgba(0,0,0,.32),
      -4px -4px 10px rgba(40,78,84,.20),
      inset 1px 1px 1px rgba(255,255,255,.045),
      inset -1px -1px 1px rgba(0,0,0,.20) !important;
  }

  html[data-theme="dark"]
  .dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 52%,
        #0b2227 100%
      ) !important;

    background-color:#102b30 !important;
    border-color:rgba(83,235,232,.10) !important;
  }

  html[data-theme="dark"]
  .dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon i{
    color:#53ebe8 !important;
  }
}

/* =========================================================
   END MENU LAYANAN 8 ITEM EXACT ORDER V46
   ========================================================= */


/* =========================================================
   BUMIL KU - MENU LAINNYA WHITE SURFACE SPECIFICITY FIX V47
   =========================================================
   PERBAIKAN:
   - Tombol "Menu lainnya" adalah item ke-8.
   - Rule warna item ke-8 lama (#CDDC29) memiliki specificity
     lebih tinggi sehingga menimpa override putih V46.
   - V47 mengunci INNER CARD "Menu lainnya" menjadi PUTIH.
   - Icon tetap teal #00B9AD seperti tombol Kesehatan.
   - Outer neumorphism wrapper tetap putih.
   - Menu lain, layout 4x2, ukuran, route, dan JavaScript
     tidak diubah.
   ========================================================= */

@media (max-width:740px){

  /*
   * Selector dibuat lebih spesifik daripada:
   * .dashboardAppMenuCard:nth-child(3n + 2)
   * .dashboardServiceIconNeumorph > .dashboardAppMenuIcon
   */
  .dashboardAppMenuGrid >
  .dashboardAppMenuCard.dashboardAppMenuCard--more:nth-child(8)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon{
    --menu-face:#ffffff !important;
    --menu-neu-dark:rgba(26,72,80,.11) !important;
    --menu-neu-soft:rgba(26,72,80,.055) !important;

    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    border:1px solid rgba(15,159,141,.10) !important;

    box-shadow:
      0 5px 10px rgba(16,70,80,.10),
      inset 1px 1px 1px rgba(255,255,255,.98),
      inset -1px -1px 1px rgba(74,111,120,.04) !important;
  }

  .dashboardAppMenuGrid >
  .dashboardAppMenuCard.dashboardAppMenuCard--more:nth-child(8)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon i{
    color:#00B9AD !important;
    opacity:1 !important;
    visibility:visible !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,185,173,.14)) !important;

    text-shadow:none !important;
  }

  /*
   * Outer wrapper juga dikunci putih agar seluruh surface
   * konsisten dengan konsep neumorphism putih.
   */
  .dashboardAppMenuGrid >
  .dashboardAppMenuCard.dashboardAppMenuCard--more:nth-child(8)
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;

    border:1px solid rgba(255,255,255,.92) !important;

    box-shadow:
      7px 7px 15px rgba(26,72,80,.14),
      -5px -5px 12px rgba(255,255,255,.96),
      inset 1px 1px 1px rgba(255,255,255,.95),
      inset -1px -1px 1px rgba(74,111,120,.045) !important;
  }

  /* Dark mode tetap mengikuti surface gelap existing. */
  html[data-theme="dark"]
  .dashboardAppMenuGrid >
  .dashboardAppMenuCard.dashboardAppMenuCard--more:nth-child(8)
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 48%,
        #0b2227 100%
      ) !important;

    border-color:rgba(255,255,255,.055) !important;
  }

  html[data-theme="dark"]
  .dashboardAppMenuGrid >
  .dashboardAppMenuCard.dashboardAppMenuCard--more:nth-child(8)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon{
    --menu-face:#102b30 !important;

    background:#102b30 !important;
    background-color:#102b30 !important;
    background-image:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 52%,
        #0b2227 100%
      ) !important;

    border-color:rgba(83,235,232,.10) !important;
  }

  html[data-theme="dark"]
  .dashboardAppMenuGrid >
  .dashboardAppMenuCard.dashboardAppMenuCard--more:nth-child(8)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon i{
    color:#53ebe8 !important;
  }
}

/* =========================================================
   END MENU LAINNYA WHITE SURFACE SPECIFICITY FIX V47
   ========================================================= */


/* =========================================================
   BUMIL KU - MENU LAYANAN EXPANDABLE V48
   ========================================================= */
.dashboardAppMenuExtra{display:none;}

@media (max-width:740px){
  .dashboardAppMenuSection{
    transition:padding-bottom .28s ease, box-shadow .28s ease !important;
  }

  .dashboardAppMenuGrid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
  }

  .dashboardAppMenuGrid >
  .dashboardAppMenuCard.dashboardAppMenuCard--more:nth-child(8)
  .dashboardServiceIconNeumorph{
    background:linear-gradient(145deg,#ffffff 0%,#f7fafb 42%,#e9f0f1 100%) !important;
    border:1px solid rgba(255,255,255,.92) !important;
    box-shadow:7px 7px 15px rgba(26,72,80,.14),-5px -5px 12px rgba(255,255,255,.96),inset 1px 1px 1px rgba(255,255,255,.95),inset -1px -1px 1px rgba(74,111,120,.045) !important;
  }

  .dashboardAppMenuGrid >
  .dashboardAppMenuCard.dashboardAppMenuCard--more:nth-child(8)
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    --menu-face:#ffffff !important;
    --menu-neu-dark:rgba(26,72,80,.11) !important;
    --menu-neu-soft:rgba(26,72,80,.055) !important;
    background:linear-gradient(145deg,#ffffff 0%,#fbfdfd 48%,#edf3f3 100%) !important;
    background-color:#ffffff !important;
    border:1px solid rgba(15,159,141,.10) !important;
    box-shadow:0 5px 10px rgba(16,70,80,.10),inset 1px 1px 1px rgba(255,255,255,.98),inset -1px -1px 1px rgba(74,111,120,.04) !important;
  }

  .dashboardAppMenuGrid >
  .dashboardAppMenuCard.dashboardAppMenuCard--more:nth-child(8)
  .dashboardServiceIconNeumorph > .dashboardAppMenuIcon i{
    color:#00B9AD !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:drop-shadow(0 2px 1px rgba(0,185,173,.14)) !important;
    text-shadow:none !important;
  }

  .dashboardAppMenuSection.is-more-open .dashboardAppMenuCard--more .dashboardServiceIconNeumorph{
    transform:translateY(1px) !important;
    box-shadow:3px 3px 8px rgba(26,72,80,.10),-2px -2px 6px rgba(255,255,255,.78),inset 1.5px 1.5px 2px rgba(74,111,120,.045),inset -1.5px -1.5px 2px rgba(255,255,255,.68) !important;
  }

  .dashboardAppMenuExtra{
    width:100% !important;
    max-width:100% !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    column-gap:0 !important;
    row-gap:0 !important;
    align-items:start !important;
    position:relative !important;
    z-index:3 !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    overflow:hidden !important;
    transform:translateY(-8px) !important;
    transition:max-height .30s cubic-bezier(.2,.8,.2,1),margin-top .30s cubic-bezier(.2,.8,.2,1),opacity .20s ease,transform .30s cubic-bezier(.2,.8,.2,1),visibility 0s linear .30s !important;
  }

  .dashboardAppMenuExtraCard:nth-child(1){grid-column:1 / span 2 !important;}
  .dashboardAppMenuExtraCard:nth-child(2){grid-column:3 / span 2 !important;}
  .dashboardAppMenuExtraCard:nth-child(3){grid-column:5 / span 2 !important;}

  .dashboardAppMenuSection.is-more-open .dashboardAppMenuExtra{
    max-height:112px !important;
    margin-top:15px !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
    transition:max-height .30s cubic-bezier(.2,.8,.2,1),margin-top .30s cubic-bezier(.2,.8,.2,1),opacity .22s ease .05s,transform .30s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s !important;
  }

  .dashboardAppMenuExtraCard{width:100% !important;min-width:0 !important;}

  .dashboardAppMenuExtra > .dashboardAppMenuExtraCard:nth-child(1) .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    --menu-face:#00B9AD !important;
    background:#00B9AD !important;background-color:#00B9AD !important;background-image:none !important;border-color:#00B9AD !important;
  }
  .dashboardAppMenuExtra > .dashboardAppMenuExtraCard:nth-child(2) .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    --menu-face:#CDDC29 !important;
    background:#CDDC29 !important;background-color:#CDDC29 !important;background-image:none !important;border-color:#CDDC29 !important;
  }
  .dashboardAppMenuExtra > .dashboardAppMenuExtraCard:nth-child(3) .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    --menu-face:#60C0D0 !important;
    background:#60C0D0 !important;background-color:#60C0D0 !important;background-image:none !important;border-color:#60C0D0 !important;
  }
  .dashboardAppMenuExtra .dashboardServiceIconNeumorph > .dashboardAppMenuIcon i{color:#ffffff !important;}

  html[data-theme="dark"] .dashboardAppMenuGrid > .dashboardAppMenuCard.dashboardAppMenuCard--more:nth-child(8) .dashboardServiceIconNeumorph{
    background:linear-gradient(145deg,#183a40 0%,#102b30 48%,#0b2227 100%) !important;
    border-color:rgba(255,255,255,.055) !important;
  }
  html[data-theme="dark"] .dashboardAppMenuGrid > .dashboardAppMenuCard.dashboardAppMenuCard--more:nth-child(8) .dashboardServiceIconNeumorph > .dashboardAppMenuIcon{
    --menu-face:#102b30 !important;
    background:linear-gradient(145deg,#183a40 0%,#102b30 52%,#0b2227 100%) !important;
    background-color:#102b30 !important;
    border-color:rgba(83,235,232,.10) !important;
  }
  html[data-theme="dark"] .dashboardAppMenuGrid > .dashboardAppMenuCard.dashboardAppMenuCard--more:nth-child(8) .dashboardServiceIconNeumorph > .dashboardAppMenuIcon i{color:#53ebe8 !important;}
}

@media (max-width:420px){
  .dashboardAppMenuSection.is-more-open .dashboardAppMenuExtra{max-height:106px !important;margin-top:13px !important;}
}
@media (max-width:350px){
  .dashboardAppMenuSection.is-more-open .dashboardAppMenuExtra{max-height:100px !important;margin-top:12px !important;}
}

/* =========================================================
   END MENU LAYANAN EXPANDABLE V48
   ========================================================= */


/* =========================================================
   BUMIL KU - MENU LAYANAN REFLOW AFTER EXPAND V49
   =========================================================
   HASIL SETELAH "MENU LAINNYA" DIKLIK:

   BARIS 1
   Kesehatan · Video Edukasi · Vaksin Link · Asisten 24/Jam

   BARIS 2
   Kehamilan · Kembang Janin · Kanal Resmi · Catatan

   BARIS 3
   Penunjang · Pusat Bantuan

   POSISI:
   - Catatan menggantikan posisi Menu lainnya.
   - Penunjang tepat satu kolom dengan Kehamilan.
   - Pusat Bantuan tepat satu kolom dengan Kembang Janin.
   - Icon Penunjang = calculator.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     CATATAN REPLACEMENT
     Default tersembunyi dan tidak mengambil ruang.
     ------------------------------------------------------- */
  .dashboardAppMenuCard--catatanReplacement{
    display:none !important;
  }

  /* Setelah expanded, tombol Menu lainnya benar-benar hilang. */
  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuCard--more{
    display:none !important;
  }

  /*
   * Catatan mengambil posisi persis Menu lainnya:
   * kolom 4, baris 2.
   */
  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuCard--catatanReplacement{
    display:flex !important;
    grid-column:4 !important;
    grid-row:2 !important;
  }

  /* Catatan menggunakan teal Kemenkes. */
  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuCard--catatanReplacement
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon{
    --menu-face:#00B9AD !important;
    --menu-neu-dark:rgba(0,111,105,.25) !important;
    --menu-neu-soft:rgba(0,111,105,.12) !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border-color:#00B9AD !important;
  }

  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuCard--catatanReplacement
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon i{
    color:#ffffff !important;
  }

  /* -------------------------------------------------------
     EXTRA MENU = BARIS 3, 4 KOLOM SAMA DENGAN GRID UTAMA
     ------------------------------------------------------- */
  .dashboardAppMenuExtra{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:8px !important;
    row-gap:0 !important;
  }

  /*
   * Penunjang berada pada kolom 1,
   * sehingga vertikal sejajar dengan Kehamilan.
   */
  .dashboardAppMenuExtraCard--penunjang{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  /*
   * Pusat Bantuan berada pada kolom 2,
   * sehingga vertikal sejajar dengan Kembang Janin.
   */
  .dashboardAppMenuExtraCard--help{
    grid-column:2 !important;
    grid-row:1 !important;
  }

  .dashboardAppMenuSection.is-more-open .dashboardAppMenuExtra{
    max-height:112px !important;
    margin-top:15px !important;
  }

  /* Penunjang = lime */
  .dashboardAppMenuExtraCard--penunjang
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon{
    --menu-face:#CDDC29 !important;
    --menu-neu-dark:rgba(132,145,20,.24) !important;
    --menu-neu-soft:rgba(132,145,20,.11) !important;

    background:#CDDC29 !important;
    background-color:#CDDC29 !important;
    background-image:none !important;

    border-color:#CDDC29 !important;
  }

  /* Pusat Bantuan = turquoise medium */
  .dashboardAppMenuExtraCard--help
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon{
    --menu-face:#60C0D0 !important;
    --menu-neu-dark:rgba(45,126,139,.24) !important;
    --menu-neu-soft:rgba(45,126,139,.11) !important;

    background:#60C0D0 !important;
    background-color:#60C0D0 !important;
    background-image:none !important;

    border-color:#60C0D0 !important;
  }

  .dashboardAppMenuExtraCard--penunjang
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon i,
  .dashboardAppMenuExtraCard--help
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon i{
    color:#ffffff !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){

  .dashboardAppMenuExtra{
    column-gap:6px !important;
  }

  .dashboardAppMenuSection.is-more-open .dashboardAppMenuExtra{
    max-height:106px !important;
    margin-top:13px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboardAppMenuSection.is-more-open .dashboardAppMenuExtra{
    max-height:100px !important;
    margin-top:12px !important;
  }
}

/* =========================================================
   END MENU LAYANAN REFLOW AFTER EXPAND V49
   ========================================================= */


/* =========================================================
   BUMIL KU - MENU LAYANAN EXTRA ROW ALIGNMENT + MAIN V50
   =========================================================
   SETELAH "MENU LAINNYA" DIBUKA:

   BARIS 1
   Kesehatan | Video Edukasi | Vaksin Link | Asisten 24/Jam

   BARIS 2
   Kehamilan | Kembang Janin | Kanal Resmi | Catatan

   BARIS 3
   Penunjang | Pusat Bantuan | Menu utama | [kosong]

   ALIGNMENT:
   - Penunjang tepat di bawah Kehamilan (kolom 1).
   - Pusat Bantuan tepat di bawah Kembang Janin (kolom 2).
   - Menu utama tepat di kanan Pusat Bantuan (kolom 3).
   - Klik Menu utama mengembalikan 8 menu utama.
   ========================================================= */

@media (max-width:740px){

  /* Extra row wajib mengikuti 4 kolom utama. */
  .dashboardAppMenuSection
  > .dashboardAppMenuExtra{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    column-gap:8px !important;
    row-gap:0 !important;
    justify-items:stretch !important;
  }

  /*
   * Override V48 yang sebelumnya memakai span 2 kolom.
   * Selector dibuat sengaja lebih spesifik.
   */
  .dashboardAppMenuSection.is-more-open
  > .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--penunjang:nth-child(1){
    grid-column:1 / span 1 !important;
    grid-row:1 !important;
  }

  .dashboardAppMenuSection.is-more-open
  > .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--help:nth-child(2){
    grid-column:2 / span 1 !important;
    grid-row:1 !important;
  }

  .dashboardAppMenuSection.is-more-open
  > .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main:nth-child(3){
    grid-column:3 / span 1 !important;
    grid-row:1 !important;
  }

  /* Tinggi hanya untuk satu baris tambahan. */
  .dashboardAppMenuSection.is-more-open
  > .dashboardAppMenuExtra{
    max-height:112px !important;
    margin-top:15px !important;
  }

  /* =======================================================
     MENU UTAMA - WHITE NEUMORPHISM + TEAL ICON
     ======================================================= */
  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;

    border:1px solid rgba(255,255,255,.92) !important;

    box-shadow:
      7px 7px 15px rgba(26,72,80,.14),
      -5px -5px 12px rgba(255,255,255,.96),
      inset 1px 1px 1px rgba(255,255,255,.95),
      inset -1px -1px 1px rgba(74,111,120,.045) !important;
  }

  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#ffffff !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;
    border-color:rgba(15,159,141,.10) !important;

    box-shadow:
      0 5px 10px rgba(16,70,80,.10),
      inset 1px 1px 1px rgba(255,255,255,.98),
      inset -1px -1px 1px rgba(74,111,120,.04) !important;
  }

  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon i{
    color:#00B9AD !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,185,173,.14)) !important;

    text-shadow:none !important;
  }

  /* Dark mode untuk Menu utama. */
  html[data-theme="dark"]
  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 48%,
        #0b2227 100%
      ) !important;

    border-color:rgba(255,255,255,.055) !important;
  }

  html[data-theme="dark"]
  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#102b30 !important;

    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 52%,
        #0b2227 100%
      ) !important;

    background-color:#102b30 !important;
    border-color:rgba(83,235,232,.10) !important;
  }

  html[data-theme="dark"]
  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon i{
    color:#53ebe8 !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){

  .dashboardAppMenuSection
  > .dashboardAppMenuExtra{
    column-gap:6px !important;
  }

  .dashboardAppMenuSection.is-more-open
  > .dashboardAppMenuExtra{
    max-height:106px !important;
    margin-top:13px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboardAppMenuSection.is-more-open
  > .dashboardAppMenuExtra{
    max-height:100px !important;
    margin-top:12px !important;
  }
}

/* =========================================================
   END MENU LAYANAN EXTRA ROW ALIGNMENT + MAIN V50
   ========================================================= */


/* =========================================================
   BUMIL KU - DASHBOARD NAVBAR BRAND EXACT INDEX MATCH V52
   =========================================================
   ACUAN:
   - .brandCopy strong pada navbar index Bumil Ku.
   - Gradient hijau-teal -> lime disalin dari baseline index.
   - True 3D text depth / shadow disalin dari baseline index.
   - Ukuran, line-height, letter-spacing, logo, navbar,
     institusi, bell, tombol grid, dan layout dashboard
     TIDAK diubah.

   TARGET:
   - Hanya <strong>Bumil Ku</strong> pada navbar mobile dashboard:
     .dashboardMobileBrandCopy strong
   ========================================================= */

@media (max-width:740px){

  .dashboardMobileBrandCopy strong{
    display:inline-block !important;

    color:#087f78 !important;

    background:
      linear-gradient(
        90deg,
        #087f78 0%,
        #0b8f84 20%,
        #119b8a 38%,
        #2eaa91 52%,
        #57b980 66%,
        #7fc76b 78%,
        #a8d653 90%,
        #c4d63c 100%
      ) !important;

    background-size:100% 100% !important;
    background-repeat:no-repeat !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    -webkit-text-fill-color:transparent !important;
    color:transparent !important;

    font-weight:800 !important;
    font-synthesis:none !important;

    text-shadow:
      0 -0.22px 0 rgba(255,255,255,.09) !important;

    filter:
      drop-shadow(0 .45px 0 rgba(5,83,78,.24))
      drop-shadow(0 .85px .08px rgba(5,78,73,.20))
      drop-shadow(0 1.35px .18px rgba(6,73,69,.17))
      drop-shadow(0 2px .55px rgba(9,76,72,.145))
      drop-shadow(0 3.2px 2.4px rgba(16,70,80,.105))
      drop-shadow(0 4.8px 4.8px rgba(16,70,80,.06)) !important;

    transform:translateZ(0) !important;

    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;

    text-rendering:geometricPrecision !important;
  }

  html[data-theme="dark"] .dashboardMobileBrandCopy strong{
    background:
      linear-gradient(
        90deg,
        #07776f 0%,
        #09867c 18%,
        #0f9483 36%,
        #23a78d 52%,
        #4fba82 67%,
        #79c970 80%,
        #a4d55a 91%,
        #c4d63c 100%
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;

    text-shadow:
      0 -0.18px 0 rgba(255,255,255,.04) !important;

    filter:
      drop-shadow(0 .45px 0 rgba(0,0,0,.44))
      drop-shadow(0 .85px .10px rgba(0,0,0,.37))
      drop-shadow(0 1.35px .20px rgba(0,0,0,.31))
      drop-shadow(0 2.05px .58px rgba(0,0,0,.26))
      drop-shadow(0 3.2px 2.5px rgba(0,0,0,.21))
      drop-shadow(0 4.9px 5px rgba(0,0,0,.135)) !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   Shadow sama dengan navbar index pada breakpoint ini.
   ========================================================= */
@media (max-width:420px){

  .dashboardMobileBrandCopy strong{
    filter:
      drop-shadow(0 .40px 0 rgba(5,83,78,.23))
      drop-shadow(0 .75px .07px rgba(5,78,73,.19))
      drop-shadow(0 1.18px .16px rgba(6,73,69,.16))
      drop-shadow(0 1.75px .48px rgba(9,76,72,.14))
      drop-shadow(0 2.8px 2.1px rgba(16,70,80,.10))
      drop-shadow(0 4.2px 4.2px rgba(16,70,80,.058)) !important;
  }

  html[data-theme="dark"] .dashboardMobileBrandCopy strong{
    filter:
      drop-shadow(0 .40px 0 rgba(0,0,0,.43))
      drop-shadow(0 .75px .08px rgba(0,0,0,.36))
      drop-shadow(0 1.18px .18px rgba(0,0,0,.30))
      drop-shadow(0 1.8px .52px rgba(0,0,0,.25))
      drop-shadow(0 2.8px 2.2px rgba(0,0,0,.20))
      drop-shadow(0 4.2px 4.4px rgba(0,0,0,.13)) !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   Shadow sama dengan navbar index pada breakpoint ini.
   ========================================================= */
@media (max-width:350px){

  .dashboardMobileBrandCopy strong{
    filter:
      drop-shadow(0 .34px 0 rgba(5,83,78,.22))
      drop-shadow(0 .65px .06px rgba(5,78,73,.18))
      drop-shadow(0 1px .14px rgba(6,73,69,.15))
      drop-shadow(0 1.5px .42px rgba(9,76,72,.135))
      drop-shadow(0 2.35px 1.8px rgba(16,70,80,.095))
      drop-shadow(0 3.5px 3.5px rgba(16,70,80,.055)) !important;
  }

  html[data-theme="dark"] .dashboardMobileBrandCopy strong{
    filter:
      drop-shadow(0 .34px 0 rgba(0,0,0,.42))
      drop-shadow(0 .65px .07px rgba(0,0,0,.35))
      drop-shadow(0 1px .15px rgba(0,0,0,.29))
      drop-shadow(0 1.55px .45px rgba(0,0,0,.24))
      drop-shadow(0 2.35px 1.9px rgba(0,0,0,.19))
      drop-shadow(0 3.5px 3.7px rgba(0,0,0,.125)) !important;
  }
}

/* =========================================================
   END DASHBOARD NAVBAR BRAND EXACT INDEX MATCH V52
   ========================================================= */


/* =========================================================
   BUMIL KU - MOBILE KEMBANG JANIN IMAGE V30
   =========================================================
   KHUSUS HP <=740PX

   TARGET:
   - Mengganti Font Awesome fa-baby pada menu Kembang Janin.
   - Menggunakan:
       ./assets/mobile/menu/perkembangan-janin.png
   - Outer neumorphism V29 tetap.
   - Warna tombol/card ke-6 tetap #60C0D0.
   - Ukuran, grid 4x2, label, hover, tap, route, dan fungsi
     menu tetap dipertahankan.
   - Menu lain tidak berubah.
   ========================================================= */
@media (max-width:740px){

  /* Safeguard: icon Font Awesome tidak dipakai pada menu ini. */
  .dashboardAppMenuIcon--kembangJanin > i{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
  }

  /*
   * Rule lama dashboard menetapkan .dashboardAppMenuImg
   * sebagai display:none. Khusus perkembangan janin kita
   * tampilkan kembali sebagai pengganti icon.
   */
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--kembangJanin
  > .dashboardAppMenuImg--kembangJanin{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:center !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    /*
     * Warna asli PNG dipertahankan.
     * Tidak memakai filter recolor generic lama.
     */
    filter:none !important;

    transform:none !important;
    image-rendering:auto !important;

    pointer-events:none !important;
    user-select:none !important;
    -webkit-user-select:none !important;
  }

  /*
   * Inner surface tetap memakai warna card ke-6
   * (#60C0D0) sesuai pola warna Kemenkes existing.
   */
  .dashboardAppMenuCard:nth-child(6)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--kembangJanin,
  html[data-theme="dark"]
  .dashboardAppMenuCard:nth-child(6)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--kembangJanin{
    background:#60C0D0 !important;
    background-color:#60C0D0 !important;
    background-image:none !important;
    border-color:#60C0D0 !important;
  }

  /*
   * Hover/tap mengikuti wrapper existing.
   * Gambar sendiri tidak bergerak agar tetap tajam/stabil.
   */
  .dashboardAppMenuCard:hover
  .dashboardAppMenuImg--kembangJanin,
  .dashboardAppMenuCard:focus-visible
  .dashboardAppMenuImg--kembangJanin,
  .dashboardAppMenuCard:active
  .dashboardAppMenuImg--kembangJanin{
    transform:none !important;
    filter:none !important;
  }
}


/* =========================================================
   V30 - HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){

  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--kembangJanin
  > .dashboardAppMenuImg--kembangJanin{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
  }
}


/* =========================================================
   V30 - HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--kembangJanin
  > .dashboardAppMenuImg--kembangJanin{
    width:35px !important;
    height:35px !important;
    min-width:35px !important;
    min-height:35px !important;
    max-width:35px !important;
    max-height:35px !important;
  }
}


/* =========================================================
   BUMIL KU - MOBILE SERVICE MENU IMAGE ICONS V31
   =========================================================
   KHUSUS HP <=740PX

   IMAGE ICON YANG AKTIF:
   - Video Edukasi  : ./assets/mobile/menu/video-edukasi.png
   - Vaksin Link    : ./assets/mobile/menu/vaksin-link.png
   - Asisten 24/7   : ./assets/mobile/menu/asisten-24jam.png
   - Kehamilan      : ./assets/mobile/menu/edukasi-kehamilan.png
   - Kembang Janin  : ./assets/mobile/menu/perkembangan-janin.png
                      (baseline V30, tetap dipertahankan)

   PRINSIP:
   - Gambar menggantikan Font Awesome pada menu terkait.
   - Outer neumorphism V29 tidak berubah.
   - Warna inner card mengikuti posisi menu existing.
   - Grid 4x2, route, hover, tap, label lain, dan JS tidak diubah.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     GENERIC IMAGE ICON
     Override rule lama .dashboardAppMenuImg { display:none }
     hanya pada icon menu yang memang memakai PNG.
     ======================================================= */
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--serviceImage
  > .dashboardAppMenuImg--serviceImage,
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--kembangJanin
  > .dashboardAppMenuImg--kembangJanin{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:center !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    filter:none !important;
    transform:none !important;
    image-rendering:auto !important;

    pointer-events:none !important;
    user-select:none !important;
    -webkit-user-select:none !important;
  }

  /*
   * Jika kelak ada fallback Font Awesome di dalam wrapper
   * image, jangan tampilkan bersamaan dengan PNG.
   */
  .dashboardAppMenuIcon--serviceImage > i,
  .dashboardAppMenuIcon--kembangJanin > i{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
  }

  /* =======================================================
     WARNA INNER CARD TETAP SESUAI POSISI MENU
     -------------------------------------------------------
     Item 2 = #CDDC29
     Item 3 = #60C0D0
     Item 4 = #00B9AD
     Item 5 = #CDDC29
     Item 6 = #60C0D0
     ======================================================= */
  .dashboardAppMenuGrid >
  .dashboardAppMenuCard:nth-child(2)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon--serviceImage,
  html[data-theme="dark"]
  .dashboardAppMenuGrid >
  .dashboardAppMenuCard:nth-child(2)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon--serviceImage{
    background:#CDDC29 !important;
    background-color:#CDDC29 !important;
    background-image:none !important;
    border-color:#CDDC29 !important;
  }

  .dashboardAppMenuGrid >
  .dashboardAppMenuCard:nth-child(3)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon--serviceImage,
  html[data-theme="dark"]
  .dashboardAppMenuGrid >
  .dashboardAppMenuCard:nth-child(3)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon--serviceImage{
    background:#60C0D0 !important;
    background-color:#60C0D0 !important;
    background-image:none !important;
    border-color:#60C0D0 !important;
  }

  .dashboardAppMenuGrid >
  .dashboardAppMenuCard:nth-child(4)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon--serviceImage,
  html[data-theme="dark"]
  .dashboardAppMenuGrid >
  .dashboardAppMenuCard:nth-child(4)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon--serviceImage{
    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;
    border-color:#00B9AD !important;
  }

  .dashboardAppMenuGrid >
  .dashboardAppMenuCard:nth-child(5)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon--serviceImage,
  html[data-theme="dark"]
  .dashboardAppMenuGrid >
  .dashboardAppMenuCard:nth-child(5)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon--serviceImage{
    background:#CDDC29 !important;
    background-color:#CDDC29 !important;
    background-image:none !important;
    border-color:#CDDC29 !important;
  }

  .dashboardAppMenuGrid >
  .dashboardAppMenuCard:nth-child(6)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon--kembangJanin,
  html[data-theme="dark"]
  .dashboardAppMenuGrid >
  .dashboardAppMenuCard:nth-child(6)
  .dashboardServiceIconNeumorph >
  .dashboardAppMenuIcon--kembangJanin{
    background:#60C0D0 !important;
    background-color:#60C0D0 !important;
    background-image:none !important;
    border-color:#60C0D0 !important;
  }

  /*
   * Interaksi tetap terjadi pada outer neumorphism.
   * PNG dibuat stabil supaya tidak blur saat transform.
   */
  .dashboardAppMenuCard:hover .dashboardAppMenuImg--serviceImage,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuImg--serviceImage,
  .dashboardAppMenuCard:active .dashboardAppMenuImg--serviceImage,
  .dashboardAppMenuCard:hover .dashboardAppMenuImg--kembangJanin,
  .dashboardAppMenuCard:focus-visible .dashboardAppMenuImg--kembangJanin,
  .dashboardAppMenuCard:active .dashboardAppMenuImg--kembangJanin{
    transform:none !important;
    filter:none !important;
  }
}


/* =========================================================
   V31 - HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){

  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--serviceImage
  > .dashboardAppMenuImg--serviceImage,
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--kembangJanin
  > .dashboardAppMenuImg--kembangJanin{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
  }
}


/* =========================================================
   V31 - HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--serviceImage
  > .dashboardAppMenuImg--serviceImage,
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--kembangJanin
  > .dashboardAppMenuImg--kembangJanin{
    width:35px !important;
    height:35px !important;
    min-width:35px !important;
    min-height:35px !important;
    max-width:35px !important;
    max-height:35px !important;
  }
}


/* =========================================================
   BUMIL KU - MOBILE MENU UNIFORM GREEN V32
   =========================================================
   KHUSUS HP <=740PX

   PERUBAHAN:
   - Menu Kesehatan diganti menjadi Artikel pada HTML.
   - Kanal Resmi memakai:
       ./assets/mobile/menu/kanal-resmi.png
   - Semua inner menu berwarna diseragamkan ke warna
     Kanal Resmi / teal Kemenkes:
       #00B9AD

   BERLAKU UNTUK:
   - Artikel
   - Video Edukasi
   - Vaksin Link
   - Asisten 24/7
   - Kehamilan
   - Kembang Janin
   - Kanal Resmi
   - Catatan (saat expanded)
   - Penunjang
   - Pusat Bantuan

   TIDAK DIUBAH:
   - Menu lainnya
   - Menu utama
   - Outer neumorphism
   - Grid 4x2
   - Ukuran icon/image
   - Hover/tap
   - Routing menu lain
   - JavaScript
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     KANAL RESMI PNG
     -------------------------------------------------------
     Memakai generic serviceImage V31.
     Rule ini mengunci visibility karena legacy CSS memiliki
     .dashboardAppMenuImg { display:none } pada beberapa blok.
     ======================================================= */
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--serviceImage
  > .dashboardAppMenuImg--serviceImage{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;

    object-fit:contain !important;
    object-position:center !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    filter:none !important;
    transform:none !important;

    pointer-events:none !important;
  }


  /* =======================================================
     UNIFORM GREEN
     -------------------------------------------------------
     Semua menu berwarna dibuat sama seperti Kanal Resmi.
     Exclusion eksplisit:
       - .dashboardAppMenuCard--more
       - .dashboardAppMenuExtraCard--main
     ======================================================= */
  .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,
  html[data-theme="dark"]
  .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#00B9AD !important;
    --menu-depth:#078E86 !important;
    --menu-shadow:rgba(0,126,119,.20) !important;
    --menu-neu-dark:rgba(0,111,105,.25) !important;
    --menu-neu-soft:rgba(0,111,105,.12) !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border-color:#00B9AD !important;
  }


  /* =======================================================
     FONT AWESOME ICONS
     -------------------------------------------------------
     Artikel, Catatan, Penunjang, Pusat Bantuan, dll.
     ======================================================= */
  .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i,
  html[data-theme="dark"]
  .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#FFFFFF !important;
    opacity:1 !important;
    visibility:visible !important;
  }


  /* =======================================================
     PNG ICONS
     -------------------------------------------------------
     Semua gambar yang sudah diterapkan V30/V31 tetap tampil
     dengan warna asli PNG di atas surface hijau yang sama.
     ======================================================= */
  .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > .dashboardAppMenuImg{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    filter:none !important;
    transform:none !important;
  }


  /* =======================================================
     MENU LAINNYA - PROTECTION LOCK
     -------------------------------------------------------
     Mempertahankan baseline putih existing.
     ======================================================= */
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;

    border-color:rgba(255,255,255,.92) !important;
  }

  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#ffffff !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;
    border-color:rgba(15,159,141,.10) !important;
  }

  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#00B9AD !important;
  }


  /* =======================================================
     MENU UTAMA - PROTECTION LOCK
     -------------------------------------------------------
     Mempertahankan baseline putih existing saat expanded.
     ======================================================= */
  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;

    border-color:rgba(255,255,255,.92) !important;
  }

  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#ffffff !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;
    border-color:rgba(15,159,141,.10) !important;
  }

  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#00B9AD !important;
  }


  /* =======================================================
     DARK MODE - MENU LAINNYA + MENU UTAMA TETAP BASELINE
     ======================================================= */
  html[data-theme="dark"]
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph,
  html[data-theme="dark"]
  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 48%,
        #0b2227 100%
      ) !important;

    border-color:rgba(255,255,255,.055) !important;
  }

  html[data-theme="dark"]
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,
  html[data-theme="dark"]
  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#102b30 !important;

    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 52%,
        #0b2227 100%
      ) !important;

    background-color:#102b30 !important;
    border-color:rgba(83,235,232,.10) !important;
  }

  html[data-theme="dark"]
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i,
  html[data-theme="dark"]
  .dashboardAppMenuSection.is-more-open
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#53ebe8 !important;
  }
}


/* =========================================================
   V32 - HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){

  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--serviceImage
  > .dashboardAppMenuImg--serviceImage{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
  }
}


/* =========================================================
   V32 - HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--serviceImage
  > .dashboardAppMenuImg--serviceImage{
    width:35px !important;
    height:35px !important;
    min-width:35px !important;
    min-height:35px !important;
    max-width:35px !important;
    max-height:35px !important;
  }
}


/* =========================================================
   BUMIL KU - MOBILE ALL SERVICE BUTTONS WHITE V36
   =========================================================
   KHUSUS HP <=740PX

   TARGET FINAL:
   - Semua tombol Menu Layanan mengikuti "Menu lainnya".
   - OUTER neumorphism = putih.
   - INNER icon card    = putih.
   - Tidak ada lagi background teal / cyan / lime.
   - Warna hanya berada pada icon.
   - Grid 4x2, ukuran, posisi, route, expand/collapse,
     label, dan JavaScript tidak diubah.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     OUTER NEUMORPHISM - PUTIH UNTUK SEMUA
     ======================================================= */
  .dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph,
  .dashboardAppMenuSection
  .dashboardAppMenuExtra
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;

    background-color:#ffffff !important;
    background-image:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;

    border:1px solid rgba(255,255,255,.92) !important;

    box-shadow:
      7px 7px 15px rgba(26,72,80,.14),
      -5px -5px 12px rgba(255,255,255,.96),
      inset 1px 1px 1px rgba(255,255,255,.95),
      inset -1px -1px 1px rgba(74,111,120,.045) !important;

    filter:none !important;
  }


  /* =======================================================
     INNER ICON CARD - PUTIH UNTUK SEMUA
     ======================================================= */
  .dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,
  .dashboardAppMenuSection
  .dashboardAppMenuExtra
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,
  html[data-theme="dark"]
  .dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#ffffff !important;
    --menu-3d-color:#ffffff !important;
    --menu-3d-depth:rgba(26,72,80,.08) !important;
    --menu-depth:rgba(26,72,80,.08) !important;
    --menu-neu-dark:rgba(26,72,80,.10) !important;
    --menu-neu-soft:rgba(26,72,80,.05) !important;

    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    border:1px solid rgba(15,159,141,.10) !important;

    box-shadow:
      0 5px 10px rgba(16,70,80,.10),
      inset 1px 1px 1px rgba(255,255,255,.98),
      inset -1px -1px 1px rgba(74,111,120,.04) !important;

    opacity:1 !important;
    filter:none !important;
  }


  /* =======================================================
     MATIKAN SEMUA PSEUDO-LAYER WARNA LAMA
     ======================================================= */
  .dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon::before,
  .dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon::after{
    content:none !important;
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    background:none !important;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
  }


  /* =======================================================
     FONT AWESOME ICON = TEAL
     ======================================================= */
  .dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;

    color:#00B9AD !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,185,173,.13)) !important;

    text-shadow:none !important;
  }


  /* =======================================================
     PNG ICON
     - Background tetap transparan.
     - Tidak boleh memberi warna pada surface putih.
     ======================================================= */
  .dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > .dashboardAppMenuImg{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;

    border:0 !important;
    box-shadow:none !important;

    /*
     * PNG putih diarahkan ke teal.
     * Hanya pixel icon yang berubah; surface tetap putih.
     */
    filter:
      brightness(0)
      saturate(100%)
      invert(54%)
      sepia(90%)
      saturate(740%)
      hue-rotate(127deg)
      brightness(92%)
      contrast(101%) !important;

    transform:none !important;
  }


  /* =======================================================
     HOVER / FOCUS
     Tetap putih. Tidak boleh kembali menjadi teal.
     ======================================================= */
  .dashboardAppMenuSection
  .dashboardAppMenuCard:hover
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,
  .dashboardAppMenuSection
  .dashboardAppMenuCard:focus-visible
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    border-color:rgba(15,159,141,.15) !important;
  }


  /* =======================================================
     ACTIVE / TAP
     Tetap putih.
     ======================================================= */
  .dashboardAppMenuSection
  .dashboardAppMenuCard:active
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:
      linear-gradient(
        145deg,
        #f7fafb 0%,
        #ffffff 100%
      ) !important;
  }


  /* =======================================================
     KHUSUS MENU LAINNYA / MENU UTAMA
     Dikunci tetap sama sebagai referensi.
     ======================================================= */
  .dashboardAppMenuSection
  .dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph,
  .dashboardAppMenuSection
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;
  }

  .dashboardAppMenuSection
  .dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,
  .dashboardAppMenuSection
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;
  }


  /* =======================================================
     DARK MODE
     Surface mengikuti neumorphism gelap existing.
     ======================================================= */
  html[data-theme="dark"]
  .dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 48%,
        #0b2227 100%
      ) !important;

    background-color:#102b30 !important;
    border-color:rgba(255,255,255,.055) !important;

    box-shadow:
      7px 7px 15px rgba(0,0,0,.32),
      -4px -4px 10px rgba(40,78,84,.20),
      inset 1px 1px 1px rgba(255,255,255,.045),
      inset -1px -1px 1px rgba(0,0,0,.20) !important;
  }

  html[data-theme="dark"]
  .dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#102b30 !important;

    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 52%,
        #0b2227 100%
      ) !important;

    background-color:#102b30 !important;
    border-color:rgba(83,235,232,.10) !important;
  }

  html[data-theme="dark"]
  .dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#53EBE8 !important;
  }
}


/* =========================================================
   V36 - HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph{
    box-shadow:
      6px 6px 13px rgba(26,72,80,.13),
      -4px -4px 10px rgba(255,255,255,.94),
      inset 1px 1px 1px rgba(255,255,255,.94),
      inset -1px -1px 1px rgba(74,111,120,.04) !important;
  }
}


/* =========================================================
   BUMIL KU - ALL WHITE SERVICE MENU SPECIFICITY FIX V37
   =========================================================
   ROOT CAUSE:
   - Rule V32:
       .dashboardAppMenuCard:not(...):not(...)
     memiliki specificity lebih tinggi daripada V36.
   - Akibatnya default/idle masih #00B9AD.
   - Selector hover V36 memiliki tambahan :hover sehingga
     baru menang saat pointer berada di tombol.

   FINAL FIX:
   - Gunakan ID #dashboardAppMenuSection sebagai ownership lock.
   - Default, hover, focus, dan active semuanya putih.
   - PNG dirender sebagai teal mask agar tetap terlihat.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     OUTER NEUMORPHISM - OWNERSHIP LOCK
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard
  .dashboardServiceIconNeumorph,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuCard
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;

    background-color:#ffffff !important;

    border:1px solid rgba(255,255,255,.92) !important;

    box-shadow:
      7px 7px 15px rgba(26,72,80,.14),
      -5px -5px 12px rgba(255,255,255,.96),
      inset 1px 1px 1px rgba(255,255,255,.95),
      inset -1px -1px 1px rgba(74,111,120,.045) !important;
  }


  /* =======================================================
     INNER CARD - PUTIH SAAT IDLE
     ID memastikan rule hijau lama tidak mungkin menang.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#ffffff !important;
    --menu-3d-color:#ffffff !important;
    --menu-3d-depth:rgba(26,72,80,.06) !important;
    --menu-depth:rgba(26,72,80,.06) !important;
    --menu-shadow:rgba(26,72,80,.07) !important;
    --menu-neu-dark:rgba(26,72,80,.10) !important;
    --menu-neu-soft:rgba(26,72,80,.05) !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border:1px solid rgba(15,159,141,.10) !important;

    box-shadow:
      0 5px 10px rgba(16,70,80,.10),
      inset 1px 1px 1px rgba(255,255,255,.98),
      inset -1px -1px 1px rgba(74,111,120,.04) !important;

    filter:none !important;
    opacity:1 !important;
  }


  /* =======================================================
     PUTIH JUGA SAAT HOVER / FOCUS / ACTIVE
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:hover
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:focus-visible
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:active
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuCard:hover
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuCard:focus-visible
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuCard:active
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;
  }


  /* =======================================================
     FONT AWESOME ICON - TEAL
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;

    color:#00B9AD !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,185,173,.13)) !important;

    text-shadow:none !important;
  }


  /* =======================================================
     PNG ASLI DISEMBUNYIKAN
     Warna tidak lagi bergantung pada filter aproximasi.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskKehamilan > img,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskJanin > img,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskKanal > img,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskAsisten > img,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskVideo > img,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskVaksin > img{
    display:block !important;
    visibility:hidden !important;
    opacity:0 !important;

    filter:none !important;
  }


  /* =======================================================
     PNG MASK BASE - EXACT #00B9AD
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskKehamilan::before,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskJanin::before,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskKanal::before,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskAsisten::before,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskVideo::before,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskVaksin::before{
    content:"" !important;

    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute !important;
    z-index:3 !important;
    inset:5px !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;

    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;

    -webkit-mask-position:center !important;
    mask-position:center !important;

    -webkit-mask-size:contain !important;
    mask-size:contain !important;

    pointer-events:none !important;
  }

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskKehamilan::before{
    -webkit-mask-image:url("../assets/mobile/menu/edukasi-kehamilan.png") !important;
    mask-image:url("../assets/mobile/menu/edukasi-kehamilan.png") !important;
  }

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskJanin::before{
    -webkit-mask-image:url("../assets/mobile/menu/perkembangan-janin.png") !important;
    mask-image:url("../assets/mobile/menu/perkembangan-janin.png") !important;
  }

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskKanal::before{
    -webkit-mask-image:url("../assets/mobile/menu/kanal-resmi.png") !important;
    mask-image:url("../assets/mobile/menu/kanal-resmi.png") !important;
  }

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskAsisten::before{
    -webkit-mask-image:url("../assets/mobile/menu/asisten-24jam.png") !important;
    mask-image:url("../assets/mobile/menu/asisten-24jam.png") !important;
  }

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskVideo::before{
    -webkit-mask-image:url("../assets/mobile/menu/video-edukasi.png") !important;
    mask-image:url("../assets/mobile/menu/video-edukasi.png") !important;
  }

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskVaksin::before{
    -webkit-mask-image:url("../assets/mobile/menu/vaksin-link.png") !important;
    mask-image:url("../assets/mobile/menu/vaksin-link.png") !important;
  }


  /* =======================================================
     LEGACY ::AFTER TIDAK BOLEH MUNCUL
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskKehamilan::after,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskJanin::after,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskKanal::after,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskAsisten::after,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskVideo::after,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskVaksin::after{
    content:none !important;
    display:none !important;
  }


  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 48%,
        #0b2227 100%
      ) !important;

    background-color:#102b30 !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 52%,
        #0b2227 100%
      ) !important;

    background-color:#102b30 !important;

    border-color:rgba(83,235,232,.10) !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskKehamilan::before,
  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskJanin::before,
  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskKanal::before,
  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskAsisten::before,
  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskVideo::before,
  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--maskVaksin::before{
    background:#53EBE8 !important;
  }
}


/* =========================================================
   BUMIL KU - DIRECT PNG ICONS V38
   =========================================================
   REVISI:
   - CSS MASK V37 DIHENTIKAN.
   - File PNG dipakai LANGSUNG karena warnanya sudah final.
   - Tidak ada filter / recolor / mask.
   - Background PNG tetap transparan.
   - Tombol tetap putih seperti "Menu lainnya".
   - Ukuran visual PNG dibuat proporsional terhadap inner card.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     PASTIKAN SEMUA PSEUDO MASK V37 MATI TOTAL
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--serviceImage::before,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--kembangJanin::before,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--serviceImage::after,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuIcon--kembangJanin::after{
    content:none !important;
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    background:none !important;
    mask:none !important;
    -webkit-mask:none !important;
    box-shadow:none !important;
  }

  /* =======================================================
     PNG ASLI - TAMPIL LANGSUNG
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--serviceImage
  > .dashboardAppMenuImg--serviceImage,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--kembangJanin
  > .dashboardAppMenuImg--kembangJanin{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:center !important;

    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;

    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    filter:none !important;
    transform:none !important;

    image-rendering:auto !important;

    pointer-events:none !important;
    user-select:none !important;
    -webkit-user-select:none !important;
  }

  /* =======================================================
     KEMBANG JANIN
     Sedikit lebih besar karena bentuk janin punya ruang
     transparan lebih banyak di dalam canvas PNG.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--kembangJanin
  > .dashboardAppMenuImg--kembangJanin{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
  }

  /* =======================================================
     WHITE SURFACE LOCK TETAP DIPERTAHANKAN
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;
    background-color:#ffffff !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;
    background-color:#ffffff !important;
  }

  /* Font Awesome seperti Artikel / Menu lainnya tetap teal */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#00B9AD !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}


/* =========================================================
   V38 - HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--serviceImage
  > .dashboardAppMenuImg--serviceImage{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--kembangJanin
  > .dashboardAppMenuImg--kembangJanin{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
  }
}


/* =========================================================
   V38 - HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--serviceImage
  > .dashboardAppMenuImg--serviceImage{
    width:35px !important;
    height:35px !important;
    min-width:35px !important;
    min-height:35px !important;
    max-width:35px !important;
    max-height:35px !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon--kembangJanin
  > .dashboardAppMenuImg--kembangJanin{
    width:37px !important;
    height:37px !important;
    min-width:37px !important;
    min-height:37px !important;
    max-width:37px !important;
    max-height:37px !important;
  }
}


/* =========================================================
   BUMIL KU - MOBILE QUICK LINKS GRADIENT BUTTONS V39
   =========================================================
   KHUSUS HP <=740PX

   ACUAN GRADIENT DESKTOP QUICK LINKS:
     #0E9382
     #0F9F8D
     #37B89D
     #79C97B
     #C4D63C

   TARGET:
   - Inner tombol Menu Layanan memakai gradient yang mengalir
     dari teal kiri ke lime kanan, seperti panel 8 card desktop.
   - Baris 1 dan baris 2 memakai urutan warna yang sama.
   - Menu lainnya TETAP PUTIH.
   - Menu utama TETAP PUTIH.
   - Catatan, Penunjang, Pusat Bantuan ikut gradient.
   - PNG tetap dipakai langsung, tanpa CSS mask.
   - Grid, ukuran, posisi, label, route, toggle, dan JS tetap.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     OUTER NEUMORPHISM
     Tetap putih agar karakter tombol mobile premium tidak hilang.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;

    background-color:#ffffff !important;

    border:1px solid rgba(255,255,255,.92) !important;

    box-shadow:
      7px 7px 15px rgba(26,72,80,.14),
      -5px -5px 12px rgba(255,255,255,.96),
      inset 1px 1px 1px rgba(255,255,255,.95),
      inset -1px -1px 1px rgba(74,111,120,.045) !important;
  }


  /* =======================================================
     BASE INNER BUTTON
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    position:relative !important;
    overflow:hidden !important;

    border:1px solid rgba(255,255,255,.30) !important;

    box-shadow:
      0 6px 12px rgba(16,70,80,.13),
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -2px 2px rgba(7,74,69,.065) !important;

    filter:none !important;

    transition:
      transform .16s ease,
      box-shadow .16s ease,
      filter .16s ease !important;
  }


  /* =======================================================
     KOLOM 1
     KEHAMILAN + ARTIKEL
     TEAL PEKAT
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(1)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(5)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      radial-gradient(
        circle at 18% 8%,
        rgba(255,255,255,.24) 0%,
        rgba(255,255,255,.07) 28%,
        transparent 48%
      ),
      linear-gradient(
        135deg,
        #0E9382 0%,
        #0F9F8D 58%,
        #22AD98 100%
      ) !important;

    background-color:#0E9382 !important;
  }


  /* =======================================================
     KOLOM 2
     KEMBANG JANIN + VIDEO EDUKASI
     TEAL -> GREEN
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(2)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(6)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      radial-gradient(
        circle at 18% 8%,
        rgba(255,255,255,.25) 0%,
        rgba(255,255,255,.075) 28%,
        transparent 48%
      ),
      linear-gradient(
        135deg,
        #0F9F8D 0%,
        #37B89D 58%,
        #57C08C 100%
      ) !important;

    background-color:#37B89D !important;
  }


  /* =======================================================
     KOLOM 3
     KANAL RESMI + VAKSIN LINK
     GREEN
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(3)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(7)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      radial-gradient(
        circle at 18% 8%,
        rgba(255,255,255,.27) 0%,
        rgba(255,255,255,.08) 28%,
        transparent 48%
      ),
      linear-gradient(
        135deg,
        #37B89D 0%,
        #79C97B 62%,
        #9DD25E 100%
      ) !important;

    background-color:#79C97B !important;
  }


  /* =======================================================
     KOLOM 4
     ASISTEN 24/7
     GREEN -> LIME
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(4)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      radial-gradient(
        circle at 18% 8%,
        rgba(255,255,255,.29) 0%,
        rgba(255,255,255,.09) 28%,
        transparent 48%
      ),
      linear-gradient(
        135deg,
        #79C97B 0%,
        #A9D653 54%,
        #C4D63C 100%
      ) !important;

    background-color:#C4D63C !important;
  }


  /* =======================================================
     CATATAN
     Menggantikan Menu lainnya di posisi kolom 4 saat expanded.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuCard--catatanReplacement
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      radial-gradient(
        circle at 18% 8%,
        rgba(255,255,255,.29) 0%,
        rgba(255,255,255,.09) 28%,
        transparent 48%
      ),
      linear-gradient(
        135deg,
        #79C97B 0%,
        #A9D653 54%,
        #C4D63C 100%
      ) !important;

    background-color:#C4D63C !important;
  }


  /* =======================================================
     EXTRA MENU
     Penunjang = kolom 1
     Pusat Bantuan = kolom 2
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuExtraCard--penunjang
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      radial-gradient(
        circle at 18% 8%,
        rgba(255,255,255,.24) 0%,
        rgba(255,255,255,.07) 28%,
        transparent 48%
      ),
      linear-gradient(
        135deg,
        #0E9382 0%,
        #0F9F8D 58%,
        #22AD98 100%
      ) !important;

    background-color:#0E9382 !important;
  }

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuExtraCard--help
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      radial-gradient(
        circle at 18% 8%,
        rgba(255,255,255,.25) 0%,
        rgba(255,255,255,.075) 28%,
        transparent 48%
      ),
      linear-gradient(
        135deg,
        #0F9F8D 0%,
        #37B89D 58%,
        #57C08C 100%
      ) !important;

    background-color:#37B89D !important;
  }


  /* =======================================================
     MENU LAINNYA - TETAP PUTIH
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border-color:rgba(15,159,141,.10) !important;

    box-shadow:
      0 5px 10px rgba(16,70,80,.10),
      inset 1px 1px 1px rgba(255,255,255,.98),
      inset -1px -1px 1px rgba(74,111,120,.04) !important;
  }

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#00B9AD !important;
  }


  /* =======================================================
     MENU UTAMA - TETAP PUTIH
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border-color:rgba(15,159,141,.10) !important;

    box-shadow:
      0 5px 10px rgba(16,70,80,.10),
      inset 1px 1px 1px rgba(255,255,255,.98),
      inset -1px -1px 1px rgba(74,111,120,.04) !important;
  }

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#00B9AD !important;
  }


  /* =======================================================
     FONT AWESOME PADA TOMBOL GRADIENT
     Dibuat putih seperti quick-links desktop.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuCard:not(.dashboardAppMenuCard--more)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#ffffff !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,73,67,.18)) !important;
  }

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#00B9AD !important;
    filter:none !important;
  }


  /* =======================================================
     PNG
     Tetap file asli / direct PNG.
     Tidak memakai mask dan tidak diberi filter baru.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuImg--serviceImage,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuImg--kembangJanin{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    background:transparent !important;

    filter:none !important;
    transform:none !important;
  }


  /* =======================================================
     HOVER / FOCUS
     Gradient tidak berubah; hanya sedikit lebih timbul.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):hover
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):focus-visible
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    filter:
      saturate(1.035)
      brightness(1.025) !important;

    box-shadow:
      0 8px 15px rgba(16,70,80,.16),
      0 3px 7px rgba(16,70,80,.07),
      inset 0 1px 0 rgba(255,255,255,.40),
      inset 0 -2px 2px rgba(7,74,69,.07) !important;
  }


  /* =======================================================
     DARK MODE
     Gradient tetap konsisten, hanya sedikit diperdalam.
     ======================================================= */
  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(1)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(5)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        135deg,
        #08766F 0%,
        #0D8C82 58%,
        #239987 100%
      ) !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(2)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(6)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        135deg,
        #0D8C82 0%,
        #2F9F8B 58%,
        #4A9F78 100%
      ) !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(3)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(7)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        135deg,
        #2F9F8B 0%,
        #668F5B 62%,
        #809B46 100%
      ) !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:nth-child(4)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuCard--catatanReplacement
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        135deg,
        #668F5B 0%,
        #819A42 54%,
        #929D31 100%
      ) !important;
  }
}


/* =========================================================
   BUMIL KU - MOBILE UNIFORM TEAL MENU V40
   =========================================================
   KHUSUS HP <=740PX

   TARGET:
   - Semua tombol menu berwarna dibuat sama dengan warna icon
     "Menu lainnya":
       #00B9AD
   - Menu lainnya TETAP PUTIH.
   - Menu utama TETAP PUTIH.
   - Outer neumorphism tetap putih.
   - PNG dipakai langsung, tanpa CSS mask / recolor.
   - Layout 4x2, ukuran, label, route, toggle, dan JS tidak diubah.

   BERLAKU UNTUK:
   - Kehamilan
   - Kembang Janin
   - Kanal Resmi
   - Asisten 24/7
   - Artikel
   - Video Edukasi
   - Vaksin Link
   - Catatan
   - Penunjang
   - Pusat Bantuan

   TIDAK BERLAKU UNTUK:
   - Menu lainnya
   - Menu utama
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     SEMUA MENU UTAMA KECUALI "MENU LAINNYA"
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#00B9AD !important;
    --menu-3d-color:#00B9AD !important;
    --menu-depth:#078E86 !important;
    --menu-neu-dark:rgba(0,111,105,.25) !important;
    --menu-neu-soft:rgba(0,111,105,.12) !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border-color:#00B9AD !important;

    box-shadow:
      0 6px 12px rgba(0,126,119,.18),
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -2px 2px rgba(7,74,69,.075) !important;

    filter:none !important;
  }


  /* =======================================================
     CATATAN
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard--catatanReplacement
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#00B9AD !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border-color:#00B9AD !important;
  }


  /* =======================================================
     EXTRA MENU:
     PENUNJANG + PUSAT BANTUAN
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#00B9AD !important;
    --menu-3d-color:#00B9AD !important;
    --menu-depth:#078E86 !important;
    --menu-neu-dark:rgba(0,111,105,.25) !important;
    --menu-neu-soft:rgba(0,111,105,.12) !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border-color:#00B9AD !important;

    box-shadow:
      0 6px 12px rgba(0,126,119,.18),
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -2px 2px rgba(7,74,69,.075) !important;
  }


  /* =======================================================
     FONT AWESOME PADA MENU BERWARNA = PUTIH
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:not(.dashboardAppMenuCard--more)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#FFFFFF !important;
    opacity:1 !important;
    visibility:visible !important;

    filter:
      drop-shadow(0 2px 1px rgba(0,73,67,.18)) !important;

    text-shadow:none !important;
  }


  /* =======================================================
     PNG TETAP DIRECT / ASLI
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuImg--serviceImage,
  .dashboard-page
  #dashboardAppMenuSection
  .dashboardAppMenuImg--kembangJanin{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    background:transparent !important;

    filter:none !important;
    transform:none !important;
  }


  /* =======================================================
     MENU LAINNYA - TETAP PUTIH
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#ffffff !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border-color:rgba(15,159,141,.10) !important;

    box-shadow:
      0 5px 10px rgba(16,70,80,.10),
      inset 1px 1px 1px rgba(255,255,255,.98),
      inset -1px -1px 1px rgba(74,111,120,.04) !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#00B9AD !important;
    filter:none !important;
  }


  /* =======================================================
     MENU UTAMA - TETAP PUTIH
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#ffffff !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border-color:rgba(15,159,141,.10) !important;

    box-shadow:
      0 5px 10px rgba(16,70,80,.10),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset -1px -1px 1px rgba(74,111,120,.04) !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    color:#00B9AD !important;
    filter:none !important;
  }


  /* =======================================================
     HOVER / FOCUS
     Warna #00B9AD tidak berubah.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):hover
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):focus-visible
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main):hover
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main):focus-visible
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border-color:#00B9AD !important;

    filter:brightness(1.025) saturate(1.02) !important;
  }


  /* =======================================================
     ACTIVE / TAP
     Warna tetap #00B9AD.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):active
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main):active
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;
  }


  /* =======================================================
     DARK MODE
     Tombol berwarna tetap memakai #00B9AD.
     Menu lainnya + Menu utama tetap mengikuti surface dark.
     ======================================================= */
  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;
    border-color:#00B9AD !important;
  }
}


/* =========================================================
   BUMIL KU - MOBILE SERVICE MENU SOFT RAISED / EMPUK V42
   =========================================================
   KHUSUS HP <=740PX

   ACUAN VISUAL:
   - Karakter elevation premium desktopOfficialQuickLinks:
     contact shadow + main elevation + ambient depth +
     highlight atas + inset depth bawah.

   TARGET:
   - Semua tombol BERWARNA terasa lebih timbul / empuk.
   - Warna dasar #00B9AD TETAP.
   - PNG/icon TETAP.
   - Outer neumorphism putih TETAP.
   - Menu lainnya TETAP putih.
   - Menu utama TETAP putih.
   - Grid 4x2, ukuran, label, route, toggle, dan JS tidak berubah.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     OUTER WHITE NEUMORPH WRAPPER
     Dibuat sedikit lebih berisi agar tombol terasa empuk.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph{
    position:relative !important;
    isolation:isolate !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f8fbfb 44%,
        #edf3f3 100%
      ) !important;

    border:1px solid rgba(255,255,255,.94) !important;

    box-shadow:
      /* contact */
      0 3px 5px rgba(30,68,76,.075),

      /* main elevation */
      0 9px 17px rgba(30,68,76,.115),

      /* ambient depth */
      0 16px 27px rgba(15,159,141,.070),

      /* soft neumorphism side light */
      -5px -5px 11px rgba(255,255,255,.98),

      /* top surface highlight */
      inset 0 1.5px 0 rgba(255,255,255,.98),

      /* bottom depth */
      inset 0 -3px 6px rgba(48,91,99,.045),

      inset 1px 0 0 rgba(255,255,255,.48),
      inset -1px 0 0 rgba(55,94,101,.028) !important;

    transform:translateY(-1px) !important;

    transition:
      transform .18s cubic-bezier(.22,.61,.36,1),
      box-shadow .18s cubic-bezier(.22,.61,.36,1) !important;
  }


  /* =======================================================
     COLORED INNER BUTTONS
     Semua selain Menu lainnya + Menu utama.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    --menu-face:#00B9AD !important;
    --menu-depth:#078E86 !important;

    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border:1px solid rgba(255,255,255,.28) !important;

    /*
     * "EMPUK" / CUSHIONED DEPTH
     * Tidak menggunakan extrusion keras.
     * Shadow dibuat bertingkat seperti V36 desktop,
     * tetapi dipadatkan untuk icon-card mobile.
     */
    box-shadow:
      /* contact shadow */
      0 2px 4px rgba(3,88,82,.17),

      /* main elevation */
      0 7px 12px rgba(3,104,96,.20),

      /* broad ambient */
      0 12px 20px rgba(0,185,173,.145),

      /* top highlight */
      inset 0 2px 1px rgba(255,255,255,.30),

      /* bottom cushion/depth */
      inset 0 -4px 7px rgba(3,92,86,.16),

      /* side bevel */
      inset 1px 0 1px rgba(255,255,255,.08),
      inset -1px 0 1px rgba(0,70,66,.05) !important;

    transform:translateY(-1.5px) !important;

    transition:
      transform .18s cubic-bezier(.22,.61,.36,1),
      box-shadow .18s cubic-bezier(.22,.61,.36,1),
      filter .18s ease !important;
  }


  /* =======================================================
     TOP SOFT HIGHLIGHT
     Sangat halus, bukan garis/pseudo-card.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon::before,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon::before{
    content:"" !important;
    display:block !important;

    position:absolute !important;
    z-index:0 !important;
    inset:0 !important;

    border-radius:inherit !important;

    background:
      radial-gradient(
        circle at 22% 7%,
        rgba(255,255,255,.22) 0%,
        rgba(255,255,255,.08) 22%,
        transparent 46%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.09) 0%,
        rgba(255,255,255,.025) 38%,
        transparent 62%
      ) !important;

    opacity:.82 !important;

    box-shadow:none !important;
    pointer-events:none !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon::after,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon::after{
    content:none !important;
    display:none !important;
  }


  /* =======================================================
     ICON / PNG SELALU DI DEPAN HIGHLIGHT
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > .dashboardAppMenuImg{
    position:relative !important;
    z-index:2 !important;
  }


  /* =======================================================
     HOVER / FOCUS
     Sedikit lebih terangkat seperti soft cushion.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:hover
  .dashboardServiceIconNeumorph,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:focus-visible
  .dashboardServiceIconNeumorph{
    transform:translateY(-2px) !important;

    box-shadow:
      0 4px 7px rgba(30,68,76,.085),
      0 11px 20px rgba(30,68,76,.13),
      0 19px 31px rgba(15,159,141,.080),
      -6px -6px 12px rgba(255,255,255,1),
      inset 0 1.5px 0 rgba(255,255,255,1),
      inset 0 -3px 6px rgba(48,91,99,.045) !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):hover
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):focus-visible
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main):hover
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main):focus-visible
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    transform:translateY(-2px) !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;

    box-shadow:
      0 3px 5px rgba(3,88,82,.18),
      0 9px 15px rgba(3,104,96,.21),
      0 15px 24px rgba(0,185,173,.15),
      inset 0 2px 1px rgba(255,255,255,.32),
      inset 0 -4px 7px rgba(3,92,86,.16),
      inset 1px 0 1px rgba(255,255,255,.09),
      inset -1px 0 1px rgba(0,70,66,.05) !important;
  }


  /* =======================================================
     ACTIVE / TAP
     Ditekan masuk sedikit seperti tombol empuk.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:active
  .dashboardServiceIconNeumorph{
    transform:translateY(1px) scale(.985) !important;

    box-shadow:
      2px 2px 5px rgba(30,68,76,.08),
      -2px -2px 5px rgba(255,255,255,.72),
      inset 2px 2px 4px rgba(48,91,99,.065),
      inset -2px -2px 4px rgba(255,255,255,.62) !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):active
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main):active
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    transform:translateY(1px) scale(.982) !important;

    background:#00B9AD !important;

    box-shadow:
      0 2px 3px rgba(3,88,82,.13),
      inset 2px 2px 4px rgba(1,97,91,.16),
      inset -2px -2px 4px rgba(255,255,255,.12) !important;
  }


  /* =======================================================
     MENU LAINNYA + MENU UTAMA
     WARNA/STYLE PUTIH TETAP. HANYA DEPTH DIPERHALUS.
     ======================================================= */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border:1px solid rgba(15,159,141,.10) !important;

    box-shadow:
      0 2px 4px rgba(31,71,78,.07),
      0 7px 13px rgba(31,71,78,.10),
      0 12px 20px rgba(15,159,141,.055),
      inset 0 2px 1px rgba(255,255,255,.99),
      inset 0 -4px 7px rgba(67,104,111,.045) !important;

    transform:translateY(-1.5px) !important;
  }

  /*
   * Jangan tampilkan highlight teal pseudo layer pada tombol putih.
   */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon::before,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon::before{
    content:none !important;
    display:none !important;
  }


  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph{
    box-shadow:
      0 3px 6px rgba(0,0,0,.20),
      0 10px 18px rgba(0,0,0,.27),
      0 18px 29px rgba(0,0,0,.20),
      -4px -4px 9px rgba(40,78,84,.13),
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -3px 6px rgba(0,0,0,.16) !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:#00B9AD !important;
    background-color:#00B9AD !important;

    box-shadow:
      0 2px 4px rgba(0,0,0,.18),
      0 8px 14px rgba(0,0,0,.24),
      0 13px 22px rgba(0,0,0,.17),
      inset 0 2px 1px rgba(255,255,255,.20),
      inset 0 -4px 7px rgba(0,0,0,.13) !important;
  }
}


/* =========================================================
   V42 - HP COMPACT <=420PX
   Depth dipadatkan agar tidak terlalu berat di layar kecil.
   ========================================================= */
@media (max-width:420px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard
  .dashboardServiceIconNeumorph{
    box-shadow:
      0 3px 5px rgba(30,68,76,.065),
      0 8px 14px rgba(30,68,76,.10),
      0 13px 22px rgba(15,159,141,.060),
      -4px -4px 9px rgba(255,255,255,.96),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -3px 5px rgba(48,91,99,.04) !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    box-shadow:
      0 2px 4px rgba(3,88,82,.15),
      0 6px 10px rgba(3,104,96,.18),
      0 10px 17px rgba(0,185,173,.125),
      inset 0 2px 1px rgba(255,255,255,.28),
      inset 0 -3px 6px rgba(3,92,86,.14) !important;
  }
}


/* =========================================================
   BUMIL KU - MOBILE BOTTOM NAV SOFT RAISED V43
   =========================================================
   KHUSUS HP <=740PX

   TARGET:
   - 5 tombol bottom navbar memakai bahasa visual V42.
   - Semua tombol memakai warna yang SAMA:
       #00B9AD
   - Icon + text putih.
   - Soft raised / empuk:
       contact shadow
       main elevation
       ambient teal depth
       top highlight
       bottom inset depth
   - Home/active tetap dibedakan HANYA melalui depth sedikit
     lebih kuat, bukan dengan warna berbeda.
   - Container bottom navbar tetap putih.
   - Ukuran, grid 5 kolom, route, icon, label, fixed position,
     safe-area, dan JavaScript tidak diubah.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     NAVBAR OUTER CONTAINER
     Tetap putih seperti existing, tetapi depth diselaraskan
     dengan wrapper neumorphism Menu Layanan V42.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav{
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.99) 0%,
        rgba(249,252,252,.985) 48%,
        rgba(239,245,245,.98) 100%
      ) !important;

    border:
      1px solid rgba(255,255,255,.94) !important;

    box-shadow:
      /* contact */
      0 4px 8px rgba(30,68,76,.085),

      /* main elevation */
      0 14px 27px rgba(30,68,76,.125),

      /* broad ambient */
      0 23px 38px rgba(15,159,141,.075),

      /* surface highlight */
      inset 0 1.5px 0 rgba(255,255,255,1),

      /* lower depth */
      inset 0 -4px 8px rgba(48,91,99,.045) !important;

    backdrop-filter:
      blur(18px)
      saturate(1.06) !important;

    -webkit-backdrop-filter:
      blur(18px)
      saturate(1.06) !important;
  }


  /* =======================================================
     ALL 5 BOTTOM NAV BUTTONS
     Warna identik: #00B9AD
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    color:#FFFFFF !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border:
      1px solid rgba(255,255,255,.27) !important;

    /*
     * Depth diadaptasi langsung dari tombol Menu Layanan V42,
     * kemudian dipadatkan agar cocok untuk bottom navigation.
     */
    box-shadow:
      /* contact shadow */
      0 2px 4px rgba(3,88,82,.17),

      /* main elevation */
      0 6px 11px rgba(3,104,96,.20),

      /* ambient teal */
      0 11px 18px rgba(0,185,173,.135),

      /* top highlight */
      inset 0 2px 1px rgba(255,255,255,.29),

      /* bottom cushion */
      inset 0 -4px 7px rgba(3,92,86,.16),

      /* side bevel */
      inset 1px 0 1px rgba(255,255,255,.08),
      inset -1px 0 1px rgba(0,70,66,.05) !important;

    transform:
      translateY(-1px) !important;

    transition:
      transform .16s cubic-bezier(.22,.61,.36,1),
      box-shadow .16s cubic-bezier(.22,.61,.36,1),
      filter .16s ease !important;
  }


  /* =======================================================
     SOFT TOP HIGHLIGHT
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn::before{
    content:"" !important;

    position:absolute !important;
    z-index:0 !important;
    inset:0 !important;

    display:block !important;

    border-radius:inherit !important;

    background:
      radial-gradient(
        circle at 22% 5%,
        rgba(255,255,255,.23) 0%,
        rgba(255,255,255,.08) 22%,
        transparent 46%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.085) 0%,
        rgba(255,255,255,.020) 40%,
        transparent 65%
      ) !important;

    opacity:.84 !important;

    pointer-events:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn::after{
    content:none !important;
    display:none !important;
  }


  /* =======================================================
     ICON + TEXT
     Semua putih, di atas highlight.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn i,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn span{
    position:relative !important;
    z-index:2 !important;

    color:#FFFFFF !important;

    opacity:1 !important;
    visibility:visible !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn i{
    filter:
      drop-shadow(
        0 1px 1px rgba(0,78,73,.14)
      ) !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn span{
    text-shadow:
      0 1px 1px rgba(0,78,73,.10) !important;
  }


  /* =======================================================
     INACTIVE
     Jangan kembali ke gray/transparent dari rule lama.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active){
    color:#FFFFFF !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border-color:
      rgba(255,255,255,.27) !important;

    box-shadow:
      0 2px 4px rgba(3,88,82,.17),
      0 6px 11px rgba(3,104,96,.20),
      0 11px 18px rgba(0,185,173,.135),
      inset 0 2px 1px rgba(255,255,255,.29),
      inset 0 -4px 7px rgba(3,92,86,.16),
      inset 1px 0 1px rgba(255,255,255,.08),
      inset -1px 0 1px rgba(0,70,66,.05) !important;
  }


  /* =======================================================
     ACTIVE / HOME
     WARNA TETAP #00B9AD.
     Hanya depth sedikit lebih kuat sebagai active cue.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    color:#FFFFFF !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border-color:
      rgba(255,255,255,.33) !important;

    box-shadow:
      0 3px 5px rgba(3,88,82,.19),
      0 8px 14px rgba(3,104,96,.22),
      0 14px 22px rgba(0,185,173,.155),
      inset 0 2px 1px rgba(255,255,255,.34),
      inset 0 -4px 7px rgba(3,92,86,.17),
      inset 1px 0 1px rgba(255,255,255,.10),
      inset -1px 0 1px rgba(0,70,66,.055) !important;

    transform:
      translateY(-2px) !important;
  }


  /* =======================================================
     HOVER / FOCUS
     Warna tetap sama.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:hover,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:focus-visible,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):hover,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):focus-visible{
    color:#FFFFFF !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border-color:
      rgba(255,255,255,.31) !important;

    box-shadow:
      0 3px 5px rgba(3,88,82,.18),
      0 8px 14px rgba(3,104,96,.21),
      0 14px 22px rgba(0,185,173,.15),
      inset 0 2px 1px rgba(255,255,255,.32),
      inset 0 -4px 7px rgba(3,92,86,.16) !important;

    transform:
      translateY(-2px) !important;

    filter:
      brightness(1.018)
      saturate(1.015) !important;

    outline:none !important;
  }


  /* =======================================================
     ACTIVE / TAP
     Tombol ditekan masuk seperti cushion.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:active,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:active{
    color:#FFFFFF !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    transform:
      translateY(1px)
      scale(.975) !important;

    box-shadow:
      0 1px 2px rgba(3,88,82,.12),
      inset 2px 2px 5px rgba(1,97,91,.18),
      inset -2px -2px 5px rgba(255,255,255,.13) !important;

    filter:none !important;
  }


  /* =======================================================
     DARK MODE
     Tetap teal agar warna sama dengan light mode.
     ======================================================= */
  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav{
    background:
      linear-gradient(
        145deg,
        rgba(20,49,54,.98) 0%,
        rgba(13,38,43,.98) 52%,
        rgba(9,31,36,.98) 100%
      ) !important;

    border-color:
      rgba(255,255,255,.065) !important;

    box-shadow:
      0 4px 8px rgba(0,0,0,.24),
      0 15px 28px rgba(0,0,0,.31),
      0 24px 40px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -4px 8px rgba(0,0,0,.17) !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn,
  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active),
  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    color:#FFFFFF !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border-color:
      rgba(255,255,255,.18) !important;
  }
}


/* =========================================================
   V43 - SMALL MOBILE <=380PX
   Shadow dipadatkan agar 5 tombol tidak terlihat terlalu berat.
   ========================================================= */
@media (max-width:380px){

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn{
    box-shadow:
      0 2px 3px rgba(3,88,82,.15),
      0 5px 9px rgba(3,104,96,.18),
      0 9px 15px rgba(0,185,173,.115),
      inset 0 2px 1px rgba(255,255,255,.27),
      inset 0 -3px 5px rgba(3,92,86,.14) !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    box-shadow:
      0 2px 4px rgba(3,88,82,.18),
      0 7px 11px rgba(3,104,96,.20),
      0 11px 18px rgba(0,185,173,.14),
      inset 0 2px 1px rgba(255,255,255,.31),
      inset 0 -3px 5px rgba(3,92,86,.15) !important;
  }
}


/* =========================================================
   BUMIL KU - BOTTOM NAV ACTIVE ONLY TEAL V44
   =========================================================
   KHUSUS HP <=740PX

   FINAL:
   - HANYA tombol .is-active memakai #00B9AD + soft raised.
   - Tombol NON-ACTIVE kembali putih / netral.
   - Icon + text non-active = abu-biru.
   - Container bottom navbar tetap putih.
   - Hover/focus non-active tetap netral.
   - Saat item menjadi active, otomatis mendapat style teal.
   - Ukuran, grid, route, icon, label, posisi fixed, JS tetap.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     NON-ACTIVE
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active){
    color:#6E8292 !important;

    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;

    border:1px solid transparent !important;

    box-shadow:none !important;

    transform:none !important;
    filter:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active)::before,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active)::after{
    content:none !important;
    display:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) i,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) span{
    color:#6E8292 !important;
    text-shadow:none !important;
    filter:none !important;
  }


  /* =======================================================
     NON-ACTIVE HOVER / FOCUS
     Tetap putih/netral, hanya sedikit feedback.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):hover,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):focus-visible{
    color:#4E6B7C !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.96) 0%,
        rgba(247,251,251,.92) 100%
      ) !important;

    background-color:#ffffff !important;

    border-color:
      rgba(15,159,141,.08) !important;

    box-shadow:
      0 3px 7px rgba(30,68,76,.055),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    transform:
      translateY(-1px) !important;

    filter:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):hover i,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):hover span,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):focus-visible i,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):focus-visible span{
    color:#4E6B7C !important;
  }


  /* =======================================================
     ACTIVE ONLY
     Teal + empuk seperti Menu Layanan V42.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    color:#FFFFFF !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;
    background-image:none !important;

    border:
      1px solid rgba(255,255,255,.33) !important;

    box-shadow:
      0 3px 5px rgba(3,88,82,.19),
      0 8px 14px rgba(3,104,96,.22),
      0 14px 22px rgba(0,185,173,.155),
      inset 0 2px 1px rgba(255,255,255,.34),
      inset 0 -4px 7px rgba(3,92,86,.17),
      inset 1px 0 1px rgba(255,255,255,.10),
      inset -1px 0 1px rgba(0,70,66,.055) !important;

    transform:
      translateY(-2px) !important;

    filter:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active::before{
    content:"" !important;

    position:absolute !important;
    z-index:0 !important;
    inset:0 !important;

    display:block !important;

    border-radius:inherit !important;

    background:
      radial-gradient(
        circle at 22% 5%,
        rgba(255,255,255,.24) 0%,
        rgba(255,255,255,.085) 22%,
        transparent 46%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.09) 0%,
        rgba(255,255,255,.02) 40%,
        transparent 65%
      ) !important;

    opacity:.86 !important;

    pointer-events:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active::after{
    content:none !important;
    display:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active i,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active span{
    position:relative !important;
    z-index:2 !important;

    color:#FFFFFF !important;
    opacity:1 !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active i{
    filter:
      drop-shadow(
        0 1px 1px rgba(0,78,73,.14)
      ) !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active span{
    text-shadow:
      0 1px 1px rgba(0,78,73,.10) !important;
  }


  /* =======================================================
     ACTIVE HOVER / FOCUS
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:hover,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:focus-visible{
    color:#FFFFFF !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;

    border-color:
      rgba(255,255,255,.36) !important;

    box-shadow:
      0 3px 6px rgba(3,88,82,.20),
      0 9px 16px rgba(3,104,96,.23),
      0 15px 24px rgba(0,185,173,.16),
      inset 0 2px 1px rgba(255,255,255,.35),
      inset 0 -4px 7px rgba(3,92,86,.17) !important;

    transform:
      translateY(-2px) !important;

    filter:
      brightness(1.015)
      saturate(1.01) !important;
  }


  /* =======================================================
     ACTIVE TAP
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:active{
    color:#FFFFFF !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;

    transform:
      translateY(1px)
      scale(.975) !important;

    box-shadow:
      0 1px 2px rgba(3,88,82,.12),
      inset 2px 2px 5px rgba(1,97,91,.18),
      inset -2px -2px 5px rgba(255,255,255,.13) !important;

    filter:none !important;
  }


  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active){
    color:#9DB2BC !important;

    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) i,
  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) span{
    color:#9DB2BC !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    color:#FFFFFF !important;

    background:#00B9AD !important;
    background-color:#00B9AD !important;

    border-color:
      rgba(255,255,255,.20) !important;
  }
}


/* =========================================================
   BUMIL KU - BOTTOM NAV ACTIVE LIKE "MENU LAINNYA" V45
   =========================================================
   KHUSUS HP <=740PX

   TARGET:
   - HANYA tombol bottom navbar yang ACTIVE dibuat seperti
     tombol "Menu lainnya".
   - Outer neumorphism = putih.
   - Inner/surface tombol = putih.
   - Icon = teal #00B9AD.
   - Text aktif = teal gelap / teal.
   - Non-active tetap netral seperti V44.
   - Hover/focus/active tetap mempertahankan karakter putih.
   - Route, label, icon, ukuran, grid 5 kolom, fixed position,
     safe-area, dan JavaScript tidak diubah.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     ACTIVE BUTTON - WHITE NEUMORPHISM
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    color:#0F9F8D !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f8fbfb 46%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border:
      1px solid rgba(255,255,255,.94) !important;

    box-shadow:
      /* contact shadow */
      0 3px 5px rgba(30,68,76,.075),

      /* main elevation */
      0 9px 17px rgba(30,68,76,.115),

      /* ambient teal depth */
      0 16px 27px rgba(15,159,141,.070),

      /* neumorphism light */
      -5px -5px 11px rgba(255,255,255,.98),

      /* top highlight */
      inset 0 1.5px 0 rgba(255,255,255,.98),

      /* lower depth */
      inset 0 -3px 6px rgba(48,91,99,.045),

      inset 1px 0 0 rgba(255,255,255,.48),
      inset -1px 0 0 rgba(55,94,101,.028) !important;

    transform:
      translateY(-2px) !important;

    filter:none !important;
  }


  /* =======================================================
     ACTIVE SOFT HIGHLIGHT
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active::before{
    content:"" !important;

    position:absolute !important;
    z-index:0 !important;
    inset:0 !important;

    display:block !important;

    border-radius:inherit !important;

    background:
      radial-gradient(
        circle at 22% 6%,
        rgba(255,255,255,.78) 0%,
        rgba(255,255,255,.22) 24%,
        transparent 48%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.28) 0%,
        rgba(255,255,255,.055) 38%,
        transparent 66%
      ) !important;

    opacity:.88 !important;

    pointer-events:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active::after{
    content:none !important;
    display:none !important;
  }


  /* =======================================================
     ACTIVE ICON + TEXT
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active i,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active span{
    position:relative !important;
    z-index:2 !important;

    opacity:1 !important;
    visibility:visible !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active i{
    color:#00B9AD !important;

    filter:
      drop-shadow(
        0 2px 1px rgba(0,185,173,.14)
      ) !important;

    text-shadow:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active span{
    color:#0F8F84 !important;
    text-shadow:none !important;
    font-weight:800 !important;
  }


  /* =======================================================
     ACTIVE HOVER / FOCUS
     Tetap putih seperti Menu lainnya.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:hover,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:focus-visible{
    color:#0F9F8D !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f8fbfb 46%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border-color:
      rgba(15,159,141,.12) !important;

    box-shadow:
      0 4px 7px rgba(30,68,76,.085),
      0 11px 20px rgba(30,68,76,.13),
      0 19px 31px rgba(15,159,141,.080),
      -6px -6px 12px rgba(255,255,255,1),
      inset 0 1.5px 0 rgba(255,255,255,1),
      inset 0 -3px 6px rgba(48,91,99,.045) !important;

    transform:
      translateY(-2px) !important;

    filter:none !important;

    outline:none !important;
  }


  /* =======================================================
     ACTIVE TAP
     Masuk sedikit seperti tombol empuk putih.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:active{
    color:#0F9F8D !important;

    background:
      linear-gradient(
        145deg,
        #f4f8f8 0%,
        #ffffff 100%
      ) !important;

    background-color:#ffffff !important;

    transform:
      translateY(1px)
      scale(.975) !important;

    box-shadow:
      2px 2px 5px rgba(30,68,76,.08),
      -2px -2px 5px rgba(255,255,255,.72),
      inset 2px 2px 4px rgba(48,91,99,.065),
      inset -2px -2px 4px rgba(255,255,255,.62) !important;

    filter:none !important;
  }


  /* =======================================================
     NON-ACTIVE
     Tetap netral seperti V44.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active){
    color:#6E8292 !important;

    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;

    border:1px solid transparent !important;

    box-shadow:none !important;

    transform:none !important;
    filter:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) i,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) span{
    color:#6E8292 !important;
    text-shadow:none !important;
    filter:none !important;
  }


  /* =======================================================
     DARK MODE
     Active mengikuti "Menu lainnya" versi dark.
     ======================================================= */
  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    color:#53EBE8 !important;

    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 48%,
        #0b2227 100%
      ) !important;

    background-color:#102b30 !important;

    border-color:
      rgba(83,235,232,.10) !important;

    box-shadow:
      0 4px 8px rgba(0,0,0,.22),
      0 11px 20px rgba(0,0,0,.28),
      0 19px 31px rgba(0,0,0,.21),
      -4px -4px 9px rgba(40,78,84,.13),
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -3px 6px rgba(0,0,0,.16) !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active i{
    color:#53EBE8 !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active span{
    color:#86E9E4 !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active){
    color:#9DB2BC !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) i,
  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) span{
    color:#9DB2BC !important;
  }
}


/* =========================================================
   V45 - SMALL MOBILE <=380PX
   ========================================================= */
@media (max-width:380px){

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    box-shadow:
      0 3px 5px rgba(30,68,76,.065),
      0 8px 14px rgba(30,68,76,.10),
      0 13px 22px rgba(15,159,141,.060),
      -4px -4px 9px rgba(255,255,255,.96),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -3px 5px rgba(48,91,99,.04) !important;
  }
}


/* =========================================================
   BUMIL KU - MENU ICON WRAPPER BALANCED PADDING V53
   =========================================================
   PERBAIKAN BUG:
   - Padding visual frame putih terlihat tidak seimbang.
   - Penyebab utama: wrapper memakai width/height + padding,
     tetapi belum dikunci box-sizing:border-box.
   - Hasil:
     frame putih menghitung ruang dalam secara presisi,
     tombol teal/putih benar-benar center,
     padding terlihat lebih seimbang sebelum hover.

   CATATAN:
   - Tidak mengubah warna.
   - Tidak mengubah grid/label.
   - Tidak mengubah style hover/active.
   ========================================================= */

@media (max-width:740px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardServiceIconNeumorph{
    box-sizing:border-box !important;
    display:grid !important;
    place-items:center !important;
    align-content:center !important;
    justify-content:center !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    justify-self:center !important;
    margin:0 !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > .dashboardAppMenuImg,
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i{
    display:block !important;
    margin:0 auto !important;
    align-self:center !important;
    justify-self:center !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   Konsistensi padding internal dijaga tetap presisi.
   ========================================================= */
@media (max-width:420px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardServiceIconNeumorph{
    box-sizing:border-box !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    box-sizing:border-box !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardServiceIconNeumorph{
    box-sizing:border-box !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    box-sizing:border-box !important;
  }
}


/* =========================================================
   BUMIL KU - INNER COLORED CARD PERFECT CENTER V54
   =========================================================
   KOREKSI:
   - Inner card berwarna sebelumnya masih memiliki:
       transform: translateY(-1.5px)
     pada kondisi default.
   - Akibatnya padding frame putih:
       atas  = lebih sempit
       bawah = lebih lebar

   FINAL:
   - Khusus kondisi IDLE / sebelum hover:
     inner card berwarna dikunci tepat di tengah.
   - Menu lainnya dan Menu utama tidak disentuh.
   - Hover / focus / active existing tetap dipertahankan.
   - Ukuran, warna, gradient, shadow, icon, label, grid tidak berubah.
   ========================================================= */
@media (max-width:740px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):not(:hover):not(:focus-visible):not(:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main):not(:hover):not(:focus-visible):not(:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    transform:none !important;
    translate:none !important;

    align-self:center !important;
    justify-self:center !important;

    margin:auto !important;
  }
}


/* =========================================================
   V54 - COMPACT MOBILE
   ========================================================= */
@media (max-width:420px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):not(:hover):not(:focus-visible):not(:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main):not(:hover):not(:focus-visible):not(:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    transform:none !important;
    translate:none !important;
    margin:auto !important;
  }
}


/* =========================================================
   BUMIL KU - HOVER PERFECT CENTER V55
   =========================================================
   FIX:
   - Saat hover/focus, inner card berwarna masih bergeser
     ke atas karena rule hover lama:
       transform: translateY(-2px)
   - Sekarang hover/focus dikunci tetap center.

   CATATAN:
   - Hanya untuk menu berwarna biasa.
   - Menu lainnya & Menu utama tidak disentuh.
   - Efek hover pada card luar tetap jalan.
   - Warna, gradient, shadow, size, grid tidak diubah.
   ========================================================= */
@media (max-width:740px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):is(:hover,:focus-visible)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main):is(:hover,:focus-visible)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    transform:none !important;
    translate:none !important;
    align-self:center !important;
    justify-self:center !important;
    margin:auto !important;
  }
}

@media (max-width:420px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard:not(.dashboardAppMenuCard--more):is(:hover,:focus-visible)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard:not(.dashboardAppMenuExtraCard--main):is(:hover,:focus-visible)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    transform:none !important;
    translate:none !important;
    margin:auto !important;
  }
}


/* =========================================================
   BUMIL KU - WHITE WRAPPER IDLE SHADOW BOOST V56
   =========================================================
   TARGET:
   - Hanya card putih sebelum hover (.dashboardServiceIconNeumorph)
     dibuat sedikit lebih timbul.
   - Hover/focus/active tidak diubah.
   - Warna inner button, center alignment, ukuran, grid tetap.
   ========================================================= */
@media (max-width:740px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:not(:hover):not(:focus-visible):not(:active)
  .dashboardServiceIconNeumorph{
    box-shadow:
      0 4px 8px rgba(26,72,80,.14),
      10px 14px 24px rgba(26,72,80,.22),
      0 22px 36px rgba(15,159,141,.13),
      -7px -7px 14px rgba(255,255,255,.995),
      inset 1px 1px 1px rgba(255,255,255,.98),
      inset -1px -1px 1px rgba(74,111,120,.06) !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:not(:hover):not(:focus-visible):not(:active)
  .dashboardServiceIconNeumorph{
    box-shadow:
      0 4px 8px rgba(0,0,0,.28),
      10px 14px 24px rgba(0,0,0,.36),
      0 22px 36px rgba(0,0,0,.24),
      -6px -6px 12px rgba(40,78,84,.19),
      inset 1px 1px 1px rgba(255,255,255,.045),
      inset -1px -1px 1px rgba(0,0,0,.22) !important;
  }
}

@media (max-width:420px){
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:not(:hover):not(:focus-visible):not(:active)
  .dashboardServiceIconNeumorph{
    box-shadow:
      0 4px 7px rgba(26,72,80,.13),
      8px 12px 20px rgba(26,72,80,.21),
      0 18px 30px rgba(15,159,141,.12),
      -6px -6px 12px rgba(255,255,255,.985),
      inset 1px 1px 1px rgba(255,255,255,.97),
      inset -1px -1px 1px rgba(74,111,120,.055) !important;
  }
}


/* =========================================================
   BUMIL KU - WHITE WRAPPER IDLE SHADOW SOFTER V57
   =========================================================
   Revisi dari V56:
   - shadow default card putih dikurangi sedikit
   - tetap timbul, tapi tidak berlebihan
   - hover/focus/active tetap tidak diubah
   ========================================================= */
@media (max-width:740px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:not(:hover):not(:focus-visible):not(:active)
  .dashboardServiceIconNeumorph{
    box-shadow:
      0 3px 6px rgba(26,72,80,.11),
      8px 11px 19px rgba(26,72,80,.17),
      0 17px 28px rgba(15,159,141,.09),
      -6px -6px 12px rgba(255,255,255,.99),
      inset 1px 1px 1px rgba(255,255,255,.975),
      inset -1px -1px 1px rgba(74,111,120,.05) !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:not(:hover):not(:focus-visible):not(:active)
  .dashboardServiceIconNeumorph{
    box-shadow:
      0 3px 6px rgba(0,0,0,.24),
      8px 11px 19px rgba(0,0,0,.30),
      0 17px 28px rgba(0,0,0,.19),
      -5px -5px 10px rgba(40,78,84,.16),
      inset 1px 1px 1px rgba(255,255,255,.04),
      inset -1px -1px 1px rgba(0,0,0,.20) !important;
  }
}

@media (max-width:420px){
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuCard:not(:hover):not(:focus-visible):not(:active)
  .dashboardServiceIconNeumorph{
    box-shadow:
      0 3px 5px rgba(26,72,80,.10),
      7px 10px 17px rgba(26,72,80,.16),
      0 14px 24px rgba(15,159,141,.085),
      -5px -5px 10px rgba(255,255,255,.985),
      inset 1px 1px 1px rgba(255,255,255,.97),
      inset -1px -1px 1px rgba(74,111,120,.048) !important;
  }
}


/* =========================================================
   BUMIL KU - MENU UTAMA TEAL ICON V58
   =========================================================
   TARGET:
   - Icon "Menu utama" dibuat sama dengan icon "Menu lainnya".
   - Warna final: #00B9AD.
   - Card putih, shadow, ukuran, posisi, teks, dan fungsi
     tidak diubah.
   ========================================================= */
@media (max-width:740px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    color:#00B9AD !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i,
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > .svg-inline--fa{
    color:#00B9AD !important;
    fill:currentColor !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    text-shadow:none !important;
    -webkit-text-fill-color:#00B9AD !important;
  }

  /* Hover/focus/tap tetap memakai teal yang sama */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main:is(:hover,:focus-visible,:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main:is(:hover,:focus-visible,:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i,
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main:is(:hover,:focus-visible,:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > .svg-inline--fa{
    color:#00B9AD !important;
    fill:currentColor !important;
    -webkit-text-fill-color:#00B9AD !important;
  }
}


/* =========================================================
   BUMIL KU - MENU LAINNYA & MENU UTAMA CENTER FIX V59
   =========================================================
   PERBAIKAN:
   1. Menu lainnya & Menu utama belum presisi di tengah frame putih.
   2. Menu utama saat hover berubah hijau, padahal harus tetap putih.

   FINAL:
   - Kedua tombol putih dikunci center (idle/hover/focus/active).
   - Menu utama inner button tetap putih di semua state.
   - Icon kedua tombol tetap teal.
   - Shadow, ukuran, label, layout, fungsi tetap.
   ========================================================= */
@media (max-width:740px){

  /* ---------- CENTER FIX: MENU LAINNYA + MENU UTAMA ---------- */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph{
    display:grid !important;
    place-items:center !important;
    align-content:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    justify-self:center !important;
    margin:auto !important;
    box-sizing:border-box !important;
    transform:none !important;
    translate:none !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more:is(:hover,:focus-visible,:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main:is(:hover,:focus-visible,:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    align-self:center !important;
    justify-self:center !important;
    margin:auto !important;
    transform:none !important;
    translate:none !important;
  }

  /* ---------- MENU UTAMA: TETAP PUTIH SAAT HOVER ---------- */
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main:is(:hover,:focus-visible,:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;
    border:1px solid rgba(15,159,141,.10) !important;
    box-shadow:
      0 5px 10px rgba(16,70,80,.10),
      inset 1px 1px 1px rgba(255,255,255,.98),
      inset -1px -1px 1px rgba(74,111,120,.04) !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i,
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > .svg-inline--fa,
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main:is(:hover,:focus-visible,:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > i,
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main:is(:hover,:focus-visible,:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon
  > .svg-inline--fa{
    color:#00B9AD !important;
    fill:currentColor !important;
    -webkit-text-fill-color:#00B9AD !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}

@media (max-width:420px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuGrid
  > .dashboardAppMenuCard.dashboardAppMenuCard--more:is(:hover,:focus-visible,:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon,

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection
  .dashboardAppMenuExtra
  > .dashboardAppMenuExtraCard.dashboardAppMenuExtraCard--main:is(:hover,:focus-visible,:active)
  .dashboardServiceIconNeumorph
  > .dashboardAppMenuIcon{
    margin:auto !important;
    transform:none !important;
    translate:none !important;
  }
}


/* =========================================================
   BUMIL KU - MENU LAYANAN CLEAN WHITE V60
   =========================================================
   KHUSUS HP <=740PX

   TARGET:
   - Card BESAR pembungkus Menu Layanan menjadi putih bersih.
   - Menghapus tint cyan/biru samar di kanan atas.
   - Menghapus tint lime/kuning samar di kiri bawah.
   - Menghapus pseudo decorative glow ::before / ::after.
   - Shadow, radius, padding, grid, tombol menu, icon,
     outer icon wrapper, hover, expand/collapse, dan JS tetap.
   ========================================================= */
@media (max-width:740px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;
  }

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection::before,
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection::after{
    content:none !important;
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;

    background:none !important;
    background-color:transparent !important;
    background-image:none !important;

    box-shadow:none !important;
    pointer-events:none !important;
  }

  /* Dark mode juga dibuat clean tanpa cyan/lime decorative tint. */
  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection{
    background:#102b30 !important;
    background-color:#102b30 !important;
    background-image:none !important;
  }
}


/* =========================================================
   COMPACT MOBILE <=420PX
   Tidak ada perubahan visual tambahan; hanya memastikan
   background clean tetap terkunci setelah legacy breakpoint.
   ========================================================= */
@media (max-width:420px){

  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  #dashboardAppMenuSection.dashboardAppMenuSection{
    background:#102b30 !important;
    background-color:#102b30 !important;
    background-image:none !important;
  }
}


/* =========================================================
   BUMIL KU - MOBILE FIXED TOP NAVBAR V61
   =========================================================
   KHUSUS HP <=740PX

   TARGET:
   - Navbar mobile selalu diam di bagian atas viewport.
   - Konten halaman yang bergerak saat scroll.
   - Konten boleh melewati / berada di belakang navbar.
   - Pada posisi awal, Hero tidak tertutup navbar karena
     dashboardOverviewGrid memperoleh ruang kompensasi.
   - Drawer/backdrop tetap berada di atas navbar.
   - Desktop/laptop tidak berubah.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     FIXED NAVBAR
     ======================================================= */
  .dashboard-page
  .dashboardMobileBrandHeader{
    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:auto !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    z-index:80 !important;

    /*
     * Background tetap solid agar konten yang lewat di bawah
     * navbar tidak mengganggu keterbacaan logo/action.
     */
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    /*
     * Shadow existing dipertahankan dan dibuat sebagai
     * pemisah tipis ketika konten bergerak di bawah navbar.
     */
    box-shadow:
      0 7px 18px rgba(16,70,80,.055),
      0 2px 5px rgba(16,70,80,.025),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    transform:translateZ(0) !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  /*
   * Navbar fixed keluar dari document flow.
   * Beri ruang awal setinggi navbar agar Hero tidak
   * tertutup ketika halaman pertama kali dibuka.
   */
  .dashboard-page
  #section-dashboard
  .dashboardOverviewGrid{
    padding-top:
      calc(72px + env(safe-area-inset-top)) !important;
  }

  /* =======================================================
     STACKING
     Drawer/backdrop harus tetap menutupi navbar.
     ======================================================= */
  .dashboard-page
  .dashboardMobileBackdrop{
    z-index:90 !important;
  }

  .dashboard-page
  .dashboardMobileDrawer{
    z-index:100 !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileBrandHeader{
    background:#102b30 !important;
    background-color:#102b30 !important;
    background-image:none !important;

    box-shadow:
      0 8px 20px rgba(0,0,0,.20),
      0 2px 5px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }
}


/* =========================================================
   HP COMPACT <=420PX
   Navbar existing memiliki tinggi lebih compact.
   ========================================================= */
@media (max-width:420px){

  .dashboard-page
  #section-dashboard
  .dashboardOverviewGrid{
    padding-top:
      calc(68px + env(safe-area-inset-top)) !important;
  }
}


/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){

  .dashboard-page
  #section-dashboard
  .dashboardOverviewGrid{
    padding-top:
      calc(68px + env(safe-area-inset-top)) !important;
  }
}


/* =========================================================
   BUMIL KU - BOTTOM NAV VERTICAL CENTER V62
   =========================================================
   KHUSUS HP <=740PX

   TARGET:
   - Icon + text seluruh menu tepat di tengah secara vertikal.
   - Mengurangi kesan padding bawah terlalu lebar.
   - Active card Home tidak lagi bergeser naik.
   - Hover/focus tetap center, tidak meloncat ke atas.
   - Tinggi navbar, 5 kolom, warna, shadow, radius,
     fixed position, route, dan JavaScript tidak diubah.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     OUTER NAV
     Total vertical padding tetap 14px:
       sebelumnya 7px + 7px
       sekarang   8px + 6px
     Jadi tinggi navbar tetap sama, tetapi isi turun 1px.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav{
    padding:
      8px 7px 6px !important;

    align-items:center !important;
    justify-items:stretch !important;
  }

  /* =======================================================
     SEMUA MENU
     Konten icon + text dikunci center.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn{
    align-self:center !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    padding:
      7px 4px 4px !important;

    margin:0 !important;
  }

  /* Icon tidak membawa margin baseline bawaan. */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn i,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn .svg-inline--fa{
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    vertical-align:middle !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn span{
    margin:0 !important;
    padding:0 !important;
  }

  /* =======================================================
     ACTIVE
     Hilangkan offset -2px dari V45 agar card aktif benar-benar
     berada di tengah navbar.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    transform:none !important;
  }

  /* =======================================================
     HOVER / FOCUS
     Tetap center; depth visual cukup dari box-shadow.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:hover,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:focus-visible,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):hover,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):focus-visible{
    transform:none !important;
  }

  /* Tap tetap memberi feedback kecil ke bawah. */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:active,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:active{
    transform:
      translateY(1px)
      scale(.98) !important;
  }
}


/* =========================================================
   HP COMPACT <=380PX
   ========================================================= */
@media (max-width:380px){

  .dashboard-page
  .dashboardMobileFooterNav{
    padding:
      8px 7px 6px !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn{
    padding:
      7px 3px 4px !important;
  }
}


/* =========================================================
   BUMIL KU - BOTTOM NAV ALL WHITE MENU CARDS V63
   =========================================================
   KHUSUS HP <=740PX

   TARGET:
   - Semua menu di bottom navbar memakai card PUTIH.
   - Karakter visual mengikuti "Menu lainnya":
       surface putih
       neumorphism halus
       border teal sangat tipis
       highlight atas
       depth bawah lembut
   - ACTIVE:
       icon + text teal
       shadow sedikit lebih tegas
   - NON-ACTIVE:
       icon + text abu-abu
       card putih tetap terlihat
   - Frame besar dashboardMobileFooterNav tidak diubah.
   - Posisi center V62 tetap dipertahankan.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     SEMUA CARD MENU = PUTIH
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border:
      1px solid rgba(15,159,141,.085) !important;

    box-shadow:
      0 2px 4px rgba(30,68,76,.045),
      0 6px 12px rgba(30,68,76,.070),
      -3px -3px 7px rgba(255,255,255,.96),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -2px 4px rgba(48,91,99,.028) !important;

    transform:none !important;
    filter:none !important;
  }

  /* =======================================================
     NON-ACTIVE = WHITE + GRAY
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active){
    color:#6E8292 !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 50%,
        #f0f5f5 100%
      ) !important;

    background-color:#ffffff !important;

    border-color:
      rgba(58,105,119,.070) !important;

    box-shadow:
      0 2px 4px rgba(30,68,76,.038),
      0 5px 10px rgba(30,68,76,.060),
      -3px -3px 7px rgba(255,255,255,.94),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -2px 4px rgba(48,91,99,.022) !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) i,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) span{
    color:#6E8292 !important;
    filter:none !important;
    text-shadow:none !important;
  }

  /* =======================================================
     ACTIVE = WHITE + TEAL
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    color:#0F9F8D !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f9fcfc 45%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border:
      1px solid rgba(15,159,141,.12) !important;

    box-shadow:
      0 3px 5px rgba(30,68,76,.070),
      0 8px 15px rgba(30,68,76,.105),
      0 13px 22px rgba(15,159,141,.055),
      -4px -4px 9px rgba(255,255,255,.98),
      inset 0 1.5px 0 rgba(255,255,255,.99),
      inset 0 -3px 5px rgba(48,91,99,.038) !important;

    transform:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active::before{
    content:"" !important;

    position:absolute !important;
    z-index:0 !important;
    inset:0 !important;

    display:block !important;

    border-radius:inherit !important;

    background:
      radial-gradient(
        circle at 22% 5%,
        rgba(255,255,255,.72) 0%,
        rgba(255,255,255,.18) 25%,
        transparent 48%
      ) !important;

    opacity:.78 !important;
    pointer-events:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active::after{
    content:none !important;
    display:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active i,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active span{
    position:relative !important;
    z-index:2 !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active i{
    color:#00B9AD !important;

    filter:
      drop-shadow(
        0 2px 1px rgba(0,185,173,.13)
      ) !important;

    text-shadow:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active span{
    color:#0F8F84 !important;
    text-shadow:none !important;
  }

  /* =======================================================
     HOVER / FOCUS
     Semua tetap putih, tidak berubah hijau.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):hover,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):focus-visible{
    color:#597484 !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 48%,
        #edf3f3 100%
      ) !important;

    border-color:
      rgba(15,159,141,.10) !important;

    box-shadow:
      0 3px 5px rgba(30,68,76,.050),
      0 7px 13px rgba(30,68,76,.078),
      -3px -3px 8px rgba(255,255,255,.98),
      inset 0 1px 0 rgba(255,255,255,.99) !important;

    transform:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:hover,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:focus-visible{
    color:#0F9F8D !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f9fcfc 45%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border-color:
      rgba(15,159,141,.14) !important;

    box-shadow:
      0 3px 6px rgba(30,68,76,.075),
      0 9px 17px rgba(30,68,76,.11),
      0 15px 24px rgba(15,159,141,.060),
      -4px -4px 10px rgba(255,255,255,.99),
      inset 0 1.5px 0 rgba(255,255,255,1),
      inset 0 -3px 5px rgba(48,91,99,.038) !important;

    transform:none !important;
    filter:none !important;
  }

  /* =======================================================
     TAP
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:active,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:active{
    background:
      linear-gradient(
        145deg,
        #f5f9f9 0%,
        #ffffff 100%
      ) !important;

    background-color:#ffffff !important;

    transform:
      translateY(1px)
      scale(.98) !important;

    box-shadow:
      1px 1px 3px rgba(30,68,76,.055),
      -1px -1px 3px rgba(255,255,255,.70),
      inset 2px 2px 4px rgba(48,91,99,.055),
      inset -2px -2px 4px rgba(255,255,255,.58) !important;
  }

  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 50%,
        #0b2227 100%
      ) !important;

    background-color:#102b30 !important;

    border-color:
      rgba(255,255,255,.055) !important;

    box-shadow:
      0 3px 6px rgba(0,0,0,.18),
      0 8px 14px rgba(0,0,0,.22),
      -3px -3px 7px rgba(40,78,84,.10),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active),
  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) i,
  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) span{
    color:#9DB2BC !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active i{
    color:#53EBE8 !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active span{
    color:#86E9E4 !important;
  }
}


/* =========================================================
   V63 - COMPACT MOBILE <=380PX
   ========================================================= */
@media (max-width:380px){

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn{
    box-shadow:
      0 2px 4px rgba(30,68,76,.035),
      0 5px 9px rgba(30,68,76,.055),
      -2px -2px 6px rgba(255,255,255,.94),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    box-shadow:
      0 3px 5px rgba(30,68,76,.060),
      0 7px 13px rgba(30,68,76,.095),
      0 12px 20px rgba(15,159,141,.050),
      -3px -3px 8px rgba(255,255,255,.97),
      inset 0 1px 0 rgba(255,255,255,.99),
      inset 0 -3px 5px rgba(48,91,99,.032) !important;
  }
}


/* =========================================================
   BUMIL KU - BOTTOM NAV ACTIVE CARD ONLY V64
   =========================================================
   KOREKSI DARI V63:
   - HANYA item yang memiliki .is-active yang memakai card putih.
   - Item nonaktif kembali transparan.
   - Outer frame dashboardMobileFooterNav tetap.
   - Active state tetap mengikuti halaman:
       Dashboard -> Home
       Profil    -> Profil
       dst.
   ========================================================= */
@media (max-width:740px){

  /* =======================================================
     NON-ACTIVE = TANPA CARD
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active){
    position:relative !important;
    isolation:auto !important;
    overflow:visible !important;

    color:#6E8292 !important;

    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;

    border:1px solid transparent !important;

    box-shadow:none !important;

    transform:none !important;
    filter:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active)::before,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active)::after{
    content:none !important;
    display:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) i,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active) span{
    color:#6E8292 !important;
    filter:none !important;
    text-shadow:none !important;
  }

  /* =======================================================
     NON-ACTIVE HOVER / FOCUS
     Tetap tanpa card penuh; hanya feedback sangat ringan.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):hover,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active):focus-visible{
    color:#0F9F8D !important;

    background:rgba(255,255,255,.20) !important;
    background-color:rgba(255,255,255,.20) !important;
    background-image:none !important;

    border-color:transparent !important;
    box-shadow:none !important;

    transform:none !important;
  }

  /* =======================================================
     ACTIVE = SATU-SATUNYA CARD PUTIH
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    color:#0F9F8D !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f9fcfc 45%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border:
      1px solid rgba(15,159,141,.12) !important;

    box-shadow:
      0 3px 5px rgba(30,68,76,.070),
      0 8px 15px rgba(30,68,76,.105),
      0 13px 22px rgba(15,159,141,.055),
      -4px -4px 9px rgba(255,255,255,.98),
      inset 0 1.5px 0 rgba(255,255,255,.99),
      inset 0 -3px 5px rgba(48,91,99,.038) !important;

    transform:none !important;
    filter:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active::before{
    content:"" !important;

    position:absolute !important;
    z-index:0 !important;
    inset:0 !important;

    display:block !important;

    border-radius:inherit !important;

    background:
      radial-gradient(
        circle at 22% 5%,
        rgba(255,255,255,.72) 0%,
        rgba(255,255,255,.18) 25%,
        transparent 48%
      ) !important;

    opacity:.78 !important;
    pointer-events:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active::after{
    content:none !important;
    display:none !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active i,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active span{
    position:relative !important;
    z-index:2 !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active i{
    color:#00B9AD !important;

    filter:
      drop-shadow(
        0 2px 1px rgba(0,185,173,.13)
      ) !important;
  }

  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active span{
    color:#0F8F84 !important;
  }

  /* =======================================================
     ACTIVE HOVER
     Tetap putih, tetap center.
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:hover,
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active:focus-visible{
    color:#0F9F8D !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f9fcfc 45%,
        #edf3f3 100%
      ) !important;

    background-color:#ffffff !important;

    border-color:
      rgba(15,159,141,.14) !important;

    box-shadow:
      0 3px 6px rgba(30,68,76,.075),
      0 9px 17px rgba(30,68,76,.11),
      0 15px 24px rgba(15,159,141,.060),
      -4px -4px 10px rgba(255,255,255,.99),
      inset 0 1.5px 0 rgba(255,255,255,1),
      inset 0 -3px 5px rgba(48,91,99,.038) !important;

    transform:none !important;
  }

  /* =======================================================
     TAP
     ======================================================= */
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:active{
    transform:
      translateY(1px)
      scale(.98) !important;
  }

  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn:not(.is-active){
    color:#9DB2BC !important;

    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 50%,
        #0b2227 100%
      ) !important;

    background-color:#102b30 !important;

    border-color:
      rgba(83,235,232,.10) !important;

    box-shadow:
      0 3px 6px rgba(0,0,0,.20),
      0 9px 16px rgba(0,0,0,.26),
      -3px -3px 7px rgba(40,78,84,.10),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active i{
    color:#53EBE8 !important;
  }

  html[data-theme="dark"]
  .dashboard-page
  .dashboardMobileFooterNav
  .dashboardMobileFooterBtn.is-active span{
    color:#86E9E4 !important;
  }
}