/* =========================================================
   BUMIL KU - INDEX.CSS CONSOLIDATED SAFE CLEANUP
   =========================================================
   Tujuan:
   - Menghapus komentar histori dan deklarasi lama yang sudah
     ditimpa oleh rule final dengan selector + media yang sama.
   - Mempertahankan urutan cascade agar tampilan tetap identik.
   - Tidak mengubah HTML, JavaScript, asset, breakpoint, atau
     fungsi responsive yang sudah stabil.
   - File ini adalah hasil konsolidasi konservatif dari CSS
     produksi terbaru tanggal 12 Agustus 2026.
   ========================================================= */

:root{
  --page-bg:#f6f8fb;
  --screen:#ffffff;
  --surface:rgba(255,255,255,.92);
  --surface-strong:#ffffff;
  --ink:#17384c;
  --ink-strong:#0d3343;
  --muted:#65788a;
  --line:rgba(58,105,119,.14);
  --phone-width:540px;
  --phone-radius:68px;
  --screen-radius:56px;
  --shadow-phone:0 38px 80px rgba(10,48,61,.24),
    0 12px 28px rgba(10,48,61,.18),
    inset 0 0 0 2px rgba(255,255,255,.72);
  --shadow-soft:0 18px 40px rgba(16,70,80,.13),
    0 4px 12px rgba(16,70,80,.06),
    inset 0 1px 0 rgba(255,255,255,.92);
  --shadow-button:0 18px 34px rgba(15,159,141,.28),
    0 8px 14px rgba(14,147,130,.18),
    inset 0 1px 0 rgba(255,255,255,.30);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --page-bg:#07181c;
  --screen:#0b2024;
  --surface:rgba(16,43,48,.92);
  --surface-strong:#102b30;
  --ink:#eafcff;
  --ink-strong:#f4ffff;
  --muted:#aac8cc;
  --line:rgba(255,255,255,.10);
  --teal-soft:rgba(15,159,141,.12);
  --lime-soft:rgba(15,159,141,.08);
  --shadow-phone:0 38px 86px rgba(0,0,0,.58),
    0 12px 30px rgba(0,0,0,.40),
    inset 0 0 0 2px rgba(255,255,255,.05);
  --shadow-soft: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);
  --shadow-button:0 20px 38px rgba(0,0,0,.42),
    0 8px 18px rgba(15,159,141,.14),
    inset 0 1px 0 rgba(255,255,255,.20);
}

*{
  box-sizing:border-box;
}

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

html{
  background:var(--page-bg);
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100svh;
  width:100%;
  overflow-x:hidden;
  color:var(--ink);
  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%);
  font-family:"Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

html[data-theme="dark"] body{
  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%);
}

a{
  color:inherit;
}

button, a{
  -webkit-tap-highlight-color:transparent;
}

button{
  font:inherit;
}

.pageBackdrop{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.pageGlow{
  position:absolute;
  border-radius:999px;
  filter:blur(24px);
  opacity:.65;
}

.pageGlow--one{
  width:260px;
  height:260px;
  left:8%;
  top:8%;
  background:rgba(69,213,223,.20);
}

.pageGlow--two{
  width:320px;
  height:320px;
  right:4%;
  top:26%;
  background:rgba(202,235,75,.16);
}

.pageGlow--three{
  width:300px;
  height:300px;
  left:18%;
  bottom:2%;
  background:rgba(15,159,141,.10);
}

.appStage{
  position:relative;
  z-index:1;
  width:100%;
  min-height:100svh;
  padding:28px 18px 34px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.phoneShell{
  position:relative;
  width:min(var(--phone-width), calc(100vw - 36px));
  padding:14px;
  border-radius:var(--phone-radius);
  background:linear-gradient(145deg, #275e68 0%, #0a1d22 12%, #000b0f 44%, #193e46 86%, #4f8a94 100%);
  box-shadow:var(--shadow-phone);
  isolation:isolate;
}

.phoneShell::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:calc(var(--phone-radius) - 5px);
  border:1px solid rgba(190,245,255,.42);
  pointer-events:none;
}

.phoneShell::after{
  content:"";
  position:absolute;
  top:13px;
  left:50%;
  transform:translateX(-50%);
  width:84px;
  height:5px;
  border-radius:999px;
  background:rgba(151,210,220,.32);
  box-shadow:0 1px 1px rgba(255,255,255,.16);
  pointer-events:none;
}

.phoneSideButton{
  position:absolute;
  width:5px;
  border-radius:5px;
  background:linear-gradient(180deg, #6ca5ae, #173b42);
  box-shadow:inset 1px 0 rgba(255,255,255,.24);
  z-index:-1;
}

.phoneSideButton--leftTop{
  height:72px;
  left:-4px;
  top:170px;
}

.phoneSideButton--leftMid{
  height:118px;
  left:-4px;
  top:260px;
}

.phoneSideButton--right{
  height:150px;
  right:-4px;
  top:300px;
}

.phoneScreen{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--screen-radius);
  background:radial-gradient(circle at 96% 70%, rgba(15,159,141,.08), transparent 24%),
    radial-gradient(circle at 5% 66%, rgba(15,159,141,.08), transparent 22%),
    var(--screen);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30),
    inset 0 0 26px rgba(21,70,81,.08);
}

.statusBar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:20;
  height:48px;
  padding:9px 30px 0;
  align-items:center;
  color:#ffffff;
  pointer-events:none;
}

.statusBar::after{
  content:"";
  position:absolute;
  top:13px;
  left:50%;
  width:18px;
  height:18px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#07171c;
  box-shadow:inset 0 0 0 4px #0a252b,
    0 1px 4px rgba(0,0,0,.40);
}

.statusBar::before{
  content:"";
  position:absolute;
  top:19px;
  left:50%;
  width:5px;
  height:5px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#133f56;
  z-index:2;
}

.statusTime{
  position:relative;
  z-index:2;
  font-size:17px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
}

.statusTools{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:auto;
}

.statusTool{
  appearance:none;
  border:1px solid rgba(255,255,255,.28);
  color:#ffffff;
  background:rgba(255,255,255,.14);
  min-width:27px;
  height:27px;
  padding:0 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px rgba(255,255,255,.16);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.statusTool:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.42);
}

.statusTool:focus-visible, .primaryAction:focus-visible, .googleAction:focus-visible, .appFooter a:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

.statusTool--lang{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.statusTool--theme{
  width:27px;
  padding:0;
  font-size:11px;
}

.signalIcon{
  height:16px;
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
}

.signalIcon i{
  display:block;
  width:3px;
  border-radius:3px;
  background:#ffffff;
}

.signalIcon i:nth-child(1){
  height:5px;
  opacity:.70;
}

.signalIcon i:nth-child(2){
  height:8px;
  opacity:.80;
}

.signalIcon i:nth-child(3){
  height:12px;
  opacity:.90;
}

.signalIcon i:nth-child(4){
  height:16px;
}

.statusWifi{
  font-size:15px;
}

.batteryIcon{
  position:relative;
  width:25px;
  height:13px;
  border:2px solid rgba(255,255,255,.95);
  border-radius:4px;
  padding:2px;
}

.batteryIcon::after{
  content:"";
  position:absolute;
  top:3px;
  right:-5px;
  width:3px;
  height:5px;
  border-radius:0 2px 2px 0;
  background:rgba(255,255,255,.90);
}

.batteryIcon span{
  display:block;
  width:82%;
  height:100%;
  border-radius:1px;
  background:#ffffff;
}

.appHeader{
  position:relative;
  z-index:5;
  min-height:142px;
  padding:54px 28px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.appHeader::after{
  position:absolute;
  inset:auto 0 0;
  height:1px;
}

.brandLockup{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#ffffff;
}

.brandLogoWrap{
  width:54px;
  height:54px;
  min-width:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px rgba(255,255,255,.18);
}

.brandLogo{
  width:50px;
  height:50px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 12px rgba(0,57,62,.22));
}

.brandCopy{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.brandCopy strong{
  color:#ffffff;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.035em;
  white-space:nowrap;
}

.brandCopy small{
  margin-top:5px;
  color:rgba(255,255,255,.90);
  font-size:11px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
}

.institutionPill{
  min-width:0;
  min-height:58px;
  padding:9px 14px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 14px 30px rgba(4,81,87,.18),
    inset 0 1px rgba(255,255,255,1);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.institutionItem{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#1899a1;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

.institutionMark{
  width:24px;
  height:24px;
  border-radius:8px 12px 8px 12px;
  display:grid;
  place-items:center;
  color:#ffffff;
  background:linear-gradient(145deg, var(--teal), var(--lime));
  transform:rotate(-7deg);
}

.institutionMark i{
  transform:rotate(7deg);
  font-size:11px;
}

.institutionDivider{
  width:1px;
  height:34px;
  background:rgba(78,114,126,.22);
}

.institutionItem--rsab img{
  display:block;
  width:64px;
  height:32px;
  object-fit:contain;
}

.visualHero{
  position:relative;
  height:374px;
  overflow:hidden;
  isolation:isolate;
  background:#edf5f1;
}

.visualHeroImage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 47%;
  transform:scale(1.035);
  filter:saturate(.92) contrast(.98) brightness(1.04);
}

.visualHeroTint{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg, rgba(236,250,246,.92) 0%, rgba(236,250,246,.38) 33%, rgba(255,255,255,.03) 66%),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 52%, rgba(255,255,255,.36) 100%);
}

html[data-theme="dark"] .visualHeroImage{
  filter:saturate(.76) contrast(.94) brightness(.72);
}

html[data-theme="dark"] .visualHeroTint{
  background:linear-gradient(90deg, rgba(7,35,39,.92) 0%, rgba(7,35,39,.42) 34%, rgba(7,35,39,.05) 68%),
    linear-gradient(180deg, rgba(5,25,28,.08) 0%, transparent 50%, rgba(7,24,28,.72) 100%);
}

.benefitStack{
  position:absolute;
  z-index:3;
  top:72px;
  left:28px;
  width:198px;
  display:grid;
  gap:14px;
}

.benefitCard{
  min-height:76px;
  padding:12px 14px;
  border-radius:26px;
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 15px 30px rgba(25,84,91,.12),
    inset 0 1px rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
}

html[data-theme="dark"] .benefitCard{
  background:rgba(10,41,45,.78);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 15px 30px rgba(0,0,0,.26),
    inset 0 1px rgba(255,255,255,.05);
}

.benefitIcon{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#ffffff;
  font-size:17px;
  box-shadow:0 10px 18px rgba(15,159,141,.20),
    inset 0 1px rgba(255,255,255,.36);
}

.benefitIcon--sparkle{
  background:linear-gradient(145deg, #0f9f8d, #0f9f8d);
}

.benefitIcon--heart{
  background:linear-gradient(145deg, #0f9f8d, #0f9f8d);
}

.benefitIcon--shield{
  background:linear-gradient(145deg, #0f9f8d, #0f9f8d);
  color:#0e9382;
}

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

.benefitCopy strong{
  color:var(--ink-strong);
  font-size:12.5px;
  line-height:1.15;
  font-weight:800;
}

.benefitCopy small{
  color:var(--muted);
  font-size:10.5px;
  line-height:1.32;
  font-weight:500;
}

.visualHeroWave{
  position:absolute;
  z-index:4;
  left:-12%;
  right:-12%;
  bottom:-96px;
  height:150px;
  border-radius:50% 50% 0 0 / 62% 62% 0 0;
  background:radial-gradient(circle at 86% 8%, rgba(94,222,231,.18), transparent 22%),
    radial-gradient(circle at 18% 20%, rgba(15,159,141,.18), transparent 18%),
    var(--screen);
  transform:rotate(-2deg);
  box-shadow:0 -1px rgba(255,255,255,.62);
}

.contentPanel{
  position:relative;
  z-index:6;
  margin-top:-12px;
  padding:10px 36px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:radial-gradient(circle at 94% 8%, rgba(82,215,208,.12), transparent 22%),
    radial-gradient(circle at 3% 50%, rgba(15,159,141,.08), transparent 20%),
    var(--screen);
}

.heroBrandCard{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:2px;
}

.heroBrandLogoWrap{
  width:92px;
  height:92px;
  min-width:92px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(47,126,136,.10);
  box-shadow:var(--shadow-soft);
}

.heroBrandLogo{
  width:82px;
  height:82px;
  object-fit:contain;
  filter:drop-shadow(0 10px 14px rgba(0,129,134,.14));
}

.heroBrandCopy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

.heroBrandName{
  color:var(--teal-deep);
  font-size:42px;
  line-height:.98;
  font-weight:800;
  letter-spacing:-.050em;
}

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

.heroBrandTagline{
  margin-top:8px;
  color:var(--muted);
  font-size:15px;
  line-height:1;
  font-weight:600;
}

.heroHeadline{
  max-width:430px;
  margin:24px auto 0;
  color:var(--teal-deep);
  font-size:29px;
  line-height:1.17;
  letter-spacing:-.038em;
  font-weight:800;
}

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

.heroDescription{
  margin:16px auto 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.62;
  font-weight:500;
}

.heroActions{
  width:100%;
  max-width:430px;
  margin:24px auto 0;
  display:grid;
  gap:12px;
}

.primaryAction, .googleAction{
  position:relative;
  width:100%;
  min-height:62px;
  padding:0 18px;
  border-radius:999px;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-size:18px;
  line-height:1;
  font-weight:800;
  transition:transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.primaryAction{
  color:#ffffff;
  border:1px solid rgba(255,255,255,.16);
}

.primaryAction:hover{
  transform:translateY(-2px);
}

.primaryAction:active, .googleAction:active{
  transform:translateY(0);
}

.actionLeading, .actionTrailing, .googleTrailing{
  display:grid;
  place-items:center;
}

.actionLeading{
  font-size:24px;
}

.actionTrailing, .googleTrailing{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.52);
  background:rgba(255,255,255,.08);
  justify-self:end;
  font-size:14px;
}

.googleAction{
  color:#294052;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(65,117,130,.16);
  box-shadow:var(--shadow-soft);
}

html[data-theme="dark"] .googleAction{
  color:var(--ink);
  background:rgba(16,43,48,.94);
  border-color:rgba(255,255,255,.09);
}

.googleAction:hover{
  transform:translateY(-2px);
  border-color:rgba(15,159,141,.24);
  background:#ffffff;
  box-shadow:0 22px 42px rgba(24,77,89,.16),
    0 8px 18px rgba(15,159,141,.08),
    inset 0 1px rgba(255,255,255,1);
}

html[data-theme="dark"] .googleAction:hover{
  background:rgba(20,52,58,.98);
}

.googleIconWrap{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#ffffff;
  box-shadow:0 7px 14px rgba(27,75,85,.10),
    inset 0 1px rgba(255,255,255,1);
}

.googleIcon{
  width:23px;
  height:23px;
  display:block;
}

.googleTrailing{
  border-color:rgba(61,111,124,.22);
  color:#426577;
  background:rgba(255,255,255,.56);
}

html[data-theme="dark"] .googleTrailing{
  color:#b9d8dc;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}

.trustNote{
  margin:20px auto 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  font-weight:500;
}

.trustNote i{
  color:var(--teal-strong);
  font-size:14px;
}

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

.appFooter{
  position:relative;
  min-height:112px;
  padding:20px 32px 22px;
  display:grid;
  grid-template-columns:52px 1fr 52px;
  align-items:center;
  gap:14px;
  background:radial-gradient(circle at 0% 100%, rgba(15,159,141,.16), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(15,159,141,.13), transparent 32%),
    linear-gradient(180deg, rgba(245,252,253,.94), rgba(236,249,251,.96));
  border-top:1px solid rgba(15,159,141,.14);
  box-shadow:inset 0 1px rgba(255,255,255,.86),
    0 -12px 30px rgba(22,75,84,.05);
}

html[data-theme="dark"] .appFooter{
  background:radial-gradient(circle at 0% 100%, rgba(15,159,141,.10), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(15,159,141,.07), transparent 32%),
    linear-gradient(180deg, rgba(13,39,44,.98), rgba(10,31,35,.98));
  border-top-color:rgba(15,159,141,.14);
}

.footerSecurityIcon{
  width:48px;
  height:48px;
  border-radius:17px;
  display:grid;
  place-items:center;
  font-size:19px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(61,123,135,.13);
  box-shadow:0 10px 20px rgba(20,80,90,.08),
    inset 0 1px rgba(255,255,255,.90);
}

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

.footerSecurityIcon--lock{
  color:#91aeb9;
}

.footerSecurityIcon--shield{
  color:#ffffff;
}

.footerCenter{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}

.footerLinks{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  color:var(--teal-deep);
  font-size:12px;
  line-height:1.3;
  font-weight:700;
}

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

.footerLinks a{
  text-decoration:none;
}

.footerLinks a:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

.footerLinks span{
  color:rgba(65,101,112,.45);
}

.footerCopyright{
  color:var(--muted);
  font-size:10px;
  line-height:1.3;
  font-weight:500;
}

@media (max-width:620px){
  :root{
    --phone-radius:0px;
    --screen-radius:0px;
  }

  body{
    background:var(--screen);
  }

  html[data-theme="dark"] body{
    background:var(--screen);
  }

  .pageBackdrop{
    display:none;
  }

  .appStage{
    min-height:100svh;
    padding:0;
    display:block;
  }

  .phoneShell{
    width:100%;
    min-height:100svh;
    padding:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .phoneShell::before, .phoneShell::after, .phoneSideButton{
    display:none;
  }

  .phoneScreen{
    min-height:100svh;
    border-radius:0;
    box-shadow:none;
  }

  .statusBar{
    position:absolute;
  }

  .brandLogoWrap{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:16px;
  }

  .brandLogo{
    width:45px;
    height:45px;
  }

  .brandCopy strong{
    font-size:21px;
  }

  .brandCopy small{
    font-size:9.5px;
  }

  .institutionPill{
    min-height:52px;
    padding:8px 10px;
    gap:8px;
    border-radius:19px;
  }

  .institutionItem{
    gap:5px;
    font-size:8.5px;
  }

  .institutionMark{
    width:21px;
    height:21px;
  }

  .institutionDivider{
    height:30px;
  }

  .institutionItem--rsab img{
    width:54px;
    height:28px;
  }

  .visualHero{
    height:350px;
  }

  .benefitStack{
    left:18px;
  }

  .contentPanel{
    padding:8px 24px 26px;
  }

  .heroBrandLogoWrap{
    width:78px;
    height:78px;
    min-width:78px;
    border-radius:22px;
  }

  .heroBrandLogo{
    width:68px;
    height:68px;
  }

  .heroHeadline{
    margin-top:22px;
    font-size:26px;
  }

  .heroDescription{
    margin-top:14px;
    font-size:14px;
  }

  .appFooter{
    min-height:108px;
    padding:18px
      18px
      calc(18px + env(safe-area-inset-bottom));
    grid-template-columns:46px 1fr 46px;
    gap:10px;
  }

  .footerSecurityIcon{
    width:44px;
    height:44px;
    border-radius:15px;
    font-size:17px;
  }

  .footerLinks{
    gap:8px;
    font-size:11px;
  }

  .footerCopyright{
    font-size:9px;
  }
}

@media (max-width:420px){
  .statusWifi{
    font-size:14px;
  }

  .batteryIcon{
    width:23px;
  }

  .brandLogoWrap{
    width:44px;
    height:44px;
    min-width:44px;
  }

  .brandLogo{
    width:42px;
    height:42px;
  }

  .brandCopy strong{
    font-size:19px;
  }

  .brandCopy small{
    font-size:8.5px;
  }

  .institutionPill{
    padding:7px 8px;
    gap:6px;
  }

  .institutionItem--kemenkes span:last-child{
    display:none;
  }

  .institutionItem--rsab img{
    width:49px;
  }

  .visualHero{
    height:328px;
  }

  .visualHeroImage{
    object-position:58% 48%;
  }

  .benefitStack{
    left:12px;
  }

  .contentPanel{
    padding-left:18px;
    padding-right:18px;
  }

  .heroBrandLogoWrap{
    width:70px;
    height:70px;
    min-width:70px;
  }

  .heroBrandLogo{
    width:62px;
    height:62px;
  }

  .heroHeadline{
    font-size:23px;
  }

  .heroDescription{
    font-size:13.2px;
  }

  .appFooter{
    grid-template-columns:40px 1fr 40px;
    padding-left:14px;
    padding-right:14px;
  }

  .footerSecurityIcon{
    width:39px;
    height:39px;
    border-radius:14px;
  }

  .footerLinks{
    font-size:10.2px;
  }
}

@media (max-width:350px){
  .brandCopy small{
    display:none;
  }

  .institutionPill{
    min-width:74px;
  }

  .institutionDivider{
    display:none;
  }

  .institutionItem--kemenkes{
    display:none;
  }

  .visualHero{
    height:312px;
  }

  .benefitCopy small{
    display:none;
  }

  .heroHeadline{
    font-size:21px;
  }

  .heroDescription{
    font-size:12.5px;
  }

  .footerLinks span{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

.desktopNav,
.desktopEyebrow,
.desktopHeroInstitution,
.desktopFooterBrand{
  display:none;
}

@media (min-width:621px) and (max-width:979px){
  :root{
    --phone-width:820px;
    --phone-radius:38px;
    --screen-radius:30px;
  }

  .appStage{
    padding:24px 18px 32px;
  }

  .phoneShell{
    width:min(820px, calc(100vw - 36px));
    padding:9px;
    border-radius:38px;
  }

  .phoneShell::before{
    inset:4px;
    border-radius:34px;
  }

  .phoneShell::after, .phoneSideButton{
    display:none;
  }

  .phoneScreen{
    border-radius:30px;
  }

  .brandLogoWrap{
    width:58px;
    height:58px;
    min-width:58px;
  }

  .brandLogo{
    width:54px;
    height:54px;
  }

  .brandCopy strong{
    font-size:27px;
  }

  .institutionPill{
    min-height:62px;
    padding:10px 18px;
  }

  .visualHero{
    height:430px;
  }

  .visualHeroImage{
    object-position:center 43%;
  }

  .benefitStack{
    left:36px;
    width:230px;
    gap:16px;
  }

  .benefitCard{
    min-height:82px;
  }

  .contentPanel{
    padding:22px 72px 38px;
  }

  .heroBrandLogoWrap{
    width:100px;
    height:100px;
    min-width:100px;
  }

  .heroBrandLogo{
    width:88px;
    height:88px;
  }

  .heroBrandName{
    font-size:48px;
  }

  .heroHeadline{
    max-width:560px;
    font-size:34px;
  }

  .heroDescription{
    font-size:16px;
  }

  .heroActions{
    max-width:540px;
  }

  .appFooter{
    padding-left:52px;
    padding-right:52px;
  }
}

@media (min-width:980px){
  body{
    overflow-x:hidden;
  }

  .pageGlow--one{
    width:420px;
    height:420px;
    left:-70px;
    top:-80px;
  }

  .pageGlow--two{
    width:520px;
    height:520px;
    right:-100px;
    top:80px;
  }

  .pageGlow--three{
    width:460px;
    height:460px;
    left:28%;
    bottom:-160px;
  }

  html[data-theme="dark"] .phoneShell{
    box-shadow:0 36px 96px rgba(0,0,0,.52),
      0 12px 32px rgba(0,0,0,.34);
  }

  .statusBar{
    position:absolute;
    left:auto;
    width:auto;
    padding:0;
    z-index:30;
    pointer-events:none;
  }

  .statusBar::before, .statusBar::after, .statusTime, .signalIcon, .statusWifi, .batteryIcon{
    display:none;
  }

  .statusTools{
    pointer-events:auto;
  }

  .statusTool{
    border-color:rgba(255,255,255,.34);
    background:rgba(255,255,255,.16);
    box-shadow:0 8px 18px rgba(0,68,73,.12),
      inset 0 1px rgba(255,255,255,.18);
  }

  .statusTool--lang{
    font-size:11px;
  }

  .institutionPill{
    position:relative;
    z-index:2;
    flex:0 0 auto;
  }

  .benefitStack{
    top:auto;
    width:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .benefitCard{
    min-width:0;
  }

  .visualHeroWave{
    display:none;
  }

  .contentPanel{
    min-width:0;
  }

  .desktopEyebrow{
    border-radius:999px;
    display:inline-flex;
    align-items:center;
  }

  html[data-theme="dark"] .desktopEyebrow{
    color:#53ebe8;
    background:rgba(15,159,141,.10);
    border-color:rgba(15,159,141,.16);
  }

  .desktopEyebrowDot{
    border-radius:50%;
  }
}

@media (min-width:1280px){
  .phoneScreen{
    grid-template-rows:auto minmax(680px,1fr) auto;
  }

  .visualHero{
    min-height:680px;
  }

  .contentPanel{
    padding-left:clamp(60px,4.8vw,86px);
    padding-right:clamp(60px,4.8vw,86px);
  }

  .benefitStack{
    right:46px;
    bottom:44px;
    left:46px;
    gap:16px;
  }
}

@media (min-width:980px) and (max-height:820px){
  .appStage{
    padding-top:18px;
    padding-bottom:18px;
  }

  .visualHero{
    min-height:570px;
  }

  .benefitStack{
    bottom:28px;
  }

  .benefitCard{
    min-height:78px;
    padding-top:12px;
    padding-bottom:12px;
  }
}

@media (min-width:1600px){
  .phoneScreen{
    grid-template-columns:minmax(0,1.16fr) minmax(520px,.84fr);
  }
}

@media (min-width:980px){
  :root{
    --desktop-max:1180px !important;
  }

  .appStage{
    align-items:center !important;
  }

  .institutionPill{
    min-height:48px !important;
    padding:7px 10px !important;
    gap:8px !important;
    border-radius:17px !important;
  }

  .institutionItem{
    gap:5px !important;
    font-size:8px !important;
  }

  .institutionMark{
    width:20px !important;
    height:20px !important;
    font-size:9px !important;
  }

  .institutionDivider{
    height:26px !important;
  }

  .institutionItem--rsab img{
    width:52px !important;
    height:25px !important;
  }

  .statusBar{
    top:19px !important;
    right:20px !important;
    height:34px !important;
  }

  .statusTools{
    gap:6px !important;
  }

  .statusTool{
    min-width:34px !important;
    height:34px !important;
    padding:0 10px !important;
  }

  .statusTool--theme{
    width:34px !important;
    padding:0 !important;
  }

  .benefitStack{
    right:24px !important;
    left:24px !important;
    gap:10px !important;
  }

  .benefitCard{
    min-height:68px !important;
    padding:10px 11px !important;
    border-radius:18px !important;
    gap:9px !important;
  }

  .benefitIcon{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    border-radius:12px !important;
    font-size:13px !important;
  }

  .benefitCopy{
    gap:2px !important;
  }

  .benefitCopy strong{
    font-size:11px !important;
  }

  .benefitCopy small{
    font-size:8.7px !important;
    line-height:1.22 !important;
  }

  .desktopEyebrow{
    margin-bottom:13px !important;
  }

  .heroHeadline{
    margin-top:22px !important;
  }

  .heroDescription{
    margin-top:15px !important;
  }

  .heroActions{
    margin-top:20px !important;
  }

  .trustNote{
    margin-top:13px !important;
  }
}

@media (min-width:980px) and (max-height:760px){
  .appStage{
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  .benefitCard{
    min-height:60px !important;
  }
}

@media (min-width:1600px){
  .phoneShell{
    width:min(1180px, calc(100vw - 120px)) !important;
    max-width:1180px !important;
  }
}

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

.statusBar{
  justify-content:flex-end !important;
}

.statusTools{
  margin-left:auto !important;
}

.statusTime, .signalIcon, .statusWifi, .batteryIcon{
  display:none !important;
}

@media (max-width:620px){
  .statusBar{
    height:44px !important;
    padding:max(8px, env(safe-area-inset-top))
      18px
      0 !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
  }

  .statusTools{
    margin-left:auto !important;
    gap:8px !important;
  }

  .statusTool{
    min-width:30px !important;
    height:30px !important;
    padding:0 9px !important;
  }

  .statusTool--theme{
    width:30px !important;
    padding:0 !important;
  }

  .appHeader{
    padding-top:calc(max(44px, env(safe-area-inset-top) + 34px)) !important;
  }
}

@media (max-width:420px){
  .statusBar{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .statusTools{
    gap:7px !important;
  }

  .statusTool{
    min-width:28px !important;
    height:28px !important;
    padding:0 8px !important;
  }

  .statusTool--theme{
    width:28px !important;
    padding:0 !important;
  }
}

.statusBar{
  display:none !important;
}

.displayControlsBar{
  position:relative;
  z-index:12;
  width:100%;
  min-height:42px;
  padding:6px 18px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  background:linear-gradient(
      180deg,
      rgba(255,255,255,.92),
      rgba(238,251,250,.96)
    );
  border-bottom:1px solid rgba(15,159,141,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94),
    0 7px 18px rgba(13,72,80,.055);
}

html[data-theme="dark"] .displayControlsBar{
  background:linear-gradient(
      180deg,
      rgba(16,43,48,.98),
      rgba(10,31,35,.98)
    );
  border-bottom-color:rgba(15,159,141,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 20px rgba(0,0,0,.18);
}

.displayControlsInner{
  display:inline-flex;
  align-items:center;
}

.displayControlsBar .statusTool{
  min-width:31px;
  height:31px;
  padding:0 10px;
}

.displayControlsBar .statusTool--lang{
  font-size:10px;
  font-weight:800;
}

.displayControlsBar .statusTool--theme{
  width:31px;
  padding:0;
}

@media (max-width:620px){
  .displayControlsBar .statusTool{
    min-width:29px !important;
    height:29px !important;
    padding:0 8px !important;
  }

  .displayControlsBar .statusTool--theme{
    width:29px !important;
    padding:0 !important;
  }
}

@media (max-width:420px){
  .displayControlsBar{
    min-height:38px;
    padding-left:14px;
    padding-right:14px;
  }

  .displayControlsBar .statusTool{
    min-width:27px !important;
    height:27px !important;
  }

  .displayControlsBar .statusTool--theme{
    width:27px !important;
  }
}

@media (min-width:621px) and (max-width:979px){
  .appHeader{
    min-height:92px !important;
    padding:16px 28px !important;
  }
}

@media (min-width:980px){
  .displayControlsBar{
    grid-column:1 / -1;
    grid-row:2;
    min-height:36px;
    height:36px;
    padding:3px 16px;
  }
}

@media (min-width:980px) and (max-height:760px){
  .displayControlsBar{
    min-height:34px;
    height:34px;
    padding-top:3px;
    padding-bottom:3px;
  }
}

.displayControlsBar, html[data-theme="dark"] .displayControlsBar{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.displayControlsInner{
  position:relative;
  z-index:2;
  pointer-events:auto;
}

.displayControlsBar .statusTool{
  color:var(--teal-deep) !important;
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(255,255,255,.62) !important;
  box-shadow:0 8px 18px rgba(13,72,80,.12),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter:blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08) !important;
}

.displayControlsBar .statusTool:hover{
  color:#0e9382 !important;
  background:rgba(255,255,255,.88) !important;
  border-color:rgba(255,255,255,.82) !important;
}

html[data-theme="dark"] .displayControlsBar .statusTool{
  color:#53ebe8 !important;
  background:rgba(7,24,28,.62) !important;
  border-color:rgba(255,255,255,.15) !important;
  box-shadow:0 9px 20px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .displayControlsBar .statusTool:hover{
  color:#0f9f8d !important;
  background:rgba(11,36,41,.78) !important;
  border-color:rgba(15,159,141,.26) !important;
}

@media (max-width:620px){
  .phoneScreen{
    position:relative !important;
  }

  .displayControlsBar{
    position:absolute !important;
    right:0 !important;
    left:0 !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    padding:8px 14px 0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    pointer-events:none !important;
    z-index:20 !important;
  }
}

@media (max-width:420px){
  .displayControlsBar{
    padding:8px 12px 0 !important;
  }
}

@media (min-width:621px) and (max-width:979px){
  .phoneScreen{
    position:relative !important;
  }

  .displayControlsBar{
    position:absolute !important;
    top:92px !important;
    right:0 !important;
    left:0 !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    padding:10px 24px 0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    pointer-events:none !important;
    z-index:20 !important;
  }

  .displayControlsInner{
    pointer-events:auto !important;
  }
}

@media (min-width:980px){
  .displayControlsBar .statusTool{
    min-width:28px !important;
    height:28px !important;
    padding:0 8px !important;
    color:var(--teal-deep) !important;
    background:rgba(255,255,255,.70) !important;
    border:1px solid rgba(255,255,255,.62) !important;
    box-shadow:0 8px 18px rgba(13,72,80,.12),
      inset 0 1px 0 rgba(255,255,255,.88) !important;
    backdrop-filter:blur(12px) saturate(1.08) !important;
    -webkit-backdrop-filter:blur(12px) saturate(1.08) !important;
  }

  .displayControlsBar .statusTool--theme{
    width:28px !important;
    padding:0 !important;
  }

  html[data-theme="dark"] .displayControlsBar .statusTool{
    color:#53ebe8 !important;
    background:rgba(7,24,28,.62) !important;
    border-color:rgba(255,255,255,.15) !important;
    box-shadow:0 9px 20px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
}

@media (min-width:980px) and (max-height:760px){
  .displayControlsBar .statusTool{
    min-width:27px !important;
    height:27px !important;
  }

  .displayControlsBar .statusTool--theme{
    width:27px !important;
  }
}

@media (min-width:980px) and (max-height:760px){
  .displayControlsBar, html[data-theme="dark"] .displayControlsBar{
    padding-top:3px !important;
  }
}

@media (min-width:980px){
  .displayControlsBar, html[data-theme="dark"] .displayControlsBar{
    grid-row:auto !important;
    grid-column:auto !important;
    place-self:auto !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    background-image:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:none !important;
  }

  .displayControlsInner{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
  }
}

@media (min-width:980px) and (max-height:760px){
  .displayControlsBar, html[data-theme="dark"] .displayControlsBar{
    grid-area:auto !important;
    grid-row:auto !important;
    grid-column:auto !important;
    right:12px !important;
    bottom:auto !important;
    left:auto !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }
}

@media (max-width:620px){
  .benefitCard{
    width:100% !important;
    min-width:0 !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
}

@media (max-width:420px){
  .benefitCard{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

@media (max-width:620px){
  .heroActions{
    margin-top:18px !important;
    gap:9px !important;
  }

  .primaryAction, .googleAction{
    min-height:48px !important;
    padding:0 12px !important;
    grid-template-columns:32px 1fr 32px !important;
    gap:6px !important;
    font-size:14px !important;
  }

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

  .actionTrailing, .googleTrailing{
    width:29px !important;
    height:29px !important;
    font-size:10px !important;
  }

  .googleIconWrap{
    width:28px !important;
    height:28px !important;
  }

  .googleIcon{
    width:18px !important;
    height:18px !important;
  }
}

@media (max-width:420px){
  .heroActions{
    margin-top:16px !important;
    gap:8px !important;
  }

  .primaryAction, .googleAction{
    min-height:46px !important;
    padding:0 10px !important;
    grid-template-columns:30px 1fr 30px !important;
    gap:5px !important;
    font-size:13px !important;
  }

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

  .actionTrailing, .googleTrailing{
    width:27px !important;
    height:27px !important;
    font-size:9px !important;
  }

  .googleIconWrap{
    width:26px !important;
    height:26px !important;
  }

  .googleIcon{
    width:17px !important;
    height:17px !important;
  }
}

@media (max-width:620px){
  .heroActions{
    width:calc(100% - 24px) !important;
    max-width:360px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:420px){
  .heroActions{
    width:calc(100% - 20px) !important;
    max-width:320px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:620px){
  .appHeader{
    min-height:72px !important;
    height:auto !important;
    padding:max(6px, env(safe-area-inset-top))
      18px
      6px !important;
  }

  .displayControlsBar{
    top:72px !important;
  }
}

@media (max-width:420px){
  .appHeader{
    min-height:68px !important;
    height:auto !important;
    padding:max(4px, env(safe-area-inset-top))
      14px
      4px !important;
  }

  .displayControlsBar{
    top:68px !important;
  }
}

@media (max-width:620px){
  .heroActions{
    position:relative !important;
    top:-30px !important;
  }
}

@media (max-width:620px){
  .appFooter{
    margin-top:-20px !important;
  }
}

@media (max-width:620px){
  .visualHeroWave::after{
    top:1px !important;
    left:11% !important;
    right:9% !important;
    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(15,159,141,.12) 22%,
        rgba(255,255,255,.88) 50%,
        rgba(15,159,141,.14) 78%,
        transparent 100%
      ) !important;
  }
}

@media (max-width:620px){
  html[data-theme="dark"] .visualHeroWave{
    box-shadow:0 -1px 0 rgba(255,255,255,.055),
      0 -12px 28px rgba(0,0,0,.18) !important;
  }

  html[data-theme="dark"] .visualHeroWave::after{
    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(15,159,141,.10) 24%,
        rgba(255,255,255,.12) 50%,
        rgba(15,159,141,.08) 76%,
        transparent 100%
      ) !important;
  }
}

@media (max-width:620px){
  .visualHeroWave{
    transform-origin:center bottom !important;
  }

  .visualHeroWave::before{
    border-radius:0 !important;
  }
}

@media (max-width:620px){
  html[data-theme="dark"] .visualHeroWave{
    filter:drop-shadow(0 -4px 10px rgba(0,0,0,.12))
      drop-shadow(0 -9px 20px rgba(0,0,0,.10)) !important;
  }
}

@media (max-width:620px){
  .visualHeroWave::after{
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }
}

@media (max-width:620px){
  html[data-theme="dark"] .visualHeroWave::after{
    filter:none !important;
  }
}

@media (max-width:620px){
  .visualHero::after{
    content:"" !important;
    position:absolute !important;
    z-index:2 !important;
    left:-1.5% !important;
    right:-1.5% !important;
    bottom:8px !important;
    height:154px !important;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20viewBox%3D%220%200%201000%20154%22%0A%20%20%20%20%20preserveAspectRatio%3D%22none%22%0A%20%20%20%20%20shape-rendering%3D%22geometricPrecision%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%0A%20%20%20%20%20%20id%3D%22waveShadowGradient%22%0A%20%20%20%20%20%20x1%3D%220%25%22%0A%20%20%20%20%20%20y1%3D%220%25%22%0A%20%20%20%20%20%20x2%3D%22100%25%22%0A%20%20%20%20%20%20y2%3D%220%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23e5edaa%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%2234%25%22%20stop-color%3D%22%23dceabd%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%2268%25%22%20stop-color%3D%22%23bce8df%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%239edfec%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%0A%20%20%20%20%3Cfilter%0A%20%20%20%20%20%20id%3D%22waveShadowBlur%22%0A%20%20%20%20%20%20x%3D%22-12%25%22%0A%20%20%20%20%20%20y%3D%22-90%25%22%0A%20%20%20%20%20%20width%3D%22124%25%22%0A%20%20%20%20%20%20height%3D%22280%25%22%3E%0A%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%228%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%0A%20%20%20%20%3Cfilter%0A%20%20%20%20%20%20id%3D%22waveShadowBlurSmall%22%0A%20%20%20%20%20%20x%3D%22-10%25%22%0A%20%20%20%20%20%20y%3D%22-70%25%22%0A%20%20%20%20%20%20width%3D%22120%25%22%0A%20%20%20%20%20%20height%3D%22240%25%22%3E%0A%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%224.2%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%0A%20%20%3Cpath%0A%20%20%20%20d%3D%22M-30%2080%20C70%2078%20145%2076%20220%2080%20C330%2088%20430%2096%20560%2096%20C730%2096%20890%2064%201030%2016%22%0A%20%20%20%20transform%3D%22translate%280%20-5%29%22%0A%20%20%20%20fill%3D%22none%22%0A%20%20%20%20stroke%3D%22url%28%23waveShadowGradient%29%22%0A%20%20%20%20stroke-opacity%3D%220.24%22%0A%20%20%20%20stroke-width%3D%2222%22%0A%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%20%20filter%3D%22url%28%23waveShadowBlur%29%22%0A%20%20%2F%3E%0A%0A%20%20%3Cpath%0A%20%20%20%20d%3D%22M-30%2080%20C70%2078%20145%2076%20220%2080%20C330%2088%20430%2096%20560%2096%20C730%2096%20890%2064%201030%2016%22%0A%20%20%20%20transform%3D%22translate%280%20-3%29%22%0A%20%20%20%20fill%3D%22none%22%0A%20%20%20%20stroke%3D%22url%28%23waveShadowGradient%29%22%0A%20%20%20%20stroke-opacity%3D%220.24%22%0A%20%20%20%20stroke-width%3D%2210%22%0A%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%20%20filter%3D%22url%28%23waveShadowBlurSmall%29%22%0A%20%20%2F%3E%0A%3C%2Fsvg%3E") !important;
    background-position:center !important;
    background-size:100% 100% !important;
    background-repeat:no-repeat !important;
    pointer-events:none !important;
  }
}

@media (max-width:620px){
  html[data-theme="dark"] .contentPanel{
    border-top:0 !important;
    box-shadow:none !important;
  }
}

@media (max-width:620px){
  .contentPanel::before{
    position:absolute !important;
    z-index:0 !important;
    top:-94px !important;
    left:-5% !important;
    right:-5% !important;
    height:226px !important;
    pointer-events:none !important;
  }
}

@media (max-width:620px){
  html[data-theme="dark"] .contentPanel::before{
    background:radial-gradient(
        ellipse at 14% 40%,
        rgba(226,235,159,.012) 0%,
        transparent 76%
      ),
      radial-gradient(
        ellipse at 87% 39%,
        rgba(150,221,234,.016) 0%,
        transparent 78%
      ),
      linear-gradient(
        180deg,
        rgba(11,32,36,0) 0%,
        rgba(11,32,36,.16) 14%,
        rgba(11,32,36,.58) 32%,
        rgba(11,32,36,.90) 50%,
        rgba(11,32,36,.97) 64%,
        rgba(11,32,36,.72) 80%,
        rgba(11,32,36,.26) 92%,
        rgba(11,32,36,0) 100%
      ) !important;
  }
}

@media (max-width:620px){
  .visualHero::after{
    opacity:.14 !important;
  }

  .visualHeroWave{
    left:-1.5% !important;
    right:-1.5% !important;
    bottom:-88px !important;
    height:250px !important;
    border-radius:0 !important;
    transform:none !important;
    box-shadow:none !important;
    filter:none !important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20viewBox%3D%220%200%201000%20250%22%0A%20%20%20%20%20preserveAspectRatio%3D%22none%22%0A%20%20%20%20%20shape-rendering%3D%22geometricPrecision%22%3E%0A%20%20%3Cpath%0A%20%20%20%20d%3D%22M-30%2082%20C108%2075%20220%2073%20320%2084%20C405%2092%20475%2096%20560%2096%20C730%2096%20890%2064%201030%2016%20L1030%20250%20L-30%20250%20Z%22%0A%20%20%20%20fill%3D%22white%22%0A%20%20%2F%3E%0A%3C%2Fsvg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20viewBox%3D%220%200%201000%20250%22%0A%20%20%20%20%20preserveAspectRatio%3D%22none%22%0A%20%20%20%20%20shape-rendering%3D%22geometricPrecision%22%3E%0A%20%20%3Cpath%0A%20%20%20%20d%3D%22M-30%2082%20C108%2075%20220%2073%20320%2084%20C405%2092%20475%2096%20560%2096%20C730%2096%20890%2064%201030%2016%20L1030%20250%20L-30%20250%20Z%22%0A%20%20%20%20fill%3D%22white%22%0A%20%20%2F%3E%0A%3C%2Fsvg%3E") !important;
    -webkit-mask-position:center !important;
    mask-position:center !important;
    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
    background:radial-gradient(
        ellipse at 14% 43%,
        rgba(226,235,159,.105) 0%,
        rgba(226,235,159,.044) 28%,
        rgba(226,235,159,.012) 52%,
        transparent 76%
      ),
      radial-gradient(
        ellipse at 88% 40%,
        rgba(150,221,234,.112) 0%,
        rgba(150,221,234,.048) 30%,
        rgba(150,221,234,.013) 54%,
        transparent 78%
      ),
      linear-gradient(
        180deg,
        rgba(249,254,252,.995) 0%,
        rgba(252,255,254,.995) 38%,
        rgba(255,255,255,.998) 68%,
        var(--screen) 100%
      ) !important;
    overflow:hidden !important;
    isolation:isolate !important;
    pointer-events:none !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  .visualHeroWave::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    background:linear-gradient(
        112deg,
        rgba(255,255,255,.16) 0%,
        rgba(255,255,255,.045) 40%,
        transparent 70%
      ),
      linear-gradient(
        90deg,
        rgba(226,235,159,.025) 0%,
        transparent 48%,
        rgba(150,221,234,.028) 100%
      ) !important;
    opacity:1 !important;
    filter:none !important;
    pointer-events:none !important;
  }

  .visualHeroWave::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    width:100% !important;
    height:100% !important;
    border-radius:0 !important;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20viewBox%3D%220%200%201000%20250%22%0A%20%20%20%20%20preserveAspectRatio%3D%22none%22%0A%20%20%20%20%20shape-rendering%3D%22geometricPrecision%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%0A%20%20%20%20%20%20id%3D%22waveLineGradient%22%0A%20%20%20%20%20%20x1%3D%220%25%22%0A%20%20%20%20%20%20y1%3D%220%25%22%0A%20%20%20%20%20%20x2%3D%22100%25%22%0A%20%20%20%20%20%20y2%3D%220%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23e2eb9f%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%2232%25%22%20stop-color%3D%22%23dce9b9%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%2266%25%22%20stop-color%3D%22%23b8e7df%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2396ddea%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%0A%20%20%20%20%3Cfilter%0A%20%20%20%20%20%20id%3D%22waveLineSoftBlur%22%0A%20%20%20%20%20%20x%3D%22-8%25%22%0A%20%20%20%20%20%20y%3D%22-65%25%22%0A%20%20%20%20%20%20width%3D%22116%25%22%0A%20%20%20%20%20%20height%3D%22230%25%22%3E%0A%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%221.25%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%0A%20%20%3Cpath%0A%20%20%20%20d%3D%22M-30%2082%20C108%2075%20220%2073%20320%2084%20C405%2092%20475%2096%20560%2096%20C730%2096%20890%2064%201030%2016%22%0A%20%20%20%20fill%3D%22none%22%0A%20%20%20%20stroke%3D%22url%28%23waveLineGradient%29%22%0A%20%20%20%20stroke-opacity%3D%220.10%22%0A%20%20%20%20stroke-width%3D%225.4%22%0A%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%20%20filter%3D%22url%28%23waveLineSoftBlur%29%22%0A%20%20%2F%3E%0A%0A%20%20%3Cpath%0A%20%20%20%20d%3D%22M-30%2082%20C108%2075%20220%2073%20320%2084%20C405%2092%20475%2096%20560%2096%20C730%2096%20890%2064%201030%2016%22%0A%20%20%20%20fill%3D%22none%22%0A%20%20%20%20stroke%3D%22white%22%0A%20%20%20%20stroke-opacity%3D%220.22%22%0A%20%20%20%20stroke-width%3D%223.2%22%0A%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%2F%3E%0A%0A%20%20%3Cpath%0A%20%20%20%20d%3D%22M-30%2082%20C108%2075%20220%2073%20320%2084%20C405%2092%20475%2096%20560%2096%20C730%2096%20890%2064%201030%2016%22%0A%20%20%20%20fill%3D%22none%22%0A%20%20%20%20stroke%3D%22url%28%23waveLineGradient%29%22%0A%20%20%20%20stroke-opacity%3D%220.80%22%0A%20%20%20%20stroke-width%3D%221.9%22%0A%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%2F%3E%0A%3C%2Fsvg%3E") !important;
    background-position:center !important;
    background-size:100% 100% !important;
    background-repeat:no-repeat !important;
    opacity:1 !important;
    filter:none !important;
    pointer-events:none !important;
  }

  .contentPanel{
    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;
    margin-top:-58px !important;
    border-top:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:radial-gradient(
        ellipse at 14% -8%,
        rgba(226,235,159,.030) 0%,
        rgba(226,235,159,.010) 34%,
        transparent 70%
      ),
      radial-gradient(
        ellipse at 88% -9%,
        rgba(150,221,234,.034) 0%,
        rgba(150,221,234,.011) 36%,
        transparent 72%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,0) 0px,
        rgba(255,255,255,.08) 24px,
        rgba(255,255,255,.34) 52px,
        rgba(255,255,255,.72) 84px,
        rgba(255,255,255,.94) 118px,
        rgba(255,255,255,.995) 154px,
        var(--screen) 210px
      ) !important;
  }

  .contentPanel::before{
    content:none !important;
    display:none !important;
    background:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    filter:none !important;
  }

  .contentPanel > *{
    position:relative !important;
    z-index:1 !important;
  }
}

@media (max-width:620px){
  html[data-theme="dark"] .visualHero::after{
    opacity:.07 !important;
  }

  html[data-theme="dark"] .visualHeroWave{
    background:radial-gradient(
        ellipse at 14% 43%,
        rgba(226,235,159,.020) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse at 88% 40%,
        rgba(150,221,234,.027) 0%,
        transparent 72%
      ),
      linear-gradient(
        180deg,
        rgba(14,40,44,.995) 0%,
        rgba(12,35,40,.995) 48%,
        var(--screen) 100%
      ) !important;
  }

  html[data-theme="dark"] .visualHeroWave::before{
    background:linear-gradient(
        112deg,
        rgba(255,255,255,.015) 0%,
        transparent 70%
      ) !important;
  }

  html[data-theme="dark"] .visualHeroWave::after{
    opacity:.62 !important;
  }

  html[data-theme="dark"] .contentPanel{
    background:radial-gradient(
        ellipse at 14% -8%,
        rgba(226,235,159,.009) 0%,
        transparent 68%
      ),
      radial-gradient(
        ellipse at 88% -9%,
        rgba(150,221,234,.012) 0%,
        transparent 70%
      ),
      linear-gradient(
        180deg,
        rgba(11,32,36,0) 0px,
        rgba(11,32,36,.10) 28px,
        rgba(11,32,36,.40) 62px,
        rgba(11,32,36,.76) 96px,
        rgba(11,32,36,.94) 132px,
        var(--screen) 210px
      ) !important;
  }
}

@media (max-width:620px){
  .heroBrandCard{
    position:relative !important;
    top:-4px !important;
  }

  .heroHeadline{
    position:relative !important;
    top:-17px !important;
  }

  .heroDescription{
    position:relative !important;
    top:-27px !important;
  }
}

.brandLogoWrap, html[data-theme="dark"] .brandLogoWrap{
  background:#ffffff !important;
  border-radius:13px !important;
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:0 8px 18px rgba(0,80,86,.14),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

.institutionPill, html[data-theme="dark"] .institutionPill{
  min-width:0 !important;
  min-height:52px !important;
  padding:6px 10px !important;
  gap:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 1 auto;
  overflow:hidden;
  border-radius:18px !important;
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:0 14px 30px rgba(4,81,87,.18),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.institutionCombinedLogo{
  display:block;
  width:auto !important;
  height:32px !important;
  max-width:128px !important;
  object-fit:contain;
  object-position:center;
  flex:0 1 auto;
}

@media (max-width:620px){
  .institutionPill, html[data-theme="dark"] .institutionPill{
    min-width:0 !important;
    min-height:35px !important;
    padding:3px 7px !important;
    gap:0 !important;
    border-radius:18px !important;
  }

  .institutionCombinedLogo{
    display:block !important;
    width:auto !important;
    height:30px !important;
    max-width:118px !important;
    object-fit:contain !important;
    object-position:center !important;
  }
}

@media (max-width:350px){
  .institutionPill, html[data-theme="dark"] .institutionPill{
    min-width:0 !important;
    min-height:33px !important;
    padding:3px 6px !important;
    gap:0 !important;
    border-radius:17px !important;
  }

  .institutionCombinedLogo{
    width:auto !important;
    height:27px !important;
    max-width:106px !important;
  }
}

@media (min-width:621px) and (max-width:979px){
  .institutionPill, html[data-theme="dark"] .institutionPill{
    min-width:0 !important;
    min-height:56px !important;
    padding:7px 13px !important;
    gap:0 !important;
    border-radius:20px !important;
  }

  .institutionCombinedLogo{
    width:auto !important;
    height:36px !important;
    max-width:144px !important;
  }
}

@media (min-width:980px){
  .institutionPill, html[data-theme="dark"] .institutionPill{
    min-width:0 !important;
    gap:0 !important;
  }

  .institutionCombinedLogo{
    width:auto !important;
  }
}

@media (min-width:980px) and (max-height:760px){
  .institutionPill, html[data-theme="dark"] .institutionPill{
    min-height:48px !important;
    padding:5px 9px !important;
    border-radius:16px !important;
  }

  .institutionCombinedLogo{
    width:auto !important;
    height:29px !important;
    max-width:118px !important;
  }
}

.displayControlsInner{
  gap:8px !important;
}

.displayControlsBar .displayControlsInner .statusTool, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool{
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  padding:0 !important;
  margin:0 !important;
  flex:0 0 34px !important;
  aspect-ratio:1 / 1 !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:50% !important;
  line-height:1 !important;
  cursor:pointer;
  touch-action:manipulation;
}

.displayControlsBar .displayControlsInner .statusTool--lang, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--lang{
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  padding:0 !important;
  font-size:10.5px !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  text-align:center !important;
}

.displayControlsBar .displayControlsInner .statusTool--theme, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--theme{
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  padding:0 !important;
  font-size:12px !important;
}

.displayControlsBar .displayControlsInner .statusTool--theme i{
  display:block !important;
  margin:0 !important;
  line-height:1 !important;
  transform:none !important;
}

@media (max-width:979px){
  .displayControlsInner{
    gap:7px !important;
  }

  .displayControlsBar .displayControlsInner .statusTool, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool, .displayControlsBar .displayControlsInner .statusTool--lang, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--lang, .displayControlsBar .displayControlsInner .statusTool--theme, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--theme{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    flex-basis:32px !important;
    padding:0 !important;
    border-radius:50% !important;
  }

  .displayControlsBar .displayControlsInner .statusTool--lang, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--lang{
    font-size:10px !important;
  }

  .displayControlsBar .displayControlsInner .statusTool--theme, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--theme{
    font-size:11.5px !important;
  }
}

@media (max-width:420px){
  .displayControlsBar .displayControlsInner .statusTool, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool, .displayControlsBar .displayControlsInner .statusTool--lang, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--lang, .displayControlsBar .displayControlsInner .statusTool--theme, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--theme{
    padding:0 !important;
    border-radius:50% !important;
  }
}

@media (max-width:350px){
  .displayControlsBar .displayControlsInner .statusTool, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool, .displayControlsBar .displayControlsInner .statusTool--lang, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--lang, .displayControlsBar .displayControlsInner .statusTool--theme, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--theme{
    padding:0 !important;
    border-radius:50% !important;
  }
}

@media (max-width:620px){
  .benefitStack{
    width:min(160px, calc(100vw - 40px)) !important;
    gap:8px !important;
  }

  .benefitCard{
    min-height:54px !important;
    padding:7px 9px !important;
    border-radius:18px !important;
    gap:7px !important;
  }

  .benefitIcon{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    border-radius:11px !important;
    font-size:12px !important;
  }

  .benefitCopy{
    gap:2px !important;
  }

  .benefitCopy strong{
    font-size:10.1px !important;
    line-height:1.12 !important;
  }

  .benefitCopy small{
    font-size:8.2px !important;
    line-height:1.22 !important;
  }
}

@media (max-width:420px){
  .benefitStack{
    width:min(148px, calc(100vw - 28px)) !important;
    gap:7px !important;
  }

  .benefitCard{
    min-height:50px !important;
    padding:6px 8px !important;
    border-radius:17px !important;
    gap:6px !important;
  }

  .benefitIcon{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    border-radius:10px !important;
    font-size:11.5px !important;
  }

  .benefitCopy strong{
    font-size:9.7px !important;
  }

  .benefitCopy small{
    font-size:7.9px !important;
    line-height:1.18 !important;
  }
}

@media (max-width:350px){
  .benefitStack{
    width:min(136px, calc(100vw - 20px)) !important;
    gap:6px !important;
  }

  .benefitCard{
    min-height:42px !important;
    padding:5px 7px !important;
    border-radius:15px !important;
    gap:5px !important;
  }

  .benefitIcon{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    border-radius:9px !important;
    font-size:10.5px !important;
  }

  .benefitCopy strong{
    font-size:9.2px !important;
  }
}

.heroQualityMark{
  position:absolute;
  z-index:6;
  left:28px;
  bottom:28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  max-width:220px;
  color:#ffffff;
  line-height:1;
  text-align:left;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}

.heroQualityTitle{
  display:block;
  color:#ffffff;
  font-size:13px;
  line-height:1.12;
  font-weight:400;
  letter-spacing:.015em;
  white-space:nowrap;
}

.heroQualityInstitution{
  display:block;
  margin-top:4px;
  font-size:9.5px;
  line-height:1.15;
  font-weight:400;
  letter-spacing:.045em;
  white-space:nowrap;
}

@media (max-width:620px){
  .benefitStack{
    top:45px !important;
  }

  .heroQualityMark{
    top:241px !important;
    right:auto !important;
    bottom:auto !important;
    max-width:190px !important;
  }

  .heroQualityTitle{
    font-size:11.5px !important;
  }

  .heroQualityInstitution{
    margin-top:3px !important;
    font-size:8.5px !important;
  }
}

@media (max-width:420px){
  .benefitStack{
    top:35px !important;
  }

  .heroQualityMark{
    top:215px !important;
    max-width:176px !important;
  }

  .heroQualityTitle{
    font-size:10.8px !important;
  }

  .heroQualityInstitution{
    font-size:8px !important;
  }
}

@media (max-width:350px){
  .benefitStack{
    top:31px !important;
  }

  .heroQualityMark{
    top:181px !important;
    max-width:158px !important;
  }

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

  .heroQualityInstitution{
    margin-top:2px !important;
    font-size:7.5px !important;
  }
}

@media (min-width:621px) and (max-width:979px){
  .benefitStack{
    top:70px !important;
  }

  .heroQualityMark{
    top:354px !important;
    right:auto !important;
    bottom:auto !important;
    left:36px !important;
  }

  .heroQualityTitle{
    font-size:13px !important;
  }

  .heroQualityInstitution{
    font-size:9.5px !important;
  }
}

@media (min-width:980px){
  .benefitStack{
    bottom:54px !important;
  }

  .heroQualityTitle{
    font-size:11px !important;
  }

  .heroQualityInstitution{
    margin-top:3px !important;
    font-size:8px !important;
  }
}

@media (min-width:980px) and (max-height:760px){
  .benefitStack{
    bottom:50px !important;
  }
}

html[data-theme="dark"] .heroQualityTitle{
  color:#ffffff;
}

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

@media (max-width:620px){
  .visualHeroWave, .visualHero::after{
    transform:translate3d(0,5px,0) !important;
  }

  .contentPanel::before{
    transform:translate3d(0,5px,0) !important;
  }

  .contentPanel > *{
    transform:translate3d(0,5px,0) !important;
  }
}

.heroQualityMark{
  filter:drop-shadow(0 1px 1px rgba(0,55,62,.08)) !important;
}

.heroQualityTitle, .heroQualityInstitution{
  font-family:"Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  font-style:normal !important;
  font-weight:400 !important;
  font-synthesis:none !important;
  font-variation-settings:"wght" 400 !important;
  -webkit-text-stroke:0 transparent !important;
  text-rendering:geometricPrecision;
}

.heroQualityTitle{
  text-shadow:0 1px 1px rgba(0,48,54,.08) !important;
}

.heroQualityInstitution{
  color:rgba(255,255,255,.90) !important;
  text-shadow:0 1px 1px rgba(0,48,54,.07) !important;
}

.heroQualityTitle, html[data-theme="dark"] .heroQualityTitle{
  color:#0E9382 !important;
  font-size:11px !important;
}

.heroQualityInstitution, html[data-theme="dark"] .heroQualityInstitution{
  color:#0E9382 !important;
  font-size:8.5px !important;
}

@media (max-width:620px){
  .heroQualityTitle, html[data-theme="dark"] .heroQualityTitle{
    font-size:9.5px !important;
  }

  .heroQualityInstitution, html[data-theme="dark"] .heroQualityInstitution{
    font-size:7.5px !important;
  }
}

@media (max-width:420px){
  .heroQualityTitle, html[data-theme="dark"] .heroQualityTitle{
    font-size:9px !important;
  }

  .heroQualityInstitution, html[data-theme="dark"] .heroQualityInstitution{
    font-size:7px !important;
  }
}

@media (max-width:350px){
  .heroQualityTitle, html[data-theme="dark"] .heroQualityTitle{
    font-size:8.5px !important;
  }

  .heroQualityInstitution, html[data-theme="dark"] .heroQualityInstitution{
    font-size:6.5px !important;
  }
}

@media (min-width:621px) and (max-width:979px){
  .heroQualityTitle, html[data-theme="dark"] .heroQualityTitle{
    font-size:11px !important;
  }

  .heroQualityInstitution, html[data-theme="dark"] .heroQualityInstitution{
    font-size:8.5px !important;
  }
}

@media (max-width:420px){
  .visualHero [data-benefit-icon]{
    flex-basis:28px !important;
  }
}

@media (max-width:350px){
  .visualHero [data-benefit-icon]{
    flex-basis:26px !important;
  }
}

@media (max-width:620px){
  .heroQualityMark{
    left:22px !important;
  }

  .visualHero [data-benefit-stack]{
    right:auto !important;
    bottom:auto !important;
    left:18px !important;
    width:min(148px, calc(100vw - 40px)) !important;
    min-width:0 !important;
    max-width:148px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:7px !important;
  }

  .visualHero [data-benefit-card]{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:48px !important;
    height:auto !important;
    padding:6px 8px !important;
    border-radius:16px !important;
    gap:6px !important;
    display:flex !important;
    align-items:center !important;
  }

  .visualHero [data-benefit-icon]{
    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;
    height:27px !important;
    min-height:27px !important;
    max-height:27px !important;
    flex:0 0 27px !important;
    border-radius:10px !important;
    font-size:11px !important;
  }

  .visualHero .benefitCopy{
    min-width:0 !important;
    gap:1px !important;
  }

  .visualHero [data-benefit-title]{
    display:block !important;
    max-width:100% !important;
    font-size:9.3px !important;
    line-height:1.10 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .visualHero [data-benefit-text]{
    display:-webkit-box !important;
    max-width:100% !important;
    overflow:hidden !important;
    -webkit-box-orient:vertical !important;
    line-clamp:2 !important;
    -webkit-line-clamp:2 !important;
    font-size:7.4px !important;
    line-height:1.16 !important;
  }
}

@media (max-width:420px){
  .heroQualityMark{
    left:16px !important;
  }

  .visualHero [data-benefit-stack]{
    left:12px !important;
    width:min(138px, calc(100vw - 28px)) !important;
    max-width:138px !important;
    gap:6px !important;
  }

  .visualHero [data-benefit-card]{
    min-height:45px !important;
    padding:5px 7px !important;
    border-radius:15px !important;
    gap:5px !important;
  }

  .visualHero [data-benefit-icon]{
    width:25px !important;
    min-width:25px !important;
    max-width:25px !important;
    height:25px !important;
    min-height:25px !important;
    max-height:25px !important;
    flex:0 0 25px !important;
    border-radius:9px !important;
    font-size:10px !important;
  }

  .visualHero [data-benefit-title]{
    font-size:8.9px !important;
  }

  .visualHero [data-benefit-text]{
    font-size:7.1px !important;
    line-height:1.14 !important;
  }
}

@media (max-width:350px){
  .heroQualityMark{
    left:14px !important;
  }

  .visualHero [data-benefit-stack]{
    left:10px !important;
    width:min(128px, calc(100vw - 20px)) !important;
    max-width:128px !important;
    gap:5px !important;
  }

  .visualHero [data-benefit-card]{
    min-height:39px !important;
    padding:5px 6px !important;
    border-radius:14px !important;
    gap:5px !important;
  }

  .visualHero [data-benefit-icon]{
    width:23px !important;
    min-width:23px !important;
    max-width:23px !important;
    height:23px !important;
    min-height:23px !important;
    max-height:23px !important;
    flex:0 0 23px !important;
    border-radius:8px !important;
    font-size:9.5px !important;
  }

  .visualHero [data-benefit-title]{
    font-size:8.5px !important;
  }

  .visualHero [data-benefit-text]{
    display:none !important;
  }
}

@media (min-width:980px){
  .phoneShell{
    isolation:isolate !important;
  }

  .appHeader{
    padding-right:clamp(126px, 11vw, 170px) !important;
    border-radius:0 !important;
  }

  .brandLogoWrap{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    border-radius:14px !important;
  }

  .appFooter{
    border-radius:0 !important;
  }
}

@media (min-width:1440px){
  .phoneScreen{
    grid-template-columns:minmax(0, 56%) minmax(480px, 44%) !important;
  }

  .contentPanel{
    padding-left:clamp(64px, 5.2vw, 96px) !important;
    padding-right:clamp(64px, 5.2vw, 96px) !important;
  }
}

@media (min-width:980px) and (max-height:760px){
  .phoneScreen{
    grid-template-rows:
      72px
      minmax(520px, calc(100svh - 126px))
      54px !important;
  }

  .appHeader{
    min-height:72px !important;
    height:72px !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
  }

  .displayControlsBar, html[data-theme="dark"] .displayControlsBar{
    top:20px !important;
  }

  .visualHero, .contentPanel{
    min-height:520px !important;
  }

  .contentPanel{
    padding-top:34px !important;
    padding-bottom:30px !important;
  }

  .desktopEyebrow{
    margin-bottom:12px !important;
  }

  .heroBrandLogoWrap{
    width:70px !important;
    height:70px !important;
    min-width:70px !important;
  }

  .heroBrandLogo{
    width:61px !important;
    height:61px !important;
  }

  .heroBrandName{
    font-size:39px !important;
  }

  .heroHeadline{
    margin-top:18px !important;
    font-size:clamp(36px, 3.5vw, 48px) !important;
  }

  .heroDescription{
    margin-top:12px !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }

  .heroActions{
    margin-top:16px !important;
    gap:8px !important;
  }

  .primaryAction, .googleAction{
    min-height:50px !important;
  }

  .trustNote{
    margin-top:10px !important;
  }

  .visualHero [data-benefit-stack]{
    bottom:34px !important;
  }

  .visualHero [data-benefit-card]{
    min-height:72px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  .heroQualityMark{
    bottom:12px !important;
  }

  .appFooter{
    min-height:54px !important;
    height:54px !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
  }
}

@media (min-width:980px){
  html, body{
    width:100% !important;
    min-height:100% !important;
  }

  body{
    min-height:100svh !important;
    color:var(--ink) !important;
    background:radial-gradient(circle at 8% 8%, rgba(15,159,141,.16), transparent 25%),
      radial-gradient(circle at 92% 16%, rgba(15,159,141,.11), transparent 23%),
      radial-gradient(circle at 72% 92%, rgba(15,159,141,.08), transparent 27%),
      linear-gradient(160deg, #f8fbfd 0%, #ffffff 46%, #f3fbf6 100%) !important;
  }

  html[data-theme="dark"] body{
    background:radial-gradient(circle at 8% 8%, rgba(15,159,141,.10), transparent 25%),
      radial-gradient(circle at 92% 16%, rgba(15,159,141,.055), transparent 23%),
      radial-gradient(circle at 72% 92%, rgba(14,147,130,.10), transparent 27%),
      linear-gradient(160deg, #07181c 0%, #0b2024 48%, #07181c 100%) !important;
  }

  .pageBackdrop{
    display:block !important;
    opacity:.72 !important;
  }

  .pageGlow{
    filter:blur(46px) !important;
    opacity:.52 !important;
  }

  .appStage{
    width:100% !important;
    min-height:100svh !important;
    padding:0 !important;
    display:block !important;
  }

  .phoneShell{
    width:100% !important;
    max-width:none !important;
    min-height:100svh !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

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

  .phoneScreen{
    position:relative !important;
    width:100% !important;
    min-height:100svh !important;
    margin:0 !important;
    overflow:hidden !important;
    border-radius:0 !important;
    box-shadow:none !important;
    display:grid !important;
    grid-template-columns:minmax(430px, 46%) minmax(0, 54%) !important;

    /*
     * FOOTER DESKTOP - COMPACT PROPORTION
     * Footer dipendekkan dari 88px menjadi 60px.
     * Area utama otomatis mendapat ruang vertikal tambahan.
     */
    grid-template-rows:
      88px
      minmax(650px, calc(100svh - 148px))
      60px !important;
    background:radial-gradient(circle at 9% 74%, rgba(15,159,141,.055), transparent 22%),
      radial-gradient(circle at 92% 18%, rgba(15,159,141,.075), transparent 24%),
      var(--screen) !important;
  }

  html[data-theme="dark"] .phoneScreen{
    background:radial-gradient(circle at 9% 74%, rgba(15,159,141,.025), transparent 22%),
      radial-gradient(circle at 92% 18%, rgba(15,159,141,.045), transparent 24%),
      var(--screen) !important;
  }

  .appHeader{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    position:relative !important;
    width:100% !important;
    min-height:88px !important;
    height:88px !important;
    padding:13px
      clamp(126px, 10vw, 178px)
      13px
      clamp(34px, 5vw, 88px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border-bottom:1px solid rgba(58,105,119,.10) !important;
    box-shadow:0 10px 30px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  .appHeader::before{
    content:"" !important;
    position:absolute !important;
    inset:0 0 auto 0 !important;
    height:4px !important;
    background:linear-gradient(
        90deg,
        var(--teal-strong) 0%,
        var(--teal) 46%,
        var(--aqua) 74%,
        var(--lime) 100%
      ) !important;
    opacity:.96 !important;
    pointer-events:none !important;
  }

  .appHeader::after{
    content:"" !important;
    position:absolute !important;
    left:clamp(34px, 5vw, 88px) !important;
    right:clamp(34px, 5vw, 88px) !important;
    bottom:0 !important;
    height:1px !important;
    background:linear-gradient(90deg, transparent, rgba(15,159,141,.14), transparent) !important;
    pointer-events:none !important;
  }

  html[data-theme="dark"] .appHeader{
    border-bottom-color:rgba(255,255,255,.075) !important;
    box-shadow:0 12px 32px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  .brandLockup{
    position:relative !important;
    z-index:2 !important;
    gap:11px !important;
  }

  .brandLogoWrap, html[data-theme="dark"] .brandLogoWrap{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    border-radius:15px !important;
    background:#ffffff !important;
    border:1px solid rgba(15,159,141,.10) !important;
    box-shadow:0 10px 24px rgba(14,147,130,.12),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .brandLogo{
    width:48px !important;
    height:48px !important;
  }

  .brandCopy strong{
    color:var(--teal-deep) !important;
    letter-spacing:-.035em !important;
  }

  .brandCopy small{
    margin-top:4px !important;
    color:var(--muted) !important;
    font-weight:600 !important;
  }

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

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

  .desktopNav{
    position:relative !important;
    z-index:2 !important;
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
  }

  .desktopNav a{
    min-height:42px !important;
    padding:0 14px !important;
    border-radius:13px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#4d6b79 !important;
    background:transparent !important;
    text-decoration:none !important;
    font-size:12px !important;
    font-weight:700 !important;
    transition:color .18s ease,
      background .18s ease,
      transform .18s ease,
      box-shadow .18s ease !important;
  }

  .desktopNav a:hover{
    color:var(--teal-deep) !important;
    background:var(--teal-soft) !important;
    transform:translateY(-1px) !important;
  }

  html[data-theme="dark"] .desktopNav a{
    color:#bdd5d9 !important;
  }

  html[data-theme="dark"] .desktopNav a:hover{
    color:#53ebe8 !important;
    background:rgba(15,159,141,.08) !important;
  }

  .desktopNav .desktopNavLogin{
    margin-left:7px !important;
    padding:0 19px !important;
    color:#ffffff !important;
    background:linear-gradient(135deg, #0f9f8d 0%, var(--teal) 48%, #0e9382 100%) !important;
    border:1px solid rgba(14,147,130,.14) !important;
    box-shadow:0 10px 22px rgba(15,159,141,.20),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  .desktopNav .desktopNavLogin:hover{
    color:#ffffff !important;
    background:linear-gradient(135deg, #38cec5 0%, #05b4b1 48%, #0e9382 100%) !important;
    box-shadow:0 13px 26px rgba(15,159,141,.25),
      inset 0 1px 0 rgba(255,255,255,.30) !important;
  }

  .institutionPill, html[data-theme="dark"] .institutionPill{
    position:relative !important;
    z-index:2 !important;
    flex:0 0 auto !important;
    min-height:48px !important;
    padding:6px 11px !important;
    border-radius:16px !important;
    background:#ffffff !important;
    border:1px solid rgba(15,159,141,.10) !important;
    box-shadow:0 9px 22px rgba(16,70,80,.08),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .institutionCombinedLogo{
    height:30px !important;
    max-width:124px !important;
  }

  .displayControlsBar, html[data-theme="dark"] .displayControlsBar{
    grid-area:auto !important;
    position:absolute !important;
    top:27px !important;
    right:clamp(34px, 5vw, 88px) !important;
    bottom:auto !important;
    left:auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    pointer-events:none !important;
    z-index:60 !important;
  }

  .displayControlsInner{
    gap:7px !important;
    pointer-events:auto !important;
  }

  .displayControlsBar .displayControlsInner .statusTool, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool, .displayControlsBar .displayControlsInner .statusTool--lang, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--lang, .displayControlsBar .displayControlsInner .statusTool--theme, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--theme{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    flex-basis:34px !important;
    padding:0 !important;
    color:var(--teal-deep) !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(15,159,141,.12) !important;
    box-shadow:0 8px 18px rgba(16,70,80,.08),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
  }

  html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--lang, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--theme{
    color:#53ebe8 !important;
    background:rgba(20,52,58,.96) !important;
    border-color:rgba(15,159,141,.14) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .contentPanel{
    grid-column:1 !important;
    grid-row:2 !important;
    position:relative !important;
    width:100% !important;
    height:100% !important;
    min-height:650px !important;
    margin:0 !important;
    padding:clamp(58px, 7vh, 90px)
      clamp(48px, 5.2vw, 96px)
      clamp(50px, 6vh, 78px)
      clamp(48px, 5.2vw, 96px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    text-align:left !important;
    overflow:hidden !important;
    background:radial-gradient(circle at 0% 18%, rgba(15,159,141,.095), transparent 27%),
      radial-gradient(circle at 32% 100%, rgba(15,159,141,.065), transparent 24%),
      linear-gradient(135deg, rgba(255,255,255,.99), rgba(248,253,253,.985)) !important;
    border-right:0 !important;

    /*
     * PREMIUM VERTICAL DEPTH - RIGHT EDGE
     * -------------------------------------------------------
     * Shadow diarahkan ke kanan untuk memberi depth halus
     * antara contentPanel dan visualHero. Tidak memakai garis
     * vertikal keras agar tetap terasa premium enterprise.
     */
    box-shadow:
      18px 0 30px -24px rgba(16,70,80,.30),
      8px 0 18px -18px rgba(15,159,141,.15) !important;
  }

  html[data-theme="dark"] .contentPanel{
    background:radial-gradient(circle at 0% 18%, rgba(15,159,141,.055), transparent 27%),
      radial-gradient(circle at 32% 100%, rgba(15,159,141,.025), transparent 24%),
      linear-gradient(135deg, rgba(11,32,36,.995), rgba(13,39,44,.99)) !important;
    border-right:0 !important;
    box-shadow:
      18px 0 32px -24px rgba(0,0,0,.38),
      8px 0 18px -18px rgba(15,159,141,.10) !important;
  }

  .contentPanel::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:10% !important;
    left:-120px !important;
    width:260px !important;
    height:260px !important;
    border-radius:50% !important;
    background:rgba(15,159,141,.06) !important;
    filter:blur(2px) !important;
    pointer-events:none !important;
    z-index:0 !important;
  }

  html[data-theme="dark"] .contentPanel::before{
    background:rgba(15,159,141,.025) !important;
  }

  .contentPanel > *{
    position:relative !important;
    z-index:1 !important;
    transform:none !important;
  }

  .desktopEyebrow{
    min-height:34px !important;
    margin:0 0 9px !important;
    padding:0 13px !important;
    gap:9px !important;
    color:var(--teal-deep) !important;
    background:rgba(15,159,141,.07) !important;
    border:1px solid rgba(15,159,141,.13) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    letter-spacing:.025em !important;
  }

  .desktopEyebrowDot{
    width:7px !important;
    height:7px !important;
    background:var(--teal) !important;
    box-shadow:0 0 0 5px rgba(15,159,141,.11) !important;
  }

  /* =======================================================
     RSAB INSTITUTION LINE - CONTENT PANEL DESKTOP
     ======================================================= */
  .desktopHeroInstitution{
    position:relative !important;
    z-index:2 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:0 !important;

    width:fit-content !important;
    max-width:100% !important;
    min-height:0 !important;

    /*
     * POSISI BARU DESKTOP:
     * Elemen sekarang berada di bawah trustNote sehingga
     * jarak dibuat dari atas, bukan lagi dari bawah.
     */
    margin:14px 0 0 !important;
    padding:0 !important;

    color:#657b87 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    white-space:nowrap !important;
  }

  .desktopHeroInstitutionCopy{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:4px !important;
  }

  .desktopHeroInstitutionProgram{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    color:#0e9382 !important;

    /*
     * LAPTOP / DESKTOP - INSTITUTION PROGRAM ENLARGED
     * -----------------------------------------------------
     * Diperbesar agar identitas "Peningkatan Mutu" lebih
     * mudah terbaca dan terasa seimbang dengan trustNote.
     */
    font-size:12.2px !important;
    line-height:1.10 !important;
    font-weight:750 !important;
    letter-spacing:.012em !important;
    white-space:nowrap !important;
  }

  .desktopHeroInstitutionText{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    color:#607782 !important;

    /*
     * Subteks RSAB ikut diperbesar secara proporsional,
     * tetapi tetap lebih kecil dari judul program.
     */
    font-size:10.2px !important;
    line-height:1.12 !important;
    font-weight:600 !important;
    letter-spacing:.022em !important;
    white-space:nowrap !important;
  }

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

  html[data-theme="dark"] .desktopHeroInstitutionProgram{
    color:#73e6dd !important;
  }

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

  .heroBrandCard{
    margin:0 !important;
    gap:15px !important;
    justify-content:flex-start !important;
  }

  .heroBrandLogoWrap{
    width:76px !important;
    height:76px !important;
    min-width:76px !important;
    border-radius:22px !important;
    background:#ffffff !important;
    border:1px solid rgba(15,159,141,.09) !important;
    box-shadow:0 16px 36px rgba(16,70,80,.10),
      0 4px 12px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  html[data-theme="dark"] .heroBrandLogoWrap{
    background:rgba(16,43,48,.96) !important;
    border-color:rgba(15,159,141,.09) !important;
  }

  .heroBrandLogo{
    width:67px !important;
    height:67px !important;
  }

  .heroBrandName{
    color:var(--teal-deep) !important;
    font-size:44px !important;
    line-height:.98 !important;
    letter-spacing:-.050em !important;
  }

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

  .heroBrandTagline{
    margin-top:6px !important;
    color:var(--muted) !important;
    font-size:13px !important;
    font-weight:600 !important;
  }

  .heroHeadline{
    width:100% !important;
    max-width:570px !important;
    margin:28px 0 0 !important;
    color:var(--teal-deep) !important;
    font-size:clamp(44px, 4.4vw, 66px) !important;
    line-height:1.035 !important;
    letter-spacing:-.052em !important;
    font-weight:800 !important;
  }

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

  .heroDescription{
    margin:21px 0 0 !important;
    color:var(--muted) !important;
    font-size:15.5px !important;
    line-height:1.72 !important;
    font-weight:500 !important;
  }

  .heroActions{
    width:100% !important;
    max-width:560px !important;
    margin:28px 0 0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .primaryAction, .googleAction{
    min-height:56px !important;
    padding:0 16px !important;
    grid-template-columns:38px 1fr 38px !important;
    gap:8px !important;
    border-radius:18px !important;
    font-size:14px !important;
  }

  .primaryAction{
    background:radial-gradient(circle at 18% 0%, rgba(255,255,255,.20), transparent 38%),
      linear-gradient(135deg, #0f9f8d 0%, var(--teal) 48%, #0e9382 100%) !important;
    box-shadow:0 16px 30px rgba(15,159,141,.22),
      0 6px 14px rgba(14,147,130,.12),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  .googleAction{
    color:#294052 !important;
    background:rgba(255,255,255,.97) !important;
    border:1px solid rgba(65,117,130,.13) !important;
    box-shadow:0 12px 26px rgba(16,70,80,.08),
      0 3px 9px rgba(16,70,80,.04),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  html[data-theme="dark"] .googleAction{
    color:var(--ink) !important;
    background:rgba(16,43,48,.96) !important;
    border-color:rgba(255,255,255,.075) !important;
  }

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

  .actionTrailing, .googleTrailing{
    width:32px !important;
    height:32px !important;
    font-size:10px !important;
  }

  .googleIconWrap{
    width:31px !important;
    height:31px !important;
  }

  .googleIcon{
    width:19px !important;
    height:19px !important;
  }

  .trustNote{
    margin:17px 0 0 !important;
    padding:9px 12px !important;
    gap:8px !important;
    justify-content:flex-start !important;
    text-align:left !important;
    color:var(--muted) !important;
    background:rgba(15,159,141,.045) !important;
    border:1px solid rgba(15,159,141,.08) !important;
    border-radius:12px !important;
    font-size:10.5px !important;
  }

  html[data-theme="dark"] .trustNote{
    background:rgba(15,159,141,.045) !important;
    border-color:rgba(15,159,141,.075) !important;
  }

  .trustNote i{
    color:var(--teal-strong) !important;
    font-size:12px !important;
  }

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

  .visualHero{
    grid-column:2 !important;
    grid-row:2 !important;
    position:relative !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    /* =====================================================
       DESKTOP / LAPTOP - LEFT SHADOW BREATHING SPACE
       -----------------------------------------------------
       PERUBAHAN:
       - Menambahkan jarak di sisi kiri visualHero.
       - Memberi ruang agar shadow kiri panel gambar terlihat.
       - Tidak mengubah ukuran internal gambar / visualHeroTint.
       - Tidak berlaku pada HP karena rule ini berada di
         breakpoint desktop >=980px.
       ===================================================== */
    /*
     * DESKTOP / LAPTOP - SECTION SHIFT RIGHT 7PX
     * -----------------------------------------------------
     * Yang digeser adalah SELURUH visualHero, bukan isi foto.
     * Jarak kiri existing ditambah 7px agar card lebih jauh
     * dari vertical shadow batas kanan contentPanel.
     */
    margin:clamp(24px, 3.1vh, 34px)
      clamp(34px, 4.6vw, 84px)
      clamp(24px, 3.1vh, 34px)
      calc(clamp(18px, 1.6vw, 26px) + 7px) !important;
    overflow:hidden !important;
    border-radius:28px !important;
    background:#edf5f1 !important;
    border:1px solid rgba(42,103,112,.13) !important;

    /*
     * PREMIUM ENTERPRISE - RAISED DEPTH
     * -------------------------------------------------------
     * Layer shadow dibuat bertahap agar panel gambar terlihat
     * benar-benar timbul, namun tetap formal dan tidak berlebihan.
     */
    /*
     * PREMIUM 3D DEPTH - LAPTOP / DESKTOP
     * Layer bawah dibuat sedikit lebih kuat daripada sisi atas,
     * sehingga panel visual terasa benar-benar terangkat dari
     * surface tanpa terlihat seperti floating card berlebihan.
     */
    box-shadow:
      0 2px 3px rgba(13,57,66,.060),
      0 8px 18px rgba(16,70,80,.085),
      0 18px 38px rgba(16,70,80,.135),
      0 34px 68px rgba(15,91,95,.125),
      0 54px 100px rgba(15,91,95,.080),
      inset 0 1px 0 rgba(255,255,255,.88),
      inset 1px 0 0 rgba(255,255,255,.28),
      inset -1px 0 0 rgba(15,159,141,.030),
      inset 0 -2px 0 rgba(13,72,80,.055) !important;

    isolation:isolate !important;
  }

  html[data-theme="dark"] .visualHero{
    border-color:rgba(255,255,255,.075) !important;

    box-shadow:
      0 2px 4px rgba(0,0,0,.24),
      0 10px 22px rgba(0,0,0,.28),
      0 24px 52px rgba(0,0,0,.38),
      0 42px 86px rgba(0,0,0,.26),
      0 58px 108px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.050),
      inset 1px 0 0 rgba(255,255,255,.020),
      inset -1px 0 0 rgba(15,159,141,.020),
      inset 0 -2px 0 rgba(0,0,0,.20) !important;
  }

  /*
   * Inner frame tipis memberi karakter enterprise tanpa
   * menambah elemen HTML baru.
   */
  .visualHero::before{
    content:"" !important;
    position:absolute !important;
    z-index:5 !important;
    inset:0 !important;
    border-radius:inherit !important;
    border:1px solid rgba(255,255,255,.50) !important;

    box-shadow:
      inset 0 0 0 1px rgba(15,159,141,.026),
      inset 0 2px 0 rgba(255,255,255,.36),
      inset 1px 0 0 rgba(255,255,255,.12),
      inset -1px 0 0 rgba(15,159,141,.018),
      inset 0 -2px 0 rgba(13,72,80,.060) !important;

    pointer-events:none !important;
  }

  html[data-theme="dark"] .visualHero::before{
    border-color:rgba(255,255,255,.060) !important;

    box-shadow:
      inset 0 0 0 1px rgba(15,159,141,.024),
      inset 0 1px 0 rgba(255,255,255,.026),
      inset 0 -1px 0 rgba(0,0,0,.18) !important;
  }

  .visualHeroImage{
    inset:0 !important;
    width:100% !important;
    height:100% !important;

    /*
     * FOTO DIKEMBALIKAN SEPERTI SEMULA
     * Tidak ada padding internal pada visualHeroImage.
     */
    padding-left:0 !important;

    object-fit:cover !important;
    object-position:56% center !important;
    transform:scale(1.008) !important;
    filter:
      saturate(.92)
      contrast(.985)
      brightness(1.025) !important;
    transition:
      transform .9s cubic-bezier(.2,.8,.2,1),
      filter .3s ease !important;
  }

  .visualHero:hover .visualHeroImage{
    transform:scale(1.018) !important;
  }

  html[data-theme="dark"] .visualHeroImage{
    filter:
      saturate(.76)
      contrast(.95)
      brightness(.70) !important;
  }

  /*
   * Overlay dibuat lebih terkendali:
   * - area wajah tetap bersih;
   * - bagian bawah sedikit lebih tenang agar benefit cards
   *   terbaca seperti informasi enterprise.
   */
  .visualHeroTint{
    /*
     * Overlay dikembalikan memenuhi seluruh area visualHero.
     */
    left:0 !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.025) 0%,
        rgba(255,255,255,0) 43%,
        rgba(8,72,78,.035) 67%,
        rgba(6,63,69,.18) 100%
      ),
      linear-gradient(
        90deg,
        rgba(239,251,249,.16) 0%,
        rgba(239,251,249,.045) 28%,
        transparent 52%
      ) !important;
  }

  html[data-theme="dark"] .visualHeroTint{
    background:
      linear-gradient(
        180deg,
        rgba(5,25,28,.04) 0%,
        rgba(5,25,28,.02) 42%,
        rgba(5,25,28,.20) 68%,
        rgba(5,25,28,.54) 100%
      ),
      linear-gradient(
        90deg,
        rgba(7,35,39,.25) 0%,
        rgba(7,35,39,.08) 34%,
        transparent 58%
      ) !important;
  }

  .visualHeroWave, .visualHero::after{
    display:none !important;
  }

  .visualHero [data-benefit-stack]{
    top:auto !important;
    right:26px !important;
    bottom:26px !important;
    left:26px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:12px !important;
    align-items:stretch !important;
  }

  .visualHero [data-benefit-card]{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:76px !important;
    padding:12px 13px !important;
    border-radius:15px !important;
    gap:10px !important;
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.965) 0%,
        rgba(250,253,253,.925) 100%
      ) !important;
    border:1px solid rgba(255,255,255,.82) !important;
    outline:1px solid rgba(42,103,112,.055) !important;
    outline-offset:-1px !important;
    box-shadow:
      0 12px 26px rgba(10,48,61,.105),
      0 3px 8px rgba(10,48,61,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    backdrop-filter:blur(18px) saturate(1.04) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.04) !important;
    overflow:hidden !important;
  }

  /*
   * Garis aksen sangat tipis menjaga identitas RSAB,
   * tetapi tidak membuat card terlihat dekoratif berlebihan.
   */
  .visualHero [data-benefit-card]::before{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    top:0 !important;
    right:14px !important;
    left:14px !important;
    height:1px !important;
    background:linear-gradient(
      90deg,
      transparent,
      rgba(15,159,141,.24),
      transparent
    ) !important;
    pointer-events:none !important;
  }

  .visualHero [data-benefit-card] > *{
    position:relative !important;
    z-index:1 !important;
  }

  html[data-theme="dark"] .visualHero [data-benefit-card]{
    background:
      linear-gradient(
        180deg,
        rgba(15,45,50,.93) 0%,
        rgba(10,36,41,.90) 100%
      ) !important;
    border-color:rgba(255,255,255,.085) !important;
    outline-color:rgba(15,159,141,.045) !important;
    box-shadow:
      0 12px 28px rgba(0,0,0,.24),
      0 3px 8px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  html[data-theme="dark"] .visualHero [data-benefit-card]::before{
    background:linear-gradient(
      90deg,
      transparent,
      rgba(83,235,232,.16),
      transparent
    ) !important;
  }

  .visualHero [data-benefit-icon]{
    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;
    border-radius:12px !important;
    font-size:13.5px !important;
  }

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

  .visualHero [data-benefit-title]{
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    color:#163b4b !important;
    font-size:11.6px !important;
    line-height:1.16 !important;
    font-weight:800 !important;
    letter-spacing:-.012em !important;
  }

  html[data-theme="dark"] .visualHero [data-benefit-title]{
    color:#ecfbfc !important;
  }

  .visualHero [data-benefit-text]{
    display:-webkit-box !important;
    max-width:100% !important;
    overflow:hidden !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    color:#6a7f8b !important;
    font-size:8.8px !important;
    line-height:1.30 !important;
    font-weight:500 !important;
  }

  html[data-theme="dark"] .visualHero [data-benefit-text]{
    color:#a9c3c8 !important;
  }

  .heroQualityMark{
    top:26px !important;
    right:auto !important;
    bottom:auto !important;
    left:26px !important;
    max-width:none !important;
    min-width:0 !important;
    padding:10px 13px 10px 15px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(255,255,255,.82) !important;
    border-left:3px solid rgba(15,159,141,.88) !important;
    border-radius:10px !important;
    box-shadow:
      0 10px 24px rgba(16,70,80,.085),
      0 2px 6px rgba(16,70,80,.035),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    backdrop-filter:blur(16px) saturate(1.03) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.03) !important;
    filter:none !important;
  }

  html[data-theme="dark"] .heroQualityMark{
    background:rgba(12,40,45,.90) !important;
    border-color:rgba(255,255,255,.085) !important;
    border-left-color:rgba(83,235,232,.62) !important;
    box-shadow:
      0 10px 24px rgba(0,0,0,.22),
      0 2px 6px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .heroQualityTitle,
  html[data-theme="dark"] .heroQualityTitle{
    color:var(--teal-deep) !important;
    font-size:10.6px !important;
    line-height:1.12 !important;
    font-weight:700 !important;
    letter-spacing:.015em !important;
    text-shadow:none !important;
  }

  /*
   * Pada desktop, SELURUH identitas Peningkatan Mutu + RSAB
   * dipindahkan ke contentPanel.
   *
   * Elemen heroQualityMark tetap dipertahankan di DOM agar
   * tampilan HP / tablet yang sudah final tidak berubah.
   */
  .visualHero .heroQualityMark,
  html[data-theme="dark"] .visualHero .heroQualityMark{
    display:none !important;
  }

  /* =======================================================
     FOOTER LAPTOP / DESKTOP - PREMIUM ENTERPRISE
     -------------------------------------------------------
     Konsep:
     - kiri   : identitas Bumil Ku;
     - tengah : legal links + copyright;
     - kanan  : trust indicator privasi & keamanan;
     - surface dibuat formal, ringan, dan seimbang.
     ======================================================= */
  .appFooter{
    grid-column:1 / -1 !important;
    grid-row:3 !important;

    position:relative !important;

    width:100% !important;
    min-height:60px !important;
    height:60px !important;

    margin:0 !important;
    padding:8px clamp(48px, 5.6vw, 104px) !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:28px !important;

    background:
      radial-gradient(
        circle at 5% 100%,
        rgba(15,159,141,.075),
        transparent 30%
      ),
      radial-gradient(
        circle at 95% 0%,
        rgba(15,159,141,.055),
        transparent 28%
      ),
      linear-gradient(
        180deg,
        rgba(252,254,254,.995) 0%,
        rgba(245,251,251,.995) 100%
      ) !important;

    border:0 !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 8px 20px rgba(255,255,255,.14),
      0 -8px 22px rgba(16,70,80,.018) !important;

    overflow:hidden !important;
    isolation:isolate !important;
  }

  /*
   * Garis aksen premium sangat tipis.
   * Tidak menjadi hard-divider penuh seperti versi sebelumnya.
   */
  .appFooter::before{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    top:0 !important;
    left:clamp(48px, 5.6vw, 104px) !important;
    right:clamp(48px, 5.6vw, 104px) !important;
    height:1px !important;

    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(15,159,141,.08) 14%,
      rgba(15,159,141,.20) 50%,
      rgba(15,159,141,.08) 86%,
      transparent 100%
    ) !important;

    pointer-events:none !important;
  }

  .appFooter > *{
    position:relative !important;
    z-index:1 !important;
  }

  html[data-theme="dark"] .appFooter{
    background:
      radial-gradient(
        circle at 5% 100%,
        rgba(15,159,141,.055),
        transparent 30%
      ),
      radial-gradient(
        circle at 95% 0%,
        rgba(15,159,141,.030),
        transparent 28%
      ),
      linear-gradient(
        180deg,
        rgba(14,40,45,.995) 0%,
        rgba(10,31,35,.995) 100%
      ) !important;

    border:0 !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 -9px 24px rgba(0,0,0,.09) !important;
  }

  html[data-theme="dark"] .appFooter::before{
    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(83,235,232,.035) 14%,
      rgba(83,235,232,.10) 50%,
      rgba(83,235,232,.035) 86%,
      transparent 100%
    ) !important;
  }

  /*
   * Icon standalone existing dipertahankan untuk HP/tablet,
   * tetapi tidak ditampilkan pada footer desktop.
   */
  .appFooter > .footerSecurityIcon{
    display:none !important;
  }

  /*
   * Footer desktop dibuat minimal/formal:
   * - kiri  : copyright;
   * - kanan : legal links;
   * - brand/trust decorative block desktop disembunyikan.
   */
  .desktopFooterBrand{
    display:none !important;
  }

  /* =======================================================
     FOOTER BRAND - KIRI
     ======================================================= */
  .desktopFooterBrand{
    display:none !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:11px !important;

    min-width:0 !important;
    width:fit-content !important;
  }

  .desktopFooterLogo{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:12px !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,1),
        rgba(247,252,251,.98)
      ) !important;

    border:1px solid rgba(15,159,141,.10) !important;

    box-shadow:
      0 8px 18px rgba(16,70,80,.065),
      0 2px 5px rgba(16,70,80,.030),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .desktopFooterLogo img{
    display:block !important;
    width:32px !important;
    height:32px !important;
    object-fit:contain !important;

    filter:
      drop-shadow(0 3px 5px rgba(14,147,130,.10)) !important;
  }

  .desktopFooterBrandCopy{
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;

    gap:3px !important;
  }

  .desktopFooterBrandCopy strong{
    display:block !important;

    margin:0 !important;

    color:#0e9382 !important;

    font-size:13px !important;
    line-height:1.05 !important;
    font-weight:800 !important;
    letter-spacing:-.020em !important;

    white-space:nowrap !important;
  }

  .desktopFooterBrandCopy small{
    display:block !important;

    margin:0 !important;

    color:#7a8d97 !important;

    font-size:8.4px !important;
    line-height:1.1 !important;
    font-weight:600 !important;
    letter-spacing:.015em !important;

    white-space:nowrap !important;
  }

  html[data-theme="dark"] .desktopFooterLogo{
    background:rgba(255,255,255,.96) !important;

    border-color:rgba(15,159,141,.10) !important;

    box-shadow:
      0 8px 18px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  html[data-theme="dark"] .desktopFooterBrandCopy strong{
    color:#73e6dd !important;
  }

  html[data-theme="dark"] .desktopFooterBrandCopy small{
    color:#a7c0c5 !important;
  }

  /* =======================================================
     FOOTER LEGAL - TENGAH
     ======================================================= */
  .footerCenter{
    display:contents !important;
  }

  .footerCopyright{
    grid-column:1 !important;
    grid-row:1 !important;

    justify-self:start !important;
    align-self:center !important;

    margin:0 !important;
    padding:0 !important;

    color:#7d909a !important;

    font-size:9px !important;
    line-height:1.2 !important;
    font-weight:500 !important;
    letter-spacing:.008em !important;

    text-align:left !important;
    white-space:nowrap !important;
  }

  .footerLinks{
    grid-column:2 !important;
    grid-row:1 !important;

    justify-self:end !important;
    align-self:center !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;

    gap:12px !important;

    margin:0 !important;
    padding:0 !important;

    color:#0e9382 !important;

    font-size:10.2px !important;
    line-height:1.2 !important;
    font-weight:700 !important;

    white-space:nowrap !important;
  }

  .footerLinks a{
    position:relative !important;

    padding:3px 2px !important;

    text-decoration:none !important;

    transition:
      color .18s ease,
      opacity .18s ease !important;
  }

  .footerLinks a:hover{
    color:#0f9f8d !important;

    text-decoration:none !important;
  }

  .footerLinks a::after{
    content:"" !important;

    position:absolute !important;
    right:2px !important;
    bottom:0 !important;
    left:2px !important;

    height:1px !important;

    background:#0f9f8d !important;

    transform:scaleX(0) !important;
    transform-origin:center !important;

    transition:transform .18s ease !important;
  }

  .footerLinks a:hover::after{
    transform:scaleX(1) !important;
  }

  .footerLinks span{
    color:rgba(65,101,112,.34) !important;
  }

  html[data-theme="dark"] .footerLinks{
    color:#73e6dd !important;
  }

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

  html[data-theme="dark"] .footerLinks a::after{
    background:#53ebe8 !important;
  }

  html[data-theme="dark"] .footerLinks span{
    color:rgba(255,255,255,.18) !important;
  }

  html[data-theme="dark"] .footerCopyright{
    color:#8faeb4 !important;
  }

}

@media (min-width:1280px){
  .phoneScreen{
    grid-template-columns:minmax(460px, 44%) minmax(0, 56%) !important;
  }

  .heroActions{
    max-width:610px !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:12px !important;
  }

  .primaryAction, .googleAction{
    min-height:58px !important;
  }

  .visualHero{
    margin-right:clamp(44px, 5vw, 94px) !important;
  }
}

@media (min-width:1500px){
  .phoneScreen{
    grid-template-columns:minmax(500px, 43%) minmax(0, 57%) !important;
  }

  .contentPanel{
    padding-left:clamp(76px, 6vw, 116px) !important;
    padding-right:clamp(64px, 5vw, 100px) !important;
  }

  .heroHeadline{
    max-width:630px !important;
    font-size:clamp(54px, 4vw, 70px) !important;
  }

  .heroDescription{
    max-width:600px !important;
    font-size:16px !important;
  }
}

@media (min-width:980px) and (max-height:820px){
  .phoneScreen{
    grid-template-rows:
      78px
      minmax(560px, calc(100svh - 136px))
      58px !important;
  }

  .appHeader{
    min-height:78px !important;
    height:78px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  .displayControlsBar, html[data-theme="dark"] .displayControlsBar{
    top:22px !important;
  }

  .contentPanel{
    min-height:560px !important;
    padding-top:34px !important;
    padding-bottom:30px !important;
  }

  .desktopEyebrow{
    margin-bottom:7px !important;
  }

  .desktopHeroInstitution{
    min-height:0 !important;
    margin-top:10px !important;
    margin-bottom:0 !important;
    gap:0 !important;
  }

  .desktopHeroInstitutionProgram{
    font-size:11.2px !important;
  }

  .desktopHeroInstitutionText{
    font-size:9.4px !important;
  }

  .heroBrandLogoWrap{
    width:66px !important;
    height:66px !important;
    min-width:66px !important;
  }

  .heroBrandLogo{
    width:58px !important;
    height:58px !important;
  }

  .heroBrandName{
    font-size:38px !important;
  }

  .heroBrandTagline{
    font-size:11.5px !important;
  }

  .heroHeadline{
    margin-top:19px !important;
    font-size:clamp(36px, 3.6vw, 50px) !important;
  }

  .heroDescription{
    margin-top:13px !important;
    font-size:13px !important;
    line-height:1.58 !important;
  }

  .heroActions{
    margin-top:17px !important;
    gap:8px !important;
  }

  .primaryAction, .googleAction{
    min-height:49px !important;
  }

  .trustNote{
    margin-top:10px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
  }

  .visualHero{
    margin-top:20px !important;
    margin-bottom:20px !important;
  }

  .visualHero [data-benefit-stack]{
    right:20px !important;
    bottom:20px !important;
    left:20px !important;
    gap:10px !important;
  }

  .visualHero [data-benefit-card]{
    min-height:70px !important;
    padding:10px 11px !important;
  }

  .visualHero [data-benefit-icon]{
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    flex-basis:36px !important;
  }

  .heroQualityMark{
    top:20px !important;
    left:20px !important;
    min-width:0 !important;
    padding:8px 11px 8px 13px !important;
  }

  .appFooter{
    min-height:58px !important;
    height:58px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
    gap:20px !important;
  }

  .footerCopyright{
    font-size:8.6px !important;
  }

  .footerLinks{
    font-size:9.8px !important;
    gap:10px !important;
  }
}

.desktopInstitutionLockup{
  display:none;
}

@media (min-width:980px){
  .appHeader{
    gap:22px !important;
  }

  .appHeader > .institutionPill{
    display:none !important;
  }

  .desktopInstitutionLockup{
    position:relative !important;
    z-index:3 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    color:var(--ink) !important;
  }

  .desktopInstitutionDivider{
    width:1px !important;
    min-width:1px !important;
    height:40px !important;
    display:block !important;
    background:linear-gradient(
        180deg,
        transparent 0%,
        rgba(58,105,119,.18) 16%,
        rgba(15,159,141,.30) 50%,
        rgba(58,105,119,.18) 84%,
        transparent 100%
      ) !important;
  }

  .desktopInstitutionIdentity{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:4px !important;
  }

  .desktopInstitutionLabel{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    color:var(--muted) !important;
    font-size:9px !important;
    line-height:1.1 !important;
    font-weight:600 !important;
    letter-spacing:.035em !important;
    white-space:nowrap !important;
  }

  .desktopInstitutionLogo{
    display:block !important;
    width:auto !important;
    height:27px !important;
    max-width:148px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

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

  .brandCopy strong{
    font-size:25px !important;
    font-weight:800 !important;
  }

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

  .desktopNav{
    margin-left:auto !important;
  }

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

  html[data-theme="dark"] .desktopInstitutionDivider{
    background:linear-gradient(
        180deg,
        transparent 0%,
        rgba(255,255,255,.08) 16%,
        rgba(15,159,141,.24) 50%,
        rgba(255,255,255,.08) 84%,
        transparent 100%
      ) !important;
  }

  html[data-theme="dark"] .desktopInstitutionLogo{
    box-sizing:content-box !important;
    padding:4px 7px !important;
    border-radius:8px !important;
    background:#ffffff !important;
    box-shadow:0 6px 14px rgba(0,0,0,.18) !important;
  }
}

@media (min-width:980px) and (max-width:1150px){
  .appHeader{
    gap:14px !important;
    padding-left:28px !important;
    padding-right:112px !important;
  }

  .brandLogoWrap, html[data-theme="dark"] .brandLogoWrap{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
  }

  .brandLogo{
    width:42px !important;
    height:42px !important;
  }

  .brandCopy strong{
    font-size:21px !important;
  }

  .brandCopy small{
    font-size:8.5px !important;
  }

  .desktopInstitutionLockup{
    gap:10px !important;
  }

  .desktopInstitutionDivider{
    height:34px !important;
  }

  .desktopInstitutionLabel{
    font-size:7.8px !important;
  }

  .desktopInstitutionLogo{
    height:23px !important;
    max-width:118px !important;
  }

  .desktopNav{
    gap:1px !important;
  }

  .desktopNav a{
    min-height:38px !important;
    padding:0 9px !important;
    font-size:10.5px !important;
  }

  .desktopNav .desktopNavLogin{
    padding-left:13px !important;
    padding-right:13px !important;
  }

  .displayControlsBar, html[data-theme="dark"] .displayControlsBar{
    right:28px !important;
  }
}

@media (max-width:620px){
  .appHeader{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    border-bottom:1px solid rgba(58,105,119,.10) !important;
    box-shadow:0 8px 22px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  .appHeader::before{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    left:0 !important;
    width:100% !important;
    height:3px !important;
    background:linear-gradient(
        90deg,
        var(--teal-strong) 0%,
        var(--teal) 46%,
        var(--aqua) 76%,
        var(--lime) 100%
      ) !important;
    opacity:.96 !important;
    pointer-events:none !important;
  }

  .appHeader::after{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    right:14px !important;
    bottom:0 !important;
    left:14px !important;
    height:1px !important;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(15,159,141,.13),
        transparent
      ) !important;
    pointer-events:none !important;
  }

  .brandLockup{
    position:relative !important;
    z-index:2 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:8px !important;
    color:var(--teal-deep) !important;
  }

  .brandCopy{
    min-width:0 !important;
  }

  .brandCopy strong{
    color:var(--teal-deep) !important;
  }

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

  .desktopInstitutionLockup{
    position:relative !important;
    z-index:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    max-width:112px !important;
    margin:0 !important;
    padding:0 !important;
    color:var(--ink) !important;
  }

  .desktopInstitutionDivider{
    display:block !important;
    width:1px !important;
    min-width:1px !important;
    height:34px !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;
  }

  .desktopInstitutionIdentity{
    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;
  }

  .desktopInstitutionLabel{
    display:block !important;
    width:100% !important;
    max-width:92px !important;
    margin:0 !important;
    padding:0 !important;
    color:var(--muted) !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;
  }

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

  .appHeader > .institutionPill{
    display:none !important;
  }

  html[data-theme="dark"] .appHeader{
    border-bottom-color:rgba(255,255,255,.07) !important;
    box-shadow:0 9px 24px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

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

  html[data-theme="dark"] .brandCopy small, html[data-theme="dark"] .desktopInstitutionLabel{
    color:#aac8cc !important;
  }

  html[data-theme="dark"] .desktopInstitutionDivider{
    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"] .desktopInstitutionLogo{
    box-sizing:content-box !important;
    padding:2px 4px !important;
    background:#ffffff !important;
    border-radius:6px !important;
    box-shadow:0 4px 10px rgba(0,0,0,.16) !important;
  }
}

@media (max-width:420px){
  .brandLockup{
    gap:7px !important;
  }

  .desktopInstitutionLockup{
    gap:7px !important;
    max-width:102px !important;
  }

  .desktopInstitutionDivider{
    height:31px !important;
  }

  .desktopInstitutionIdentity{
    max-width:92px !important;
    gap:2px !important;
  }

  .desktopInstitutionLabel{
    max-width:82px !important;
    font-size:5.9px !important;
    line-height:1.06 !important;
  }

  .desktopInstitutionLogo{
    height:20px !important;
    max-width:82px !important;
  }
}

@media (max-width:350px){
  .brandLockup{
    gap:6px !important;
  }

  .brandCopy strong{
    font-size:17.5px !important;
  }

  .desktopInstitutionLockup{
    gap:6px !important;
    max-width:88px !important;
  }

  .desktopInstitutionDivider{
    height:28px !important;
  }

  .desktopInstitutionIdentity{
    max-width:80px !important;
  }

  .desktopInstitutionLabel{
    max-width:72px !important;
    font-size:5.35px !important;
    line-height:1.04 !important;
  }

  .desktopInstitutionLogo{
    height:18px !important;
    max-width:72px !important;
  }
}

@media (max-width:620px){
  .appHeader > .brandLockup{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .appHeader > .desktopInstitutionLockup{
    width:auto !important;
    min-width:0 !important;
    margin:0
      0
      0
      2px !important;
    padding:0 !important;
  }

  .appHeader .desktopInstitutionDivider{
    flex:0 0 1px !important;
  }

  .appHeader .desktopInstitutionIdentity{
    flex:0 0 auto !important;
  }
}

@media (max-width:420px){
  .appHeader > .desktopInstitutionLockup{
    margin-left:1px !important;
  }
}

@media (max-width:350px){
  .appHeader > .desktopInstitutionLockup{
    margin-left:0 !important;
  }
}

.mobileNavbarTheme{
  display:none;
}

@media (max-width:620px){
  .appHeader > .mobileNavbarTheme{
    position:absolute !important;
    z-index:5 !important;
    top:50% !important;
    right:18px !important;
    bottom:auto !important;
    left:auto !important;
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    margin:0 !important;
    padding:0 !important;
    place-items:center !important;
    flex:0 0 32px !important;
    aspect-ratio:1 / 1 !important;
    color:var(--teal-deep) !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(15,159,141,.12) !important;
    border-radius:50% !important;
    box-shadow:0 8px 18px rgba(16,70,80,.10),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    backdrop-filter:blur(12px) saturate(1.06) !important;
    -webkit-backdrop-filter:blur(12px) saturate(1.06) !important;
    transform:translateY(-50%) !important;
    font-size:11.5px !important;
    line-height:1 !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
  }

  .appHeader > .mobileNavbarTheme:hover{
    color:#0e9382 !important;
    background:#ffffff !important;
    border-color:rgba(15,159,141,.24) !important;
  }

  .appHeader > .mobileNavbarTheme:focus-visible{
    outline:3px solid var(--focus) !important;
    outline-offset:2px !important;
  }

  .appHeader > .mobileNavbarTheme i{
    display:block !important;
    margin:0 !important;
    line-height:1 !important;
    transform:none !important;
  }

  html[data-theme="dark"] .appHeader > .mobileNavbarTheme{
    color:#53ebe8 !important;
    background:rgba(20,52,58,.96) !important;
    border-color:rgba(15,159,141,.14) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  html[data-theme="dark"] .appHeader > .mobileNavbarTheme:hover{
    color:#0f9f8d !important;
    background:rgba(24,61,67,.98) !important;
    border-color:rgba(15,159,141,.26) !important;
  }
}

@media (max-width:420px){
  .appHeader > .mobileNavbarTheme{
    right:14px !important;
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    flex-basis:30px !important;
    font-size:11px !important;
  }
}

@media (max-width:350px){
  .appHeader > .mobileNavbarTheme{
    right:12px !important;
    width:29px !important;
    min-width:29px !important;
    max-width:29px !important;
    height:29px !important;
    min-height:29px !important;
    max-height:29px !important;
    flex-basis:29px !important;
    font-size:10.5px !important;
  }
}

@media (max-width:620px){
  .displayControlsBar #btnTheme{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .displayControlsBar, html[data-theme="dark"] .displayControlsBar{
    position:absolute !important;
    top:20px !important;
    right:18px !important;
    bottom:auto !important;
    left:auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:flex-end !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:none !important;
    z-index:70 !important;
  }

  .displayControlsInner{
    position:relative !important;
    z-index:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    margin:0 !important;
    padding:0 !important;
    pointer-events:auto !important;
  }

  .displayControlsBar .displayControlsInner .statusTool, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool, .displayControlsBar .displayControlsInner .statusTool--lang, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--lang, .displayControlsBar .displayControlsInner .statusTool--theme, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--theme{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    flex:0 0 32px !important;
    aspect-ratio:1 / 1 !important;
    margin:0 !important;
    padding:0 !important;
    display:inline-grid !important;
    place-items:center !important;
    border-radius:50% !important;
    line-height:1 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .displayControlsBar .displayControlsInner .statusTool--lang, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--lang{
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
  }

  .displayControlsBar .displayControlsInner .statusTool--theme, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--theme{
    font-size:11.5px !important;
  }
}

@media (max-width:420px){
  .displayControlsBar, html[data-theme="dark"] .displayControlsBar{
    top:19px !important;
    right:14px !important;
  }

  .displayControlsInner{
    gap:7px !important;
  }

  .displayControlsBar .displayControlsInner .statusTool, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool, .displayControlsBar .displayControlsInner .statusTool--lang, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--lang, .displayControlsBar .displayControlsInner .statusTool--theme, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--theme{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    flex-basis:30px !important;
  }

  .displayControlsBar .displayControlsInner .statusTool--lang, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--lang{
    font-size:9.5px !important;
  }

  .displayControlsBar .displayControlsInner .statusTool--theme, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--theme{
    font-size:11px !important;
  }
}

@media (max-width:350px){
  .displayControlsBar, html[data-theme="dark"] .displayControlsBar{
    top:19.5px !important;
    right:12px !important;
  }

  .displayControlsInner{
    gap:6px !important;
  }

  .displayControlsBar .displayControlsInner .statusTool, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool, .displayControlsBar .displayControlsInner .statusTool--lang, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--lang, .displayControlsBar .displayControlsInner .statusTool--theme, html[data-theme="dark"] .displayControlsBar .displayControlsInner .statusTool--theme{
    width:29px !important;
    min-width:29px !important;
    max-width:29px !important;
    height:29px !important;
    min-height:29px !important;
    max-height:29px !important;
    flex-basis:29px !important;
  }
}

.appHeader{
  background:#ffffff !important;
  background-image:none !important;
  border-bottom:1px solid rgba(58,105,119,.10) !important;
  box-shadow:0 7px 18px rgba(16,70,80,.045),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

.appHeader::before{
  content:none !important;
  display:none !important;
  background:none !important;
}

.appHeader::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

html[data-theme="dark"] .appHeader{
  background:#102b30 !important;
  background-image:none !important;
  border-bottom:1px solid 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;
}

@media (max-width:620px){
  .appHeader, html[data-theme="dark"] .appHeader{
    background-image:none !important;
  }

  .appHeader{
    background:#ffffff !important;
  }

  html[data-theme="dark"] .appHeader{
    background:#102b30 !important;
  }

  .appHeader::before, .appHeader::after{
    content:none !important;
    display:none !important;
    background:none !important;
  }
}

@media (min-width:980px){
  .appHeader{
    background:#ffffff !important;
    background-image:none !important;
  }

  html[data-theme="dark"] .appHeader{
    background:#102b30 !important;
    background-image:none !important;
  }

  .appHeader::before, .appHeader::after{
    content:none !important;
    display:none !important;
    background:none !important;
  }
}

.mobileNavbarSearch{
  display:none;
}

/* =========================================================
   DESKTOP NAVBAR - ARTICLE SEARCH + UTILITIES
   =========================================================
   TUJUAN:
   - Search artikel khusus desktop ditempatkan setelah identitas
     RSAB Harapan Kita.
   - Tombol bahasa dan tema ditempatkan tepat di sebelah kiri
     menu Beranda.
   - Menu desktop: Beranda, Manfaat, Artikel, Tentang Kami, Masuk.
   - Mobile search dan seluruh breakpoint <=620px tidak diubah.
   - displayControlsBar existing dipertahankan untuk tablet.
   ========================================================= */

.desktopArticleSearch,
.desktopNavbarUtilities{
  display:none;
}

@media (min-width:980px){
  .appHeader{
    gap:14px !important;
    padding-right:clamp(34px, 5vw, 88px) !important;
  }

  /*
   * Kontrol existing di luar header tetap digunakan tablet.
   * Pada desktop digantikan desktopNavbarUtilities.
   */
  .displayControlsBar,
  html[data-theme="dark"] .displayControlsBar{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* =======================================================
     SEARCH ARTIKEL DESKTOP
     ======================================================= */
  .appHeader > .desktopArticleSearch{
    position:relative !important;
    z-index:4 !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) 36px !important;
    align-items:center !important;
    gap:3px !important;

    flex:0 1 clamp(190px, 16vw, 250px) !important;
    width:clamp(190px, 16vw, 250px) !important;
    min-width:190px !important;
    max-width:250px !important;
    height:40px !important;

    margin:0 !important;
    padding:2px !important;

    background:#ffffff !important;
    border:1px solid rgba(58,105,119,.16) !important;
    border-radius:12px !important;

    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;

    overflow:hidden !important;

    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      background .18s ease !important;
  }

  .appHeader > .desktopArticleSearch:focus-within{
    background:#ffffff !important;
    border-color:rgba(15,159,141,.46) !important;

    box-shadow:
      0 0 0 3px rgba(15,159,141,.07),
      0 9px 20px rgba(16,70,80,.065),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .desktopArticleSearchInput{
    width:100% !important;
    min-width:0 !important;
    height:100% !important;

    margin:0 !important;
    padding:0 11px !important;

    color:#294052 !important;
    background:transparent !important;

    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;

    font-family:inherit !important;
    font-size:10.5px !important;
    line-height:normal !important;
    font-weight:500 !important;
    letter-spacing:.002em !important;

    caret-color:#0f9f8d !important;

    appearance:none !important;
    -webkit-appearance:none !important;
  }

  .desktopArticleSearchInput::placeholder{
    color:#82949f !important;
    opacity:.90 !important;
    font-weight:500 !important;
  }

  .desktopArticleSearchInput::-webkit-search-cancel-button{
    display:none !important;
    -webkit-appearance:none !important;
  }

  .desktopArticleSearchButton{
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#0f9f8d !important;
    background:#ffffff !important;

    border:0 !important;
    border-left:1px solid rgba(58,105,119,.11) !important;
    border-radius:9px !important;

    box-shadow:none !important;

    font-size:13px !important;
    line-height:1 !important;

    cursor:pointer !important;
    touch-action:manipulation !important;

    transition:
      color .16s ease,
      background .16s ease,
      transform .16s ease !important;
  }

  .desktopArticleSearchButton:hover{
    color:#0e9382 !important;
    background:rgba(15,159,141,.045) !important;
    transform:translateY(-1px) !important;
  }

  .desktopArticleSearchButton:active{
    transform:translateY(0) scale(.97) !important;
  }

  .desktopArticleSearchButton:focus-visible{
    outline:2px solid rgba(15,159,141,.30) !important;
    outline-offset:-2px !important;
  }

  .desktopArticleSearchButton i{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    transform:none !important;
  }

  html[data-theme="dark"] .appHeader > .desktopArticleSearch{
    background:#102b30 !important;
    border-color:rgba(255,255,255,.10) !important;

    box-shadow:
      0 7px 18px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"] .appHeader > .desktopArticleSearch:focus-within{
    background:#102b30 !important;
    border-color:rgba(15,159,141,.34) !important;

    box-shadow:
      0 0 0 3px rgba(15,159,141,.06),
      0 9px 20px rgba(0,0,0,.17),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

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

  html[data-theme="dark"] .desktopArticleSearchInput::placeholder{
    color:#aac8cc !important;
    opacity:.80 !important;
  }

  html[data-theme="dark"] .desktopArticleSearchButton{
    color:#53ebe8 !important;
    background:#102b30 !important;
    border-left-color:rgba(255,255,255,.08) !important;
  }

  html[data-theme="dark"] .desktopArticleSearchButton:hover{
    color:#7ce8dc !important;
    background:rgba(15,159,141,.055) !important;
  }

  /* =======================================================
     BAHASA + TEMA DESKTOP
     Tepat di sebelah kiri menu Beranda.
     ======================================================= */
  .desktopNavbarUtilities{
    position:relative !important;
    z-index:5 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;

    flex:0 0 auto !important;

    margin:0 0 0 auto !important;
    padding:0 !important;
  }

  .desktopNavbarUtilities .statusTool{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;

    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;

    flex:0 0 34px !important;
    padding:0 !important;

    display:inline-grid !important;
    place-items:center !important;

    color:var(--teal-deep) !important;
    background:rgba(255,255,255,.96) !important;

    border:1px solid rgba(15,159,141,.12) !important;
    border-radius:50% !important;

    box-shadow:
      0 8px 18px rgba(16,70,80,.08),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;

    cursor:pointer !important;
  }

  .desktopNavbarUtilities .statusTool:hover{
    color:#0e9382 !important;
    background:#ffffff !important;
    border-color:rgba(15,159,141,.22) !important;
    transform:translateY(-1px) !important;
  }

  .desktopNavbarUtilities .statusTool--lang{
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
  }

  .desktopNavbarUtilities .statusTool--theme{
    font-size:11.5px !important;
  }

  .desktopNavbarUtilities .statusTool--theme i{
    display:block !important;
    margin:0 !important;
    line-height:1 !important;
    transform:none !important;
  }

  html[data-theme="dark"] .desktopNavbarUtilities .statusTool{
    color:#53ebe8 !important;
    background:rgba(20,52,58,.96) !important;
    border-color:rgba(15,159,141,.14) !important;

    box-shadow:
      0 8px 18px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  html[data-theme="dark"] .desktopNavbarUtilities .statusTool:hover{
    color:#7ce8dc !important;
    background:rgba(24,61,67,.98) !important;
    border-color:rgba(15,159,141,.24) !important;
  }

  .desktopNav{
    margin-left:0 !important;
  }
}

/* =========================================================
   LAPTOP COMPACT 980 - 1150
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){
  .appHeader{
    gap:9px !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .appHeader > .desktopArticleSearch{
    flex-basis:132px !important;
    width:132px !important;
    min-width:132px !important;
    max-width:132px !important;
    height:34px !important;
    grid-template-columns:minmax(0,1fr) 30px !important;
    border-radius:9px !important;
  }

  .desktopArticleSearchInput{
    padding-left:8px !important;
    padding-right:6px !important;
    font-size:8.7px !important;
  }

  .desktopArticleSearchButton{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    border-radius:7px !important;
    font-size:11px !important;
  }

  .desktopNavbarUtilities{
    gap:5px !important;
  }

  .desktopNavbarUtilities .statusTool{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    flex-basis:30px !important;
  }

  .desktopNavbarUtilities .statusTool--lang{
    font-size:9px !important;
  }

  .desktopNavbarUtilities .statusTool--theme{
    font-size:10.5px !important;
  }

  .desktopNav{
    gap:0 !important;
  }

  .desktopNav a{
    min-height:36px !important;
    padding:0 7px !important;
    font-size:9.7px !important;
  }

  .desktopNav .desktopNavLogin{
    margin-left:4px !important;
    padding-left:11px !important;
    padding-right:11px !important;
  }
}

@media (max-width:620px){
  .displayControlsBar, html[data-theme="dark"] .displayControlsBar{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .appHeader > .mobileNavbarTheme{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .appHeader > .brandLockup, .appHeader > .desktopInstitutionLockup{
    flex:0 0 auto !important;
  }

  .appHeader > .mobileNavbarSearch{
    position:relative !important;
    z-index:6 !important;
    display:grid !important;
    height:34px !important;
    margin:0 0 0 auto !important;
    padding:0 !important;
    background:#ffffff !important;
    border:1px solid rgba(58,105,119,.28) !important;
    border-radius:6px !important;
    box-shadow:0 5px 12px rgba(16,70,80,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    overflow:hidden !important;
    transition:border-color .18s ease,
      box-shadow .18s ease !important;
  }

  .appHeader > .mobileNavbarSearch:focus-within{
    border-color:rgba(15,159,141,.58) !important;
    box-shadow:0 0 0 3px rgba(15,159,141,.08),
      0 5px 12px rgba(16,70,80,.055) !important;
  }

  .mobileNavbarSearchInput{
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 8px !important;
    color:#294052 !important;
    background:#ffffff !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    font-family:inherit !important;
    font-size:9.5px !important;
    line-height:1 !important;
    font-weight:500 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
  }

  .mobileNavbarSearchInput::-webkit-search-cancel-button{
    display:none !important;
    -webkit-appearance:none !important;
  }

  .mobileNavbarSearchButton{
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    color:var(--teal) !important;
    background:#ffffff !important;
    border:0 !important;
    border-left:1px solid rgba(58,105,119,.22) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    font-size:14px !important;
    line-height:1 !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
  }

  html[data-theme="dark"] .appHeader > .mobileNavbarSearch, html[data-theme="dark"] .mobileNavbarSearchInput, html[data-theme="dark"] .mobileNavbarSearchButton{
    background:#ffffff !important;
  }

  html[data-theme="dark"] .appHeader > .mobileNavbarSearch{
    border-color:rgba(255,255,255,.18) !important;
    box-shadow:0 6px 14px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

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

  html[data-theme="dark"] .mobileNavbarSearchButton{
    color:var(--teal-strong) !important;
    border-left-color:rgba(58,105,119,.22) !important;
  }
}

@media (max-width:420px){
  .appHeader > .mobileNavbarSearch{
    height:31px !important;
    border-radius:5px !important;
  }

  .mobileNavbarSearchInput{
    font-size:8.8px !important;
  }

  .mobileNavbarSearchButton{
    font-size:13px !important;
  }
}

@media (max-width:350px){
  .appHeader > .mobileNavbarSearch{
    height:29px !important;
  }

  .mobileNavbarSearchButton{
    font-size:12px !important;
  }
}

:root{
  --rsab-primary:#0f9f8d;
  --rsab-secondary:#0e9382;
  --teal:var(--rsab-primary);
  --teal-strong:var(--rsab-secondary);
  --teal-deep:var(--rsab-secondary);
  --aqua:var(--rsab-primary);
  --lime:var(--rsab-primary);
  --teal-soft:rgba(15,159,141,.10);
  --lime-soft:rgba(15,159,141,.07);
  --focus:rgba(15,159,141,.32);
}

.primaryAction, .desktopNav .desktopNavLogin{
  background:linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 56%,
      #0e9382 100%
    ) !important;
}

.primaryAction:hover, .desktopNav .desktopNavLogin:hover{
  background:linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 48%,
      #0e9382 100%
    ) !important;
}

.heroBrandName, .heroHeadline, .footerLinks, .trustNote i, .heroQualityTitle, .heroQualityInstitution, .mobileNavbarSearchButton{
  color:#0e9382 !important;
}

.desktopEyebrowDot{
  background:#0f9f8d !important;
}

.footerSecurityIcon--shield{
  background:linear-gradient(
      145deg,
      #0f9f8d,
      #0e9382
    ) !important;
}

.appHeader > .mobileNavbarSearch:focus-within{
  border-color:rgba(15,159,141,.58) !important;
  box-shadow:0 0 0 3px rgba(15,159,141,.08),
    0 5px 12px rgba(16,70,80,.055) !important;
}

html[data-theme="dark"] .heroBrandName, html[data-theme="dark"] .heroHeadline, html[data-theme="dark"] .footerLinks, html[data-theme="dark"] .trustNote i, html[data-theme="dark"] .heroQualityTitle, html[data-theme="dark"] .heroQualityInstitution{
  color:#0f9f8d !important;
}

.primaryAction{
  background:linear-gradient(
      90deg,
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,.17) 18%,
      rgba(255,255,255,.09) 34%,
      rgba(255,255,255,.035) 50%,
      rgba(255,255,255,0) 70%
    ),
    linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 56%,
      #0e9382 100%
    ) !important;
  box-shadow:0 18px 34px rgba(15,159,141,.28),
    0 8px 14px rgba(14,147,130,.16),
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 18px 0 28px rgba(255,255,255,.035) !important;
}

.primaryAction:hover{
  background:linear-gradient(
      90deg,
      rgba(255,255,255,.31) 0%,
      rgba(255,255,255,.20) 18%,
      rgba(255,255,255,.105) 35%,
      rgba(255,255,255,.04) 52%,
      rgba(255,255,255,0) 72%
    ),
    linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 50%,
      #0e9382 100%
    ) !important;
  box-shadow:0 22px 42px rgba(15,159,141,.32),
    0 10px 18px rgba(14,147,130,.18),
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 20px 0 30px rgba(255,255,255,.04) !important;
}

@media (max-width:620px){
  .primaryAction{
    background:linear-gradient(
        90deg,
        rgba(255,255,255,.29) 0%,
        rgba(255,255,255,.19) 19%,
        rgba(255,255,255,.10) 36%,
        rgba(255,255,255,.04) 52%,
        rgba(255,255,255,0) 72%
      ),
      linear-gradient(
        135deg,
        #0f9f8d 0%,
        #0f9f8d 56%,
        #0e9382 100%
      ) !important;
  }
}

.heroBrandLogoWrap, html[data-theme="dark"] .heroBrandLogoWrap{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  background:#ffffff !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 12px 20px rgba(16,70,80,.13))
    drop-shadow(0 4px 8px rgba(14,147,130,.08)) !important;
  overflow:hidden !important;
  isolation:isolate !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}

.heroBrandLogoWrap::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.44) 34%,
      rgba(255,255,255,0) 62%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfefe 58%,
      #f3fbfa 100%
    ) !important;
  pointer-events:none !important;
}

.heroBrandLogoWrap .heroBrandLogo{
  position:relative !important;
  z-index:1 !important;
  width:84% !important;
  height:84% !important;
  max-width:84% !important;
  max-height:84% !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:drop-shadow(0 5px 8px rgba(14,147,130,.10)) !important;
}

@media (max-width:620px){
  .heroBrandLogoWrap .heroBrandLogo{
    width:86% !important;
    height:86% !important;
    max-width:86% !important;
    max-height:86% !important;
  }
}

@media (max-width:350px){
  .heroBrandLogoWrap .heroBrandLogo{
    width:87% !important;
    height:87% !important;
    max-width:87% !important;
    max-height:87% !important;
  }
}

html[data-theme="dark"] .heroBrandLogoWrap{
  background:#ffffff !important;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.24))
    drop-shadow(0 4px 9px rgba(15,159,141,.10)) !important;
}

.heroBrandLogoShadow{
  position:relative !important;
  display:inline-grid !important;
  place-items:center !important;
  flex:0 0 auto !important;
  overflow:visible !important;
  isolation:isolate !important;
}

.heroBrandLogoShadow .heroBrandLogoWrap, html[data-theme="dark"] .heroBrandLogoShadow .heroBrandLogoWrap{
  filter:none !important;
  overflow:hidden !important;
}

.heroBrandLogoShadow .heroBrandLogoWrap::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:linear-gradient(
      145deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.10) 36%,
      rgba(14,147,130,.025) 66%,
      rgba(14,147,130,.085) 100%
    ) !important;
  pointer-events:none !important;
}

.heroBrandLogoShadow .heroBrandLogo{
  position:relative !important;
  z-index:2 !important;
}

.brandLogoShadow{
  position:relative !important;
  display:inline-grid !important;
  place-items:center !important;
  flex:0 0 auto !important;
  isolation:isolate !important;
}

.brandLogoShadow .brandLogoWrap, html[data-theme="dark"] .brandLogoShadow .brandLogoWrap{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  border-radius:0 !important;
  filter:none !important;
  overflow:hidden !important;
  isolation:isolate !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}

.brandLogoShadow .brandLogoWrap::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.46) 34%,
      rgba(255,255,255,0) 62%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfefe 58%,
      #f2faf9 100%
    ) !important;
  pointer-events:none !important;
}

.brandLogoShadow .brandLogoWrap::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:linear-gradient(
      145deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.08) 38%,
      rgba(14,147,130,.020) 68%,
      rgba(14,147,130,.075) 100%
    ) !important;
  pointer-events:none !important;
}

.brandLogoShadow .brandLogo{
  position:relative !important;
  z-index:2 !important;
  width:84% !important;
  height:84% !important;
  max-width:84% !important;
  max-height:84% !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:drop-shadow(0 3px 5px rgba(14,147,130,.09)) !important;
}

@media (max-width:620px){
  .brandLogoShadow .brandLogo{
    width:86% !important;
    height:86% !important;
    max-width:86% !important;
    max-height:86% !important;
  }
}

@media (max-width:350px){
  .brandLogoShadow .brandLogo{
    width:87% !important;
    height:87% !important;
    max-width:87% !important;
    max-height:87% !important;
  }
}

.heroBrandLogoWrap, html[data-theme="dark"] .heroBrandLogoWrap{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C21 67 10 54 9 38 C8 23 19 12 34 11 C42 11 48 15 50 22 C53 16 59 13 67 14 C81 15 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C21 67 10 54 9 38 C8 23 19 12 34 11 C42 11 48 15 50 22 C53 16 59 13 67 14 C81 15 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
  -webkit-mask-size:100% 100% !important;
  mask-size:100% 100% !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
}

.brandLogoShadow .brandLogoWrap, html[data-theme="dark"] .brandLogoShadow .brandLogoWrap{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C21 67 10 54 9 38 C8 23 19 12 34 11 C42 11 48 15 50 22 C53 16 59 13 67 14 C81 15 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C21 67 10 54 9 38 C8 23 19 12 34 11 C42 11 48 15 50 22 C53 16 59 13 67 14 C81 15 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
  -webkit-mask-size:100% 100% !important;
  mask-size:100% 100% !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
}

.heroBrandLogoWrap .heroBrandLogo{
  transform:translate3d(-0.5%, -1%, 0) !important;
}

.brandLogoShadow .brandLogo{
  transform:translate3d(-0.5%, -0.7%, 0) !important;
}

@media (max-width:620px){
  .appHeader{
    padding-left:max(18px, env(safe-area-inset-left)) !important;
    padding-right:max(18px, env(safe-area-inset-right)) !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
  }

  .appHeader > .brandLockup, .appHeader > .desktopInstitutionLockup, .appHeader > .mobileNavbarSearch{
    min-width:0 !important;
  }

  .appHeader > .brandLockup{
    flex:0 1 auto !important;
  }

  .appHeader .brandCopy{
    overflow:hidden !important;
  }

  .appHeader .brandCopy strong, .appHeader .brandCopy small{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .appHeader > .desktopInstitutionLockup{
    flex:0 1 auto !important;
    max-width:clamp(84px, 23vw, 108px) !important;
  }

  .appHeader .desktopInstitutionIdentity{
    min-width:0 !important;
    max-width:100% !important;
  }

  .appHeader .desktopInstitutionLogo{
    width:100% !important;
    max-width:92px !important;
    height:auto !important;
    max-height:22px !important;
  }

  .appHeader > .mobileNavbarSearch{
    transform:none !important;
  }
}

@media (min-width:421px) and (max-width:520px){
  .appHeader{
    padding-left:max(16px, env(safe-area-inset-left)) !important;
    padding-right:max(16px, env(safe-area-inset-right)) !important;
  }

  .appHeader > .brandLockup{
    max-width:146px !important;
  }

  .appHeader > .desktopInstitutionLockup{
    max-width:102px !important;
  }

  .appHeader > .mobileNavbarSearch{
    flex-basis:clamp(108px, 27vw, 126px) !important;
    width:clamp(108px, 27vw, 126px) !important;
    min-width:100px !important;
    max-width:126px !important;
  }
}

@media (max-width:420px){
  .appHeader > .brandLockup{
    flex:0 1 auto !important;
  }

  .appHeader > .desktopInstitutionLockup{
    flex:0 1 auto !important;
  }
}

@media (max-width:390px){
  .appHeader > .mobileNavbarSearch{
    flex-basis:clamp(88px, 26vw, 102px) !important;
  }

  .appHeader .desktopInstitutionLogo{
    max-width:76px !important;
  }
}

@media (max-width:350px){
  .mobileNavbarSearchInput{
    font-size:7.8px !important;
  }
}

@media (max-width:620px){
  .appHeader > .brandLockup{
    max-width:148px !important;
  }

  .appHeader .brandCopy{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:96px !important;
  }

  .appHeader .brandCopy strong{
    max-width:none !important;
    font-size:18px !important;
    line-height:1.02 !important;
    letter-spacing:-.040em !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  .appHeader .brandCopy small{
    max-width:none !important;
    margin-top:3px !important;
    font-size:7.8px !important;
    line-height:1.05 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
}

@media (max-width:420px){
  .appHeader .brandCopy{
    max-width:90px !important;
  }

  .appHeader .brandCopy strong{
    font-size:16.8px !important;
    letter-spacing:-.042em !important;
  }

  .appHeader .brandCopy small{
    margin-top:2px !important;
    font-size:7.2px !important;
  }
}

@media (max-width:390px){
  .appHeader .brandCopy{
    max-width:84px !important;
  }

  .appHeader .brandCopy strong{
    font-size:16px !important;
  }

  .appHeader .brandCopy small{
    font-size:6.8px !important;
  }
}

@media (max-width:350px){
  .appHeader .brandCopy{
    max-width:78px !important;
  }

  .appHeader .brandCopy strong{
    font-size:15.2px !important;
  }

  .appHeader .brandCopy small{
    display:block !important;
    font-size:6.4px !important;
  }
}

@media (max-width:620px){
  .appHeader > .brandLockup{
    gap:3px !important;
  }

  .appHeader .brandCopy{
    margin-left:-1px !important;
  }
}

@media (max-width:420px){
  .appHeader > .brandLockup{
    gap:2px !important;
  }

  .appHeader .brandCopy{
    margin-left:-1px !important;
  }
}

@media (max-width:390px){
  .appHeader > .brandLockup{
    gap:2px !important;
  }
}

@media (max-width:350px){
  .appHeader > .brandLockup{
    gap:1px !important;
  }

  .appHeader .brandCopy{
    margin-left:-1px !important;
  }
}

.heroDescription{
  width:100% !important;
  max-width:430px !important;
}

@media (max-width:620px){
  .heroDescription{
    width:calc(100% - 24px) !important;
    max-width:360px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:420px){
  .heroDescription{
    width:calc(100% - 20px) !important;
    max-width:320px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (min-width:621px) and (max-width:979px){
  .heroDescription{
    width:100% !important;
    max-width:540px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (min-width:980px){
  .heroDescription{
    width:100% !important;
    max-width:560px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

@media (min-width:1280px){
  .heroDescription{
    max-width:610px !important;
  }
}

@media (max-width:620px){
  .appHeader{
    gap:5px !important;
  }

  .appHeader > .mobileNavbarSearch{
    flex:0 1 clamp(116px, 31vw, 144px) !important;
    margin-left:auto !important;
    margin-right:0 !important;
    grid-template-columns:minmax(0,1fr) 32px !important;
  }

  .mobileNavbarSearchButton{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
  }

  .mobileNavbarSearchInput{
    min-width:0 !important;
    padding-left:9px !important;
    padding-right:7px !important;
  }

  .heroBrandCard{
    gap:8px !important;
  }
}

@media (max-width:420px){
  .appHeader{
    padding-left:max(12px, env(safe-area-inset-left)) !important;
    padding-right:max(12px, env(safe-area-inset-right)) !important;
    gap:4px !important;
  }

  .appHeader > .brandLockup{
    max-width:120px !important;
  }

  .appHeader > .desktopInstitutionLockup{
    max-width:78px !important;
  }

  .appHeader > .mobileNavbarSearch{
    flex:0 1 116px !important;
    grid-template-columns:minmax(0,1fr) 31px !important;
    margin-left:auto !important;
    margin-right:0 !important;
  }

  .mobileNavbarSearchButton{
    width:31px !important;
    min-width:31px !important;
    max-width:31px !important;
  }

  .mobileNavbarSearchInput{
    padding-left:8px !important;
    padding-right:6px !important;
  }

  .heroBrandCard{
    gap:6px !important;
  }
}

@media (max-width:390px){
  .appHeader{
    padding-left:max(11px, env(safe-area-inset-left)) !important;
    padding-right:max(11px, env(safe-area-inset-right)) !important;
    gap:4px !important;
  }

  .appHeader > .brandLockup{
    max-width:118px !important;
  }

  .appHeader > .desktopInstitutionLockup{
    max-width:74px !important;
  }

  .appHeader > .mobileNavbarSearch{
    flex:0 1 112px !important;
    width:112px !important;
    min-width:108px !important;
    max-width:112px !important;
    grid-template-columns:minmax(0,1fr) 30px !important;
  }

  .mobileNavbarSearchButton{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
  }

  .heroBrandCard{
    gap:6px !important;
  }
}

@media (max-width:350px){
  .appHeader{
    padding-left:max(10px, env(safe-area-inset-left)) !important;
    padding-right:max(10px, env(safe-area-inset-right)) !important;
    gap:3px !important;
  }

  .appHeader > .brandLockup{
    max-width:110px !important;
  }

  .appHeader > .desktopInstitutionLockup{
    max-width:66px !important;
  }

  .appHeader > .mobileNavbarSearch{
    flex:0 1 96px !important;
    grid-template-columns:minmax(0,1fr) 28px !important;
  }

  .mobileNavbarSearchButton{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
  }

  .mobileNavbarSearchInput{
    padding-left:6px !important;
    padding-right:4px !important;
  }

  .heroBrandCard{
    gap:5px !important;
  }
}

@media (max-width:620px){
  .heroBrandLogoWrap, html[data-theme="dark"] .heroBrandLogoWrap{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C20 67 8 54 7 37 C6 20 18 8 34 7 C42 7 48 11 50 19 C53 15 59 12 67 13 C81 14 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C20 67 8 54 7 37 C6 20 18 8 34 7 C42 7 48 11 50 19 C53 15 59 12 67 13 C81 14 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;
    -webkit-mask-position:center !important;
    mask-position:center !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
  }

  .heroBrandLogoWrap .heroBrandLogo{
    transform:translate3d(-0.4%, 1.2%, 0) !important;
  }
}

@media (max-width:420px){
  .heroBrandLogoWrap .heroBrandLogo{
    transform:translate3d(-0.4%, 1.6%, 0) !important;
  }
}

@media (max-width:350px){
  .heroBrandLogoWrap .heroBrandLogo{
    transform:translate3d(-0.4%, 1.8%, 0) !important;
  }
}

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

.heroBrandLogoShadow .heroBrandLogoWrap::before, .heroBrandLogoShadow .heroBrandLogoWrap::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}

.heroBrandLogoShadow{
  filter:drop-shadow(0 3px 4px rgba(17,72,79,.14))
    drop-shadow(0 10px 14px rgba(16,70,80,.14))
    drop-shadow(0 18px 28px rgba(14,147,130,.10)) !important;
}

@media (max-width:620px){
  .heroBrandLogoShadow{
    filter:drop-shadow(0 2px 3px rgba(17,72,79,.16))
      drop-shadow(0 8px 11px rgba(16,70,80,.17))
      drop-shadow(0 15px 22px rgba(14,147,130,.12)) !important;
  }
}

html[data-theme="dark"] .heroBrandLogoShadow{
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.28))
    drop-shadow(0 11px 18px rgba(0,0,0,.32))
    drop-shadow(0 18px 30px rgba(15,159,141,.10)) !important;
}

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

.brandLogoShadow .brandLogoWrap::before, .brandLogoShadow .brandLogoWrap::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  opacity:0 !important;
}

.brandLogoShadow{
  filter:drop-shadow(0 2px 3px rgba(17,72,79,.15))
    drop-shadow(0 6px 9px rgba(16,70,80,.14))
    drop-shadow(0 11px 17px rgba(14,147,130,.10)) !important;
  overflow:visible !important;
}

html[data-theme="dark"] .brandLogoShadow{
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.26))
    drop-shadow(0 7px 11px rgba(0,0,0,.28))
    drop-shadow(0 12px 19px rgba(15,159,141,.09)) !important;
}

@media (max-width:620px){
  .brandLogoShadow .brandLogoWrap, html[data-theme="dark"] .brandLogoShadow .brandLogoWrap{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C20 67 8 54 7 37 C6 20 18 8 34 7 C42 7 48 11 50 19 C53 15 59 12 67 13 C81 14 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C20 67 8 54 7 37 C6 20 18 8 34 7 C42 7 48 11 50 19 C53 15 59 12 67 13 C81 14 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;
    -webkit-mask-position:center !important;
    mask-position:center !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .brandLogoShadow .brandLogo{
    transform:translate3d(-0.4%, 1.35%, 0) !important;
  }

  .brandLogoShadow{
    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;
  }
}

@media (max-width:420px){
  .brandLogoShadow .brandLogo{
    transform:translate3d(-0.4%, 1.7%, 0) !important;
  }
}

@media (max-width:350px){
  .brandLogoShadow .brandLogo{
    transform:translate3d(-0.4%, 1.9%, 0) !important;
  }
}

@media (max-width:620px){
  /* =======================================================
     MOBILE SEARCH - MATCH NAVBAR SURFACE
     -------------------------------------------------------
     Form search, input, dan tombol search memakai warna
     surface yang sama dengan navbar agar tampil lebih formal
     dan menyatu sebagai satu komponen.
     ======================================================= */
  .appHeader > .mobileNavbarSearch{
    background:#ffffff !important;
    border:1px solid rgba(58,105,119,.16) !important;
    border-radius:11px !important;
    box-shadow:0 6px 16px rgba(16,70,80,.055),
      0 2px 5px rgba(16,70,80,.028),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    overflow:hidden !important;
    transition:border-color .18s ease,
      box-shadow .18s ease,
      background .18s ease !important;
  }

  html[data-theme="dark"] .appHeader > .mobileNavbarSearch{
    background:#102b30 !important;
    border-color:rgba(255,255,255,.10) !important;
    box-shadow:0 6px 14px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  .appHeader > .mobileNavbarSearch:focus-within{
    background:#ffffff !important;
    border-color:rgba(15,159,141,.48) !important;
    box-shadow:0 0 0 3px rgba(15,159,141,.075),
      0 8px 18px rgba(16,70,80,.065),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  html[data-theme="dark"] .appHeader > .mobileNavbarSearch:focus-within{
    background:#102b30 !important;
    border-color:rgba(15,159,141,.36) !important;
    box-shadow:0 0 0 3px rgba(15,159,141,.07),
      0 8px 18px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  .mobileNavbarSearchInput{
    min-width:0 !important;
    margin:0 !important;
    padding:0 8px !important;
    color:#294052 !important;
    background:transparent !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    font-family:inherit !important;
    font-size:9.4px !important;
    font-weight:500 !important;
    letter-spacing:.005em !important;
    caret-color:#0f9f8d !important;
    appearance:none !important;
    -webkit-appearance:none !important;
  }

  html[data-theme="dark"] .mobileNavbarSearchInput{
    color:#eafcff !important;
    background:transparent !important;
    caret-color:#53ebe8 !important;
  }

  .mobileNavbarSearchInput::placeholder{
    color:#82949f !important;
    opacity:.92 !important;
    font-weight:500 !important;
  }

  html[data-theme="dark"] .mobileNavbarSearchInput::placeholder{
    color:#aac8cc !important;
    opacity:.82 !important;
  }

  .mobileNavbarSearchButton{
    place-items:center !important;
    color:#0f9f8d !important;
    background:#ffffff !important;
    border:0 !important;
    border-left:1px solid rgba(58,105,119,.12) !important;
    border-radius:8px !important;
    box-shadow:none !important;
    font-size:12px !important;
    line-height:1 !important;
    transition:transform .16s ease,
      background .16s ease,
      color .16s ease !important;
  }

  html[data-theme="dark"] .mobileNavbarSearchButton{
    color:#53ebe8 !important;
    background:#102b30 !important;
    border-left-color:rgba(255,255,255,.08) !important;
  }

  .mobileNavbarSearchButton:hover{
    color:#0e9382 !important;
    background:#ffffff !important;
    box-shadow:none !important;
    transform:translateY(-1px) !important;
  }

  html[data-theme="dark"] .mobileNavbarSearchButton:hover{
    color:#7ce8dc !important;
    background:#102b30 !important;
  }

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

  .mobileNavbarSearchButton:focus-visible{
    outline:2px solid rgba(15,159,141,.34) !important;
    outline-offset:2px !important;
  }
}

@media (max-width:420px){
  .appHeader > .mobileNavbarSearch, html[data-theme="dark"] .appHeader > .mobileNavbarSearch{
    border-radius:10px !important;
  }

  .mobileNavbarSearchInput, html[data-theme="dark"] .mobileNavbarSearchInput{
    padding-left:7px !important;
    padding-right:5px !important;
    font-size:8.8px !important;
  }

  .mobileNavbarSearchButton, html[data-theme="dark"] .mobileNavbarSearchButton{
    border-radius:7px !important;
    font-size:11.5px !important;
  }
}

@media (max-width:350px){
  .appHeader > .mobileNavbarSearch, html[data-theme="dark"] .appHeader > .mobileNavbarSearch{
    border-radius:9px !important;
  }

  .mobileNavbarSearchInput, html[data-theme="dark"] .mobileNavbarSearchInput{
    padding-left:6px !important;
    padding-right:4px !important;
    font-size:8px !important;
  }

  .mobileNavbarSearchButton, html[data-theme="dark"] .mobileNavbarSearchButton{
    border-radius:7px !important;
    font-size:10.8px !important;
  }
}

@media (max-width:620px){
  .appHeader > .mobileNavbarSearch, html[data-theme="dark"] .appHeader > .mobileNavbarSearch{
    height:36px !important;
    padding:2px !important;
    grid-template-columns:minmax(0,1fr) 30px !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    gap:3px !important;
  }

  .mobileNavbarSearchInput, html[data-theme="dark"] .mobileNavbarSearchInput{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    align-self:stretch !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    line-height:normal !important;
  }

  .mobileNavbarSearchButton, html[data-theme="dark"] .mobileNavbarSearchButton{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    align-self:stretch !important;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
  }

  .mobileNavbarSearchButton i{
    width:1em !important;
    height:1em !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    vertical-align:middle !important;
    transform:none !important;
  }
}

@media (max-width:420px){
  .appHeader > .mobileNavbarSearch, html[data-theme="dark"] .appHeader > .mobileNavbarSearch{
    height:34px !important;
    padding:2px !important;
    grid-template-columns:minmax(0,1fr) 28px !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    gap:2px !important;
  }

  .mobileNavbarSearchButton, html[data-theme="dark"] .mobileNavbarSearchButton{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
  }
}

@media (max-width:350px){
  .appHeader > .mobileNavbarSearch, html[data-theme="dark"] .appHeader > .mobileNavbarSearch{
    height:32px !important;
    padding:2px !important;
    grid-template-columns:minmax(0,1fr) 26px !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    gap:2px !important;
  }

  .mobileNavbarSearchButton, html[data-theme="dark"] .mobileNavbarSearchButton{
    width:26px !important;
    min-width:26px !important;
    max-width:26px !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
  }
}

.visualHero [data-benefit-card][data-benefit-index="0"] [data-benefit-icon]{
  color:#ffffff !important;
  background-color:#0f9f8d !important;
  background-image:linear-gradient(
      90deg,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.19) 20%,
      rgba(255,255,255,.10) 38%,
      rgba(255,255,255,.04) 54%,
      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 42%,
      #0f9f8d 72%,
      #0e9382 100%
    ) !important;
}

.visualHero [data-benefit-card][data-benefit-index="1"] [data-benefit-icon]{
  color:#0b6f68 !important;
  background-color:#86c96f !important;
  background-image:linear-gradient(
      90deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.23) 20%,
      rgba(255,255,255,.12) 40%,
      rgba(255,255,255,.045) 57%,
      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 38%,
      #91cc69 68%,
      #add252 100%
    ) !important;
}

.visualHero [data-benefit-card][data-benefit-index="2"] [data-benefit-icon]{
  color:#0e6f68 !important;
  background-color:#c4d63c !important;
  background-image:linear-gradient(
      90deg,
      rgba(255,255,255,.38) 0%,
      rgba(255,255,255,.26) 20%,
      rgba(255,255,255,.14) 40%,
      rgba(255,255,255,.05) 58%,
      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 38%,
      #cedb46 70%,
      #e1e667 100%
    ) !important;
}

.visualHero [data-benefit-card] [data-benefit-icon]{
  color:#ffffff !important;
}

.visualHero [data-benefit-card] [data-benefit-icon] [data-benefit-icon-symbol]{
  color:#ffffff !important;
}

.visualHero [data-benefit-card][data-benefit-index="0"] [data-benefit-icon] [data-benefit-icon-symbol]{
  filter:drop-shadow(0 1px 1.5px rgba(0,70,66,.22)) !important;
  text-shadow:0 1px 1px rgba(0,70,66,.14) !important;
}

.visualHero [data-benefit-card][data-benefit-index="1"] [data-benefit-icon] [data-benefit-icon-symbol]{
  filter:drop-shadow(0 1px 1.6px rgba(34,102,70,.34)) !important;
  text-shadow:0 1px 1px rgba(34,102,70,.18) !important;
}

.visualHero [data-benefit-card][data-benefit-index="2"] [data-benefit-icon] [data-benefit-icon-symbol]{
  filter:drop-shadow(0 1px 1.8px rgba(73,102,31,.42)) !important;
  text-shadow:0 1px 1px rgba(73,102,31,.20) !important;
}

@media (max-width:620px){
  .visualHero [data-benefit-stack]{
    top:42px !important;
  }
}

@media (max-width:420px){
  .visualHero [data-benefit-stack]{
    top:30px !important;
  }
}

@media (max-width:350px){
  .visualHero [data-benefit-stack]{
    top:30px !important;
  }
}

@media (max-width:620px){
  .appHeader > .mobileNavbarSearch{
    flex-basis:154px !important;
    width:clamp(126px, 32vw, 154px) !important;
    min-width:126px !important;
    max-width:154px !important;
  }
}

@media (max-width:420px){
  .appHeader > .mobileNavbarSearch{
    flex-basis:134px !important;
    width:134px !important;
    min-width:134px !important;
    max-width:134px !important;
  }
}

@media (max-width:350px){
  .appHeader > .mobileNavbarSearch{
    flex-basis:110px !important;
    width:110px !important;
    min-width:110px !important;
    max-width:110px !important;
  }
}

.trustNoteIcon{
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
}

@media (max-width:620px){
  .trustNote .trustNoteIcon::before{
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
  }
}

@media (max-width:620px){
  .trustNote{
    position:relative !important;
    top:-30px !important;
    margin-top:20px !important;
    width:224px !important;
    max-width:calc(100% - 28px) !important;
    min-height:36px !important;
    padding:4px 10px 4px 4px !important;
    gap:9px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    color:#526b78 !important;
    background:#fbfdfd !important;
    background-image:none !important;
    border:1px solid rgba(58,105,119,.14) !important;
    border-radius:8px !important;
    box-shadow:0 3px 8px rgba(16,70,80,.045),
      inset 0 1px 0 rgba(255,255,255,.94) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    font-size:10.2px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    letter-spacing:.001em !important;
    white-space:nowrap !important;
  }

  .trustNote .trustNoteIcon{
    position:relative !important;
    width:26px !important;
    min-width:26px !important;
    max-width:26px !important;
    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
    flex:0 0 26px !important;
    display:grid !important;
    place-items:center !important;
    color:#ffffff !important;
    background:#0f9f8d !important;
    background-image:none !important;
    border:1px solid rgba(14,147,130,.18) !important;
    border-radius:6px !important;
    box-shadow:0 2px 5px rgba(15,159,141,.14),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
    overflow:hidden !important;
  }

  .trustNote .trustNoteIcon::before{
    content:none !important;
    display:none !important;
    background:none !important;
  }

  .trustNote .trustNoteIcon i, html[data-theme="dark"] .trustNote .trustNoteIcon i{
    position:relative !important;
    z-index:1 !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    filter:drop-shadow(0 1px 1px rgba(0,70,66,.16)) !important;
    text-shadow:none !important;
    transform:none !important;
  }

  .trustNote .trustNoteText{
    display:block !important;
    min-width:0 !important;
    color:#526b78 !important;
    font-size:10.2px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    white-space:nowrap !important;
  }
}

@media (max-width:420px){
  .trustNote{
    width:210px !important;
    max-width:calc(100% - 24px) !important;
    min-height:34px !important;
    padding:4px 9px 4px 4px !important;
    gap:8px !important;
    border-radius:8px !important;
    font-size:9.6px !important;
  }

  .trustNote .trustNoteIcon{
    width:25px !important;
    min-width:25px !important;
    max-width:25px !important;
    height:25px !important;
    min-height:25px !important;
    max-height:25px !important;
    flex-basis:25px !important;
    border-radius:6px !important;
  }

  .trustNote .trustNoteText{
    font-size:9.6px !important;
  }
}

@media (max-width:350px){
  .trustNote{
    width:194px !important;
    max-width:calc(100% - 20px) !important;
    padding-right:8px !important;
    gap:7px !important;
    font-size:9px !important;
  }

  .trustNote .trustNoteIcon{
    width:23px !important;
    min-width:23px !important;
    max-width:23px !important;
    height:23px !important;
    min-height:23px !important;
    max-height:23px !important;
    flex-basis:23px !important;
    border-radius:5px !important;
  }

  .trustNote .trustNoteText{
    font-size:9px !important;
  }
}

@media (max-width:620px){
  html[data-theme="dark"] .trustNote{
    color:#bdd0d4 !important;
    background:#102b30 !important;
    background-image:none !important;
    border-color:rgba(255,255,255,.10) !important;
    box-shadow:0 3px 8px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"] .trustNote .trustNoteText{
    color:#bdd0d4 !important;
  }

  html[data-theme="dark"] .trustNote .trustNoteIcon{
    background:#0f9f8d !important;
    background-image:none !important;
    border-color:rgba(15,159,141,.20) !important;
    box-shadow:0 2px 5px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
}

.trustNote, html[data-theme="dark"] .trustNote{
  width:fit-content !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  gap:7px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:var(--muted) !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

.trustNote .trustNoteIcon, html[data-theme="dark"] .trustNote .trustNoteIcon{
  position:relative !important;
  place-items:unset !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}

.trustNote .trustNoteIcon::before, .trustNote .trustNoteIcon::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}

.trustNote .trustNoteText, html[data-theme="dark"] .trustNote .trustNoteText{
  display:inline-block !important;
  min-width:0 !important;
  color:var(--muted) !important;
  font-size:inherit !important;
  line-height:inherit !important;
  font-weight:500 !important;
  white-space:nowrap !important;
}

@media (max-width:620px){
  .trustNote, html[data-theme="dark"] .trustNote{
    position:relative !important;
    top:-30px !important;
    margin-top:20px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    gap:7px !important;
  }
}

@media (max-width:420px){
  .trustNote, html[data-theme="dark"] .trustNote{
    gap:6px !important;
    font-size:9.5px !important;
  }
}

@media (max-width:350px){
  .trustNote, html[data-theme="dark"] .trustNote{
    gap:5px !important;
    font-size:9px !important;
  }
}

@media (min-width:980px){
  .trustNote, html[data-theme="dark"] .trustNote{
    padding:0 !important;
    gap:8px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    font-size:10.5px !important;
  }

  .trustNote .trustNoteIcon, html[data-theme="dark"] .trustNote .trustNoteIcon{
    font-size:13px !important;
  }
}

.trustNote .trustNoteIcon, html[data-theme="dark"] .trustNote .trustNoteIcon{
  display:inline-block !important;
  width:14px !important;
  min-width:14px !important;
  max-width:14px !important;
  height:14px !important;
  min-height:14px !important;
  max-height:14px !important;
  flex:0 0 14px !important;
  margin:0 !important;
  padding:0 !important;
  -webkit-text-fill-color:initial !important;
  background:none !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  line-height:14px !important;
  vertical-align:middle !important;
  filter:drop-shadow(0 1px 1px rgba(14,147,130,.16)) !important;
  overflow:visible !important;
  transform:none !important;
}

.trustNote i.trustNoteIcon::before, html[data-theme="dark"] .trustNote i.trustNoteIcon::before{
  display:inline-block !important;
  color:#0f9f8d !important;
  -webkit-text-fill-color:initial !important;
  background:none !important;
  background-image:none !important;
  line-height:14px !important;
}

.trustNote svg.trustNoteIcon, html[data-theme="dark"] .trustNote svg.trustNoteIcon{
  width:14px !important;
  height:14px !important;
  color:#0f9f8d !important;
  fill:currentColor !important;
  overflow:visible !important;
}

.trustNote .trustNoteIcon::after{
  content:none !important;
  display:none !important;
}

@media (max-width:420px){
  .trustNote .trustNoteIcon, html[data-theme="dark"] .trustNote .trustNoteIcon, .trustNote svg.trustNoteIcon, html[data-theme="dark"] .trustNote svg.trustNoteIcon{
    width:13px !important;
    min-width:13px !important;
    max-width:13px !important;
    height:13px !important;
    min-height:13px !important;
    max-height:13px !important;
    flex-basis:13px !important;
    line-height:13px !important;
  }

  .trustNote i.trustNoteIcon::before, html[data-theme="dark"] .trustNote i.trustNoteIcon::before{
    line-height:13px !important;
  }
}

.trustNote .trustNoteIcon{
  color:#0f9f8d !important;
}

.trustNote .trustNoteIcon svg, .trustNote .trustNoteIcon .svg-inline--fa, html[data-theme="dark"] .trustNote .trustNoteIcon svg, html[data-theme="dark"] .trustNote .trustNoteIcon .svg-inline--fa{
  color:#0f9f8d !important;
  fill:currentColor !important;
  background:none !important;
  background-image:none !important;
}

@media (max-width:620px){
  .trustNote, html[data-theme="dark"] .trustNote{
    font-size:11px !important;
    line-height:1.2 !important;
  }

  .trustNote .trustNoteText, html[data-theme="dark"] .trustNote .trustNoteText{
    font-size:11px !important;
    line-height:1.2 !important;
  }

  .trustNote .trustNoteIcon, html[data-theme="dark"] .trustNote .trustNoteIcon{
    width:16px !important;
    min-width:16px !important;
    max-width:16px !important;
    height:16px !important;
    min-height:16px !important;
    max-height:16px !important;
    flex:0 0 16px !important;
    font-size:16px !important;
    line-height:16px !important;
    color:#0f9f8d !important;
  }

  .trustNote .trustNoteIcon i, html[data-theme="dark"] .trustNote .trustNoteIcon i{
    font-size:15px !important;
    line-height:1 !important;
    color:#0f9f8d !important;
    -webkit-text-fill-color:#0f9f8d !important;
  }

  .trustNote .trustNoteIcon svg, .trustNote .trustNoteIcon .svg-inline--fa, html[data-theme="dark"] .trustNote .trustNoteIcon svg, html[data-theme="dark"] .trustNote .trustNoteIcon .svg-inline--fa, .trustNote svg.trustNoteIcon, html[data-theme="dark"] .trustNote svg.trustNoteIcon{
    width:16px !important;
    min-width:16px !important;
    max-width:16px !important;
    height:16px !important;
    min-height:16px !important;
    max-height:16px !important;
    color:#0f9f8d !important;
    fill:currentColor !important;
  }
}

@media (max-width:420px){
  .trustNote, html[data-theme="dark"] .trustNote, .trustNote .trustNoteText, html[data-theme="dark"] .trustNote .trustNoteText{
    font-size:10.5px !important;
  }

  .trustNote .trustNoteIcon, html[data-theme="dark"] .trustNote .trustNoteIcon{
    width:15px !important;
    min-width:15px !important;
    max-width:15px !important;
    height:15px !important;
    min-height:15px !important;
    max-height:15px !important;
    flex:0 0 15px !important;
    font-size:15px !important;
    line-height:15px !important;
  }

  .trustNote .trustNoteIcon i, html[data-theme="dark"] .trustNote .trustNoteIcon i{
    font-size:14px !important;
  }

  .trustNote .trustNoteIcon svg, .trustNote .trustNoteIcon .svg-inline--fa, html[data-theme="dark"] .trustNote .trustNoteIcon svg, html[data-theme="dark"] .trustNote .trustNoteIcon .svg-inline--fa, .trustNote svg.trustNoteIcon, html[data-theme="dark"] .trustNote svg.trustNoteIcon{
    width:15px !important;
    min-width:15px !important;
    max-width:15px !important;
    height:15px !important;
    min-height:15px !important;
    max-height:15px !important;
  }
}

@media (max-width:350px){
  .trustNote, html[data-theme="dark"] .trustNote, .trustNote .trustNoteText, html[data-theme="dark"] .trustNote .trustNoteText{
    font-size:10px !important;
  }

  .trustNote .trustNoteIcon, html[data-theme="dark"] .trustNote .trustNoteIcon{
    width:14px !important;
    min-width:14px !important;
    max-width:14px !important;
    height:14px !important;
    min-height:14px !important;
    max-height:14px !important;
    flex:0 0 14px !important;
    font-size:14px !important;
    line-height:14px !important;
  }

  .trustNote .trustNoteIcon i, html[data-theme="dark"] .trustNote .trustNoteIcon i{
    font-size:13px !important;
  }

  .trustNote .trustNoteIcon svg, .trustNote .trustNoteIcon .svg-inline--fa, html[data-theme="dark"] .trustNote .trustNoteIcon svg, html[data-theme="dark"] .trustNote .trustNoteIcon .svg-inline--fa, .trustNote svg.trustNoteIcon, html[data-theme="dark"] .trustNote svg.trustNoteIcon{
    width:14px !important;
    height:14px !important;
  }
}

@media (max-width:620px){
  .heroBrandName{
    font-size:39px !important;
    line-height:.98 !important;
  }

  .heroBrandTagline{
    margin-top:6px !important;
    font-size:14px !important;
    line-height:1 !important;
  }
}

@media (max-width:420px){
  .heroBrandName{
    font-size:35px !important;
  }

  .heroBrandTagline{
    font-size:13px !important;
  }
}

@media (max-width:350px){
  .heroBrandName{
    font-size:31px !important;
  }

  .heroBrandTagline{
    font-size:11.5px !important;
  }
}

.trustNote .trustNoteIcon, html[data-theme="dark"] .trustNote .trustNoteIcon{
  color:var(--muted) !important;
}

.trustNote .trustNoteIcon i, html[data-theme="dark"] .trustNote .trustNoteIcon i{
  color:var(--muted) !important;
  -webkit-text-fill-color:var(--muted) !important;
  background:none !important;
  background-image:none !important;
  text-shadow:none !important;
  filter:drop-shadow(0 1px 1px rgba(16,70,80,.06)) !important;
}

.trustNote .trustNoteIcon svg, .trustNote .trustNoteIcon .svg-inline--fa, html[data-theme="dark"] .trustNote .trustNoteIcon svg, html[data-theme="dark"] .trustNote .trustNoteIcon .svg-inline--fa, .trustNote svg.trustNoteIcon, html[data-theme="dark"] .trustNote svg.trustNoteIcon{
  color:var(--muted) !important;
  fill:currentColor !important;
}

.heroBrandName, html[data-theme="dark"] .heroBrandName{
  color:#0e9382 !important;
  background:linear-gradient(
      90deg,
      #0e9382 0%,
      #0f9f8d 24%,
      #43b796 46%,
      #79c875 66%,
      #a8d653 83%,
      #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;
  display:inline-block !important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.heroBrandName, html[data-theme="dark"] .heroBrandName{
  filter:drop-shadow(0 1px 1px rgba(14,93,82,.14))
    drop-shadow(0 3px 5px rgba(16,70,80,.09)) !important;
  text-shadow:0 -0.35px 0 rgba(255,255,255,.22) !important;
}

@media (max-width:620px){
  .heroBrandName, html[data-theme="dark"] .heroBrandName{
    filter:drop-shadow(0 1px 1px rgba(14,93,82,.13))
      drop-shadow(0 2px 4px rgba(16,70,80,.075)) !important;
    text-shadow:0 -0.3px 0 rgba(255,255,255,.20) !important;
  }
}

html[data-theme="dark"] .heroBrandName{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.24))
    drop-shadow(0 3px 6px rgba(0,0,0,.18)) !important;
  text-shadow:0 -0.3px 0 rgba(255,255,255,.10) !important;
}

.brandCopy strong, html[data-theme="dark"] .brandCopy strong{
  color:#0e9382 !important;
  background:linear-gradient(
      90deg,
      #0e9382 0%,
      #0f9f8d 24%,
      #43b796 46%,
      #79c875 66%,
      #a8d653 83%,
      #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;
  display:inline-block !important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  filter:drop-shadow(0 1px 1px rgba(14,93,82,.14))
    drop-shadow(0 3px 5px rgba(16,70,80,.09)) !important;
  text-shadow:0 -0.35px 0 rgba(255,255,255,.22) !important;
}

@media (max-width:620px){
  .brandCopy strong, html[data-theme="dark"] .brandCopy strong{
    filter:drop-shadow(0 1px 1px rgba(14,93,82,.13))
      drop-shadow(0 2px 4px rgba(16,70,80,.075)) !important;
    text-shadow:0 -0.3px 0 rgba(255,255,255,.20) !important;
  }
}

html[data-theme="dark"] .brandCopy strong{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.24))
    drop-shadow(0 3px 6px rgba(0,0,0,.18)) !important;
  text-shadow:0 -0.3px 0 rgba(255,255,255,.10) !important;
}

/* =========================================================
   FINAL DESKTOP TRUST + RSAB INSTITUTION SCALE
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   PERUBAHAN:
   - Trust note diperbesar agar lebih mudah dibaca.
   - Icon trust note ikut diperbesar proporsional.
   - Peningkatan Mutu dan #RSAB Harapan Kita diperbesar lagi.
   - Peningkatan Mutu dibuat regular / normal, bukan bold.
   - Identitas RSAB digeser lebih ke bawah dari trustNote.
   - HP / tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .trustNote,
  html[data-theme="dark"] .trustNote{
    margin-top:18px !important;
    gap:9px !important;
    font-size:12.5px !important;
    line-height:1.24 !important;
    font-weight:500 !important;
  }

  .trustNote .trustNoteText,
  html[data-theme="dark"] .trustNote .trustNoteText{
    font-size:12.5px !important;
    line-height:1.24 !important;
    font-weight:500 !important;
  }

  .trustNote .trustNoteIcon,
  html[data-theme="dark"] .trustNote .trustNoteIcon{
    width:17px !important;
    min-width:17px !important;
    max-width:17px !important;
    height:17px !important;
    min-height:17px !important;
    max-height:17px !important;
    flex:0 0 17px !important;
    font-size:17px !important;
    line-height:17px !important;
  }

  .trustNote .trustNoteIcon i,
  html[data-theme="dark"] .trustNote .trustNoteIcon i{
    font-size:16px !important;
    line-height:1 !important;
  }

  .trustNote .trustNoteIcon svg,
  .trustNote .trustNoteIcon .svg-inline--fa,
  html[data-theme="dark"] .trustNote .trustNoteIcon svg,
  html[data-theme="dark"] .trustNote .trustNoteIcon .svg-inline--fa{
    width:17px !important;
    min-width:17px !important;
    max-width:17px !important;
    height:17px !important;
    min-height:17px !important;
    max-height:17px !important;
  }

  .desktopHeroInstitution{
    margin-top:24px !important;
  }

  .desktopHeroInstitutionCopy{
    gap:5px !important;
  }

  .desktopHeroInstitutionProgram{
    font-size:15px !important;
    line-height:1.12 !important;
    font-weight:400 !important;
    font-variation-settings:"wght" 400 !important;
    letter-spacing:.010em !important;
  }

  .desktopHeroInstitutionText{
    font-size:12px !important;
    line-height:1.14 !important;
    font-weight:400 !important;
    font-variation-settings:"wght" 400 !important;
    letter-spacing:.018em !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT - TETAP PROPORSIONAL
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .trustNote,
  html[data-theme="dark"] .trustNote{
    margin-top:12px !important;
    font-size:11.8px !important;
  }

  .trustNote .trustNoteText,
  html[data-theme="dark"] .trustNote .trustNoteText{
    font-size:11.8px !important;
  }

  .trustNote .trustNoteIcon,
  html[data-theme="dark"] .trustNote .trustNoteIcon{
    width:16px !important;
    min-width:16px !important;
    max-width:16px !important;
    height:16px !important;
    min-height:16px !important;
    max-height:16px !important;
    flex-basis:16px !important;
    font-size:16px !important;
    line-height:16px !important;
  }

  .trustNote .trustNoteIcon i,
  html[data-theme="dark"] .trustNote .trustNoteIcon i{
    font-size:15px !important;
  }

  .desktopHeroInstitution{
    margin-top:19px !important;
  }

  .desktopHeroInstitutionProgram{
    font-size:13.8px !important;
    font-weight:400 !important;
    font-variation-settings:"wght" 400 !important;
  }

  .desktopHeroInstitutionText{
    font-size:11px !important;
    font-weight:400 !important;
    font-variation-settings:"wght" 400 !important;
  }
}

/* =========================================================
   FINAL DESKTOP BENEFIT STACK - HIDDEN
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   PERUBAHAN:
   - Seluruh benefitStack pada visualHero disembunyikan.
   - Tiga benefitCard tidak tampil pada laptop/desktop.
   - Struktur HTML dan JavaScript tetap dipertahankan agar
     tampilan HP dan tablet yang sudah stabil tidak berubah.
   - Inline style dari JavaScript pada benefitCard tidak
     memengaruhi hasil karena parent benefitStack di-hide.
   ========================================================= */
@media (min-width:980px){
  .visualHero [data-benefit-stack],
  .visualHero .benefitStack{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* =========================================================
   FINAL DESKTOP LEFT ALIGNMENT - NAVBAR / HERO / FOOTER
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Batas kiri contentPanel disejajarkan dengan batas kiri
     brand/logo Bumil Ku pada navbar.
   - Copyright footer menggunakan batas kiri yang sama.
   - Area visualHero, navbar kanan, legal links footer,
     HP, dan tablet tidak diubah.

   ACUAN:
   - Navbar desktop memakai left gutter:
     clamp(34px, 5vw, 88px)
   - Laptop compact 980-1150 memakai 24px.
   ========================================================= */
@media (min-width:980px){
  .contentPanel{
    padding-left:clamp(34px, 5vw, 88px) !important;
  }

  .appFooter{
    padding-left:clamp(34px, 5vw, 88px) !important;
  }

  .footerCopyright{
    margin-left:0 !important;
    justify-self:start !important;
  }
}

/* =========================================================
   LAPTOP COMPACT 980-1150 - MATCH NAVBAR LEFT GUTTER
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){
  .contentPanel{
    padding-left:24px !important;
  }

  .appFooter{
    padding-left:24px !important;
  }
}

/* =========================================================
   FINAL DESKTOP HERO ACTIONS - PROPORTIONAL SIZE
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Mengecilkan proporsi tombol Daftar / Masuk dan Google.
   - Menjaga tombol tetap premium tetapi tidak terlalu besar.
   - Menyesuaikan tinggi, radius, font, icon, dan lebar grup.
   - HP dan tablet tidak diubah.
   ========================================================= */
@media (min-width:980px){
  .heroActions{
    width:100% !important;
    max-width:520px !important;
    margin-top:24px !important;
    gap:10px !important;
  }

  .primaryAction,
  .googleAction{
    min-height:52px !important;
    padding:0 14px !important;
    grid-template-columns:34px minmax(0,1fr) 34px !important;
    gap:7px !important;
    border-radius:16px !important;
    font-size:13.2px !important;
    line-height:1 !important;
  }

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

  .actionTrailing,
  .googleTrailing{
    width:30px !important;
    height:30px !important;
    font-size:9.5px !important;
  }

  .googleIconWrap{
    width:29px !important;
    height:29px !important;
  }

  .googleIcon{
    width:18px !important;
    height:18px !important;
  }
}

/* =========================================================
   DESKTOP LEBAR >=1280PX
   Dua tombol tetap sejajar horizontal, tetapi tidak melebar
   berlebihan terhadap komposisi contentPanel.
   ========================================================= */
@media (min-width:1280px){
  .heroActions{
    max-width:540px !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
  }

  .primaryAction,
  .googleAction{
    min-height:52px !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT <=820PX
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .heroActions{
    max-width:500px !important;
    margin-top:15px !important;
    gap:8px !important;
  }

  .primaryAction,
  .googleAction{
    min-height:48px !important;
    padding-left:12px !important;
    padding-right:12px !important;
    grid-template-columns:32px minmax(0,1fr) 32px !important;
    border-radius:15px !important;
    font-size:12.5px !important;
  }

  .actionLeading{
    font-size:16px !important;
  }

  .actionTrailing,
  .googleTrailing{
    width:28px !important;
    height:28px !important;
    font-size:9px !important;
  }

  .googleIconWrap{
    width:27px !important;
    height:27px !important;
  }

  .googleIcon{
    width:17px !important;
    height:17px !important;
  }
}

/* =========================================================
   FINAL DESKTOP HERO ACTIONS - EXTRA COMPACT
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   PERUBAHAN:
   - Tombol Daftar / Masuk dan Google diperkecil lagi.
   - Lebar grup tombol dibuat lebih ringkas.
   - Tinggi, font, radius, icon, dan trailing button ikut
     diperkecil secara proporsional.
   - HP dan tablet tetap tidak diubah.
   ========================================================= */
@media (min-width:980px){
  .heroActions{
    width:100% !important;
    max-width:470px !important;
    margin-top:22px !important;
    gap:8px !important;
  }

  .primaryAction,
  .googleAction{
    min-height:46px !important;
    padding:0 12px !important;
    grid-template-columns:30px minmax(0,1fr) 30px !important;
    gap:6px !important;
    border-radius:14px !important;
    font-size:12.2px !important;
    line-height:1 !important;
  }

  .actionLeading{
    font-size:15px !important;
  }

  .actionTrailing,
  .googleTrailing{
    width:26px !important;
    height:26px !important;
    font-size:8.5px !important;
  }

  .googleIconWrap{
    width:25px !important;
    height:25px !important;
  }

  .googleIcon{
    width:16px !important;
    height:16px !important;
  }
}

/* =========================================================
   DESKTOP LEBAR >=1280PX
   Tetap dua kolom, tetapi lebih compact.
   ========================================================= */
@media (min-width:1280px){
  .heroActions{
    max-width:490px !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
  }

  .primaryAction,
  .googleAction{
    min-height:46px !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT <=820PX
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .heroActions{
    max-width:450px !important;
    margin-top:14px !important;
    gap:7px !important;
  }

  .primaryAction,
  .googleAction{
    min-height:43px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    grid-template-columns:28px minmax(0,1fr) 28px !important;
    border-radius:13px !important;
    font-size:11.6px !important;
  }

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

  .actionTrailing,
  .googleTrailing{
    width:24px !important;
    height:24px !important;
    font-size:8px !important;
  }

  .googleIconWrap{
    width:23px !important;
    height:23px !important;
  }

  .googleIcon{
    width:15px !important;
    height:15px !important;
  }
}

/* =========================================================
   FINAL DESKTOP HERO BRAND - ENLARGED
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Memperbesar komposisi identitas Bumil Ku pada contentPanel.
   - Memperbesar heart logo, nama Bumil Ku, dan tagline.
   - Tetap menjaga proporsi premium enterprise.
   - Shadow, gradient text, dan heart mask existing tetap dipakai.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .heroBrandCard{
    gap:18px !important;
  }

  .heroBrandLogoWrap{
    width:88px !important;
    min-width:88px !important;
    max-width:88px !important;
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;
  }

  .heroBrandLogoWrap .heroBrandLogo{
    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;
    height:76px !important;
    min-height:76px !important;
    max-height:76px !important;
  }

  .heroBrandName{
    font-size:52px !important;
    line-height:.97 !important;
    letter-spacing:-.052em !important;
  }

  .heroBrandTagline{
    margin-top:7px !important;
    font-size:15px !important;
    line-height:1.05 !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT <=820PX
   Tetap lebih besar dari versi sebelumnya tetapi tidak
   mengganggu ruang headline dan tombol.
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .heroBrandCard{
    gap:16px !important;
  }

  .heroBrandLogoWrap{
    width:80px !important;
    min-width:80px !important;
    max-width:80px !important;
    height:80px !important;
    min-height:80px !important;
    max-height:80px !important;
  }

  .heroBrandLogoWrap .heroBrandLogo{
    width:69px !important;
    min-width:69px !important;
    max-width:69px !important;
    height:69px !important;
    min-height:69px !important;
    max-height:69px !important;
  }

  .heroBrandName{
    font-size:46px !important;
  }

  .heroBrandTagline{
    margin-top:6px !important;
    font-size:13.5px !important;
  }
}

/* =========================================================
   LAPTOP SANGAT PENDEK <=760PX
   Tetap diperbesar dibanding baseline lama.
   ========================================================= */
@media (min-width:980px) and (max-height:760px){
  .heroBrandCard{
    gap:15px !important;
  }

  .heroBrandLogoWrap{
    width:74px !important;
    min-width:74px !important;
    max-width:74px !important;
    height:74px !important;
    min-height:74px !important;
    max-height:74px !important;
  }

  .heroBrandLogoWrap .heroBrandLogo{
    width:64px !important;
    min-width:64px !important;
    max-width:64px !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
  }

  .heroBrandName{
    font-size:43px !important;
  }

  .heroBrandTagline{
    margin-top:5px !important;
    font-size:12.5px !important;
  }
}

/* =========================================================
   FINAL DESKTOP HERO LOGO - LOGO ONLY ENLARGED
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Hanya memperbesar heart logo Bumil Ku.
   - Ukuran teks "Bumil Ku" dan "AI Pregnancy Companion"
     tidak diubah dari baseline terbaru.
   - Posisi headline, tombol, trust note, dan elemen lain
     tetap seperti sebelumnya.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .heroBrandLogoWrap{
    width:104px !important;
    min-width:104px !important;
    max-width:104px !important;
    height:104px !important;
    min-height:104px !important;
    max-height:104px !important;
  }

  .heroBrandLogoWrap .heroBrandLogo{
    width:90px !important;
    min-width:90px !important;
    max-width:90px !important;
    height:90px !important;
    min-height:90px !important;
    max-height:90px !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT <=820PX
   Logo tetap lebih besar, namun tetap proporsional.
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .heroBrandLogoWrap{
    width:94px !important;
    min-width:94px !important;
    max-width:94px !important;
    height:94px !important;
    min-height:94px !important;
    max-height:94px !important;
  }

  .heroBrandLogoWrap .heroBrandLogo{
    width:81px !important;
    min-width:81px !important;
    max-width:81px !important;
    height:81px !important;
    min-height:81px !important;
    max-height:81px !important;
  }
}

/* =========================================================
   LAPTOP SANGAT PENDEK <=760PX
   Tetap lebih besar dari baseline lama tanpa mengganggu layout.
   ========================================================= */
@media (min-width:980px) and (max-height:760px){
  .heroBrandLogoWrap{
    width:86px !important;
    min-width:86px !important;
    max-width:86px !important;
    height:86px !important;
    min-height:86px !important;
    max-height:86px !important;
  }

  .heroBrandLogoWrap .heroBrandLogo{
    width:74px !important;
    min-width:74px !important;
    max-width:74px !important;
    height:74px !important;
    min-height:74px !important;
    max-height:74px !important;
  }
}

/* =========================================================
   FINAL DESKTOP VISUAL HERO - PREMIUM 3D RAISED SHADOW
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Mengembalikan contentPanel seperti versi sebelumnya.
   - Hanya memperkuat shadow pada card foto .visualHero.
   - Memberi efek lebih timbul / raised / 3D tanpa membuat
     tampilan terlalu berat atau seperti floating card.
   - Ukuran, posisi, foto, tint, radius, dan layout tidak diubah.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .visualHero{
    box-shadow:
      /* contact shadow dekat permukaan */
      0 3px 6px rgba(13,57,66,.075),

      /* depth utama */
      0 11px 24px rgba(16,70,80,.105),
      0 24px 48px rgba(16,70,80,.145),

      /* ambient shadow lebar */
      0 42px 78px rgba(15,91,95,.125),
      0 62px 118px rgba(15,91,95,.075),

      /* sedikit depth lateral agar card lebih dimensional */
      -8px 14px 28px rgba(16,70,80,.050),
      12px 18px 34px rgba(16,70,80,.055),

      /* bevel / highlight pada frame */
      inset 0 1px 0 rgba(255,255,255,.92),
      inset 1px 0 0 rgba(255,255,255,.34),
      inset -1px 0 0 rgba(15,159,141,.035),
      inset 0 -2px 0 rgba(13,72,80,.065) !important;

    transform:translateZ(0) !important;
    backface-visibility:hidden !important;
  }

  /*
   * Inner frame dibuat sedikit lebih tegas supaya foto
   * terasa memiliki ketebalan edge, bukan sekadar shadow luar.
   */
  .visualHero::before{
    border-color:rgba(255,255,255,.58) !important;

    box-shadow:
      inset 0 0 0 1px rgba(15,159,141,.030),
      inset 0 2px 0 rgba(255,255,255,.44),
      inset 1px 0 0 rgba(255,255,255,.16),
      inset -1px 0 0 rgba(15,159,141,.024),
      inset 0 -2px 0 rgba(13,72,80,.075) !important;
  }

  html[data-theme="dark"] .visualHero{
    box-shadow:
      0 3px 7px rgba(0,0,0,.28),
      0 12px 26px rgba(0,0,0,.32),
      0 28px 58px rgba(0,0,0,.42),
      0 46px 92px rgba(0,0,0,.30),
      0 66px 126px rgba(0,0,0,.19),
      -8px 14px 28px rgba(0,0,0,.16),
      12px 18px 36px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.060),
      inset 1px 0 0 rgba(255,255,255,.026),
      inset -1px 0 0 rgba(15,159,141,.024),
      inset 0 -2px 0 rgba(0,0,0,.24) !important;
  }

  html[data-theme="dark"] .visualHero::before{
    border-color:rgba(255,255,255,.075) !important;

    box-shadow:
      inset 0 0 0 1px rgba(15,159,141,.028),
      inset 0 1px 0 rgba(255,255,255,.035),
      inset 1px 0 0 rgba(255,255,255,.018),
      inset 0 -2px 0 rgba(0,0,0,.22) !important;
  }
}

/* =========================================================
   FINAL DESKTOP NAVBAR UTILITIES - SEGMENTED TOGGLE
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   REFERENSI VISUAL:
   - Bahasa tampil sebagai satu pill: ID | EN.
   - Theme tampil sebagai satu pill: Light | Dark.
   - Segment aktif memakai surface putih yang sedikit timbul.
   - Segment tidak aktif lebih menyatu dengan background pill.
   - Tidak memakai tooltip.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .desktopNavbarUtilities{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    margin-left:auto !important;

    overflow:visible !important;
  }

  .desktopSegmentedControl{
    position:relative !important;

    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    align-items:center !important;

    width:78px !important;
    height:34px !important;

    padding:3px !important;

    background:
      linear-gradient(
        180deg,
        rgba(246,249,250,.98) 0%,
        rgba(238,243,245,.98) 100%
      ) !important;

    border:1px solid rgba(76,108,121,.08) !important;
    border-radius:999px !important;

    box-shadow:
      0 7px 18px rgba(16,70,80,.075),
      inset 0 1px 2px rgba(42,74,87,.065),
      inset 0 1px 0 rgba(255,255,255,.92) !important;

    overflow:hidden !important;
    isolation:isolate !important;
  }

  .desktopSegmentedControl--theme{
    width:78px !important;
  }

  .desktopSegmentOption{
    appearance:none !important;
    -webkit-appearance:none !important;

    position:relative !important;
    z-index:1 !important;

    width:100% !important;
    height:28px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#91a0a9 !important;
    background:transparent !important;

    border:0 !important;
    border-radius:999px !important;
    outline:0 !important;
    box-shadow:none !important;

    font-family:inherit !important;
    line-height:1 !important;

    cursor:pointer !important;
    touch-action:manipulation !important;

    transition:
      color .18s ease,
      background .18s ease,
      box-shadow .18s ease,
      transform .18s ease !important;
  }

  .desktopSegmentOption--text{
    font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.025em !important;
  }

  .desktopSegmentOption--icon{
    font-size:11px !important;
  }

  .desktopSegmentOption--icon i{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    transform:none !important;
  }

  /*
   * ACTIVE SEGMENT
   */
  .desktopSegmentOption[aria-pressed="true"]{
    color:#243844 !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,1) 0%,
        rgba(250,252,253,.99) 100%
      ) !important;

    box-shadow:
      0 3px 8px rgba(18,58,70,.10),
      0 1px 3px rgba(18,58,70,.055),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    transform:translateY(-.5px) !important;
  }

  .desktopSegmentOption:hover{
    color:#0e9382 !important;
  }

  .desktopSegmentOption:focus-visible{
    outline:2px solid rgba(15,159,141,.28) !important;
    outline-offset:-1px !important;
  }

  /*
   * Theme active dibuat sedikit lebih tegas agar mode aktif
   * terbaca cepat tanpa mengubah gaya formal navbar.
   */
  .desktopSegmentedControl--theme
  .desktopSegmentOption[aria-pressed="true"]{
    color:#294052 !important;
  }

  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"] .desktopSegmentedControl{
    background:
      linear-gradient(
        180deg,
        rgba(18,48,53,.98) 0%,
        rgba(11,37,42,.99) 100%
      ) !important;

    border-color:rgba(255,255,255,.07) !important;

    box-shadow:
      0 8px 20px rgba(0,0,0,.22),
      inset 0 1px 2px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"] .desktopSegmentOption{
    color:#7f9ba2 !important;
  }

  html[data-theme="dark"]
  .desktopSegmentOption[aria-pressed="true"]{
    color:#eafcff !important;

    background:
      linear-gradient(
        180deg,
        rgba(35,70,75,.98) 0%,
        rgba(26,59,64,.99) 100%
      ) !important;

    box-shadow:
      0 4px 9px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.055) !important;
  }

  html[data-theme="dark"]
  .desktopSegmentOption:hover{
    color:#73e6dd !important;
  }
}

/* =========================================================
   LAPTOP COMPACT 980 - 1150
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){
  .desktopNavbarUtilities{
    gap:6px !important;
  }

  .desktopSegmentedControl,
  .desktopSegmentedControl--theme{
    width:68px !important;
    height:30px !important;
    padding:3px !important;
  }

  .desktopSegmentOption{
    height:24px !important;
  }

  .desktopSegmentOption--text{
    font-size:8.8px !important;
  }

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


/* =========================================================
   FINAL DESKTOP NAVBAR UTILITIES - BEFORE LOGIN
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   POSISI FINAL NAVBAR:
   Beranda • Manfaat • Artikel • Tentang Kami •
   [ID|EN] [Light|Dark] • Masuk

   PERUBAHAN:
   - desktopNavbarUtilities sekarang berada di dalam desktopNav.
   - Ditempatkan tepat di sebelah kiri tombol Masuk.
   - desktopNav kembali memakai margin-left:auto agar seluruh
     kelompok navigasi tetap berada di sisi kanan navbar.
   - Style segmented toggle existing tetap dipertahankan.
   - HP dan tablet tidak diubah.
   ========================================================= */
@media (min-width:980px){
  .desktopNav{
    margin-left:auto !important;
  }

  .desktopNav > .desktopNavbarUtilities{
    position:relative !important;
    z-index:5 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex:0 0 auto !important;

    margin:0 5px 0 6px !important;
    padding:0 !important;

    gap:8px !important;
  }

  .desktopNav > .desktopNavbarUtilities + .desktopNavLogin{
    margin-left:2px !important;
  }
}

/* =========================================================
   LAPTOP COMPACT 980 - 1150
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){
  .desktopNav > .desktopNavbarUtilities{
    margin-left:3px !important;
    margin-right:3px !important;
    gap:6px !important;
  }

  .desktopNav > .desktopNavbarUtilities + .desktopNavLogin{
    margin-left:1px !important;
  }
}

/* =========================================================
   FINAL DESKTOP CTA + NAV LOGIN - PREMIUM TEAL GRADIENT
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   REFERENSI VISUAL:
   - Teal lebih gelap pada sisi kiri.
   - Bertransisi ke teal-green yang lebih terang di kanan.
   - Surface tetap bersih, premium, dan sedikit timbul.
   - Ukuran, posisi, icon, radius, dan layout tombol existing
     tidak diubah.
   - Tombol Google tidak diubah.
   - HP dan tablet tetap terkunci.
   ========================================================= */
@media (min-width:980px){
  .primaryAction,
  .desktopNav .desktopNavLogin{
    color:#ffffff !important;

    background:
      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;

    border-color:rgba(255,255,255,.20) !important;

    box-shadow:
      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;
  }

  .primaryAction:hover,
  .desktopNav .desktopNavLogin:hover{
    color:#ffffff !important;

    background:
      radial-gradient(
        circle at 18% 0%,
        rgba(255,255,255,.21) 0%,
        rgba(255,255,255,.09) 30%,
        rgba(255,255,255,0) 54%
      ),
      linear-gradient(
        105deg,
        #07857d 0%,
        #0c9588 28%,
        #14a38f 53%,
        #1caf94 75%,
        #2abe9f 100%
      ) !important;

    border-color:rgba(255,255,255,.25) !important;

    box-shadow:
      0 14px 30px rgba(4,112,103,.26),
      0 6px 13px rgba(7,126,116,.16),
      inset 0 1px 0 rgba(255,255,255,.44),
      inset 0 -1px 0 rgba(3,102,96,.10) !important;
  }

  .primaryAction:active,
  .desktopNav .desktopNavLogin:active{
    background:
      linear-gradient(
        105deg,
        #087970 0%,
        #0a897f 30%,
        #109687 56%,
        #1aa58e 78%,
        #22b095 100%
      ) !important;

    box-shadow:
      0 7px 16px rgba(4,112,103,.19),
      inset 0 1px 0 rgba(255,255,255,.26),
      inset 0 2px 5px rgba(4,103,96,.12) !important;
  }

  /*
   * Dark mode tetap memakai family warna yang sama agar
   * identitas tombol konsisten antara light dan dark mode.
   */
  html[data-theme="dark"] .primaryAction,
  html[data-theme="dark"] .desktopNav .desktopNavLogin{
    background:
      radial-gradient(
        circle at 18% 0%,
        rgba(255,255,255,.13) 0%,
        rgba(255,255,255,.05) 30%,
        rgba(255,255,255,0) 54%
      ),
      linear-gradient(
        105deg,
        #07776f 0%,
        #09867c 28%,
        #0f9483 54%,
        #17a18a 76%,
        #20ae92 100%
      ) !important;

    border-color:rgba(255,255,255,.12) !important;

    box-shadow:
      0 13px 28px rgba(0,0,0,.30),
      0 5px 12px rgba(7,126,116,.12),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  html[data-theme="dark"] .primaryAction:hover,
  html[data-theme="dark"] .desktopNav .desktopNavLogin:hover{
    background:
      radial-gradient(
        circle at 18% 0%,
        rgba(255,255,255,.16) 0%,
        rgba(255,255,255,.06) 30%,
        rgba(255,255,255,0) 54%
      ),
      linear-gradient(
        105deg,
        #087f77 0%,
        #0b9083 30%,
        #12a08b 56%,
        #1aae92 78%,
        #27ba9a 100%
      ) !important;

    box-shadow:
      0 16px 34px rgba(0,0,0,.34),
      0 6px 14px rgba(7,126,116,.14),
      inset 0 1px 0 rgba(255,255,255,.22) !important;
  }
}

/* =========================================================
   FINAL MOBILE CTA - PREMIUM TEAL GRADIENT
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Menyamakan warna tombol Daftar / Masuk di HP dengan
     premium teal gradient versi laptop/desktop.
   - Teal gelap pada sisi kiri -> teal-green lebih terang
     pada sisi kanan.
   - Ukuran, posisi, radius, icon, dan layout HP tetap sama.
   - Tombol Google tidak diubah.
   ========================================================= */
@media (max-width:620px){
  .primaryAction{
    color:#ffffff !important;

    background:
      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;

    border-color:rgba(255,255,255,.20) !important;

    box-shadow:
      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;
  }

  .primaryAction:hover{
    background:
      radial-gradient(
        circle at 18% 0%,
        rgba(255,255,255,.21) 0%,
        rgba(255,255,255,.09) 30%,
        rgba(255,255,255,0) 54%
      ),
      linear-gradient(
        105deg,
        #07857d 0%,
        #0c9588 28%,
        #14a38f 53%,
        #1caf94 75%,
        #2abe9f 100%
      ) !important;

    box-shadow:
      0 14px 30px rgba(4,112,103,.26),
      0 6px 13px rgba(7,126,116,.16),
      inset 0 1px 0 rgba(255,255,255,.44),
      inset 0 -1px 0 rgba(3,102,96,.10) !important;
  }

  .primaryAction:active{
    background:
      linear-gradient(
        105deg,
        #087970 0%,
        #0a897f 30%,
        #109687 56%,
        #1aa58e 78%,
        #22b095 100%
      ) !important;

    box-shadow:
      0 7px 16px rgba(4,112,103,.19),
      inset 0 1px 0 rgba(255,255,255,.26),
      inset 0 2px 5px rgba(4,103,96,.12) !important;
  }

  html[data-theme="dark"] .primaryAction{
    background:
      radial-gradient(
        circle at 18% 0%,
        rgba(255,255,255,.13) 0%,
        rgba(255,255,255,.05) 30%,
        rgba(255,255,255,0) 54%
      ),
      linear-gradient(
        105deg,
        #07776f 0%,
        #09867c 28%,
        #0f9483 54%,
        #17a18a 76%,
        #20ae92 100%
      ) !important;

    border-color:rgba(255,255,255,.12) !important;

    box-shadow:
      0 13px 28px rgba(0,0,0,.30),
      0 5px 12px rgba(7,126,116,.12),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
}


/* =========================================================
   FINAL HERO HEADLINE - NAVY + TEAL DUOTONE
   =========================================================
   REFERENSI:
   - "Tenang Jalani" = navy / charcoal premium.
   - "Kehamilan"     = teal premium.
   - Kedua span tetap inline sehingga wrapping responsive
     existing tidak dipaksa berubah.
   - Ukuran, posisi, line-height, dan spacing headline existing
     tetap dikendalikan rule .heroHeadline yang sudah ada.
   ========================================================= */

.heroHeadline{
  color:#24384b !important;
}

.heroHeadlinePrimary{
  color:#24384b !important;
  -webkit-text-fill-color:#24384b !important;

  text-shadow:
    0 1px 1px rgba(19,43,58,.055) !important;

  filter:
    drop-shadow(0 1px 1px rgba(19,43,58,.035)) !important;
}

.heroHeadlineAccent{
  color:#0e9382 !important;

  background:
    linear-gradient(
      90deg,
      #0e9382 0%,
      #0f9f8d 38%,
      #18a893 68%,
      #25b79a 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;

  text-shadow:
    0 -0.25px 0 rgba(255,255,255,.16) !important;

  filter:
    drop-shadow(0 1px 1px rgba(14,93,82,.10))
    drop-shadow(0 2px 4px rgba(16,70,80,.055)) !important;
}

/* Dark mode */
html[data-theme="dark"] .heroHeadline{
  color:#eafcff !important;
}

html[data-theme="dark"] .heroHeadlinePrimary{
  color:#eafcff !important;
  -webkit-text-fill-color:#eafcff !important;

  text-shadow:
    0 1px 1px rgba(0,0,0,.22) !important;

  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.16)) !important;
}

html[data-theme="dark"] .heroHeadlineAccent{
  background:
    linear-gradient(
      90deg,
      #53d7cf 0%,
      #53ebe8 44%,
      #72e3ca 72%,
      #8de0b3 100%
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;

  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.18)) !important;
}

/* =========================================================
   FINAL DESKTOP HEART LOGO - MOBILE SHAPE MATCH
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Bentuk heart pada hero logo dan navbar logo mengikuti
     versi HP yang sudah terbukti tidak memotong lengkungan atas.
   - Area upper-left / upper-right heart dibuat lebih lega.
   - Logo sedikit digeser turun agar kepala / detail atas logo
     tidak tersentuh mask.
   - Ukuran logo, shadow, posisi layout, dan teks tidak diubah.
   - HP / tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .heroBrandLogoWrap,
  html[data-theme="dark"] .heroBrandLogoWrap{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C20 67 8 54 7 37 C6 20 18 8 34 7 C42 7 48 11 50 19 C53 15 59 12 67 13 C81 14 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C20 67 8 54 7 37 C6 20 18 8 34 7 C42 7 48 11 50 19 C53 15 59 12 67 13 C81 14 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;
    -webkit-mask-position:center !important;
    mask-position:center !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
  }

  .heroBrandLogoWrap .heroBrandLogo{
    transform:translate3d(-0.4%, 1.25%, 0) !important;
  }

  .brandLogoShadow .brandLogoWrap,
  html[data-theme="dark"] .brandLogoShadow .brandLogoWrap{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C20 67 8 54 7 37 C6 20 18 8 34 7 C42 7 48 11 50 19 C53 15 59 12 67 13 C81 14 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C20 67 8 54 7 37 C6 20 18 8 34 7 C42 7 48 11 50 19 C53 15 59 12 67 13 C81 14 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;
    -webkit-mask-position:center !important;
    mask-position:center !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
  }

  .brandLogoShadow .brandLogo{
    transform:translate3d(-0.4%, 1.35%, 0) !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT
   Tetap memakai heart mask desktop yang sama.
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .heroBrandLogoWrap .heroBrandLogo{
    transform:translate3d(-0.4%, 1.35%, 0) !important;
  }

  .brandLogoShadow .brandLogo{
    transform:translate3d(-0.4%, 1.45%, 0) !important;
  }
}

@media (min-width:980px) and (max-height:760px){
  .heroBrandLogoWrap .heroBrandLogo{
    transform:translate3d(-0.4%, 1.50%, 0) !important;
  }

  .brandLogoShadow .brandLogo{
    transform:translate3d(-0.4%, 1.60%, 0) !important;
  }
}

/* =========================================================
   FINAL DESKTOP NAVBAR BRAND LOGO - NO TOP CROP
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Memperbaiki logo heart Bumil Ku pada navbar desktop.
   - Bagian lengkungan atas love tidak lagi terpotong.
   - Hero logo tidak disentuh.
   - HP dan tablet tidak disentuh.
   - Ukuran navbar, teks, posisi, dan shadow existing tetap.
   ========================================================= */
@media (min-width:980px){
  /*
   * Logo PNG Bumil Ku sudah memiliki siluet heart transparan.
   * Mask tambahan pada navbar desktop dilepas agar detail
   * lengkungan atas logo asli tidak terpotong oleh clipping.
   */
  .brandLogoShadow .brandLogoWrap,
  html[data-theme="dark"] .brandLogoShadow .brandLogoWrap{
    -webkit-mask-image:none !important;
    mask-image:none !important;

    -webkit-mask-size:auto !important;
    mask-size:auto !important;

    -webkit-mask-position:initial !important;
    mask-position:initial !important;

    -webkit-mask-repeat:initial !important;
    mask-repeat:initial !important;

    overflow:visible !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /*
   * Sedikit ruang aman di bagian atas tanpa mengubah
   * ukuran elemen navbar.
   */
  .brandLogoShadow .brandLogo{
    width:84% !important;
    height:84% !important;
    max-width:84% !important;
    max-height:84% !important;

    object-fit:contain !important;
    object-position:center !important;

    transform:translate3d(-0.4%, 1.9%, 0) !important;
  }

  /*
   * Outer wrapper tetap overflow visible agar shadow 3D
   * di sekeliling heart tidak ikut terpotong.
   */
  .brandLogoShadow{
    overflow:visible !important;
  }
}

/* =========================================================
   LAPTOP COMPACT
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){
  .brandLogoShadow .brandLogo{
    transform:translate3d(-0.4%, 2.1%, 0) !important;
  }
}

@media (min-width:980px) and (max-height:760px){
  .brandLogoShadow .brandLogo{
    transform:translate3d(-0.4%, 2.2%, 0) !important;
  }
}


/* =========================================================
   FINAL MOBILE NAVBAR - SEARCH + GRID QUICK ACTIONS
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Menghapus kebutuhan tampilan input search pada navbar HP.
   - Menggantinya dengan card compact berisi:
     search icon + grid-round-4 icon.
   - Surface mengikuti card search existing.
   - Tablet dan desktop tidak berubah.
   ========================================================= */

.mobileNavbarQuickActions{
  display:none;
}

@media (max-width:620px){
  .appHeader > .mobileNavbarQuickActions{
    position:relative !important;
    z-index:6 !important;

    flex:0 0 auto !important;
    width:70px !important;
    min-width:70px !important;
    max-width:70px !important;
    height:36px !important;

    margin:0 0 0 auto !important;
    padding:2px !important;

    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    align-items:stretch !important;
    gap:2px !important;

    background:#ffffff !important;
    border:1px solid rgba(58,105,119,.16) !important;
    border-radius:11px !important;

    box-shadow:
      0 6px 16px rgba(16,70,80,.055),
      0 2px 5px rgba(16,70,80,.028),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    overflow:hidden !important;
    isolation:isolate !important;
  }

  .mobileNavbarQuickAction{
    appearance:none !important;
    -webkit-appearance:none !important;

    position:relative !important;

    width:100% !important;
    min-width:0 !important;
    height:100% !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#0f9f8d !important;
    background:#ffffff !important;

    border:0 !important;
    border-radius:8px !important;
    outline:0 !important;

    text-decoration:none !important;
    font-size:12px !important;
    line-height:1 !important;

    cursor:pointer !important;
    touch-action:manipulation !important;

    transition:
      color .16s ease,
      background .16s ease,
      transform .16s ease,
      box-shadow .16s ease !important;
  }

  .mobileNavbarQuickAction--search{
    border-right:1px solid rgba(58,105,119,.11) !important;
    border-top-right-radius:5px !important;
    border-bottom-right-radius:5px !important;
  }

  .mobileNavbarQuickAction--grid{
    border-top-left-radius:5px !important;
    border-bottom-left-radius:5px !important;
  }

  .mobileNavbarQuickAction:hover{
    color:#0e9382 !important;
    background:rgba(15,159,141,.045) !important;
  }

  .mobileNavbarQuickAction:active{
    transform:scale(.94) !important;
  }

  .mobileNavbarQuickAction:focus-visible{
    outline:2px solid rgba(15,159,141,.34) !important;
    outline-offset:-2px !important;
  }

  .mobileNavbarQuickAction i{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    transform:none !important;
  }

  .mobileNavbarQuickAction--grid i{
    font-size:12.5px !important;
  }

  html[data-theme="dark"] .appHeader > .mobileNavbarQuickActions{
    background:#102b30 !important;
    border-color:rgba(255,255,255,.10) !important;

    box-shadow:
      0 6px 14px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

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

  html[data-theme="dark"] .mobileNavbarQuickAction--search{
    border-right-color:rgba(255,255,255,.08) !important;
  }

  html[data-theme="dark"] .mobileNavbarQuickAction:hover{
    color:#7ce8dc !important;
    background:rgba(15,159,141,.055) !important;
  }
}

@media (max-width:420px){
  .appHeader > .mobileNavbarQuickActions{
    width:66px !important;
    min-width:66px !important;
    max-width:66px !important;
    height:34px !important;
    padding:2px !important;
    border-radius:10px !important;
    gap:2px !important;
  }

  .mobileNavbarQuickAction{
    border-radius:7px !important;
    font-size:11.5px !important;
  }

  .mobileNavbarQuickAction--grid i{
    font-size:12px !important;
  }
}

@media (max-width:350px){
  .appHeader > .mobileNavbarQuickActions{
    width:60px !important;
    min-width:60px !important;
    max-width:60px !important;
    height:32px !important;
    border-radius:9px !important;
  }

  .mobileNavbarQuickAction{
    font-size:10.8px !important;
  }

  .mobileNavbarQuickAction--grid i{
    font-size:11.2px !important;
  }
}


/* =========================================================
   FINAL MOBILE NAVBAR - SEPARATED SEARCH + SIDEBAR BUTTONS
   =========================================================
   KHUSUS HP <=620PX

   Search dan Menu adalah DUA CARD TERPISAH.
   Tidak ada parent card visual yang menggabungkan keduanya.
   ========================================================= */

.mobileNavbarHeaderActions,
.mobileSidebar,
.mobileSidebarBackdrop{
  display:none;
}

@media (max-width:620px){
  .appHeader > .mobileNavbarQuickActions{
    display:none !important;
  }

  .appHeader > .mobileNavbarHeaderActions{
    position:relative !important;
    z-index:8 !important;

    flex:0 0 auto !important;

    margin:0 0 0 auto !important;
    padding:0 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .mobileNavbarIconCard{
    appearance:none !important;
    -webkit-appearance:none !important;

    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    flex:0 0 34px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#0f9f8d !important;
    background:#ffffff !important;

    border:1px solid rgba(58,105,119,.16) !important;
    border-radius:10px !important;

    box-shadow:
      0 6px 16px rgba(16,70,80,.055),
      0 2px 5px rgba(16,70,80,.028),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    text-decoration:none !important;
    font-size:12px !important;
    line-height:1 !important;

    cursor:pointer !important;
    touch-action:manipulation !important;

    transition:
      color .16s ease,
      background .16s ease,
      border-color .16s ease,
      box-shadow .16s ease,
      transform .16s ease !important;
  }

  .mobileNavbarIconCard:hover{
    color:#0e9382 !important;
    background:#ffffff !important;
    border-color:rgba(15,159,141,.28) !important;

    box-shadow:
      0 8px 18px rgba(16,70,80,.065),
      0 2px 6px rgba(16,70,80,.03),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    transform:translateY(-1px) !important;
  }

  .mobileNavbarIconCard:active{
    transform:translateY(0) scale(.95) !important;
  }

  .mobileNavbarIconCard:focus-visible{
    outline:2px solid rgba(15,159,141,.34) !important;
    outline-offset:2px !important;
  }

  .mobileNavbarIconCard i{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    transform:none !important;
  }

  .mobileNavbarIconCard--menu i{
    font-size:12.8px !important;
  }

  html[data-theme="dark"] .mobileNavbarIconCard{
    color:#53ebe8 !important;
    background:#102b30 !important;
    border-color:rgba(255,255,255,.10) !important;

    box-shadow:
      0 6px 14px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"] .mobileNavbarIconCard:hover{
    color:#7ce8dc !important;
    background:#14353a !important;
    border-color:rgba(15,159,141,.24) !important;
  }

  /* =======================================================
     SIDEBAR BACKDROP
     ======================================================= */
  .mobileSidebarBackdrop{
    position:fixed !important;
    z-index:190 !important;
    inset:0 !important;

    display:block !important;

    background:rgba(15,35,42,.28) !important;

    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;

    transition:
      opacity .22s ease,
      visibility .22s ease !important;
  }

  .mobileSidebarBackdrop.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* =======================================================
     SIDEBAR PANEL
     ======================================================= */
  .mobileSidebar{
    position:fixed !important;
    z-index:200 !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:min(292px, 82vw) !important;
    max-width:292px !important;

    display:flex !important;
    flex-direction:column !important;

    padding:
      max(18px, env(safe-area-inset-top))
      16px
      max(18px, env(safe-area-inset-bottom)) !important;

    color:#294052 !important;

    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(15,159,141,.10),
        transparent 30%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.985),
        rgba(248,252,252,.99)
      ) !important;

    border-left:1px solid rgba(58,105,119,.11) !important;

    box-shadow:
      -20px 0 48px rgba(16,70,80,.14),
      -6px 0 18px rgba(16,70,80,.07),
      inset 1px 0 0 rgba(255,255,255,.90) !important;

    transform:translate3d(104%,0,0) !important;
    visibility:hidden !important;
    pointer-events:none !important;

    transition:
      transform .30s cubic-bezier(.22,.8,.24,1),
      visibility .30s ease !important;
  }

  .mobileSidebar.is-open{
    transform:translate3d(0,0,0) !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  html[data-theme="dark"] .mobileSidebar{
    color:#eafcff !important;

    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(15,159,141,.08),
        transparent 30%
      ),
      linear-gradient(
        180deg,
        rgba(16,43,48,.995),
        rgba(10,31,35,.998)
      ) !important;

    border-left-color:rgba(255,255,255,.07) !important;

    box-shadow:
      -20px 0 48px rgba(0,0,0,.34),
      -6px 0 18px rgba(0,0,0,.20),
      inset 1px 0 0 rgba(255,255,255,.025) !important;
  }

  .mobileSidebarHeader{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;

    padding:2px 0 16px !important;

    border-bottom:1px solid rgba(58,105,119,.10) !important;
  }

  html[data-theme="dark"] .mobileSidebarHeader{
    border-bottom-color:rgba(255,255,255,.07) !important;
  }

  .mobileSidebarBrand{
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;
    gap:9px !important;
  }

  .mobileSidebarBrand img{
    width:38px !important;
    height:38px !important;
    object-fit:contain !important;

    filter:
      drop-shadow(0 4px 7px rgba(14,147,130,.12)) !important;
  }

  .mobileSidebarBrand > span{
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
  }

  .mobileSidebarBrand strong{
    color:#0e9382 !important;

    font-size:16px !important;
    line-height:1 !important;
    font-weight:800 !important;
  }

  .mobileSidebarBrand small{
    color:#7b8e98 !important;

    font-size:8px !important;
    line-height:1.1 !important;
    font-weight:600 !important;
  }

  html[data-theme="dark"] .mobileSidebarBrand strong{
    color:#73e6dd !important;
  }

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

  .mobileSidebarClose{
    appearance:none !important;
    -webkit-appearance:none !important;

    width:34px !important;
    min-width:34px !important;
    height:34px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#607782 !important;
    background:#ffffff !important;

    border:1px solid rgba(58,105,119,.12) !important;
    border-radius:10px !important;

    box-shadow:
      0 5px 12px rgba(16,70,80,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    cursor:pointer !important;
  }

  html[data-theme="dark"] .mobileSidebarClose{
    color:#c7dcdf !important;
    background:#163a40 !important;
    border-color:rgba(255,255,255,.08) !important;
  }

  .mobileSidebarNav{
    display:grid !important;
    gap:7px !important;

    padding-top:16px !important;
  }

  .mobileSidebarNav a{
    min-height:47px !important;

    padding:0 13px !important;

    display:grid !important;
    grid-template-columns:24px minmax(0,1fr) !important;
    align-items:center !important;
    gap:10px !important;

    color:#405f6d !important;
    background:rgba(255,255,255,.60) !important;

    border:1px solid rgba(58,105,119,.075) !important;
    border-radius:12px !important;

    text-decoration:none !important;

    font-size:12px !important;
    line-height:1 !important;
    font-weight:650 !important;

    transition:
      color .16s ease,
      background .16s ease,
      transform .16s ease,
      border-color .16s ease !important;
  }

  .mobileSidebarNav a:hover{
    color:#0e9382 !important;
    background:#ffffff !important;
    border-color:rgba(15,159,141,.15) !important;
    transform:translateX(-2px) !important;
  }

  .mobileSidebarNav a i{
    color:#0f9f8d !important;
    text-align:center !important;
  }

  .mobileSidebarNav .mobileSidebarLogin{
    margin-top:8px !important;

    color:#ffffff !important;

    background:
      linear-gradient(
        105deg,
        #087f78 0%,
        #119b8a 52%,
        #25b79a 100%
      ) !important;

    border-color:rgba(255,255,255,.18) !important;

    box-shadow:
      0 10px 22px rgba(4,112,103,.18),
      inset 0 1px 0 rgba(255,255,255,.25) !important;
  }

  .mobileSidebarNav .mobileSidebarLogin i{
    color:#ffffff !important;
  }

  html[data-theme="dark"] .mobileSidebarNav a{
    color:#bdd4d8 !important;
    background:rgba(255,255,255,.025) !important;
    border-color:rgba(255,255,255,.06) !important;
  }

  html[data-theme="dark"] .mobileSidebarNav a:hover{
    color:#73e6dd !important;
    background:rgba(15,159,141,.055) !important;
    border-color:rgba(15,159,141,.12) !important;
  }

  html[data-theme="dark"] .mobileSidebarNav .mobileSidebarLogin{
    color:#ffffff !important;

    background:
      linear-gradient(
        105deg,
        #07776f 0%,
        #0f9483 54%,
        #20ae92 100%
      ) !important;
  }

  body.is-mobile-sidebar-open{
    overflow:hidden !important;
    touch-action:none !important;
  }
}

@media (max-width:420px){
  .appHeader > .mobileNavbarHeaderActions{
    gap:6px !important;
  }

  .mobileNavbarIconCard{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    flex-basis:32px !important;

    border-radius:9px !important;
    font-size:11.5px !important;
  }

  .mobileNavbarIconCard--menu i{
    font-size:12px !important;
  }

  .mobileSidebar{
    width:min(276px, 84vw) !important;
  }
}

@media (max-width:350px){
  .appHeader > .mobileNavbarHeaderActions{
    gap:5px !important;
  }

  .mobileNavbarIconCard{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    flex-basis:30px !important;

    border-radius:8px !important;
    font-size:10.8px !important;
  }

  .mobileNavbarIconCard--menu i{
    font-size:11.2px !important;
  }

  .mobileSidebar{
    width:min(260px, 86vw) !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
}


/* =========================================================
   FINAL MOBILE SIDEBAR - OPEN FROM LEFT
   =========================================================
   KHUSUS HP <=620PX

   PERUBAHAN:
   - Sidebar sekarang masuk dari sisi KIRI.
   - Posisi, ukuran, isi menu, backdrop, close button,
     dan fungsi JavaScript tetap sama.
   - Border dan shadow dibalik agar depth mengikuti sisi kiri.
   - Tablet dan desktop tidak diubah.
   ========================================================= */
@media (max-width:620px){
  .mobileSidebar{
    left:0 !important;
    right:auto !important;

    border-left:0 !important;
    border-right:1px solid rgba(58,105,119,.11) !important;

    box-shadow:
      20px 0 48px rgba(16,70,80,.14),
      6px 0 18px rgba(16,70,80,.07),
      inset -1px 0 0 rgba(255,255,255,.90) !important;

    transform:translate3d(-104%,0,0) !important;
  }

  .mobileSidebar.is-open{
    transform:translate3d(0,0,0) !important;
  }

  html[data-theme="dark"] .mobileSidebar{
    border-left:0 !important;
    border-right-color:rgba(255,255,255,.07) !important;

    box-shadow:
      20px 0 48px rgba(0,0,0,.34),
      6px 0 18px rgba(0,0,0,.20),
      inset -1px 0 0 rgba(255,255,255,.025) !important;
  }

  /*
   * Karena sidebar berasal dari kiri, hover menu diarahkan
   * sedikit ke kanan agar interaksinya terasa natural.
   */
  .mobileSidebarNav a:hover{
    transform:translateX(2px) !important;
  }
}

/* =========================================================
   FINAL MOBILE NAVBAR MENU - ICON ONLY
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Tombol Search tetap memakai card existing.
   - Tombol Menu tidak lagi memakai card / surface putih.
   - Area klik tombol Menu tetap setara dengan card Search
     agar ergonomi dan alignment navbar tetap rapi.
   - Icon fa-grid-round diperbesar agar visualnya seimbang
     dengan card Search.
   - Sidebar dan seluruh fungsi JavaScript tidak diubah.
   ========================================================= */
@media (max-width:620px){
  .mobileNavbarIconCard--menu{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    flex:0 0 34px !important;

    padding:0 !important;
    margin:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#0f9f8d !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;

    box-shadow:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    overflow:visible !important;

    transform:none !important;
  }

  .mobileNavbarIconCard--menu:hover{
    color:#0e9382 !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    box-shadow:none !important;

    transform:translateY(-1px) !important;
  }

  .mobileNavbarIconCard--menu:active{
    background:transparent !important;
    box-shadow:none !important;

    transform:translateY(0) scale(.92) !important;
  }

  .mobileNavbarIconCard--menu:focus-visible{
    outline:2px solid rgba(15,159,141,.34) !important;
    outline-offset:2px !important;
    border-radius:7px !important;
  }

  .mobileNavbarIconCard--menu i{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    color:currentColor !important;

    font-size:20px !important;
    line-height:1 !important;

    filter:
      drop-shadow(0 2px 3px rgba(14,147,130,.12)) !important;

    transform:none !important;
  }

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

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    box-shadow:none !important;
  }

  html[data-theme="dark"] .mobileNavbarIconCard--menu:hover{
    color:#7ce8dc !important;
    background:transparent !important;
    box-shadow:none !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .mobileNavbarIconCard--menu{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    flex-basis:32px !important;
  }

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

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .mobileNavbarIconCard--menu{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    flex-basis:30px !important;
  }

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


/* =========================================================
   FINAL MOBILE NAVBAR MENU - ICON EXTRA LARGE
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Memperbesar hanya glyph fa-grid-round.
   - Tombol menu tetap icon-only tanpa card.
   - Area klik tetap sama sehingga posisi/alignment navbar
     tidak berubah.
   - Tombol Search dan sidebar tidak diubah.
   ========================================================= */
@media (max-width:620px){
  .mobileNavbarIconCard--menu i,
  .mobileNavbarIconCard--menu .fa-grid-round{
    font-size:24px !important;
    line-height:1 !important;
    transform:none !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .mobileNavbarIconCard--menu i,
  .mobileNavbarIconCard--menu .fa-grid-round{
    font-size:23px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .mobileNavbarIconCard--menu i,
  .mobileNavbarIconCard--menu .fa-grid-round{
    font-size:22px !important;
  }
}


/* =========================================================
   FINAL MOBILE NAVBAR SEARCH - ICON SLIGHTLY ENLARGED
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Hanya memperbesar glyph search sedikit.
   - Ukuran card Search tetap sama.
   - Posisi Search dan tombol Menu tidak berubah.
   - Sidebar, navbar, tablet, dan desktop tidak diubah.
   ========================================================= */
@media (max-width:620px){
  .mobileNavbarIconCard--search i{
    font-size:14.5px !important;
    line-height:1 !important;
    transform:none !important;
  }
}

/* HP COMPACT <=420PX */
@media (max-width:420px){
  .mobileNavbarIconCard--search i{
    font-size:14px !important;
  }
}

/* HP SANGAT KECIL <=350PX */
@media (max-width:350px){
  .mobileNavbarIconCard--search i{
    font-size:13.5px !important;
  }
}


/* =========================================================
   FINAL MOBILE SIDEBAR - WIDER + SINGLE LINE MENU
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Sidebar diperlebar agar terasa lebih lega saat dibuka.
   - Semua label menu dipaksa tetap satu baris.
   - "Tentang Kami" tidak lagi turun menjadi dua baris.
   - Tinggi card menu, warna, sidebar kiri, backdrop,
     tombol close, dan fungsi JavaScript tidak diubah.
   - Tablet dan desktop tidak disentuh.
   ========================================================= */
@media (max-width:620px){
  .mobileSidebar{
    width:min(334px, 88vw) !important;
    max-width:334px !important;

    padding-left:18px !important;
    padding-right:18px !important;
  }

  /*
   * Gunakan flex agar tetap aman meskipun data-copy
   * mengganti isi link menjadi text langsung.
   */
  .mobileSidebarNav a{
    width:100% !important;
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    padding-left:14px !important;
    padding-right:14px !important;

    white-space:nowrap !important;
    overflow:hidden !important;
  }

  .mobileSidebarNav a > span{
    min-width:0 !important;
    display:block !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .mobileSidebarNav a i{
    flex:0 0 24px !important;
    width:24px !important;
    min-width:24px !important;
    margin-right:10px !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .mobileSidebar{
    width:min(322px, 88vw) !important;
    max-width:322px !important;

    padding-left:17px !important;
    padding-right:17px !important;
  }

  .mobileSidebarNav a{
    padding-left:13px !important;
    padding-right:13px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .mobileSidebar{
    width:min(292px, 90vw) !important;
    max-width:292px !important;

    padding-left:14px !important;
    padding-right:14px !important;
  }

  .mobileSidebarNav a{
    padding-left:12px !important;
    padding-right:12px !important;

    font-size:11.5px !important;
  }
}


/* =========================================================
   FINAL MOBILE SIDEBAR HEADER - BUMIL KU + RSAB LOCKUP
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Menambahkan identitas Peningkatan Mutu RSAB Harapan Kita
     di sebelah kanan brand Bumil Ku pada header sidebar.
   - Tombol close tetap berada paling kanan.
   - Ukuran dibuat compact agar tiga blok tetap satu baris.
   - Navbar utama, tablet, desktop, dan fungsi sidebar tidak
     diubah.
   ========================================================= */
@media (max-width:620px){
  .mobileSidebarHeader{
    display:grid !important;
    grid-template-columns:minmax(0,auto) minmax(82px,1fr) 34px !important;
    align-items:center !important;
    column-gap:10px !important;
    padding-top:2px !important;
    padding-bottom:16px !important;
  }

  .mobileSidebarBrand{
    min-width:0 !important;
    max-width:118px !important;
    gap:7px !important;
  }

  .mobileSidebarBrand img{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
  }

  .mobileSidebarBrand > span{
    min-width:0 !important;
  }

  .mobileSidebarBrand strong{
    font-size:15px !important;
    white-space:nowrap !important;
  }

  .mobileSidebarBrand small{
    font-size:7px !important;
    white-space:nowrap !important;
  }

  .mobileSidebarHeader > .mobileSidebarInstitutionLockup{
    position:relative !important;
    z-index:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    color:var(--ink) !important;
  }

  .mobileSidebarInstitutionLockup .desktopInstitutionDivider{
    display:block !important;
    width:1px !important;
    min-width:1px !important;
    height:31px !important;
    flex:0 0 1px !important;
    background:linear-gradient(
      180deg,
      transparent 0%,
      rgba(58,105,119,.15) 16%,
      rgba(15,159,141,.28) 50%,
      rgba(58,105,119,.15) 84%,
      transparent 100%
    ) !important;
  }

  .mobileSidebarInstitutionLockup .desktopInstitutionIdentity{
    min-width:0 !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:2px !important;
  }

  .mobileSidebarInstitutionLockup .desktopInstitutionLabel{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    color:#718690 !important;
    font-size:5.8px !important;
    line-height:1.05 !important;
    font-weight:600 !important;
    letter-spacing:.01em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .mobileSidebarInstitutionLockup .desktopInstitutionLogo{
    display:block !important;
    width:auto !important;
    height:19px !important;
    max-width:82px !important;
    max-height:19px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  .mobileSidebarHeader > .mobileSidebarClose{
    justify-self:end !important;
    align-self:center !important;
    margin:0 !important;
  }

  html[data-theme="dark"] .mobileSidebarInstitutionLockup .desktopInstitutionDivider{
    background:linear-gradient(
      180deg,
      transparent 0%,
      rgba(255,255,255,.06) 16%,
      rgba(15,159,141,.22) 50%,
      rgba(255,255,255,.06) 84%,
      transparent 100%
    ) !important;
  }

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

  html[data-theme="dark"] .mobileSidebarInstitutionLockup .desktopInstitutionLogo{
    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;
  }
}

@media (max-width:420px){
  .mobileSidebarHeader{
    grid-template-columns:minmax(0,auto) minmax(76px,1fr) 34px !important;
    column-gap:8px !important;
  }

  .mobileSidebarBrand{
    max-width:108px !important;
    gap:6px !important;
  }

  .mobileSidebarBrand img{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
  }

  .mobileSidebarBrand strong{
    font-size:14px !important;
  }

  .mobileSidebarBrand small{
    font-size:6.5px !important;
  }

  .mobileSidebarInstitutionLockup{
    gap:6px !important;
  }

  .mobileSidebarInstitutionLockup .desktopInstitutionDivider{
    height:29px !important;
  }

  .mobileSidebarInstitutionLockup .desktopInstitutionLabel{
    font-size:5.35px !important;
  }

  .mobileSidebarInstitutionLockup .desktopInstitutionLogo{
    height:18px !important;
    max-width:76px !important;
    max-height:18px !important;
  }
}

@media (max-width:350px){
  .mobileSidebarHeader{
    grid-template-columns:minmax(0,auto) minmax(68px,1fr) 32px !important;
    column-gap:6px !important;
  }

  .mobileSidebarBrand{
    max-width:96px !important;
    gap:5px !important;
  }

  .mobileSidebarBrand img{
    width:31px !important;
    min-width:31px !important;
    height:31px !important;
  }

  .mobileSidebarBrand strong{
    font-size:13px !important;
  }

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

  .mobileSidebarInstitutionLockup .desktopInstitutionDivider{
    height:26px !important;
  }

  .mobileSidebarInstitutionLockup .desktopInstitutionLabel{
    font-size:4.9px !important;
  }

  .mobileSidebarInstitutionLockup .desktopInstitutionLogo{
    height:16px !important;
    max-width:68px !important;
    max-height:16px !important;
  }

  .mobileSidebarHeader > .mobileSidebarClose{
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
  }
}


/* =========================================================
   FINAL MOBILE SIDEBAR - GREEN CLOSE + BOTTOM CTA
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Icon X memakai warna hijau yang sama dengan icon menu.
   - Tombol login menjadi "Daftar / Masuk".
   - CTA dipisahkan dari menu utama dan diletakkan di bagian
     bawah sidebar.
   - Teks CTA dibuat benar-benar rata tengah.
   - Header Bumil Ku + RSAB, lebar sidebar, backdrop,
     animasi buka dari kiri, dan fungsi JavaScript tetap.
   ========================================================= */
@media (max-width:620px){
  /* =======================================================
     CLOSE BUTTON - GREEN
     ======================================================= */
  .mobileSidebarClose{
    color:#0f9f8d !important;
  }

  .mobileSidebarClose i,
  .mobileSidebarClose .svg-inline--fa{
    color:#0f9f8d !important;
    fill:currentColor !important;
  }

  .mobileSidebarClose:hover{
    color:#0e9382 !important;
    border-color:rgba(15,159,141,.22) !important;
    background:#ffffff !important;
  }

  .mobileSidebarClose:hover i,
  .mobileSidebarClose:hover .svg-inline--fa{
    color:#0e9382 !important;
  }

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

  html[data-theme="dark"] .mobileSidebarClose i,
  html[data-theme="dark"] .mobileSidebarClose .svg-inline--fa{
    color:#53ebe8 !important;
    fill:currentColor !important;
  }

  html[data-theme="dark"] .mobileSidebarClose:hover{
    color:#7ce8dc !important;
    background:#163a40 !important;
    border-color:rgba(15,159,141,.18) !important;
  }

  /* =======================================================
     NAV AREA - FILL AVAILABLE HEIGHT
     ======================================================= */
  .mobileSidebarNav{
    flex:1 1 auto !important;
    min-height:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    gap:7px !important;

    padding-top:16px !important;
    padding-bottom:2px !important;
  }

  /*
   * Menu reguler tetap mempertahankan style card existing.
   * Hanya CTA login yang dipisahkan ke bawah.
   */
  .mobileSidebarNav > a:not(.mobileSidebarLogin){
    flex:0 0 auto !important;
  }

  /* =======================================================
     BOTTOM CTA - DAFTAR / MASUK
     ======================================================= */
  .mobileSidebarNav .mobileSidebarLogin{
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;

    margin-top:auto !important;
    margin-bottom:0 !important;

    padding:0 16px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:0 !important;

    color:#ffffff !important;

    background:
      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;

    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:12px !important;

    box-shadow:
      0 10px 22px rgba(4,112,103,.18),
      0 3px 8px rgba(7,126,116,.10),
      inset 0 1px 0 rgba(255,255,255,.25) !important;

    text-align:center !important;
    white-space:nowrap !important;

    font-size:12.5px !important;
    line-height:1 !important;
    font-weight:750 !important;

    overflow:visible !important;
  }

  .mobileSidebarNav .mobileSidebarLogin > span{
    width:100% !important;
    min-width:0 !important;

    display:block !important;

    color:#ffffff !important;

    text-align:center !important;
    white-space:nowrap !important;

    overflow:visible !important;
    text-overflow:clip !important;
  }

  .mobileSidebarNav .mobileSidebarLogin:hover{
    color:#ffffff !important;

    background:
      radial-gradient(
        circle at 18% 0%,
        rgba(255,255,255,.21) 0%,
        rgba(255,255,255,.09) 30%,
        rgba(255,255,255,0) 54%
      ),
      linear-gradient(
        105deg,
        #07857d 0%,
        #0c9588 28%,
        #14a38f 53%,
        #1caf94 75%,
        #2abe9f 100%
      ) !important;

    border-color:rgba(255,255,255,.23) !important;

    box-shadow:
      0 13px 27px rgba(4,112,103,.23),
      0 4px 10px rgba(7,126,116,.13),
      inset 0 1px 0 rgba(255,255,255,.32) !important;

    transform:translateY(-1px) !important;
  }

  .mobileSidebarNav .mobileSidebarLogin:active{
    transform:translateY(0) scale(.985) !important;
  }

  html[data-theme="dark"] .mobileSidebarNav .mobileSidebarLogin{
    color:#ffffff !important;

    background:
      radial-gradient(
        circle at 18% 0%,
        rgba(255,255,255,.12) 0%,
        rgba(255,255,255,.04) 30%,
        rgba(255,255,255,0) 54%
      ),
      linear-gradient(
        105deg,
        #07776f 0%,
        #09867c 28%,
        #0f9483 54%,
        #17a18a 76%,
        #20ae92 100%
      ) !important;

    border-color:rgba(255,255,255,.11) !important;

    box-shadow:
      0 11px 24px rgba(0,0,0,.27),
      0 4px 10px rgba(7,126,116,.11),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  html[data-theme="dark"] .mobileSidebarNav .mobileSidebarLogin > span{
    color:#ffffff !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .mobileSidebarNav .mobileSidebarLogin{
    min-height:47px !important;
    padding-left:14px !important;
    padding-right:14px !important;

    font-size:12px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .mobileSidebarNav .mobileSidebarLogin{
    min-height:44px !important;
    padding-left:12px !important;
    padding-right:12px !important;

    font-size:11.5px !important;
  }
}


/* =========================================================
   FINAL MOBILE SIDEBAR - TWO AUTH ACTIONS
   ========================================================= */
.mobileSidebarActions{
  display:none;
}

@media (max-width:620px){
  .mobileSidebarNav{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:7px !important;
    padding-top:16px !important;
    padding-bottom:0 !important;
  }

  .mobileSidebarNav > a{
    flex:0 0 auto !important;
  }

  .mobileSidebar > .mobileSidebarActions{
    flex:0 0 auto !important;
    width:100% !important;
    margin:auto 0 0 !important;
    padding:14px 0 0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:9px !important;
    border-top:1px solid rgba(58,105,119,.08) !important;
  }

  html[data-theme="dark"] .mobileSidebar > .mobileSidebarActions{
    border-top-color:rgba(255,255,255,.06) !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction,
  .mobileSidebarActions .mobileSidebarGoogleAction{
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 10px !important;
    display:grid !important;
    grid-template-columns:32px minmax(0,1fr) 32px !important;
    align-items:center !important;
    gap:6px !important;
    border-radius:999px !important;
    font-size:12.5px !important;
    line-height:1 !important;
    font-weight:750 !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction > span:nth-child(2),
  .mobileSidebarActions .mobileSidebarGoogleAction > span:nth-child(2){
    min-width:0 !important;
    display:block !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction{
    color:#fff !important;
    background:
      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;
    border:1px solid rgba(255,255,255,.19) !important;
    box-shadow:
      0 10px 22px rgba(4,112,103,.20),
      0 3px 8px rgba(7,126,116,.10),
      inset 0 1px 0 rgba(255,255,255,.30) !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction .actionLeading{
    display:grid !important;
    place-items:center !important;
    color:#fff !important;
    font-size:17px !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction .actionTrailing,
  .mobileSidebarActions .mobileSidebarGoogleAction .googleTrailing{
    width:29px !important;
    height:29px !important;
    display:grid !important;
    place-items:center !important;
    justify-self:end !important;
    border-radius:50% !important;
    font-size:9.5px !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction .actionTrailing{
    color:#fff !important;
    border:1px solid rgba(255,255,255,.48) !important;
    background:rgba(255,255,255,.07) !important;
  }

  .mobileSidebarActions .mobileSidebarGoogleAction{
    color:#294052 !important;
    background:#fff !important;
    border:1px solid rgba(65,117,130,.14) !important;
    box-shadow:
      0 9px 20px rgba(16,70,80,.08),
      0 2px 6px rgba(16,70,80,.035),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .mobileSidebarActions .mobileSidebarGoogleAction .googleIconWrap{
    width:28px !important;
    height:28px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:#fff !important;
    box-shadow:0 4px 10px rgba(27,75,85,.08), inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .mobileSidebarActions .mobileSidebarGoogleAction .googleIcon{
    width:18px !important;
    height:18px !important;
  }

  .mobileSidebarActions .mobileSidebarGoogleAction .googleTrailing{
    color:#426577 !important;
    border:1px solid rgba(61,111,124,.22) !important;
    background:rgba(255,255,255,.60) !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction:hover,
  .mobileSidebarActions .mobileSidebarGoogleAction:hover{
    transform:translateY(-1px) !important;
  }

  html[data-theme="dark"] .mobileSidebarActions .mobileSidebarPrimaryAction{
    background:
      radial-gradient(circle at 18% 0%, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 30%, rgba(255,255,255,0) 54%),
      linear-gradient(105deg, #07776f 0%, #09867c 28%, #0f9483 54%, #17a18a 76%, #20ae92 100%) !important;
  }

  html[data-theme="dark"] .mobileSidebarActions .mobileSidebarGoogleAction{
    color:#eafcff !important;
    background:#163a40 !important;
    border-color:rgba(255,255,255,.08) !important;
  }

  html[data-theme="dark"] .mobileSidebarActions .mobileSidebarGoogleAction .googleTrailing{
    color:#bdd4d8 !important;
    background:rgba(255,255,255,.035) !important;
    border-color:rgba(255,255,255,.10) !important;
  }
}

@media (max-width:420px){
  .mobileSidebar > .mobileSidebarActions{
    padding-top:12px !important;
    gap:8px !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction,
  .mobileSidebarActions .mobileSidebarGoogleAction{
    min-height:46px !important;
    grid-template-columns:30px minmax(0,1fr) 30px !important;
    font-size:12px !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction .actionLeading{
    font-size:16px !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction .actionTrailing,
  .mobileSidebarActions .mobileSidebarGoogleAction .googleTrailing{
    width:27px !important;
    height:27px !important;
  }

  .mobileSidebarActions .mobileSidebarGoogleAction .googleIconWrap{
    width:26px !important;
    height:26px !important;
  }

  .mobileSidebarActions .mobileSidebarGoogleAction .googleIcon{
    width:17px !important;
    height:17px !important;
  }
}

@media (max-width:350px){
  .mobileSidebar > .mobileSidebarActions{
    padding-top:10px !important;
    gap:7px !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction,
  .mobileSidebarActions .mobileSidebarGoogleAction{
    min-height:44px !important;
    grid-template-columns:28px minmax(0,1fr) 28px !important;
    font-size:11.5px !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction .actionLeading{
    font-size:15px !important;
  }

  .mobileSidebarActions .mobileSidebarPrimaryAction .actionTrailing,
  .mobileSidebarActions .mobileSidebarGoogleAction .googleTrailing{
    width:25px !important;
    height:25px !important;
  }

  .mobileSidebarActions .mobileSidebarGoogleAction .googleIconWrap{
    width:24px !important;
    height:24px !important;
  }

  .mobileSidebarActions .mobileSidebarGoogleAction .googleIcon{
    width:16px !important;
    height:16px !important;
  }
}

/* =========================================================
   FINAL MOBILE SIDEBAR - PRODUCTION PERFORMANCE LOCK
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Mempertahankan tampilan, ukuran, posisi, warna, isi,
     dan arah buka sidebar yang sudah final.
   - Mengurangi jank/frame-drop yang lebih terasa ketika
     halaman dijalankan melalui domain/hosting.
   - Menghapus full-screen backdrop blur yang mahal untuk GPU.
   - Memastikan sidebar dipromosikan sebagai compositor layer.
   - Hanya menganimasikan transform sidebar dan opacity backdrop.
   - Visibility tidak dianimasikan; hanya ditunda saat penutupan
     agar animasi keluar tetap selesai dengan sempurna.
   - Tablet dan desktop tidak diubah.
   ========================================================= */
@media (max-width:620px){

  /* =======================================================
     BACKDROP - LIGHTWEIGHT COMPOSITOR
     ======================================================= */
  .mobileSidebarBackdrop{
    background:rgba(15,35,42,.28) !important;

    /*
     * Full-screen backdrop blur adalah salah satu operasi
     * rendering paling mahal pada browser mobile, terutama
     * ketika elemen lain di belakang masih beranimasi.
     */
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;

    will-change:opacity !important;

    /*
     * Saat menutup:
     * - opacity selesai dahulu;
     * - visibility baru menjadi hidden setelah 180ms.
     */
    transition:
      opacity .18s cubic-bezier(.4,0,.2,1),
      visibility 0s linear .18s !important;
  }

  .mobileSidebarBackdrop.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;

    /*
     * Saat membuka visibility aktif langsung, tanpa menunggu.
     */
    transition:
      opacity .18s cubic-bezier(.4,0,.2,1),
      visibility 0s linear 0s !important;
  }

  /* =======================================================
     SIDEBAR PANEL - GPU / COMPOSITOR OPTIMIZATION
     ======================================================= */
  .mobileSidebar{
    /*
     * Posisi akhir dan arah buka tetap sama seperti versi final:
     * sidebar masuk dari sisi kiri.
     */
    transform:translate3d(-104%,0,0) !important;
    transform-origin:left center !important;

    /*
     * Petunjuk kepada browser bahwa transform adalah properti
     * utama yang akan berubah. Ini membantu browser menyiapkan
     * layer compositor sebelum animasi dimulai.
     */
    will-change:transform !important;

    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;

    /*
     * Menjaga rasterisasi layer lebih stabil pada Chrome,
     * Edge, Android WebView, dan Safari mobile.
     */
    -webkit-font-smoothing:antialiased !important;

    visibility:hidden !important;
    pointer-events:none !important;

    /*
     * Hanya transform yang bergerak.
     * Visibility ditunda sampai gerakan menutup selesai.
     */
    transition:
      transform .24s cubic-bezier(.22,.8,.24,1),
      visibility 0s linear .24s !important;
  }

  .mobileSidebar.is-open{
    transform:translate3d(0,0,0) !important;
    visibility:visible !important;
    pointer-events:auto !important;

    /*
     * Saat membuka visibility aktif langsung.
     */
    transition:
      transform .24s cubic-bezier(.22,.8,.24,1),
      visibility 0s linear 0s !important;
  }

  /*
   * Hindari browser melakukan scroll chaining ketika drawer
   * sedang aktif. Tidak mengubah layout maupun tampilan.
   */
  .mobileSidebar{
    overscroll-behavior:contain !important;
  }

  /*
   * Saat sidebar aktif, area halaman belakang tidak menerima
   * gesture sehingga compositor fokus pada drawer + backdrop.
   */
  body.is-mobile-sidebar-open{
    overflow:hidden !important;
    touch-action:none !important;
    overscroll-behavior:none !important;
  }
}

/* =========================================================
   REDUCED MOTION - ACCESSIBILITY FALLBACK
   ========================================================= */
@media (max-width:620px) and (prefers-reduced-motion:reduce){
  .mobileSidebar,
  .mobileSidebar.is-open,
  .mobileSidebarBackdrop,
  .mobileSidebarBackdrop.is-open{
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
}

/* =========================================================
   FINAL DESKTOP VISUAL HERO - EXTRA LEFT GAP LOCK
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Menambah jarak antara sisi kanan contentPanel dan sisi
     kiri card visualHero.
   - Hanya margin kiri visualHero yang diperbesar.
   - Margin kanan visualHero ke tepi layar TIDAK diubah.
   - Ukuran internal foto, radius, shadow, tint, dan isi card
     visualHero tetap seperti baseline sebelumnya.
   - HP <=620px, tablet, dan performance sidebar mobile
     tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .visualHero{
    /*
     * Baseline lama:
     * calc(clamp(18px, 1.6vw, 26px) + 7px)
     *
     * Baseline baru:
     * tambahan 24px pada gutter dasar.
     * Artinya jarak kiri bertambah 17px dibanding versi
     * terakhir, sedangkan margin kanan tetap menggunakan
     * rule existing.
     */
    margin-left:
      calc(clamp(18px, 1.6vw, 26px) + 24px) !important;
  }
}

/* =========================================================
   FINAL MOBILE NAVBAR - SEARCH ICON ONLY + MENU NEUMORPHISM
   =========================================================
   KHUSUS HP <=620PX

   PERUBAHAN:
   - Search tetap menuju artikel.html, tetapi card visualnya
     dihilangkan sehingga hanya icon search yang terlihat.
   - Tombol Menu dibungkus card neumorphism timbul.
   - ID mobileNavbarGridButton dan fungsi sidebar tetap sama.
   - Performance lock sidebar, backdrop tanpa blur, dan timing
     buka/tutup sidebar tidak disentuh.
   - Tablet dan desktop tidak diubah.
   ========================================================= */
@media (max-width:620px){

  .appHeader > .mobileNavbarHeaderActions{
    gap:8px !important;
    overflow:visible !important;
  }

  /* =======================================================
     SEARCH - ICON ONLY / TANPA CARD
     ======================================================= */
  .mobileNavbarIconCard--search,
  html[data-theme="dark"] .mobileNavbarIconCard--search{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    flex:0 0 32px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#0f9f8d !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    overflow:visible !important;
    transform:none !important;
  }

  .mobileNavbarIconCard--search:hover,
  html[data-theme="dark"] .mobileNavbarIconCard--search:hover{
    color:#0e9382 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:translateY(-1px) !important;
  }

  .mobileNavbarIconCard--search:active{
    transform:translateY(0) scale(.92) !important;
  }

  .mobileNavbarIconCard--search:focus-visible{
    outline:2px solid rgba(15,159,141,.30) !important;
    outline-offset:3px !important;
    border-radius:7px !important;
  }

  .mobileNavbarIconCard--search i,
  .mobileNavbarIconCard--search .svg-inline--fa{
    color:currentColor !important;
    font-size:15.5px !important;
    line-height:1 !important;
    filter:drop-shadow(0 2px 3px rgba(14,147,130,.10)) !important;
  }

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

  html[data-theme="dark"] .mobileNavbarIconCard--search:hover{
    color:#7ce8dc !important;
  }

  /* =======================================================
     MENU - NEUMORPHISM OUTER CARD
     ======================================================= */
  .mobileNavbarMenuNeumorph{
    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;
    isolation:isolate !important;

    transition:
      transform .16s ease,
      box-shadow .16s ease,
      background .16s ease !important;
  }

  .mobileNavbarMenuNeumorph:hover{
    transform:translateY(-1px) !important;

    box-shadow:
      8px 9px 18px rgba(26,72,80,.16),
      -5px -5px 13px rgba(255,255,255,.98),
      inset 1px 1px 1px rgba(255,255,255,.98) !important;
  }

  .mobileNavbarMenuNeumorph:active{
    transform:translateY(0) scale(.985) !important;

    box-shadow:
      inset 3px 3px 7px rgba(26,72,80,.10),
      inset -3px -3px 7px rgba(255,255,255,.88),
      0 3px 8px rgba(26,72,80,.06) !important;
  }

  /* Tombol asli tetap menjadi target klik dan JS. */
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu,
  html[data-theme="dark"] .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    flex:none !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#0f9f8d !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    border-radius:9px !important;

    box-shadow:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    transform:none !important;
  }

  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu:hover{
    color:#0e9382 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu:active{
    transform:scale(.94) !important;
  }

  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu:focus-visible{
    outline:2px solid rgba(15,159,141,.30) !important;
    outline-offset:1px !important;
    border-radius:9px !important;
  }

  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu i,
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .fa-grid-round-4,
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .svg-inline--fa{
    color:currentColor !important;
    font-size:22px !important;
    line-height:1 !important;

    filter:
      drop-shadow(0 2px 3px rgba(14,147,130,.13)) !important;

    transform:none !important;
  }

  /* =======================================================
     DARK MODE NEUMORPHISM
     ======================================================= */
  html[data-theme="dark"] .mobileNavbarMenuNeumorph{
    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"] .mobileNavbarMenuNeumorph:hover{
    box-shadow:
      8px 9px 18px rgba(0,0,0,.36),
      -4px -4px 11px rgba(40,78,84,.22),
      inset 1px 1px 1px rgba(255,255,255,.05) !important;
  }

  html[data-theme="dark"] .mobileNavbarMenuNeumorph:active{
    box-shadow:
      inset 3px 3px 7px rgba(0,0,0,.30),
      inset -3px -3px 7px rgba(43,82,88,.14),
      0 3px 8px rgba(0,0,0,.12) !important;
  }

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

  html[data-theme="dark"]
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu:hover{
    color:#7ce8dc !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .appHeader > .mobileNavbarHeaderActions{
    gap:7px !important;
  }

  .mobileNavbarIconCard--search,
  html[data-theme="dark"] .mobileNavbarIconCard--search{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    flex-basis:30px !important;
  }

  .mobileNavbarIconCard--search i,
  .mobileNavbarIconCard--search .svg-inline--fa{
    font-size:14.8px !important;
  }

  .mobileNavbarMenuNeumorph{
    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;
  }

  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu i,
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .fa-grid-round-4,
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .svg-inline--fa{
    font-size:21px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .appHeader > .mobileNavbarHeaderActions{
    gap:6px !important;
  }

  .mobileNavbarIconCard--search,
  html[data-theme="dark"] .mobileNavbarIconCard--search{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    flex-basis:28px !important;
  }

  .mobileNavbarIconCard--search i,
  .mobileNavbarIconCard--search .svg-inline--fa{
    font-size:14px !important;
  }

  .mobileNavbarMenuNeumorph{
    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;
    padding:4px !important;
    border-radius:11px !important;
  }

  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu i,
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .fa-grid-round-4,
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .svg-inline--fa{
    font-size:20px !important;
  }
}

/* =========================================================
   FINAL MOBILE SIDEBAR CLOSE - MATCH MENU NEUMORPHISM
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Card pembungkus icon X pada sidebar dibuat mengikuti
     karakter neumorphism tombol Menu di navbar.
   - Ukuran tombol X existing tetap dipertahankan agar
     komposisi header sidebar tidak bergeser.
   - Icon X tetap hijau/teal.
   - Dark mode mendapat neumorphism yang setara.
   - Animasi, posisi, ukuran sidebar, backdrop, dan
     performance lock sidebar tidak diubah.
   ========================================================= */
@media (max-width:620px){

  .mobileSidebarClose{
    appearance:none !important;
    -webkit-appearance:none !important;

    position:relative !important;

    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#0f9f8d !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      ) !important;

    border:1px solid rgba(255,255,255,.90) !important;
    border-radius:11px !important;

    box-shadow:
      6px 6px 13px rgba(26,72,80,.13),
      -4px -4px 10px rgba(255,255,255,.96),
      inset 1px 1px 1px rgba(255,255,255,.95),
      inset -1px -1px 1px rgba(74,111,120,.045) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    overflow:visible !important;

    cursor:pointer !important;
    touch-action:manipulation !important;

    transition:
      color .16s ease,
      transform .16s ease,
      box-shadow .16s ease,
      background .16s ease !important;
  }

  .mobileSidebarClose i,
  .mobileSidebarClose .svg-inline--fa{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    color:currentColor !important;
    fill:currentColor !important;

    font-size:15px !important;
    line-height:1 !important;

    filter:
      drop-shadow(0 2px 3px rgba(14,147,130,.10)) !important;

    transform:none !important;
  }

  .mobileSidebarClose:hover{
    color:#0e9382 !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fafcfc 42%,
        #edf3f4 100%
      ) !important;

    border-color:rgba(255,255,255,.96) !important;

    box-shadow:
      7px 7px 15px rgba(26,72,80,.15),
      -4px -4px 11px rgba(255,255,255,.98),
      inset 1px 1px 1px rgba(255,255,255,.98) !important;

    transform:translateY(-1px) !important;
  }

  .mobileSidebarClose:active{
    color:#0e9382 !important;

    background:
      linear-gradient(
        145deg,
        #edf3f4 0%,
        #f7fafb 50%,
        #ffffff 100%
      ) !important;

    box-shadow:
      inset 3px 3px 7px rgba(26,72,80,.10),
      inset -3px -3px 7px rgba(255,255,255,.88),
      0 3px 8px rgba(26,72,80,.055) !important;

    transform:translateY(0) scale(.96) !important;
  }

  .mobileSidebarClose:focus-visible{
    outline:2px solid rgba(15,159,141,.30) !important;
    outline-offset:2px !important;
  }

  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"] .mobileSidebarClose{
    color:#53ebe8 !important;

    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 48%,
        #0b2227 100%
      ) !important;

    border-color:rgba(255,255,255,.055) !important;

    box-shadow:
      6px 6px 13px rgba(0,0,0,.30),
      -4px -4px 9px rgba(40,78,84,.18),
      inset 1px 1px 1px rgba(255,255,255,.045),
      inset -1px -1px 1px rgba(0,0,0,.20) !important;
  }

  html[data-theme="dark"] .mobileSidebarClose:hover{
    color:#7ce8dc !important;

    background:
      linear-gradient(
        145deg,
        #1a3e44 0%,
        #123036 48%,
        #0c252a 100%
      ) !important;

    border-color:rgba(255,255,255,.07) !important;

    box-shadow:
      7px 7px 15px rgba(0,0,0,.34),
      -4px -4px 10px rgba(40,78,84,.21),
      inset 1px 1px 1px rgba(255,255,255,.05) !important;
  }

  html[data-theme="dark"] .mobileSidebarClose:active{
    color:#7ce8dc !important;

    box-shadow:
      inset 3px 3px 7px rgba(0,0,0,.30),
      inset -3px -3px 7px rgba(43,82,88,.14),
      0 3px 8px rgba(0,0,0,.12) !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .mobileSidebarClose{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    border-radius:11px !important;
  }

  .mobileSidebarClose i,
  .mobileSidebarClose .svg-inline--fa{
    font-size:14.5px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .mobileSidebarClose{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    border-radius:10px !important;
  }

  .mobileSidebarClose i,
  .mobileSidebarClose .svg-inline--fa{
    font-size:14px !important;
  }
}

/* =========================================================
   FINAL MOBILE NAVBAR SEARCH - ICON ENLARGED
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Memperbesar hanya glyph icon Search.
   - Area klik dan posisi link Search tetap sama.
   - Search tetap icon-only tanpa card.
   - Jarak ke tombol Menu neumorphism tidak berubah.
   - Ukuran navbar, sidebar, dan performance lock tidak diubah.
   - Tablet dan desktop tidak disentuh.
   ========================================================= */
@media (max-width:620px){
  .mobileNavbarIconCard--search i,
  .mobileNavbarIconCard--search .fa-magnifying-glass,
  .mobileNavbarIconCard--search .svg-inline--fa{
    font-size:19px !important;
    line-height:1 !important;
    transform:none !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){
  .mobileNavbarIconCard--search i,
  .mobileNavbarIconCard--search .fa-magnifying-glass,
  .mobileNavbarIconCard--search .svg-inline--fa{
    font-size:18.5px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   ========================================================= */
@media (max-width:350px){
  .mobileNavbarIconCard--search i,
  .mobileNavbarIconCard--search .fa-magnifying-glass,
  .mobileNavbarIconCard--search .svg-inline--fa{
    font-size:18px !important;
  }
}

/* =========================================================
   FINAL MOBILE NAVBAR SEARCH - ICON EXTRA LARGE FINAL
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Memperbesar lagi hanya glyph icon Search.
   - Link, area klik, posisi, dan alignment Search tetap.
   - Search tetap icon-only tanpa card.
   - Menu neumorphism, tombol X, sidebar, backdrop, serta
     performance lock tidak diubah.
   - Tablet dan desktop tidak disentuh.
   ========================================================= */
@media (max-width:620px){
  .mobileNavbarIconCard--search i,
  .mobileNavbarIconCard--search .fa-magnifying-glass,
  .mobileNavbarIconCard--search .svg-inline--fa{
    font-size:22px !important;
    line-height:1 !important;
    transform:none !important;
  }
}

/* HP COMPACT <=420PX */
@media (max-width:420px){
  .mobileNavbarIconCard--search i,
  .mobileNavbarIconCard--search .fa-magnifying-glass,
  .mobileNavbarIconCard--search .svg-inline--fa{
    font-size:21.5px !important;
  }
}

/* HP SANGAT KECIL <=350PX */
@media (max-width:350px){
  .mobileNavbarIconCard--search i,
  .mobileNavbarIconCard--search .fa-magnifying-glass,
  .mobileNavbarIconCard--search .svg-inline--fa{
    font-size:21px !important;
  }
}

/* =========================================================
   FINAL MOBILE NAVBAR MENU - GRID ICON EXTRA LARGE
   =========================================================
   KHUSUS HP <=620PX

   TUJUAN:
   - Memperbesar hanya glyph fa-grid-round-4.
   - Card neumorphism dan area klik tetap sama.
   - Posisi tombol Menu di navbar tidak berubah.
   - Search, tombol X sidebar, ukuran sidebar, backdrop,
     dan performance lock tidak diubah.
   - Tablet dan desktop tidak disentuh.
   ========================================================= */
@media (max-width:620px){
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu i,
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .fa-grid-round-4,
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .svg-inline--fa{
    font-size:26px !important;
    line-height:1 !important;
    transform:none !important;
  }
}

/* HP COMPACT <=420PX */
@media (max-width:420px){
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu i,
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .fa-grid-round-4,
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .svg-inline--fa{
    font-size:25.5px !important;
  }
}

/* HP SANGAT KECIL <=350PX */
@media (max-width:350px){
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu i,
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .fa-grid-round-4,
  .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .svg-inline--fa{
    font-size:25px !important;
  }
}

/* =========================================================
   FINAL DESKTOP VISUAL HERO TINT - CTA TEAL BOTTOM SHADOW
   STRONG / DENSER VERSION
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Memperkuat tint teal di bagian bawah visualHero.
   - Intensitas bawah dibuat jauh lebih padat dari versi sebelumnya.
   - Transisi tetap halus dan semakin transparan ke arah atas.
   - Area wajah dan bagian atas gambar tetap terang.
   - Mengikuti family warna tombol Daftar / Masuk.
   - Tidak memakai blur sehingga detail foto tetap tajam.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .visualHeroTint{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;

    background:
      linear-gradient(
        180deg,
        rgba(8,127,120,0) 0%,
        rgba(8,127,120,0) 36%,
        rgba(8,127,120,.025) 45%,
        rgba(8,127,120,.075) 54%,
        rgba(11,143,132,.16) 63%,
        rgba(17,155,138,.30) 72%,
        rgba(25,167,143,.50) 82%,
        rgba(31,174,148,.70) 91%,
        rgba(37,183,154,.84) 100%
      ),
      linear-gradient(
        90deg,
        rgba(8,127,120,.10) 0%,
        rgba(11,143,132,.055) 26%,
        rgba(17,155,138,.018) 48%,
        rgba(37,183,154,0) 72%
      ) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    pointer-events:none !important;
  }

  html[data-theme="dark"] .visualHeroTint{
    background:
      linear-gradient(
        180deg,
        rgba(7,119,111,0) 0%,
        rgba(7,119,111,0) 34%,
        rgba(7,119,111,.035) 44%,
        rgba(7,119,111,.095) 54%,
        rgba(9,134,124,.19) 63%,
        rgba(15,148,131,.35) 72%,
        rgba(23,161,138,.56) 82%,
        rgba(28,168,142,.74) 91%,
        rgba(32,174,146,.88) 100%
      ),
      linear-gradient(
        90deg,
        rgba(7,119,111,.12) 0%,
        rgba(9,134,124,.065) 28%,
        rgba(15,148,131,.02) 50%,
        rgba(32,174,146,0) 74%
      ) !important;
  }
}

/* =========================================================
   FINAL DESKTOP FETAL DEVELOPMENT FEATURE
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Menambahkan visual janin + informasi perkembangan janin
     di bagian kiri bawah card visualHero.
   - Gambar menggunakan:
       ./assets/images/janin.png
   - Mengikuti komposisi referensi:
       icon janin besar -> judul -> deskripsi -> institusi.
   - Teks putih diletakkan di area tint teal yang sudah final.
   - visualHeroTint existing TIDAK diubah.
   - HP <=620px dan tablet 621-979px tidak disentuh.
   ========================================================= */

.desktopFetalFeature{
  display:none;
}

@media (min-width:980px){
  .desktopFetalFeature{
    position:absolute !important;
    z-index:4 !important;

    left:clamp(34px, 4.4vw, 68px) !important;
    bottom:clamp(50px, 7.2vh, 86px) !important;

    width:min(76%, 690px) !important;
    max-width:690px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    gap:clamp(20px, 2vw, 30px) !important;

    color:#ffffff !important;
    text-align:left !important;

    pointer-events:none !important;
    user-select:none !important;
    -webkit-user-select:none !important;
  }

  /* =======================================================
     JANIN IMAGE
     ======================================================= */
  .desktopFetalFeatureVisual{
    position:relative !important;

    width:clamp(128px, 10.5vw, 176px) !important;
    min-width:clamp(128px, 10.5vw, 176px) !important;
    height:clamp(128px, 10.5vw, 176px) !important;

    display:grid !important;
    place-items:center !important;

    margin:0 !important;
    padding:0 !important;

    flex:0 0 auto !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    overflow:visible !important;
  }

  .desktopFetalFeatureImage{
    display:block !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:center !important;

    /*
     * Drop-shadow putih + teal gelap memberi ketegasan pada
     * gambar janin transparan tanpa membuat card baru.
     */
    filter:
      drop-shadow(0 2px 2px rgba(255,255,255,.16))
      drop-shadow(0 8px 16px rgba(4,83,79,.24)) !important;
  }

  /* =======================================================
     COPY
     ======================================================= */
  .desktopFetalFeatureCopy{
    min-width:0 !important;
    max-width:500px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;

    gap:0 !important;

    margin:0 !important;
    padding:0 !important;
  }

  .desktopFetalFeatureTitle{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    color:#ffffff !important;

    font-size:clamp(27px, 2.35vw, 40px) !important;
    line-height:1.02 !important;
    font-weight:800 !important;
    letter-spacing:-.030em !important;

    white-space:nowrap !important;

    text-shadow:
      0 2px 4px rgba(4,72,72,.22),
      0 8px 22px rgba(4,72,72,.13) !important;
  }

  .desktopFetalFeatureText{
    display:block !important;

    max-width:470px !important;

    margin:10px 0 0 !important;
    padding:0 !important;

    color:rgba(255,255,255,.97) !important;

    font-size:clamp(17px, 1.5vw, 25px) !important;
    line-height:1.17 !important;
    font-weight:500 !important;
    letter-spacing:-.012em !important;

    text-wrap:balance !important;

    text-shadow:
      0 2px 5px rgba(4,72,72,.22) !important;
  }

  .desktopFetalFeatureInstitution{
    display:block !important;

    margin:12px 0 0 !important;
    padding:0 !important;

    color:rgba(255,255,255,.94) !important;

    font-size:clamp(10px, .82vw, 13px) !important;
    line-height:1.1 !important;
    font-weight:700 !important;
    letter-spacing:.005em !important;

    white-space:nowrap !important;

    text-shadow:
      0 2px 4px rgba(4,72,72,.20) !important;
  }

  /*
   * Dark mode tetap mempertahankan putih agar informasi
   * memiliki kontras kuat di atas foto yang lebih gelap.
   */
  html[data-theme="dark"] .desktopFetalFeatureTitle{
    color:#ffffff !important;
  }

  html[data-theme="dark"] .desktopFetalFeatureText{
    color:rgba(255,255,255,.96) !important;
  }

  html[data-theme="dark"] .desktopFetalFeatureInstitution{
    color:rgba(255,255,255,.90) !important;
  }
}

/* =========================================================
   LAPTOP COMPACT 980-1150
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){
  .desktopFetalFeature{
    left:28px !important;
    bottom:42px !important;

    width:min(82%, 570px) !important;

    gap:18px !important;
  }

  .desktopFetalFeatureVisual{
    width:118px !important;
    min-width:118px !important;
    height:118px !important;
  }

  .desktopFetalFeatureTitle{
    font-size:26px !important;
  }

  .desktopFetalFeatureText{
    max-width:380px !important;
    margin-top:8px !important;

    font-size:16px !important;
    line-height:1.18 !important;
  }

  .desktopFetalFeatureInstitution{
    margin-top:9px !important;
    font-size:9.5px !important;
  }
}

/* =========================================================
   LAPTOP DENGAN TINGGI <=820PX
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .desktopFetalFeature{
    bottom:38px !important;
  }

  .desktopFetalFeatureVisual{
    width:116px !important;
    min-width:116px !important;
    height:116px !important;
  }

  .desktopFetalFeatureTitle{
    font-size:25px !important;
  }

  .desktopFetalFeatureText{
    max-width:390px !important;
    margin-top:7px !important;
    font-size:15px !important;
  }

  .desktopFetalFeatureInstitution{
    margin-top:8px !important;
    font-size:9px !important;
  }
}

/* =========================================================
   LAPTOP SANGAT PENDEK <=760PX
   ========================================================= */
@media (min-width:980px) and (max-height:760px){
  .desktopFetalFeature{
    bottom:32px !important;
  }

  .desktopFetalFeatureVisual{
    width:102px !important;
    min-width:102px !important;
    height:102px !important;
  }

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

  .desktopFetalFeatureText{
    max-width:360px !important;
    font-size:14px !important;
  }

  .desktopFetalFeatureInstitution{
    font-size:8.5px !important;
  }
}

/* =========================================================
   FINAL DESKTOP FETAL FEATURE - ENTRANCE + TYPEWRITER
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   ANIMASI:
   1. Gambar janin masuk dari sisi kanan.
   2. Awal sangat pudar + sedikit blur.
   3. Semakin mendekati posisi akhir semakin jelas dan tajam.
   4. Text diketik oleh JavaScript:
      judul -> deskripsi -> institusi.
   5. Layout, ukuran, tint, posisi akhir, dan dark mode existing
      tidak diubah.
   6. HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){

  /* =======================================================
     FETAL IMAGE - RIGHT TO LEFT + FADE TO CLEAR
     ======================================================= */
  .desktopFetalFeatureVisual{
    /*
     * ULTRA-SMOOTH COMPOSITOR ANIMATION
     * ----------------------------------
     * Hanya opacity + transform yang dianimasikan.
     * Filter blur sengaja tidak ikut dianimasikan karena
     * dapat memicu raster/repaint berulang dan membuat
     * gerakan terasa patah pada sebagian browser.
     */
    opacity:0;

    transform:
      translate3d(58px, 0, 0)
      scale(.982);

    animation:
      desktopFetalVisualEntrance
      1280ms
      cubic-bezier(.22,1,.36,1)
      110ms
      forwards !important;

    will-change:
      transform,
      opacity !important;

    transform-origin:center center !important;

    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  @keyframes desktopFetalVisualEntrance{
    from{
      opacity:0;
      transform:
        translate3d(58px, 0, 0)
        scale(.982);
    }

    to{
      opacity:1;
      transform:
        translate3d(0,0,0)
        scale(1);
    }
  }

  /*
   * Text container mendapat ukuran minimum agar efek typing
   * tidak membuat komposisi icon + teks melompat-lompat.
   */
  .desktopFetalFeatureCopy{
    min-height:124px !important;
  }

  .desktopFetalFeatureTitle{
    min-height:1.05em !important;
  }

  .desktopFetalFeatureText{
    min-height:2.34em !important;
  }

  .desktopFetalFeatureInstitution{
    min-height:1.1em !important;
  }

  /* =======================================================
     TYPEWRITER CARET
     ======================================================= */
  .desktopFetalFeatureTitle.is-fetal-typing,
  .desktopFetalFeatureText.is-fetal-typing,
  .desktopFetalFeatureInstitution.is-fetal-typing{
    position:relative !important;
  }

  .desktopFetalFeatureTitle.is-fetal-typing::after,
  .desktopFetalFeatureText.is-fetal-typing::after,
  .desktopFetalFeatureInstitution.is-fetal-typing::after{
    content:"" !important;

    display:inline-block !important;

    width:2px !important;
    height:.92em !important;

    margin-left:4px !important;

    background:rgba(255,255,255,.92) !important;
    border-radius:999px !important;

    vertical-align:-.08em !important;

    animation:
      desktopFetalTypingCaret
      .68s
      steps(1,end)
      infinite !important;
  }

  @keyframes desktopFetalTypingCaret{
    0%,
    46%{
      opacity:1;
    }

    47%,
    100%{
      opacity:0;
    }
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT
   Menjaga reserve layout tetap proporsional.
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .desktopFetalFeatureCopy{
    min-height:104px !important;
  }
}

@media (min-width:980px) and (max-height:760px){
  .desktopFetalFeatureCopy{
    min-height:94px !important;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (min-width:980px) and (prefers-reduced-motion:reduce){
  .desktopFetalFeatureVisual{
    opacity:1 !important;
    transform:translate3d(0,0,0) scale(1) !important;
    animation:none !important;
    will-change:auto !important;
  }

  .desktopFetalFeatureTitle.is-fetal-typing::after,
  .desktopFetalFeatureText.is-fetal-typing::after,
  .desktopFetalFeatureInstitution.is-fetal-typing::after{
    content:none !important;
    display:none !important;
    animation:none !important;
  }
}



/* =========================================================
   FINAL DESKTOP FETAL IMAGE ANIMATION - IMPORTANT CONFLICT FIX
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   CATATAN:
   - opacity dan transform pada kondisi awal sengaja
     TIDAK menggunakan !important.
   - @keyframes sekarang mengubah kondisi awal menuju
     opacity 1 / translate 0 dengan compositor-friendly motion.
   - Layout final gambar janin tidak berubah.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .desktopFetalFeatureVisual{
    animation-fill-mode:forwards !important;
  }
}


/* =========================================================
   FINAL DESKTOP FETAL IMAGE - COMPOSITOR STABILITY LOCK
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Menjaga raster PNG janin stabil saat parent bergerak.
   - Drop-shadow visual existing pada janin tetap dipertahankan.
   - Tidak mengubah ukuran atau posisi akhir gambar.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .desktopFetalFeatureImage{
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    transform:translateZ(0) !important;
  }
}

/* =========================================================
   FINAL DESKTOP FETAL TYPING - STABLE LINE BREAK LOCK
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   MASALAH YANG DIPERBAIKI:
   - Saat typing berjalan, browser sebelumnya menghitung ulang
     wrapping pada setiap karakter.
   - text-wrap:balance membuat kata seperti "selama" sempat
     berada di baris pertama lalu pindah ke baris kedua.
   - Perpindahan tersebut terlihat seperti text meloncat.

   SOLUSI:
   - Line break ditentukan langsung dari COPY JavaScript.
   - Bahasa Indonesia:
       Pantau perkembangan janin
       selama masa kehamilan
   - Bahasa English:
       Track fetal development
       throughout pregnancy
   - white-space:pre-line membaca newline tersebut.
   - text-wrap:wrap mencegah browser melakukan balancing ulang.
   - Typing tetap karakter demi karakter dan caret tetap aktif.
   - HP / tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .desktopFetalFeatureText{
    white-space:pre-line !important;

    text-wrap:wrap !important;

    overflow-wrap:normal !important;
    word-break:normal !important;

    /*
     * Menjaga dua baris final memiliki ruang tetap sejak awal.
     * Tidak mengubah font, warna, posisi, ataupun ukuran visual.
     */
    min-height:2.34em !important;
  }
}

/* =========================================================
   FINAL DESKTOP FETAL FEATURE - EXIT LEFT FIXED
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   FLOW FINAL:
   1. janin masuk dari kanan + fade-in;
   2. title diketik;
   3. deskripsi diketik;
   4. #RSAB Harapan Kita diketik;
   5. setelah semuanya selesai, diam 3 detik;
   6. gambar + seluruh text bergeser ke kiri sambil fade-out.

   PENTING:
   - Tidak memakai @keyframes untuk exit.
   - State normal TIDAK memakai opacity/transform !important.
   - State exit memakai class dengan nilai final !important.
   - Dengan demikian tidak terjadi konflik cascade seperti
     implementasi exit sebelumnya.
   - HP / tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .desktopFetalFeature{
    opacity:1;
    transform:translate3d(0,0,0);

    transition:
      opacity 920ms cubic-bezier(.4,0,.2,1),
      transform 920ms cubic-bezier(.22,.61,.36,1) !important;

    will-change:
      opacity,
      transform !important;

    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  .desktopFetalFeature.is-fetal-exiting{
    opacity:0 !important;

    transform:
      translate3d(-78px,0,0) !important;

    pointer-events:none !important;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (min-width:980px) and (prefers-reduced-motion:reduce){
  .desktopFetalFeature{
    transition:none !important;
  }

  .desktopFetalFeature.is-fetal-exiting{
    opacity:0 !important;
    transform:translate3d(0,0,0) !important;
  }
}

/* =========================================================
   FINAL DESKTOP HERO FEATURE SEQUENCE - PART 2
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   PART 1:
   - janin.png
   - Perkembangan Janin

   PART 2:
   - ai-asisten.png
   - Asisten AI Personal

   FLOW:
   - Part 1 entrance kanan -> fade-in -> typing.
   - Tahan 3 detik.
   - Part 1 keluar ke kiri.
   - Part 2 entrance kanan -> fade-in -> typing.
   - Part 2 berhenti dalam kondisi tampil.
   - Struktur siap ditambah Part 3 berikutnya.
   ========================================================= */
@media (min-width:980px){

  /*
   * Override animation lama agar entrance tidak hanya berjalan
   * sekali saat page load. Sekarang animation dipicu class
   * is-fetal-entering setiap Part berganti.
   */
  .desktopFetalFeatureVisual{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);

    animation:none !important;
  }

  .desktopFetalFeature.is-fetal-entering
  .desktopFetalFeatureVisual{
    opacity:0;

    transform:
      translate3d(58px,0,0)
      scale(.982);

    animation:
      desktopFetalVisualEntrance
      1280ms
      cubic-bezier(.22,1,.36,1)
      110ms
      forwards !important;
  }

  /*
   * Gambar Part 2 memakai ruang visual yang sama dengan Part 1.
   * object-fit contain menjaga transparansi PNG dan proporsinya.
   */
  .desktopFetalFeatureImage{
    object-fit:contain !important;
    object-position:center !important;
  }

  /*
   * Deskripsi setiap Part memakai line break yang sudah
   * ditentukan dari JavaScript agar tidak terjadi kata meloncat
   * antarbari saat typing.
   */
  .desktopFetalFeatureText{
    white-space:pre-line !important;
    text-wrap:wrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  /*
   * Saat keluar, class entrance dilewati oleh transform parent.
   * Child tetap compositor-friendly.
   */
  .desktopFetalFeature.is-fetal-exiting{
    pointer-events:none !important;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (min-width:980px) and (prefers-reduced-motion:reduce){
  .desktopFetalFeature.is-fetal-entering
  .desktopFetalFeatureVisual{
    opacity:1 !important;
    transform:translate3d(0,0,0) scale(1) !important;
    animation:none !important;
  }
}

/* =========================================================
   FINAL DESKTOP FEATURE PART 2 - TWO LINE WIDE COPY
   =========================================================
   KHUSUS PART 2 "PERSONAL ASISTEN" PADA LAPTOP/DESKTOP

   TUJUAN:
   - Area text Part 2 dibuat lebih panjang/lebar.
   - Deskripsi dikunci menjadi tepat dua baris:
       Kecerdasan buatan yang dipersonalisasi
       kebutuhan ibu hamil.
   - Baris pertama sengaja lebih panjang daripada baris kedua.
   - Part 1 Perkembangan Janin tidak berubah.
   - Animasi entrance, typing, hold, dan exit tidak berubah.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){

  /*
   * Parent Part 2 diberi ruang horizontal lebih besar.
   * Selector memakai data index sehingga Part 1 tetap memakai
   * ukuran baseline existing.
   */
  .desktopFetalFeature[data-desktop-feature-index="1"]{
    width:min(90%, 860px) !important;
    max-width:860px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureCopy{
    width:100% !important;
    max-width:620px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText{
    width:100% !important;
    max-width:620px !important;

    /*
     * Newline dari JavaScript tetap dihormati.
     * Karena area diperlebar, baris pertama tidak pecah lagi.
     */
    white-space:pre-line !important;
    text-wrap:wrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
}

/* =========================================================
   LAPTOP COMPACT 980-1150
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){
  .desktopFetalFeature[data-desktop-feature-index="1"]{
    width:min(92%, 650px) !important;
    max-width:650px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText{
    max-width:470px !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT <=820PX
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .desktopFetalFeature[data-desktop-feature-index="1"]{
    width:min(92%, 690px) !important;
    max-width:690px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText{
    max-width:490px !important;
  }
}

/* =========================================================
   LAPTOP SANGAT PENDEK <=760PX
   ========================================================= */
@media (min-width:980px) and (max-height:760px){
  .desktopFetalFeature[data-desktop-feature-index="1"]{
    width:min(92%, 620px) !important;
    max-width:620px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText{
    max-width:445px !important;
  }
}

/* =========================================================
   FINAL DESKTOP FEATURE COPY - STANDARDIZED WIDE TWO-LINE
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   STANDAR PART 1 + PART 2:
   - Area text dibuat lebih panjang.
   - Deskripsi dikunci menjadi 2 baris.
   - Baris pertama sengaja lebih panjang dari baris kedua.
   - Part 1:
       Pantau perkembangan janin selama
       masa kehamilan
   - Part 2:
       Kecerdasan buatan yang dipersonalisasi
       kebutuhan ibu hamil.
   - Animasi, gambar, posisi akhir, typing, hold 3 detik,
     exit kiri, dan sequence tidak diubah.
   - HP / tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){

  /*
   * Standard width parent feature untuk Part 1 dan Part 2.
   * Nilai dibuat cukup panjang agar dua baris copy punya
   * breathing room dan tidak terpecah menjadi tiga baris.
   */
  .desktopFetalFeature[data-desktop-feature-index="0"],
  .desktopFetalFeature[data-desktop-feature-index="1"]{
    width:min(90%, 860px) !important;
    max-width:860px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureCopy{
    width:100% !important;
    max-width:620px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText{
    width:100% !important;
    max-width:620px !important;

    white-space:pre-line !important;
    text-wrap:wrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;

    /*
     * Dua baris final selalu punya ruang tinggi yang stabil
     * sejak typing mulai sehingga layout tidak meloncat.
     */
    min-height:2.34em !important;
  }
}

/* =========================================================
   LAPTOP COMPACT 980-1150
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){
  .desktopFetalFeature[data-desktop-feature-index="0"],
  .desktopFetalFeature[data-desktop-feature-index="1"]{
    width:min(92%, 650px) !important;
    max-width:650px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText{
    max-width:470px !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT <=820PX
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .desktopFetalFeature[data-desktop-feature-index="0"],
  .desktopFetalFeature[data-desktop-feature-index="1"]{
    width:min(92%, 690px) !important;
    max-width:690px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText{
    max-width:490px !important;
  }
}

/* =========================================================
   LAPTOP SANGAT PENDEK <=760PX
   ========================================================= */
@media (min-width:980px) and (max-height:760px){
  .desktopFetalFeature[data-desktop-feature-index="0"],
  .desktopFetalFeature[data-desktop-feature-index="1"]{
    width:min(92%, 620px) !important;
    max-width:620px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText{
    max-width:445px !important;
  }
}

/* =========================================================
   FINAL DESKTOP FEATURE DESCRIPTION - SLIGHTLY SMALLER
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Mengecilkan sedikit ukuran text deskripsi Part 1 + Part 2.
   - Judul tetap dengan ukuran existing.
   - Area copy yang sudah diperlebar tetap sama.
   - Struktur dua baris dan line-break tetap terkunci.
   - Typing, entrance, hold, exit, sequence, gambar, dan
     #RSAB Harapan Kita tidak diubah.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText{
    font-size:clamp(16px, 1.32vw, 22px) !important;
    line-height:1.18 !important;
  }
}

/* =========================================================
   LAPTOP COMPACT 980-1150
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){
  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText{
    font-size:15px !important;
    line-height:1.18 !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT <=820PX
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText{
    font-size:14px !important;
    line-height:1.18 !important;
  }
}

/* =========================================================
   LAPTOP SANGAT PENDEK <=760PX
   ========================================================= */
@media (min-width:980px) and (max-height:760px){
  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText{
    font-size:13.5px !important;
    line-height:1.18 !important;
  }
}

/* =========================================================
   FINAL DESKTOP VISUAL HERO TINT - LEFT DENSE + TOP FADE
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Overlay di atas foto tetap paling pekat pada area kiri.
   - Semakin ke kanan semakin pudar.
   - Sekaligus semakin ke atas juga semakin pudar.
   - Titik terpadat dipusatkan ke area kiri-bawah agar lebih
     natural menyatu dengan tint bawah yang sudah final.
   - Shadow/box-shadow card tidak diubah.
   - Foto, radius, animasi feature, typing, dan HP/tablet
     tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .visualHeroTint{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;

    background:
      /*
       * LAYER 1 - LEFT / LOWER-LEFT DENSE SHADOW
       * -----------------------------------------------------
       * Radial gradient dipusatkan di kiri-bawah, sehingga:
       * - kiri lebih pekat;
       * - ke kanan makin pudar;
       * - ke atas juga makin pudar.
       */
      radial-gradient(
        125% 135% at 0% 84%,
        rgba(7,119,111,.40) 0%,
        rgba(8,127,120,.31) 16%,
        rgba(9,134,124,.22) 30%,
        rgba(11,143,132,.13) 44%,
        rgba(15,148,131,.060) 56%,
        rgba(17,155,138,.020) 66%,
        rgba(17,155,138,0) 74%
      ),

      /*
       * LAYER 2 - SUBTLE LEFT UPPER WASH
       * -----------------------------------------------------
       * Menjaga sisi kiri atas tetap ada nuansa shadow, namun
       * lebih tipis agar terasa semakin pudar saat ke atas.
       */
      linear-gradient(
        90deg,
        rgba(9,134,124,.10) 0%,
        rgba(11,143,132,.07) 12%,
        rgba(15,148,131,.038) 24%,
        rgba(17,155,138,.014) 36%,
        rgba(17,155,138,0) 48%
      ),

      /*
       * LAYER 3 - BOTTOM TEAL DEPTH
       * -----------------------------------------------------
       * Mempertahankan tint bawah yang sebelumnya sudah sesuai.
       */
      linear-gradient(
        180deg,
        rgba(8,127,120,0) 0%,
        rgba(8,127,120,0) 36%,
        rgba(8,127,120,.025) 45%,
        rgba(8,127,120,.075) 54%,
        rgba(11,143,132,.16) 63%,
        rgba(17,155,138,.30) 72%,
        rgba(25,167,143,.50) 82%,
        rgba(31,174,148,.70) 91%,
        rgba(37,183,154,.84) 100%
      ) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    pointer-events:none !important;
  }

  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"] .visualHeroTint{
    background:
      radial-gradient(
        125% 138% at 0% 84%,
        rgba(5,74,70,.54) 0%,
        rgba(6,88,82,.42) 16%,
        rgba(7,105,96,.31) 30%,
        rgba(9,119,108,.20) 44%,
        rgba(12,132,118,.09) 57%,
        rgba(15,148,131,.03) 67%,
        rgba(15,148,131,0) 75%
      ),
      linear-gradient(
        90deg,
        rgba(7,105,96,.14) 0%,
        rgba(9,119,108,.10) 12%,
        rgba(12,132,118,.055) 24%,
        rgba(15,148,131,.020) 36%,
        rgba(15,148,131,0) 48%
      ),
      linear-gradient(
        180deg,
        rgba(7,119,111,0) 0%,
        rgba(7,119,111,0) 34%,
        rgba(7,119,111,.035) 44%,
        rgba(7,119,111,.095) 54%,
        rgba(9,134,124,.19) 63%,
        rgba(15,148,131,.35) 72%,
        rgba(23,161,138,.56) 82%,
        rgba(28,168,142,.74) 91%,
        rgba(32,174,146,.88) 100%
      ) !important;
  }
}

/* =========================================================
   FINAL SAFE DESKTOP VISUAL HERO TINT - LEFT UPPER SOFT
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TUJUAN:
   - Mempertahankan kepadatan warna pada kiri-bawah.
   - Sisi kiri tetap lebih pekat daripada kanan.
   - Area kiri-atas dibuat jauh lebih tipis dan halus.
   - Tidak menghilangkan warna kiri-atas sepenuhnya.
   - Tint teal bagian bawah tetap sama seperti versi final.
   - Hanya override .visualHeroTint.
   - Part 1, Part 2, typing, entrance/exit, card shadow,
     HP, tablet, dan sidebar tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .visualHeroTint{
    background:
      /*
       * LAYER 1 - LEFT / LOWER-LEFT DEPTH
       * Pusat kepadatan diturunkan sedikit agar warna kuat
       * lebih terkonsentrasi di kiri-bawah.
       */
      radial-gradient(
        124% 126% at 0% 90%,
        rgba(7,119,111,.40) 0%,
        rgba(8,127,120,.31) 16%,
        rgba(9,134,124,.22) 30%,
        rgba(11,143,132,.13) 44%,
        rgba(15,148,131,.058) 56%,
        rgba(17,155,138,.018) 66%,
        rgba(17,155,138,0) 76%
      ),

      /*
       * LAYER 2 - VERY SOFT UPPER-LEFT VEIL
       * Hanya memberi sapuan teal tipis di sudut kiri-atas.
       * Dibuat jauh lebih transparan daripada versi sebelumnya.
       */
      radial-gradient(
        88% 68% at 0% 0%,
        rgba(9,134,124,.032) 0%,
        rgba(11,143,132,.020) 24%,
        rgba(15,148,131,.009) 43%,
        rgba(17,155,138,.003) 55%,
        rgba(17,155,138,0) 66%
      ),

      /*
       * LAYER 3 - BOTTOM TEAL DEPTH
       * Dipertahankan dari baseline yang sudah disukai.
       */
      linear-gradient(
        180deg,
        rgba(8,127,120,0) 0%,
        rgba(8,127,120,0) 36%,
        rgba(8,127,120,.025) 45%,
        rgba(8,127,120,.075) 54%,
        rgba(11,143,132,.16) 63%,
        rgba(17,155,138,.30) 72%,
        rgba(25,167,143,.50) 82%,
        rgba(31,174,148,.70) 91%,
        rgba(37,183,154,.84) 100%
      ) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    pointer-events:none !important;
  }

  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"] .visualHeroTint{
    background:
      radial-gradient(
        124% 128% at 0% 90%,
        rgba(5,74,70,.54) 0%,
        rgba(6,88,82,.42) 16%,
        rgba(7,105,96,.31) 30%,
        rgba(9,119,108,.20) 44%,
        rgba(12,132,118,.088) 56%,
        rgba(15,148,131,.028) 66%,
        rgba(15,148,131,0) 76%
      ),
      radial-gradient(
        88% 68% at 0% 0%,
        rgba(7,105,96,.046) 0%,
        rgba(9,119,108,.028) 24%,
        rgba(12,132,118,.012) 43%,
        rgba(15,148,131,.004) 55%,
        rgba(15,148,131,0) 66%
      ),
      linear-gradient(
        180deg,
        rgba(7,119,111,0) 0%,
        rgba(7,119,111,0) 34%,
        rgba(7,119,111,.035) 44%,
        rgba(7,119,111,.095) 54%,
        rgba(9,134,124,.19) 63%,
        rgba(15,148,131,.35) 72%,
        rgba(23,161,138,.56) 82%,
        rgba(28,168,142,.74) 91%,
        rgba(32,174,146,.88) 100%
      ) !important;
  }
}

/* =========================================================
   FINAL DESKTOP FEATURE SEQUENCE PART 3 - VIDEO + REGULAR INSTITUTION
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   PART 1:
   - Perkembangan Janin
   - janin.png

   PART 2:
   - Personal Asisten
   - ai-asisten.png

   PART 3:
   - Video Edukasi
   - video.png

   STANDAR COPY:
   - Ketiga Part memakai area copy panjang yang sama.
   - Deskripsi menggunakan line-break stabil dari JavaScript.
   - Ukuran deskripsi mengikuti ukuran compact final Part 1/2.
   - Text institusi #RSAB Harapan Kita dibuat REGULAR / NORMAL.
   - Animasi entrance, typing, hold 3 detik, dan exit kiri
     tetap memakai controller existing.
   - HP / tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){

  .desktopFetalFeature[data-desktop-feature-index="0"],
  .desktopFetalFeature[data-desktop-feature-index="1"],
  .desktopFetalFeature[data-desktop-feature-index="2"]{
    width:min(90%, 860px) !important;
    max-width:860px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="2"]
  .desktopFetalFeatureCopy{
    width:100% !important;
    max-width:620px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="2"]
  .desktopFetalFeatureText{
    width:100% !important;
    max-width:620px !important;

    white-space:pre-line !important;
    text-wrap:wrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;

    min-height:2.34em !important;

    font-size:clamp(16px, 1.32vw, 22px) !important;
    line-height:1.18 !important;
  }

  /*
   * INSTITUTION LABEL FINAL
   * Berlaku untuk Part 1, Part 2, dan Part 3.
   */
  .desktopFetalFeatureInstitution,
  html[data-theme="dark"] .desktopFetalFeatureInstitution{
    font-weight:400 !important;
    font-variation-settings:"wght" 400 !important;
    font-synthesis:none !important;
  }
}

/* =========================================================
   LAPTOP COMPACT 980-1150
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){
  .desktopFetalFeature[data-desktop-feature-index="0"],
  .desktopFetalFeature[data-desktop-feature-index="1"],
  .desktopFetalFeature[data-desktop-feature-index="2"]{
    width:min(92%, 650px) !important;
    max-width:650px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="2"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="2"]
  .desktopFetalFeatureText{
    max-width:470px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="2"]
  .desktopFetalFeatureText{
    font-size:15px !important;
    line-height:1.18 !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT <=820PX
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .desktopFetalFeature[data-desktop-feature-index="0"],
  .desktopFetalFeature[data-desktop-feature-index="1"],
  .desktopFetalFeature[data-desktop-feature-index="2"]{
    width:min(92%, 690px) !important;
    max-width:690px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="2"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="2"]
  .desktopFetalFeatureText{
    max-width:490px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="2"]
  .desktopFetalFeatureText{
    font-size:14px !important;
    line-height:1.18 !important;
  }
}

/* =========================================================
   LAPTOP SANGAT PENDEK <=760PX
   ========================================================= */
@media (min-width:980px) and (max-height:760px){
  .desktopFetalFeature[data-desktop-feature-index="0"],
  .desktopFetalFeature[data-desktop-feature-index="1"],
  .desktopFetalFeature[data-desktop-feature-index="2"]{
    width:min(92%, 620px) !important;
    max-width:620px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="2"]
  .desktopFetalFeatureCopy,
  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="2"]
  .desktopFetalFeatureText{
    max-width:445px !important;
  }

  .desktopFetalFeature[data-desktop-feature-index="0"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="1"]
  .desktopFetalFeatureText,
  .desktopFetalFeature[data-desktop-feature-index="2"]
  .desktopFetalFeatureText{
    font-size:13.5px !important;
    line-height:1.18 !important;
  }
}

/* =========================================================
   FINAL DESKTOP HERO INSTITUTION - LARGER + LOWER
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TARGET:
   - Memperbesar "Peningkatan Mutu".
   - Memperbesar "#RSAB Harapan Kita".
   - Memindahkan seluruh blok lebih ke bawah dari trustNote.
   - Font tetap regular / normal agar tampil formal.
   - Posisi kiri tetap mengikuti alignment contentPanel.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){
  .desktopHeroInstitution{
    /*
     * Sebelumnya final berada sekitar 24px dari trustNote.
     * Ditambah menjadi 36px agar identitas turun lebih jelas
     * tanpa mengubah posisi elemen di atasnya.
     */
    margin-top:36px !important;
    margin-bottom:0 !important;
  }

  .desktopHeroInstitutionCopy{
    gap:7px !important;
  }

  .desktopHeroInstitutionProgram{
    font-size:18px !important;
    line-height:1.12 !important;

    font-weight:400 !important;
    font-variation-settings:"wght" 400 !important;
    font-synthesis:none !important;

    letter-spacing:.010em !important;
  }

  .desktopHeroInstitutionText{
    font-size:14px !important;
    line-height:1.16 !important;

    font-weight:400 !important;
    font-variation-settings:"wght" 400 !important;
    font-synthesis:none !important;

    letter-spacing:.018em !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT <=820PX
   Tetap lebih besar dari versi sebelumnya, tetapi menjaga
   ruang vertikal pada laptop dengan tinggi layar terbatas.
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .desktopHeroInstitution{
    margin-top:29px !important;
  }

  .desktopHeroInstitutionCopy{
    gap:6px !important;
  }

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

  .desktopHeroInstitutionText{
    font-size:13px !important;
  }
}

/* =========================================================
   LAPTOP SANGAT PENDEK <=760PX
   ========================================================= */
@media (min-width:980px) and (max-height:760px){
  .desktopHeroInstitution{
    margin-top:24px !important;
  }

  .desktopHeroInstitutionProgram{
    font-size:15.5px !important;
  }

  .desktopHeroInstitutionText{
    font-size:12.2px !important;
  }
}

/* =========================================================
   FINAL DESKTOP HERO BRAND NAME - STRONGER CTA MATCH GRADIENT
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TARGET:
   - Text "Bumil Ku" terlihat lebih tegas / kuat.
   - Gradient existing hijau -> lime tetap dipertahankan.
   - Warna PALING KIRI disamakan persis dengan warna kiri
     tombol Daftar / Masuk desktop: #087f78.
   - Warna tengah dibuat lebih jenuh agar tidak terlihat pudar.
   - Lime di sisi kanan tetap dipertahankan sebagai identitas
     gradient Bumil Ku.
   - Ukuran, posisi, logo, tagline, headline, CTA, HP, tablet,
     dan seluruh fungsi tidak diubah.
   ========================================================= */
@media (min-width:980px){
  .heroBrandName{
    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 existing memang sudah bold.
     * Nilai ini dikunci agar hasil lebih solid dan tidak
     * terpengaruh rule sebelumnya.
     */
    font-weight:800 !important;
    font-synthesis:none !important;

    /*
     * Highlight putih lama membuat gradient tampak sedikit
     * washed-out. Diganti depth gelap tipis agar bentuk glyph
     * lebih tegas tanpa mengubah warna gradient.
     */
    text-shadow:
      0 -0.2px 0 rgba(255,255,255,.08) !important;

    filter:
      drop-shadow(0 1px 1px rgba(5,83,78,.22))
      drop-shadow(0 3px 6px rgba(16,70,80,.12)) !important;
  }

  /*
   * Dark mode mengikuti warna kiri tombol Daftar / Masuk
   * dark mode (#07776f), tetapi transisi tetap lebih terang
   * supaya keterbacaan di background gelap tetap baik.
   */
  html[data-theme="dark"] .heroBrandName{
    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:none !important;

    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.34))
      drop-shadow(0 3px 7px rgba(0,0,0,.24)) !important;
  }
}

/* =========================================================
   FINAL DESKTOP NAVBAR BRAND NAME - STRONGER CTA MATCH GRADIENT
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TARGET:
   - Memperkuat text "Bumil Ku" pada navbar.
   - Gradient mengikuti versi heroBrandName final.
   - Warna paling kiri sama persis dengan sisi kiri tombol
     Daftar / Masuk desktop: #087f78.
   - Warna tengah dibuat lebih jenuh agar tidak terlihat pudar.
   - Sisi kanan tetap mempertahankan lime.
   - Ukuran, posisi, logo navbar, tagline, menu, CTA,
     HP, tablet, dan fungsi tidak diubah.
   ========================================================= */
@media (min-width:980px){
  .brandCopy strong{
    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.2px 0 rgba(255,255,255,.08) !important;

    filter:
      drop-shadow(0 1px 1px rgba(5,83,78,.22))
      drop-shadow(0 3px 6px rgba(16,70,80,.12)) !important;
  }

  html[data-theme="dark"] .brandCopy 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:none !important;

    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.34))
      drop-shadow(0 3px 7px rgba(0,0,0,.24)) !important;
  }
}

/* =========================================================
   FINAL MOBILE BUMIL KU BRAND TEXT - STRONGER CTA MATCH GRADIENT
   =========================================================
   KHUSUS HP <=620PX

   TARGET:
   - Memperkuat "Bumil Ku" pada hero.
   - Memperkuat "Bumil Ku" pada navbar.
   - Gradient sama family dengan versi desktop final.
   - Warna paling kiri sama persis dengan sisi kiri tombol
     Daftar / Masuk: #087f78.
   - Sisi kanan tetap memakai lime sebagai identitas gradient.
   - Hanya warna/depth text yang diubah.
   - Ukuran, posisi, spacing, logo, navbar, sidebar,
     button, dan layout HP tidak diubah.
   ========================================================= */
@media (max-width:620px){

  .heroBrandName,
  .brandCopy strong{
    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.15px 0 rgba(255,255,255,.07) !important;

    filter:
      drop-shadow(0 1px 1px rgba(5,83,78,.20))
      drop-shadow(0 2px 4px rgba(16,70,80,.10)) !important;
  }

  /* =======================================================
     DARK MODE MOBILE
     ======================================================= */
  html[data-theme="dark"] .heroBrandName,
  html[data-theme="dark"] .brandCopy 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:none !important;

    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.30))
      drop-shadow(0 2px 5px rgba(0,0,0,.20)) !important;
  }
}

/* =========================================================
   FINAL DESKTOP FEATURE PART 1-3 - SOLID NORMAL DIVIDER
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   PERUBAHAN:
   - Vertical line tidak lagi memakai gradient.
   - Tidak ada glow / shadow pada garis.
   - Tidak ada fade visual pada ujung atas / bawah.
   - Garis menjadi solid, lurus, dan mudah terlihat.
   - Ketebalan tetap 2px.
   - Jarak divider ke text tetap lega.
   - Fade-in / fade-out pergantian Part tetap dipertahankan.
   - Berlaku otomatis untuk Part 1, Part 2, dan Part 3.
   - HTML, JavaScript, HP, dan tablet tidak diubah.
   ========================================================= */
@media (min-width:980px){

  .desktopFetalFeatureCopy{
    position:relative !important;
    margin-left:10px !important;
  }

  .desktopFetalFeatureCopy::before{
    content:"" !important;

    position:absolute !important;

    left:-20px !important;

    /*
     * Garis dibuat sedikit lebih tinggi daripada versi sebelumnya
     * agar terbaca jelas sebagai pemisah gambar dan text.
     */
    top:5% !important;
    bottom:5% !important;

    width:2px !important;
    min-width:2px !important;

    /*
     * SOLID NORMAL LINE
     * Tidak memakai gradient dan tidak memakai glow.
     */
    background:rgba(255,255,255,.90) !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;
    filter:none !important;

    /*
     * Kondisi awal tetap tersembunyi supaya Part 1 pun
     * memulai divider bersama entrance feature.
     */
    opacity:0;

    transform:
      translate3d(12px,0,0);

    transform-origin:center center !important;

    pointer-events:none !important;
    user-select:none !important;

    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;

    will-change:opacity, transform !important;
  }

  /* =======================================================
     ENTRANCE
     Tetap sinkron dengan entrance gambar.
     ======================================================= */
  .desktopFetalFeature.is-fetal-entering
  .desktopFetalFeatureCopy::before{
    /*
     * TIMING SYNC:
     * Divider tidak lagi muncul terlalu awal setelah Part lama
     * selesai fade-out.
     *
     * Text mulai typing pada 640ms.
     * Divider mulai pada 560ms, hanya 80ms lebih awal,
     * sehingga garis dan text terasa muncul sebagai satu komposisi.
     */
    animation:
      desktopFeatureSolidDividerEntrance
      720ms
      cubic-bezier(.22,1,.36,1)
      560ms
      both !important;
  }

  @keyframes desktopFeatureSolidDividerEntrance{
    0%{
      opacity:0;
      transform:translate3d(12px,0,0);
    }

    45%{
      opacity:.48;
    }

    72%{
      opacity:.78;
    }

    100%{
      opacity:.90;
      transform:translate3d(0,0,0);
    }
  }

  /* =======================================================
     EXIT
     Tetap sinkron dengan exit Part 920ms.
     ======================================================= */
  .desktopFetalFeature.is-fetal-exiting
  .desktopFetalFeatureCopy::before{
    animation:
      desktopFeatureSolidDividerExit
      920ms
      cubic-bezier(.4,0,.2,1)
      0ms
      forwards !important;
  }

  @keyframes desktopFeatureSolidDividerExit{
    0%{
      opacity:.90;
      transform:translate3d(0,0,0);
    }

    45%{
      opacity:.58;
    }

    100%{
      opacity:0;
      transform:translate3d(-18px,0,0);
    }
  }

  /* =======================================================
     DARK MODE
     Tetap solid, hanya sedikit diturunkan intensitasnya.
     ======================================================= */
  html[data-theme="dark"]
  .desktopFetalFeatureCopy::before{
    background:rgba(255,255,255,.78) !important;
    box-shadow:none !important;
    filter:none !important;
  }
}

/* =========================================================
   LAPTOP COMPACT 980-1150
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){
  .desktopFetalFeatureCopy{
    margin-left:8px !important;
  }

  .desktopFetalFeatureCopy::before{
    left:-18px !important;
    top:6% !important;
    bottom:6% !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT <=820PX
   ========================================================= */
@media (min-width:980px) and (max-height:820px){
  .desktopFetalFeatureCopy::before{
    top:6% !important;
    bottom:6% !important;
  }
}

/* =========================================================
   LAPTOP SANGAT PENDEK <=760PX
   ========================================================= */
@media (min-width:980px) and (max-height:760px){
  .desktopFetalFeatureCopy{
    margin-left:7px !important;
  }

  .desktopFetalFeatureCopy::before{
    left:-17px !important;
    top:7% !important;
    bottom:7% !important;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (min-width:980px) and (prefers-reduced-motion:reduce){
  .desktopFetalFeatureCopy::before{
    opacity:.90 !important;
    transform:translate3d(0,0,0) !important;
    animation:none !important;
  }
}

/* =========================================================
   FINAL DESKTOP ARTICLE SEARCH - RIGHT SHIFT + LEFT ICON
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TARGET:
   - Search digeser lebih ke kanan agar tidak terlalu mepet
     dengan identitas Peningkatan Mutu / RSAB Harapan Kita.
   - Icon search dipindahkan secara VISUAL ke sisi kiri.
   - Input tetap menjadi field utama dan berada setelah icon.
   - Struktur HTML, ID, method GET, action artikel.html,
     dan JavaScript tidak diubah.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){

  .appHeader > .desktopArticleSearch{
    /*
     * Tambahan breathing space dari lockup RSAB.
     * Search tetap mengikuti flow navbar existing.
     */
    margin-left:clamp(18px, 1.45vw, 28px) !important;
    margin-right:0 !important;

    /*
     * Secara DOM input masih lebih dahulu agar urutan fokus
     * keyboard tetap natural. Grid hanya mengubah posisi visual.
     *
     * Kolom 1 = icon
     * Kolom 2 = input
     */
    grid-template-columns:36px minmax(0,1fr) !important;
    column-gap:3px !important;
  }

  .desktopArticleSearchButton{
    grid-column:1 !important;
    grid-row:1 !important;

    justify-self:start !important;

    /*
     * Divider sekarang berada di sisi KANAN icon.
     * Border kiri existing dihilangkan.
     */
    border-left:0 !important;
    border-right:1px solid rgba(58,105,119,.11) !important;

    border-radius:9px !important;
  }

  .desktopArticleSearchInput{
    grid-column:2 !important;
    grid-row:1 !important;

    /*
     * Padding diseimbangkan karena icon sekarang berada
     * di sebelah kiri field.
     */
    padding-left:10px !important;
    padding-right:11px !important;
  }

  html[data-theme="dark"] .desktopArticleSearchButton{
    border-left:0 !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
  }
}

/* =========================================================
   LAPTOP COMPACT 980-1150
   =========================================================
   Search tetap diberi ruang dari RSAB, namun lebih kecil
   supaya navbar tidak terlalu padat.
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){

  .appHeader > .desktopArticleSearch{
    margin-left:11px !important;

    grid-template-columns:30px minmax(0,1fr) !important;
    column-gap:2px !important;
  }

  .desktopArticleSearchButton{
    grid-column:1 !important;
    grid-row:1 !important;

    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;

    border-left:0 !important;
    border-right:1px solid rgba(58,105,119,.11) !important;
  }

  .desktopArticleSearchInput{
    grid-column:2 !important;
    grid-row:1 !important;

    padding-left:7px !important;
    padding-right:6px !important;
  }

  html[data-theme="dark"] .desktopArticleSearchButton{
    border-left:0 !important;
    border-right-color:rgba(255,255,255,.08) !important;
  }
}

/* =========================================================
   FINAL DESKTOP FOOTER LEGAL + COPYRIGHT - UNIFIED STYLE
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TARGET:
   - Syarat & Ketentuan, separator, Kebijakan Privasi,
     dan copyright memakai visual hierarchy yang sama.
   - Warna legal links disamakan dengan copyright.
   - Font size seluruh footer text diperbesar agar terbaca jelas.
   - Font weight disamakan menjadi 500.
   - Hover tetap interaktif tetapi tidak berubah menjadi teal.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){

  .footerCopyright,
  .footerLinks,
  .footerLinks a,
  .footerLinks span{
    color:#7d909a !important;

    font-family:"Inter",
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif !important;

    font-size:11.5px !important;
    line-height:1.25 !important;
    font-weight:500 !important;
    letter-spacing:.006em !important;
  }

  .footerCopyright{
    margin:0 !important;
    padding:0 !important;
  }

  .footerLinks{
    gap:12px !important;
  }

  .footerLinks a{
    padding:3px 2px !important;
    text-decoration:none !important;

    transition:
      opacity .18s ease,
      color .18s ease !important;
  }

  /*
   * Hover tetap terasa interaktif namun warna tidak berubah
   * dari gaya footer/copyright.
   */
  .footerLinks a:hover{
    color:#7d909a !important;
    opacity:.72 !important;
    text-decoration:none !important;
  }

  /*
   * Underline teal lama dihapus agar link benar-benar
   * satu gaya dengan copyright.
   */
  .footerLinks a::after{
    content:none !important;
    display:none !important;
  }

  .footerLinks span{
    opacity:.58 !important;
  }

  /* =======================================================
     DARK MODE
     Semua text footer memakai warna muted dark yang sama.
     ======================================================= */
  html[data-theme="dark"] .footerCopyright,
  html[data-theme="dark"] .footerLinks,
  html[data-theme="dark"] .footerLinks a,
  html[data-theme="dark"] .footerLinks span{
    color:#8faeb4 !important;
  }

  html[data-theme="dark"] .footerLinks a:hover{
    color:#8faeb4 !important;
    opacity:.72 !important;
  }

  html[data-theme="dark"] .footerLinks span{
    opacity:.56 !important;
  }
}

/* =========================================================
   LAPTOP COMPACT HEIGHT <=820PX
   Tetap lebih besar daripada ukuran lama 8.6px / 9.8px.
   ========================================================= */
@media (min-width:980px) and (max-height:820px){

  .footerCopyright,
  .footerLinks,
  .footerLinks a,
  .footerLinks span{
    font-size:10.8px !important;
    line-height:1.22 !important;
    font-weight:500 !important;
  }

  .footerLinks{
    gap:10px !important;
  }
}

/* =========================================================
   LAPTOP SANGAT PENDEK <=760PX
   ========================================================= */
@media (min-width:980px) and (max-height:760px){

  .footerCopyright,
  .footerLinks,
  .footerLinks a,
  .footerLinks span{
    font-size:10.4px !important;
  }
}

/* =========================================================
   FINAL DESKTOP FEATURE EXIT - COMPACT GROUP MOVEMENT
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   MASALAH:
   - Parent .desktopFetalFeature sudah bergerak ke kiri saat exit.
   - Divider sebelumnya mempunyai translateX(-18px) sendiri.
   - Akibatnya divider bergerak lebih jauh daripada gambar
     dan text sehingga fade-out terlihat tidak kompak.

   SOLUSI:
   - Saat is-fetal-exiting aktif, divider TIDAK menjalankan
     animasi / transform exit sendiri.
   - Divider dipertahankan pada posisi normal di dalam copy.
   - Seluruh gerakan kiri + fade-out hanya mengikuti parent.
   - Gambar, divider, judul, deskripsi, dan institusi sekarang
     bergerak sebagai satu kesatuan.
   - Entrance divider tetap memakai animasi existing.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){

  .desktopFetalFeature.is-fetal-exiting
  .desktopFetalFeatureCopy::before{
    /*
     * Parent .desktopFetalFeature menangani seluruh
     * translate + fade-out 920ms.
     */
    animation:none !important;
    transition:none !important;

    /*
     * Divider tidak bergerak relatif terhadap text.
     * Fade visual mengikuti opacity parent.
     */
    opacity:.90 !important;
    transform:translate3d(0,0,0) !important;

    will-change:auto !important;
  }

  html[data-theme="dark"]
  .desktopFetalFeature.is-fetal-exiting
  .desktopFetalFeatureCopy::before{
    opacity:.78 !important;
    transform:translate3d(0,0,0) !important;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (min-width:980px) and (prefers-reduced-motion:reduce){

  .desktopFetalFeature.is-fetal-exiting
  .desktopFetalFeatureCopy::before{
    animation:none !important;
    transition:none !important;
    transform:translate3d(0,0,0) !important;
  }
}

/* =========================================================
   FINAL DESKTOP FEATURE DIVIDER - TRANSITION TIMING SYNC
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   FLOW BARU:
   1. Part lama fade-out sebagai satu grup.
   2. Part baru disiapkan.
   3. Gambar mulai entrance.
   4. Divider tetap tersembunyi lebih lama.
   5. Divider mulai muncul pada 560ms.
   6. Text mulai typing pada 640ms.
   7. Divider + text sekarang terasa muncul kompak.

   PENTING:
   - Divider tidak pernah menjalankan entrance ketika
     is-fetal-exiting masih aktif.
   - Exit tetap hanya mengikuti parent feature.
   - HTML structure dan JavaScript tidak diubah.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){

  .desktopFetalFeature.is-fetal-entering:not(.is-fetal-exiting)
  .desktopFetalFeatureCopy::before{
    animation:
      desktopFeatureSolidDividerEntrance
      720ms
      cubic-bezier(.22,1,.36,1)
      560ms
      both !important;
  }

  /*
   * Exit mempunyai prioritas mutlak.
   * Divider tidak membuat gerakan/fade terpisah.
   */
  .desktopFetalFeature.is-fetal-exiting
  .desktopFetalFeatureCopy::before{
    animation:none !important;
    transition:none !important;
    transform:translate3d(0,0,0) !important;
    will-change:auto !important;
  }
}

/* =========================================================
   FINAL DESKTOP HERO BRAND NAME - PREMIUM TRUE 3D DEPTH
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TARGET:
   - Membuat text "Bumil Ku" lebih timbul / raised / 3D.
   - Gradient existing TIDAK diubah satu warna pun.
   - Ketajaman glyph tetap dipertahankan.
   - Font size, weight, letter-spacing, line-height, posisi,
     dan ukuran layout tidak diubah.
   - Tidak memakai blur pada permukaan text.
   - 3D dibuat dari beberapa lapis silhouette drop-shadow:
       1. contact depth sangat dekat;
       2. extrusion tipis dan tajam;
       3. depth menengah;
       4. ambient shadow lembut.
   - Highlight atas sangat tipis menjaga kesan bevel tanpa
     membuat gradient terlihat washed-out.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){

  .heroBrandName{
    /*
     * PENTING:
     * Background gradient sengaja TIDAK dideklarasikan ulang.
     * Dengan demikian seluruh warna final existing tetap
     * persis mengikuti rule sebelumnya.
     */

    text-shadow:
      0 -0.35px 0 rgba(255,255,255,.11) !important;

    /*
     * Seluruh layer mengikuti alpha bentuk huruf sehingga
     * gradient utama tetap tajam dan tidak ikut diblur.
     */
    filter:
      /* contact / bevel depth */
      drop-shadow(0 0.75px 0 rgba(5,83,78,.26))

      /* extrusion tipis - tetap tajam */
      drop-shadow(0 1.55px 0.15px rgba(5,78,73,.22))
      drop-shadow(0 2.35px 0.35px rgba(6,73,69,.18))

      /* depth utama */
      drop-shadow(0 3.6px 1.2px rgba(9,76,72,.16))

      /* ambient depth */
      drop-shadow(0 6px 5px rgba(16,70,80,.13))
      drop-shadow(0 10px 11px rgba(16,70,80,.075)) !important;

    transform:translateZ(0) !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;

    /*
     * Menjaga rasterisasi text stabil dan tajam.
     */
    text-rendering:geometricPrecision !important;
  }

  /* =======================================================
     DARK MODE
     Gradient dark existing juga TIDAK diubah.
     Hanya depth dibuat lebih kuat agar tetap terlihat 3D
     di atas surface gelap.
     ======================================================= */
  html[data-theme="dark"] .heroBrandName{
    text-shadow:
      0 -0.30px 0 rgba(255,255,255,.055) !important;

    filter:
      drop-shadow(0 0.75px 0 rgba(0,0,0,.48))
      drop-shadow(0 1.55px 0.20px rgba(0,0,0,.40))
      drop-shadow(0 2.45px 0.45px rgba(0,0,0,.34))
      drop-shadow(0 3.8px 1.3px rgba(0,0,0,.29))
      drop-shadow(0 6px 5px rgba(0,0,0,.25))
      drop-shadow(0 10px 12px rgba(0,0,0,.16)) !important;
  }
}

/* =========================================================
   FINAL DESKTOP NAVBAR BRAND NAME - PREMIUM TRUE 3D DEPTH
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   TARGET:
   - Menerapkan karakter 3D heroBrandName pada text
     "Bumil Ku" di navbar.
   - Gradient navbar existing TIDAK diubah satu warna pun.
   - Ukuran, font-weight, letter-spacing, line-height,
     posisi brand, logo, tinggi navbar, dan layout tidak diubah.
   - Depth diskalakan khusus ukuran text navbar agar tidak berat.
   - HP dan tablet tidak disentuh.
   ========================================================= */
@media (min-width:980px){

  .brandCopy strong{
    /*
     * Gradient sengaja tidak dideklarasikan ulang.
     * Rule gradient final existing tetap menjadi sumber warna.
     */

    text-shadow:
      0 -0.25px 0 rgba(255,255,255,.10) !important;

    /*
     * TRUE 3D DEPTH - SCALED FOR NAVBAR
     * Lebih ringkas daripada hero karena ukuran navbar
     * hanya sekitar 21-25px.
     */
    filter:
      /* contact depth */
      drop-shadow(0 0.50px 0 rgba(5,83,78,.25))

      /* extrusion tipis / tajam */
      drop-shadow(0 1.00px 0.10px rgba(5,78,73,.21))
      drop-shadow(0 1.60px 0.25px rgba(6,73,69,.17))

      /* depth utama */
      drop-shadow(0 2.45px 0.75px rgba(9,76,72,.15))

      /* ambient depth */
      drop-shadow(0 4px 3.2px rgba(16,70,80,.115))
      drop-shadow(0 6.5px 6.5px rgba(16,70,80,.065)) !important;

    transform:translateZ(0) !important;

    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;

    text-rendering:geometricPrecision !important;
  }

  /* =======================================================
     DARK MODE
     Gradient dark existing tetap dipertahankan.
     ======================================================= */
  html[data-theme="dark"] .brandCopy strong{
    text-shadow:
      0 -0.20px 0 rgba(255,255,255,.045) !important;

    filter:
      drop-shadow(0 0.50px 0 rgba(0,0,0,.46))
      drop-shadow(0 1.00px 0.12px rgba(0,0,0,.39))
      drop-shadow(0 1.65px 0.28px rgba(0,0,0,.33))
      drop-shadow(0 2.55px 0.80px rgba(0,0,0,.28))
      drop-shadow(0 4px 3.3px rgba(0,0,0,.23))
      drop-shadow(0 6.5px 7px rgba(0,0,0,.145)) !important;
  }
}

/* =========================================================
   FINAL MOBILE BUMIL KU BRAND TEXT - PREMIUM TRUE 3D DEPTH
   =========================================================
   KHUSUS HP <=620PX

   TARGET:
   - Hero <span class="heroBrandName">Bumil Ku</span>
     terlihat lebih timbul / raised / 3D.
   - Navbar <strong>Bumil Ku</strong> di .brandCopy
     mendapat karakter 3D yang sama.
   - Gradient existing hijau -> lime TIDAK diubah.
   - Ketajaman glyph tetap dipertahankan.
   - Font-size, font-weight, line-height, letter-spacing,
     posisi, logo, navbar, sidebar, dan layout tidak diubah.
   - Depth dibuat berbeda skala:
       hero   = lebih dalam;
       navbar = lebih compact.
   - Tablet dan desktop tidak disentuh.
   ========================================================= */
@media (max-width:620px){

  /* =======================================================
     HERO BRAND NAME - MOBILE TRUE 3D
     ======================================================= */
  .heroBrandName{
    /*
     * Gradient TIDAK dideklarasikan ulang.
     * Warna tetap memakai mobile gradient final existing.
     */

    text-shadow:
      0 -0.30px 0 rgba(255,255,255,.10) !important;

    filter:
      /* contact depth */
      drop-shadow(0 .65px 0 rgba(5,83,78,.25))

      /* extrusion tipis / tajam */
      drop-shadow(0 1.25px .10px rgba(5,78,73,.21))
      drop-shadow(0 1.95px .25px rgba(6,73,69,.18))

      /* depth utama */
      drop-shadow(0 2.9px .75px rgba(9,76,72,.16))

      /* ambient depth */
      drop-shadow(0 4.6px 3.5px rgba(16,70,80,.12))
      drop-shadow(0 7px 7px rgba(16,70,80,.07)) !important;

    transform:translateZ(0) !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;

    text-rendering:geometricPrecision !important;
  }

  /* =======================================================
     NAVBAR BRAND NAME - MOBILE TRUE 3D
     Lebih kecil agar tetap tajam pada font 15-18px.
     ======================================================= */
  .brandCopy strong{
    text-shadow:
      0 -0.22px 0 rgba(255,255,255,.09) !important;

    filter:
      /* contact */
      drop-shadow(0 .45px 0 rgba(5,83,78,.24))

      /* micro extrusion */
      drop-shadow(0 .85px .08px rgba(5,78,73,.20))
      drop-shadow(0 1.35px .18px rgba(6,73,69,.17))

      /* depth */
      drop-shadow(0 2px .55px rgba(9,76,72,.145))

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

  /* =======================================================
     DARK MODE - HERO
     Gradient dark existing tetap dipertahankan.
     ======================================================= */
  html[data-theme="dark"] .heroBrandName{
    text-shadow:
      0 -0.24px 0 rgba(255,255,255,.045) !important;

    filter:
      drop-shadow(0 .65px 0 rgba(0,0,0,.46))
      drop-shadow(0 1.25px .12px rgba(0,0,0,.39))
      drop-shadow(0 1.95px .28px rgba(0,0,0,.33))
      drop-shadow(0 3px .85px rgba(0,0,0,.28))
      drop-shadow(0 4.7px 3.6px rgba(0,0,0,.23))
      drop-shadow(0 7.2px 7.5px rgba(0,0,0,.145)) !important;
  }

  /* =======================================================
     DARK MODE - NAVBAR
     ======================================================= */
  html[data-theme="dark"] .brandCopy strong{
    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
   Depth sedikit dikurangi agar tidak menumpuk pada glyph
   yang lebih kecil.
   ========================================================= */
@media (max-width:420px){

  .heroBrandName{
    filter:
      drop-shadow(0 .58px 0 rgba(5,83,78,.24))
      drop-shadow(0 1.10px .10px rgba(5,78,73,.20))
      drop-shadow(0 1.72px .22px rgba(6,73,69,.17))
      drop-shadow(0 2.55px .68px rgba(9,76,72,.15))
      drop-shadow(0 4px 3px rgba(16,70,80,.11))
      drop-shadow(0 6px 6px rgba(16,70,80,.065)) !important;
  }

  .brandCopy 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"] .heroBrandName{
    filter:
      drop-shadow(0 .58px 0 rgba(0,0,0,.45))
      drop-shadow(0 1.10px .11px rgba(0,0,0,.38))
      drop-shadow(0 1.72px .24px rgba(0,0,0,.32))
      drop-shadow(0 2.6px .72px rgba(0,0,0,.27))
      drop-shadow(0 4px 3.1px rgba(0,0,0,.22))
      drop-shadow(0 6px 6.4px rgba(0,0,0,.14)) !important;
  }

  html[data-theme="dark"] .brandCopy 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
   Tetap 3D tetapi lebih ringan supaya text navbar 15.2px
   tidak kehilangan ketajaman.
   ========================================================= */
@media (max-width:350px){

  .heroBrandName{
    filter:
      drop-shadow(0 .50px 0 rgba(5,83,78,.23))
      drop-shadow(0 .95px .08px rgba(5,78,73,.19))
      drop-shadow(0 1.45px .18px rgba(6,73,69,.16))
      drop-shadow(0 2.15px .58px rgba(9,76,72,.145))
      drop-shadow(0 3.4px 2.6px rgba(16,70,80,.105))
      drop-shadow(0 5.1px 5px rgba(16,70,80,.06)) !important;
  }

  .brandCopy 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"] .heroBrandName{
    filter:
      drop-shadow(0 .50px 0 rgba(0,0,0,.44))
      drop-shadow(0 .95px .09px rgba(0,0,0,.37))
      drop-shadow(0 1.45px .20px rgba(0,0,0,.31))
      drop-shadow(0 2.2px .62px rgba(0,0,0,.26))
      drop-shadow(0 3.4px 2.7px rgba(0,0,0,.21))
      drop-shadow(0 5.1px 5.3px rgba(0,0,0,.135)) !important;
  }

  html[data-theme="dark"] .brandCopy 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;
  }
}

/* =========================================================
   FINAL MOBILE SIDEBAR BRAND - EXACT NAVBAR VISUAL MATCH
   =========================================================
   KHUSUS HP <=620PX

   TARGET:
   - Brand Bumil Ku di header sidebar memakai sistem visual
     yang sama dengan brandLockup navbar atas.
   - Logo memakai struktur:
       brandLogoShadow > brandLogoWrap > brandLogo
   - Text memakai:
       brandCopy > strong + small
   - Heart shape, 3D logo shadow, gradient text, true 3D text,
     warna subtitle, ukuran, line-height, dan spacing mengikuti
     navbar mobile pada breakpoint yang sama.
   - Identitas RSAB, tombol close, sidebar animation,
     backdrop, performance lock, menu, CTA, tablet, dan
     desktop tidak diubah.
   ========================================================= */
@media (max-width:620px){

  .mobileSidebarBrand{
    min-width:0 !important;
    max-width:148px !important;

    display:flex !important;
    flex:0 1 auto !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;

    /*
     * Sama dengan gap final brandLockup navbar <=620px.
     */
    gap:3px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }

  /* =======================================================
     LOGO WRAPPER - SAMA DENGAN NAVBAR
     ======================================================= */
  .mobileSidebarBrand > .brandLogoShadow{
    position:relative !important;

    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    flex:0 0 48px !important;

    display:inline-grid !important;
    place-items:center !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
    isolation:isolate !important;

    /*
     * Sama dengan 3D shadow navbar mobile.
     */
    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;
  }

  html[data-theme="dark"]
  .mobileSidebarBrand > .brandLogoShadow{
    filter:
      drop-shadow(0 2px 4px rgba(0,0,0,.26))
      drop-shadow(0 7px 11px rgba(0,0,0,.28))
      drop-shadow(0 12px 19px rgba(15,159,141,.09)) !important;
  }

  .mobileSidebarBrand
  .brandLogoShadow .brandLogoWrap,
  html[data-theme="dark"]
  .mobileSidebarBrand
  .brandLogoShadow .brandLogoWrap{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    overflow:hidden !important;
    isolation:isolate !important;

    /*
     * Heart mask sama dengan navbar mobile.
     */
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C20 67 8 54 7 37 C6 20 18 8 34 7 C42 7 48 11 50 19 C53 15 59 12 67 13 C81 14 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22white%22 d=%22M50 91 C46 88 41 84 35 79 C20 67 8 54 7 37 C6 20 18 8 34 7 C42 7 48 11 50 19 C53 15 59 12 67 13 C81 14 91 25 90 40 C89 57 78 69 65 79 C59 84 54 88 50 91 Z%22/%3E%3C/svg%3E") !important;

    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;

    -webkit-mask-position:center !important;
    mask-position:center !important;

    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
  }

  .mobileSidebarBrand
  .brandLogoShadow .brandLogoWrap::before,
  .mobileSidebarBrand
  .brandLogoShadow .brandLogoWrap::after{
    content:none !important;
    display:none !important;
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
    opacity:0 !important;
  }

  .mobileSidebarBrand
  .brandLogoShadow .brandLogo{
    position:relative !important;
    z-index:2 !important;

    width:86% !important;
    min-width:0 !important;
    max-width:86% !important;
    height:86% !important;
    min-height:0 !important;
    max-height:86% !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    object-fit:contain !important;
    object-position:center !important;

    filter:
      drop-shadow(0 3px 5px rgba(14,147,130,.09)) !important;

    transform:
      translate3d(-0.4%, 1.35%, 0) !important;
  }

  /* =======================================================
     TEXT COPY - SAMA DENGAN NAVBAR
     ======================================================= */
  .mobileSidebarBrand > .brandCopy{
    min-width:0 !important;
    max-width:96px !important;

    display:flex !important;
    flex:0 1 auto !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;

    margin:0 0 0 -1px !important;
    padding:0 !important;

    gap:0 !important;
    line-height:1.05 !important;

    overflow:hidden !important;
  }

  .mobileSidebarBrand .brandCopy strong{
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    /*
     * Ukuran + metrics sama dengan navbar <=620px.
     * Gradient dan true 3D depth diwarisi dari final
     * .brandCopy strong global/mobile.
     */
    font-size:18px !important;
    line-height:1.02 !important;
    font-weight:800 !important;
    letter-spacing:-.040em !important;

    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  .mobileSidebarBrand .brandCopy small{
    max-width:none !important;

    margin:3px 0 0 !important;
    padding:0 !important;

    color:var(--muted) !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;
    text-overflow:clip !important;
  }

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

/* =========================================================
   HP COMPACT <=420PX
   Sama dengan navbar breakpoint <=420px.
   ========================================================= */
@media (max-width:420px){

  .mobileSidebarBrand{
    max-width:120px !important;
    gap:2px !important;
  }

  .mobileSidebarBrand > .brandLogoShadow{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    flex-basis:44px !important;
  }

  .mobileSidebarBrand
  .brandLogoShadow .brandLogoWrap,
  html[data-theme="dark"]
  .mobileSidebarBrand
  .brandLogoShadow .brandLogoWrap{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
  }

  .mobileSidebarBrand
  .brandLogoShadow .brandLogo{
    width:86% !important;
    max-width:86% !important;
    height:86% !important;
    max-height:86% !important;

    transform:
      translate3d(-0.4%, 1.7%, 0) !important;
  }

  .mobileSidebarBrand > .brandCopy{
    max-width:90px !important;
  }

  .mobileSidebarBrand .brandCopy strong{
    font-size:16.8px !important;
    letter-spacing:-.042em !important;
  }

  .mobileSidebarBrand .brandCopy small{
    margin-top:2px !important;
    font-size:7.2px !important;
  }
}

/* =========================================================
   HP <=390PX
   Sama dengan navbar breakpoint <=390px.
   ========================================================= */
@media (max-width:390px){

  .mobileSidebarBrand{
    max-width:118px !important;
    gap:2px !important;
  }

  .mobileSidebarBrand > .brandCopy{
    max-width:84px !important;
  }

  .mobileSidebarBrand .brandCopy strong{
    font-size:16px !important;
  }

  .mobileSidebarBrand .brandCopy small{
    font-size:6.8px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   Sama dengan navbar breakpoint <=350px.
   ========================================================= */
@media (max-width:350px){

  .mobileSidebarBrand{
    max-width:110px !important;
    gap:1px !important;
  }

  .mobileSidebarBrand
  .brandLogoShadow .brandLogo{
    width:87% !important;
    max-width:87% !important;
    height:87% !important;
    max-height:87% !important;

    transform:
      translate3d(-0.4%, 1.9%, 0) !important;
  }

  .mobileSidebarBrand > .brandCopy{
    max-width:78px !important;
  }

  .mobileSidebarBrand .brandCopy strong{
    font-size:15.2px !important;
  }

  .mobileSidebarBrand .brandCopy small{
    display:block !important;
    font-size:6.4px !important;
  }
}

/* =========================================================
   FINAL MOBILE SIDEBAR HEADER - NAVBAR HEIGHT SYNC
   =========================================================
   KHUSUS HP <=620PX

   TARGET:
   - Tinggi header bagian atas sidebar sama dengan navbar index.
   - <=620px : min-height 72px.
   - <=420px : min-height 68px.
   - Safe-area atas mengikuti pola navbar utama.
   - Surface, border bawah, dan shadow mengikuti navbar utama.
   - Header dibuat full-bleed sampai sisi panel sidebar.
   - Brand Bumil Ku, RSAB, tombol close, menu, CTA, animasi,
     backdrop, dan performance lock tidak diubah.
   ========================================================= */
@media (max-width:620px){

  /*
   * Sidebar sebelumnya sudah memiliki padding-top sendiri
   * (safe-area), lalu mobileSidebarHeader masih memiliki
   * padding vertikal. Kombinasi ini membuat area atas sidebar
   * lebih tinggi daripada navbar halaman.
   *
   * Safe-area sekarang ditangani langsung oleh header,
   * sama seperti .appHeader.
   */
  .mobileSidebar{
    padding-top:0 !important;
  }

  .mobileSidebarHeader{
    position:relative !important;

    /*
     * Sama dengan navbar utama <=620px.
     */
    width:calc(100% + 36px) !important;
    min-width:calc(100% + 36px) !important;
    max-width:none !important;

    min-height:72px !important;
    height:auto !important;

    margin:
      0
      -18px
      0
      -18px !important;

    padding:
      max(6px, env(safe-area-inset-top))
      18px
      6px !important;

    box-sizing:border-box !important;

    display:grid !important;
    grid-template-columns:
      minmax(0,auto)
      minmax(82px,1fr)
      34px !important;

    align-items:center !important;
    align-content:center !important;

    column-gap:10px !important;
    row-gap:0 !important;

    background:#ffffff !important;
    background-image:none !important;

    border:0 !important;
    border-bottom:
      1px solid rgba(58,105,119,.10) !important;

    box-shadow:
      0 8px 22px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.96) !important;

    isolation:isolate !important;
  }

  /*
   * Hilangkan kemungkinan pseudo-element lama membuat
   * tinggi atau garis tambahan yang berbeda dari navbar.
   */
  .mobileSidebarHeader::before,
  .mobileSidebarHeader::after{
    content:none !important;
    display:none !important;
  }

  /*
   * Seluruh elemen utama selalu berada tepat di tengah
   * tinggi navbar sidebar.
   */
  .mobileSidebarHeader > .mobileSidebarBrand,
  .mobileSidebarHeader > .mobileSidebarInstitutionLockup,
  .mobileSidebarHeader > .mobileSidebarClose{
    align-self:center !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  /*
   * Dark mode sama dengan surface navbar utama.
   */
  html[data-theme="dark"] .mobileSidebarHeader{
    background:#102b30 !important;
    background-image:none !important;

    border-bottom-color:
      rgba(255,255,255,.07) !important;

    box-shadow:
      0 9px 24px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }
}

/* =========================================================
   HP COMPACT <=420PX
   Navbar index memakai min-height 68px.
   ========================================================= */
@media (max-width:420px){

  .mobileSidebarHeader{
    /*
     * Sidebar <=420px mempunyai padding horizontal panel 17px,
     * sehingga negative margin 17px membuat header full-bleed.
     * Isi header memakai padding 12px sama dengan navbar index.
     */
    width:calc(100% + 34px) !important;
    min-width:calc(100% + 34px) !important;

    min-height:68px !important;
    height:auto !important;

    margin:
      0
      -17px
      0
      -17px !important;

    padding:
      max(4px, env(safe-area-inset-top))
      12px
      4px !important;

    grid-template-columns:
      minmax(0,auto)
      minmax(76px,1fr)
      34px !important;

    column-gap:8px !important;
  }
}

/* =========================================================
   HP <=390PX
   Tinggi tetap mengikuti navbar <=420px,
   horizontal padding mengikuti navbar index <=390px.
   ========================================================= */
@media (max-width:390px){

  .mobileSidebarHeader{
    padding-left:11px !important;
    padding-right:11px !important;
  }
}

/* =========================================================
   HP SANGAT KECIL <=350PX
   Sidebar memakai padding panel 14px.
   Navbar index memakai horizontal padding 10px.
   ========================================================= */
@media (max-width:350px){

  .mobileSidebarHeader{
    width:calc(100% + 28px) !important;
    min-width:calc(100% + 28px) !important;

    margin:
      0
      -14px
      0
      -14px !important;

    padding-left:10px !important;
    padding-right:10px !important;

    grid-template-columns:
      minmax(0,auto)
      minmax(68px,1fr)
      32px !important;

    column-gap:6px !important;
  }
}

/* =========================================================
   FINAL HERO HEADLINE ACCENT - CTA LEFT DEEP TEAL
   =========================================================
   TARGET:
   - Text "Kehamilan" / "Journey" tidak lagi terlihat pudar.
   - Warna mengikuti sisi PALING KIRI tombol Daftar / Masuk.
   - Light mode = #087f78.
   - Dark mode  = #07776f.
   - Gradient accent lama dimatikan khusus HP dan desktop.
   - Ukuran, font-weight, spacing, wrapping, posisi headline,
     dan JavaScript bahasa tidak diubah.
   - Tablet 621px-979px tidak disentuh.
   ========================================================= */

/* =========================================================
   HP <=620PX
   ========================================================= */
@media (max-width:620px){

  .heroHeadlineAccent{
    color:#087f78 !important;
    -webkit-text-fill-color:#087f78 !important;

    /*
     * Hilangkan gradient lama agar seluruh kata memiliki
     * intensitas warna yang sama dari kiri sampai kanan.
     */
    background:none !important;
    background-image:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;

    /*
     * Shadow sangat tipis hanya untuk menjaga ketajaman.
     * Tidak mengubah warna dasar dan tidak membuat pudar.
     */
    text-shadow:
      0 1px 1px rgba(5,83,78,.055) !important;

    filter:
      drop-shadow(0 1px 1px rgba(5,83,78,.045)) !important;
  }

  html[data-theme="dark"] .heroHeadlineAccent{
    color:#07776f !important;
    -webkit-text-fill-color:#07776f !important;

    background:none !important;
    background-image:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;

    text-shadow:
      0 1px 1px rgba(0,0,0,.20) !important;

    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.16)) !important;
  }
}

/* =========================================================
   LAPTOP / DESKTOP >=980PX
   ========================================================= */
@media (min-width:980px){

  .heroHeadlineAccent{
    color:#087f78 !important;
    -webkit-text-fill-color:#087f78 !important;

    background:none !important;
    background-image:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;

    text-shadow:
      0 1px 1px rgba(5,83,78,.055) !important;

    filter:
      drop-shadow(0 1px 1px rgba(5,83,78,.045)) !important;
  }

  html[data-theme="dark"] .heroHeadlineAccent{
    color:#07776f !important;
    -webkit-text-fill-color:#07776f !important;

    background:none !important;
    background-image:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;

    text-shadow:
      0 1px 1px rgba(0,0,0,.20) !important;

    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.16)) !important;
  }
}

/* =========================================================
   FINAL HOSTINGER MOBILE PERFORMANCE - VISUAL SAFE LOCK
   =========================================================
   KHUSUS HP <=620PX

   TARGET:
   - Kecepatan sidebar setara versi ultra-fast.
   - Scroll HP tetap ringan ketika dibuka melalui domain.
   - Tidak mengubah tampilan atau engine animasi benefit.
   - Tidak mematikan blur, wave, gradient, shadow, atau 3D.
   - Tidak mengubah tablet dan desktop.

   PRINSIP:
   - Sidebar = transform compositor only.
   - Backdrop = opacity only.
   - Benefit animation tetap memakai JavaScript existing.
   - Saat scroll hanya TIMER fase yang dipause.
   ========================================================= */
@media (max-width:620px){

  /*
   * Membantu gesture vertikal diproses langsung oleh browser.
   * Tidak mengubah posisi atau style elemen.
   */
  body:not(.is-mobile-sidebar-open){
    touch-action:
      pan-y
      pinch-zoom !important;
  }

  /* =======================================================
     SIDEBAR - ALWAYS COMPOSITOR READY
     ======================================================= */
  .mobileSidebar{
    /*
     * Sidebar tetap berada di luar viewport ketika tertutup.
     * `inert` dari HTML menjaga elemen tidak menerima focus.
     */
    visibility:visible !important;
    pointer-events:none !important;

    transform:
      translate3d(-101%,0,0) !important;

    transform-origin:
      left center !important;

    will-change:
      transform !important;

    backface-visibility:
      hidden !important;

    -webkit-backface-visibility:
      hidden !important;

    /*
     * Isolasi kalkulasi layout sidebar dari halaman utama.
     * Tidak memakai contain:paint agar shadow existing tidak
     * terpotong.
     */
    contain:
      layout style !important;

    transition:
      transform
      125ms
      cubic-bezier(.20,.82,.22,1) !important;
  }

  .mobileSidebar.is-open{
    visibility:visible !important;
    pointer-events:auto !important;

    transform:
      translate3d(0,0,0) !important;

    transition:
      transform
      125ms
      cubic-bezier(.20,.82,.22,1) !important;
  }

  /* =======================================================
     BACKDROP - OPACITY COMPOSITOR ONLY
     ======================================================= */
  .mobileSidebarBackdrop{
    /*
     * Backdrop blur memang sudah dihilangkan oleh performance
     * lock existing sebelum block ini. Dipertahankan agar
     * tidak ada repaint full-screen ketika sidebar bergerak.
     */
    backdrop-filter:
      none !important;

    -webkit-backdrop-filter:
      none !important;

    visibility:
      visible !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;

    will-change:
      opacity !important;

    transition:
      opacity
      90ms
      linear !important;
  }

  .mobileSidebarBackdrop.is-open{
    visibility:
      visible !important;

    opacity:
      1 !important;

    pointer-events:
      auto !important;

    transition:
      opacity
      90ms
      linear !important;
  }

  /*
   * Browser tidak perlu menghaluskan scroll programmatically
   * ketika user sedang melakukan gesture manual.
   * Rule ini tidak mengubah smooth scroll existing saat idle.
   */
  body.is-mobile-scrolling{
    scroll-behavior:
      auto !important;
  }
}

/* =========================================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================================= */
@media
  (max-width:620px)
  and
  (prefers-reduced-motion:reduce){

  .mobileSidebar,
  .mobileSidebar.is-open,
  .mobileSidebarBackdrop,
  .mobileSidebarBackdrop.is-open{
    transition-duration:
      .001ms !important;
  }
}

/* =========================================================
   FINAL MOBILE BENEFIT COMPOSITOR - VISUAL PRESERVE
   =========================================================
   KHUSUS HP <=620PX

   PENTING:
   - Tidak mengubah background benefit card.
   - Tidak mengubah backdrop-filter existing.
   - Tidak mengubah shadow / border / radius / ukuran.
   - Tidak mengubah wave atau hero.
   - Hanya memberi isolation hint ketika benefit sedang entrance.
   ========================================================= */
@media (max-width:620px){

  .benefitStack.is-entering
  [data-benefit-card]{
    backface-visibility:
      hidden !important;

    -webkit-backface-visibility:
      hidden !important;
  }
}



/* =========================================================
   FINAL MOBILE SIDEBAR CLOSE - CLICK THROUGH GUARD
   =========================================================
   KHUSUS HP <=620PX

   MASALAH YANG DICEGAH:
   - Tap tombol X menutup sidebar pada pointerdown.
   - Pada beberapa browser HP, synthetic click berikutnya dapat
     jatuh ke tombol Search / Menu yang berada di belakang.

   SOLUSI:
   - is-closing mempertahankan sidebar/backdrop sebagai touch
     shield sampai animasi keluar benar-benar selesai.
   - Quick actions navbar dinonaktifkan hanya selama fase close.
   - Tidak mengubah warna, ukuran, shadow, layout, atau timing
     visual sidebar yang sudah final.
   ========================================================= */
@media (max-width:620px){

  .mobileSidebar.is-closing{
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .mobileSidebarBackdrop.is-closing{
    visibility:visible !important;
    pointer-events:auto !important;
  }

  body.is-mobile-sidebar-closing
  .mobileNavbarHeaderActions{
    pointer-events:none !important;
  }

  body.is-mobile-sidebar-closing
  #mobileNavbarSearchButton,
  body.is-mobile-sidebar-closing
  #mobileNavbarGridButton{
    pointer-events:none !important;
  }
}