:root{
  /* =========================================================
     LOGIN.CSS - LACAK TB
     =========================================================
     TUJUAN:
     - Menyesuaikan halaman login.html dengan index.html final.
     - Branding: RSAB-QI.
     - Navbar clean: Beranda, Mitra, Tentang Kami, Hubungi Kami.
     - Login card clean di tengah.
     - Tanpa partikel bergerak.
     - Tanpa canvas background.
     - Tanpa ringHint / ringCanvas / area partikel kanan.
     ========================================================= */

  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface2:#f7fbfc;
  --surface3:#ffffff;
  --ink:#020617;
  --muted:#64748b;

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

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

  --neu-out-1: 12px 12px 24px rgba(163,177,198,.55);
  --neu-out-2: -12px -12px 24px rgba(255,255,255,.92);
  --neu-out: var(--neu-out-1), var(--neu-out-2);

  --neu-out-sm-1: 8px 8px 16px rgba(163,177,198,.45);
  --neu-out-sm-2: -8px -8px 16px rgba(255,255,255,.92);
  --neu-out-sm: var(--neu-out-sm-1), var(--neu-out-sm-2);

  --neu-in-1: inset 10px 10px 18px rgba(163,177,198,.35);
  --neu-in-2: inset -10px -10px 18px rgba(255,255,255,.90);
  --neu-in: var(--neu-in-1), var(--neu-in-2);

  --neu-in-sm-1: inset 7px 7px 12px rgba(163,177,198,.30);
  --neu-in-sm-2: inset -7px -7px 12px rgba(255,255,255,.88);
  --neu-in-sm: var(--neu-in-sm-1), var(--neu-in-sm-2);

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

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

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

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

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

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

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

  --right-pack-gap: 10px;
  --right-login-gap: 12px;

  --nav-login-w: 120px;
  --nav-login-h: 44px;

  --frost-bg: rgba(255,255,255,.52);
  --frost-border: rgba(255,255,255,.55);
  --frost-blur: 18px;
  --frost-shadow:
    16px 16px 32px rgba(163,177,198,.35),
    -16px -16px 32px rgba(255,255,255,.85);
}

/* =========================================================
   DARK THEME
   ========================================================= */
html[data-theme="dark"]{
  color-scheme: dark;

  --bg:#07181c;
  --surface:#0b2024;
  --surface2:#102b30;
  --surface3:#14343a;
  --ink:#EAFBFF;
  --muted:#A8C6CA;
  --line: rgba(255,255,255,.10);

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

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

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

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

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

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

  --blue:#00d6d2;
  --blue2:#53ebe8;
  --blue3:#c3da3e;

  --success:#4ade80;
  --successBg: rgba(74,222,128,.12);
  --successBorder: rgba(74,222,128,.22);

  --danger:#f87171;
  --dangerBg: rgba(248,113,113,.12);
  --dangerBorder: rgba(248,113,113,.22);

  --warning:#fbbf24;
  --warningBg: rgba(251,191,36,.12);
  --warningBorder: rgba(251,191,36,.22);

  --frost-bg: rgba(17,28,52,.46);
  --frost-border: rgba(255,255,255,.10);
  --frost-blur: 18px;
  --frost-shadow:
    16px 16px 34px rgba(0,0,0,.45),
    -16px -16px 34px rgba(255,255,255,.05);
}

/* =========================================================
   BASE
   ========================================================= */
*{
  box-sizing: border-box;
}

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

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

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

body{
  margin: 0;
  min-height: 100svh;
  font-family:
    "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    "Noto Sans",
    "Apple Color Emoji",
    "Segoe UI Emoji";
  background: var(--bg);
  color: var(--ink);
  transition:
    background .25s ease,
    color .25s ease;
  overflow-x: clip;
  overscroll-behavior-x: none;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

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

a{
  color: inherit;
}

button,
input,
select,
textarea{
  font: inherit;
}

/* =========================================================
   DISABLE PARTICLE CANVAS / RING
   =========================================================
   Halaman login final tidak memakai:
   - canvas #bg
   - ringHint
   - heroRight particle area
   - ringCanvas
   ========================================================= */
#bg,
#ringCanvas,
.ringHint,
#ringHint,
.heroRight,
#ringArea{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   STATIC OVERLAY
   ========================================================= */
.overlay{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(0,172,170,.06), transparent 62%),
    radial-gradient(900px 520px at 82% 22%, rgba(10,134,132,.05), transparent 65%),
    radial-gradient(900px 620px at 50% 88%, rgba(11,18,32,.05), transparent 62%);
  transition: opacity .25s ease;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

html[data-theme="dark"] .overlay{
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(0,214,210,.10), transparent 65%),
    radial-gradient(900px 520px at 82% 22%, rgba(0,214,210,.06), transparent 70%),
    radial-gradient(900px 620px at 50% 88%, rgba(0,0,0,.45), transparent 60%);
  opacity: .85;
}

/* =========================================================
   INVISIBLE NAV ANCHOR
   ========================================================= */
.navAnchorOnly{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   LAYOUT WRAP
   ========================================================= */
.wrap{
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}



/* =========================================================
   NAVBAR
   ========================================================= */
.navwrap{
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px 12px 0;
  pointer-events: none;
}

header{
  pointer-events: auto;
  width: min(1480px, 100%);
  height: 72px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out);
  position: relative;
  overflow: visible;
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

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

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

.mark{
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  transform: none;
}

/* =========================================================
   NAVBAR BRAND - MATCH INDEX.CSS FINAL
   ========================================================= */
header .brand .mark{
  width: 34px;
  height: 34px;
  min-width: 34px;
  object-fit: contain;
  object-position: center;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  transform: none;
  flex: 0 0 auto;
}

header .brand .brandText{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  line-height: 1.06;
  transform: translateX(-10px);
}

.brandTitle,
header .brand .brandTitle{
  margin: 0;
  padding: 0;
  color: #0b1220;
  font-size: 16px;
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  transition: color .25s ease;
}

.brandSubTitle,
header .brand .brandSubTitle{
  margin: 2px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

html[data-theme="dark"] .brandTitle,
html[data-theme="dark"] header .brand .brandTitle{
  color: #EAFBFF;
}

html[data-theme="dark"] .brandSubTitle,
html[data-theme="dark"] header .brand .brandSubTitle{
  color: rgba(234,241,255,.60);
}

/* =========================================================
   NAV DESKTOP
   ========================================================= */
header nav{
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 10px;
  letter-spacing: .01em;
}

.navItem{
  position: relative;
  display: flex;
  align-items: center;
}

.navBtn,
.navLinkBtn{
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 9px 12px;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    color .16s ease,
    background .16s ease,
    border-color .16s ease;
  font-weight: 600;
}

.navBtn:hover,
.navLinkBtn:hover{
  background: var(--surface2);
  border-color: rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
  color: var(--ink);
  transform: translateY(-1px);
}

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

.navCaret{
  font-size: 12px;
  opacity: 0;
  transform: translateY(1px);
  transition:
    opacity .16s ease,
    transform .16s ease,
    rotate .16s ease;
  color: currentColor;
}

.navItem:hover .navCaret{
  opacity: .90;
  transform: translateY(0);
}

.navItem.is-open .navCaret{
  opacity: .95;
  rotate: 180deg;
}

/* =========================================================
   DROPDOWN COMPATIBILITY
   ========================================================= */
.dropdown{
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 360px;
  max-width: 520px;
  padding: 12px;
  border-radius: var(--radiusLg);
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out);
  transform-origin: 24px 0;
  transform: translateY(-6px) scale(.985);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .16s ease,
    transform .16s ease;
}

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

.navItem.is-open .dropdown{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.ddTitle{
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.005em;
  margin: 2px 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ddTitle small{
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  font-size: 12px;
}

.ddGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ddLink{
  text-decoration: none;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.35);
  background: var(--surface2);
  border-radius: 18px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: var(--neu-out-sm);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    background .14s ease;
}

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

.ddLink:hover{
  transform: translateY(-2px);
  background: var(--surface);
}

.ddIcon{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  background: var(--surface);
  box-shadow: var(--neu-in-sm);
  flex: 0 0 auto;
  color: var(--blue);
}

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

.ddText b{
  display: block;
  font-weight: 700;
  letter-spacing: -.005em;
  margin-bottom: 2px;
}

.ddText span{
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
  font-weight: 500;
}

/* =========================================================
   BUTTONS / SWITCHES
   ========================================================= */
.btn,
.loginBtn,
.burger,
.drawerClose,
.switch,
.searchBtn{
  border: 1px solid rgba(255,255,255,.35);
  background: var(--surface);
  box-shadow: var(--neu-out-sm);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
  -webkit-tap-highlight-color: transparent;
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] .loginBtn,
html[data-theme="dark"] .burger,
html[data-theme="dark"] .drawerClose,
html[data-theme="dark"] .switch,
html[data-theme="dark"] .searchBtn{
  border-color: rgba(255,255,255,.06);
}

.btn:hover,
.loginBtn:hover,
.burger:hover,
.drawerClose:hover,
.switch:hover,
.searchBtn:hover{
  transform: translateY(-1px);
}

.btn:active,
.loginBtn:active,
.burger:active,
.drawerClose:active,
.switch:active,
.searchBtn:active{
  transform: translateY(0);
  box-shadow: var(--neu-in-sm);
}

.btn:focus-visible,
.loginBtn:focus-visible,
.burger:focus-visible,
.drawerClose:focus-visible,
.switch:focus-visible,
.searchBtn:focus-visible,
.primaryAuthBtn:focus-visible,
.googleBtn:focus-visible,
.textLinkBtn:focus-visible,
.passwordToggleBtn:focus-visible,
.inputShell input:focus-visible,
.navBtn:focus-visible,
.navLinkBtn:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.loginBtn{
  background: var(--primaryGrad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--primaryShadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radiusPill);
  min-width: var(--nav-login-w);
  height: var(--nav-login-h);
  padding: 0 16px;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  text-align: center;
  flex: 0 0 auto;
}

.loginBtn span{
  color: #fff !important;
}

.burger{
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
}

.burger i{
  color: currentColor;
  font-size: 16px;
}

.drawerClose{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
}

.drawerClose i{
  color: currentColor;
  font-size: 18px;
}

.searchBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
}

.searchBtn i{
  color: currentColor;
  font-size: 16px;
}

.searchBtn:hover{
  background: var(--surface2);
  color: var(--blue);
}

/* =========================================================
   SWITCH
   ========================================================= */
.switch{
  height: var(--switch-h);
  border-radius: var(--radiusPill);
  padding: 0 var(--switch-pad);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  white-space: nowrap;
  flex: 0 0 auto;
}

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

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

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

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

.switchLabel i{
  font-size: 13px;
  color: currentColor;
  opacity: .95;
}

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

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

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

.switch[data-on="0"] .switchLabel[data-side="left"],
.switch[data-on="1"] .switchLabel[data-side="right"]{
  color: rgba(11,18,32,.92);
  opacity: 1;
}

html[data-theme="dark"] .switch[data-on="0"] .switchLabel[data-side="left"],
html[data-theme="dark"] .switch[data-on="1"] .switchLabel[data-side="right"]{
  color: rgba(234,241,255,.92);
}

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

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

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

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

.switch.switch--theme .switchLabel span{
  display: none;
}

.rightPack{
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--right-pack-gap);
  flex: 0 0 auto;
  min-width: fit-content;
}

.rightPack > *{
  flex-shrink: 0;
}

.rightPack .loginBtn{
  margin-left: var(--right-login-gap);
}

/* =========================================================
   MAIN / LOGIN HERO
   ========================================================= */
main{
  flex: 1;
  display: grid;
  place-items: center;
  padding: 34px 18px 28px;
}

.hero.heroSplit{
  width: min(1480px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 0;
  text-align: left;
  padding: 34px 18px;
  margin: 0 auto;
}

.loginHero{
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
}

.heroLeft{
  justify-self: center;
  padding-left: 0;
  transform: none;
  will-change: auto;
  position: relative;
  width: min(600px, 100%);
  max-width: 600px;
}

.heroRight{
  display: none !important;
}

/* =========================================================
   FROST FRAME COMPATIBILITY
   ========================================================= */
.frostFrame{
  position: relative;
  border-radius: 26px;
  padding: 22px 22px 18px;
  width: min(690px, 100%);
  background: var(--frost-bg);
  border: 1px solid var(--frost-border);
  box-shadow: var(--frost-shadow);
  backdrop-filter: blur(var(--frost-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(1.2);
  overflow: hidden;
  isolation: isolate;
}

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

.frostFrame > *{
  position: relative;
  z-index: 1;
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
.loginFrame{
  width: min(690px, 100%);
  padding: 24px 24px 20px;
}

.loginIntro{
  margin-bottom: 18px;
}

.loginKicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radiusPill);
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: var(--neu-out-sm);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

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

.loginTitle{
  margin: 0;
  color: var(--ink);
  font-size: clamp(32px, 3.8vw, 58px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 800;
}

.loginSub{
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(14px, .95vw, 16px);
  line-height: 1.82;
  max-width: 98%;
}

.loginCard{
  width: 100%;
  min-width: 0;
  max-width: 600px;
  border-radius: 28px;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(255,255,255,.48);
  box-shadow: var(--neu-out);
  padding: 28px 28px 24px;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

html[data-theme="dark"] .loginCard{
  background: rgba(17,28,52,.50);
  border-color: rgba(255,255,255,.08);
}

.loginCardTop{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  min-height: 96px;
}

.loginLogoWrap{
  width: 74px;
  height: 74px;
  border-radius: 22px;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: var(--neu-out-sm);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

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

.loginLogoImg{
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
}

.loginHeadText{
  min-width: 0;
  flex: 1 1 auto;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eyebrowText{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,172,170,.10);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.loginPanelTitle{
  margin: 0 0 6px;
  color: var(--ink);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 800;
  min-height: 40px;
  display: flex;
  align-items: flex-end;
}

.loginPanelSub{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 460px;
  min-height: 48px;
}

/* =========================================================
   AUTH TABS
   ========================================================= */
.authTabs{
  margin-top: 4px;
}

.authTabInput{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.authTabSwitch{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: var(--neu-in-sm);
  margin-bottom: 18px;
}

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

.authTabLabel{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
}

#tabSignIn:checked ~ .authTabSwitch label[for="tabSignIn"],
#tabSignUp:checked ~ .authTabSwitch label[for="tabSignUp"]{
  background: var(--primaryGrad);
  color: #fff;
  box-shadow: var(--primaryShadow);
}

.authPanels{
  position: relative;
}

.authPanel{
  display: none;
}

#tabSignIn:checked ~ .authPanels .signInPanel{
  display: block;
}

#tabSignUp:checked ~ .authPanels .signUpPanel{
  display: block;
}

/* =========================================================
   FORM
   ========================================================= */
.authForm{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inputGroup{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inputGroup label{
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .01em;
}

.inputShell{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.48);
  box-shadow: var(--neu-in-sm);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

html[data-theme="dark"] .inputShell{
  background: rgba(24,39,69,.72);
  border-color: rgba(255,255,255,.08);
}

.inputShell:focus-within{
  border-color: rgba(0,172,170,.40);
  box-shadow:
    0 0 0 4px rgba(0,172,170,.12),
    var(--neu-in-sm);
}

.inputShell.is-error{
  border-color: var(--dangerBorder);
  box-shadow:
    0 0 0 4px rgba(220,38,38,.10),
    var(--neu-in-sm);
}

html[data-theme="dark"] .inputShell.is-error{
  box-shadow:
    0 0 0 4px rgba(248,113,113,.10),
    var(--neu-in-sm);
}

.inputShell.is-success{
  border-color: var(--successBorder);
  box-shadow:
    0 0 0 4px rgba(22,163,74,.10),
    var(--neu-in-sm);
}

html[data-theme="dark"] .inputShell.is-success{
  box-shadow:
    0 0 0 4px rgba(74,222,128,.10),
    var(--neu-in-sm);
}

.inputShell i{
  color: var(--blue);
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex: 0 0 auto;
}

.inputShell input{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.inputShell input::placeholder{
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}

.inputShell input:disabled{
  opacity: .72;
  cursor: not-allowed;
}

/* =========================================================
   PASSWORD TOGGLE
   ========================================================= */
.inputShell--password{
  gap: 10px;
}

.inputShell--password .passwordInput{
  flex: 1 1 auto;
  min-width: 0;
}

.passwordToggleBtn{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.passwordToggleBtn:hover{
  color: var(--blue);
  background: rgba(0,172,170,.08);
}

.passwordToggleBtn:active{
  transform: scale(.97);
  box-shadow: var(--neu-in-sm);
}

.passwordToggleBtn i{
  width: auto;
  font-size: 16px;
  color: currentColor;
}

.passwordToggleBtn.is-visible{
  color: var(--blue);
  background: rgba(0,172,170,.10);
}

html[data-theme="dark"] .passwordToggleBtn:hover{
  background: rgba(0,214,210,.14);
}

html[data-theme="dark"] .passwordToggleBtn.is-visible{
  background: rgba(0,214,210,.16);
}

/* =========================================================
   FORM ROWS / LINKS
   ========================================================= */
.authRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
}

.checkWrap{
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.checkWrap input{
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--blue);
  flex: 0 0 auto;
}

.termsWrap{
  margin-top: 2px;
}

.textLink{
  color: var(--blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.textLink:hover{
  text-decoration: underline;
}

.textLinkBtn{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.textLinkBtn:hover{
  text-decoration: underline;
}

.authLegalInline{
  margin: -2px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.authLegalInline a{
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
}

.authLegalInline a:hover{
  text-decoration: underline;
}

.authLegalInline .sep{
  opacity: .45;
}

/* =========================================================
   MESSAGE
   ========================================================= */
.authMessage,
.loginStatus{
  display: none;
  width: 100%;
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: var(--neu-out-sm);
}

.authMessage:not(:empty),
.loginStatus:not(:empty){
  display: block;
}

.authMessage{
  margin-top: 2px;
  background: rgba(255,255,255,.58);
  border-color: rgba(255,255,255,.45);
  color: var(--muted);
}

html[data-theme="dark"] .authMessage{
  background: rgba(24,39,69,.72);
  border-color: rgba(255,255,255,.08);
}

.authMessage.is-error{
  color: var(--danger);
  background: var(--dangerBg);
  border-color: var(--dangerBorder);
  box-shadow: 0 8px 18px rgba(220,38,38,.08);
}

.authMessage.is-success{
  color: var(--success);
  background: var(--successBg);
  border-color: var(--successBorder);
  box-shadow: 0 8px 18px rgba(22,163,74,.08);
}

.authMessage.is-warning{
  color: var(--warning);
  background: var(--warningBg);
  border-color: var(--warningBorder);
  box-shadow: 0 8px 18px rgba(180,83,9,.08);
}

.loginStatus{
  margin: 0 0 12px;
  background: rgba(255,255,255,.58);
  border-color: rgba(255,255,255,.45);
  color: var(--muted);
  text-align: center;
}

html[data-theme="dark"] .loginStatus{
  background: rgba(24,39,69,.72);
  border-color: rgba(255,255,255,.08);
}

.loginStatus.is-error{
  color: var(--danger);
  background: var(--dangerBg);
  border-color: var(--dangerBorder);
}

.loginStatus.is-success{
  color: var(--success);
  background: var(--successBg);
  border-color: var(--successBorder);
}

.loginStatus.is-warning{
  color: var(--warning);
  background: var(--warningBg);
  border-color: var(--warningBorder);
}

/* =========================================================
   AUTH BUTTON
   ========================================================= */
.primaryAuthBtn{
  appearance: none;
  border: 0;
  min-height: 58px;
  border-radius: 18px;
  background: var(--primaryGrad);
  color: #fff;
  box-shadow: var(--primaryShadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  margin-top: 4px;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.primaryAuthBtn:hover{
  transform: translateY(-1px);
}

.primaryAuthBtn:active{
  transform: translateY(0);
}

.primaryAuthBtn i{
  font-size: 14px;
}

.primaryAuthBtn:disabled{
  opacity: .72;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   DIVIDER
   ========================================================= */
.authDivider{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.authDivider::before,
.authDivider::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(91,107,132,.24),
    transparent
  );
}

/* =========================================================
   GOOGLE AUTH
   ========================================================= */
.authContent{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
}

.googleBtn{
  appearance: none;
  width: 100%;
  min-height: 74px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,243,248,.92));
  box-shadow: var(--neu-out-sm);
  color: #202124;
  padding: 14px 18px;
  cursor: pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    opacity .18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.googleBtn:hover{
  transform: translateY(-1px);
}

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

.googleBtn:disabled{
  opacity: .75;
  cursor: not-allowed;
  transform: none;
}

html[data-theme="dark"] .googleBtn{
  background: linear-gradient(145deg, rgba(17,28,52,.92), rgba(24,39,69,.90));
  border-color: rgba(255,255,255,.08);
  color: #EAFBFF;
}

.googleIconWrap{
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    4px 4px 10px rgba(163,177,198,.18),
    -4px -4px 10px rgba(255,255,255,.95);
  flex: 0 0 auto;
}

.googleSvg{
  width: 28px;
  height: 28px;
  display: block;
}

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

.googleBtnText{
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.01em;
  color: inherit;
}

/* =========================================================
   SECURITY STRIP / META COMPATIBILITY
   ========================================================= */
.securityStrip{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.securityItem{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,172,170,.08);
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

.securityItem i{
  font-size: 13px;
}

.loginMeta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

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

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

.metaDot{
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--primaryGrad);
  box-shadow: var(--neu-out-sm);
  flex: 0 0 auto;
}

/* =========================================================
   FOOTER - MATCH INDEX.CSS FINAL
   ========================================================= */
footer.siteFooter{
  width: 100%;
  margin-top: auto;
  padding: 14px 34px;
  background: rgba(255,255,255,.35);
  border-top: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 -8px 28px rgba(0,0,0,.05);
  color: rgba(15,23,42,.65);
  font-size: 12.5px;
  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
}

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

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

.footerLeft{
  text-align: left;
  line-height: 1.6;
  color: inherit;
}

.footerPublicAppName{
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  max-width: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.footerPublicDesc{
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 720px;
}

.footerCopyrightLine{
  line-height: 1.6;
  color: inherit;
}

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

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

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

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

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

.footerRight .sep{
  opacity: .45;
}

/* =========================================================
   DRAWER MOBILE
   ========================================================= */
.backdrop{
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(11,18,32,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  cursor: pointer;
}

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

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

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

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

body.nav-open .backdrop{
  opacity: 1;
  pointer-events: auto;
}

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

.drawerHeader{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

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

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

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

.drawerTopToggles{
  display: flex;
  gap: 10px;
  align-items: center;
}

.searchBtn--drawer{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  flex: 0 0 auto;
}

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

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

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

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

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

.drawerItemBtn i{
  color: currentColor;
  font-size: 18px;
}

.drawerItemBtn .chev{
  color: rgba(91,107,132,.75);
  font-size: 18px;
  transition: rotate .16s ease;
}

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

.drawerItem.is-open .drawerItemBtn .chev{
  rotate: 180deg;
}

.drawerLinkOnly .chev{
  rotate: 0deg !important;
}

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

.drawerItem.is-open .drawerSubmenu{
  display: grid;
  grid-template-columns: 1fr;
}

.drawerSubmenu a{
  text-decoration: none;
  color: var(--ink);
  border-radius: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.35);
  background: var(--surface2);
  box-shadow: var(--neu-in-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
}

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

.drawerSubmenu a small{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
}

.drawerFooter{
  margin-top: auto;
  padding-top: 12px;
}

.drawerActions .loginBtn{
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 16px 18px;
  font-size: 14px;
  border-radius: 999px;
  letter-spacing: .12em;
}

/* =========================================================
   ANIMATION
   ========================================================= */
.auth-page .heroLeft > *{
  opacity: 0;
  will-change: transform, opacity, filter;
  transform: translateY(18px);
  filter: blur(14px);
  animation: niagaFadeInUp .75s cubic-bezier(.22,.61,.36,1) .12s forwards;
}

@keyframes niagaFadeInUp{
  0%{
    opacity: 0;
    transform: translateY(18px);
    filter: blur(14px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .auth-page .heroLeft > *{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */
@media (max-width: 1180px){
  .hero.heroSplit{
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .heroLeft{
    justify-self: center;
    width: 100%;
    max-width: 600px;
    padding-left: 0;
    transform: none;
  }

  .loginFrame{
    width: 100%;
    margin: 0 auto;
  }

  .loginCard{
    min-width: 0;
    max-width: 100%;
  }

  .loginSub{
    max-width: 100%;
  }
}




/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 740px){
  :root{
    --mobile-footer-h: 64px;
  }

  header nav{
    display: none;
  }

  .navwrap{
    padding: 10px 10px 0;
  }

  header{
    min-height: 64px;
    height: auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 20px;
  }

  header .brand .mark{
    width: 32px;
    height: 32px;
    min-width: 32px;
    object-fit: contain;
    object-position: center;
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    transform: none;
    flex: 0 0 auto;
  }

  header .brand .brandText{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    line-height: 1.06;
    transform: translateX(-10px);
  }

  header .brand .brandTitle{
    margin: 0;
    padding: 0;
    color: #0b1220;
    font-size: 16px;
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
  }

  header .brand .brandSubTitle{
    margin: 2px 0 0;
    padding: 0;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.06;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  html[data-theme="dark"] header .brand .brandTitle{
    color: #EAFBFF;
  }

  html[data-theme="dark"] header .brand .brandSubTitle{
    color: rgba(234,241,255,.60);
  }

  .burger{
    display: inline-flex;
  }

  .rightPack{
    width: auto;
    gap: 8px;
    min-width: 0;
  }

  .rightPack #btnSearch,
  .rightPack #btnLang,
  .rightPack #btnTheme{
    display: none;
  }

  .rightPack .loginBtn{
    display: none;
  }

  .drawer{
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100dvw;
    max-width: 100dvw;
    height: 100dvh;
    border-radius: 0;
    border-right: 0;
    padding:
      max(16px, env(safe-area-inset-top))
      16px
      max(18px, env(safe-area-inset-bottom))
      16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
  }

  .drawerHeader{
    align-items: center;
  }

  .drawerTitle{
    font-size: 24px;
  }

  .drawerSub{
    font-size: 13px;
  }

  .drawerTopToggles{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 2px;
  }

  .drawerTopToggles .switch,
  .drawerTopToggles .searchBtn{
    width: 100%;
  }

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

  .switch.switch--lang .switchTrack,
  .switch.switch--theme .switchTrack{
    min-width: 0 !important;
  }

  .searchBtn--drawer{
    width: 100%;
    height: 44px;
    border-radius: var(--radiusPill);
  }

  main{
    padding: 14px 10px calc(var(--mobile-footer-h) + 10px);
  }

  .hero.heroSplit{
    padding: 10px 4px 8px;
  }

  .heroLeft{
    width: 100%;
    max-width: 100%;
  }

  .loginFrame{
    width: 100%;
    padding: 18px 16px 16px;
  }

  .loginKicker{
    margin-bottom: 14px;
    font-size: 11px;
  }

  .loginTitle{
    text-align: center;
    font-size: clamp(28px, 8vw, 40px);
  }

  .loginSub{
    max-width: 100%;
    text-align: center;
    margin-top: 12px;
  }

  .loginCard{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 14px 16px 16px;
    border-radius: 22px;
  }

  .loginCardTop{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 12px;
    margin-bottom: 12px;
    min-height: auto;
  }

  .loginLogoWrap{
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 17px;
  }

  .loginLogoImg{
    width: 34px;
    height: 34px;
  }

  .loginHeadText{
    min-height: auto;
    align-items: flex-start;
    text-align: left;
    flex: 0 1 auto;
  }

  .loginPanelTitle{
    width: 100%;
    margin-bottom: 4px;
    font-size: 21px;
    line-height: 1.12;
    min-height: auto;
    justify-content: flex-start;
    text-align: left;
  }

  .loginPanelSub{
    width: 100%;
    max-width: 270px;
    min-height: auto;
    font-size: 11.8px;
    line-height: 1.36;
    text-align: left;
  }

  .authTabSwitch{
    gap: 6px;
    padding: 5px;
    margin-bottom: 12px;
  }

  .authTabLabel{
    min-height: 40px;
    font-size: 13px;
  }

  .authForm{
    gap: 10px;
  }

  .inputGroup{
    gap: 6px;
  }

  .inputGroup label{
    width: 100%;
    display: block;
    text-align: left;
    font-size: 12.5px;
  }

  .inputShell{
    min-height: 48px;
    padding: 0 12px;
    border-radius: 16px;
  }

  .inputShell input{
    font-size: 14px;
  }

  .passwordToggleBtn{
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 12px;
  }

  .authRow{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .checkWrap{
    font-size: 13px;
  }

  .textLinkBtn{
    font-size: 13px;
    white-space: nowrap;
  }

  .authLegalInline{
    gap: 8px;
    font-size: 12.5px;
  }

  .authMessage,
  .loginStatus{
    border-radius: 14px;
    padding: 11px 12px;
    font-size: 12.5px;
  }

  .primaryAuthBtn{
    min-height: 50px;
    border-radius: 16px;
  }

  .authDivider{
    margin: 14px 0 12px;
    font-size: 11px;
  }

  .googleBtn{
    min-height: 52px;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 16px;
  }

  .googleIconWrap{
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .googleSvg{
    width: 23px;
    height: 23px;
  }

  .googleBtnText{
    font-size: 14.5px;
  }

  .securityStrip,
  .loginMeta{
    justify-content: center;
  }

  .loginMetaItem{
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  footer.siteFooter{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    width: 100%;
    min-height: var(--mobile-footer-h);
    margin: 0;
    padding:
      7px
      14px
      calc(5px + env(safe-area-inset-bottom))
      14px;
    background: rgba(255,255,255,.35);
    border-top: 1px solid rgba(255,255,255,.45);
    color: rgba(15,23,42,.65);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.6),
      0 -8px 28px rgba(0,0,0,.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: visible;
  }

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

  .footerInner{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    line-height: 1.2;
  }

  .footerLeft{
    order: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
  }

  .footerPublicAppName,
  .footerPublicDesc{
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    max-width: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .footerRight{
    order: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    transform: translateY(10px);
  }

  .footerRight a,
  .footerRight .sep{
    font-size: 11.8px;
    line-height: 1.2;
  }

  .footerCopyrightLine{
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 9.5px;
    line-height: 1.2;
    transform: translateY(12px);
  }
}



/* =========================================================
   EXTRA COMPACT MOBILE HEIGHT
   =========================================================
   Untuk layar HP yang lebih pendek agar login card lebih
   ringkas dan tidak terdorong ke bawah / tertutup footer.
   ========================================================= */
@media (max-width: 740px) and (max-height: 820px){
  main{
    padding-top: 10px;
    padding-bottom: calc(var(--mobile-footer-h) + 8px);
  }

  .hero.heroSplit{
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .loginCard{
    padding-top: 12px;
    padding-bottom: 14px;
  }

  .loginCardTop{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 10px;
    margin-bottom: 10px;
  }

  .loginLogoWrap{
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 16px;
  }

  .loginLogoImg{
    width: 32px;
    height: 32px;
  }

  .loginHeadText{
    align-items: flex-start;
    text-align: left;
  }

  .loginPanelTitle{
    font-size: 20px;
    margin-bottom: 3px;
    justify-content: flex-start;
    text-align: left;
  }

  .loginPanelSub{
    max-width: 265px;
    font-size: 11.5px;
    line-height: 1.32;
    text-align: left;
  }


  .authTabSwitch{
    margin-bottom: 10px;
  }

  .authTabLabel{
    min-height: 38px;
  }

  .authForm{
    gap: 8px;
  }

  .inputShell{
    min-height: 46px;
  }

  .primaryAuthBtn{
    min-height: 48px;
  }

  .authDivider{
    margin: 12px 0 10px;
  }

  .googleBtn{
    min-height: 50px;
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: 16px;
  }
}

/* =========================================================
   FINAL VISUAL LOCK - MATCH INDEX.CSS BUMIL KU
   =========================================================
   RUANG LINGKUP:
   - Hanya menyelaraskan warna dan visual login dengan index.
   - Tidak mengubah ID, form, autentikasi, tab, redirect, atau JS.
   - Palet: teal #00acaa, teal gelap #0a8684, lime #c3da3e.
   ========================================================= */

html,
body,
.wrap,
main{
  background:var(--bg) !important;
  color:var(--ink) !important;
}

.overlay{
  background:
    radial-gradient(circle at top left, #e0f9ff 0, transparent 55%),
    radial-gradient(circle at bottom right, #f3ffe1 0, transparent 55%),
    linear-gradient(180deg, #f5f7fb 0%, #ffffff 100%) !important;
  opacity:1 !important;
}

html[data-theme="dark"] .overlay{
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(0,214,210,.13), transparent 65%),
    radial-gradient(900px 520px at 82% 22%, rgba(195,218,62,.08), transparent 70%),
    radial-gradient(900px 620px at 50% 88%, rgba(0,0,0,.45), transparent 60%),
    linear-gradient(180deg, #07181c 0%, #0b2024 58%, #07181c 100%) !important;
  opacity:.95 !important;
}

header{
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:
    0 4px 12px rgba(15,23,42,.08),
    0 1px 0 rgba(148,163,184,.30),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter:blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.12) !important;
}

html[data-theme="dark"] header{
  background:rgba(11,32,36,.86) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.065) !important;
}

header .brand .mark{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  transform:translateX(-4px) !important;
}

header .brand .brandText{
  transform:translateX(-15px) !important;
  line-height:1.1 !important;
}

header .brand .brandTitle{
  color:#020617 !important;
  font-size:17px !important;
  line-height:1.08 !important;
}

header .brand .brandSubTitle{
  color:#64748b !important;
  margin-top:3px !important;
  font-weight:700 !important;
}

html[data-theme="dark"] header .brand .brandTitle{
  color:#EAFBFF !important;
}

html[data-theme="dark"] header .brand .brandSubTitle{
  color:rgba(234,251,255,.60) !important;
}

.navBtn:hover,
.navLinkBtn:hover,
.navItem.is-open .navBtn{
  color:#00acaa !important;
  background:#e5f7fb !important;
  border-color:rgba(0,172,170,.18) !important;
  box-shadow:none !important;
}

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

.btn,
.burger,
.drawerClose,
.switch,
.searchBtn{
  background:rgba(255,255,255,.92) !important;
  border-color:rgba(148,163,184,.22) !important;
  box-shadow:var(--neu-out-sm) !important;
}

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

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

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

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

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

.switch[data-on="0"] .switchLabel[data-side="left"],
.switch[data-on="1"] .switchLabel[data-side="right"]{
  color:#00acaa !important;
}

html[data-theme="dark"] .switch[data-on="0"] .switchLabel[data-side="left"],
html[data-theme="dark"] .switch[data-on="1"] .switchLabel[data-side="right"]{
  color:#53ebe8 !important;
}

.loginBtn,
.primaryAuthBtn,
#tabSignIn:checked ~ .authTabSwitch label[for="tabSignIn"],
#tabSignUp:checked ~ .authTabSwitch label[for="tabSignUp"]{
  background:var(--primaryGrad) !important;
  border-color:transparent !important;
  color:#ffffff !important;
  box-shadow:var(--primaryShadow) !important;
}

.loginBtn:hover,
.primaryAuthBtn:hover{
  transform:translateY(-1px) !important;
  box-shadow:
    0 22px 42px rgba(0,172,170,.28),
    0 10px 20px rgba(10,134,132,.18),
    -12px -12px 26px rgba(255,255,255,1),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.08) !important;
}

html[data-theme="dark"] .loginBtn:hover,
html[data-theme="dark"] .primaryAuthBtn:hover{
  box-shadow:
    0 22px 42px rgba(0,0,0,.38),
    0 10px 20px rgba(0,214,210,.12),
    -12px -12px 26px rgba(255,255,255,.045),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.22) !important;
}

.loginCard{
  background:rgba(255,255,255,.76) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:
    0 24px 58px rgba(15,23,42,.11),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  backdrop-filter:blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.12) !important;
}

html[data-theme="dark"] .loginCard{
  background:rgba(16,43,48,.68) !important;
  border-color:rgba(255,255,255,.09) !important;
  box-shadow:
    0 26px 62px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.loginLogoWrap{
  background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(236,254,255,.92)) !important;
  border-color:rgba(0,172,170,.15) !important;
  box-shadow:var(--neu-out-sm) !important;
}

html[data-theme="dark"] .loginLogoWrap{
  background:linear-gradient(145deg, rgba(16,43,48,.96), rgba(20,52,58,.94)) !important;
  border-color:rgba(0,214,210,.16) !important;
}

.authTabSwitch{
  background:#f7fbfc !important;
  border-color:rgba(148,163,184,.22) !important;
  box-shadow:var(--neu-in-sm) !important;
}

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

.inputShell{
  background:rgba(255,255,255,.92) !important;
  border-color:rgba(148,163,184,.22) !important;
  box-shadow:var(--neu-in-sm) !important;
}

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

.inputShell:focus-within{
  border-color:rgba(0,172,170,.42) !important;
  box-shadow:
    0 0 0 4px rgba(0,172,170,.12),
    var(--neu-in-sm) !important;
}

.inputShell i,
.textLink,
.textLinkBtn,
.authLegalInline a,
.passwordToggleBtn:hover,
.passwordToggleBtn.is-visible{
  color:#00acaa !important;
}

html[data-theme="dark"] .inputShell i,
html[data-theme="dark"] .textLink,
html[data-theme="dark"] .textLinkBtn,
html[data-theme="dark"] .authLegalInline a,
html[data-theme="dark"] .passwordToggleBtn:hover,
html[data-theme="dark"] .passwordToggleBtn.is-visible{
  color:#53ebe8 !important;
}

.checkWrap input{
  accent-color:#00acaa !important;
}

.googleBtn{
  background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(236,254,255,.92)) !important;
  border-color:rgba(148,163,184,.28) !important;
  box-shadow:var(--neu-out-sm) !important;
  color:#202124 !important;
}

.googleBtn:hover{
  background:linear-gradient(145deg, rgba(255,255,255,1), rgba(236,254,255,.98)) !important;
  border-color:rgba(0,172,170,.26) !important;
  box-shadow:
    0 22px 42px rgba(15,23,42,.135),
    0 10px 20px rgba(0,172,170,.090),
    -12px -12px 26px rgba(255,255,255,1),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(15,23,42,.040) !important;
}

html[data-theme="dark"] .googleBtn{
  background:linear-gradient(145deg, rgba(16,43,48,.92), rgba(20,52,58,.90)) !important;
  border-color:rgba(255,255,255,.08) !important;
  color:#EAFBFF !important;
}

html[data-theme="dark"] .googleBtn:hover{
  background:linear-gradient(145deg, rgba(16,43,48,.98), rgba(20,52,58,.96)) !important;
  border-color:rgba(0,214,210,.22) !important;
}

.drawer,
.dropdown{
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(148,163,184,.22) !important;
  box-shadow:
    0 24px 58px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter:blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.12) !important;
}

html[data-theme="dark"] .drawer,
html[data-theme="dark"] .dropdown{
  background:rgba(11,32,36,.96) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:
    0 24px 58px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.drawerTitle,
.drawerItemBtn .chev{
  color:#00acaa !important;
}

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

.drawerItem{
  background:rgba(255,255,255,.92) !important;
  border-color:rgba(148,163,184,.22) !important;
}

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

.drawerSubmenu a{
  background:#e5f7fb !important;
  border-color:rgba(0,172,170,.14) !important;
}

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

footer.siteFooter{
  background:rgba(255,255,255,.62) !important;
  border-top:1px solid rgba(0,172,170,.18) !important;
  color:rgba(15,23,42,.66) !important;
  box-shadow:
    0 -10px 32px rgba(15,23,42,.045),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  backdrop-filter:blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08) !important;
}

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

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

.footerRight a:hover{
  color:#0a8684 !important;
}

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

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

@media (max-width:740px){
  header .brand .mark{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    transform:none !important;
  }

  header .brand .brandText{
    transform:translateX(-10px) !important;
  }

  footer.siteFooter{
    background:rgba(255,255,255,.72) !important;
    border-top-color:rgba(0,172,170,.18) !important;
  }

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



/* =========================================================
   BUMIL KU LOGIN - MOBILE VISUAL ALIGNMENT WITH INDEX
   =========================================================
   Tujuan:
   - Menyamakan navbar atas login HP dengan navbar index.
   - Mempertahankan seluruh ID autentikasi dan navigation.js.
   - Laptop/desktop existing tetap dipertahankan.
   - Breakpoint utama HP mengikuti index: <=620px.
   ========================================================= */

.loginMobileBrand,
.loginMobileInstitution,
.loginMobileHeaderActions{
  display:none;
}

/* Brand heart shared by navbar mobile + drawer brand. */
.loginMobileBrandLogoShadow{
  position:relative;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  overflow:visible;
  isolation:isolate;
  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));
}

.loginMobileBrandLogoWrap{
  position:relative;
  width:42px;
  height:42px;
  min-width:42px;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:transparent;
  border:0;
  box-shadow:none;
  -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");
  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");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

.loginMobileBrandLogo{
  position:relative;
  z-index:1;
  width:86%;
  height:86%;
  max-width:86%;
  max-height:86%;
  display:block;
  object-fit:contain;
  object-position:center;
  transform:translate3d(-.4%,1.35%,0);
  filter:drop-shadow(0 3px 5px rgba(14,147,130,.09));
}

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

/* 621-740px keeps drawer access after the old mobile nav breakpoint. */
@media (max-width:740px){
  .loginMobileHeaderActions{
    position:relative;
    z-index:6;
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex:0 0 auto;
  }

  .loginMobileSearchAction{
    width:32px;
    min-width:32px;
    height:36px;
    display:grid;
    place-items:center;
    color:#0f9f8d;
    background:transparent;
    border:0;
    border-radius:10px;
    text-decoration:none;
    box-shadow:none;
    font-size:22px;
    line-height:1;
    touch-action:manipulation;
    transition:color .16s ease, transform .16s ease;
  }

  .loginMobileSearchAction:hover{
    color:#0e9382;
    transform:translateY(-1px);
  }

  .loginMobileSearchAction:active{
    transform:scale(.95);
  }

  .loginMobileMenuNeumorph{
    position:relative;
    width:42px;
    min-width:42px;
    max-width:42px;
    height:42px;
    min-height:42px;
    max-height:42px;
    flex:0 0 42px;
    margin:0;
    padding:4px;
    display:grid;
    place-items:center;
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fafb 42%,
        #e9f0f1 100%
      );
    border:1px solid rgba(255,255,255,.90);
    border-radius:13px;
    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);
    overflow:visible;
    isolation:isolate;
    transition:transform .16s ease, box-shadow .16s ease;
  }

  .loginMobileMenuNeumorph:hover{
    transform:translateY(-1px);
    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);
  }

  .loginMobileMenuNeumorph:active{
    transform:translateY(0) scale(.985);
    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);
  }

  .loginMobileMenuButton{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    display:grid;
    place-items:center;
    color:#0f9f8d;
    background:transparent;
    border:0;
    border-radius:9px;
    box-shadow:none;
    cursor:pointer;
    touch-action:manipulation;
  }

  .loginMobileMenuButton:hover{
    color:#0e9382;
  }

  .loginMobileMenuButton:active{
    transform:scale(.94);
  }

  .loginMobileMenuButton:focus-visible,
  .loginMobileSearchAction:focus-visible{
    outline:2px solid rgba(15,159,141,.30);
    outline-offset:1px;
  }

  .loginMobileMenuButton i,
  .loginMobileMenuButton .svg-inline--fa{
    color:currentColor;
    font-size:26px;
    line-height:1;
    filter:drop-shadow(0 2px 3px rgba(14,147,130,.13));
  }

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

  html[data-theme="dark"] .loginMobileMenuNeumorph{
    background:
      linear-gradient(
        145deg,
        #183a40 0%,
        #102b30 48%,
        #0b2227 100%
      );
    border-color:rgba(255,255,255,.055);
    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);
  }

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

@media (max-width:620px){
  :root{
    --mobile-footer-h:0px;
  }

  html,
  body,
  .wrap,
  main{
    background:#ffffff !important;
  }

  html[data-theme="dark"],
  html[data-theme="dark"] body,
  html[data-theme="dark"] .wrap,
  html[data-theme="dark"] main{
    background:#0b2024 !important;
  }

  .overlay{
    display:none !important;
  }

  .navwrap{
    position:sticky !important;
    top:0 !important;
    z-index:70 !important;
    width:100% !important;
    padding:0 !important;
    pointer-events:auto !important;
  }

  .navwrap header{
    width:100% !important;
    min-height:72px !important;
    height:72px !important;
    margin:0 !important;
    padding:
      max(6px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      6px
      max(18px, env(safe-area-inset-left)) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:5px !important;
    border:0 !important;
    border-bottom:1px solid rgba(58,105,119,.10) !important;
    border-radius:0 !important;
    background:#ffffff !important;
    box-shadow:
      0 8px 22px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:hidden !important;
  }

  html[data-theme="dark"] .navwrap header{
    background:#102b30 !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;
  }

  .desktopLoginBrand,
  .navwrap header > nav,
  .navwrap header > .rightPack{
    display:none !important;
  }

  .loginMobileBrand{
    position:relative;
    z-index:2;
    min-width:0;
    max-width:120px;
    display:flex;
    align-items:center;
    gap:2px;
    flex:0 1 auto;
    color:#0e9382;
    text-decoration:none;
  }

  .loginMobileBrandLogoShadow{
    width:42px;
    min-width:42px;
    height:42px;
  }

  .loginMobileBrandCopy{
    min-width:0;
    max-width:88px;
    margin-left:-1px;
    display:flex;
    flex-direction:column;
    line-height:1.02;
  }

  .loginMobileBrandCopy strong{
    display:inline-block;
    color:transparent;
    background:linear-gradient(
      90deg,
      #0e9382 0%,
      #0f9f8d 24%,
      #43b796 46%,
      #79c875 66%,
      #a8d653 83%,
      #c4d63c 100%
    );
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size:18px;
    line-height:1.02;
    font-weight:800;
    letter-spacing:-.040em;
    white-space:nowrap;
    filter:
      drop-shadow(0 1px 1px rgba(14,93,82,.13))
      drop-shadow(0 2px 4px rgba(16,70,80,.075));
  }

  .loginMobileBrandCopy small{
    margin-top:3px;
    color:#65788a;
    font-size:7.8px;
    line-height:1.05;
    font-weight:600;
    white-space:nowrap;
  }

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

  .loginMobileInstitution{
    position:relative;
    z-index:2;
    min-width:0;
    max-width:108px;
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 1 auto;
    margin-left:2px;
  }

  .loginMobileInstitutionDivider{
    width:1px;
    min-width:1px;
    height:34px;
    flex:0 0 1px;
    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%
    );
  }

  .loginMobileInstitutionIdentity{
    min-width:0;
    max-width:100px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:3px;
  }

  .loginMobileInstitutionIdentity small{
    width:100%;
    max-width:92px;
    color:#65788a;
    font-size:6.4px;
    line-height:1.08;
    font-weight:600;
    letter-spacing:.012em;
    white-space:normal;
    text-align:left;
  }

  .loginMobileInstitutionIdentity img{
    display:block;
    width:100%;
    max-width:92px;
    height:auto;
    max-height:22px;
    object-fit:contain;
    object-position:left center;
  }

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

  html[data-theme="dark"] .loginMobileInstitutionIdentity img{
    box-sizing:content-box;
    width:auto;
    padding:2px 4px;
    background:#ffffff;
    border-radius:6px;
    box-shadow:0 4px 10px rgba(0,0,0,.16);
  }

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

  /* Main login surface follows the clean mobile index surface. */
  main{
    flex:1 !important;
    display:block !important;
    padding:18px 14px 22px !important;
    background:
      radial-gradient(circle at 100% 8%, rgba(82,215,208,.10), transparent 24%),
      radial-gradient(circle at 0% 62%, rgba(15,159,141,.06), transparent 22%),
      #ffffff !important;
  }

  html[data-theme="dark"] main{
    background:
      radial-gradient(circle at 100% 8%, rgba(15,159,141,.045), transparent 24%),
      radial-gradient(circle at 0% 62%, rgba(15,159,141,.025), transparent 22%),
      #0b2024 !important;
  }

  .hero.heroSplit{
    width:100% !important;
    padding:0 !important;
  }

  .heroLeft{
    width:100% !important;
    max-width:430px !important;
    margin:0 auto !important;
  }

  .loginCard{
    width:100% !important;
    max-width:430px !important;
    padding:20px 18px 18px !important;
    border:1px solid rgba(58,105,119,.10) !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.97) !important;
    box-shadow:
      0 18px 40px rgba(16,70,80,.10),
      0 4px 12px rgba(16,70,80,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html[data-theme="dark"] .loginCard{
    background:rgba(16,43,48,.96) !important;
    border-color:rgba(255,255,255,.08) !important;
    box-shadow:
      0 20px 46px rgba(0,0,0,.30),
      0 4px 14px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .loginCardTop{
    gap:10px !important;
    margin-bottom:15px !important;
  }

  .loginLogoWrap{
    width:60px !important;
    min-width:60px !important;
    height:60px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:
      drop-shadow(0 2px 3px rgba(17,72,79,.14))
      drop-shadow(0 8px 12px rgba(16,70,80,.13)) !important;
    overflow:hidden !important;
    -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-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
  }

  .loginLogoImg{
    width:86% !important;
    height:86% !important;
    object-fit:contain !important;
    transform:translate3d(-.4%,1.4%,0) !important;
  }

  .loginPanelTitle{
    color:#17384c !important;
    font-size:22px !important;
  }

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

  .loginPanelSub{
    color:#65788a !important;
    font-size:11.8px !important;
    line-height:1.45 !important;
  }

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

  .authTabSwitch{
    padding:5px !important;
    border:1px solid rgba(58,105,119,.10) !important;
    background:#f5faf9 !important;
    box-shadow:
      inset 3px 3px 8px rgba(16,70,80,.06),
      inset -3px -3px 8px rgba(255,255,255,.90) !important;
  }

  html[data-theme="dark"] .authTabSwitch{
    background:#0b2024 !important;
    border-color:rgba(255,255,255,.07) !important;
    box-shadow:
      inset 3px 3px 8px rgba(0,0,0,.22),
      inset -3px -3px 8px rgba(255,255,255,.025) !important;
  }

  .authTabLabel{
    min-height:40px !important;
    font-size:13px !important;
  }

  #tabSignIn:checked ~ .authTabSwitch label[for="tabSignIn"],
  #tabSignUp:checked ~ .authTabSwitch label[for="tabSignUp"]{
    background:linear-gradient(135deg,#0f9f8d 0%,#0f9f8d 56%,#0e9382 100%) !important;
    box-shadow:
      0 8px 16px rgba(15,159,141,.22),
      inset 0 1px 0 rgba(255,255,255,.30) !important;
  }

  .inputShell{
    min-height:50px !important;
    border:1px solid rgba(58,105,119,.13) !important;
    border-radius:15px !important;
    background:#ffffff !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 5px 14px rgba(16,70,80,.035) !important;
  }

  html[data-theme="dark"] .inputShell{
    background:#102b30 !important;
    border-color:rgba(255,255,255,.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 5px 14px rgba(0,0,0,.12) !important;
  }

  .primaryAuthBtn{
    min-height:50px !important;
    border-radius:999px !important;
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.26) 0%,
        rgba(255,255,255,.12) 35%,
        rgba(255,255,255,0) 70%
      ),
      linear-gradient(
        135deg,
        #0f9f8d 0%,
        #0f9f8d 56%,
        #0e9382 100%
      ) !important;
    box-shadow:
      0 16px 28px rgba(15,159,141,.24),
      0 6px 12px rgba(14,147,130,.12),
      inset 0 1px 0 rgba(255,255,255,.36) !important;
  }

  .googleBtn{
    min-height:50px !important;
    padding:7px 12px !important;
    border-radius:999px !important;
    background:#ffffff !important;
    border:1px solid rgba(65,117,130,.14) !important;
    box-shadow:
      0 12px 26px rgba(16,70,80,.08),
      0 3px 9px rgba(16,70,80,.035),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

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

  .googleIconWrap{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    box-shadow:0 5px 12px rgba(27,75,85,.08) !important;
  }

  .googleSvg{
    width:20px !important;
    height:20px !important;
  }

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

  footer.siteFooter{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    z-index:2 !important;
    width:100% !important;
    min-height:76px !important;
    margin:0 !important;
    padding:
      16px 18px
      calc(16px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 0% 100%, rgba(15,159,141,.10), transparent 34%),
      radial-gradient(circle at 100% 0%, rgba(15,159,141,.08), transparent 32%),
      linear-gradient(180deg,rgba(245,252,253,.96),rgba(236,249,251,.98)) !important;
    border-top:1px solid rgba(15,159,141,.12) !important;
    box-shadow:
      inset 0 1px rgba(255,255,255,.86),
      0 -8px 22px rgba(22,75,84,.04) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

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

  .footerRight{
    transform:none !important;
  }

  .footerCopyrightLine{
    transform:none !important;
  }

  /* Drawer stays functionally identical but visually follows index. */
  .drawer{
    top:0 !important;
    right:auto !important;
    bottom:0 !important;
    left:0 !important;
    width:min(342px,88vw) !important;
    max-width:342px !important;
    height:100dvh !important;
    padding:
      max(18px, env(safe-area-inset-top))
      18px
      max(18px, env(safe-area-inset-bottom)) !important;
    border-right:1px solid rgba(58,105,119,.10) !important;
    border-radius:0 !important;
    background:#ffffff !important;
    box-shadow:18px 0 44px rgba(10,48,61,.14) !important;
    overflow-y:auto !important;
    transform:translate3d(-104%,0,0);
  }

  body.nav-open .drawer{
    transform:translate3d(0,0,0);
  }

  html[data-theme="dark"] .drawer{
    background:#102b30 !important;
    border-right-color:rgba(255,255,255,.07) !important;
    box-shadow:18px 0 44px rgba(0,0,0,.34) !important;
  }

  .drawerHeader{
    align-items:center !important;
    padding-bottom:14px !important;
  }

  .drawerBrand--bumilku{
    gap:6px !important;
  }

  .drawerBrand--bumilku .loginMobileBrandLogoWrap{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
  }

  .drawerBrandCopy{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .drawerBrand--bumilku .drawerTitle{
    color:transparent !important;
    background:linear-gradient(
      90deg,
      #0e9382 0%,
      #0f9f8d 28%,
      #79c875 70%,
      #c4d63c 100%
    ) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    font-size:17px !important;
  }

  .drawerBrand--bumilku .drawerSub{
    margin-top:3px !important;
    font-size:8px !important;
    line-height:1.1 !important;
  }

  .drawerClose{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    border-radius:11px !important;
    color:#0f9f8d !important;
    background:
      linear-gradient(145deg,#ffffff 0%,#f7fafb 42%,#e9f0f1 100%) !important;
    border:1px solid rgba(255,255,255,.90) !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) !important;
  }

  html[data-theme="dark"] .drawerClose{
    color:#53ebe8 !important;
    background:linear-gradient(145deg,#183a40,#102b30 50%,#0b2227) !important;
    border-color:rgba(255,255,255,.055) !important;
    box-shadow:
      6px 6px 13px rgba(0,0,0,.30),
      -4px -4px 10px rgba(40,78,84,.18) !important;
  }

  .drawerTopToggles{
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
  }

  .drawerTopToggles .switch{
    width:auto !important;
  }

  .drawerTopToggles .switchTrack{
    min-width:92px !important;
  }

  .drawerNav{
    gap:9px !important;
  }

  .drawerItem{
    border-radius:16px !important;
    border-color:rgba(58,105,119,.10) !important;
    background:#ffffff !important;
    box-shadow:
      0 8px 18px rgba(16,70,80,.07),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  html[data-theme="dark"] .drawerItem{
    background:#102b30 !important;
    border-color:rgba(255,255,255,.07) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.17) !important;
  }

  .drawerItemBtn{
    min-height:48px !important;
    padding:10px 13px !important;
  }

  .drawerItemBtn .left{
    gap:10px !important;
    font-size:12.5px !important;
  }

  .drawerItemBtn i,
  .drawerItemBtn .chev{
    font-size:14px !important;
  }
}

@media (max-width:420px){
  .navwrap header{
    min-height:68px !important;
    height:68px !important;
    padding:
      max(4px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      4px
      max(12px, env(safe-area-inset-left)) !important;
    gap:4px !important;
  }

  .loginMobileBrand{
    max-width:120px !important;
  }

  .loginMobileBrandLogoShadow,
  .loginMobileBrandLogoWrap{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
  }

  .loginMobileBrandCopy{
    max-width:82px !important;
  }

  .loginMobileBrandCopy strong{
    font-size:16.8px !important;
  }

  .loginMobileBrandCopy small{
    margin-top:2px !important;
    font-size:7.2px !important;
  }

  .loginMobileInstitution{
    max-width:78px !important;
    gap:7px !important;
    margin-left:1px !important;
  }

  .loginMobileInstitutionDivider{
    height:31px !important;
  }

  .loginMobileInstitutionIdentity{
    max-width:70px !important;
    gap:2px !important;
  }

  .loginMobileInstitutionIdentity small{
    max-width:68px !important;
    font-size:5.9px !important;
  }

  .loginMobileInstitutionIdentity img{
    max-width:68px !important;
    max-height:20px !important;
  }

  .loginMobileHeaderActions{
    gap:7px !important;
  }

  .loginMobileSearchAction{
    width:30px !important;
    min-width:30px !important;
    height:34px !important;
    font-size:21.5px !important;
  }

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

  .loginMobileMenuButton i,
  .loginMobileMenuButton .svg-inline--fa{
    font-size:25.5px !important;
  }

  main{
    padding:14px 10px 18px !important;
  }

  .loginCard{
    padding:17px 14px 16px !important;
    border-radius:22px !important;
  }

  .loginLogoWrap{
    width:54px !important;
    min-width:54px !important;
    height:54px !important;
  }

  .loginPanelTitle{
    font-size:20px !important;
  }
}

@media (max-width:350px){
  .navwrap header{
    padding-left:max(10px,env(safe-area-inset-left)) !important;
    padding-right:max(10px,env(safe-area-inset-right)) !important;
    gap:3px !important;
  }

  .loginMobileBrand{
    max-width:108px !important;
  }

  .loginMobileBrandLogoShadow,
  .loginMobileBrandLogoWrap{
    width:35px !important;
    min-width:35px !important;
    height:35px !important;
  }

  .loginMobileBrandCopy{
    max-width:72px !important;
  }

  .loginMobileBrandCopy strong{
    font-size:15.2px !important;
  }

  .loginMobileBrandCopy small{
    font-size:6.4px !important;
  }

  .loginMobileInstitution{
    max-width:64px !important;
    gap:5px !important;
    margin-left:0 !important;
  }

  .loginMobileInstitutionDivider{
    height:28px !important;
  }

  .loginMobileInstitutionIdentity{
    max-width:58px !important;
  }

  .loginMobileInstitutionIdentity small{
    max-width:56px !important;
    font-size:5.2px !important;
  }

  .loginMobileInstitutionIdentity img{
    max-width:56px !important;
    max-height:18px !important;
  }

  .loginMobileHeaderActions{
    gap:6px !important;
  }

  .loginMobileSearchAction{
    width:28px !important;
    min-width:28px !important;
    height:32px !important;
    font-size:21px !important;
  }

  .loginMobileMenuNeumorph{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    flex-basis:38px !important;
    border-radius:11px !important;
  }

  .loginMobileMenuButton i,
  .loginMobileMenuButton .svg-inline--fa{
    font-size:25px !important;
  }
}
/* =========================================================
   FINAL V2 - LOGIN HERO LOGO MATCH INDEX
   =========================================================
   - Menggunakan struktur heroBrandLogoShadow / heroBrandLogoWrap /
     heroBrandLogo yang sama dengan landing page index.
   - Bentuk heart memakai mask yang sama.
   - Shadow berada pada outer wrapper agar tidak terpotong.
   - Tidak menyentuh input, tab, tombol auth, atau JavaScript.
   ========================================================= */

.heroBrandLogoShadow{
  position:relative !important;
  display:inline-grid !important;
  place-items:center !important;
  flex:0 0 auto !important;
  overflow:visible !important;
  isolation:isolate !important;

  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;
}

.heroBrandLogoWrap{
  position:relative !important;
  width:74px !important;
  min-width:74px !important;
  height:74px !important;
  min-height:74px !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;

  -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;

  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}

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

.heroBrandLogoWrap .heroBrandLogo{
  position:relative !important;
  z-index:1 !important;

  width:86% !important;
  height:86% !important;
  max-width:86% !important;
  max-height:86% !important;

  object-fit:contain !important;
  object-position:center !important;

  display:block !important;

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

  transform:
    translate3d(-0.4%,1.2%,0) !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;
}

.loginHeroBrandLogoShadow{
  align-self:center !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;
  }

  .loginHeroBrandLogoWrap{
    width:72px !important;
    min-width:72px !important;
    height:72px !important;
    min-height:72px !important;
  }
}

@media (max-width:420px){
  .loginHeroBrandLogoWrap{
    width:70px !important;
    min-width:70px !important;
    height:70px !important;
    min-height:70px !important;
  }

  .heroBrandLogoWrap .heroBrandLogo{
    transform:
      translate3d(-0.4%,1.6%,0) !important;
  }
}

@media (max-width:350px){
  .loginHeroBrandLogoWrap{
    width:64px !important;
    min-width:64px !important;
    height:64px !important;
    min-height:64px !important;
  }

  .heroBrandLogoWrap .heroBrandLogo{
    transform:
      translate3d(-0.4%,1.8%,0) !important;
  }
}


/* =========================================================
   FINAL V2 - MOBILE SIDEBAR MATCH INDEX
   =========================================================
   Login tetap memakai navigation.js dengan body.nav-open.
   Selector visual di bawah mengadaptasi sidebar index tanpa
   mengganti mekanisme JavaScript login.
   ========================================================= */

.loginDrawerCompatibilityControls{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

/* Komponen index sidebar hanya dipakai sebagai layout mobile. */
.mobileSidebarActions{
  display:none;
}

@media (max-width:620px){

  /* -------------------------------------------------------
     BACKDROP - SAMA KARAKTER INDEX: RINGAN, TANPA BLUR
     ------------------------------------------------------- */
  .mobileSidebarBackdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:190 !important;

    display:block !important;

    background:rgba(15,35,42,.28) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    opacity:0 !important;
    visibility:visible !important;
    pointer-events:none !important;

    transition:
      opacity 125ms linear !important;
  }

  body.nav-open .mobileSidebarBackdrop{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

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

  /* -------------------------------------------------------
     SIDEBAR PANEL - LEFT DRAWER INDEX
     ------------------------------------------------------- */
  .mobileSidebar{
    position:fixed !important;

    top:0 !important;
    right:auto !important;
    bottom:0 !important;
    left:0 !important;

    z-index:200 !important;

    width:min(334px,88vw) !important;
    max-width:334px !important;
    height:100dvh !important;
    max-height:100dvh !important;

    margin:0 !important;

    padding:
      0
      18px
      max(18px, env(safe-area-inset-bottom)) !important;

    display:flex !important;
    flex-direction:column !important;
    gap:0 !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:0 !important;
    border-right:
      1px solid rgba(58,105,119,.11) !important;

    border-radius:0 !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;

    opacity:1 !important;

    transform:
      translateX(-101%) !important;

    transform-origin:left center !important;

    visibility:visible !important;
    pointer-events:none !important;

    overflow:hidden !important;
    overscroll-behavior:contain !important;

    will-change:auto !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;

    transition:
      transform
      125ms
      cubic-bezier(.20,.82,.22,1) !important;
  }

  body.nav-open .mobileSidebar{
    transform:translateX(0) !important;
    visibility:visible !important;
    pointer-events:auto !important;
    opacity:1 !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-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;
  }

  body.nav-open{
    overflow:hidden !important;
    touch-action:none !important;
    overscroll-behavior:none !important;
  }

  /* -------------------------------------------------------
     HEADER SIDEBAR = HEADER INDEX
     ------------------------------------------------------- */
  .mobileSidebarHeader{
    position:relative !important;

    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;
  }

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

  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;
  }

  /* -------------------------------------------------------
     BRAND BUMIL KU
     ------------------------------------------------------- */
  .mobileSidebarBrand{
    min-width:0 !important;
    max-width:118px !important;

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

    gap:7px !important;
  }

  .mobileSidebarBrand .brandLogoShadow{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;

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

    overflow:visible !important;

    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;
  }

  .mobileSidebarBrand .brandLogoWrap{
    position:relative !important;

    width:36px !important;
    min-width:36px !important;
    height:36px !important;

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

    overflow:hidden !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    -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 .brandLogoWrap::before,
  .mobileSidebarBrand .brandLogoWrap::after{
    content:none !important;
    display:none !important;
  }

  .mobileSidebarBrand .brandLogo{
    width:94% !important;
    height:94% !important;
    object-fit:contain !important;
    display:block !important;

    transform:
      translate3d(-0.3%,1.2%,0) !important;
  }

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

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

    line-height:1.05 !important;
  }

  .mobileSidebarBrand .brandCopy strong{
    margin:0 !important;

    color:transparent !important;

    background:
      linear-gradient(
        90deg,
        #0e9382 0%,
        #0f9f8d 28%,
        #79c875 70%,
        #c4d63c 100%
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;

    font-size:15px !important;
    line-height:1.05 !important;
    font-weight:700 !important;
    letter-spacing:-.035em !important;

    white-space:nowrap !important;
  }

  .mobileSidebarBrand .brandCopy small{
    margin-top:3px !important;

    color:#65788a !important;

    font-size:7px !important;
    line-height:1.05 !important;
    font-weight:600 !important;

    white-space:nowrap !important;
  }

  html[data-theme="dark"]
  .mobileSidebarBrand .brandCopy small{
    color:#aac8cc !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;
  }

  /* -------------------------------------------------------
     IDENTITAS PENINGKATAN MUTU / RSAB
     ------------------------------------------------------- */
  .mobileSidebarInstitutionLockup{
    position:relative !important;
    z-index:1 !important;

    min-width:0 !important;
    max-width:100% !important;

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

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

    gap:7px !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;

    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;
  }

  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;
  }

  /* -------------------------------------------------------
     CLOSE BUTTON - NEUMORPHISM INDEX
     ------------------------------------------------------- */
  .mobileSidebarClose{
    appearance:none !important;
    -webkit-appearance:none !important;

    justify-self:end !important;
    align-self:center !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;

    cursor:pointer !important;
  }

  .mobileSidebarClose i,
  .mobileSidebarClose .svg-inline--fa{
    color:currentColor !important;
    font-size:18px !important;
    line-height:1 !important;
  }

  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 10px rgba(40,78,84,.18),
      inset 1px 1px 1px rgba(255,255,255,.04) !important;
  }

  /* -------------------------------------------------------
     MENU CARDS - TARGET SCREENSHOT INDEX
     ------------------------------------------------------- */
  .mobileSidebarNav{
    flex:1 1 auto !important;
    min-height:0 !important;

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

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    gap:7px !important;
  }

  .mobileSidebarNav a{
    width:100% !important;
    min-width:0 !important;
    min-height:47px !important;

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

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

    color:#405f6d !important;

    background:
      rgba(255,255,255,.60) !important;

    border:
      1px solid rgba(58,105,119,.075) !important;

    border-radius:12px !important;

    box-shadow:
      0 5px 13px rgba(16,70,80,.035),
      inset 0 1px 0 rgba(255,255,255,.94) !important;

    text-decoration:none !important;

    font-size:12px !important;
    line-height:1 !important;
    font-weight:650 !important;

    white-space:nowrap !important;
    overflow:hidden !important;

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

  /*
   * Screenshot index final menampilkan label menu secara clean
   * tanpa glyph/chevron. Elemen icon tetap ada di HTML agar
   * struktur semantik mudah dikembangkan, tetapi tidak divisualkan.
   */
  .mobileSidebarNav a > i{
    display:none !important;
  }

  .mobileSidebarNav a > span{
    min-width:0 !important;

    display:block !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .mobileSidebarNav a:hover{
    color:#0e9382 !important;
    background:#ffffff !important;
    border-color:rgba(15,159,141,.15) !important;

    transform:translateX(2px) !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;

    box-shadow:
      0 5px 13px rgba(0,0,0,.10),
      inset 0 1px 0 rgba(255,255,255,.025) !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;
  }

  /* -------------------------------------------------------
     BOTTOM AUTH ACTIONS - SAMA DENGAN INDEX
     ------------------------------------------------------- */
  .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;

    text-decoration:none !important;
    text-align:center !important;

    font-size:12.5px !important;
    line-height:1 !important;
    font-weight:750 !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:#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,.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:#ffffff !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:#ffffff !important;

    border:
      1px solid rgba(255,255,255,.48) !important;

    background:
      rgba(255,255,255,.07) !important;
  }

  .mobileSidebarActions
  .mobileSidebarGoogleAction{
    color:#294052 !important;

    background:#ffffff !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;
    min-width:28px !important;
    height:28px !important;

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

    border-radius:50% !important;

    background:#ffffff !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;
  }

  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;
  }
}

/* =========================================================
   MOBILE COMPACT <=420PX
   ========================================================= */
@media (max-width:420px){

  .mobileSidebar{
    width:min(322px,88vw) !important;
    max-width:322px !important;

    padding:
      0
      17px
      max(17px, env(safe-area-inset-bottom)) !important;
  }

  .mobileSidebarHeader{
    width:calc(100% + 34px) !important;
    min-width:calc(100% + 34px) !important;

    min-height:68px !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;
  }

  .mobileSidebarBrand{
    max-width:108px !important;
    gap:6px !important;
  }

  .mobileSidebarBrand .brandLogoShadow,
  .mobileSidebarBrand .brandLogoWrap{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
  }

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

  .mobileSidebarBrand .brandCopy 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;
  }

  .mobileSidebarNav a{
    min-height:47px !important;

    padding-left:13px !important;
    padding-right:13px !important;

    font-size:12px !important;
  }

  .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;
    min-width:26px !important;
    height:26px !important;
  }

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

/* =========================================================
   MOBILE VERY SMALL <=350PX
   ========================================================= */
@media (max-width:350px){

  .mobileSidebar{
    width:min(292px,90vw) !important;
    max-width:292px !important;

    padding:
      0
      14px
      max(14px, env(safe-area-inset-bottom)) !important;
  }

  .mobileSidebarHeader{
    width:calc(100% + 28px) !important;
    min-width:calc(100% + 28px) !important;

    margin:
      0
      -14px
      0
      -14px !important;

    grid-template-columns:
      minmax(0,auto)
      minmax(68px,1fr)
      32px !important;

    column-gap:6px !important;
  }

  .mobileSidebarBrand{
    max-width:96px !important;
    gap:5px !important;
  }

  .mobileSidebarBrand .brandLogoShadow,
  .mobileSidebarBrand .brandLogoWrap{
    width:31px !important;
    min-width:31px !important;
    height:31px !important;
  }

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

  .mobileSidebarBrand .brandCopy 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;
  }

  .mobileSidebarClose{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }

  .mobileSidebarNav a{
    min-height:44px !important;

    padding-left:12px !important;
    padding-right:12px !important;

    font-size:11.5px !important;
  }

  .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;
    min-width:24px !important;
    height:24px !important;
  }

  .mobileSidebarActions
  .mobileSidebarGoogleAction
  .googleIcon{
    width:16px !important;
    height:16px !important;
  }
}

@media (max-width:620px) and (prefers-reduced-motion:reduce){
  .mobileSidebar,
  .mobileSidebarBackdrop{
    transition-duration:.001ms !important;
  }
}

/* =========================================================
   FINAL V3 - MOBILE LOGIN FOOTER MATCH INDEX
   =========================================================
   TARGET:
   - Menyamakan footer login dengan footer landing page index
     khusus viewport HP <=620px.
   - Kiri  : lock mini-card.
   - Tengah: Syarat & Ketentuan | Kebijakan Privasi + copyright.
   - Kanan : shield-heart mini-card teal.
   - Tidak mengubah fungsi autentikasi / JavaScript.
   ========================================================= */

.loginFooterSecurityIcon{
  display:none;
}

@media (max-width:620px){

  footer.siteFooter{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    z-index:2 !important;

    width:100% !important;
    min-height:108px !important;
    height:auto !important;

    margin:0 !important;

    padding:
      18px
      18px
      calc(18px + env(safe-area-inset-bottom)) !important;

    display:grid !important;
    grid-template-columns:
      46px
      minmax(0,1fr)
      46px !important;

    align-items:center !important;
    justify-content:stretch !important;

    gap:10px !important;

    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)
      ) !important;

    border:0 !important;
    border-top:
      1px solid rgba(15,159,141,.14) !important;

    box-shadow:
      inset 0 1px rgba(255,255,255,.86),
      0 -12px 30px rgba(22,75,84,.05) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    overflow:visible !important;
  }

  html[data-theme="dark"] footer.siteFooter{
    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)
      ) !important;

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

    box-shadow:
      inset 0 1px rgba(255,255,255,.045),
      0 -12px 30px rgba(0,0,0,.12) !important;
  }

  /* =======================================================
     SECURITY ICON CARDS
     ======================================================= */
  .loginFooterSecurityIcon{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;

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

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

    align-self:center !important;

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

    border-radius:15px !important;

    background:
      rgba(255,255,255,.72) !important;

    border:
      1px solid rgba(61,123,135,.13) !important;

    box-shadow:
      0 10px 20px rgba(20,80,90,.08),
      inset 0 1px rgba(255,255,255,.90) !important;

    font-size:17px !important;
    line-height:1 !important;
  }

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

    border-color:
      rgba(255,255,255,.08) !important;

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

  .loginFooterSecurityIcon--lock{
    justify-self:start !important;
    color:#91aeb9 !important;
  }

  .loginFooterSecurityIcon--shield{
    justify-self:end !important;

    color:#ffffff !important;

    background:
      linear-gradient(
        145deg,
        #0f9f8d,
        #0e9382
      ) !important;

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

    box-shadow:
      0 10px 20px rgba(15,159,141,.20),
      inset 0 1px rgba(255,255,255,.28) !important;
  }

  html[data-theme="dark"]
  .loginFooterSecurityIcon--shield{
    color:#ffffff !important;

    background:
      linear-gradient(
        145deg,
        #0f9f8d,
        #0e9382
      ) !important;

    border-color:
      rgba(83,235,232,.12) !important;

    box-shadow:
      0 10px 20px rgba(0,0,0,.22),
      0 4px 12px rgba(15,159,141,.10),
      inset 0 1px rgba(255,255,255,.16) !important;
  }

  .loginFooterSecurityIcon i,
  .loginFooterSecurityIcon .svg-inline--fa{
    display:block !important;
    margin:0 !important;
    padding:0 !important;

    color:currentColor !important;

    font-size:inherit !important;
    line-height:1 !important;

    transform:none !important;
  }

  /* =======================================================
     CENTER CONTENT
     ======================================================= */
  footer.siteFooter .footerInner{
    grid-column:2 !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

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

    display:flex !important;
    flex-direction:column !important;

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

    gap:10px !important;

    text-align:center !important;
  }

  footer.siteFooter .footerLeft{
    order:2 !important;

    width:100% !important;
    min-width:0 !important;

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

    display:flex !important;
    flex-direction:column !important;

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

    text-align:center !important;
    line-height:1.3 !important;
  }

  footer.siteFooter .footerPublicAppName,
  footer.siteFooter .footerPublicDesc{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;

    width:0 !important;
    height:0 !important;
    max-width:0 !important;
    max-height:0 !important;

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

    overflow:hidden !important;
    pointer-events:none !important;
  }

  footer.siteFooter .footerRight{
    order:1 !important;

    width:100% !important;
    min-width:0 !important;

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

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

    gap:8px !important;

    color:#0e9382 !important;

    text-align:center !important;
    white-space:normal !important;

    line-height:1.3 !important;

    transform:none !important;
  }

  footer.siteFooter .footerRight a{
    margin:0 !important;
    padding:0 !important;

    color:#0e9382 !important;

    text-decoration:none !important;

    font-size:11px !important;
    line-height:1.3 !important;
    font-weight:700 !important;

    white-space:nowrap !important;

    transform:none !important;
  }

  footer.siteFooter .footerRight a:hover{
    color:#0f9f8d !important;
    text-decoration:underline !important;
    text-underline-offset:3px !important;
    transform:none !important;
  }

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

  footer.siteFooter .footerRight .sep{
    margin:0 !important;
    padding:0 !important;

    color:rgba(65,101,112,.45) !important;

    font-size:11px !important;
    line-height:1.3 !important;

    opacity:1 !important;
  }

  html[data-theme="dark"]
  footer.siteFooter .footerRight .sep{
    color:rgba(255,255,255,.24) !important;
  }

  footer.siteFooter .footerCopyrightLine{
    display:block !important;

    width:100% !important;

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

    color:#65788a !important;

    text-align:center !important;

    font-size:9px !important;
    line-height:1.3 !important;
    font-weight:500 !important;

    white-space:nowrap !important;

    transform:none !important;
  }

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

/* =========================================================
   INDEX BREAKPOINT <=420PX
   ========================================================= */
@media (max-width:420px){

  footer.siteFooter{
    grid-template-columns:
      40px
      minmax(0,1fr)
      40px !important;

    padding-left:14px !important;
    padding-right:14px !important;

    gap:10px !important;
  }

  .loginFooterSecurityIcon{
    width:39px !important;
    min-width:39px !important;
    max-width:39px !important;

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

    border-radius:14px !important;

    font-size:15.5px !important;
  }

  footer.siteFooter .footerRight{
    gap:7px !important;
  }

  footer.siteFooter .footerRight a,
  footer.siteFooter .footerRight .sep{
    font-size:10.2px !important;
  }

  footer.siteFooter .footerCopyrightLine{
    font-size:9px !important;
  }
}

/* =========================================================
   INDEX BREAKPOINT <=350PX
   ========================================================= */
@media (max-width:350px){

  footer.siteFooter .footerRight .sep{
    display:none !important;
  }

  footer.siteFooter .footerRight{
    gap:5px !important;
  }

  footer.siteFooter .footerRight a{
    font-size:9.5px !important;
  }

  footer.siteFooter .footerCopyrightLine{
    font-size:8.5px !important;
  }
}

/* =========================================================
   FINAL V4 - LOGIN ACTION BUTTONS MATCH INDEX
   =========================================================
   RUANG LINGKUP:
   - HANYA #signInSubmitBtn dan #googleLoginBtn.
   - Posisi tombol, jarak antar-section, authDivider, form,
     loginCard, navbar, sidebar, dan footer tidak diubah.
   - Fungsi submit / Google Auth / disabled state tetap sama.
   ========================================================= */

/* ---------------------------------------------------------
   TOMBOL MASUK
   Struktur visual mengikuti .primaryAction pada index.
   --------------------------------------------------------- */
#signInSubmitBtn.loginIndexPrimaryAction{
  position:relative !important;

  width:100% !important;

  padding:0 12px !important;

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

  gap:6px !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,.20) !important;

  border-radius:999px !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;

  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;

  text-align:center !important;

  cursor:pointer !important;

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

#signInSubmitBtn.loginIndexPrimaryAction: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;

  transform:translateY(-1px) !important;
}

#signInSubmitBtn.loginIndexPrimaryAction: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;

  transform:translateY(0) !important;
}

#signInSubmitBtn .actionLeading,
#signInSubmitBtn .actionTrailing{
  display:grid !important;
  place-items:center !important;
}

#signInSubmitBtn .actionLeading{
  justify-self:start !important;

  color:#ffffff !important;

  font-size:18px !important;
  line-height:1 !important;
}

#signInSubmitBtn .actionLeading i,
#signInSubmitBtn .actionLeading .svg-inline--fa{
  color:currentColor !important;
  font-size:inherit !important;
  line-height:1 !important;
}

#signInSubmitBtn .loginIndexActionLabel{
  min-width:0 !important;

  display:block !important;

  color:#ffffff !important;

  text-align:center !important;

  font-size:inherit !important;
  line-height:1 !important;
  font-weight:700 !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#signInSubmitBtn .actionTrailing{
  width:29px !important;
  min-width:29px !important;
  height:29px !important;

  justify-self:end !important;

  color:#ffffff !important;

  background:
    rgba(255,255,255,.08) !important;

  border:
    1px solid rgba(255,255,255,.52) !important;

  border-radius:50% !important;

  font-size:10px !important;
  line-height:1 !important;
}

#signInSubmitBtn .actionTrailing i,
#signInSubmitBtn .actionTrailing .svg-inline--fa{
  color:currentColor !important;
  font-size:inherit !important;
  line-height:1 !important;
}

/* ---------------------------------------------------------
   TOMBOL GOOGLE
   Struktur visual mengikuti .googleAction pada index.
   --------------------------------------------------------- */
#googleLoginBtn.loginIndexGoogleAction{
  position:relative !important;

  width:100% !important;

  padding:0 12px !important;

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

  gap:6px !important;

  color:#294052 !important;

  background:
    rgba(255,255,255,.94) !important;

  border:
    1px solid rgba(65,117,130,.16) !important;

  border-radius:999px !important;

  box-shadow:
    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) !important;

  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;

  text-align:center !important;

  cursor:pointer !important;

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

#googleLoginBtn.loginIndexGoogleAction:hover{
  color:#294052 !important;

  background:#ffffff !important;

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

  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) !important;

  transform:translateY(-1px) !important;
}

#googleLoginBtn.loginIndexGoogleAction:active{
  transform:translateY(0) !important;
}

#googleLoginBtn .googleIconWrap{
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;

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

  justify-self:start !important;

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

  padding:0 !important;

  background:#ffffff !important;

  border-radius:50% !important;

  box-shadow:
    0 7px 14px rgba(27,75,85,.10),
    inset 0 1px rgba(255,255,255,1) !important;
}

#googleLoginBtn .googleIcon,
#googleLoginBtn .googleSvg{
  width:18px !important;
  height:18px !important;

  display:block !important;
}

#googleLoginBtn .loginIndexGoogleLabel{
  min-width:0 !important;

  display:block !important;

  color:inherit !important;

  text-align:center !important;

  font-size:inherit !important;
  line-height:1 !important;
  font-weight:700 !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#googleLoginBtn .googleTrailing{
  width:29px !important;
  min-width:29px !important;
  max-width:29px !important;

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

  justify-self:end !important;

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

  color:#426577 !important;

  background:
    rgba(255,255,255,.56) !important;

  border:
    1px solid rgba(61,111,124,.22) !important;

  border-radius:50% !important;

  font-size:10px !important;
  line-height:1 !important;
}

#googleLoginBtn .googleTrailing i,
#googleLoginBtn .googleTrailing .svg-inline--fa{
  color:currentColor !important;
  font-size:inherit !important;
  line-height:1 !important;
}

/* Disabled state tetap mengikuti auth module. */
#signInSubmitBtn:disabled,
#googleLoginBtn:disabled{
  cursor:not-allowed !important;
  transform:none !important;
}

/* ---------------------------------------------------------
   DARK MODE - GOOGLE SAMA KARAKTER INDEX
   --------------------------------------------------------- */
html[data-theme="dark"]
#googleLoginBtn.loginIndexGoogleAction{
  color:#eafcff !important;

  background:
    rgba(16,43,48,.94) !important;

  border-color:
    rgba(255,255,255,.09) !important;

  box-shadow:
    0 20px 46px rgba(0,0,0,.34),
    0 4px 14px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

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

html[data-theme="dark"]
#googleLoginBtn .googleTrailing{
  color:#b9d8dc !important;

  border-color:
    rgba(255,255,255,.14) !important;

  background:
    rgba(255,255,255,.04) !important;
}

/* =========================================================
   KHUSUS HP - UKURAN TOMBOL SAMA DENGAN INDEX
   Tidak mengubah margin/gap di luar tombol.
   ========================================================= */
@media (max-width:620px){

  #signInSubmitBtn.loginIndexPrimaryAction,
  #googleLoginBtn.loginIndexGoogleAction{
    min-height:48px !important;

    padding-left:12px !important;
    padding-right:12px !important;

    grid-template-columns:
      32px minmax(0,1fr) 32px !important;

    gap:6px !important;

    font-size:14px !important;
  }

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

  #signInSubmitBtn .actionTrailing,
  #googleLoginBtn .googleTrailing{
    width:29px !important;
    min-width:29px !important;
    max-width:29px !important;

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

    font-size:10px !important;
  }

  #googleLoginBtn .googleIconWrap{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;

    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
  }

  #googleLoginBtn .googleIcon,
  #googleLoginBtn .googleSvg{
    width:18px !important;
    height:18px !important;
  }
}

@media (max-width:420px){

  #signInSubmitBtn.loginIndexPrimaryAction,
  #googleLoginBtn.loginIndexGoogleAction{
    min-height:46px !important;

    padding-left:10px !important;
    padding-right:10px !important;

    grid-template-columns:
      30px minmax(0,1fr) 30px !important;

    gap:5px !important;

    font-size:13px !important;
  }

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

  #signInSubmitBtn .actionTrailing,
  #googleLoginBtn .googleTrailing{
    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;

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

    font-size:9px !important;
  }

  #googleLoginBtn .googleIconWrap{
    width:26px !important;
    min-width:26px !important;
    max-width:26px !important;

    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
  }

  #googleLoginBtn .googleIcon,
  #googleLoginBtn .googleSvg{
    width:17px !important;
    height:17px !important;
  }
}

/* =========================================================
   FINAL V5 - SIGN UP ACTION + TERMS ALIGNMENT
   =========================================================
   RUANG LINGKUP:
   - HANYA tombol #signUpSubmitBtn.
   - Tombol #googleLoginBtn tetap memakai gaya index V4 dan
     dikunci kembali di sini agar tampil identik pada tab Daftar.
   - HANYA alignment .termsWrap diperbaiki supaya checkbox dan
     kalimat persetujuan rapat serta rata kiri.
   - Tidak mengubah spacing loginCard, authForm, divider,
     navbar, sidebar, footer, maupun fungsi autentikasi.
   ========================================================= */

/* =========================================================
   BUAT AKUN - SAMA DENGAN PRIMARY ACTION INDEX
   ========================================================= */
#signUpSubmitBtn.loginIndexPrimaryAction{
  position:relative !important;

  width:100% !important;

  padding:0 12px !important;

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

  gap:6px !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,.20) !important;

  border-radius:999px !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;

  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;

  text-align:center !important;

  cursor:pointer !important;

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

#signUpSubmitBtn.loginIndexPrimaryAction: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;

  transform:translateY(-1px) !important;
}

#signUpSubmitBtn.loginIndexPrimaryAction: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;

  transform:translateY(0) !important;
}

#signUpSubmitBtn .actionLeading,
#signUpSubmitBtn .actionTrailing{
  display:grid !important;
  place-items:center !important;
}

#signUpSubmitBtn .actionLeading{
  justify-self:start !important;

  color:#ffffff !important;

  font-size:18px !important;
  line-height:1 !important;
}

#signUpSubmitBtn .actionLeading i,
#signUpSubmitBtn .actionLeading .svg-inline--fa{
  color:currentColor !important;
  font-size:inherit !important;
  line-height:1 !important;
}

#signUpSubmitBtn .loginIndexActionLabel{
  min-width:0 !important;

  display:block !important;

  color:#ffffff !important;

  text-align:center !important;

  font-size:inherit !important;
  line-height:1 !important;
  font-weight:700 !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#signUpSubmitBtn .actionTrailing{
  width:29px !important;
  min-width:29px !important;
  max-width:29px !important;

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

  justify-self:end !important;

  color:#ffffff !important;

  background:
    rgba(255,255,255,.08) !important;

  border:
    1px solid rgba(255,255,255,.52) !important;

  border-radius:50% !important;

  font-size:10px !important;
  line-height:1 !important;
}

#signUpSubmitBtn .actionTrailing i,
#signUpSubmitBtn .actionTrailing .svg-inline--fa{
  color:currentColor !important;
  font-size:inherit !important;
  line-height:1 !important;
}

#signUpSubmitBtn:disabled{
  cursor:not-allowed !important;
  transform:none !important;
}


/* =========================================================
   GOOGLE - LOCK STYLE INDEX PADA TAB DAFTAR
   =========================================================
   Elemen Google yang sama dipakai oleh tab Masuk dan Daftar.
   Rule ini tidak mengubah posisi atau spacing .authContent.
   ========================================================= */
#googleLoginBtn.loginIndexGoogleAction{
  width:100% !important;

  padding:0 12px !important;

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

  gap:6px !important;

  color:#294052 !important;

  background:
    rgba(255,255,255,.94) !important;

  border:
    1px solid rgba(65,117,130,.16) !important;

  border-radius:999px !important;

  box-shadow:
    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) !important;

  text-align:center !important;
}

#googleLoginBtn .googleIconWrap{
  justify-self:start !important;
}

#googleLoginBtn .loginIndexGoogleLabel{
  min-width:0 !important;
  width:100% !important;

  display:block !important;

  text-align:center !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#googleLoginBtn .googleTrailing{
  justify-self:end !important;
}


/* =========================================================
   TERMS / CHECKBOX - RATA KIRI & RAPAT
   ========================================================= */
.termsWrap{
  width:100% !important;

  display:grid !important;
  grid-template-columns:
    18px minmax(0,1fr) !important;

  align-items:start !important;
  justify-content:stretch !important;

  column-gap:9px !important;

  text-align:left !important;
}

.termsWrap > input{
  width:16px !important;
  height:16px !important;

  margin:2px 0 0 0 !important;

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

.termsWrap > span[data-auth-i18n="termsText"]{
  min-width:0 !important;

  display:block !important;

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

  color:var(--muted) !important;

  text-align:left !important;

  line-height:1.45 !important;

  justify-self:stretch !important;
  align-self:start !important;
}

html[data-theme="dark"]
.termsWrap > span[data-auth-i18n="termsText"]{
  color:var(--muted) !important;
}


/* =========================================================
   HP <=620PX - PROPORSI INDEX
   ========================================================= */
@media (max-width:620px){

  #signUpSubmitBtn.loginIndexPrimaryAction,
  #googleLoginBtn.loginIndexGoogleAction{
    min-height:48px !important;

    padding-left:12px !important;
    padding-right:12px !important;

    grid-template-columns:
      32px minmax(0,1fr) 32px !important;

    gap:6px !important;

    font-size:14px !important;
  }

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

  #signUpSubmitBtn .actionTrailing,
  #googleLoginBtn .googleTrailing{
    width:29px !important;
    min-width:29px !important;
    max-width:29px !important;

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

    font-size:10px !important;
  }

  #googleLoginBtn .googleIconWrap{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;

    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
  }

  #googleLoginBtn .googleIcon,
  #googleLoginBtn .googleSvg{
    width:18px !important;
    height:18px !important;
  }

  .termsWrap{
    grid-template-columns:
      17px minmax(0,1fr) !important;

    column-gap:8px !important;
  }

  .termsWrap > input{
    width:15px !important;
    height:15px !important;
  }

  .termsWrap > span[data-auth-i18n="termsText"]{
    font-size:12.5px !important;
    line-height:1.42 !important;
  }
}


/* =========================================================
   HP <=420PX
   ========================================================= */
@media (max-width:420px){

  #signUpSubmitBtn.loginIndexPrimaryAction,
  #googleLoginBtn.loginIndexGoogleAction{
    min-height:46px !important;

    padding-left:10px !important;
    padding-right:10px !important;

    grid-template-columns:
      30px minmax(0,1fr) 30px !important;

    gap:5px !important;

    font-size:13px !important;
  }

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

  #signUpSubmitBtn .actionTrailing,
  #googleLoginBtn .googleTrailing{
    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;

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

    font-size:9px !important;
  }

  #googleLoginBtn .googleIconWrap{
    width:26px !important;
    min-width:26px !important;
    max-width:26px !important;

    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
  }

  #googleLoginBtn .googleIcon,
  #googleLoginBtn .googleSvg{
    width:17px !important;
    height:17px !important;
  }

  .termsWrap{
    grid-template-columns:
      16px minmax(0,1fr) !important;

    column-gap:7px !important;
  }

  .termsWrap > input{
    width:14px !important;
    height:14px !important;
  }

  .termsWrap > span[data-auth-i18n="termsText"]{
    font-size:12px !important;
    line-height:1.4 !important;
  }
}

/* =========================================================
   FINAL V6 - BUMIL KU LOGIN COLOR PARITY WITH INDEX
   =========================================================
   ACUAN LANDING PAGE INDEX FINAL:
   - Primary RSAB        : #0F9F8D
   - Secondary RSAB      : #0E9382
   - URL bar light       : #087F78
   - URL bar dark        : #07776F
   - Primary CTA index   : #0F9F8D -> #0E9382

   PENTING:
   - HANYA warna, border-color, focus color, dan shadow-color.
   - Tidak mengubah ukuran, spacing, grid, posisi, radius,
     navbar layout, sidebar layout, footer layout, atau auth flow.
   ========================================================= */

:root{
  --rsab-primary:#0f9f8d;
  --rsab-secondary:#0e9382;
  --rsab-urlbar-light:#087f78;
  --rsab-urlbar-dark:#07776f;

  --blue:var(--rsab-primary) !important;
  --blue2:var(--rsab-secondary) !important;

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

  --primaryGrad:
    linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 56%,
      #0e9382 100%
    ) !important;

  --primaryShadow:
    0 16px 28px rgba(15,159,141,.24),
    0 6px 12px rgba(14,147,130,.12),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
}

/* =========================================================
   SHARED TEAL ACCENTS
   ========================================================= */
.inputShell i,
.textLink,
.textLinkBtn,
.authLegalInline a,
.passwordToggleBtn:hover,
.passwordToggleBtn.is-visible,
.loginMobileSearchAction,
.mobileSidebarClose,
.footerRight a{
  color:#0f9f8d !important;
}

.loginMobileSearchAction:hover,
.footerRight a:hover{
  color:#0e9382 !important;
}

.checkWrap input{
  accent-color:#0f9f8d !important;
}

.inputShell:focus-within{
  border-color:rgba(15,159,141,.42) !important;
  box-shadow:
    0 0 0 4px rgba(15,159,141,.12),
    var(--neu-in-sm) !important;
}

.btn:focus-visible,
.loginBtn:focus-visible,
.burger:focus-visible,
.drawerClose:focus-visible,
.switch:focus-visible,
.searchBtn:focus-visible,
.primaryAuthBtn:focus-visible,
.googleBtn:focus-visible,
.textLinkBtn:focus-visible,
.passwordToggleBtn:focus-visible,
.inputShell input:focus-visible,
.navBtn:focus-visible,
.navLinkBtn:focus-visible,
.loginMobileMenuButton:focus-visible,
.loginMobileSearchAction:focus-visible{
  outline-color:rgba(15,159,141,.32) !important;
}

/* =========================================================
   ACTIVE TAB - EXACT INDEX PRIMARY COLOR
   ========================================================= */
#tabSignIn:checked ~ .authTabSwitch label[for="tabSignIn"],
#tabSignUp:checked ~ .authTabSwitch label[for="tabSignUp"]{
  background:
    linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 56%,
      #0e9382 100%
    ) !important;

  color:#ffffff !important;

  box-shadow:
    0 8px 16px rgba(15,159,141,.22),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* =========================================================
   MASUK + BUAT AKUN - EXACT INDEX PRIMARY ACTION COLOR
   ========================================================= */
#signInSubmitBtn.loginIndexPrimaryAction,
#signUpSubmitBtn.loginIndexPrimaryAction{
  background:
    linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 56%,
      #0e9382 100%
    ) !important;

  border-color:
    rgba(255,255,255,.16) !important;

  box-shadow:
    0 16px 28px rgba(15,159,141,.24),
    0 6px 12px rgba(14,147,130,.12),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
}

#signInSubmitBtn.loginIndexPrimaryAction:hover,
#signUpSubmitBtn.loginIndexPrimaryAction:hover{
  background:
    linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 48%,
      #0e9382 100%
    ) !important;

  border-color:
    rgba(255,255,255,.20) !important;

  box-shadow:
    0 18px 32px rgba(15,159,141,.27),
    0 8px 15px rgba(14,147,130,.15),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
}

#signInSubmitBtn.loginIndexPrimaryAction:active,
#signUpSubmitBtn.loginIndexPrimaryAction:active{
  background:
    linear-gradient(
      135deg,
      #0e9382 0%,
      #0e9382 100%
    ) !important;
}

/* Desktop/tablet generic CTA juga mengikuti index. */
.loginBtn,
.primaryAuthBtn{
  background:
    linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 56%,
      #0e9382 100%
    ) !important;
}

/* =========================================================
   GOOGLE ACTION - INDEX COLOR PARITY
   ========================================================= */
#googleLoginBtn.loginIndexGoogleAction{
  color:#294052 !important;

  background:
    rgba(255,255,255,.94) !important;

  border-color:
    rgba(65,117,130,.16) !important;

  box-shadow:
    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) !important;
}

#googleLoginBtn.loginIndexGoogleAction:hover{
  color:#294052 !important;

  background:#ffffff !important;

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

  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) !important;
}

#googleLoginBtn .googleTrailing{
  color:#426577 !important;

  border-color:
    rgba(61,111,124,.22) !important;
}

/* =========================================================
   NAVBAR MOBILE COLOR PARITY
   ========================================================= */
.loginMobileSearchAction,
.loginMobileMenuButton{
  color:#0f9f8d !important;
}

.loginMobileSearchAction:hover,
.loginMobileMenuButton:hover{
  color:#0e9382 !important;
}

.loginMobileSearchAction:focus-visible,
.loginMobileMenuButton:focus-visible{
  outline-color:
    rgba(15,159,141,.30) !important;
}

/* =========================================================
   SIDEBAR COLOR PARITY
   ========================================================= */
.mobileSidebarClose{
  color:#0f9f8d !important;
}

.mobileSidebarNav a:hover{
  color:#0e9382 !important;
  border-color:rgba(15,159,141,.15) !important;
}

.mobileSidebarActions
.mobileSidebarPrimaryAction{
  background:
    linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 56%,
      #0e9382 100%
    ) !important;

  border-color:
    rgba(255,255,255,.16) !important;

  box-shadow:
    0 12px 24px rgba(15,159,141,.22),
    0 4px 10px rgba(14,147,130,.12),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.mobileSidebarActions
.mobileSidebarGoogleAction{
  color:#294052 !important;

  border-color:
    rgba(65,117,130,.16) !important;
}

/* =========================================================
   FOOTER COLOR PARITY
   ========================================================= */
footer.siteFooter .footerRight,
footer.siteFooter .footerRight a{
  color:#0e9382 !important;
}

footer.siteFooter .footerRight a:hover{
  color:#0f9f8d !important;
}

.loginFooterSecurityIcon--shield{
  background:
    linear-gradient(
      145deg,
      #0f9f8d,
      #0e9382
    ) !important;

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

  box-shadow:
    0 10px 20px rgba(15,159,141,.20),
    inset 0 1px rgba(255,255,255,.28) !important;
}

/* =========================================================
   DARK MODE - INDEX ACCENT PARITY
   ========================================================= */
html[data-theme="dark"] .inputShell i,
html[data-theme="dark"] .textLink,
html[data-theme="dark"] .textLinkBtn,
html[data-theme="dark"] .authLegalInline a,
html[data-theme="dark"] .passwordToggleBtn:hover,
html[data-theme="dark"] .passwordToggleBtn.is-visible,
html[data-theme="dark"] .loginMobileSearchAction,
html[data-theme="dark"] .loginMobileMenuButton,
html[data-theme="dark"] .mobileSidebarClose,
html[data-theme="dark"] footer.siteFooter .footerRight,
html[data-theme="dark"] footer.siteFooter .footerRight a{
  color:#0f9f8d !important;
}

html[data-theme="dark"]
#googleLoginBtn.loginIndexGoogleAction{
  color:var(--ink) !important;

  background:
    rgba(16,43,48,.94) !important;

  border-color:
    rgba(255,255,255,.09) !important;
}

html[data-theme="dark"]
#googleLoginBtn.loginIndexGoogleAction:hover{
  background:
    rgba(20,52,58,.98) !important;

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

html[data-theme="dark"]
#googleLoginBtn .googleTrailing{
  color:#bdd4d8 !important;

  border-color:
    rgba(255,255,255,.14) !important;

  background:
    rgba(255,255,255,.04) !important;
}

/* =========================================================
   FINAL V7 - LOGIN DESKTOP / LAPTOP MATCH INDEX
   =========================================================
   TUJUAN:
   - Laptop >=980px mengikuti bahasa visual landing page index.
   - Navbar: Bumil Ku + Peningkatan Mutu/RSAB + search +
     bahasa/tema + menu + Masuk.
   - Main: dua kolom seperti index; kiri identitas/intro,
     kanan panel autentikasi.
   - Footer desktop dibuat compact seperti index.
   - HP <=620px mempertahankan baseline yang sudah final.
   - Auth ID / form / Firebase / redirect tidak diubah.
   ========================================================= */

/* =========================================================
   SHARED DESKTOP BRAND COMPONENTS
   ========================================================= */
.loginDesktopInstitution,
.loginDesktopArticleSearch,
.loginDesktopIntro,
.desktopLoginAction{
  display:none;
}

.loginDesktopBrand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

.loginDesktopBrandLogoShadow{
  position:relative;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  overflow:visible;
  filter:
    drop-shadow(0 2px 3px rgba(17,72,79,.14))
    drop-shadow(0 7px 11px rgba(16,70,80,.12))
    drop-shadow(0 12px 19px rgba(14,147,130,.09));
}

.loginDesktopBrandLogoWrap{
  width:42px;
  min-width:42px;
  height:42px;
  display:grid;
  place-items:center;
  overflow:hidden;

  -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");
  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");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

.loginDesktopBrandLogo{
  width:90%;
  height:90%;
  display:block;
  object-fit:contain;
  transform:translate3d(-.3%,1.2%,0);
}

.loginDesktopBrandCopy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.04;
}

.loginDesktopBrandCopy strong{
  color:transparent;
  background:linear-gradient(
    90deg,
    #0e9382 0%,
    #0f9f8d 26%,
    #79c875 70%,
    #c4d63c 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  font-size:19px;
  font-weight:800;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.loginDesktopBrandCopy small{
  margin-top:3px;
  color:#65788a;
  font-size:8px;
  font-weight:600;
  white-space:nowrap;
}

/* =========================================================
   LAPTOP / DESKTOP >=980PX
   ========================================================= */
@media (min-width:980px){

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

  body{
    min-height:100svh !important;
    color:#17384c !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{
    color:#eafcff !important;
    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;
  }

  .overlay{
    display:block !important;
    opacity:.72 !important;
    background:
      radial-gradient(circle at 6% 12%, rgba(15,159,141,.08), transparent 24%),
      radial-gradient(circle at 94% 20%, rgba(15,159,141,.055), transparent 23%),
      radial-gradient(circle at 70% 92%, rgba(15,159,141,.045), transparent 28%) !important;
  }

  /* =======================================================
     NAVBAR - MATCH INDEX LAPTOP
     ======================================================= */
  .navwrap{
    position:sticky !important;
    top:0 !important;
    z-index:70 !important;

    width:100% !important;

    padding:0 !important;

    pointer-events:auto !important;
  }

  .navwrap header{
    width:100% !important;
    max-width:none !important;

    min-height:88px !important;
    height:88px !important;

    margin:0 !important;

    padding:
      13px
      clamp(34px,5vw,88px) !important;

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

    gap:14px !important;

    background:#ffffff !important;
    background-image:none !important;

    border:0 !important;
    border-bottom:
      1px solid rgba(58,105,119,.10) !important;

    border-radius:0 !important;

    box-shadow:
      0 10px 30px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.96) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    overflow:visible !important;
  }

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

    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;
  }

  .loginMobileBrand,
  .loginMobileInstitution,
  .loginMobileHeaderActions{
    display:none !important;
  }

  .desktopLoginBrand{
    order:1 !important;
    flex:0 0 auto !important;
  }

  .loginDesktopBrand{
    gap:10px !important;
  }

  .loginDesktopBrandLogoWrap{
    width:52px !important;
    min-width:52px !important;
    height:52px !important;
  }

  .loginDesktopBrandCopy strong{
    font-size:25px !important;
  }

  .loginDesktopBrandCopy small{
    margin-top:4px !important;
    font-size:10px !important;
  }

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

  .loginDesktopInstitution{
    order:2 !important;

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

    gap:14px !important;

    flex:0 0 auto !important;

    min-width:0 !important;
  }

  .loginDesktopInstitutionDivider{
    width:1px !important;
    min-width:1px !important;
    height:40px !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;
  }

  .loginDesktopInstitutionIdentity{
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;

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

    gap:4px !important;
  }

  .loginDesktopInstitutionIdentity small{
    color:#65788a !important;

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

    white-space:nowrap !important;
  }

  .loginDesktopInstitutionIdentity img{
    display:block !important;

    width:auto !important;
    height:27px !important;
    max-width:148px !important;

    object-fit:contain !important;
    object-position:left center !important;
  }

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

  html[data-theme="dark"]
  .loginDesktopInstitutionIdentity img{
    box-sizing:content-box !important;

    padding:4px 7px !important;

    background:#ffffff !important;

    border-radius:8px !important;

    box-shadow:
      0 6px 14px rgba(0,0,0,.18) !important;
  }

  .loginDesktopArticleSearch{
    order:3 !important;

    position:relative !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;
  }

  .loginDesktopArticleSearch:focus-within{
    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;
  }

  .loginDesktopArticleSearchInput{
    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;

    font-size:10.5px !important;
    font-weight:500 !important;

    caret-color:#0f9f8d !important;

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

  .loginDesktopArticleSearchInput::placeholder{
    color:#82949f !important;
    opacity:.90 !important;
  }

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

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

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

    display:grid !important;
    place-items: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;

    cursor:pointer !important;
  }

  .loginDesktopArticleSearchButton:hover{
    color:#0e9382 !important;
    background:
      rgba(15,159,141,.045) !important;
  }

  html[data-theme="dark"]
  .loginDesktopArticleSearch{
    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"]
  .loginDesktopArticleSearchInput{
    color:#eafcff !important;
    caret-color:#53ebe8 !important;
  }

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

  html[data-theme="dark"]
  .loginDesktopArticleSearchButton{
    color:#53ebe8 !important;
    background:#102b30 !important;

    border-left-color:
      rgba(255,255,255,.08) !important;
  }

  /* Controls existing tetap digunakan; hanya dibuat compact. */
  .rightPack{
    order:4 !important;

    margin-left:auto !important;

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

    gap:7px !important;

    flex:0 0 auto !important;
  }

  .rightPack .switch{
    height:34px !important;

    padding:0 3px !important;

    background:#ffffff !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;
  }

  .rightPack .switchTrack{
    height:28px !important;
    min-width:72px !important;

    padding:0 8px !important;

    gap:7px !important;

    background:#f8fbfb !important;

    border:
      1px solid rgba(58,105,119,.08) !important;

    box-shadow:
      inset 2px 2px 5px rgba(16,70,80,.045),
      inset -2px -2px 5px rgba(255,255,255,.95) !important;
  }

  .rightPack .switch--theme .switchTrack{
    min-width:62px !important;
  }

  .rightPack .switchLabel{
    font-size:9px !important;
  }

  .rightPack .switchLabel i{
    font-size:10.5px !important;
  }

  .rightPack .switchThumb{
    top:50% !important;
    left:4px !important;

    height:20px !important;

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

    background:#ffffff !important;

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

  .rightPack .switch[data-on="1"] .switchThumb{
    left:calc(50% - 4px) !important;
  }

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

  html[data-theme="dark"] .rightPack .switchThumb{
    background:#183a40 !important;
    border-color:rgba(15,159,141,.14) !important;
  }

  .rightPack .desktopLegacyLoginButton{
    display:none !important;
  }

  #topNav{
    order:5 !important;

    position:relative !important;

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

    gap:4px !important;

    flex:0 0 auto !important;

    min-width:0 !important;

    margin:0 !important;
  }

  #topNav .navItem{
    display:flex !important;
    align-items:center !important;
  }

  #topNav .navLinkBtn{
    min-height:42px !important;

    padding:0 14px !important;

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

    color:#4d6b79 !important;
    background:transparent !important;

    border:0 !important;
    border-radius:13px !important;

    box-shadow:none !important;

    font-size:12px !important;
    font-weight:700 !important;

    text-decoration:none !important;
  }

  #topNav .navLinkBtn:hover{
    color:#0e9382 !important;

    background:
      rgba(15,159,141,.07) !important;

    transform:translateY(-1px) !important;
  }

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

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

    background:
      rgba(15,159,141,.08) !important;
  }

  .desktopLoginAction{
    order:6 !important;

    display:inline-flex !important;

    min-width:auto !important;
    width:auto !important;
    height:42px !important;

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

    color:#ffffff !important;

    background:
      linear-gradient(
        135deg,
        #0f9f8d 0%,
        #0f9f8d 48%,
        #0e9382 100%
      ) !important;

    border:
      1px solid rgba(14,147,130,.14) !important;

    border-radius:13px !important;

    box-shadow:
      0 10px 22px rgba(15,159,141,.20),
      inset 0 1px 0 rgba(255,255,255,.28) !important;

    text-transform:none !important;
    letter-spacing:0 !important;

    font-size:12px !important;
    font-weight:700 !important;
  }

  .desktopLoginAction:hover{
    color:#ffffff !important;

    transform:translateY(-1px) !important;
  }

  /* =======================================================
     MAIN - DUA KOLOM SEPERTI INDEX
     ======================================================= */
  main{
    flex:1 !important;

    width:100% !important;
    min-height:
      calc(100svh - 148px) !important;

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

    display:block !important;
  }

  .hero.heroSplit.loginHero{
    width:100% !important;
    max-width:none !important;
    min-height:
      calc(100svh - 148px) !important;

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

    display:grid !important;
    grid-template-columns:
      minmax(430px,46%)
      minmax(0,54%) !important;

    align-items:stretch !important;
    justify-items:stretch !important;

    gap:0 !important;

    text-align:left !important;
  }

  .loginDesktopIntro{
    grid-column:1 !important;

    position:relative !important;

    min-width:0 !important;

    padding:
      clamp(58px,7vh,90px)
      clamp(48px,5.2vw,96px)
      clamp(50px,6vh,78px) !important;

    display:flex !important;
    flex-direction:column !important;

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

    text-align:left !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;

    box-shadow:
      18px 0 30px -24px rgba(16,70,80,.30),
      8px 0 18px -18px rgba(15,159,141,.15) !important;

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

  .loginDesktopIntro::before{
    content:"" !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;

    pointer-events:none !important;
  }

  html[data-theme="dark"]
  .loginDesktopIntro{
    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;

    box-shadow:
      18px 0 32px -24px rgba(0,0,0,.38),
      8px 0 18px -18px rgba(15,159,141,.10) !important;
  }

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

  .loginDesktopHeroBrand{
    display:flex !important;
    align-items:center !important;

    gap:15px !important;
  }

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

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

  .loginDesktopHeroBrandCopy{
    display:flex !important;
    flex-direction:column !important;

    align-items:flex-start !important;
  }

  .loginDesktopHeroBrandCopy strong{
    color:transparent !important;

    background:
      linear-gradient(
        90deg,
        #0e9382 0%,
        #0f9f8d 28%,
        #79c875 70%,
        #c4d63c 100%
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;

    font-size:44px !important;
    line-height:.98 !important;
    font-weight:700 !important;
    letter-spacing:-.05em !important;
  }

  .loginDesktopHeroBrandCopy small{
    margin-top:7px !important;

    color:#65788a !important;

    font-size:13px !important;
    font-weight:600 !important;
  }

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

  .loginDesktopHeadline{
    width:100% !important;
    max-width:570px !important;

    margin:30px 0 0 !important;

    color:#17384c !important;

    font-size:
      clamp(42px,4.2vw,64px) !important;

    line-height:1.035 !important;
    letter-spacing:-.04em !important;
    font-weight:700 !important;
  }

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

  .loginDesktopDescription{
    max-width:560px !important;

    margin:20px 0 0 !important;

    color:#65788a !important;

    font-size:15px !important;
    line-height:1.72 !important;
    font-weight:500 !important;
  }

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

  .loginDesktopAssurance{
    margin-top:19px !important;
    padding:9px 12px !important;

    display:inline-flex !important;
    align-items:center !important;

    gap:8px !important;

    color:#65788a !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;
    font-weight:600 !important;
  }

  .loginDesktopAssuranceIcon{
    color:#0f9f8d !important;

    font-size:12px !important;
  }

  .loginDesktopQuality{
    margin-top:14px !important;

    display:flex !important;
    flex-direction:column !important;

    gap:4px !important;
  }

  .loginDesktopQuality strong{
    color:#0e9382 !important;

    font-size:12.2px !important;
    line-height:1.1 !important;
    font-weight:750 !important;
  }

  .loginDesktopQuality small{
    color:#607782 !important;

    font-size:10.2px !important;
    line-height:1.12 !important;
    font-weight:600 !important;
  }

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

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

  /* =======================================================
     FORM PANEL - ANALOG DENGAN VISUAL CARD INDEX
     ======================================================= */
  .loginDesktopFormPanel{
    grid-column:2 !important;

    width:auto !important;
    max-width:none !important;

    min-height:100% !important;

    margin:
      clamp(24px,3.1vh,34px)
      clamp(34px,4.6vw,84px)
      clamp(24px,3.1vh,34px)
      calc(clamp(18px,1.6vw,26px) + 7px) !important;

    padding:
      clamp(28px,4vh,48px) !important;

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

    border:
      1px solid rgba(42,103,112,.13) !important;

    border-radius:28px !important;

    background:
      radial-gradient(circle at 96% 12%, rgba(15,159,141,.10), transparent 26%),
      radial-gradient(circle at 12% 88%, rgba(15,159,141,.06), transparent 28%),
      linear-gradient(
        145deg,
        rgba(249,254,253,.98),
        rgba(238,249,248,.98)
      ) !important;

    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) !important;

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

  html[data-theme="dark"]
  .loginDesktopFormPanel{
    background:
      radial-gradient(circle at 96% 12%, rgba(15,159,141,.055), transparent 26%),
      radial-gradient(circle at 12% 88%, rgba(15,159,141,.025), transparent 28%),
      linear-gradient(
        145deg,
        rgba(12,38,43,.99),
        rgba(9,30,34,.99)
      ) !important;

    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) !important;
  }

  .loginDesktopFormPanel .loginCard{
    width:min(520px,100%) !important;
    max-width:520px !important;

    margin:0 auto !important;

    padding:26px 26px 24px !important;

    border:
      1px solid rgba(58,105,119,.11) !important;

    border-radius:26px !important;

    background:
      rgba(255,255,255,.975) !important;

    box-shadow:
      0 20px 46px rgba(16,70,80,.10),
      0 5px 14px rgba(16,70,80,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html[data-theme="dark"]
  .loginDesktopFormPanel .loginCard{
    background:
      rgba(16,43,48,.97) !important;

    border-color:
      rgba(255,255,255,.08) !important;

    box-shadow:
      0 22px 52px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .loginDesktopFormPanel .loginCardTop{
    min-height:82px !important;

    margin-bottom:16px !important;

    gap:14px !important;
  }

  .loginDesktopFormPanel
  .loginHeroBrandLogoWrap{
    width:68px !important;
    min-width:68px !important;
    height:68px !important;
    min-height:68px !important;
  }

  .loginDesktopFormPanel
  .loginPanelTitle{
    color:#17384c !important;

    font-size:25px !important;
    line-height:1.12 !important;
  }

  html[data-theme="dark"]
  .loginDesktopFormPanel
  .loginPanelTitle{
    color:#eafcff !important;
  }

  .loginDesktopFormPanel
  .loginPanelSub{
    color:#65788a !important;

    font-size:12.5px !important;
    line-height:1.50 !important;
  }

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

  .loginDesktopFormPanel .authTabSwitch{
    margin-bottom:14px !important;
  }

  .loginDesktopFormPanel .authForm{
    gap:8px !important;
  }

  .loginDesktopFormPanel .inputShell{
    min-height:50px !important;

    border-radius:15px !important;

    background:#ffffff !important;

    border:
      1px solid rgba(58,105,119,.13) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 5px 14px rgba(16,70,80,.035) !important;
  }

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

    border-color:
      rgba(255,255,255,.08) !important;
  }

  .loginDesktopFormPanel
  .primaryAuthBtn,
  .loginDesktopFormPanel
  #googleLoginBtn{
    min-height:50px !important;
  }

  .loginDesktopFormPanel
  .authDivider{
    margin:
      14px 0 12px !important;

    font-size:10.5px !important;
  }

  /* =======================================================
     FOOTER - COMPACT SEPERTI INDEX
     ======================================================= */
  footer.siteFooter{
    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:block !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),
        rgba(245,251,251,.995)
      ) !important;

    border:0 !important;

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

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html[data-theme="dark"]
  footer.siteFooter{
    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),
        rgba(10,31,35,.995)
      ) !important;

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

  footer.siteFooter
  .loginFooterSecurityIcon{
    display:none !important;
  }

  footer.siteFooter .footerInner{
    width:100% !important;
    max-width:none !important;
    height:100% !important;

    margin:0 !important;

    display:grid !important;
    grid-template-columns:
      minmax(0,1fr)
      auto !important;

    align-items:center !important;

    gap:28px !important;
  }

  footer.siteFooter .footerLeft{
    grid-column:1 !important;

    display:block !important;

    text-align:left !important;
  }

  footer.siteFooter
  .footerPublicDesc{
    display:none !important;
  }

  footer.siteFooter
  .footerCopyrightLine{
    margin:0 !important;

    color:#7d909a !important;

    font-size:9px !important;
    line-height:1.2 !important;
    font-weight:500 !important;

    text-align:left !important;

    white-space:nowrap !important;
  }

  footer.siteFooter .footerRight{
    grid-column:2 !important;

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

    gap:12px !important;

    margin:0 !important;

    color:#0e9382 !important;

    white-space:nowrap !important;
  }

  footer.siteFooter .footerRight a{
    color:#0e9382 !important;

    font-size:10.2px !important;
    font-weight:700 !important;

    text-decoration:none !important;
  }

  footer.siteFooter .footerRight a:hover{
    color:#0f9f8d !important;
  }

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

  html[data-theme="dark"]
  footer.siteFooter
  .footerRight,
  html[data-theme="dark"]
  footer.siteFooter
  .footerRight a{
    color:#73e6dd !important;
  }
}

/* =========================================================
   LAPTOP COMPACT 980 - 1150
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){

  .navwrap header{
    gap:9px !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .loginDesktopBrandLogoWrap{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
  }

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

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

  .loginDesktopInstitution{
    gap:10px !important;
  }

  .loginDesktopInstitutionDivider{
    height:34px !important;
  }

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

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

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

  .loginDesktopArticleSearchInput{
    padding-left:8px !important;
    padding-right:6px !important;

    font-size:8.7px !important;
  }

  .loginDesktopArticleSearchButton{
    width:30px !important;
    min-width:30px !important;

    font-size:11px !important;
  }

  .rightPack{
    gap:5px !important;
  }

  .rightPack .switch{
    height:30px !important;
  }

  .rightPack .switchTrack{
    height:24px !important;
    min-width:62px !important;
  }

  .rightPack .switch--theme .switchTrack{
    min-width:54px !important;
  }

  #topNav{
    gap:0 !important;
  }

  #topNav .navLinkBtn{
    min-height:36px !important;

    padding:
      0 7px !important;

    font-size:9.7px !important;
  }

  .desktopLoginAction{
    height:36px !important;

    padding-left:11px !important;
    padding-right:11px !important;

    font-size:10px !important;
  }

  .hero.heroSplit.loginHero{
    grid-template-columns:
      minmax(390px,44%)
      minmax(0,56%) !important;
  }

  .loginDesktopIntro{
    padding-left:44px !important;
    padding-right:38px !important;
  }

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

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

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

  .loginDesktopHeadline{
    margin-top:22px !important;

    font-size:
      clamp(36px,4vw,50px) !important;
  }

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

  .loginDesktopFormPanel{
    margin:
      20px
      28px
      20px
      24px !important;

    padding:24px !important;
  }

  .loginDesktopFormPanel .loginCard{
    max-width:470px !important;

    padding:22px 22px 20px !important;
  }
}

/* =========================================================
   WIDE DESKTOP >=1280PX
   ========================================================= */
@media (min-width:1280px){

  .hero.heroSplit.loginHero{
    grid-template-columns:
      minmax(460px,44%)
      minmax(0,56%) !important;
  }

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

  .loginDesktopFormPanel .loginCard{
    max-width:540px !important;
  }
}

/* =========================================================
   COMPACT HEIGHT
   ========================================================= */
@media (min-width:980px) and (max-height:820px){

  .navwrap header{
    min-height:78px !important;
    height:78px !important;

    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  main,
  .hero.heroSplit.loginHero{
    min-height:
      calc(100svh - 136px) !important;
  }

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

  .loginDesktopHeadline{
    margin-top:19px !important;

    font-size:
      clamp(36px,3.6vw,50px) !important;
  }

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

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

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

  footer.siteFooter{
    min-height:58px !important;
    height:58px !important;
  }
}


/* =========================================================
   FINAL V8 - DESKTOP FORM WRAPPER PROPORSIONAL
   =========================================================
   Tujuan:
   - Card pembungkus panel login desktop tidak lagi terlalu tinggi.
   - Ruang kosong bawah dipangkas agar tidak terasa menembus footer.
   - Tidak mengubah flow auth maupun baseline HP.
   ========================================================= */
@media (min-width:980px){

  .loginDesktopFormPanel{
    min-height:auto !important;
    height:auto !important;
    align-self:center !important;

    margin-top:clamp(18px,2.4vh,28px) !important;
    margin-bottom:clamp(18px,2.4vh,28px) !important;

    padding:clamp(20px,2.8vh,30px) !important;

    overflow:visible !important;
  }
}

@media (min-width:980px) and (max-width:1150px){

  .loginDesktopFormPanel{
    margin-top:18px !important;
    margin-bottom:18px !important;
    padding:20px !important;
  }
}

@media (min-width:1280px){

  .loginDesktopFormPanel{
    margin-top:clamp(20px,2.4vh,30px) !important;
    margin-bottom:clamp(20px,2.4vh,30px) !important;
    padding:clamp(22px,2.8vh,34px) !important;
  }
}

@media (min-width:980px) and (max-height:820px){

  .loginDesktopFormPanel{
    margin-top:16px !important;
    margin-bottom:16px !important;
    padding:18px !important;
  }
}


/* =========================================================
   FINAL V9 - LOGIN DESKTOP NAVBAR + FOOTER MATCH INDEX
   =========================================================
   RUANG LINGKUP:
   - HANYA laptop / desktop >=980px.
   - Navbar atas mengikuti susunan dan karakter visual index.
   - Footer desktop memakai footer resmi multi-kolom index.
   - .siteFooter existing tetap dipakai <=979px.
   - Tidak mengubah ID autentikasi, form, Firebase, redirect,
     validation, drawer HP, atau JavaScript.
   ========================================================= */

.loginDesktopOfficialFooter{
  display:none;
}

@media (min-width:980px){

  /* =======================================================
     NAVBAR - STRUKTUR VISUAL SAMA DENGAN INDEX
     Urutan:
     Brand -> Institution -> Search -> Nav -> Utilities -> Masuk
     ======================================================= */
  .navwrap{
    position:sticky !important;
    top:0 !important;
    z-index:120 !important;
    width:100% !important;
    padding:0 !important;
    pointer-events:auto !important;
  }

  .navwrap > header{
    width:100% !important;
    max-width:none !important;
    min-height:88px !important;
    height:88px !important;
    margin:0 !important;
    padding:13px clamp(34px,5vw,88px) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;

    background:#ffffff !important;
    background-image:none !important;
    border:0 !important;
    border-bottom:1px solid rgba(58,105,119,.10) !important;
    border-radius:0 !important;

    box-shadow:
      0 10px 30px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.96) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible !important;
  }

  html[data-theme="dark"] .navwrap > header{
    background:#102b30 !important;
    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;
  }

  /* Brand = index brandLockup */
  .desktopLoginBrand{
    order:1 !important;
    flex:0 0 auto !important;
  }

  .loginDesktopBrand{
    min-width:0 !important;
    gap:10px !important;
  }

  .loginDesktopBrandLogoShadow{
    width:52px !important;
    min-width:52px !important;
    height:52px !important;
    display:grid !important;
    place-items:center !important;
    overflow:visible !important;
    filter:
      drop-shadow(0 2px 3px rgba(17,72,79,.14))
      drop-shadow(0 7px 11px rgba(16,70,80,.12))
      drop-shadow(0 12px 19px rgba(14,147,130,.09)) !important;
  }

  .loginDesktopBrandLogoWrap{
    width:52px !important;
    min-width:52px !important;
    height:52px !important;
  }

  .loginDesktopBrandLogo{
    width:94% !important;
    height:94% !important;
  }

  .loginDesktopBrandCopy strong{
    font-size:24px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:-.04em !important;
  }

  .loginDesktopBrandCopy small{
    margin-top:5px !important;
    color:#65788a !important;
    font-size:9.5px !important;
    line-height:1 !important;
    font-weight:600 !important;
  }

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

  /* Institution = index desktopInstitutionLockup */
  .loginDesktopInstitution{
    order:2 !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    flex:0 0 auto !important;
  }

  .loginDesktopInstitutionDivider{
    width:1px !important;
    min-width:1px !important;
    height:38px !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;
  }

  .loginDesktopInstitutionIdentity{
    gap:3px !important;
  }

  .loginDesktopInstitutionIdentity small{
    color:#65788a !important;
    font-size:8.2px !important;
    line-height:1.05 !important;
    font-weight:600 !important;
    letter-spacing:.02em !important;
  }

  .loginDesktopInstitutionIdentity img{
    height:24px !important;
    max-width:132px !important;
  }

  /* Search = index desktopArticleSearch */
  .loginDesktopArticleSearch{
    order:3 !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;
  }

  .loginDesktopArticleSearch:focus-within{
    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;
  }

  .loginDesktopArticleSearchInput{
    padding:0 11px !important;
    color:#294052 !important;
    font-size:10.5px !important;
    caret-color:#0f9f8d !important;
  }

  .loginDesktopArticleSearchInput::placeholder{
    color:#82949f !important;
    opacity:.90 !important;
  }

  .loginDesktopArticleSearchButton{
    width:36px !important;
    min-width:36px !important;
    height:100% !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;
  }

  .loginDesktopArticleSearchButton:hover{
    color:#0e9382 !important;
    background:rgba(15,159,141,.045) !important;
  }

  html[data-theme="dark"] .loginDesktopArticleSearch{
    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"] .loginDesktopArticleSearchInput{
    color:#eafcff !important;
    caret-color:#53ebe8 !important;
  }

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

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

  /* Menu tepat setelah search, seperti index */
  #topNav{
    order:4 !important;
    position:relative !important;

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

    gap:0 !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    margin:0 !important;
  }

  #topNav .navItem{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    min-height:48px !important;
  }

  #topNav .navItem:not(:last-child)::after{
    content:"" !important;
    position:absolute !important;
    right:0 !important;
    top:50% !important;
    width:1px !important;
    height:18px !important;
    transform:translateY(-50%) !important;
    background:rgba(58,105,119,.10) !important;
    pointer-events:none !important;
  }

  #topNav .navLinkBtn{
    position:relative !important;
    min-height:44px !important;
    padding:0 14px !important;

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

    color:#365d6c !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    font-size:11.2px !important;
    font-weight:700 !important;
    text-decoration:none !important;

    transform:none !important;
  }

  #topNav .navLinkBtn::after{
    content:"" !important;
    position:absolute !important;
    left:14px !important;
    right:14px !important;
    bottom:4px !important;
    height:2px !important;
    border-radius:999px !important;
    opacity:.38 !important;
    transition:
      opacity .18s ease,
      transform .18s ease !important;
  }

  #topNav .navItem:nth-child(1) .navLinkBtn::after{
    background:linear-gradient(90deg,#0e9382,#0f9f8d) !important;
  }

  #topNav .navItem:nth-child(2) .navLinkBtn::after{
    background:linear-gradient(90deg,#0f9f8d,#37b89d) !important;
  }

  #topNav .navItem:nth-child(3) .navLinkBtn::after{
    background:linear-gradient(90deg,#37b89d,#79c97b) !important;
  }

  #topNav .navItem:nth-child(4) .navLinkBtn::after{
    background:linear-gradient(90deg,#79c97b,#c4d63c) !important;
  }

  #topNav .navLinkBtn:hover{
    color:#0e9382 !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
    transform:none !important;
  }

  #topNav .navLinkBtn:hover::after{
    opacity:1 !important;
    transform:translateY(-1px) !important;
  }

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

  html[data-theme="dark"] #topNav .navItem:not(:last-child)::after{
    background:rgba(255,255,255,.08) !important;
  }

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

  /* Utility masuk setelah menu seperti index */
  .rightPack{
    order:5 !important;
    margin-left:auto !important;

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

    gap:7px !important;
    flex:0 0 auto !important;
  }

  .rightPack #btnLang,
  .rightPack #btnTheme{
    height:36px !important;
    min-height:36px !important;
    padding:3px !important;

    color:#546f7b !important;
    background:#f8fbfb !important;

    border:1px solid rgba(58,105,119,.10) !important;
    border-radius:12px !important;

    box-shadow:
      inset 2px 2px 5px rgba(16,70,80,.045),
      inset -2px -2px 5px rgba(255,255,255,.95) !important;
  }

  .rightPack #btnLang .switchTrack,
  .rightPack #btnTheme .switchTrack{
    height:28px !important;
    padding:0 7px !important;
    gap:7px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .rightPack #btnLang .switchTrack{
    min-width:72px !important;
  }

  .rightPack #btnTheme .switchTrack{
    min-width:62px !important;
  }

  .rightPack .switchLabel{
    font-size:9px !important;
    font-weight:700 !important;
  }

  .rightPack .switchLabel i{
    font-size:10.5px !important;
  }

  .rightPack .switchThumb{
    top:50% !important;
    left:4px !important;
    height:22px !important;
    border:1px solid rgba(15,159,141,.12) !important;
    background:#ffffff !important;
    box-shadow:
      0 4px 8px rgba(16,70,80,.08),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .rightPack .switch[data-on="1"] .switchThumb{
    left:calc(50% - 4px) !important;
  }

  .rightPack .desktopLegacyLoginButton{
    display:none !important;
  }

  html[data-theme="dark"] .rightPack #btnLang,
  html[data-theme="dark"] .rightPack #btnTheme{
    color:#bdd5d9 !important;
    background:#102b30 !important;
    border-color:rgba(255,255,255,.08) !important;
    box-shadow:
      inset 2px 2px 5px rgba(0,0,0,.18),
      inset -2px -2px 5px rgba(255,255,255,.02) !important;
  }

  html[data-theme="dark"] .rightPack .switchThumb{
    background:#183a40 !important;
    border-color:rgba(15,159,141,.14) !important;
  }

  /* Masuk = index desktopNavLogin */
  .desktopLoginAction{
    order:6 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:auto !important;
    height:42px !important;

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

    color:#ffffff !important;
    background:
      linear-gradient(
        135deg,
        #0f9f8d 0%,
        #0f9f8d 48%,
        #0e9382 100%
      ) !important;

    border:1px solid rgba(14,147,130,.14) !important;
    border-radius:13px !important;

    box-shadow:
      0 10px 22px rgba(15,159,141,.20),
      inset 0 1px 0 rgba(255,255,255,.28) !important;

    text-transform:none !important;
    letter-spacing:0 !important;
    font-size:12px !important;
    font-weight:700 !important;
  }

  .desktopLoginAction:hover{
    color:#ffffff !important;
    transform:translateY(-1px) !important;
  }

  /* =======================================================
     FOOTER DESKTOP - OFFICIAL INDEX
     ======================================================= */
  footer.siteFooter{
    display:none !important;
  }

  .loginDesktopOfficialFooter{
    display:block !important;

    width:100% !important;
    padding:
      38px
      clamp(44px,5vw,88px)
      20px !important;

    background:
      radial-gradient(circle at 0% 100%,rgba(15,159,141,.07),transparent 30%),
      linear-gradient(180deg,#f7fbfb 0%,#eef7f7 100%) !important;

    border-top:1px solid rgba(58,105,119,.09) !important;
  }

  html[data-theme="dark"] .loginDesktopOfficialFooter{
    background:
      radial-gradient(circle at 0% 100%,rgba(15,159,141,.035),transparent 30%),
      linear-gradient(180deg,#102b30 0%,#07181c 100%) !important;
    border-top-color:rgba(255,255,255,.06) !important;
  }

  .loginDesktopOfficialFooterMain{
    width:min(1440px,100%) !important;
    margin:0 auto !important;

    display:grid !important;
    grid-template-columns:
      minmax(260px,1.45fr)
      repeat(4,minmax(130px,.78fr)) !important;

    gap:30px !important;
  }

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

  .loginDesktopOfficialFooterBrandLockup{
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
  }

  .loginDesktopOfficialFooterLogoShadow{
    width:48px !important;
    min-width:48px !important;
    height:48px !important;

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

    filter:
      drop-shadow(0 3px 4px rgba(17,72,79,.12))
      drop-shadow(0 8px 13px rgba(14,147,130,.09)) !important;
  }

  .loginDesktopOfficialFooterLogoShadow img{
    width:44px !important;
    height:44px !important;
    object-fit:contain !important;
  }

  .loginDesktopOfficialFooterBrandCopy{
    display:flex !important;
    flex-direction:column !important;
  }

  .loginDesktopOfficialFooterBrandCopy strong{
    color:transparent !important;
    background:
      linear-gradient(90deg,#0e9382,#0f9f8d 40%,#c4d63c 100%) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;

    font-size:21px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:-.035em !important;
  }

  .loginDesktopOfficialFooterBrandCopy small{
    margin-top:4px !important;
    color:#65788a !important;
    font-size:8px !important;
    font-weight:600 !important;
  }

  .loginDesktopOfficialFooterBrand > p{
    max-width:300px !important;
    margin:14px 0 0 !important;

    color:#65788a !important;
    font-size:9px !important;
    line-height:1.55 !important;
  }

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

  .loginDesktopOfficialFooterInstitution img{
    display:block !important;
    width:auto !important;
    height:30px !important;
    max-width:150px !important;
    object-fit:contain !important;
  }

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

  .loginDesktopOfficialFooterColumn > strong{
    margin-bottom:4px !important;
    color:#17384c !important;

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

  .loginDesktopOfficialFooterColumn a{
    width:fit-content !important;
    color:#65788a !important;

    font-size:8.8px !important;
    line-height:1.35 !important;
    font-weight:550 !important;

    text-decoration:none !important;
  }

  .loginDesktopOfficialFooterColumn a:hover{
    color:#0e9382 !important;
  }

  .loginDesktopOfficialFooterStatus{
    width:fit-content !important;
    min-height:28px !important;

    margin-top:4px !important;
    padding:0 9px !important;

    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;

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

    border:1px solid rgba(15,159,141,.11) !important;
    border-radius:999px !important;

    box-shadow:
      0 6px 14px rgba(16,70,80,.045) !important;

    font-size:7.8px !important;
    font-weight:700 !important;
  }

  .loginDesktopOfficialFooterBottom{
    width:min(1440px,100%) !important;

    margin:28px auto 0 !important;
    padding-top:15px !important;

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

    gap:20px !important;

    color:#7e909a !important;
    border-top:1px solid rgba(58,105,119,.09) !important;

    font-size:8.3px !important;
    line-height:1.25 !important;
    font-weight:550 !important;
  }

  .loginDesktopOfficialFooterSupport{
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    color:#607782 !important;
  }

  .loginDesktopOfficialFooterSupport i{
    color:#0e9382 !important;
  }

  html[data-theme="dark"] .loginDesktopOfficialFooterBrandCopy small,
  html[data-theme="dark"] .loginDesktopOfficialFooterBrand > p,
  html[data-theme="dark"] .loginDesktopOfficialFooterColumn a,
  html[data-theme="dark"] .loginDesktopOfficialFooterBottom,
  html[data-theme="dark"] .loginDesktopOfficialFooterSupport{
    color:#9db8bd !important;
  }

  html[data-theme="dark"] .loginDesktopOfficialFooterColumn > strong{
    color:#eafcff !important;
  }

  html[data-theme="dark"] .loginDesktopOfficialFooterStatus{
    color:#73e6dd !important;
    background:#102b30 !important;
    border-color:rgba(83,235,232,.10) !important;
  }

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

/* Compact laptop mengikuti skala navbar index tanpa menyentuh HP/tablet. */
@media (min-width:980px) and (max-width:1150px){
  .navwrap > header{
    gap:8px !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .loginDesktopBrandLogoShadow,
  .loginDesktopBrandLogoWrap{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
  }

  .loginDesktopBrandCopy strong{
    font-size:20px !important;
  }

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

  .loginDesktopInstitution{
    gap:8px !important;
  }

  .loginDesktopInstitutionDivider{
    height:32px !important;
  }

  .loginDesktopInstitutionIdentity small{
    font-size:7px !important;
  }

  .loginDesktopInstitutionIdentity img{
    height:21px !important;
    max-width:108px !important;
  }

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

  .loginDesktopArticleSearchInput{
    padding-left:8px !important;
    padding-right:5px !important;
    font-size:8.5px !important;
  }

  .loginDesktopArticleSearchButton{
    width:30px !important;
    min-width:30px !important;
  }

  #topNav .navLinkBtn{
    min-height:36px !important;
    padding:0 7px !important;
    font-size:9.4px !important;
  }

  #topNav .navLinkBtn::after{
    left:7px !important;
    right:7px !important;
    bottom:2px !important;
  }

  .rightPack{
    gap:4px !important;
  }

  .rightPack #btnLang,
  .rightPack #btnTheme{
    height:31px !important;
    min-height:31px !important;
  }

  .rightPack #btnLang .switchTrack,
  .rightPack #btnTheme .switchTrack{
    height:25px !important;
  }

  .rightPack #btnLang .switchTrack{
    min-width:60px !important;
  }

  .rightPack #btnTheme .switchTrack{
    min-width:52px !important;
  }

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

  .desktopLoginAction{
    height:36px !important;
    padding-left:11px !important;
    padding-right:11px !important;
    font-size:10px !important;
  }

  .loginDesktopOfficialFooterMain{
    grid-template-columns:
      minmax(240px,1.3fr)
      repeat(4,minmax(110px,.72fr)) !important;
    gap:20px !important;
  }
}

/* =========================================================
   FINAL V10 - LOGIN DESKTOP NAVBAR EXACT MATCH INDEX V129
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Posisi horizontal mengikuti navbar index:
     Bumil Ku -> Peningkatan Mutu -> Search ->
     Beranda -> Layanan -> Artikel -> Tentang Kami ->
     ID/EN -> Light/Dark -> Masuk.
   - Menu utama mengikuti Varian 4 / V129 index:
     default gelap, separator vertikal, underline aktif Beranda,
     gradient warna hanya saat hover/focus.
   - Search mengikuti index final: icon di KIRI.
   - Utility tetap memakai #btnLang dan #btnTheme existing,
     sehingga fungsi login.js tidak berubah.
   - HTML autentikasi, Firebase, redirect, validation,
     sidebar HP, dan seluruh <=979px tidak disentuh.
   ========================================================= */

@media (min-width:980px){

  /* =======================================================
     NAVBAR OUTER - SAMA DENGAN INDEX
     ======================================================= */
  .navwrap{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:0 !important;
    z-index:1000 !important;

    width:100% !important;
    margin:0 !important;
    padding:0 !important;

    pointer-events:auto !important;

    transform:none !important;
    translate:none !important;

    isolation:isolate !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  /*
   * Karena navbar login menjadi fixed seperti index,
   * ruang 88px dikembalikan ke flow agar konten tidak naik.
   */
  .wrap{
    padding-top:88px !important;
  }

  .navwrap > header{
    position:relative !important;

    width:100% !important;
    max-width:none !important;

    min-height:88px !important;
    height:88px !important;

    margin:0 !important;

    padding:
      13px
      clamp(34px,5vw,88px) !important;

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

    gap:14px !important;

    background:#ffffff !important;
    background-image:none !important;

    border:0 !important;
    border-bottom:
      1px solid rgba(58,105,119,.10) !important;

    border-radius:0 !important;

    box-shadow:
      0 10px 30px rgba(16,70,80,.055),
      inset 0 1px 0 rgba(255,255,255,.96) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    overflow:visible !important;
  }

  .navwrap > header::before,
  .navwrap > header::after{
    content:none !important;
    display:none !important;
    background:none !important;
  }

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

    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;
  }


  /* =======================================================
     BRAND BUMIL KU - POSISI + PROPORSI INDEX
     ======================================================= */
  .desktopLoginBrand{
    order:1 !important;

    position:relative !important;
    z-index:2 !important;

    flex:0 0 auto !important;
    min-width:0 !important;

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

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

    gap:11px !important;

    text-decoration:none !important;
  }

  .loginDesktopBrandLogoShadow{
    position:relative !important;

    width:52px !important;
    min-width:52px !important;
    max-width:52px !important;

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

    flex:0 0 52px !important;

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

    overflow:visible !important;
    isolation:isolate !important;

    filter:
      drop-shadow(0 2px 3px rgba(17,72,79,.14))
      drop-shadow(0 7px 11px rgba(16,70,80,.12))
      drop-shadow(0 12px 19px rgba(14,147,130,.09)) !important;
  }

  .loginDesktopBrandLogoWrap{
    position:relative !important;

    width:52px !important;
    min-width:52px !important;
    max-width:52px !important;

    height:52px !important;
    min-height:52px !important;
    max-height:52px !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;

    -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;
  }

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

  .loginDesktopBrandLogo{
    position:relative !important;
    z-index:1 !important;

    width:94% !important;
    max-width:94% !important;

    height:94% !important;
    max-height:94% !important;

    display:block !important;
    object-fit:contain !important;
    object-position:center !important;

    transform:
      translate3d(-.3%,1.2%,0) !important;

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

  .loginDesktopBrandCopy{
    min-width:0 !important;

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

    line-height:1.05 !important;
  }

  .loginDesktopBrandCopy strong{
    display:block !important;

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

    color:transparent !important;

    background:
      linear-gradient(
        90deg,
        #0e9382 0%,
        #0f9f8d 24%,
        #43b796 46%,
        #79c875 66%,
        #a8d653 83%,
        #c4d63c 100%
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;

    font-size:25px !important;
    line-height:1.02 !important;
    font-weight:700 !important;
    letter-spacing:-.040em !important;

    white-space:nowrap !important;

    filter:
      drop-shadow(0 1px 1px rgba(14,93,82,.13))
      drop-shadow(0 2px 4px rgba(16,70,80,.075)) !important;
  }

  .loginDesktopBrandCopy small{
    display:block !important;

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

    color:#65788a !important;

    font-size:10px !important;
    line-height:1.05 !important;
    font-weight:600 !important;

    white-space:nowrap !important;
  }

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


  /* =======================================================
     PENINGKATAN MUTU / RSAB - INDEX
     ======================================================= */
  .loginDesktopInstitution{
    order:2 !important;

    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;
  }

  .loginDesktopInstitutionDivider{
    display:block !important;

    width:1px !important;
    min-width:1px !important;

    height:40px !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;
  }

  .loginDesktopInstitutionIdentity{
    min-width:0 !important;

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

    gap:4px !important;
  }

  .loginDesktopInstitutionIdentity small{
    display:block !important;

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

    color:#65788a !important;

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

    white-space:nowrap !important;
  }

  .loginDesktopInstitutionIdentity img{
    display:block !important;

    width:auto !important;
    height:27px !important;

    max-width:148px !important;

    object-fit:contain !important;
    object-position:left center !important;
  }

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

  html[data-theme="dark"] .loginDesktopInstitutionDivider{
    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"] .loginDesktopInstitutionIdentity img{
    box-sizing:content-box !important;
    padding:4px 7px !important;

    background:#ffffff !important;
    border-radius:8px !important;

    box-shadow:
      0 6px 14px rgba(0,0,0,.18) !important;
  }


  /* =======================================================
     SEARCH ARTIKEL - INDEX FINAL
     ICON DI KIRI + BREATHING SPACE DARI RSAB
     ======================================================= */
  .loginDesktopArticleSearch{
    order:3 !important;

    position:relative !important;
    z-index:4 !important;

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

    column-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
      0
      0
      clamp(18px,1.45vw,28px) !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;
  }

  .loginDesktopArticleSearch: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;
  }

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

    width:100% !important;
    min-width:0 !important;
    height:100% !important;

    margin:0 !important;
    padding:
      0
      11px
      0
      10px !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;
  }

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

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

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

    justify-self:start !important;

    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:0 !important;
    border-right:
      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;

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

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

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

  html[data-theme="dark"] .loginDesktopArticleSearch{
    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"] .loginDesktopArticleSearch: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"] .loginDesktopArticleSearchInput{
    color:#eafcff !important;
    caret-color:#53ebe8 !important;
  }

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

  html[data-theme="dark"] .loginDesktopArticleSearchButton{
    color:#53ebe8 !important;
    background:#102b30 !important;

    border-left:0 !important;
    border-right:
      1px solid rgba(255,255,255,.08) !important;
  }


  /* =======================================================
     MENU UTAMA - POSISI INDEX
     KUNCI PENTING: margin-left:auto
     ======================================================= */
  #topNav{
    order:4 !important;

    position:relative !important;
    z-index:2 !important;

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

    gap:0 !important;

    flex:0 0 auto !important;
    min-width:0 !important;

    /*
     * Ini yang membuat posisi login sebelumnya berbeda
     * dari index. Pada index kelompok menu didorong ke kanan.
     */
    margin:
      0
      0
      0
      auto !important;

    padding:0 !important;

    color:inherit !important;
  }

  #topNav .navItem{
    position:relative !important;

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

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

  #topNav .navLinkBtn{
    position:relative !important;

    min-height:40px !important;

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

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

    color:#27485e !important;
    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    text-decoration:none !important;

    font-size:12.2px !important;
    line-height:1 !important;
    font-weight:760 !important;
    letter-spacing:-.01em !important;

    white-space:nowrap !important;

    transform:none !important;

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

  /*
   * Bersihkan pseudo dari override login lama.
   */
  #topNav .navItem::before,
  #topNav .navLinkBtn::after{
    content:none !important;
    display:none !important;
  }

  /* separator vertikal */
  #topNav .navItem:nth-child(-n+3)::after{
    content:"" !important;

    position:absolute !important;

    top:50% !important;
    right:0 !important;

    width:1px !important;
    height:22px !important;

    background:
      linear-gradient(
        180deg,
        rgba(38,80,101,.06) 0%,
        rgba(38,80,101,.17) 50%,
        rgba(38,80,101,.06) 100%
      ) !important;

    transform:
      translateY(-50%) !important;

    pointer-events:none !important;
  }

  /*
   * Underline V127/V129:
   * default hidden, kecuali Beranda.
   */
  #topNav .navLinkBtn::before{
    content:"" !important;

    position:absolute !important;

    bottom:0 !important;
    left:50% !important;

    width:42px !important;
    height:2px !important;

    border-radius:999px !important;

    opacity:0 !important;

    transform:
      translateX(-50%)
      scaleX(.72) !important;

    transform-origin:center !important;

    transition:
      opacity .22s ease,
      transform .22s ease !important;

    pointer-events:none !important;
  }

  /* Beranda - teal paling pekat + aktif */
  #topNav .navItem:nth-child(1) .navLinkBtn::before{
    background:
      linear-gradient(
        90deg,
        #0e9382 0%,
        #0f9f8d 100%
      ) !important;

    filter:
      drop-shadow(
        0 1px 1px rgba(14,147,130,.14)
      ) !important;

    opacity:1 !important;

    transform:
      translateX(-50%)
      scaleX(1) !important;
  }

  /* Layanan */
  #topNav .navItem:nth-child(2) .navLinkBtn::before{
    background:
      linear-gradient(
        90deg,
        #0f9f8d 0%,
        #37b89d 100%
      ) !important;

    filter:
      drop-shadow(
        0 1px 1px rgba(55,184,157,.13)
      ) !important;
  }

  /* Artikel */
  #topNav .navItem:nth-child(3) .navLinkBtn::before{
    background:
      linear-gradient(
        90deg,
        #37b89d 0%,
        #79c97b 100%
      ) !important;

    filter:
      drop-shadow(
        0 1px 1px rgba(121,201,123,.13)
      ) !important;
  }

  /* Tentang Kami */
  #topNav .navItem:nth-child(4) .navLinkBtn::before{
    background:
      linear-gradient(
        90deg,
        #79c97b 0%,
        #c4d63c 100%
      ) !important;

    filter:
      drop-shadow(
        0 1px 1px rgba(196,214,60,.14)
      ) !important;
  }

  #topNav .navItem:nth-child(1) .navLinkBtn:hover,
  #topNav .navItem:nth-child(1) .navLinkBtn:focus-visible{
    color:#0e9382 !important;
  }

  #topNav .navItem:nth-child(2) .navLinkBtn:hover,
  #topNav .navItem:nth-child(2) .navLinkBtn:focus-visible{
    color:#1ca88f !important;
  }

  #topNav .navItem:nth-child(3) .navLinkBtn:hover,
  #topNav .navItem:nth-child(3) .navLinkBtn:focus-visible{
    color:#5fba76 !important;
  }

  #topNav .navItem:nth-child(4) .navLinkBtn:hover,
  #topNav .navItem:nth-child(4) .navLinkBtn:focus-visible{
    color:#98b52f !important;
  }

  #topNav .navLinkBtn:hover,
  #topNav .navLinkBtn:focus-visible{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  #topNav .navLinkBtn:hover::before,
  #topNav .navLinkBtn:focus-visible::before{
    opacity:1 !important;

    transform:
      translateX(-50%)
      scaleX(1) !important;
  }

  #topNav .navLinkBtn:focus-visible{
    outline:none !important;
  }

  html[data-theme="dark"] #topNav .navLinkBtn{
    color:#d6e3e6 !important;
  }

  html[data-theme="dark"]
  #topNav .navItem:nth-child(1) .navLinkBtn:hover,
  html[data-theme="dark"]
  #topNav .navItem:nth-child(1) .navLinkBtn:focus-visible{
    color:#67d9ca !important;
  }

  html[data-theme="dark"]
  #topNav .navItem:nth-child(2) .navLinkBtn:hover,
  html[data-theme="dark"]
  #topNav .navItem:nth-child(2) .navLinkBtn:focus-visible{
    color:#78dcc2 !important;
  }

  html[data-theme="dark"]
  #topNav .navItem:nth-child(3) .navLinkBtn:hover,
  html[data-theme="dark"]
  #topNav .navItem:nth-child(3) .navLinkBtn:focus-visible{
    color:#9ddc9d !important;
  }

  html[data-theme="dark"]
  #topNav .navItem:nth-child(4) .navLinkBtn:hover,
  html[data-theme="dark"]
  #topNav .navItem:nth-child(4) .navLinkBtn:focus-visible{
    color:#d2df6d !important;
  }

  html[data-theme="dark"]
  #topNav .navItem:nth-child(1) .navLinkBtn::before{
    background:
      linear-gradient(
        90deg,
        #4fd0bf 0%,
        #67d9ca 100%
      ) !important;
  }

  html[data-theme="dark"]
  #topNav .navItem:nth-child(2) .navLinkBtn::before{
    background:
      linear-gradient(
        90deg,
        #67d9ca 0%,
        #78dcc2 100%
      ) !important;
  }

  html[data-theme="dark"]
  #topNav .navItem:nth-child(3) .navLinkBtn::before{
    background:
      linear-gradient(
        90deg,
        #78dcc2 0%,
        #9ddc9d 100%
      ) !important;
  }

  html[data-theme="dark"]
  #topNav .navItem:nth-child(4) .navLinkBtn::before{
    background:
      linear-gradient(
        90deg,
        #9ddc9d 0%,
        #d2df6d 100%
      ) !important;
  }

  html[data-theme="dark"]
  #topNav .navItem:nth-child(-n+3)::after{
    background:
      linear-gradient(
        180deg,
        rgba(214,227,230,.06) 0%,
        rgba(214,227,230,.16) 50%,
        rgba(214,227,230,.06) 100%
      ) !important;
  }


  /* =======================================================
     UTILITY ID/EN + LIGHT/DARK
     POSISI SETELAH MENU, SAMA DENGAN INDEX
     ======================================================= */
  .rightPack{
    order:5 !important;

    position:relative !important;
    z-index:5 !important;

    flex:0 0 auto !important;

    margin:
      0
      0
      0
      18px !important;

    padding:0 !important;

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

    gap:8px !important;
  }

  /*
   * Outer button dibuat transparan.
   * Surface pill berada di switchTrack agar visual identik
   * dengan desktopSegmentedControl index.
   */
  .rightPack #btnLang,
  .rightPack #btnTheme{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

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

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

    color:inherit !important;
    background:transparent !important;

    border:0 !important;
    border-radius:999px !important;

    box-shadow:none !important;

    transform:none !important;
  }

  .rightPack #btnLang:hover,
  .rightPack #btnTheme:hover,
  .rightPack #btnLang:active,
  .rightPack #btnTheme:active{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .rightPack #btnLang .switchTrack,
  .rightPack #btnTheme .switchTrack{
    position:relative !important;

    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;

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

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

    display:grid !important;
    grid-template-columns:
      repeat(2,1fr) !important;
    align-items:center !important;

    gap:0 !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;
  }

  .rightPack .switchLabel{
    position:relative !important;
    z-index:2 !important;

    width:100% !important;
    height:28px !important;

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

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

    color:#91a0a9 !important;

    font-family:inherit !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:700 !important;

    letter-spacing:.025em !important;
    text-transform:none !important;

    opacity:1 !important;
  }

  .rightPack #btnTheme .switchLabel{
    font-size:11px !important;
    letter-spacing:0 !important;
  }

  .rightPack #btnTheme .switchLabel i{
    display:block !important;
    margin:0 !important;
    padding:0 !important;

    color:currentColor !important;

    line-height:1 !important;
    transform:none !important;
  }

  .rightPack .switchThumb{
    position:absolute !important;
    z-index:1 !important;

    top:3px !important;
    left:3px !important;

    width:
      calc(50% - 3px) !important;

    height:28px !important;

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

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,1) 0%,
        rgba(250,252,253,.99) 100%
      ) !important;

    border:0 !important;
    border-radius:999px !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:none !important;

    transition:
      left .22s cubic-bezier(.2,.8,.2,1) !important;
  }

  .rightPack .switch[data-on="1"] .switchThumb{
    left:50% !important;
  }

  .rightPack .switch[data-on="0"]
  .switchLabel[data-side="left"],
  .rightPack .switch[data-on="1"]
  .switchLabel[data-side="right"]{
    color:#243844 !important;
    opacity:1 !important;
  }

  .rightPack .switch[data-on="0"]
  .switchLabel[data-side="right"],
  .rightPack .switch[data-on="1"]
  .switchLabel[data-side="left"]{
    color:#91a0a9 !important;
    opacity:1 !important;
  }

  html[data-theme="dark"]
  .rightPack #btnLang .switchTrack,
  html[data-theme="dark"]
  .rightPack #btnTheme .switchTrack{
    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"]
  .rightPack .switchThumb{
    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"]
  .rightPack .switchLabel{
    color:#7f9ba2 !important;
  }

  html[data-theme="dark"]
  .rightPack .switch[data-on="0"]
  .switchLabel[data-side="left"],
  html[data-theme="dark"]
  .rightPack .switch[data-on="1"]
  .switchLabel[data-side="right"]{
    color:#eafcff !important;
  }

  html[data-theme="dark"]
  .rightPack .switch[data-on="0"]
  .switchLabel[data-side="right"],
  html[data-theme="dark"]
  .rightPack .switch[data-on="1"]
  .switchLabel[data-side="left"]{
    color:#7f9ba2 !important;
  }

  .rightPack .desktopLegacyLoginButton{
    display:none !important;
  }


  /* =======================================================
     TOMBOL MASUK - INDEX
     ======================================================= */
  .desktopLoginAction{
    order:6 !important;

    flex:0 0 auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    min-height:42px !important;
    height:42px !important;

    margin:
      0
      0
      0
      14px !important;

    padding:
      0
      19px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !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,.20) !important;

    border-radius:13px !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;

    text-decoration:none !important;

    text-transform:none !important;
    letter-spacing:0 !important;

    font-size:12px !important;
    line-height:1 !important;
    font-weight:700 !important;

    white-space:nowrap !important;

    transform:none !important;

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

  .desktopLoginAction span{
    color:#ffffff !important;
  }

  .desktopLoginAction: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;

    transform:
      translateY(-1px) !important;
  }
}


/* =========================================================
   LAPTOP COMPACT INDEX: 980 - 1150
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){

  .navwrap > header{
    gap:9px !important;

    padding-left:24px !important;
    padding-right:24px !important;
  }

  .loginDesktopBrandLogoShadow,
  .loginDesktopBrandLogoWrap{
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

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

    flex-basis:46px !important;
  }

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

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

  .loginDesktopInstitution{
    gap:10px !important;
  }

  .loginDesktopInstitutionDivider{
    height:34px !important;
  }

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

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

  .loginDesktopArticleSearch{
    flex-basis:132px !important;

    width:132px !important;
    min-width:132px !important;
    max-width:132px !important;

    height:34px !important;

    margin-left:11px !important;

    grid-template-columns:
      30px
      minmax(0,1fr) !important;

    column-gap:2px !important;

    border-radius:9px !important;
  }

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

  .loginDesktopArticleSearchButton{
    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;

    border-radius:7px !important;

    font-size:11px !important;
  }

  #topNav .navLinkBtn{
    min-height:36px !important;
    padding:0 16px !important;
    font-size:10.8px !important;
  }

  #topNav .navItem:nth-child(-n+3)::after{
    height:18px !important;
  }

  #topNav .navLinkBtn::before{
    width:38px !important;
  }

  .rightPack{
    margin-left:12px !important;
    gap:6px !important;
  }

  .rightPack #btnLang,
  .rightPack #btnTheme{
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
  }

  .rightPack #btnLang .switchTrack,
  .rightPack #btnTheme .switchTrack{
    width:68px !important;
    min-width:68px !important;
    max-width:68px !important;

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

    padding:3px !important;
  }

  .rightPack .switchLabel{
    height:24px !important;
    font-size:8.8px !important;
  }

  .rightPack #btnTheme .switchLabel{
    font-size:10px !important;
  }

  .rightPack .switchThumb{
    top:3px !important;

    width:
      calc(50% - 3px) !important;

    height:24px !important;
  }

  .desktopLoginAction{
    margin-left:10px !important;

    min-height:36px !important;
    height:36px !important;

    padding-left:13px !important;
    padding-right:13px !important;

    font-size:10.5px !important;
  }
}


/* =========================================================
   SHORT LAPTOP - INDEX HEIGHT <=820PX
   ========================================================= */
@media (min-width:980px) and (max-height:820px){

  .wrap{
    padding-top:78px !important;
  }

  .navwrap > header{
    min-height:78px !important;
    height:78px !important;

    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  #topNav .navLinkBtn{
    min-height:34px !important;
    padding-left:15px !important;
    padding-right:15px !important;
    font-size:10.4px !important;
  }

  #topNav .navItem:nth-child(-n+3)::after{
    height:17px !important;
  }

  #topNav .navLinkBtn::before{
    width:36px !important;
  }
}


/* =========================================================
   VERY SHORT LAPTOP - INDEX HEIGHT <=720PX
   ========================================================= */
@media (min-width:980px) and (max-height:720px){

  .wrap{
    padding-top:72px !important;
  }

  .navwrap > header{
    min-height:72px !important;
    height:72px !important;

    padding-top:9px !important;
    padding-bottom:9px !important;
  }

  #topNav .navLinkBtn{
    min-height:32px !important;
    padding-left:13px !important;
    padding-right:13px !important;
    font-size:9.8px !important;
  }

  #topNav .navItem:nth-child(-n+3)::after{
    height:16px !important;
  }

  #topNav .navLinkBtn::before{
    width:34px !important;
  }
}

/* =========================================================
   FINAL V11 - LOGIN DESKTOP CONTENT VARIAN 1
   =========================================================
   REFERENSI:
   - Layout mengikuti Varian 1 yang dipilih:
     copy kiri + 3 trust pillars + visual ibu hamil + auth card kanan.
   - STYLE WARNA TETAP BUMIL KU / RSAB:
     #0F9F8D, #0E9382, lime accent, navy text, white surface.
   - HANYA >=980px.
   - Navbar V10, footer, autentikasi, dan HP tidak diubah.
   ========================================================= */

.loginDesktopVariant1Copy,
.loginDesktopVariant1Visual,
.loginDesktopVariant1Benefits,
.loginDesktopVariant1Institution{
  display:none;
}

@media (min-width:980px){

  /* -------------------------------------------------------
     HERO LOGIN MENJADI SATU KOMPOSISI LANDING-STYLE
     ------------------------------------------------------- */
  main{
    position:relative !important;
    min-height:calc(100svh - 88px) !important;
    padding:34px clamp(34px,4.8vw,78px) 42px !important;

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

    background:
      radial-gradient(circle at 13% 18%,rgba(15,159,141,.055),transparent 23%),
      radial-gradient(circle at 57% 84%,rgba(196,214,60,.045),transparent 23%),
      linear-gradient(180deg,#fbfefe 0%,#f5fbfb 100%) !important;
  }

  html[data-theme="dark"] main{
    background:
      radial-gradient(circle at 13% 18%,rgba(15,159,141,.050),transparent 23%),
      radial-gradient(circle at 57% 84%,rgba(196,214,60,.018),transparent 23%),
      linear-gradient(180deg,#0b2024 0%,#07181c 100%) !important;
  }

  .hero.heroSplit.loginHero{
    width:min(1510px,100%) !important;
    max-width:1510px !important;
    min-height:650px !important;

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

    display:grid !important;
    grid-template-columns:minmax(0,1.58fr) minmax(420px,.82fr) !important;
    align-items:stretch !important;

    gap:26px !important;

    border:1px solid rgba(58,105,119,.09) !important;
    border-radius:30px !important;

    background:
      linear-gradient(145deg,rgba(255,255,255,.995),rgba(250,254,253,.985)) !important;

    box-shadow:
      0 2px 5px rgba(16,70,80,.025),
      0 18px 44px rgba(16,70,80,.075),
      0 36px 80px rgba(15,91,95,.055),
      inset 0 1px 0 rgba(255,255,255,1) !important;

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

  html[data-theme="dark"] .hero.heroSplit.loginHero{
    background:
      linear-gradient(145deg,rgba(16,43,48,.995),rgba(9,30,34,.99)) !important;
    border-color:rgba(255,255,255,.07) !important;
    box-shadow:
      0 22px 58px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  /* -------------------------------------------------------
     LEFT HERO - VARIAN 1
     ------------------------------------------------------- */
  .loginDesktopIntro.loginDesktopIntro--variant1{
    grid-column:1 !important;

    position:relative !important;
    min-width:0 !important;
    min-height:650px !important;

    padding:
      clamp(48px,5.4vw,76px)
      0
      clamp(38px,4.2vw,60px)
      clamp(46px,5vw,76px) !important;

    display:grid !important;
    grid-template-columns:minmax(350px,.95fr) minmax(290px,.78fr) !important;
    align-items:center !important;

    gap:20px !important;

    background:
      radial-gradient(circle at 9% 8%,rgba(15,159,141,.085),transparent 19%),
      radial-gradient(circle at 54% 100%,rgba(15,159,141,.055),transparent 26%),
      linear-gradient(135deg,#ffffff 0%,#fbfefe 62%,#f1fbfa 100%) !important;

    box-shadow:none !important;
    overflow:hidden !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1::before{
    content:"" !important;
    position:absolute !important;
    top:58px !important;
    left:44% !important;

    width:108px !important;
    height:108px !important;

    border-radius:50% !important;

    background:rgba(15,159,141,.045) !important;

    box-shadow:
      0 0 0 18px rgba(15,159,141,.018) !important;

    pointer-events:none !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1::after{
    content:"" !important;

    position:absolute !important;
    left:-8% !important;
    right:-2% !important;
    bottom:-120px !important;

    height:260px !important;

    border-radius:50% 50% 0 0 / 48% 48% 0 0 !important;

    background:
      linear-gradient(
        180deg,
        rgba(15,159,141,.035) 0%,
        rgba(15,159,141,.11) 46%,
        rgba(14,147,130,.16) 100%
      ) !important;

    transform:rotate(-2deg) !important;

    pointer-events:none !important;
  }

  html[data-theme="dark"]
  .loginDesktopIntro.loginDesktopIntro--variant1{
    background:
      radial-gradient(circle at 9% 8%,rgba(15,159,141,.06),transparent 19%),
      radial-gradient(circle at 54% 100%,rgba(15,159,141,.025),transparent 26%),
      linear-gradient(135deg,#102b30 0%,#0d272c 62%,#0a2025 100%) !important;
  }

  html[data-theme="dark"]
  .loginDesktopIntro.loginDesktopIntro--variant1::after{
    background:
      linear-gradient(
        180deg,
        rgba(15,159,141,.025) 0%,
        rgba(15,159,141,.07) 46%,
        rgba(14,147,130,.10) 100%
      ) !important;
  }

  .loginDesktopVariant1Copy{
    position:relative !important;
    z-index:4 !important;

    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand{
    gap:10px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:54px !important;
    min-width:54px !important;
    height:54px !important;
    min-height:54px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogo{
    width:48px !important;
    height:48px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy strong{
    font-size:27px !important;
    line-height:1 !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy small{
    margin-top:4px !important;
    font-size:8.5px !important;
  }

  .loginDesktopVariant1Headline{
    max-width:530px !important;

    margin:34px 0 0 !important;

    color:#17384c !important;

    font-size:clamp(34px,3.2vw,48px) !important;
    line-height:1.06 !important;
    font-weight:700 !important;
    letter-spacing:-.045em !important;
  }

  .loginDesktopVariant1Headline span{
    display:block !important;

    margin-top:4px !important;

    color:transparent !important;
    background:
      linear-gradient(
        90deg,
        #0e9382 0%,
        #0f9f8d 38%,
        #43b796 70%,
        #82c96f 100%
      ) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
  }

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

  .loginDesktopVariant1Description{
    max-width:490px !important;

    margin:18px 0 0 !important;

    color:#65788a !important;

    font-size:13.5px !important;
    line-height:1.65 !important;
    font-weight:500 !important;
  }

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

  /* -------------------------------------------------------
     3 TRUST PILLARS
     ------------------------------------------------------- */
  .loginDesktopVariant1Benefits{
    width:100% !important;
    max-width:560px !important;

    margin-top:28px !important;

    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    gap:10px !important;
  }

  .loginDesktopVariant1Benefit{
    min-width:0 !important;
    min-height:124px !important;

    padding:16px 12px 14px !important;

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

    text-align:center !important;

    background:
      rgba(255,255,255,.70) !important;

    border:
      1px solid rgba(58,105,119,.085) !important;

    border-radius:17px !important;

    box-shadow:
      0 9px 22px rgba(16,70,80,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;

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

  .loginDesktopVariant1BenefitIcon{
    width:34px !important;
    height:34px !important;

    margin-bottom:9px !important;

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

    color:#0f9f8d !important;

    background:
      linear-gradient(145deg,#ffffff,#edf9f7) !important;

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

    border-radius:12px !important;

    box-shadow:
      0 6px 13px rgba(15,159,141,.09),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    font-size:14px !important;
  }

  .loginDesktopVariant1Benefit strong{
    color:#27485e !important;

    font-size:10.5px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
  }

  .loginDesktopVariant1Benefit small{
    margin-top:5px !important;

    color:#718690 !important;

    font-size:8.5px !important;
    line-height:1.45 !important;
    font-weight:500 !important;
  }

  html[data-theme="dark"] .loginDesktopVariant1Benefit{
    background:rgba(255,255,255,.025) !important;
    border-color:rgba(255,255,255,.07) !important;
    box-shadow:
      0 9px 22px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  html[data-theme="dark"] .loginDesktopVariant1BenefitIcon{
    background:#163a40 !important;
    border-color:rgba(15,159,141,.12) !important;
  }

  html[data-theme="dark"] .loginDesktopVariant1Benefit strong{
    color:#e4f7f8 !important;
  }

  html[data-theme="dark"] .loginDesktopVariant1Benefit small{
    color:#9bb9be !important;
  }

  /* -------------------------------------------------------
     RSAB TRUST LOCKUP
     ------------------------------------------------------- */
  .loginDesktopVariant1Institution{
    width:fit-content !important;

    margin-top:24px !important;
    padding:10px 15px !important;

    display:flex !important;
    flex-direction:column !important;

    gap:5px !important;

    background:rgba(255,255,255,.90) !important;

    border:
      1px solid rgba(58,105,119,.10) !important;

    border-radius:15px !important;

    box-shadow:
      0 11px 26px rgba(16,70,80,.075),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .loginDesktopVariant1InstitutionLabel{
    color:#82949f !important;
    font-size:7.2px !important;
    line-height:1 !important;
    font-weight:600 !important;
  }

  .loginDesktopVariant1InstitutionBody{
    display:flex !important;
    align-items:center !important;

    gap:10px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    width:auto !important;
    height:29px !important;
    max-width:128px !important;
    object-fit:contain !important;
  }

  .loginDesktopVariant1InstitutionBody > span{
    display:flex !important;
    flex-direction:column !important;
  }

  .loginDesktopVariant1InstitutionBody strong{
    color:#0e9382 !important;
    font-size:9.5px !important;
    line-height:1.1 !important;
    font-weight:700 !important;
  }

  .loginDesktopVariant1InstitutionBody small{
    margin-top:2px !important;
    color:#65788a !important;
    font-size:8px !important;
    font-weight:600 !important;
  }

  html[data-theme="dark"] .loginDesktopVariant1Institution{
    background:#102b30 !important;
    border-color:rgba(255,255,255,.08) !important;
    box-shadow:
      0 12px 26px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"] .loginDesktopVariant1InstitutionBody img{
    box-sizing:content-box !important;
    padding:3px 6px !important;
    background:#ffffff !important;
    border-radius:7px !important;
  }

  /* -------------------------------------------------------
     VISUAL IBU HAMIL
     Uses existing landing-page hero asset.
     ------------------------------------------------------- */
  .loginDesktopVariant1Visual{
    position:relative !important;
    z-index:3 !important;

    min-width:0 !important;
    height:100% !important;

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

    overflow:visible !important;
  }

  .loginDesktopVariant1VisualAura{
    position:absolute !important;
    z-index:0 !important;

    width:360px !important;
    height:420px !important;

    right:-28px !important;
    bottom:32px !important;

    border-radius:52% 48% 44% 56% / 44% 44% 56% 56% !important;

    background:
      radial-gradient(circle at 50% 40%,rgba(15,159,141,.14),rgba(15,159,141,.045) 58%,transparent 72%) !important;

    filter:blur(2px) !important;

    transform:rotate(5deg) !important;
  }

  .loginDesktopVariant1PhotoFrame{
    position:relative !important;
    z-index:2 !important;

    width:min(390px,100%) !important;
    height:535px !important;

    margin:0 -12px -10px 0 !important;

    overflow:hidden !important;

    border-radius:
      46% 46% 18% 18% /
      24% 24% 6% 6% !important;

    -webkit-mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 80%,
        rgba(0,0,0,.92) 88%,
        rgba(0,0,0,.45) 96%,
        transparent 100%
      ) !important;
    mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 80%,
        rgba(0,0,0,.92) 88%,
        rgba(0,0,0,.45) 96%,
        transparent 100%
      ) !important;

    filter:
      drop-shadow(0 22px 28px rgba(16,70,80,.12)) !important;
  }

  .loginDesktopVariant1PhotoFrame picture{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
  }

  .loginDesktopVariant1Photo{
    width:100% !important;
    height:100% !important;

    display:block !important;

    object-fit:cover !important;
    /*
     * Asset landing page berisi pasangan.
     * Crop digeser ke kanan agar area ibu hamil lebih dominan.
     */
    object-position:77% center !important;

    transform:scale(1.12) translateX(-2%) !important;

    filter:
      saturate(.92)
      contrast(.98)
      brightness(1.035) !important;
  }

  .loginDesktopVariant1PhotoTint{
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.02) 0%,
        rgba(15,159,141,.01) 54%,
        rgba(15,159,141,.13) 100%
      ) !important;

    pointer-events:none !important;
  }

  .loginDesktopVariant1FloatingTrust{
    position:absolute !important;
    z-index:5 !important;

    right:12px !important;
    bottom:82px !important;

    width:48px !important;
    height:48px !important;

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

    color:#ffffff !important;

    background:
      linear-gradient(145deg,#0f9f8d,#0e9382) !important;

    border:
      1px solid rgba(255,255,255,.38) !important;

    border-radius:17px !important;

    box-shadow:
      0 12px 24px rgba(15,159,141,.22),
      inset 0 1px 0 rgba(255,255,255,.35) !important;

    font-size:19px !important;

    transform:rotate(4deg) !important;
  }

  /* -------------------------------------------------------
     RIGHT AUTH AREA - RINGAN, PROPORSIONAL VARIAN 1
     ------------------------------------------------------- */
  .loginDesktopFormPanel{
    grid-column:2 !important;

    position:relative !important;

    min-width:0 !important;
    min-height:650px !important;
    height:auto !important;

    margin:0 !important;
    padding:
      42px
      clamp(28px,3vw,48px) !important;

    align-self:stretch !important;

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

    background:
      radial-gradient(circle at 90% 11%,rgba(15,159,141,.075),transparent 24%),
      linear-gradient(145deg,#f8fbfd 0%,#f4f9fb 100%) !important;

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

    border-radius:0 !important;

    box-shadow:none !important;

    overflow:hidden !important;
  }

  html[data-theme="dark"] .loginDesktopFormPanel{
    background:
      radial-gradient(circle at 90% 11%,rgba(15,159,141,.045),transparent 24%),
      linear-gradient(145deg,#0d272c 0%,#091e22 100%) !important;
    border-left-color:rgba(255,255,255,.055) !important;
    box-shadow:none !important;
  }

  .loginDesktopFormPanel .loginCard{
    width:min(500px,100%) !important;
    max-width:500px !important;

    padding:26px 26px 24px !important;

    border:
      1px solid rgba(58,105,119,.11) !important;

    border-radius:24px !important;

    background:#ffffff !important;

    box-shadow:
      0 18px 44px rgba(16,70,80,.09),
      0 5px 15px rgba(16,70,80,.04),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html[data-theme="dark"] .loginDesktopFormPanel .loginCard{
    background:#102b30 !important;
    border-color:rgba(255,255,255,.08) !important;
    box-shadow:
      0 22px 50px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  .loginDesktopFormPanel .loginCardTop{
    min-height:auto !important;
    margin-bottom:17px !important;
  }

  .loginDesktopFormPanel .loginHeroBrandLogoWrap{
    width:54px !important;
    min-width:54px !important;
    height:54px !important;
    min-height:54px !important;
  }

  .loginDesktopFormPanel .loginPanelTitle{
    font-size:23px !important;
  }

  .loginDesktopFormPanel .loginPanelSub{
    max-width:330px !important;
    font-size:11.5px !important;
    line-height:1.42 !important;
  }

  .loginDesktopFormPanel .authTabSwitch{
    margin-bottom:14px !important;
  }

  .loginDesktopFormPanel .authTabLabel{
    min-height:42px !important;
    font-size:12.5px !important;
  }

  .loginDesktopFormPanel .authForm{
    gap:10px !important;
  }

  .loginDesktopFormPanel .inputGroup{
    gap:5px !important;
  }

  .loginDesktopFormPanel .inputGroup label{
    font-size:11.5px !important;
  }

  .loginDesktopFormPanel .inputShell{
    min-height:46px !important;
    padding:0 13px !important;
    border-radius:13px !important;
  }

  .loginDesktopFormPanel .inputShell input{
    font-size:12.5px !important;
  }

  .loginDesktopFormPanel .checkWrap,
  .loginDesktopFormPanel .textLinkBtn{
    font-size:11.5px !important;
  }

  .loginDesktopFormPanel
  #signInSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel
  #signUpSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction{
    min-height:46px !important;
    font-size:12px !important;
  }

  .loginDesktopFormPanel .authDivider{
    margin:12px 0 10px !important;
    font-size:9px !important;
  }
}


/* =========================================================
   COMPACT LAPTOP 980-1180
   ========================================================= */
@media (min-width:1440px){
  .hero.heroSplit.loginHero{
    background-size:
      100% 100%,
      100% 100%,
      clamp(1100px,72vw,1380px) auto,
      100% 100% !important;
    background-position:
      left top,
      left top,
      right top,
      left top !important;
  }

  html[data-theme="dark"] .hero.heroSplit.loginHero{
    background-size:
      100% 100%,
      100% 100%,
      clamp(1100px,72vw,1380px) auto,
      100% 100% !important;
    background-position:
      left top,
      left top,
      right top,
      left top !important;
  }
}

@media (min-width:980px) and (max-width:1180px){

  main{
    padding:
      26px
      24px
      32px !important;
  }

  .hero.heroSplit.loginHero{
    min-height:580px !important;
    grid-template-columns:minmax(0,1.45fr) minmax(390px,.92fr) !important;
    gap:0 !important;
    border-radius:24px !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    min-height:580px !important;

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

    grid-template-columns:minmax(310px,1fr) minmax(230px,.62fr) !important;
    gap:12px !important;
  }

  .loginDesktopVariant1Headline{
    margin-top:25px !important;
    font-size:clamp(29px,3.3vw,39px) !important;
  }

  .loginDesktopVariant1Description{
    margin-top:13px !important;
    max-width:400px !important;
    font-size:11.5px !important;
  }

  .loginDesktopVariant1Benefits{
    margin-top:20px !important;
    gap:7px !important;
  }

  .loginDesktopVariant1Benefit{
    min-height:106px !important;
    padding:12px 8px 10px !important;
  }

  .loginDesktopVariant1BenefitIcon{
    width:29px !important;
    height:29px !important;
    margin-bottom:7px !important;
    font-size:12px !important;
  }

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

  .loginDesktopVariant1Benefit small{
    font-size:7.3px !important;
  }

  .loginDesktopVariant1Institution{
    margin-top:17px !important;
    padding:8px 11px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    height:24px !important;
    max-width:106px !important;
  }

  .loginDesktopVariant1PhotoFrame{
    width:285px !important;
    height:430px !important;
    margin-right:-4px !important;
  }

  .loginDesktopVariant1VisualAura{
    width:270px !important;
    height:340px !important;
    right:-30px !important;
  }

  .loginDesktopVariant1FloatingTrust{
    right:4px !important;
    bottom:64px !important;
    width:42px !important;
    height:42px !important;
    border-radius:15px !important;
    font-size:16px !important;
  }

  .loginDesktopFormPanel{
    min-height:580px !important;
    padding:30px 24px !important;
  }

  .loginDesktopFormPanel .loginCard{
    padding:22px 20px 20px !important;
  }
}


/* =========================================================
   WIDE DESKTOP >=1440
   ========================================================= */
@media (min-width:1440px){

  .hero.heroSplit.loginHero{
    grid-template-columns:minmax(0,1.62fr) minmax(440px,.80fr) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    grid-template-columns:minmax(390px,.98fr) minmax(340px,.76fr) !important;
  }

  .loginDesktopVariant1PhotoFrame{
    width:420px !important;
    height:555px !important;
  }
}


/* =========================================================
   SHORT LAPTOP HEIGHT
   ========================================================= */
@media (min-width:980px) and (max-height:820px){

  main{
    min-height:calc(100svh - 78px) !important;
    padding-top:22px !important;
    padding-bottom:26px !important;
  }

  .hero.heroSplit.loginHero{
    min-height:560px !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1,
  .loginDesktopFormPanel{
    min-height:560px !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-top:32px !important;
    padding-bottom:28px !important;
  }

  .loginDesktopVariant1Headline{
    margin-top:22px !important;
    font-size:clamp(29px,3vw,40px) !important;
  }

  .loginDesktopVariant1Benefits{
    margin-top:18px !important;
  }

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

  .loginDesktopVariant1PhotoFrame{
    height:435px !important;
  }

  .loginDesktopFormPanel{
    padding-top:24px !important;
    padding-bottom:24px !important;
  }
}

/* =========================================================
   FINAL V12 - LOGIN DESKTOP VARIAN 1 FULL WIDTH
   =========================================================
   TARGET:
   - Desktop/laptop >=980px memakai komposisi full-width.
   - Tidak ada lagi "card besar" yang nyempil di tengah.
   - Hero langsung memenuhi area di bawah navbar.
   - Kiri = copy + benefits.
   - Tengah = foto kehamilan besar.
   - Kanan = login panel.
   - Footer resmi tetap existing.
   - Warna / style Bumil Ku tetap.
   - Mobile/tablet <=979px tidak disentuh.
   ========================================================= */

@media (min-width:980px){

  /* =======================================================
     MAIN FULL BLEED
     ======================================================= */
  main{
    width:100% !important;
    min-height:auto !important;

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

    display:block !important;

    background:
      linear-gradient(
        180deg,
        #fbfefe 0%,
        #f6fbfb 100%
      ) !important;
  }

  html[data-theme="dark"] main{
    background:
      linear-gradient(
        180deg,
        #0b2024 0%,
        #07181c 100%
      ) !important;
  }

  /* =======================================================
     HERO FULL WIDTH - TIDAK ADA OUTER CARD
     ======================================================= */
  .hero.heroSplit.loginHero{
    position:relative !important;

    width:100% !important;
    max-width:none !important;

    min-height:
      calc(100svh - 88px) !important;

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

    display:grid !important;

    grid-template-columns:
      minmax(0,1.48fr)
      minmax(440px,.92fr) !important;

    align-items:stretch !important;

    gap:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:
      linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 61%,
        #f6fafc 61%,
        #f4f8fb 100%
      ) !important;

    box-shadow:none !important;

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

  html[data-theme="dark"]
  .hero.heroSplit.loginHero{
    background:
      linear-gradient(
        90deg,
        #102b30 0%,
        #102b30 61%,
        #0c252a 61%,
        #091e22 100%
      ) !important;
  }

  /* =======================================================
     LEFT HERO AREA
     ======================================================= */
  .loginDesktopIntro.loginDesktopIntro--variant1{
    position:relative !important;

    min-width:0 !important;
    min-height:
      calc(100svh - 88px) !important;

    padding:
      clamp(58px,7vh,92px)
      0
      clamp(54px,7vh,92px)
      clamp(54px,4.8vw,94px) !important;

    display:grid !important;

    grid-template-columns:
      minmax(380px,.92fr)
      minmax(360px,.98fr) !important;

    align-items:center !important;

    gap:
      clamp(26px,2.8vw,52px) !important;

    background:
      radial-gradient(
        circle at 5% 18%,
        rgba(15,159,141,.075),
        transparent 23%
      ),
      radial-gradient(
        circle at 55% 100%,
        rgba(15,159,141,.055),
        transparent 24%
      ),
      linear-gradient(
        135deg,
        #ffffff 0%,
        #fcfefe 58%,
        #f5fbfa 100%
      ) !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    overflow:hidden !important;
  }

  html[data-theme="dark"]
  .loginDesktopIntro.loginDesktopIntro--variant1{
    background:
      radial-gradient(
        circle at 5% 18%,
        rgba(15,159,141,.055),
        transparent 23%
      ),
      radial-gradient(
        circle at 55% 100%,
        rgba(15,159,141,.025),
        transparent 24%
      ),
      linear-gradient(
        135deg,
        #102b30 0%,
        #0f292e 58%,
        #0b2227 100%
      ) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1::before{
    top:10% !important;
    left:40% !important;

    width:150px !important;
    height:150px !important;

    background:
      rgba(15,159,141,.045) !important;

    box-shadow:
      0 0 0 24px rgba(15,159,141,.015) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1::after{
    left:-8% !important;
    right:-4% !important;
    bottom:-145px !important;

    height:300px !important;

    background:
      linear-gradient(
        180deg,
        rgba(15,159,141,.025) 0%,
        rgba(15,159,141,.085) 42%,
        rgba(14,147,130,.135) 100%
      ) !important;
  }

  /* =======================================================
     COPY KIRI - LEBIH BESAR & LEBIH "LANDING PAGE"
     ======================================================= */
  .loginDesktopVariant1Copy{
    width:100% !important;
    max-width:620px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand{
    gap:12px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:62px !important;
    min-width:62px !important;
    height:62px !important;
    min-height:62px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogo{
    width:55px !important;
    height:55px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy strong{
    font-size:34px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy small{
    margin-top:5px !important;
    font-size:10px !important;
  }

  .loginDesktopVariant1Headline{
    max-width:620px !important;

    margin-top:
      clamp(34px,4.2vh,50px) !important;

    font-size:
      clamp(44px,4.2vw,68px) !important;

    line-height:1.02 !important;
    letter-spacing:-.04em !important;
  }

  .loginDesktopVariant1Description{
    max-width:560px !important;

    margin-top:20px !important;

    font-size:15px !important;
    line-height:1.70 !important;
  }

  .loginDesktopVariant1Benefits{
    max-width:610px !important;

    margin-top:
      clamp(26px,3.4vh,40px) !important;

    gap:13px !important;
  }

  .loginDesktopVariant1Benefit{
    min-height:142px !important;

    padding:
      19px
      14px
      17px !important;

    border-radius:19px !important;
  }

  .loginDesktopVariant1BenefitIcon{
    width:40px !important;
    height:40px !important;

    margin-bottom:11px !important;

    border-radius:13px !important;

    font-size:16px !important;
  }

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

  .loginDesktopVariant1Benefit small{
    margin-top:6px !important;

    font-size:9.2px !important;
    line-height:1.45 !important;
  }

  .loginDesktopVariant1Institution{
    margin-top:
      clamp(22px,3vh,34px) !important;

    padding:
      11px
      16px !important;

    border-radius:16px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    height:32px !important;
    max-width:140px !important;
  }

  .loginDesktopVariant1InstitutionBody strong{
    font-size:10.5px !important;
  }

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

  /* =======================================================
     FOTO - BESAR, MENJADI CENTER HERO
     ======================================================= */
  .loginDesktopVariant1Visual{
    position:relative !important;

    align-self:stretch !important;

    height:100% !important;
    min-height:
      calc(100svh - 88px) !important;

    display:flex !important;
    align-items:stretch !important;
    justify-content:flex-end !important;

    overflow:hidden !important;
  }

  .loginDesktopVariant1VisualAura{
    width:520px !important;
    height:600px !important;

    right:-80px !important;
    bottom:28px !important;

    background:
      radial-gradient(
        circle at 48% 42%,
        rgba(15,159,141,.11),
        rgba(15,159,141,.035) 58%,
        transparent 75%
      ) !important;
  }

  .loginDesktopVariant1PhotoFrame{
    position:absolute !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;

    border-radius:
      42% 0 0 42% /
      18% 0 0 18% !important;

    overflow:hidden !important;

    -webkit-mask-image:none !important;
    mask-image:none !important;

    filter:none !important;

    box-shadow:
      -24px 0 44px -34px rgba(16,70,80,.34) !important;
  }

  .loginDesktopVariant1PhotoFrame::before{
    content:"" !important;

    position:absolute !important;
    z-index:3 !important;

    top:-2% !important;
    bottom:-2% !important;
    left:-1px !important;

    width:110px !important;

    background:
      linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255,255,255,.92) 18%,
        rgba(255,255,255,.50) 48%,
        rgba(255,255,255,.10) 76%,
        transparent 100%
      ) !important;

    pointer-events:none !important;
  }

  html[data-theme="dark"]
  .loginDesktopVariant1PhotoFrame::before{
    background:
      linear-gradient(
        90deg,
        #102b30 0%,
        rgba(16,43,48,.92) 18%,
        rgba(16,43,48,.50) 48%,
        rgba(16,43,48,.10) 76%,
        transparent 100%
      ) !important;
  }

  .loginDesktopVariant1PhotoFrame picture{
    position:absolute !important;
    inset:0 !important;
  }

  .loginDesktopVariant1Photo{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:75% center !important;

    transform:
      scale(1.08)
      translateX(-1.5%) !important;
  }

  .loginDesktopVariant1PhotoTint{
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.01) 0%,
        rgba(15,159,141,.00) 64%,
        rgba(15,159,141,.15) 100%
      ) !important;
  }

  .loginDesktopVariant1FloatingTrust{
    right:34px !important;
    bottom:52px !important;

    width:54px !important;
    height:54px !important;

    border-radius:18px !important;

    font-size:21px !important;
  }

  /* =======================================================
     RIGHT AUTH SECTION - FULL HEIGHT
     ======================================================= */
  .loginDesktopFormPanel{
    position:relative !important;

    min-width:0 !important;
    min-height:
      calc(100svh - 88px) !important;

    margin:0 !important;
    padding:
      clamp(54px,7vh,96px)
      clamp(44px,4.3vw,86px) !important;

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

    background:
      radial-gradient(
        circle at 92% 12%,
        rgba(15,159,141,.075),
        transparent 25%
      ),
      linear-gradient(
        160deg,
        #f7fafc 0%,
        #f3f8fb 100%
      ) !important;

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

    border-radius:0 !important;

    box-shadow:none !important;

    overflow:hidden !important;
  }

  html[data-theme="dark"]
  .loginDesktopFormPanel{
    background:
      radial-gradient(
        circle at 92% 12%,
        rgba(15,159,141,.045),
        transparent 25%
      ),
      linear-gradient(
        160deg,
        #0d272c 0%,
        #091e22 100%
      ) !important;

    border-left-color:
      rgba(255,255,255,.055) !important;
  }

  /* Card autentikasi sedikit lebih besar, tetapi tetap elegan */
  .loginDesktopFormPanel .loginCard{
    width:min(520px,100%) !important;
    max-width:520px !important;

    margin:0 auto !important;

    padding:
      30px
      30px
      27px !important;

    border-radius:26px !important;

    box-shadow:
      0 22px 54px rgba(16,70,80,.11),
      0 6px 17px rgba(16,70,80,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .loginDesktopFormPanel .loginCardTop{
    margin-bottom:20px !important;
  }

  .loginDesktopFormPanel
  .loginHeroBrandLogoWrap{
    width:62px !important;
    min-width:62px !important;
    height:62px !important;
    min-height:62px !important;
  }

  .loginDesktopFormPanel
  .loginPanelTitle{
    font-size:26px !important;
  }

  .loginDesktopFormPanel
  .loginPanelSub{
    max-width:350px !important;

    font-size:12.5px !important;
    line-height:1.48 !important;
  }

  .loginDesktopFormPanel
  .authTabLabel{
    min-height:46px !important;
    font-size:13px !important;
  }

  .loginDesktopFormPanel
  .authForm{
    gap:11px !important;
  }

  .loginDesktopFormPanel
  .inputGroup label{
    font-size:12px !important;
  }

  .loginDesktopFormPanel
  .inputShell{
    min-height:50px !important;
    padding:0 14px !important;
    border-radius:14px !important;
  }

  .loginDesktopFormPanel
  .inputShell input{
    font-size:13px !important;
  }

  .loginDesktopFormPanel
  #signInSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel
  #signUpSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction{
    min-height:50px !important;
    font-size:12.5px !important;
  }

  /* =======================================================
     FOOTER MENEMPEL NATURAL SETELAH HERO
     ======================================================= */
  .loginDesktopOfficialFooter{
    margin-top:0 !important;
  }
}


/* =========================================================
   COMPACT LAPTOP 980-1180
   ========================================================= */
@media (min-width:980px) and (max-width:1180px){

  .hero.heroSplit.loginHero{
    grid-template-columns:
      minmax(0,1.40fr)
      minmax(380px,.90fr) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-left:40px !important;

    grid-template-columns:
      minmax(320px,.94fr)
      minmax(250px,.76fr) !important;

    gap:18px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:54px !important;
    min-width:54px !important;
    height:54px !important;
    min-height:54px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy strong{
    font-size:28px !important;
  }

  .loginDesktopVariant1Headline{
    font-size:
      clamp(34px,3.65vw,46px) !important;

    margin-top:28px !important;
  }

  .loginDesktopVariant1Description{
    max-width:430px !important;
    font-size:12px !important;
  }

  .loginDesktopVariant1Benefits{
    max-width:500px !important;
    gap:8px !important;
    margin-top:22px !important;
  }

  .loginDesktopVariant1Benefit{
    min-height:112px !important;
    padding:13px 9px 11px !important;
  }

  .loginDesktopVariant1BenefitIcon{
    width:31px !important;
    height:31px !important;
    margin-bottom:7px !important;
    font-size:12.5px !important;
  }

  .loginDesktopVariant1Benefit strong{
    font-size:9px !important;
  }

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

  .loginDesktopVariant1Institution{
    margin-top:18px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    height:25px !important;
    max-width:110px !important;
  }

  .loginDesktopVariant1VisualAura{
    width:340px !important;
    height:440px !important;
  }

  .loginDesktopVariant1Photo{
    object-position:75% center !important;
  }

  .loginDesktopFormPanel{
    padding:
      34px
      24px !important;
  }

  .loginDesktopFormPanel .loginCard{
    width:min(450px,100%) !important;
    max-width:450px !important;

    padding:
      23px
      21px
      21px !important;
  }

  .loginDesktopFormPanel
  .loginPanelTitle{
    font-size:22px !important;
  }

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

  .loginDesktopFormPanel
  .inputShell{
    min-height:45px !important;
  }

  .loginDesktopFormPanel
  #signInSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel
  #signUpSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction{
    min-height:45px !important;
  }
}


/* =========================================================
   LARGE DESKTOP >=1440
   ========================================================= */
@media (min-width:1440px){

  .hero.heroSplit.loginHero{
    grid-template-columns:
      minmax(0,1.55fr)
      minmax(470px,.82fr) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-left:
      clamp(72px,5vw,110px) !important;

    grid-template-columns:
      minmax(440px,.94fr)
      minmax(420px,1fr) !important;

    gap:
      clamp(36px,3vw,60px) !important;
  }

  .loginDesktopVariant1Headline{
    max-width:680px !important;
  }

  .loginDesktopVariant1VisualAura{
    width:600px !important;
    height:700px !important;
  }

  .loginDesktopFormPanel{
    padding-left:
      clamp(52px,4vw,84px) !important;
    padding-right:
      clamp(52px,4vw,84px) !important;
  }
}


/* =========================================================
   SHORT LAPTOP HEIGHT <=820
   ========================================================= */
@media (min-width:980px) and (max-height:820px){

  .hero.heroSplit.loginHero,
  .loginDesktopIntro.loginDesktopIntro--variant1,
  .loginDesktopVariant1Visual,
  .loginDesktopFormPanel{
    min-height:
      calc(100svh - 78px) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-top:34px !important;
    padding-bottom:32px !important;
  }

  .loginDesktopVariant1Headline{
    margin-top:22px !important;
    font-size:
      clamp(34px,3.2vw,46px) !important;
  }

  .loginDesktopVariant1Description{
    margin-top:14px !important;
  }

  .loginDesktopVariant1Benefits{
    margin-top:18px !important;
  }

  .loginDesktopVariant1Benefit{
    min-height:106px !important;
    padding-top:11px !important;
    padding-bottom:10px !important;
  }

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

  .loginDesktopFormPanel{
    padding-top:26px !important;
    padding-bottom:26px !important;
  }

  .loginDesktopFormPanel .loginCard{
    padding-top:22px !important;
    padding-bottom:20px !important;
  }
}

/* =========================================================
   FINAL V13 - DESKTOP LEFT CONTENT PROPORTIONAL
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Layout full-width V12 tetap dipertahankan.
   - Area kiri dibuat lebih proporsional dan tidak terlalu besar.
   - Foto, panel login, navbar, footer, auth, dan HP tidak diubah.
   ========================================================= */

@media (min-width:980px){

  /* Copy column lebih ramping */
  .loginDesktopVariant1Copy{
    width:100% !important;
    max-width:525px !important;
  }

  /* Brand hero diperkecil */
  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand{
    gap:10px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:52px !important;
    min-width:52px !important;
    height:52px !important;
    min-height:52px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogo{
    width:46px !important;
    height:46px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy strong{
    font-size:27px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy small{
    margin-top:4px !important;
    font-size:8.5px !important;
  }

  /* Headline utama dikurangi cukup signifikan */
  .loginDesktopVariant1Headline{
    max-width:540px !important;

    margin-top:
      clamp(26px,3.1vh,36px) !important;

    font-size:
      clamp(36px,3.35vw,52px) !important;

    line-height:1.035 !important;
    letter-spacing:-.046em !important;
  }

  .loginDesktopVariant1Headline span{
    margin-top:3px !important;
  }

  /* Deskripsi */
  .loginDesktopVariant1Description{
    max-width:475px !important;

    margin-top:15px !important;

    font-size:12.5px !important;
    line-height:1.62 !important;
  }

  /* 3 trust cards dibuat lebih compact */
  .loginDesktopVariant1Benefits{
    max-width:520px !important;

    margin-top:
      clamp(20px,2.6vh,28px) !important;

    gap:10px !important;
  }

  .loginDesktopVariant1Benefit{
    min-height:112px !important;

    padding:
      14px
      10px
      12px !important;

    border-radius:16px !important;
  }

  .loginDesktopVariant1BenefitIcon{
    width:32px !important;
    height:32px !important;

    margin-bottom:8px !important;

    border-radius:11px !important;

    font-size:13px !important;
  }

  .loginDesktopVariant1Benefit strong{
    font-size:9.5px !important;
    line-height:1.22 !important;
  }

  .loginDesktopVariant1Benefit small{
    margin-top:5px !important;

    font-size:7.8px !important;
    line-height:1.40 !important;
  }

  /* Lockup RSAB dibuat lebih ringan */
  .loginDesktopVariant1Institution{
    margin-top:
      clamp(17px,2.2vh,24px) !important;

    padding:
      9px
      13px !important;

    border-radius:14px !important;
  }

  .loginDesktopVariant1InstitutionLabel{
    font-size:6.8px !important;
  }

  .loginDesktopVariant1InstitutionBody{
    gap:8px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    height:27px !important;
    max-width:120px !important;
  }

  .loginDesktopVariant1InstitutionBody strong{
    font-size:9px !important;
  }

  .loginDesktopVariant1InstitutionBody small{
    font-size:7.5px !important;
  }

  /* Beri sedikit lebih banyak napas pada visual/foto */
  .loginDesktopIntro.loginDesktopIntro--variant1{
    grid-template-columns:
      minmax(330px,.82fr)
      minmax(390px,1.08fr) !important;

    gap:
      clamp(24px,2.6vw,46px) !important;
  }
}


/* =========================================================
   COMPACT LAPTOP 980-1180
   ========================================================= */
@media (min-width:980px) and (max-width:1180px){

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-left:36px !important;

    grid-template-columns:
      minmax(285px,.82fr)
      minmax(265px,.78fr) !important;

    gap:14px !important;
  }

  .loginDesktopVariant1Copy{
    max-width:430px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogo{
    width:42px !important;
    height:42px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy strong{
    font-size:24px !important;
  }

  .loginDesktopVariant1Headline{
    max-width:440px !important;

    margin-top:22px !important;

    font-size:
      clamp(30px,3vw,39px) !important;
  }

  .loginDesktopVariant1Description{
    max-width:380px !important;
    margin-top:12px !important;
    font-size:10.8px !important;
  }

  .loginDesktopVariant1Benefits{
    max-width:440px !important;
    margin-top:17px !important;
    gap:7px !important;
  }

  .loginDesktopVariant1Benefit{
    min-height:98px !important;
    padding:10px 7px 9px !important;
  }

  .loginDesktopVariant1BenefitIcon{
    width:27px !important;
    height:27px !important;
    margin-bottom:6px !important;
    font-size:11px !important;
  }

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

  .loginDesktopVariant1Benefit small{
    font-size:6.8px !important;
  }

  .loginDesktopVariant1Institution{
    margin-top:14px !important;
    padding:7px 10px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    height:22px !important;
    max-width:98px !important;
  }
}


/* =========================================================
   LARGE DESKTOP >=1440
   Jangan membesar lagi secara agresif.
   ========================================================= */
@media (min-width:1440px){

  .loginDesktopVariant1Copy{
    max-width:560px !important;
  }

  .loginDesktopVariant1Headline{
    max-width:570px !important;

    font-size:
      clamp(40px,3.25vw,54px) !important;
  }

  .loginDesktopVariant1Description{
    max-width:500px !important;
    font-size:13px !important;
  }

  .loginDesktopVariant1Benefits{
    max-width:535px !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    grid-template-columns:
      minmax(360px,.82fr)
      minmax(430px,1.10fr) !important;
  }
}


/* =========================================================
   SHORT LAPTOP HEIGHT <=820
   ========================================================= */
@media (min-width:980px) and (max-height:820px){

  .loginDesktopVariant1Headline{
    margin-top:18px !important;

    font-size:
      clamp(30px,2.85vw,40px) !important;
  }

  .loginDesktopVariant1Description{
    margin-top:10px !important;
    font-size:10.8px !important;
  }

  .loginDesktopVariant1Benefits{
    margin-top:14px !important;
  }

  .loginDesktopVariant1Benefit{
    min-height:92px !important;
  }

  .loginDesktopVariant1Institution{
    margin-top:12px !important;
  }
}

/* =========================================================
   FINAL V14 - DESKTOP LEFT SECTION COMPACT
   =========================================================
   TARGET:
   - HANYA desktop / laptop >=980px.
   - Mengecilkan SELURUH ISI:
       .loginDesktopIntro.loginDesktopIntro--variant1
   - Copy, benefit cards, RSAB lockup, foto, aura, floating
     trust dibuat lebih kecil sebagai satu komposisi.
   - Area section tetap lega agar tidak sesak.
   - Panel login kanan, navbar, footer, auth, dan HP tetap.
   ========================================================= */

@media (min-width:980px){

  /* -------------------------------------------------------
     SECTION KIRI
     Tetap memenuhi kolom, tetapi kontennya tidak lagi oversized.
     ------------------------------------------------------- */
  .loginDesktopIntro.loginDesktopIntro--variant1{
    min-height:
      calc(100svh - 88px) !important;

    padding:
      clamp(38px,5vh,58px)
      clamp(18px,1.8vw,30px)
      clamp(38px,5vh,58px)
      clamp(40px,3.7vw,68px) !important;

    grid-template-columns:
      minmax(300px,.86fr)
      minmax(300px,.90fr) !important;

    align-items:center !important;

    gap:
      clamp(18px,2vw,32px) !important;
  }

  /* -------------------------------------------------------
     COPY BLOCK
     ------------------------------------------------------- */
  .loginDesktopVariant1Copy{
    width:100% !important;
    max-width:455px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand{
    gap:8px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogo{
    width:39px !important;
    height:39px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy strong{
    font-size:23px !important;
    line-height:1 !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy small{
    margin-top:3px !important;
    font-size:7.5px !important;
  }

  /* -------------------------------------------------------
     HEADLINE
     ------------------------------------------------------- */
  .loginDesktopVariant1Headline{
    width:100% !important;
    max-width:465px !important;

    margin-top:
      clamp(20px,2.5vh,28px) !important;

    font-size:
      clamp(30px,2.75vw,43px) !important;

    line-height:1.045 !important;
    letter-spacing:-.044em !important;
  }

  .loginDesktopVariant1Headline span{
    margin-top:2px !important;
  }

  /* -------------------------------------------------------
     DESCRIPTION
     ------------------------------------------------------- */
  .loginDesktopVariant1Description{
    max-width:420px !important;

    margin-top:12px !important;

    font-size:11.5px !important;
    line-height:1.58 !important;
  }

  /* -------------------------------------------------------
     BENEFITS
     ------------------------------------------------------- */
  .loginDesktopVariant1Benefits{
    width:100% !important;
    max-width:455px !important;

    margin-top:
      clamp(16px,2vh,21px) !important;

    gap:7px !important;
  }

  .loginDesktopVariant1Benefit{
    min-height:92px !important;

    padding:
      10px
      7px
      9px !important;

    border-radius:14px !important;
  }

  .loginDesktopVariant1BenefitIcon{
    width:27px !important;
    height:27px !important;

    margin-bottom:6px !important;

    border-radius:9px !important;

    font-size:11px !important;
  }

  .loginDesktopVariant1Benefit strong{
    font-size:8.4px !important;
    line-height:1.20 !important;
  }

  .loginDesktopVariant1Benefit small{
    margin-top:4px !important;

    font-size:6.9px !important;
    line-height:1.34 !important;
  }

  /* -------------------------------------------------------
     RSAB LOCKUP
     ------------------------------------------------------- */
  .loginDesktopVariant1Institution{
    margin-top:
      clamp(13px,1.7vh,18px) !important;

    padding:
      7px
      10px !important;

    gap:4px !important;

    border-radius:12px !important;
  }

  .loginDesktopVariant1InstitutionLabel{
    font-size:6px !important;
  }

  .loginDesktopVariant1InstitutionBody{
    gap:7px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    height:22px !important;
    max-width:98px !important;
  }

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

  .loginDesktopVariant1InstitutionBody small{
    margin-top:1px !important;
    font-size:6.7px !important;
  }

  /* -------------------------------------------------------
     VISUAL COLUMN
     Tidak lagi dipaksa sebesar viewport.
     ------------------------------------------------------- */
  .loginDesktopVariant1Visual{
    align-self:center !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;

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

    overflow:visible !important;
  }

  /* Foto dibuat menjadi objek hero yang lebih terkendali */
  .loginDesktopVariant1PhotoFrame{
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    width:
      min(330px,92%) !important;

    height:
      clamp(410px,57vh,510px) !important;

    margin:0 auto !important;

    border-radius:
      44% 44% 18% 18% /
      22% 22% 7% 7% !important;

    overflow:hidden !important;

    box-shadow:
      0 20px 38px rgba(16,70,80,.09) !important;
  }

  /* Hilangkan fade putih lebar versi full-height */
  .loginDesktopVariant1PhotoFrame::before{
    width:58px !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.72) 0%,
        rgba(255,255,255,.28) 48%,
        transparent 100%
      ) !important;
  }

  html[data-theme="dark"]
  .loginDesktopVariant1PhotoFrame::before{
    background:
      linear-gradient(
        90deg,
        rgba(16,43,48,.72) 0%,
        rgba(16,43,48,.28) 48%,
        transparent 100%
      ) !important;
  }

  .loginDesktopVariant1Photo{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:75% center !important;

    transform:
      scale(1.07)
      translateX(-1%) !important;
  }

  /* Aura mengikuti ukuran foto baru */
  .loginDesktopVariant1VisualAura{
    width:330px !important;
    height:400px !important;

    right:auto !important;
    left:50% !important;
    bottom:4% !important;

    transform:
      translateX(-46%)
      rotate(4deg) !important;

    opacity:.82 !important;
  }

  /* Shield ikut dikecilkan dan ditempel ke visual */
  .loginDesktopVariant1FloatingTrust{
    right:
      clamp(8px,1vw,18px) !important;

    bottom:
      clamp(26px,4vh,42px) !important;

    width:42px !important;
    height:42px !important;

    border-radius:14px !important;

    font-size:16px !important;

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


/* =========================================================
   COMPACT LAPTOP 980-1180
   ========================================================= */
@media (min-width:980px) and (max-width:1180px){

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding:
      28px
      14px
      28px
      30px !important;

    grid-template-columns:
      minmax(255px,.84fr)
      minmax(220px,.72fr) !important;

    gap:10px !important;
  }

  .loginDesktopVariant1Copy{
    max-width:380px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    min-height:40px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand .heroBrandLogo{
    width:35px !important;
    height:35px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy strong{
    font-size:20px !important;
  }

  .loginDesktopVariant1Headline{
    max-width:390px !important;

    margin-top:17px !important;

    font-size:
      clamp(26px,2.65vw,34px) !important;
  }

  .loginDesktopVariant1Description{
    max-width:350px !important;
    margin-top:9px !important;
    font-size:9.8px !important;
  }

  .loginDesktopVariant1Benefits{
    max-width:380px !important;
    margin-top:13px !important;
    gap:6px !important;
  }

  .loginDesktopVariant1Benefit{
    min-height:82px !important;
    padding:8px 5px 7px !important;
  }

  .loginDesktopVariant1BenefitIcon{
    width:24px !important;
    height:24px !important;
    margin-bottom:5px !important;
    font-size:10px !important;
  }

  .loginDesktopVariant1Benefit strong{
    font-size:7.3px !important;
  }

  .loginDesktopVariant1Benefit small{
    font-size:6px !important;
  }

  .loginDesktopVariant1Institution{
    margin-top:11px !important;
    padding:6px 8px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    height:19px !important;
    max-width:84px !important;
  }

  .loginDesktopVariant1PhotoFrame{
    width:min(265px,94%) !important;
    height:385px !important;
  }

  .loginDesktopVariant1VisualAura{
    width:255px !important;
    height:320px !important;
  }

  .loginDesktopVariant1FloatingTrust{
    right:2px !important;
    bottom:28px !important;

    width:36px !important;
    height:36px !important;

    border-radius:12px !important;

    font-size:14px !important;
  }
}


/* =========================================================
   LARGE DESKTOP >=1440
   Tetap compact meskipun viewport besar.
   ========================================================= */
@media (min-width:1440px){

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-left:
      clamp(52px,4vw,78px) !important;

    grid-template-columns:
      minmax(340px,.84fr)
      minmax(330px,.88fr) !important;

    gap:
      clamp(22px,2.2vw,38px) !important;
  }

  .loginDesktopVariant1Copy{
    max-width:485px !important;
  }

  .loginDesktopVariant1Headline{
    max-width:500px !important;

    font-size:
      clamp(34px,2.7vw,45px) !important;
  }

  .loginDesktopVariant1Description{
    max-width:430px !important;
    font-size:11.8px !important;
  }

  .loginDesktopVariant1Benefits{
    max-width:470px !important;
  }

  .loginDesktopVariant1PhotoFrame{
    width:min(350px,92%) !important;
    height:520px !important;
  }

  .loginDesktopVariant1VisualAura{
    width:360px !important;
    height:430px !important;
  }
}


/* =========================================================
   SHORT LAPTOP HEIGHT <=820
   ========================================================= */
@media (min-width:980px) and (max-height:820px){

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-top:24px !important;
    padding-bottom:24px !important;
  }

  .loginDesktopVariant1Headline{
    margin-top:15px !important;

    font-size:
      clamp(26px,2.45vw,34px) !important;
  }

  .loginDesktopVariant1Description{
    margin-top:8px !important;
    font-size:9.8px !important;
  }

  .loginDesktopVariant1Benefits{
    margin-top:11px !important;
  }

  .loginDesktopVariant1Benefit{
    min-height:78px !important;
  }

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

  .loginDesktopVariant1PhotoFrame{
    height:
      min(390px,58vh) !important;
  }
}

/* =========================================================
   FINAL V15 - DESKTOP LOGIN TANPA FOTO
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Foto ibu hamil dihapus dari HTML.
   - Desktop menjadi 2 area:
       kiri  = informasi Bumil Ku
       kanan = panel autentikasi
   - Konten kiri dinaikkan sedikit agar tidak terasa terlalu bawah.
   - Headline dikunci menjadi tepat 2 baris:
       1. Pendamping Kehamilan
       2. Terpercaya untuk Ibu & Buah Hati
   - Navbar, footer, auth, Firebase, redirect, sidebar HP,
     dan seluruh <=979px tetap.
   ========================================================= */

@media (min-width:980px){

  .hero.heroSplit.loginHero{
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    min-height:calc(100svh - 88px) !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.48fr) minmax(430px,.82fr) !important;
    align-items:stretch !important;
    gap:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:
      linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 64%,
        #f6fafc 64%,
        #f4f8fb 100%
      ) !important;
    box-shadow:none !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }

  html[data-theme="dark"] .hero.heroSplit.loginHero{
    background:
      linear-gradient(
        90deg,
        #102b30 0%,
        #102b30 64%,
        #0c252a 64%,
        #091e22 100%
      ) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    grid-column:1 !important;
    position:relative !important;
    min-width:0 !important;
    min-height:calc(100svh - 88px) !important;
    padding:
      clamp(38px,5vh,58px)
      clamp(56px,5.4vw,104px)
      clamp(46px,6vh,72px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:0 !important;
    text-align:left !important;
    background:
      radial-gradient(circle at 8% 16%,rgba(15,159,141,.075),transparent 24%),
      radial-gradient(circle at 50% 100%,rgba(15,159,141,.050),transparent 27%),
      linear-gradient(135deg,#ffffff 0%,#fcfefe 62%,#f5fbfa 100%) !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  html[data-theme="dark"] .loginDesktopIntro.loginDesktopIntro--variant1{
    background:
      radial-gradient(circle at 8% 16%,rgba(15,159,141,.055),transparent 24%),
      radial-gradient(circle at 50% 100%,rgba(15,159,141,.024),transparent 27%),
      linear-gradient(135deg,#102b30 0%,#0f292e 62%,#0b2227 100%) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1::before{
    top:10% !important;
    left:46% !important;
    width:120px !important;
    height:120px !important;
    background:rgba(15,159,141,.042) !important;
    box-shadow:0 0 0 20px rgba(15,159,141,.014) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1::after{
    left:-8% !important;
    right:-5% !important;
    bottom:-155px !important;
    height:285px !important;
    background:
      linear-gradient(
        180deg,
        rgba(15,159,141,.020) 0%,
        rgba(15,159,141,.074) 44%,
        rgba(14,147,130,.120) 100%
      ) !important;
  }

  .loginDesktopVariant1Copy{
    position:relative !important;
    z-index:4 !important;
    width:100% !important;
    max-width:760px !important;
    margin-top:clamp(-30px,-2.8vh,-14px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand{
    gap:9px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogo{
    width:41px !important;
    height:41px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy strong{
    font-size:24px !important;
    line-height:1 !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy small{
    margin-top:3px !important;
    font-size:7.8px !important;
  }

  .loginDesktopVariant1Headline{
    width:auto !important;
    max-width:none !important;
    margin:clamp(24px,3vh,34px) 0 0 !important;
    color:#17384c !important;
    font-size:clamp(34px,3vw,48px) !important;
    line-height:1.04 !important;
    letter-spacing:-.046em !important;
    font-weight:700 !important;
    white-space:nowrap !important;
  }

  .loginDesktopVariant1Headline span{
    display:block !important;
    width:max-content !important;
    max-width:none !important;
    margin-top:5px !important;
    white-space:nowrap !important;
    color:transparent !important;
    background:
      linear-gradient(
        90deg,
        #0e9382 0%,
        #0f9f8d 38%,
        #43b796 70%,
        #82c96f 100%
      ) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
  }

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

  .loginDesktopVariant1Description{
    width:100% !important;
    max-width:610px !important;
    margin:16px 0 0 !important;
    color:#65788a !important;
    font-size:12.5px !important;
    line-height:1.62 !important;
    font-weight:500 !important;
  }

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

  .loginDesktopVariant1Benefits{
    width:100% !important;
    max-width:670px !important;
    margin-top:clamp(22px,2.8vh,30px) !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .loginDesktopVariant1Benefit{
    min-width:0 !important;
    min-height:108px !important;
    padding:13px 10px 12px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
    border-radius:15px !important;
  }

  .loginDesktopVariant1BenefitIcon{
    width:30px !important;
    height:30px !important;
    margin-bottom:7px !important;
    border-radius:10px !important;
    font-size:12px !important;
  }

  .loginDesktopVariant1Benefit strong{
    font-size:9.2px !important;
    line-height:1.22 !important;
  }

  .loginDesktopVariant1Benefit small{
    margin-top:5px !important;
    font-size:7.5px !important;
    line-height:1.38 !important;
  }

  .loginDesktopVariant1Institution{
    margin-top:clamp(18px,2.2vh,24px) !important;
    padding:8px 12px !important;
    border-radius:13px !important;
  }

  .loginDesktopVariant1InstitutionLabel{
    font-size:6.4px !important;
  }

  .loginDesktopVariant1InstitutionBody{
    gap:8px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    height:24px !important;
    max-width:108px !important;
  }

  .loginDesktopVariant1InstitutionBody strong{
    font-size:8.5px !important;
  }

  .loginDesktopVariant1InstitutionBody small{
    font-size:7px !important;
  }

  /* Safety lock if an old cached HTML still contains the visual. */
  .loginDesktopVariant1Visual,
  .loginDesktopVariant1VisualAura,
  .loginDesktopVariant1PhotoFrame,
  .loginDesktopVariant1Photo,
  .loginDesktopVariant1PhotoTint,
  .loginDesktopVariant1FloatingTrust{
    display:none !important;
  }

  .loginDesktopFormPanel{
    grid-column:2 !important;
    position:relative !important;
    min-width:0 !important;
    min-height:calc(100svh - 88px) !important;
    margin:0 !important;
    padding:
      clamp(46px,6vh,78px)
      clamp(38px,3.5vw,68px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:
      radial-gradient(circle at 92% 12%,rgba(15,159,141,.075),transparent 25%),
      linear-gradient(160deg,#f7fafc 0%,#f3f8fb 100%) !important;
    border:0 !important;
    border-left:1px solid rgba(58,105,119,.075) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  html[data-theme="dark"] .loginDesktopFormPanel{
    background:
      radial-gradient(circle at 92% 12%,rgba(15,159,141,.045),transparent 25%),
      linear-gradient(160deg,#0d272c 0%,#091e22 100%) !important;
    border-left-color:rgba(255,255,255,.055) !important;
  }

  .loginDesktopFormPanel .loginCard{
    width:min(500px,100%) !important;
    max-width:500px !important;
    margin:0 auto !important;
    padding:27px 27px 24px !important;
    border-radius:25px !important;
    box-shadow:
      0 20px 50px rgba(16,70,80,.10),
      0 5px 15px rgba(16,70,80,.04),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .loginDesktopFormPanel .loginCardTop{
    margin-bottom:17px !important;
  }

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

  .loginDesktopFormPanel .loginPanelTitle{
    font-size:23px !important;
  }

  .loginDesktopFormPanel .loginPanelSub{
    max-width:330px !important;
    font-size:11.5px !important;
    line-height:1.44 !important;
  }

  .loginDesktopFormPanel .authTabLabel{
    min-height:43px !important;
    font-size:12.5px !important;
  }

  .loginDesktopFormPanel .inputShell{
    min-height:47px !important;
  }

  .loginDesktopFormPanel #signInSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel #signUpSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel #googleLoginBtn.loginIndexGoogleAction{
    min-height:47px !important;
  }
}

@media (min-width:980px) and (max-width:1180px){

  .hero.heroSplit.loginHero{
    grid-template-columns:minmax(0,1.40fr) minmax(370px,.86fr) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding:30px 32px 38px !important;
  }

  .loginDesktopVariant1Copy{
    max-width:620px !important;
    margin-top:-18px !important;
  }

  .loginDesktopVariant1Headline{
    margin-top:20px !important;
    font-size:clamp(27px,2.55vw,34px) !important;
  }

  .loginDesktopVariant1Description{
    max-width:520px !important;
    margin-top:12px !important;
    font-size:10.5px !important;
  }

  .loginDesktopVariant1Benefits{
    max-width:590px !important;
    margin-top:18px !important;
    gap:8px !important;
  }

  .loginDesktopVariant1Benefit{
    min-height:92px !important;
    padding:10px 7px 9px !important;
  }

  .loginDesktopVariant1BenefitIcon{
    width:26px !important;
    height:26px !important;
    margin-bottom:6px !important;
    font-size:10.5px !important;
  }

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

  .loginDesktopVariant1Benefit small{
    font-size:6.5px !important;
  }

  .loginDesktopVariant1Institution{
    margin-top:14px !important;
  }

  .loginDesktopFormPanel{
    padding:30px 24px !important;
  }

  .loginDesktopFormPanel .loginCard{
    width:min(445px,100%) !important;
    max-width:445px !important;
    padding:22px 20px 20px !important;
  }
}

@media (min-width:1440px){

  .hero.heroSplit.loginHero{
    grid-template-columns:minmax(0,1.55fr) minmax(450px,.78fr) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-left:clamp(64px,5vw,102px) !important;
    padding-right:clamp(64px,5vw,102px) !important;
  }

  .loginDesktopVariant1Copy{
    max-width:800px !important;
  }

  .loginDesktopVariant1Headline{
    font-size:clamp(38px,2.75vw,50px) !important;
  }

  .loginDesktopVariant1Benefits{
    max-width:690px !important;
  }
}

@media (min-width:980px) and (max-height:820px){

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-top:24px !important;
    padding-bottom:28px !important;
  }

  .loginDesktopVariant1Copy{
    margin-top:-24px !important;
  }

  .loginDesktopVariant1Headline{
    margin-top:17px !important;
    font-size:clamp(27px,2.4vw,34px) !important;
  }

  .loginDesktopVariant1Description{
    margin-top:9px !important;
  }

  .loginDesktopVariant1Benefits{
    margin-top:14px !important;
  }

  .loginDesktopVariant1Benefit{
    min-height:84px !important;
  }

  .loginDesktopVariant1Institution{
    margin-top:11px !important;
  }

  .loginDesktopFormPanel{
    padding-top:24px !important;
    padding-bottom:24px !important;
  }
}

/* =========================================================
   FINAL V16 - DESKTOP AUTH BACKGROUND MATCH LEFT SECTION
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Background .loginDesktopFormPanel dibuat sama dengan
     .loginDesktopIntro.loginDesktopIntro--variant1.
   - Menghilangkan perbedaan warna bidang kiri dan kanan.
   - Login card tetap putih / dark surface seperti sebelumnya.
   - Auth, navbar, footer, dan HP tidak berubah.
   ========================================================= */

@media (min-width:980px){

  /* -------------------------------------------------------
     Samakan surface kanan dengan surface kiri.
     ------------------------------------------------------- */
  .loginDesktopFormPanel{
    background:
      radial-gradient(
        circle at 8% 16%,
        rgba(15,159,141,.075),
        transparent 24%
      ),
      radial-gradient(
        circle at 50% 100%,
        rgba(15,159,141,.050),
        transparent 27%
      ),
      linear-gradient(
        135deg,
        #ffffff 0%,
        #fcfefe 62%,
        #f5fbfa 100%
      ) !important;

    /*
     * Divider kiri dihapus agar kedua area terlihat benar-benar
     * menyatu menjadi satu background.
     */
    border-left:0 !important;
  }

  html[data-theme="dark"]
  .loginDesktopFormPanel{
    background:
      radial-gradient(
        circle at 8% 16%,
        rgba(15,159,141,.055),
        transparent 24%
      ),
      radial-gradient(
        circle at 50% 100%,
        rgba(15,159,141,.024),
        transparent 27%
      ),
      linear-gradient(
        135deg,
        #102b30 0%,
        #0f292e 62%,
        #0b2227 100%
      ) !important;

    border-left:0 !important;
  }

  /*
   * Outer hero juga memakai warna dasar yang sama agar tidak
   * muncul garis/perbedaan warna di pertemuan kedua kolom.
   */
  .hero.heroSplit.loginHero{
    background:
      linear-gradient(
        135deg,
        #ffffff 0%,
        #fcfefe 62%,
        #f5fbfa 100%
      ) !important;
  }

  html[data-theme="dark"]
  .hero.heroSplit.loginHero{
    background:
      linear-gradient(
        135deg,
        #102b30 0%,
        #0f292e 62%,
        #0b2227 100%
      ) !important;
  }
}

/* =========================================================
   FINAL V17 - DESKTOP HERO ONE CONTINUOUS BACKGROUND
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Hero kiri + kanan memakai SATU background yang sama.
   - Background hanya dimiliki oleh .hero.heroSplit.loginHero.
   - .loginDesktopIntro--variant1 dan .loginDesktopFormPanel
     dibuat transparent agar tidak ada patahan warna.
   - Tidak mengubah layout, auth, navbar, footer, atau HP.
   ========================================================= */

@media (min-width:980px){

  /* =======================================================
     SATU BACKGROUND UNTUK SELURUH HERO
     ======================================================= */
  .hero.heroSplit.loginHero{
    background:
      radial-gradient(
        circle at 8% 16%,
        rgba(15,159,141,.075),
        transparent 24%
      ),
      radial-gradient(
        circle at 50% 100%,
        rgba(15,159,141,.050),
        transparent 27%
      ),
      radial-gradient(
        circle at 92% 14%,
        rgba(15,159,141,.035),
        transparent 24%
      ),
      linear-gradient(
        135deg,
        #ffffff 0%,
        #fcfefe 62%,
        #f5fbfa 100%
      ) !important;

    background-color:#ffffff !important;
  }

  html[data-theme="dark"]
  .hero.heroSplit.loginHero{
    background:
      radial-gradient(
        circle at 8% 16%,
        rgba(15,159,141,.055),
        transparent 24%
      ),
      radial-gradient(
        circle at 50% 100%,
        rgba(15,159,141,.024),
        transparent 27%
      ),
      radial-gradient(
        circle at 92% 14%,
        rgba(15,159,141,.022),
        transparent 24%
      ),
      linear-gradient(
        135deg,
        #102b30 0%,
        #0f292e 62%,
        #0b2227 100%
      ) !important;

    background-color:#102b30 !important;
  }

  /* =======================================================
     KIRI DAN KANAN TIDAK PUNYA BACKGROUND SENDIRI
     ======================================================= */
  .loginDesktopIntro.loginDesktopIntro--variant1,
  .loginDesktopFormPanel{
    background:transparent !important;
    background-image:none !important;
    background-color:transparent !important;
  }

  html[data-theme="dark"]
  .loginDesktopIntro.loginDesktopIntro--variant1,
  html[data-theme="dark"]
  .loginDesktopFormPanel{
    background:transparent !important;
    background-image:none !important;
    background-color:transparent !important;
  }

  /* Hilangkan seluruh divider / edge yang dapat membentuk seam. */
  .loginDesktopFormPanel{
    border-left:0 !important;
    box-shadow:none !important;
  }

  /*
   * Pseudo dekorasi kiri tetap boleh tampil,
   * tetapi tidak memakai warna solid yang menutup bidang besar.
   */
  .loginDesktopIntro.loginDesktopIntro--variant1::before{
    background:
      rgba(15,159,141,.035) !important;

    box-shadow:
      0 0 0 20px rgba(15,159,141,.010) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1::after{
    background:
      linear-gradient(
        180deg,
        rgba(15,159,141,.012) 0%,
        rgba(15,159,141,.045) 44%,
        rgba(14,147,130,.075) 100%
      ) !important;

    opacity:.72 !important;
  }

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

    box-shadow:
      0 0 0 20px rgba(15,159,141,.008) !important;
  }

  html[data-theme="dark"]
  .loginDesktopIntro.loginDesktopIntro--variant1::after{
    background:
      linear-gradient(
        180deg,
        rgba(15,159,141,.010) 0%,
        rgba(15,159,141,.030) 44%,
        rgba(14,147,130,.050) 100%
      ) !important;

    opacity:.62 !important;
  }

  /*
   * Main juga disamakan dengan edge hero supaya area di luar hero
   * tidak menimbulkan garis warna tipis.
   */
  main{
    background:
      linear-gradient(
        135deg,
        #ffffff 0%,
        #fcfefe 62%,
        #f5fbfa 100%
      ) !important;
  }

  html[data-theme="dark"] main{
    background:
      linear-gradient(
        135deg,
        #102b30 0%,
        #0f292e 62%,
        #0b2227 100%
      ) !important;
  }
}

/* =========================================================
   FINAL V18 - DESKTOP COPY MOVE UP 30PX
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Seluruh .loginDesktopVariant1Copy naik 30px.
   - Isi internal, spacing, ukuran, auth, navbar, footer,
     dan mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .loginDesktopVariant1Copy{
    transform:translateY(-30px) !important;
  }
}

/* =========================================================
   FINAL V19 - LOGIN DESKTOP HERO BRAND MATCH INDEX V119
   =========================================================
   KHUSUS LAPTOP / DESKTOP >=980PX

   ACUAN VISUAL:
   - .heroBrandCard pada landing page index desktop.
   - Heart logo V119.
   - True 3D outer drop-shadow.
   - Heart SVG mask yang sama.
   - Gradient text Bumil Ku yang sama.
   - Typography dan responsive scale mengikuti index.
   - Text tagline login tetap "Platform Kesehatan".
   - Posisi keseluruhan loginDesktopVariant1Copy V18 tetap.
   - HP / tablet <=979px tidak disentuh.
   ========================================================= */

@media (min-width:980px){

  /* =======================================================
     CONTAINER = heroBrandCard INDEX
     ======================================================= */
  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand{
    position:relative !important;

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

    width:auto !important;
    min-width:0 !important;

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

    gap:19px !important;

    text-align:left !important;
  }

  /* =======================================================
     OUTER LOGO SHADOW = INDEX V119
     ======================================================= */
  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoShadow{
    position:relative !important;

    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;

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

    flex:0 0 112px !important;

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

    overflow:visible !important;
    isolation:isolate !important;

    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;
  }

  html[data-theme="dark"]
  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .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;
  }

  /* =======================================================
     HEART WRAPPER = INDEX
     ======================================================= */
  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoWrap,
  html[data-theme="dark"]
  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoWrap{
    position:relative !important;

    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;

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

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

    margin:0 !important;
    padding:0 !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;

    -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;

    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoWrap::before,
  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoWrap::after{
    content:none !important;
    display:none !important;

    background:none !important;
    background-image:none !important;

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

  /* =======================================================
     LOGO IMAGE = INDEX V119
     ======================================================= */
  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoWrap
  .heroBrandLogo{
    position:relative !important;
    z-index:2 !important;

    width:98px !important;
    min-width:98px !important;
    max-width:98px !important;

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

    display:block !important;

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

    object-fit:contain !important;
    object-position:center !important;

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

    transform:
      translate3d(-0.4%,1.25%,0) !important;

    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  /* =======================================================
     COPY WRAPPER = heroBrandCopy INDEX
     ======================================================= */
  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy{
    min-width:0 !important;

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

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

    line-height:1 !important;
    text-align:left !important;
  }

  /* =======================================================
     "BUMIL KU" = heroBrandName INDEX
     ======================================================= */
  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy strong{
    display:inline-block !important;

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

    color:#087f78 !important;

    background:
      linear-gradient(
        90deg,
        #087f78 0%,
        #0b8f84 20%,
        #119b8a 38%,
        #2eaa91 52%,
        #57b980 66%,
        #7fc76b 78%,
        #a8d653 90%,
        #c4d63c 100%
      ) !important;

    background-size:100% 100% !important;
    background-repeat:no-repeat !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    -webkit-text-fill-color:transparent !important;

    font-size:48px !important;
    line-height:.97 !important;
    font-weight:700 !important;
    font-synthesis:none !important;

    letter-spacing:-.04em !important;

    white-space:nowrap !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;

    box-decoration-break:clone !important;
    -webkit-box-decoration-break:clone !important;
  }

  html[data-theme="dark"]
  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy 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;
  }

  /* =======================================================
     TAGLINE = heroBrandTagline INDEX
     Text login tetap: Platform Kesehatan
     ======================================================= */
  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy small{
    display:block !important;

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

    color:#65788a !important;

    font-size:13.5px !important;
    line-height:1.05 !important;
    font-weight:600 !important;
    letter-spacing:0 !important;

    white-space:nowrap !important;
  }

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


/* =========================================================
   V119 - COMPACT LAPTOP 980 - 1150
   ========================================================= */
@media (min-width:980px) and (max-width:1150px){

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand{
    gap:16px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoShadow{
    width:94px !important;
    min-width:94px !important;
    max-width:94px !important;

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

    flex-basis:94px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoWrap{
    width:94px !important;
    min-width:94px !important;
    max-width:94px !important;

    height:94px !important;
    min-height:94px !important;
    max-height:94px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoWrap
  .heroBrandLogo{
    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;

    height:82px !important;
    min-height:82px !important;
    max-height:82px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy strong{
    font-size:40px !important;
  }
}


/* =========================================================
   V119 - SHORT LAPTOP <=820PX HEIGHT
   ========================================================= */
@media (min-width:980px) and (max-height:820px){

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand{
    gap:16px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoShadow{
    width:90px !important;
    min-width:90px !important;
    max-width:90px !important;

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

    flex-basis:90px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoWrap{
    width:90px !important;
    min-width:90px !important;
    max-width:90px !important;

    height:90px !important;
    min-height:90px !important;
    max-height:90px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoWrap
  .heroBrandLogo{
    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;

    height:78px !important;
    min-height:78px !important;
    max-height:78px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy strong{
    font-size:40px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy small{
    margin-top:4px !important;
    font-size:11.5px !important;
  }
}


/* =========================================================
   V119 - VERY SHORT LAPTOP <=720PX HEIGHT
   ========================================================= */
@media (min-width:980px) and (max-height:720px){

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand{
    gap:15px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoShadow{
    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;

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

    flex-basis:82px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoWrap{
    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;

    height:82px !important;
    min-height:82px !important;
    max-height:82px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrand
  .heroBrandLogoWrap
  .heroBrandLogo{
    width:70px !important;
    min-width:70px !important;
    max-width:70px !important;

    height:70px !important;
    min-height:70px !important;
    max-height:70px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy strong{
    font-size:37px !important;
  }

  .loginDesktopVariant1Copy
  .loginDesktopHeroBrandCopy small{
    margin-top:4px !important;
    font-size:11.5px !important;
  }
}

/* =========================================================
   V39 - LAPTOP AUTH CARD SLIGHTLY LARGER AGAIN
   =========================================================
   TARGET:
   - Card autentikasi dibuat sedikit lebih besar lagi di laptop/desktop.
   - Seluruh isi card tetap membesar proporsional tanpa mengubah layout internal.
   - Posisi turun 30px dari V37 tetap dipertahankan.
   - Transform tetap top-center agar tab Daftar tumbuh ke bawah.
   - HP / tablet <=979px tidak disentuh.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopFormPanel .loginCard{
    transform:scale(1.05) !important;
    transform-origin:top center !important;
    will-change:transform !important;
  }
}

@media (min-width:980px) and (max-width:1180px){
  .loginDesktopFormPanel .loginCard{
    transform:scale(1.01) !important;
  }
}

@media (min-width:980px) and (max-height:820px){
  .loginDesktopFormPanel .loginCard{
    transform:scale(1.01) !important;
  }
}

@media (min-width:1440px) and (min-height:821px){
  .loginDesktopFormPanel .loginCard{
    transform:scale(1.05) !important;
  }
}

/* =========================================================
   FINAL V21 - WIDEN DESKTOP RIGHT AUTH SECTION
   =========================================================
   TARGET:
   - Memperbesar SECTION KANAN (.loginDesktopFormPanel).
   - Memberi ruang cukup untuk loginCard V20 yang sudah di-scale.
   - Card login TIDAK diubah.
   - Proporsi/visual internal card TIDAK diubah.
   - Posisi card kembali terasa lega dan center di section kanan.
   - HANYA laptop / desktop >=980px.
   - Mobile/tablet <980px tidak disentuh.
   ========================================================= */

@media (min-width:980px){

  /*
   * Sebelumnya kolom kanan terlalu kecil dibanding kolom kiri.
   * Sekarang kanan mendapat ruang riil yang cukup untuk:
   * - card baseline ~500px
   * - scale V20
   * - padding kiri/kanan section
   */
  .hero.heroSplit.loginHero{
    grid-template-columns:
      minmax(0, 1.16fr)
      minmax(560px, .96fr) !important;
  }

  .loginDesktopFormPanel{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    padding-left:clamp(34px,3vw,54px) !important;
    padding-right:clamp(34px,3vw,54px) !important;

    justify-content:center !important;
    justify-self:stretch !important;
  }
}


/* =========================================================
   COMPACT LAPTOP 980-1180PX
   Tetap dua kolom, tetapi kanan diberi prioritas ruang agar
   card scale 1.07 tidak terdesak.
   ========================================================= */
@media (min-width:980px) and (max-width:1180px){

  .hero.heroSplit.loginHero{
    grid-template-columns:
      minmax(0, 1fr)
      minmax(500px, 1.08fr) !important;
  }

  .loginDesktopFormPanel{
    padding-left:22px !important;
    padding-right:22px !important;
  }
}


/* =========================================================
   STANDARD DESKTOP 1181-1439PX
   ========================================================= */
@media (min-width:1181px) and (max-width:1439px){

  .hero.heroSplit.loginHero{
    grid-template-columns:
      minmax(0, 1.12fr)
      minmax(575px, .98fr) !important;
  }
}


/* =========================================================
   LARGE DESKTOP >=1440PX
   V20 scale 1.15 butuh area kanan lebih lapang.
   ========================================================= */
@media (min-width:1440px){

  .hero.heroSplit.loginHero{
    grid-template-columns:
      minmax(0, 1.20fr)
      minmax(620px, .96fr) !important;
  }

  .loginDesktopFormPanel{
    padding-left:clamp(42px,3.2vw,68px) !important;
    padding-right:clamp(42px,3.2vw,68px) !important;
  }
}

/* =========================================================
   FINAL V22 - REMOVE CROPPED BOTTOM TEAL SHADOW
   =========================================================
   TARGET:
   - Menghapus dekorasi / shadow teal di bagian bawah
     section kiri login desktop.
   - Sumber efek: .loginDesktopIntro--variant1::after
   - ::before tetap dipertahankan untuk ambient circle atas.
   - Konten, card benefit, institusi, login card, auth,
     navbar, footer, dan mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .loginDesktopIntro.loginDesktopIntro--variant1::after,
  html[data-theme="dark"]
  .loginDesktopIntro.loginDesktopIntro--variant1::after{
    content:none !important;
    display:none !important;

    background:none !important;
    background-image:none !important;

    box-shadow:none !important;
    filter:none !important;

    opacity:0 !important;
  }
}

/* =========================================================
   FINAL V23 - DESKTOP AUTH CARD TOP-ANCHORED GROWTH
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Posisi ATAS login card dibuat stabil.
   - Saat tab Daftar membuat card lebih tinggi, pertumbuhan
     visual hanya bergerak KE BAWAH.
   - Card tidak lagi naik / mendekati navbar.
   - Menyediakan ruang bawah riil supaya card + shadow tidak
     terlalu dekat dengan footer resmi.
   - Tampilan internal login card TIDAK diubah.
   - Scale V20 tetap dipertahankan.
   - Navbar, footer, HTML auth, Firebase, JS, dan mobile
     tidak diubah.
   ========================================================= */

@media (min-width:980px){

  /* -------------------------------------------------------
     PANEL KANAN
     -------------------------------------------------------
     Sebelumnya:
     align-items:center membuat tinggi card dibagi ke atas
     dan bawah ketika card berubah tinggi.

     Sekarang:
     card di-anchor dari atas menggunakan flex-start.
     ------------------------------------------------------- */
  .loginDesktopFormPanel{
    align-items:flex-start !important;
    justify-content:center !important;

    /*
     * Jarak tetap dari batas atas hero.
     * Navbar sendiri sudah berada di luar hero melalui
     * .wrap padding-top, sehingga nilai ini menjadi breathing
     * space nyata antara navbar dan card.
     */
    padding-top:clamp(58px,6.2vh,76px) !important;

    /*
     * Ruang bawah dibuat lebih besar untuk:
     * - pertumbuhan tab Daftar,
     * - scale card,
     * - shadow card,
     * - menjaga jarak visual dari footer resmi.
     */
    padding-bottom:clamp(92px,9vh,126px) !important;

    overflow:visible !important;
  }

  /* -------------------------------------------------------
     LOGIN CARD
     -------------------------------------------------------
     Titik scale dikunci di TOP CENTER.
     Jadi scale tidak lagi menarik sisi atas ke arah navbar.
     ------------------------------------------------------- */
  .loginDesktopFormPanel .loginCard{
    transform-origin:top center !important;

    /*
     * Reserve space setelah card.
     * Transform scale tidak ikut menambah ukuran layout CSS,
     * maka margin-bottom diperlukan agar visual hasil scale
     * tetap memiliki ruang sebelum footer.
     */
    margin:
      0
      auto
      clamp(42px,4.5vh,66px) !important;
  }
}


/* =========================================================
   COMPACT LAPTOP 980 - 1180PX
   ========================================================= */
@media (min-width:980px) and (max-width:1180px){

  .loginDesktopFormPanel{
    padding-top:44px !important;
    padding-bottom:88px !important;
  }

  .loginDesktopFormPanel .loginCard{
    transform-origin:top center !important;
    margin-bottom:44px !important;
  }
}


/* =========================================================
   SHORT LAPTOP HEIGHT <=820PX
   =========================================================
   Tetap top-anchored, tetapi breathing space disesuaikan
   supaya usable pada viewport yang lebih pendek.
   ========================================================= */
@media (min-width:980px) and (max-height:820px){

  .loginDesktopFormPanel{
    padding-top:34px !important;
    padding-bottom:76px !important;
  }

  .loginDesktopFormPanel .loginCard{
    transform-origin:top center !important;
    margin-bottom:38px !important;
  }
}


/* =========================================================
   VERY SHORT LAPTOP HEIGHT <=720PX
   ========================================================= */
@media (min-width:980px) and (max-height:720px){

  .loginDesktopFormPanel{
    padding-top:28px !important;
    padding-bottom:68px !important;
  }

  .loginDesktopFormPanel .loginCard{
    transform-origin:top center !important;
    margin-bottom:34px !important;
  }
}


/* =========================================================
   LARGE DESKTOP >=1440PX
   ========================================================= */
@media (min-width:1440px) and (min-height:821px){

  .loginDesktopFormPanel{
    padding-top:clamp(64px,6.5vh,82px) !important;
    padding-bottom:clamp(104px,9.5vh,138px) !important;
  }

  .loginDesktopFormPanel .loginCard{
    transform-origin:top center !important;
    margin-bottom:clamp(48px,4.8vh,72px) !important;
  }
}

/* =========================================================
   FINAL V25 - LOGIN BRAND EXACT VISUAL MATCH WITH INDEX
   =========================================================
   ACUAN RESMI:
   - Navbar index: .brandLogoShadow + .brandCopy strong/small
   - Hero index  : .heroBrandLogoShadow + .heroBrandName/tagline

   TARGET LOGIN:
   1. Navbar desktop:
      .loginDesktopBrand
   2. Hero kiri desktop:
      .loginDesktopHeroBrand

   PRINSIP:
   - Mengubah HANYA karakter shadow logo dan warna teks brand.
   - Ukuran, posisi, spacing, layout, auth, HTML, dan fungsi
     JavaScript tidak diubah.
   - Gradient teks Bumil Ku disalin identik dari index.
   - Shadow logo disalin identik dari index sesuai konteks:
     navbar memakai brandLogoShadow index,
     hero memakai heroBrandLogoShadow index.
   ========================================================= */

@media (min-width:980px){

  /* =======================================================
     1. NAVBAR LOGIN BRAND - MATCH INDEX NAVBAR BRAND
     ======================================================= */
  .loginDesktopBrand .loginDesktopBrandLogoShadow{
    position:relative !important;
    display:inline-grid !important;
    place-items:center !important;
    flex:0 0 auto !important;
    isolation:isolate !important;
    overflow:visible !important;

    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;
  }

  html[data-theme="dark"]
  .loginDesktopBrand .loginDesktopBrandLogoShadow{
    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;
  }

  .loginDesktopBrand .loginDesktopBrandLogoWrap,
  html[data-theme="dark"]
  .loginDesktopBrand .loginDesktopBrandLogoWrap{
    position:relative !important;
    display:grid !important;
    place-items:center !important;

    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    filter:none !important;

    overflow:visible !important;
    isolation:isolate !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  .loginDesktopBrand .loginDesktopBrandLogoWrap::before,
  .loginDesktopBrand .loginDesktopBrandLogoWrap::after{
    content:none !important;
    display:none !important;
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
    opacity:0 !important;
  }

  .loginDesktopBrand .loginDesktopBrandLogo{
    position:relative !important;
    z-index:2 !important;
    object-fit:contain !important;
    object-position:center !important;
    filter:drop-shadow(0 3px 5px rgba(14,147,130,.09)) !important;
  }

  /* Exact gradient + depth text from index .brandCopy strong */
  .loginDesktopBrand .loginDesktopBrandCopy strong,
  html[data-theme="dark"]
  .loginDesktopBrand .loginDesktopBrandCopy 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 !important;
    -webkit-box-decoration-break:clone !important;

    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;
  }

  html[data-theme="dark"]
  .loginDesktopBrand .loginDesktopBrandCopy 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;
  }

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

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


  /* =======================================================
     2. LOGIN HERO BRAND - MATCH INDEX HERO BRAND
     ======================================================= */
  .loginDesktopHeroBrand .heroBrandLogoShadow{
    position:relative !important;
    display:inline-grid !important;
    place-items:center !important;
    flex:0 0 auto !important;
    overflow:visible !important;
    isolation:isolate !important;

    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;
  }

  html[data-theme="dark"]
  .loginDesktopHeroBrand .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;
  }

  .loginDesktopHeroBrand .heroBrandLogoWrap,
  html[data-theme="dark"]
  .loginDesktopHeroBrand .heroBrandLogoWrap{
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    filter:none !important;
    overflow:hidden !important;
  }

  .loginDesktopHeroBrand .heroBrandLogoWrap::before,
  .loginDesktopHeroBrand .heroBrandLogoWrap::after{
    content:none !important;
    display:none !important;
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  .loginDesktopHeroBrand .heroBrandLogo{
    position:relative !important;
    z-index:2 !important;
    object-fit:contain !important;
    object-position:center !important;
    filter:drop-shadow(0 5px 8px rgba(14,147,130,.10)) !important;
  }

  /* Exact gradient + depth text from index .heroBrandName */
  .loginDesktopHeroBrand .loginDesktopHeroBrandCopy strong,
  html[data-theme="dark"]
  .loginDesktopHeroBrand .loginDesktopHeroBrandCopy 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 !important;
    -webkit-box-decoration-break:clone !important;

    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;
  }

  html[data-theme="dark"]
  .loginDesktopHeroBrand .loginDesktopHeroBrandCopy 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;
  }

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

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

/* =========================================================
   FINAL V26 - INDEX FINAL CASCADE EXACT BRAND MATCH
   =========================================================
   FIX V25:
   - V25 masih memakai depth text lama sebelum rule final
     "PREMIUM TRUE 3D DEPTH" pada index.css.
   - Navbar index desktop final juga melepas mask tambahan pada
     logo PNG; V25 masih mewarisi mask login lama.
   - Rule ini diletakkan PALING AKHIR agar benar-benar menjadi
     cascade winner, sama seperti index final.
   - HANYA visual brand desktop yang disentuh.
   ========================================================= */
@media (min-width:980px){

  /* =======================================================
     NAVBAR LOGO - EXACT INDEX DESKTOP FINAL
     ======================================================= */
  .loginDesktopBrand .loginDesktopBrandLogoShadow{
    position:relative !important;
    display:inline-grid !important;
    place-items:center !important;
    flex:0 0 auto !important;
    isolation:isolate !important;
    overflow:visible !important;
    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;
  }

  html[data-theme="dark"]
  .loginDesktopBrand .loginDesktopBrandLogoShadow{
    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;
  }

  .loginDesktopBrand .loginDesktopBrandLogoWrap,
  html[data-theme="dark"]
  .loginDesktopBrand .loginDesktopBrandLogoWrap{
    -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;
    border-radius:0 !important;
    box-shadow:none !important;
  }

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

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

  /* =======================================================
     NAVBAR TEXT - EXACT INDEX GRADIENT + FINAL TRUE 3D
     ======================================================= */
  .loginDesktopBrand .loginDesktopBrandCopy strong,
  html[data-theme="dark"]
  .loginDesktopBrand .loginDesktopBrandCopy 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 !important;
    -webkit-box-decoration-break:clone !important;

    text-shadow:0 -0.25px 0 rgba(255,255,255,.10) !important;
    filter:
      drop-shadow(0 0.50px 0 rgba(5,83,78,.25))
      drop-shadow(0 1.00px 0.10px rgba(5,78,73,.21))
      drop-shadow(0 1.60px 0.25px rgba(6,73,69,.17))
      drop-shadow(0 2.45px 0.75px rgba(9,76,72,.15))
      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;
  }

  html[data-theme="dark"]
  .loginDesktopBrand .loginDesktopBrandCopy 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;
  }

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

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

  /* =======================================================
     HERO LOGO - EXACT INDEX HERO SHADOW
     ======================================================= */
  .loginDesktopHeroBrand .heroBrandLogoShadow{
    position:relative !important;
    display:inline-grid !important;
    place-items:center !important;
    flex:0 0 auto !important;
    overflow:visible !important;
    isolation:isolate !important;
    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;
  }

  html[data-theme="dark"]
  .loginDesktopHeroBrand .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;
  }

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

  .loginDesktopHeroBrand .heroBrandLogoWrap::before,
  .loginDesktopHeroBrand .heroBrandLogoWrap::after{
    content:none !important;
    display:none !important;
    background:none !important;
    box-shadow:none !important;
  }

  .loginDesktopHeroBrand .heroBrandLogo{
    transform:translate3d(-0.4%,1.25%,0) !important;
  }

  /* =======================================================
     HERO TEXT - EXACT INDEX GRADIENT + FINAL TRUE 3D
     ======================================================= */
  .loginDesktopHeroBrand .loginDesktopHeroBrandCopy strong,
  html[data-theme="dark"]
  .loginDesktopHeroBrand .loginDesktopHeroBrandCopy 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 !important;
    -webkit-box-decoration-break:clone !important;

    text-shadow:0 -0.35px 0 rgba(255,255,255,.11) !important;
    filter:
      drop-shadow(0 0.75px 0 rgba(5,83,78,.26))
      drop-shadow(0 1.55px 0.15px rgba(5,78,73,.22))
      drop-shadow(0 2.35px 0.35px rgba(6,73,69,.18))
      drop-shadow(0 3.6px 1.2px rgba(9,76,72,.16))
      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;
    text-rendering:geometricPrecision !important;
  }

  html[data-theme="dark"]
  .loginDesktopHeroBrand .loginDesktopHeroBrandCopy strong{
    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;
  }

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

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

@media (min-width:980px) and (max-width:1150px){
  .loginDesktopBrand .loginDesktopBrandLogo{
    transform:translate3d(-0.4%,2.1%,0) !important;
  }
}

@media (min-width:980px) and (max-height:820px){
  .loginDesktopHeroBrand .heroBrandLogo{
    transform:translate3d(-0.4%,1.35%,0) !important;
  }
}

@media (min-width:980px) and (max-height:760px){
  .loginDesktopBrand .loginDesktopBrandLogo{
    transform:translate3d(-0.4%,2.2%,0) !important;
  }

  .loginDesktopHeroBrand .heroBrandLogo{
    transform:translate3d(-0.4%,1.50%,0) !important;
  }
}

/* =========================================================
   FINAL V27 - DESKTOP HERO CONTENT MOVE UP 20PX
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - .loginDesktopHeroBrand TETAP pada posisi sekarang.
   - Empat bagian di bawah brand digeser naik tepat 20px:
       1. Headline
       2. Description
       3. Benefits
       4. Institution / RSAB lockup
   - Jarak relatif antar-keempat bagian tetap sama.
   - Area informasi kiri dikunci terhadap tinggi viewport agar
     tidak ikut turun saat tab Daftar memperbesar card kanan.
   - Tidak mengubah ukuran, warna, typography, shadow,
     layout kanan, navbar, footer, auth, atau mobile.
   ========================================================= */

@media (min-width:980px){

  /*
   * Kunci tinggi area informasi kiri terhadap viewport.
   * Dengan demikian, ketika tab Daftar membuat card kanan lebih tinggi,
   * grid boleh bertambah ke bawah tetapi posisi isi kiri tidak ikut turun.
   */
  .loginDesktopIntro.loginDesktopIntro--variant1{
    height:calc(100svh - 88px) !important;
    min-height:calc(100svh - 88px) !important;
    align-self:start !important;
  }

  .loginDesktopHeroBrand{
    transform:translateY(-5px) !important;
  }

  .loginDesktopVariant1Headline,
  .loginDesktopVariant1Description,
  .loginDesktopVariant1Benefits,
  .loginDesktopVariant1Institution{
    transform:translateY(-20px) !important;
  }
}

/* =========================================================
   FINAL V10 - LOGIN FOOTER EXACTLY MATCHES INDEX V455
   ---------------------------------------------------------
   - Markup footer desktop disalin byte-for-byte dari Index.
   - Visual footer memakai blok final V428/V429 Index.
   - Logo RSAB white, PSE, 4 kolom, status badge, divider,
     copyright, dan support row mengikuti Index.
   - .siteFooter lama tetap dipakai untuk HP/tablet <=979px.
   - Form login, Firebase/Auth, navbar, drawer, dan JS tidak diubah.
   ========================================================= */

.desktopOfficialFooter{
  display:none;
}

/* =========================================================
   V428 - FOOTER INNER RAISED CARD / REFERENCE MATCH
   ---------------------------------------------------------
   TARGET:
   - outer footer band teal full-width / mentok kiri-kanan;
   - satu card footer besar berada DI DALAM band;
   - card terasa timbul, padat, empuk, dan kokoh;
   - highlight bibir atas + shadow bawah lebar;
   - layout konten, logo RSAB white, PSE, link, dan data-copy
     tetap memakai struktur HTML existing;
   - HP/tablet tidak disentuh. Hanya >=980px.
   ========================================================= */

@media (min-width:980px){

/* =========================================================
   V429 - FOOTER FULL-BLEED + NAVBAR-ALIGNED CONTENT
   ---------------------------------------------------------
   - Visual raised/3D footer sebelumnya dipertahankan.
   - Surface footer mentok kiri-kanan layar.
   - Sudut sisi luar kiri/kanan dibuat rata tanpa lengkungan.
   - Padding horizontal konten mengikuti navbar desktop:
     clamp(34px,5vw,88px).
   - Compact laptop mengikuti navbar: 24px kiri/kanan.
   ========================================================= */

  /* =======================================================
     OUTER FULL-WIDTH TEAL BAND
     ======================================================= */
  .desktopOfficialFooterBand{
    position:relative !important;
    isolation:isolate !important;
    box-sizing:border-box !important;
    display:block !important;

    width:100vw !important;
    max-width:none !important;
    margin:44px 0 0 calc(50% - 50vw) !important;
    padding:54px 0 62px !important;

    background:
      radial-gradient(
        ellipse at 50% 0%,
        rgba(255,255,255,.075) 0%,
        rgba(255,255,255,.022) 34%,
        rgba(255,255,255,0) 64%
      ),
      linear-gradient(
        180deg,
        #1aa59e 0%,
        #13958f 44%,
        #0d817b 76%,
        #0a746f 100%
      ) !important;

    border-top:1px solid rgba(255,255,255,.24) !important;
    border-radius:0 !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.18),
      inset 0 16px 30px rgba(255,255,255,.035),
      inset 0 -20px 34px rgba(0,70,65,.12) !important;
    overflow:visible !important;
  }

  .desktopOfficialFooterBand::before{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    top:0 !important;
    right:0 !important;
    left:0 !important;
    height:3px !important;
    pointer-events:none !important;
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,.34) 18%,
      rgba(255,255,255,.48) 50%,
      rgba(255,255,255,.34) 82%,
      rgba(255,255,255,.04) 100%
    ) !important;
    box-shadow:0 2px 8px rgba(6,100,94,.07) !important;
  }

  .desktopOfficialFooterBand::after{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    height:34px !important;
    pointer-events:none !important;
    background:linear-gradient(
      180deg,
      rgba(0,68,63,0) 0%,
      rgba(0,63,59,.05) 35%,
      rgba(0,56,52,.13) 100%
    ) !important;
  }

  /* =======================================================
     RAISED INNER FOOTER CARD
     ======================================================= */
  .desktopOfficialFooter{
    position:relative !important;
    z-index:2 !important;
    isolation:isolate !important;
    box-sizing:border-box !important;
    display:block !important;

    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:58px clamp(34px,5vw,88px) 34px !important;

    overflow:hidden !important;
    border:1px solid rgba(208,255,249,.18) !important;
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;

    background:
      radial-gradient(
        ellipse at 48% -12%,
        rgba(255,255,255,.125) 0%,
        rgba(255,255,255,.042) 35%,
        rgba(255,255,255,0) 64%
      ),
      linear-gradient(
        180deg,
        #1aa69e 0%,
        #129a93 30%,
        #0b8b85 62%,
        #087b76 100%
      ) !important;

    box-shadow:
      /* tight contact */
      0 5px 8px rgba(2,69,65,.22),
      /* physical lift */
      0 17px 26px rgba(2,72,68,.31),
      /* soft premium depth */
      0 38px 58px rgba(2,68,64,.20),
      /* top face */
      inset 0 3px 0 rgba(190,255,247,.42),
      inset 0 8px 18px rgba(255,255,255,.055),
      /* lower material */
      inset 0 -8px 0 rgba(0,73,68,.07),
      inset 0 -24px 34px rgba(0,57,53,.16),
      inset 1px 0 0 rgba(255,255,255,.045),
      inset -1px 0 0 rgba(0,65,61,.08) !important;

    transform:translate3d(0,0,0) !important;
  }

  /* bright raised lip at top edge, visible like reference */
  .desktopOfficialFooter::before{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    top:0 !important;
    right:0 !important;
    left:0 !important;
    height:5px !important;
    pointer-events:none !important;
    background:linear-gradient(
      180deg,
      rgba(184,255,247,.62) 0%,
      rgba(128,235,225,.34) 42%,
      rgba(255,255,255,0) 100%
    ) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.16),
      0 5px 10px rgba(0,77,72,.09) !important;
  }

  /* subtle lower thickness – no extra inner framed card */
  .desktopOfficialFooter::after{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    height:18px !important;
    pointer-events:none !important;
    background:linear-gradient(
      180deg,
      rgba(0,74,69,0) 0%,
      rgba(0,68,63,.05) 34%,
      rgba(0,58,54,.18) 100%
    ) !important;
    box-shadow:inset 0 -1px 0 rgba(0,47,44,.13) !important;
  }

  .desktopOfficialFooter > *{
    position:relative !important;
    z-index:2 !important;
  }

  /* =======================================================
     CONTENT LAYOUT – matches reference proportions
     ======================================================= */
  .desktopOfficialFooterMain{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:minmax(360px,1.55fr)
      repeat(4,minmax(155px,.82fr)) !important;
    gap:0 !important;
    align-items:stretch !important;
  }

  .desktopOfficialFooterBrand{
    min-width:0 !important;
    padding:0 34px 0 0 !important;
  }

  .desktopOfficialFooterBrandLockup{
    display:flex !important;
    align-items:center !important;
    gap:16px !important;
  }

  .desktopOfficialFooterLogoShadow{
    width:70px !important;
    min-width:70px !important;
    height:70px !important;
    display:grid !important;
    place-items:center !important;
    filter:
      drop-shadow(0 4px 5px rgba(0,65,61,.17))
      drop-shadow(0 11px 17px rgba(0,57,54,.11)) !important;
  }

  .desktopOfficialFooterLogoShadow img{
    width:66px !important;
    height:66px !important;
    object-fit:contain !important;
  }

  .desktopOfficialFooterBrandLockup > span:last-child{
    display:flex !important;
    flex-direction:column !important;
  }

  .desktopOfficialFooterBrandLockup strong{
    color:#ffffff !important;
    background:none !important;
    -webkit-background-clip:initial !important;
    background-clip:initial !important;
    -webkit-text-fill-color:#ffffff !important;
    font-size:34px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:-.038em !important;
    text-shadow:0 2px 3px rgba(0,61,57,.14) !important;
  }

  .desktopOfficialFooterBrandLockup small{
    margin-top:7px !important;
    color:rgba(255,255,255,.91) !important;
    font-size:16px !important;
    line-height:1.22 !important;
    font-weight:650 !important;
  }

  .desktopOfficialFooterBrand > p{
    max-width:390px !important;
    margin:27px 0 0 !important;
    color:rgba(255,255,255,.91) !important;
    font-size:15.5px !important;
    line-height:1.62 !important;
    font-weight:500 !important;
  }

  /* =======================================================
     FORMAL VERTICAL DIVIDERS
     ======================================================= */
  .desktopOfficialFooterColumn{
    position:relative !important;
    min-width:0 !important;
    padding:0 24px 0 30px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }

  .desktopOfficialFooterColumn::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:1px !important;
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.24) 16%,
      rgba(255,255,255,.24) 84%,
      rgba(255,255,255,.08) 100%
    ) !important;
    pointer-events:none !important;
  }

  .desktopOfficialFooterColumn > strong{
    margin:0 0 10px !important;
    color:#ffffff !important;
    font-size:17px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    letter-spacing:-.015em !important;
    text-shadow:0 1px 2px rgba(0,61,57,.13) !important;
  }

  .desktopOfficialFooterColumn a{
    width:fit-content !important;
    color:rgba(255,255,255,.92) !important;
    font-size:15.5px !important;
    line-height:1.42 !important;
    font-weight:520 !important;
    text-decoration:none !important;
  }

  .desktopOfficialFooterColumn a:hover{
    color:#ffffff !important;
    transform:none !important;
  }

  /* =======================================================
     RSAB + PSE TRUST ROW
     ======================================================= */
  .desktopOfficialFooterInstitution{
    width:fit-content !important;
    max-width:100% !important;
    margin-top:26px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
    gap:15px !important;
  }

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

  .desktopOfficialFooterInstitutionLabel{
    display:block !important;
    margin:0 !important;
    color:#ffffff !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    text-shadow:0 1px 2px rgba(0,60,56,.14) !important;
  }

  .desktopOfficialFooterInstitution
    .desktopOfficialFooterInstitutionLogo{
    display:block !important;
    width:auto !important;
    height:50px !important;
    max-width:196px !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:left center !important;
    filter:drop-shadow(0 3px 5px rgba(0,59,55,.13)) !important;
    flex:0 0 auto !important;
  }

  .desktopOfficialFooterInstitutionDivider{
    width:1px !important;
    min-width:1px !important;
    height:58px !important;
    display:block !important;
    background:rgba(255,255,255,.27) !important;
    border-radius:999px !important;
    flex:0 0 1px !important;
  }

  .desktopOfficialFooterPseSurface{
    min-width:0 !important;
    height:60px !important;
    padding:5px 10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.98) !important;
    border:1px solid rgba(255,255,255,.92) !important;
    border-radius:12px !important;
    box-shadow:
      0 8px 17px rgba(0,66,62,.13),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    overflow:hidden !important;
    flex:0 1 auto !important;
  }

  .desktopOfficialFooterPseLogo{
    display:block !important;
    width:auto !important;
    height:46px !important;
    max-width:180px !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  /* =======================================================
     TRUST BADGE
     ======================================================= */
  .desktopOfficialFooterStatus{
    width:fit-content !important;
    min-height:52px !important;
    margin-top:20px !important;
    margin-bottom:0 !important;
    padding:0 20px !important;
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    color:#087f78 !important;
    background:#ffffff !important;
    border:1px solid rgba(255,255,255,.94) !important;
    border-radius:999px !important;
    box-shadow:
      0 8px 14px rgba(0,61,57,.13),
      0 14px 23px rgba(0,61,57,.08),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    font-size:14px !important;
    line-height:1 !important;
    font-weight:700 !important;
    white-space:nowrap !important;
  }

  .desktopOfficialFooterStatus i{
    color:#0e9382 !important;
    font-size:16px !important;
  }

  .desktopOfficialFooterStatus > span{
    display:inline !important;
  }

  /* =======================================================
     BOTTOM DIVIDER / COPYRIGHT
     ======================================================= */
  .desktopOfficialFooterBottom{
    width:100% !important;
    max-width:none !important;
    margin:38px 0 0 !important;
    padding:26px 0 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:24px !important;
    color:rgba(255,255,255,.93) !important;
    border-top:1px solid rgba(255,255,255,.23) !important;
    font-size:15px !important;
    line-height:1.30 !important;
    font-weight:520 !important;
  }

  .desktopOfficialFooterSupport{
    display:inline-flex !important;
    align-items:center !important;
    gap:11px !important;
    color:rgba(255,255,255,.94) !important;
    font-size:15px !important;
    line-height:1.30 !important;
    font-weight:520 !important;
  }

  .desktopOfficialFooterSupport i{
    color:#ffffff !important;
    font-size:18px !important;
  }

  /* =======================================================
     DARK MODE – SAME MATERIAL CHARACTER
     ======================================================= */
  html[data-theme="dark"] .desktopOfficialFooterBand{
    background:
      radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.025),transparent 58%),
      linear-gradient(180deg,#0a706a 0%,#086660 48%,#05534f 100%) !important;
    border-top-color:rgba(255,255,255,.075) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.045),
      inset 0 -20px 34px rgba(0,0,0,.18) !important;
  }

  html[data-theme="dark"] .desktopOfficialFooter{
    background:
      radial-gradient(ellipse at 48% -12%,rgba(255,255,255,.04),transparent 58%),
      linear-gradient(180deg,#08746e 0%,#076862 42%,#05534f 100%) !important;
    border-color:rgba(255,255,255,.075) !important;
    box-shadow:
      0 5px 8px rgba(0,0,0,.24),
      0 17px 26px rgba(0,0,0,.33),
      0 38px 58px rgba(0,0,0,.24),
      inset 0 3px 0 rgba(255,255,255,.07),
      inset 0 -24px 34px rgba(0,0,0,.22) !important;
  }

  html[data-theme="dark"] .desktopOfficialFooter::before{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.035) 42%,
      rgba(255,255,255,0) 100%
    ) !important;
  }

  html[data-theme="dark"] .desktopOfficialFooterColumn::before{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.025) 0%,
      rgba(255,255,255,.12) 16%,
      rgba(255,255,255,.12) 84%,
      rgba(255,255,255,.025) 100%
    ) !important;
  }

  html[data-theme="dark"] .desktopOfficialFooterBrandLockup strong,
  html[data-theme="dark"] .desktopOfficialFooterColumn > strong,
  html[data-theme="dark"] .desktopOfficialFooterInstitutionLabel{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  html[data-theme="dark"] .desktopOfficialFooterBrandLockup small,
  html[data-theme="dark"] .desktopOfficialFooterBrand > p,
  html[data-theme="dark"] .desktopOfficialFooterColumn a,
  html[data-theme="dark"] .desktopOfficialFooterBottom,
  html[data-theme="dark"] .desktopOfficialFooterSupport{
    color:rgba(255,255,255,.84) !important;
  }

  html[data-theme="dark"] .desktopOfficialFooterStatus{
    color:#087f78 !important;
    background:#ffffff !important;
    border-color:rgba(255,255,255,.90) !important;
  }
}

/* =========================================================
   COMPACT LAPTOP 980–1159
   - same raised card concept;
   - 3-column flow to prevent crushing five columns;
   - typography reduced proportionally.
   ========================================================= */
@media (min-width:980px) and (max-width:1159px){

  .desktopOfficialFooterBand{
    margin-top:34px !important;
    padding:38px 0 44px !important;
  }

  .desktopOfficialFooter{
    padding:42px 24px 26px !important;
    border-radius:0 !important;
  }

  .desktopOfficialFooterMain{
    grid-template-columns:minmax(250px,1.25fr)
      repeat(2,minmax(150px,.82fr)) !important;
    gap:24px 0 !important;
  }

  .desktopOfficialFooterBrand{
    padding-right:22px !important;
  }

  .desktopOfficialFooterColumn{
    padding-left:22px !important;
    padding-right:14px !important;
    gap:10px !important;
  }

  .desktopOfficialFooterColumn:nth-of-type(4),
  .desktopOfficialFooterColumn:nth-of-type(5){
    margin-top:8px !important;
  }

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

  .desktopOfficialFooterLogoShadow img{
    width:52px !important;
    height:52px !important;
  }

  .desktopOfficialFooterBrandLockup strong{
    font-size:27px !important;
  }

  .desktopOfficialFooterBrandLockup small{
    font-size:12.5px !important;
  }

  .desktopOfficialFooterBrand > p{
    max-width:320px !important;
    margin-top:18px !important;
    font-size:12px !important;
  }

  .desktopOfficialFooterColumn > strong{
    margin-bottom:5px !important;
    font-size:13.5px !important;
  }

  .desktopOfficialFooterColumn a{
    font-size:12px !important;
  }

  .desktopOfficialFooterInstitution{
    margin-top:18px !important;
    gap:10px !important;
  }

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

  .desktopOfficialFooterInstitution
    .desktopOfficialFooterInstitutionLogo{
    height:40px !important;
    max-width:155px !important;
  }

  .desktopOfficialFooterInstitutionDivider{
    height:46px !important;
  }

  .desktopOfficialFooterPseSurface{
    height:49px !important;
    padding:4px 7px !important;
    border-radius:10px !important;
  }

  .desktopOfficialFooterPseLogo{
    height:37px !important;
    max-width:138px !important;
  }

  .desktopOfficialFooterStatus{
    min-height:42px !important;
    margin-top:8px !important;
    padding:0 15px !important;
    font-size:11px !important;
  }

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

  .desktopOfficialFooterBottom,
  .desktopOfficialFooterSupport{
    font-size:11.5px !important;
  }

  .desktopOfficialFooterBottom{
    margin-top:27px !important;
    padding-top:18px !important;
  }
}

/* ===== INDEX V455 NAVBAR COMPONENT COPY, SCOPED ===== */
.loginIndexNavbarExact .statusTools{position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:auto;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .statusTool:hover{transform:translateY(-1px);
  background:rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.42);}
.loginIndexNavbarExact .statusTool:focus-visible{outline:3px solid var(--focus);
  outline-offset:3px;}
.loginIndexNavbarExact .statusTool--lang{font-size:10px;
  font-weight:800;
  letter-spacing:.08em;}
.loginIndexNavbarExact .statusTool--theme{width:27px;
  padding:0;
  font-size:11px;}
.loginIndexNavbarExact.appHeader{position:relative;
  z-index:5;
  min-height:142px;
  padding:54px 28px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;}
.loginIndexNavbarExact.appHeader::after{position:absolute;
  inset:auto 0 0;
  height:1px;}
.loginIndexNavbarExact .brandLockup{min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#ffffff;}
.loginIndexNavbarExact .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);}
.loginIndexNavbarExact .brandLogo{width:50px;
  height:50px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 12px rgba(0,57,62,.22));}
.loginIndexNavbarExact .brandCopy{min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.05;}
.loginIndexNavbarExact .brandCopy strong{color:#ffffff;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.035em;
  white-space:nowrap;}
.loginIndexNavbarExact .brandCopy small{margin-top:5px;
  color:rgba(255,255,255,.90);
  font-size:11px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;}
.loginIndexNavbarExact .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);}
@media (max-width:620px){
.loginIndexNavbarExact .brandLogoWrap{width:48px;
    height:48px;
    min-width:48px;
    border-radius:16px;}
.loginIndexNavbarExact .brandLogo{width:45px;
    height:45px;}
.loginIndexNavbarExact .brandCopy strong{font-size:21px;}
.loginIndexNavbarExact .brandCopy small{font-size:9.5px;}
.loginIndexNavbarExact .institutionPill{min-height:52px;
    padding:8px 10px;
    gap:8px;
    border-radius:19px;}
}
@media (max-width:420px){
.loginIndexNavbarExact .brandLogoWrap{width:44px;
    height:44px;
    min-width:44px;}
.loginIndexNavbarExact .brandLogo{width:42px;
    height:42px;}
.loginIndexNavbarExact .brandCopy strong{font-size:19px;}
.loginIndexNavbarExact .brandCopy small{font-size:8.5px;}
.loginIndexNavbarExact .institutionPill{padding:7px 8px;
    gap:6px;}
}
@media (max-width:350px){
.loginIndexNavbarExact .brandCopy small{display:none;}
.loginIndexNavbarExact .institutionPill{min-width:74px;}
}
.loginIndexNavbarExact .desktopNav{display:none;}
@media (min-width:621px) and (max-width:979px){
.loginIndexNavbarExact .brandLogoWrap{width:58px;
    height:58px;
    min-width:58px;}
.loginIndexNavbarExact .brandLogo{width:54px;
    height:54px;}
.loginIndexNavbarExact .brandCopy strong{font-size:27px;}
.loginIndexNavbarExact .institutionPill{min-height:62px;
    padding:10px 18px;}
}
@media (min-width:980px){
.loginIndexNavbarExact .statusTools{pointer-events:auto;}
.loginIndexNavbarExact .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);}
.loginIndexNavbarExact .statusTool--lang{font-size:11px;}
.loginIndexNavbarExact .institutionPill{position:relative;
    z-index:2;
    flex:0 0 auto;}
}
@media (min-width:980px){
.loginIndexNavbarExact .institutionPill{min-height:48px !important;
    padding:7px 10px !important;
    gap:8px !important;
    border-radius:17px !important;}
.loginIndexNavbarExact .statusTools{gap:6px !important;}
.loginIndexNavbarExact .statusTool{min-width:34px !important;
    height:34px !important;
    padding:0 10px !important;}
.loginIndexNavbarExact .statusTool--theme{width:34px !important;
    padding:0 !important;}
}
.loginIndexNavbarExact .statusTools{margin-left:auto !important;}
@media (max-width:620px){
.loginIndexNavbarExact .statusTools{margin-left:auto !important;
    gap:8px !important;}
.loginIndexNavbarExact .statusTool{min-width:30px !important;
    height:30px !important;
    padding:0 9px !important;}
.loginIndexNavbarExact .statusTool--theme{width:30px !important;
    padding:0 !important;}
.loginIndexNavbarExact.appHeader{padding-top:calc(max(44px, env(safe-area-inset-top) + 34px)) !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact .statusTools{gap:7px !important;}
.loginIndexNavbarExact .statusTool{min-width:28px !important;
    height:28px !important;
    padding:0 8px !important;}
.loginIndexNavbarExact .statusTool--theme{width:28px !important;
    padding:0 !important;}
}
.loginIndexNavbarExact .displayControlsBar .statusTool{min-width:31px;
  height:31px;
  padding:0 10px;}
.loginIndexNavbarExact .displayControlsBar .statusTool--lang{font-size:10px;
  font-weight:800;}
.loginIndexNavbarExact .displayControlsBar .statusTool--theme{width:31px;
  padding:0;}
@media (max-width:620px){
.loginIndexNavbarExact .displayControlsBar .statusTool{min-width:29px !important;
    height:29px !important;
    padding:0 8px !important;}
.loginIndexNavbarExact .displayControlsBar .statusTool--theme{width:29px !important;
    padding:0 !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact .displayControlsBar .statusTool{min-width:27px !important;
    height:27px !important;}
.loginIndexNavbarExact .displayControlsBar .statusTool--theme{width:27px !important;}
}
@media (min-width:621px) and (max-width:979px){
.loginIndexNavbarExact.appHeader{min-height:92px !important;
    padding:16px 28px !important;}
}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .displayControlsBar .statusTool:hover{color:#0f9f8d !important;
  background:rgba(11,36,41,.78) !important;
  border-color:rgba(15,159,141,.26) !important;}
@media (min-width:980px){
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .displayControlsBar .statusTool--theme{width:28px !important;
    padding:0 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .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){
.loginIndexNavbarExact .displayControlsBar .statusTool{min-width:27px !important;
    height:27px !important;}
.loginIndexNavbarExact .displayControlsBar .statusTool--theme{width:27px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact.appHeader{min-height:72px !important;
    height:auto !important;
    padding:max(6px, env(safe-area-inset-top))
      18px
      6px !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact.appHeader{min-height:68px !important;
    height:auto !important;
    padding:max(4px, env(safe-area-inset-top))
      14px
      4px !important;}
}
.loginIndexNavbarExact .brandLogoWrap,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .institutionPill,
html[data-theme="dark"] .loginIndexNavbarExact .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);}
.loginIndexNavbarExact .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){
.loginIndexNavbarExact .institutionPill,
html[data-theme="dark"] .loginIndexNavbarExact .institutionPill{min-width:0 !important;
    min-height:35px !important;
    padding:3px 7px !important;
    gap:0 !important;
    border-radius:18px !important;}
.loginIndexNavbarExact .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){
.loginIndexNavbarExact .institutionPill,
html[data-theme="dark"] .loginIndexNavbarExact .institutionPill{min-width:0 !important;
    min-height:33px !important;
    padding:3px 6px !important;
    gap:0 !important;
    border-radius:17px !important;}
.loginIndexNavbarExact .institutionCombinedLogo{width:auto !important;
    height:27px !important;
    max-width:106px !important;}
}
@media (min-width:621px) and (max-width:979px){
.loginIndexNavbarExact .institutionPill,
html[data-theme="dark"] .loginIndexNavbarExact .institutionPill{min-width:0 !important;
    min-height:56px !important;
    padding:7px 13px !important;
    gap:0 !important;
    border-radius:20px !important;}
.loginIndexNavbarExact .institutionCombinedLogo{width:auto !important;
    height:36px !important;
    max-width:144px !important;}
}
@media (min-width:980px){
.loginIndexNavbarExact .institutionPill,
html[data-theme="dark"] .loginIndexNavbarExact .institutionPill{min-width:0 !important;
    gap:0 !important;}
.loginIndexNavbarExact .institutionCombinedLogo{width:auto !important;}
}
@media (min-width:980px) and (max-height:760px){
.loginIndexNavbarExact .institutionPill,
html[data-theme="dark"] .loginIndexNavbarExact .institutionPill{min-height:48px !important;
    padding:5px 9px !important;
    border-radius:16px !important;}
.loginIndexNavbarExact .institutionCombinedLogo{width:auto !important;
    height:29px !important;
    max-width:118px !important;}
}
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
html[data-theme="dark"] .loginIndexNavbarExact .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:700 !important;
  letter-spacing:.01em !important;
  text-align:center !important;}
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme{width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  padding:0 !important;
  font-size:12px !important;}
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme i{display:block !important;
  margin:0 !important;
  line-height:1 !important;
  transform:none !important;}
@media (max-width:979px){
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang{font-size:10px !important;}
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme{font-size:11.5px !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme{padding:0 !important;
    border-radius:50% !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme{padding:0 !important;
    border-radius:50% !important;}
}
@media (min-width:980px){
.loginIndexNavbarExact.appHeader{padding-right:clamp(126px, 11vw, 170px) !important;
    border-radius:0 !important;}
.loginIndexNavbarExact .brandLogoWrap{width:52px !important;
    height:52px !important;
    min-width:52px !important;
    border-radius:14px !important;}
}
@media (min-width:980px) and (max-height:760px){
.loginIndexNavbarExact.appHeader{min-height:72px !important;
    height:72px !important;
    padding-top:9px !important;
    padding-bottom:9px !important;}
}
@media (min-width:980px){
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact.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"] .loginIndexNavbarExact.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;}
.loginIndexNavbarExact .brandLockup{position:relative !important;
    z-index:2 !important;
    gap:11px !important;}
.loginIndexNavbarExact .brandLogoWrap,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .brandLogo{width:48px !important;
    height:48px !important;}
.loginIndexNavbarExact .brandCopy strong{color:var(--teal-deep) !important;
    letter-spacing:-.035em !important;}
.loginIndexNavbarExact .brandCopy small{margin-top:4px !important;
    color:var(--muted) !important;
    font-weight:600 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .brandCopy strong{color:#53ebe8 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .brandCopy small{color:#aac8cc !important;}
.loginIndexNavbarExact .desktopNav{position:relative !important;
    z-index:2 !important;
    display:flex !important;
    align-items:center !important;
    gap:4px !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopNav a:hover{color:var(--teal-deep) !important;
    background:var(--teal-soft) !important;
    transform:translateY(-1px) !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav a{color:#bdd5d9 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav a:hover{color:#53ebe8 !important;
    background:rgba(15,159,141,.08) !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .institutionPill,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .institutionCombinedLogo{height:30px !important;
    max-width:124px !important;}
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme,
html[data-theme="dark"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
}
@media (min-width:980px) and (max-height:820px){
.loginIndexNavbarExact.appHeader{min-height:78px !important;
    height:78px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;}
}
.loginIndexNavbarExact .desktopInstitutionLockup{display:none;}
@media (min-width:980px){
.loginIndexNavbarExact.appHeader{gap:22px !important;}
.loginIndexNavbarExact.appHeader > .institutionPill{display:none !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopInstitutionIdentity{min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:4px !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopInstitutionLogo{display:block !important;
    width:auto !important;
    height:27px !important;
    max-width:148px !important;
    object-fit:contain !important;
    object-position:left center !important;}
.loginIndexNavbarExact .brandLockup{flex:0 0 auto !important;}
.loginIndexNavbarExact .brandCopy strong{font-size:25px !important;
    font-weight:700 !important;}
.loginIndexNavbarExact .brandCopy small{font-size:10px !important;}
.loginIndexNavbarExact .desktopNav{margin-left:auto !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopInstitutionLabel{color:#aac8cc !important;}
html[data-theme="dark"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .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){
.loginIndexNavbarExact.appHeader{gap:14px !important;
    padding-left:28px !important;
    padding-right:112px !important;}
.loginIndexNavbarExact .brandLogoWrap,
html[data-theme="dark"] .loginIndexNavbarExact .brandLogoWrap{width:46px !important;
    height:46px !important;
    min-width:46px !important;}
.loginIndexNavbarExact .brandLogo{width:42px !important;
    height:42px !important;}
.loginIndexNavbarExact .brandCopy strong{font-size:21px !important;}
.loginIndexNavbarExact .brandCopy small{font-size:8.5px !important;}
.loginIndexNavbarExact .desktopInstitutionLockup{gap:10px !important;}
.loginIndexNavbarExact .desktopInstitutionDivider{height:34px !important;}
.loginIndexNavbarExact .desktopInstitutionLabel{font-size:7.8px !important;}
.loginIndexNavbarExact .desktopInstitutionLogo{height:23px !important;
    max-width:118px !important;}
.loginIndexNavbarExact .desktopNav{gap:1px !important;}
.loginIndexNavbarExact .desktopNav a{min-height:38px !important;
    padding:0 9px !important;
    font-size:10.5px !important;}
.loginIndexNavbarExact .desktopNav .desktopNavLogin{padding-left:13px !important;
    padding-right:13px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .brandCopy{min-width:0 !important;}
.loginIndexNavbarExact .brandCopy strong{color:var(--teal-deep) !important;}
.loginIndexNavbarExact .brandCopy small{color:var(--muted) !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopInstitutionLogo{display:block !important;
    width:auto !important;
    height:22px !important;
    max-width:92px !important;
    object-fit:contain !important;
    object-position:left center !important;}
.loginIndexNavbarExact.appHeader > .institutionPill{display:none !important;}
html[data-theme="dark"] .loginIndexNavbarExact.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"] .loginIndexNavbarExact .brandCopy strong{color:#53ebe8 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .brandCopy small,
html[data-theme="dark"] .loginIndexNavbarExact .desktopInstitutionLabel{color:#aac8cc !important;}
html[data-theme="dark"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .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){
.loginIndexNavbarExact .brandLockup{gap:7px !important;}
.loginIndexNavbarExact .desktopInstitutionLockup{gap:7px !important;
    max-width:102px !important;}
.loginIndexNavbarExact .desktopInstitutionDivider{height:31px !important;}
.loginIndexNavbarExact .desktopInstitutionIdentity{max-width:92px !important;
    gap:2px !important;}
.loginIndexNavbarExact .desktopInstitutionLabel{max-width:82px !important;
    font-size:5.9px !important;
    line-height:1.06 !important;}
.loginIndexNavbarExact .desktopInstitutionLogo{height:20px !important;
    max-width:82px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .brandLockup{gap:6px !important;}
.loginIndexNavbarExact .brandCopy strong{font-size:17.5px !important;}
.loginIndexNavbarExact .desktopInstitutionLockup{gap:6px !important;
    max-width:88px !important;}
.loginIndexNavbarExact .desktopInstitutionDivider{height:28px !important;}
.loginIndexNavbarExact .desktopInstitutionIdentity{max-width:80px !important;}
.loginIndexNavbarExact .desktopInstitutionLabel{max-width:72px !important;
    font-size:5.35px !important;
    line-height:1.04 !important;}
.loginIndexNavbarExact .desktopInstitutionLogo{height:18px !important;
    max-width:72px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact.appHeader > .brandLockup{width:auto !important;
    min-width:0 !important;
    margin:0 !important;}
.loginIndexNavbarExact.appHeader > .desktopInstitutionLockup{width:auto !important;
    min-width:0 !important;
    margin:0
      0
      0
      2px !important;
    padding:0 !important;}
.loginIndexNavbarExact.appHeader .desktopInstitutionDivider{flex:0 0 1px !important;}
.loginIndexNavbarExact.appHeader .desktopInstitutionIdentity{flex:0 0 auto !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact.appHeader > .desktopInstitutionLockup{margin-left:1px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact.appHeader > .desktopInstitutionLockup{margin-left:0 !important;}
}
.loginIndexNavbarExact .mobileNavbarTheme{display:none;}
@media (max-width:620px){
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact.appHeader > .mobileNavbarTheme:hover{color:#0e9382 !important;
    background:#ffffff !important;
    border-color:rgba(15,159,141,.24) !important;}
.loginIndexNavbarExact.appHeader > .mobileNavbarTheme:focus-visible{outline:3px solid var(--focus) !important;
    outline-offset:2px !important;}
.loginIndexNavbarExact.appHeader > .mobileNavbarTheme i{display:block !important;
    margin:0 !important;
    line-height:1 !important;
    transform:none !important;}
html[data-theme="dark"] .loginIndexNavbarExact.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"] .loginIndexNavbarExact.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){
.loginIndexNavbarExact.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){
.loginIndexNavbarExact.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){
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang{font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;}
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme{font-size:11.5px !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang{font-size:9.5px !important;}
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme{font-size:11px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
html[data-theme="dark"] .loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--lang,
.loginIndexNavbarExact .displayControlsBar .displayControlsInner .statusTool--theme,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
}
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact.appHeader::before{content:none !important;
  display:none !important;
  background:none !important;}
.loginIndexNavbarExact.appHeader::after{content:none !important;
  display:none !important;
  background:none !important;}
html[data-theme="dark"] .loginIndexNavbarExact.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){
.loginIndexNavbarExact.appHeader,
html[data-theme="dark"] .loginIndexNavbarExact.appHeader{background-image:none !important;}
.loginIndexNavbarExact.appHeader{background:#ffffff !important;}
html[data-theme="dark"] .loginIndexNavbarExact.appHeader{background:#102b30 !important;}
.loginIndexNavbarExact.appHeader::before,
.loginIndexNavbarExact.appHeader::after{content:none !important;
    display:none !important;
    background:none !important;}
}
@media (min-width:980px){
.loginIndexNavbarExact.appHeader{background:#ffffff !important;
    background-image:none !important;}
html[data-theme="dark"] .loginIndexNavbarExact.appHeader{background:#102b30 !important;
    background-image:none !important;}
.loginIndexNavbarExact.appHeader::before,
.loginIndexNavbarExact.appHeader::after{content:none !important;
    display:none !important;
    background:none !important;}
}
.loginIndexNavbarExact .desktopArticleSearch,
.loginIndexNavbarExact .desktopNavbarUtilities{display:none;}
@media (min-width:980px){
.loginIndexNavbarExact.appHeader{gap:14px !important;
    padding-right:clamp(34px, 5vw, 88px) !important;}
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopArticleSearchInput::placeholder{color:#82949f !important;
    opacity:.90 !important;
    font-weight:500 !important;}
.loginIndexNavbarExact .desktopArticleSearchInput::-webkit-search-cancel-button{display:none !important;
    -webkit-appearance:none !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopArticleSearchButton:hover{color:#0e9382 !important;
    background:rgba(15,159,141,.045) !important;
    transform:translateY(-1px) !important;}
.loginIndexNavbarExact .desktopArticleSearchButton:active{transform:translateY(0) scale(.97) !important;}
.loginIndexNavbarExact .desktopArticleSearchButton:focus-visible{outline:2px solid rgba(15,159,141,.30) !important;
    outline-offset:-2px !important;}
.loginIndexNavbarExact .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"] .loginIndexNavbarExact.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"] .loginIndexNavbarExact.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"] .loginIndexNavbarExact .desktopArticleSearchInput{color:#eafcff !important;
    caret-color:#53ebe8 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopArticleSearchInput::placeholder{color:#aac8cc !important;
    opacity:.80 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopArticleSearchButton{color:#53ebe8 !important;
    background:#102b30 !important;
    border-left-color:rgba(255,255,255,.08) !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopArticleSearchButton:hover{color:#7ce8dc !important;
    background:rgba(15,159,141,.055) !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopNavbarUtilities .statusTool:hover{color:#0e9382 !important;
    background:#ffffff !important;
    border-color:rgba(15,159,141,.22) !important;
    transform:translateY(-1px) !important;}
.loginIndexNavbarExact .desktopNavbarUtilities .statusTool--lang{font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;}
.loginIndexNavbarExact .desktopNavbarUtilities .statusTool--theme{font-size:11.5px !important;}
.loginIndexNavbarExact .desktopNavbarUtilities .statusTool--theme i{display:block !important;
    margin:0 !important;
    line-height:1 !important;
    transform:none !important;}
html[data-theme="dark"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .desktopNavbarUtilities .statusTool:hover{color:#7ce8dc !important;
    background:rgba(24,61,67,.98) !important;
    border-color:rgba(15,159,141,.24) !important;}
.loginIndexNavbarExact .desktopNav{margin-left:0 !important;}
}
@media (min-width:980px) and (max-width:1150px){
.loginIndexNavbarExact.appHeader{gap:9px !important;
    padding-left:24px !important;
    padding-right:24px !important;}
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact .desktopArticleSearchInput{padding-left:8px !important;
    padding-right:6px !important;
    font-size:8.7px !important;}
.loginIndexNavbarExact .desktopArticleSearchButton{width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    border-radius:7px !important;
    font-size:11px !important;}
.loginIndexNavbarExact .desktopNavbarUtilities{gap:5px !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopNavbarUtilities .statusTool--lang{font-size:9px !important;}
.loginIndexNavbarExact .desktopNavbarUtilities .statusTool--theme{font-size:10.5px !important;}
.loginIndexNavbarExact .desktopNav{gap:0 !important;}
.loginIndexNavbarExact .desktopNav a{min-height:36px !important;
    padding:0 7px !important;
    font-size:9.7px !important;}
.loginIndexNavbarExact .desktopNav .desktopNavLogin{margin-left:4px !important;
    padding-left:11px !important;
    padding-right:11px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact.appHeader > .mobileNavbarTheme{display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;}
.loginIndexNavbarExact.appHeader > .brandLockup,
.loginIndexNavbarExact.appHeader > .desktopInstitutionLockup{flex:0 0 auto !important;}
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact.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"] .loginIndexNavbarExact.appHeader > .mobileNavbarSearch{background:#ffffff !important;}
html[data-theme="dark"] .loginIndexNavbarExact.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;}
}
@media (max-width:420px){
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch{height:31px !important;
    border-radius:5px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch{height:29px !important;}
}
.loginIndexNavbarExact .desktopNav .desktopNavLogin{background:linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 56%,
      #0e9382 100%
    ) !important;}
.loginIndexNavbarExact .desktopNav .desktopNavLogin:hover{background:linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 48%,
      #0e9382 100%
    ) !important;}
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact .brandLogoShadow{position:relative !important;
  display:inline-grid !important;
  place-items:center !important;
  flex:0 0 auto !important;
  isolation:isolate !important;}
.loginIndexNavbarExact .brandLogoShadow .brandLogoWrap,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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){
.loginIndexNavbarExact .brandLogoShadow .brandLogo{width:86% !important;
    height:86% !important;
    max-width:86% !important;
    max-height:86% !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .brandLogoShadow .brandLogo{width:87% !important;
    height:87% !important;
    max-width:87% !important;
    max-height:87% !important;}
}
.loginIndexNavbarExact .brandLogoShadow .brandLogoWrap,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .brandLogoShadow .brandLogo{transform:translate3d(-0.5%, -0.7%, 0) !important;}
@media (max-width:620px){
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact.appHeader > .brandLockup,
.loginIndexNavbarExact.appHeader > .desktopInstitutionLockup,
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch{min-width:0 !important;}
.loginIndexNavbarExact.appHeader > .brandLockup{flex:0 1 auto !important;}
.loginIndexNavbarExact.appHeader .brandCopy{overflow:hidden !important;}
.loginIndexNavbarExact.appHeader .brandCopy strong,
.loginIndexNavbarExact.appHeader .brandCopy small{max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;}
.loginIndexNavbarExact.appHeader > .desktopInstitutionLockup{flex:0 1 auto !important;
    max-width:clamp(84px, 23vw, 108px) !important;}
.loginIndexNavbarExact.appHeader .desktopInstitutionIdentity{min-width:0 !important;
    max-width:100% !important;}
.loginIndexNavbarExact.appHeader .desktopInstitutionLogo{width:100% !important;
    max-width:92px !important;
    height:auto !important;
    max-height:22px !important;}
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch{transform:none !important;}
}
@media (min-width:421px) and (max-width:520px){
.loginIndexNavbarExact.appHeader{padding-left:max(16px, env(safe-area-inset-left)) !important;
    padding-right:max(16px, env(safe-area-inset-right)) !important;}
.loginIndexNavbarExact.appHeader > .brandLockup{max-width:146px !important;}
.loginIndexNavbarExact.appHeader > .desktopInstitutionLockup{max-width:102px !important;}
.loginIndexNavbarExact.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){
.loginIndexNavbarExact.appHeader > .brandLockup{flex:0 1 auto !important;}
.loginIndexNavbarExact.appHeader > .desktopInstitutionLockup{flex:0 1 auto !important;}
}
@media (max-width:390px){
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch{flex-basis:clamp(88px, 26vw, 102px) !important;}
.loginIndexNavbarExact.appHeader .desktopInstitutionLogo{max-width:76px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact.appHeader > .brandLockup{max-width:148px !important;}
.loginIndexNavbarExact.appHeader .brandCopy{flex:0 1 auto !important;
    min-width:0 !important;
    max-width:96px !important;}
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact.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){
.loginIndexNavbarExact.appHeader .brandCopy{max-width:90px !important;}
.loginIndexNavbarExact.appHeader .brandCopy strong{font-size:16.8px !important;
    letter-spacing:-.042em !important;}
.loginIndexNavbarExact.appHeader .brandCopy small{margin-top:2px !important;
    font-size:7.2px !important;}
}
@media (max-width:390px){
.loginIndexNavbarExact.appHeader .brandCopy{max-width:84px !important;}
.loginIndexNavbarExact.appHeader .brandCopy strong{font-size:16px !important;}
.loginIndexNavbarExact.appHeader .brandCopy small{font-size:6.8px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact.appHeader .brandCopy{max-width:78px !important;}
.loginIndexNavbarExact.appHeader .brandCopy strong{font-size:15.2px !important;}
.loginIndexNavbarExact.appHeader .brandCopy small{display:block !important;
    font-size:6.4px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact.appHeader > .brandLockup{gap:3px !important;}
.loginIndexNavbarExact.appHeader .brandCopy{margin-left:-1px !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact.appHeader > .brandLockup{gap:2px !important;}
.loginIndexNavbarExact.appHeader .brandCopy{margin-left:-1px !important;}
}
@media (max-width:390px){
.loginIndexNavbarExact.appHeader > .brandLockup{gap:2px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact.appHeader > .brandLockup{gap:1px !important;}
.loginIndexNavbarExact.appHeader .brandCopy{margin-left:-1px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact.appHeader{gap:5px !important;}
.loginIndexNavbarExact.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;}
}
@media (max-width:420px){
.loginIndexNavbarExact.appHeader{padding-left:max(12px, env(safe-area-inset-left)) !important;
    padding-right:max(12px, env(safe-area-inset-right)) !important;
    gap:4px !important;}
.loginIndexNavbarExact.appHeader > .brandLockup{max-width:120px !important;}
.loginIndexNavbarExact.appHeader > .desktopInstitutionLockup{max-width:78px !important;}
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch{flex:0 1 116px !important;
    grid-template-columns:minmax(0,1fr) 31px !important;
    margin-left:auto !important;
    margin-right:0 !important;}
}
@media (max-width:390px){
.loginIndexNavbarExact.appHeader{padding-left:max(11px, env(safe-area-inset-left)) !important;
    padding-right:max(11px, env(safe-area-inset-right)) !important;
    gap:4px !important;}
.loginIndexNavbarExact.appHeader > .brandLockup{max-width:118px !important;}
.loginIndexNavbarExact.appHeader > .desktopInstitutionLockup{max-width:74px !important;}
.loginIndexNavbarExact.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;}
}
@media (max-width:350px){
.loginIndexNavbarExact.appHeader{padding-left:max(10px, env(safe-area-inset-left)) !important;
    padding-right:max(10px, env(safe-area-inset-right)) !important;
    gap:3px !important;}
.loginIndexNavbarExact.appHeader > .brandLockup{max-width:110px !important;}
.loginIndexNavbarExact.appHeader > .desktopInstitutionLockup{max-width:66px !important;}
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch{flex:0 1 96px !important;
    grid-template-columns:minmax(0,1fr) 28px !important;}
}
.loginIndexNavbarExact .brandLogoShadow .brandLogoWrap,
html[data-theme="dark"] .loginIndexNavbarExact .brandLogoShadow .brandLogoWrap{background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;}
.loginIndexNavbarExact .brandLogoShadow .brandLogoWrap::before,
.loginIndexNavbarExact .brandLogoShadow .brandLogoWrap::after{content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  opacity:0 !important;}
.loginIndexNavbarExact .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"] .loginIndexNavbarExact .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){
.loginIndexNavbarExact .brandLogoShadow .brandLogoWrap,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .brandLogoShadow .brandLogo{transform:translate3d(-0.4%, 1.35%, 0) !important;}
.loginIndexNavbarExact .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){
.loginIndexNavbarExact .brandLogoShadow .brandLogo{transform:translate3d(-0.4%, 1.7%, 0) !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .brandLogoShadow .brandLogo{transform:translate3d(-0.4%, 1.9%, 0) !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact.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"] .loginIndexNavbarExact.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;}
.loginIndexNavbarExact.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"] .loginIndexNavbarExact.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;}
}
@media (max-width:420px){
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch,
html[data-theme="dark"] .loginIndexNavbarExact.appHeader > .mobileNavbarSearch{border-radius:10px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch,
html[data-theme="dark"] .loginIndexNavbarExact.appHeader > .mobileNavbarSearch{border-radius:9px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch,
html[data-theme="dark"] .loginIndexNavbarExact.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;}
}
@media (max-width:420px){
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch,
html[data-theme="dark"] .loginIndexNavbarExact.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;}
}
@media (max-width:350px){
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch,
html[data-theme="dark"] .loginIndexNavbarExact.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;}
}
@media (max-width:620px){
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch{flex-basis:154px !important;
    width:clamp(126px, 32vw, 154px) !important;
    min-width:126px !important;
    max-width:154px !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch{flex-basis:134px !important;
    width:134px !important;
    min-width:134px !important;
    max-width:134px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact.appHeader > .mobileNavbarSearch{flex-basis:110px !important;
    width:110px !important;
    min-width:110px !important;
    max-width:110px !important;}
}
.loginIndexNavbarExact .brandCopy strong,
html[data-theme="dark"] .loginIndexNavbarExact .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){
.loginIndexNavbarExact .brandCopy strong,
html[data-theme="dark"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .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;}
@media (min-width:980px){
.loginIndexNavbarExact .desktopNavbarUtilities{display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    margin-left:auto !important;

    overflow:visible !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopSegmentedControl--theme{width:78px !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopSegmentOption--text{font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.025em !important;}
.loginIndexNavbarExact .desktopSegmentOption--icon{font-size:11px !important;}
.loginIndexNavbarExact .desktopSegmentOption--icon i{display:block !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    transform:none !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopSegmentOption:hover{color:#0e9382 !important;}
.loginIndexNavbarExact .desktopSegmentOption:focus-visible{outline:2px solid rgba(15,159,141,.28) !important;
    outline-offset:-1px !important;}
.loginIndexNavbarExact .desktopSegmentedControl--theme .desktopSegmentOption[aria-pressed="true"]{color:#294052 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .desktopSegmentOption{color:#7f9ba2 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .desktopSegmentOption:hover{color:#73e6dd !important;}
}
@media (min-width:980px) and (max-width:1150px){
.loginIndexNavbarExact .desktopNavbarUtilities{gap:6px !important;}
.loginIndexNavbarExact .desktopSegmentedControl,
.loginIndexNavbarExact .desktopSegmentedControl--theme{width:68px !important;
    height:30px !important;
    padding:3px !important;}
.loginIndexNavbarExact .desktopSegmentOption{height:24px !important;}
.loginIndexNavbarExact .desktopSegmentOption--text{font-size:8.8px !important;}
.loginIndexNavbarExact .desktopSegmentOption--icon{font-size:10px !important;}
}
@media (min-width:980px){
.loginIndexNavbarExact .desktopNav{margin-left:auto !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopNav > .desktopNavbarUtilities + .desktopNavLogin{margin-left:14px !important;}
}
@media (min-width:980px) and (max-width:1150px){
.loginIndexNavbarExact .desktopNav > .desktopNavbarUtilities{margin-left:3px !important;
    margin-right:3px !important;
    gap:6px !important;}
.loginIndexNavbarExact .desktopNav > .desktopNavbarUtilities + .desktopNavLogin{margin-left:10px !important;}
}
@media (min-width:980px){
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
html[data-theme="dark"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .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;}
}
@media (min-width:980px){
.loginIndexNavbarExact .brandLogoShadow .brandLogoWrap,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .brandLogoShadow .brandLogo{transform:translate3d(-0.4%, 1.35%, 0) !important;}
}
@media (min-width:980px) and (max-height:820px){
.loginIndexNavbarExact .brandLogoShadow .brandLogo{transform:translate3d(-0.4%, 1.45%, 0) !important;}
}
@media (min-width:980px) and (max-height:760px){
.loginIndexNavbarExact .brandLogoShadow .brandLogo{transform:translate3d(-0.4%, 1.60%, 0) !important;}
}
@media (min-width:980px){
.loginIndexNavbarExact .brandLogoShadow .brandLogoWrap,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .brandLogoShadow{overflow:visible !important;}
}
@media (min-width:980px) and (max-width:1150px){
.loginIndexNavbarExact .brandLogoShadow .brandLogo{transform:translate3d(-0.4%, 2.1%, 0) !important;}
}
@media (min-width:980px) and (max-height:760px){
.loginIndexNavbarExact .brandLogoShadow .brandLogo{transform:translate3d(-0.4%, 2.2%, 0) !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact.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;}
html[data-theme="dark"] .loginIndexNavbarExact.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;}
}
@media (max-width:420px){
.loginIndexNavbarExact.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;}
}
@media (max-width:350px){
.loginIndexNavbarExact.appHeader > .mobileNavbarQuickActions{width:60px !important;
    min-width:60px !important;
    max-width:60px !important;
    height:32px !important;
    border-radius:9px !important;}
}
.loginIndexNavbarExact .mobileNavbarHeaderActions{display:none;}
@media (max-width:620px){
.loginIndexNavbarExact.appHeader > .mobileNavbarQuickActions{display:none !important;}
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarIconCard:active{transform:translateY(0) scale(.95) !important;}
.loginIndexNavbarExact .mobileNavbarIconCard:focus-visible{outline:2px solid rgba(15,159,141,.34) !important;
    outline-offset:2px !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarIconCard--menu i{font-size:12.8px !important;}
html[data-theme="dark"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .mobileNavbarIconCard:hover{color:#7ce8dc !important;
    background:#14353a !important;
    border-color:rgba(15,159,141,.24) !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact.appHeader > .mobileNavbarHeaderActions{gap:6px !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarIconCard--menu i{font-size:12px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact.appHeader > .mobileNavbarHeaderActions{gap:5px !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarIconCard--menu i{font-size:11.2px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarIconCard--menu:hover{color:#0e9382 !important;

    background:transparent !important;
    background-image:none !important;

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

    transform:translateY(-1px) !important;}
.loginIndexNavbarExact .mobileNavbarIconCard--menu:active{background:transparent !important;
    box-shadow:none !important;

    transform:translateY(0) scale(.92) !important;}
.loginIndexNavbarExact .mobileNavbarIconCard--menu:focus-visible{outline:2px solid rgba(15,159,141,.34) !important;
    outline-offset:2px !important;
    border-radius:7px !important;}
.loginIndexNavbarExact .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"] .loginIndexNavbarExact .mobileNavbarIconCard--menu{color:#53ebe8 !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    box-shadow:none !important;}
html[data-theme="dark"] .loginIndexNavbarExact .mobileNavbarIconCard--menu:hover{color:#7ce8dc !important;
    background:transparent !important;
    box-shadow:none !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarIconCard--menu i{font-size:19px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarIconCard--menu i{font-size:18px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact .mobileNavbarIconCard--menu i,
.loginIndexNavbarExact .mobileNavbarIconCard--menu .fa-grid-round{font-size:24px !important;
    line-height:1 !important;
    transform:none !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact .mobileNavbarIconCard--menu i,
.loginIndexNavbarExact .mobileNavbarIconCard--menu .fa-grid-round{font-size:23px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .mobileNavbarIconCard--menu i,
.loginIndexNavbarExact .mobileNavbarIconCard--menu .fa-grid-round{font-size:22px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact .mobileNavbarIconCard--search i{font-size:14.5px !important;
    line-height:1 !important;
    transform:none !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact .mobileNavbarIconCard--search i{font-size:14px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .mobileNavbarIconCard--search i{font-size:13.5px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
html[data-theme="dark"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .mobileSidebarInstitutionLockup .desktopInstitutionLabel{color:#aac8cc !important;}
html[data-theme="dark"] .loginIndexNavbarExact .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){
.loginIndexNavbarExact .mobileSidebarInstitutionLockup .desktopInstitutionDivider{height:29px !important;}
.loginIndexNavbarExact .mobileSidebarInstitutionLockup .desktopInstitutionLabel{font-size:5.35px !important;}
.loginIndexNavbarExact .mobileSidebarInstitutionLockup .desktopInstitutionLogo{height:18px !important;
    max-width:76px !important;
    max-height:18px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .mobileSidebarInstitutionLockup .desktopInstitutionDivider{height:26px !important;}
.loginIndexNavbarExact .mobileSidebarInstitutionLockup .desktopInstitutionLabel{font-size:4.9px !important;}
.loginIndexNavbarExact .mobileSidebarInstitutionLockup .desktopInstitutionLogo{height:16px !important;
    max-width:68px !important;
    max-height:16px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact.appHeader > .mobileNavbarHeaderActions{gap:8px !important;
    overflow:visible !important;}
.loginIndexNavbarExact .mobileNavbarIconCard--search,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarIconCard--search:hover,
html[data-theme="dark"] .loginIndexNavbarExact .mobileNavbarIconCard--search:hover{color:#0e9382 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:translateY(-1px) !important;}
.loginIndexNavbarExact .mobileNavbarIconCard--search:active{transform:translateY(0) scale(.92) !important;}
.loginIndexNavbarExact .mobileNavbarIconCard--search:focus-visible{outline:2px solid rgba(15,159,141,.30) !important;
    outline-offset:3px !important;
    border-radius:7px !important;}
.loginIndexNavbarExact .mobileNavbarIconCard--search i,
.loginIndexNavbarExact .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"] .loginIndexNavbarExact .mobileNavbarIconCard--search{color:#53ebe8 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .mobileNavbarIconCard--search:hover{color:#7ce8dc !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu:hover{color:#0e9382 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;}
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu:active{transform:scale(.94) !important;}
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu:focus-visible{outline:2px solid rgba(15,159,141,.30) !important;
    outline-offset:1px !important;
    border-radius:9px !important;}
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu i,
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .fa-grid-round-4,
.loginIndexNavbarExact .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;}
html[data-theme="dark"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .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"] .loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu{color:#53ebe8 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu:hover{color:#7ce8dc !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact.appHeader > .mobileNavbarHeaderActions{gap:7px !important;}
.loginIndexNavbarExact .mobileNavbarIconCard--search,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarIconCard--search i,
.loginIndexNavbarExact .mobileNavbarIconCard--search .svg-inline--fa{font-size:14.8px !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu i,
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .fa-grid-round-4,
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .svg-inline--fa{font-size:21px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact.appHeader > .mobileNavbarHeaderActions{gap:6px !important;}
.loginIndexNavbarExact .mobileNavbarIconCard--search,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarIconCard--search i,
.loginIndexNavbarExact .mobileNavbarIconCard--search .svg-inline--fa{font-size:14px !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu i,
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .fa-grid-round-4,
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .svg-inline--fa{font-size:20px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact .mobileNavbarIconCard--search i,
.loginIndexNavbarExact .mobileNavbarIconCard--search .fa-magnifying-glass,
.loginIndexNavbarExact .mobileNavbarIconCard--search .svg-inline--fa{font-size:19px !important;
    line-height:1 !important;
    transform:none !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact .mobileNavbarIconCard--search i,
.loginIndexNavbarExact .mobileNavbarIconCard--search .fa-magnifying-glass,
.loginIndexNavbarExact .mobileNavbarIconCard--search .svg-inline--fa{font-size:18.5px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .mobileNavbarIconCard--search i,
.loginIndexNavbarExact .mobileNavbarIconCard--search .fa-magnifying-glass,
.loginIndexNavbarExact .mobileNavbarIconCard--search .svg-inline--fa{font-size:18px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact .mobileNavbarIconCard--search i,
.loginIndexNavbarExact .mobileNavbarIconCard--search .fa-magnifying-glass,
.loginIndexNavbarExact .mobileNavbarIconCard--search .svg-inline--fa{font-size:22px !important;
    line-height:1 !important;
    transform:none !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact .mobileNavbarIconCard--search i,
.loginIndexNavbarExact .mobileNavbarIconCard--search .fa-magnifying-glass,
.loginIndexNavbarExact .mobileNavbarIconCard--search .svg-inline--fa{font-size:21.5px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .mobileNavbarIconCard--search i,
.loginIndexNavbarExact .mobileNavbarIconCard--search .fa-magnifying-glass,
.loginIndexNavbarExact .mobileNavbarIconCard--search .svg-inline--fa{font-size:21px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu i,
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .fa-grid-round-4,
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .svg-inline--fa{font-size:26px !important;
    line-height:1 !important;
    transform:none !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu i,
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .fa-grid-round-4,
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .svg-inline--fa{font-size:25.5px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu i,
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .fa-grid-round-4,
.loginIndexNavbarExact .mobileNavbarMenuNeumorph > .mobileNavbarIconCard--menu .svg-inline--fa{font-size:25px !important;}
}
@media (min-width:980px){
.loginIndexNavbarExact .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:700 !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"] .loginIndexNavbarExact .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;}
}
@media (max-width:620px){
.loginIndexNavbarExact .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:700 !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;}
html[data-theme="dark"] .loginIndexNavbarExact .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;}
}
@media (min-width:980px){
.loginIndexNavbarExact.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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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"] .loginIndexNavbarExact .desktopArticleSearchButton{border-left:0 !important;
    border-right:1px solid rgba(255,255,255,.08) !important;}
}
@media (min-width:980px) and (max-width:1150px){
.loginIndexNavbarExact.appHeader > .desktopArticleSearch{margin-left:11px !important;

    grid-template-columns:30px minmax(0,1fr) !important;
    column-gap:2px !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .desktopArticleSearchInput{grid-column:2 !important;
    grid-row:1 !important;

    padding-left:7px !important;
    padding-right:6px !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopArticleSearchButton{border-left:0 !important;
    border-right-color:rgba(255,255,255,.08) !important;}
}
@media (min-width:980px){
.loginIndexNavbarExact .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;}
html[data-theme="dark"] .loginIndexNavbarExact .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;}
}
@media (max-width:620px){
.loginIndexNavbarExact .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;}
html[data-theme="dark"] .loginIndexNavbarExact .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;}
}
@media (max-width:420px){
.loginIndexNavbarExact .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"] .loginIndexNavbarExact .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;}
}
@media (max-width:350px){
.loginIndexNavbarExact .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"] .loginIndexNavbarExact .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;}
}
@media (max-width:620px){
.loginIndexNavbarExact .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"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileSidebarBrand .brandLogoShadow .brandLogoWrap,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileSidebarBrand .brandLogoShadow .brandLogoWrap::before,
.loginIndexNavbarExact .mobileSidebarBrand .brandLogoShadow .brandLogoWrap::after{content:none !important;
    display:none !important;
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
    opacity:0 !important;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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:700 !important;
    letter-spacing:-.040em !important;

    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;}
.loginIndexNavbarExact .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"] .loginIndexNavbarExact .mobileSidebarBrand .brandCopy small{color:#aac8cc !important;}
}
@media (max-width:420px){
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileSidebarBrand .brandLogoShadow .brandLogoWrap,
html[data-theme="dark"] .loginIndexNavbarExact .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;}
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileSidebarBrand > .brandCopy{max-width:90px !important;}
.loginIndexNavbarExact .mobileSidebarBrand .brandCopy strong{font-size:16.8px !important;
    letter-spacing:-.042em !important;}
.loginIndexNavbarExact .mobileSidebarBrand .brandCopy small{margin-top:2px !important;
    font-size:7.2px !important;}
}
@media (max-width:390px){
.loginIndexNavbarExact .mobileSidebarBrand > .brandCopy{max-width:84px !important;}
.loginIndexNavbarExact .mobileSidebarBrand .brandCopy strong{font-size:16px !important;}
.loginIndexNavbarExact .mobileSidebarBrand .brandCopy small{font-size:6.8px !important;}
}
@media (max-width:350px){
.loginIndexNavbarExact .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;}
.loginIndexNavbarExact .mobileSidebarBrand > .brandCopy{max-width:78px !important;}
.loginIndexNavbarExact .mobileSidebarBrand .brandCopy strong{font-size:15.2px !important;}
.loginIndexNavbarExact .mobileSidebarBrand .brandCopy small{display:block !important;
    font-size:6.4px !important;}
}
@media (max-width:620px){
.loginIndexNavbarExact body.is-mobile-sidebar-closing .mobileNavbarHeaderActions{pointer-events:none !important;}
}

@media (min-width:980px){
@media (prefers-reduced-motion:reduce){
.loginIndexNavbarExact.appHeader{transition:none !important;}
}
}
@media (min-width:980px){
.loginIndexNavbarExact.appHeader{position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:0 !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  z-index:1000 !important;
  transform:none !important;
  translate:none !important;
  isolation:isolate !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition:
      background .28s cubic-bezier(.22,.61,.36,1),
      border-color .28s cubic-bezier(.22,.61,.36,1),
      box-shadow .28s cubic-bezier(.22,.61,.36,1),
      backdrop-filter .28s cubic-bezier(.22,.61,.36,1),
      -webkit-backdrop-filter .28s cubic-bezier(.22,.61,.36,1) !important;}
.loginIndexNavbarExact.appHeader.is-scrolled{background:linear-gradient(
        180deg,
        rgba(255,255,255,.80) 0%,
        rgba(248,253,252,.70) 100%
      ) !important;
  border-bottom-color:rgba(255,255,255,.58) !important;
  box-shadow:
      0 10px 28px rgba(19,62,70,.085),
      0 2px 8px rgba(19,62,70,.035),
      inset 0 1px 0 rgba(255,255,255,.74) !important;
  backdrop-filter:
      blur(18px)
      saturate(1.10)
      brightness(1.025) !important;
  -webkit-backdrop-filter:
      blur(18px)
      saturate(1.10)
      brightness(1.025) !important;}
html[data-theme="dark"] .loginIndexNavbarExact.appHeader.is-scrolled{background:linear-gradient(
        180deg,
        rgba(16,43,48,.82) 0%,
        rgba(10,31,35,.72) 100%
      ) !important;
  border-bottom-color:rgba(255,255,255,.085) !important;
  box-shadow:
      0 12px 30px rgba(0,0,0,.22),
      0 2px 8px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter:
      blur(18px)
      saturate(1.06)
      brightness(.985) !important;
  -webkit-backdrop-filter:
      blur(18px)
      saturate(1.06)
      brightness(.985) !important;}
}
@media (min-width:980px){
.loginIndexNavbarExact .desktopNav{display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:0 !important;}
.loginIndexNavbarExact .desktopNav > a{text-decoration:none !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4){position:relative !important;
  min-height:40px !important;
  padding:0 24px !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:12.2px !important;
  line-height:1 !important;
  font-weight:760 !important;
  letter-spacing:-.01em !important;
  white-space:nowrap !important;
  transition:color .22s ease,
      opacity .22s ease,
      transform .22s ease !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+3)::after{content:"" !important;
  position:absolute !important;
  top:50% !important;
  right:0 !important;
  width:1px !important;
  height:22px !important;
  transform:translateY(-50%) !important;
  pointer-events:none !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4)::before{content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:-1px !important;
  width:44px !important;
  height:2px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#15a79a 0%, #43c1ae 100%) !important;
  transform:translateX(-50%) scaleX(.35) !important;
  transform-origin:center !important;
  opacity:0 !important;
  transition:transform .22s ease,
      opacity .22s ease,
      filter .22s ease !important;
  filter:drop-shadow(0 1px 1px rgba(15,159,141,.12)) !important;
  pointer-events:none !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4):hover,
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4):focus-visible{color:#0f9f8d !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4):focus-visible{outline:none !important;}
.loginIndexNavbarExact .desktopNav .desktopNavbarUtilities{margin-left:18px !important;}
.loginIndexNavbarExact .desktopNav .desktopNavLogin{margin-left:14px !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4){color:#d6e3e6 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(1),
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4):hover,
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4):focus-visible{color:#8ae1d3 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4)::before{background:linear-gradient(90deg,#4fd0bf 0%, #9ee7dc 100%) !important;
  filter:drop-shadow(0 1px 1px rgba(79,208,191,.10)) !important;}
}
@media (min-width:980px) and (max-width:1150px){
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4){min-height:36px !important;
  padding:0 16px !important;
  font-size:10.8px !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+3)::after{height:18px !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4)::before{width:38px !important;}
.loginIndexNavbarExact .desktopNav .desktopNavbarUtilities{margin-left:12px !important;}
.loginIndexNavbarExact .desktopNav .desktopNavLogin{margin-left:10px !important;}
}
@media (min-width:980px) and (max-height:820px){
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4){min-height:34px !important;
  padding:0 15px !important;
  font-size:10.4px !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+3)::after{height:17px !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4)::before{width:36px !important;
  bottom:0 !important;}
}
@media (min-width:980px) and (max-height:720px){
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4){min-height:32px !important;
  padding:0 13px !important;
  font-size:9.8px !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+3)::after{height:16px !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4)::before{width:34px !important;}
}
@media (min-width:980px){
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4){color:#27485e !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(1){color:#27485e !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(1)::before{background:linear-gradient(
        90deg,
        #0e9382 0%,
        #0f9f8d 100%
      ) !important;
  filter:drop-shadow(
        0 1px 1px rgba(14,147,130,.14)
      ) !important;
  opacity:1 !important;
  transform:translateX(-50%)
      scaleX(1) !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(2)::before{background:linear-gradient(
        90deg,
        #0f9f8d 0%,
        #37b89d 100%
      ) !important;
  filter:drop-shadow(
        0 1px 1px rgba(55,184,157,.13)
      ) !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(3)::before{background:linear-gradient(
        90deg,
        #37b89d 0%,
        #79c97b 100%
      ) !important;
  filter:drop-shadow(
        0 1px 1px rgba(121,201,123,.13)
      ) !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(4)::before{background:linear-gradient(
        90deg,
        #79c97b 0%,
        #c4d63c 100%
      ) !important;
  filter:drop-shadow(
        0 1px 1px rgba(196,214,60,.14)
      ) !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(1):hover,
.loginIndexNavbarExact .desktopNav > a:nth-of-type(1):focus-visible{color:#0e9382 !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(2):hover,
.loginIndexNavbarExact .desktopNav > a:nth-of-type(2):focus-visible{color:#1ca88f !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(3):hover,
.loginIndexNavbarExact .desktopNav > a:nth-of-type(3):focus-visible{color:#5fba76 !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(4):hover,
.loginIndexNavbarExact .desktopNav > a:nth-of-type(4):focus-visible{color:#98b52f !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4):hover::before,
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4):focus-visible::before{opacity:1 !important;
  transform:translateX(-50%)
      scaleX(1) !important;}
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+3)::after{background:linear-gradient(
        180deg,
        rgba(38,80,101,.06) 0%,
        rgba(38,80,101,.17) 50%,
        rgba(38,80,101,.06) 100%
      ) !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4),
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(1){color:#d6e3e6 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(1):hover,
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(1):focus-visible{color:#67d9ca !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(2):hover,
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(2):focus-visible{color:#78dcc2 !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(3):hover,
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(3):focus-visible{color:#9ddc9d !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(4):hover,
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(4):focus-visible{color:#d2df6d !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(1)::before{background:linear-gradient(
        90deg,
        #4fd0bf 0%,
        #67d9ca 100%
      ) !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(2)::before{background:linear-gradient(
        90deg,
        #67d9ca 0%,
        #78dcc2 100%
      ) !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(3)::before{background:linear-gradient(
        90deg,
        #78dcc2 0%,
        #9ddc9d 100%
      ) !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(4)::before{background:linear-gradient(
        90deg,
        #9ddc9d 0%,
        #d2df6d 100%
      ) !important;}
html[data-theme="dark"] .loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+3)::after{background:linear-gradient(
        180deg,
        rgba(214,227,230,.06) 0%,
        rgba(214,227,230,.16) 50%,
        rgba(214,227,230,.06) 100%
      ) !important;}
}
@media (min-width:980px) and (max-width:1150px){
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4),
.loginIndexNavbarExact .desktopNav > a:nth-of-type(1){color:#27485e !important;}
}
@media (min-width:980px) and (max-height:820px){
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4),
.loginIndexNavbarExact .desktopNav > a:nth-of-type(1){color:#27485e !important;}
}
@media (min-width:980px) and (max-height:720px){
.loginIndexNavbarExact .desktopNav > a:nth-of-type(-n/**/+4),
.loginIndexNavbarExact .desktopNav > a:nth-of-type(1){color:#27485e !important;}
}

/* =========================================================

/* =========================================================
   V14 - DESKTOP NAVBAR EXACT INDEX CASCADE / MOBILE RESTORED
   ---------------------------------------------------------
   PRINSIP FINAL:
   - <980px tetap memakai navbar login original yang sudah stabil.
   - >=980px memakai markup .loginIndexNavbarExact.
   - SEMUA geometri internal navbar desktop (padding horizontal,
     gap, ukuran brand, RSAB lockup, search, nav links,
     segmented controls, dan tombol Masuk) TIDAK didefinisikan
     ulang di blok ini.
   - Geometri tersebut sepenuhnya mengikuti salinan cascade
     Index yang berada tepat sebelum blok V14 ini.
   - Dengan demikian tidak ada lagi override Login yang
     menggeser posisi komponen navbar Index.
   ========================================================= */
.loginDesktopIndexNavbarWrap{
  display:none !important;
  --teal:#0f9f8d;
  --teal-strong:#0e9382;
  --teal-deep:#0e9382;
  --teal-soft:rgba(15,159,141,.10);
  --aqua:#0f9f8d;
  --lime:#0f9f8d;
  --focus:rgba(15,159,141,.32);
}

@media (min-width:980px){
  /* Navbar HP/tablet original tetap ada di source tetapi tidak
     dirender pada desktop. */
  .loginOriginalNavbarWrap{
    display:none !important;
  }

  /* Wrapper desktop tidak ikut menentukan spacing navbar. */
  .loginDesktopIndexNavbarWrap{
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    pointer-events:auto !important;
    z-index:1000 !important;
  }

  /* Header Index bersifat fixed. Reservasi tinggi ini hanya
     mencegah konten login masuk ke bawah navbar. */
  .wrap{
    padding-top:88px !important;
  }
}

/* Tinggi compact mengikuti tinggi navbar Index existing.
   Tidak mengubah spacing horizontal atau komponen navbar. */
@media (min-width:980px) and (max-height:820px){
  .wrap{
    padding-top:78px !important;
  }
}

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


/* =========================================================
   V16 - NAVBAR THEME-TO-LOGIN GAP EXACT INDEX
   ---------------------------------------------------------
   Root-cause fix only:
   - direct adjacent selector has higher specificity than the
     later generic .desktopNavLogin rule; therefore old 2px/1px
     values were still winning despite later 14px/10px rules.
   - desktop >=980px now uses 14px between utilities and Masuk.
   - compact laptop 980-1150px uses 10px, matching final Index.
   - no JS / auth / mobile / tablet changes.
   ========================================================= */


/* =========================================================
   FINAL V17 - DESKTOP INTRO TOP ANCHOR STABLE
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Konten kiri tidak lagi vertical-center sehingga tidak
     naik / turun ketika tinggi viewport berubah.
   - Top konten kiri memakai anchor yang sama dengan top card
     login kanan.
   - Tidak mengubah ukuran, isi, warna, auth, navbar, footer,
     JavaScript, Firebase, maupun tampilan <=979px.
   ========================================================= */

@media (min-width:980px){
  .hero.heroSplit.loginHero{
    --login-desktop-content-top:48px;
  }

  /* Kolom kiri: anchor ke atas, bukan center viewport. */
  .loginDesktopIntro.loginDesktopIntro--variant1{
    justify-content:flex-start !important;
    padding-top:var(--login-desktop-content-top) !important;
  }

  /* Hilangkan offset negatif yang sebelumnya membuat copy
     berubah posisi saat media query tinggi viewport aktif. */
  .loginDesktopVariant1Copy{
    margin-top:0 !important;
  }

  /* Kolom kanan memakai anchor vertikal yang sama agar top
     login card menjadi patokan visual yang konsisten. */
  .loginDesktopFormPanel{
    align-items:flex-start !important;
    padding-top:var(--login-desktop-content-top) !important;
  }
}

/* Compact laptop tetap memakai satu anchor tetap yang sama
   pada kiri dan kanan. Nilainya hanya mengikuti lebar layar,
   bukan tinggi viewport. */
@media (min-width:980px) and (max-width:1180px){
  .hero.heroSplit.loginHero{
    --login-desktop-content-top:30px;
  }
}

/* Layar desktop lebar diberi ruang sedikit lebih lega,
   tetapi kiri dan kanan tetap memakai anchor yang identik. */
@media (min-width:1440px){
  .hero.heroSplit.loginHero{
    --login-desktop-content-top:52px;
  }
}

/* Penting: breakpoint tinggi lama tidak boleh menggeser
   posisi vertikal lagi. Anchor tetap mengikuti width rules. */
@media (min-width:980px) and (max-height:820px){
  .loginDesktopIntro.loginDesktopIntro--variant1,
  .loginDesktopFormPanel{
    padding-top:var(--login-desktop-content-top) !important;
  }

  .loginDesktopVariant1Copy{
    margin-top:0 !important;
  }
}


/* =========================================================
   FINAL V20 - DESKTOP LEFT INTRO LOWER FOR CARD ALIGNMENT
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Menurunkan blok kiri sedikit agar puncak logo/heading
     lebih sejajar dengan top card login kanan.
   - Tetap stabil saat tinggi layar berubah.
   - Tidak mengubah fungsi auth, navbar, footer, atau mobile.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopVariant1Copy{
    transform:translateY(-6px) !important;
  }
}

@media (min-width:980px) and (max-width:1180px){
  .loginDesktopVariant1Copy{
    transform:translateY(-4px) !important;
  }
}

@media (min-width:1440px){
  .loginDesktopVariant1Copy{
    transform:translateY(-8px) !important;
  }
}

@media (min-width:980px) and (max-height:820px){
  .loginDesktopVariant1Copy{
    transform:translateY(-2px) !important;
  }
}


/* =========================================================
   FINAL V19 - LEFT INTRO BACKGROUND MATCH INDEX HERO
   =========================================================
   TUJUAN:
   - Hanya mengubah tampilan desktop section intro kiri.
   - Menampilkan gambar gedung RSAB di background.
   - Memberi white fade dari kiri sangat pekat lalu semakin
     ke kanan semakin transparan seperti karakter hero index.
   - Menjaga teks tetap terbaca dan tidak mengubah fungsi.
   - Mobile / auth flow / navbar / footer tetap aman.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopIntro.loginDesktopIntro--variant1{
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.995) 18%,
        rgba(255,255,255,.985) 31%,
        rgba(255,255,255,.955) 43%,
        rgba(255,255,255,.88) 56%,
        rgba(255,255,255,.70) 68%,
        rgba(255,255,255,.42) 80%,
        rgba(255,255,255,.14) 92%,
        rgba(255,255,255,0) 100%
      ),
      radial-gradient(
        circle at 10% 18%,
        rgba(15,159,141,.060),
        transparent 26%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 58%,
        rgba(255,255,255,.12) 76%,
        rgba(255,255,255,.34) 100%
      ),
      url("../../assets/site/desktop/hero/hero-login.png"),
      linear-gradient(135deg,#ffffff 0%,#fcfefe 62%,#f5fbfa 100%) !important;
    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat !important;
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      clamp(620px,68vw,980px) auto,
      100% 100% !important;
    background-position:
      left top,
      left top,
      left top,
      right center,
      left top !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1::before{
    top:14% !important;
    left:43% !important;
    width:118px !important;
    height:118px !important;
    background:rgba(15,159,141,.030) !important;
    box-shadow:0 0 0 18px rgba(15,159,141,.010) !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1::after{
    left:-2% !important;
    right:-2% !important;
    bottom:-128px !important;
    height:238px !important;
    background:linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.05) 40%,
      rgba(240,249,247,.30) 72%,
      rgba(228,243,240,.52) 100%
    ) !important;
  }

  .loginDesktopVariant1Copy{
    position:relative !important;
    z-index:4 !important;
  }
}

@media (min-width:980px) and (max-width:1180px){
  .loginDesktopIntro.loginDesktopIntro--variant1{
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      clamp(520px,67vw,760px) auto,
      100% 100% !important;
    background-position:
      left top,
      left top,
      left top,
      right center,
      left top !important;
  }
}

@media (min-width:1440px){
  .loginDesktopIntro.loginDesktopIntro--variant1{
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      clamp(760px,60vw,1080px) auto,
      100% 100% !important;
  }
}


/* =========================================================
   V22 - HTML/CSS/JS CLEAN SEPARATION
   ---------------------------------------------------------
   Rules that used to live in login.html are centralized here.
   ========================================================= */
#bg,
.ringHint,
#ringHint,
#ringArea,
.heroRight{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.auth-page .overlay{
  pointer-events:none;
}

.navAnchorOnly{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

@media (max-width:979px){
  .loginHero{
    grid-template-columns:minmax(0,1fr) !important;
    justify-items:center;
  }

  .loginHero .heroLeft{
    width:min(560px,100%);
    margin:0 auto;
  }
}

/* =========================================================
   V22 - FORMAL INDEX-STYLE HOSPITAL LOGIN LAYOUT
   ---------------------------------------------------------
   Desktop only. Mobile/tablet baseline below 980px is locked.
   ========================================================= */
.loginDesktopScene,
.loginDesktopVariant1InstitutionPoints,
.loginDesktopAuthSecurity{
  display:none;
}

@media (min-width:980px){
  main{
    position:relative !important;
    width:100% !important;
    min-height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    background:#ffffff !important;
  }

  .hero.heroSplit.loginHero{
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    min-height:calc(100svh - 88px) !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.48fr) minmax(430px,.78fr) !important;
    align-items:stretch !important;
    gap:0 !important;
    border:0 !important;
    border-radius:0 !important;
    --login-hero-content-top:64px;

    background-image:
      linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255,255,255,1) 22%,
        rgba(255,255,255,.995) 28%,
        rgba(255,255,255,.94) 34%,
        rgba(255,255,255,.78) 40%,
        rgba(255,255,255,.48) 47%,
        rgba(255,255,255,.20) 54%,
        rgba(255,255,255,.08) 61%,
        rgba(255,255,255,.055) 70%,
        rgba(255,255,255,.040) 80%,
        rgba(255,255,255,.030) 90%,
        rgba(255,255,255,.020) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 68%,
        rgba(255,255,255,.06) 82%,
        rgba(255,255,255,.18) 100%
      ),
      url("../../assets/site/desktop/hero/hero-login.png"),
      linear-gradient(180deg,#ffffff 0%,#fbfefe 100%) !important;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat !important;

    background-size:
      100% 100%,
      100% 100%,
      clamp(1060px,83vw,1420px) auto,
      100% 100% !important;

    background-position:
      left top,
      left top,
      right top,
      left top !important;

    box-shadow:none !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }

  .loginDesktopScene,
  .loginDesktopSceneImage,
  .loginDesktopSceneWash{
    display:none !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    grid-column:1 !important;
    position:relative !important;
    z-index:2 !important;
    min-width:0 !important;
    min-height:calc(100svh - 88px) !important;
    margin:0 !important;
    padding:
      var(--login-hero-content-top)
      clamp(44px,4.6vw,82px)
      48px
      clamp(60px,5vw,96px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:0 !important;
    text-align:left !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1::before,
  .loginDesktopIntro.loginDesktopIntro--variant1::after{
    content:none !important;
    display:none !important;
  }

  .loginDesktopVariant1Copy{
    position:relative !important;
    z-index:4 !important;
    width:100% !important;
    max-width:690px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    transform:translateY(35px) !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:16px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoShadow{
    width:88px !important;
    min-width:88px !important;
    max-width:88px !important;
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;
    flex:0 0 88px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:88px !important;
    min-width:88px !important;
    max-width:88px !important;
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogo{
    width:77px !important;
    min-width:77px !important;
    max-width:77px !important;
    height:77px !important;
    min-height:77px !important;
    max-height:77px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    line-height:1 !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy strong{
    font-size:clamp(39px,3.3vw,52px) !important;
    line-height:.98 !important;
    font-weight:800 !important;
    letter-spacing:-.052em !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy small{
    margin-top:7px !important;
    color:#65788a !important;
    font-size:12px !important;
    line-height:1.1 !important;
    font-weight:600 !important;
  }

  .loginDesktopVariant1Headline{
    width:auto !important;
    max-width:700px !important;
    margin:clamp(28px,3.4vh,40px) 0 0 !important;
    color:#17384c !important;
    font-size:clamp(34px,3.10vw,48px) !important;
    line-height:1.025 !important;
    letter-spacing:-.04em !important;
    font-weight:700 !important;
    white-space:nowrap !important;
  }

  .loginDesktopVariant1Headline span{
    display:block !important;
    width:max-content !important;
    max-width:none !important;
    margin-top:4px !important;
    white-space:nowrap !important;
  }

  .loginDesktopVariant1Description{
    width:100% !important;
    max-width:585px !important;
    margin:17px 0 0 !important;
    color:#65788a !important;
    font-size:14.5px !important;
    line-height:1.65 !important;
    font-weight:500 !important;
  }

  .loginDesktopVariant1Institution{
    width:min(430px,100%) !important;
    margin:clamp(24px,3vh,34px) 0 0 !important;
    padding:17px 20px 18px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:9px !important;
    background:rgba(255,255,255,.86) !important;
    border:1px solid rgba(58,105,119,.11) !important;
    border-radius:18px !important;
    box-shadow:
      0 16px 34px rgba(16,70,80,.085),
      0 4px 12px rgba(16,70,80,.035),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    backdrop-filter:blur(6px) saturate(1.04) !important;
    -webkit-backdrop-filter:blur(6px) saturate(1.04) !important;
  }

  .loginDesktopVariant1InstitutionLabel{
    color:#82949f !important;
    font-size:8px !important;
    line-height:1 !important;
    font-weight:600 !important;
  }

  .loginDesktopVariant1InstitutionBody{
    display:flex !important;
    align-items:center !important;
    gap:13px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    width:auto !important;
    height:34px !important;
    max-width:150px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  .loginDesktopVariant1InstitutionBody > span{
    min-height:32px !important;
    padding-left:13px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    border-left:1px solid rgba(58,105,119,.13) !important;
  }

  .loginDesktopVariant1InstitutionBody strong{
    color:#0e9382 !important;
    font-size:11px !important;
    line-height:1.12 !important;
    font-weight:800 !important;
  }

  .loginDesktopVariant1InstitutionBody small{
    margin-top:3px !important;
    color:#65788a !important;
    font-size:9px !important;
    line-height:1.12 !important;
    font-weight:600 !important;
  }

  .loginDesktopVariant1InstitutionPoints{
    width:100% !important;
    margin:5px 0 0 !important;
    padding:9px 0 0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    list-style:none !important;
    border-top:1px solid rgba(58,105,119,.08) !important;
  }

  .loginDesktopVariant1InstitutionPoints li{
    display:flex !important;
    align-items:flex-start !important;
    gap:9px !important;
    color:#557080 !important;
    font-size:10.5px !important;
    line-height:1.35 !important;
    font-weight:550 !important;
  }

  .loginDesktopVariant1InstitutionPoints i{
    width:12px !important;
    flex:0 0 12px !important;
    margin-top:1px !important;
    color:#0f9f8d !important;
    font-size:10px !important;
    text-align:center !important;
  }
.loginDesktopFormPanel{
    grid-column:2 !important;
    position:relative !important;
    z-index:4 !important;
    min-width:0 !important;
    min-height:calc(100svh - 88px) !important;
    margin:0 !important;
    padding:
      var(--login-hero-content-top)
      clamp(46px,4.6vw,78px)
      38px !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .loginDesktopFormPanel .loginCard{
    position:relative !important;
    left:-30px !important;
    width:min(480px,100%) !important;
    max-width:480px !important;
    margin:
      0
      auto
      clamp(18px,2vh,28px) !important;
    padding:24px 24px 21px !important;
    border:1px solid rgba(255,255,255,.34) !important;
    border-radius:26px !important;
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.28) 0%,
        rgba(255,255,255,.17) 52%,
        rgba(239,251,248,.10) 100%
      ) !important;
    box-shadow:
      0 24px 52px rgba(16,70,80,.072),
      0 8px 18px rgba(16,70,80,.026),
      inset 0 1px 0 rgba(255,255,255,.52),
      inset 0 -1px 0 rgba(58,105,119,.018) !important;
    backdrop-filter:blur(38px) saturate(1.02) !important;
    -webkit-backdrop-filter:blur(38px) saturate(1.02) !important;
  }

  /* Saat tab Daftar aktif, sisakan ruang riil sebelum footer.
     Parent ikut membesar sehingga card + shadow tidak terpotong. */
  .loginDesktopFormPanel:has(#tabSignUp:checked){
    padding-bottom:
      clamp(88px,9vh,126px) !important;
  }

  .loginDesktopFormPanel .loginCard:has(#tabSignUp:checked){
    margin-bottom:
      clamp(58px,6vh,88px) !important;
  }

  .loginDesktopFormPanel .loginCardTop{
    min-height:auto !important;
    margin-bottom:14px !important;
    gap:11px !important;
  }

  .loginDesktopFormPanel .loginHeroBrandLogoShadow{
    width:54px !important;
    min-width:54px !important;
    height:54px !important;
  }

  .loginDesktopFormPanel .loginHeroBrandLogoWrap{
    width:54px !important;
    min-width:54px !important;
    height:54px !important;
    min-height:54px !important;
  }

  .loginDesktopFormPanel .loginPanelTitle{
    min-height:0 !important;
    margin:0 0 5px !important;
    color:#17384c !important;
    font-size:23px !important;
    line-height:1.08 !important;
    font-weight:800 !important;
  }

  .loginDesktopFormPanel .loginPanelSub{
    min-height:0 !important;
    max-width:320px !important;
    color:#65788a !important;
    font-size:11px !important;
    line-height:1.45 !important;
  }

  .loginDesktopFormPanel .authTabSwitch{
    margin-bottom:11px !important;
  }

  .loginDesktopFormPanel .authTabLabel{
    min-height:38px !important;
    font-size:11.4px !important;
  }

  .loginDesktopFormPanel .authForm{
    gap:11px !important;
  }

  .loginDesktopFormPanel .inputGroup{
    gap:6px !important;
  }

  .loginDesktopFormPanel .inputGroup label{
    font-size:10.8px !important;
  }

  .loginDesktopFormPanel .inputShell{
    min-height:42px !important;
    padding:0 11px !important;
    border-radius:12px !important;
  }

  .loginDesktopFormPanel .inputShell input{
    font-size:11.8px !important;
  }

  .loginDesktopFormPanel .checkWrap,
  .loginDesktopFormPanel .textLinkBtn{
    font-size:10.5px !important;
  }

  .loginDesktopFormPanel #signInSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel #signUpSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel #googleLoginBtn.loginIndexGoogleAction{
    min-height:43px !important;
    font-size:11.2px !important;
  }

  .loginDesktopFormPanel .authDivider{
    margin:9px 0 8px !important;
    font-size:8.5px !important;
  }

  .loginDesktopFormPanel .passwordToggleBtn{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    border-radius:10px !important;
  }

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

  .loginDesktopFormPanel .checkWrap input{
    width:14px !important;
    height:14px !important;
    margin-top:1px !important;
  }

  .loginDesktopFormPanel #signInSubmitBtn .actionLeading,
  .loginDesktopFormPanel #signUpSubmitBtn .actionLeading{
    font-size:15px !important;
  }

  .loginDesktopFormPanel #signInSubmitBtn .actionTrailing,
  .loginDesktopFormPanel #signUpSubmitBtn .actionTrailing,
  .loginDesktopFormPanel #googleLoginBtn .googleTrailing{
    width:25px !important;
    min-width:25px !important;
    max-width:25px !important;
    height:25px !important;
    min-height:25px !important;
    max-height:25px !important;
    font-size:8.5px !important;
  }

  .loginDesktopFormPanel #googleLoginBtn .googleIconWrap{
    width:24px !important;
    min-width:24px !important;
    max-width:24px !important;
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
  }

  .loginDesktopFormPanel #googleLoginBtn .googleIcon,
  .loginDesktopFormPanel #googleLoginBtn .googleSvg{
    width:16px !important;
    height:16px !important;
  }


  .loginDesktopAuthSecurity{
    width:100% !important;
    margin:10px 0 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    color:#7b8e9d !important;
    font-size:9.2px !important;
    line-height:1 !important;
    font-weight:550 !important;
  }

  .loginDesktopAuthSecurity i{
    color:#7f939f !important;
    font-size:9.5px !important;
  }

  html[data-theme="dark"] main{
    background:#0b2024 !important;
  }

  html[data-theme="dark"] .hero.heroSplit.loginHero{
    background-image:
      linear-gradient(
        90deg,
        #102b30 0%,
        rgba(16,43,48,1) 22%,
        rgba(16,43,48,.97) 29%,
        rgba(16,43,48,.86) 36%,
        rgba(16,43,48,.66) 43%,
        rgba(16,43,48,.38) 51%,
        rgba(16,43,48,.15) 59%,
        rgba(16,43,48,.080) 67%,
        rgba(16,43,48,.055) 78%,
        rgba(16,43,48,.040) 88%,
        rgba(16,43,48,.025) 100%
      ),
      linear-gradient(
        180deg,
        rgba(11,32,36,.06) 0%,
        rgba(11,32,36,.02) 66%,
        rgba(11,32,36,.20) 100%
      ),
      url("../../assets/site/desktop/hero/hero-login.png"),
      linear-gradient(180deg,#102b30 0%,#0b2024 100%) !important;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat !important;

    background-size:
      100% 100%,
      100% 100%,
      clamp(1060px,83vw,1420px) auto,
      100% 100% !important;

    background-position:
      left top,
      left top,
      right top,
      left top !important;
  }

  html[data-theme="dark"] .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy small,
  html[data-theme="dark"] .loginDesktopVariant1Description,
  html[data-theme="dark"] .loginDesktopVariant1InstitutionBody small,
  html[data-theme="dark"] .loginDesktopVariant1InstitutionPoints li{
    color:#aac8cc !important;
  }

  html[data-theme="dark"] .loginDesktopVariant1Headline,
  html[data-theme="dark"] .loginDesktopFormPanel .loginPanelTitle{
    color:#eafcff !important;
  }

  html[data-theme="dark"] .loginDesktopVariant1Institution{
    background:rgba(16,43,48,.86) !important;
    border-color:rgba(255,255,255,.08) !important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"] .loginDesktopVariant1InstitutionBody img{
    box-sizing:content-box !important;
    padding:3px 5px !important;
    background:#ffffff !important;
    border-radius:7px !important;
  }

  html[data-theme="dark"] .loginDesktopVariant1InstitutionBody > span,
  html[data-theme="dark"] .loginDesktopVariant1InstitutionPoints{
    border-color:rgba(255,255,255,.07) !important;
  }
html[data-theme="dark"] .loginDesktopFormPanel .loginCard{
    background:
      linear-gradient(
        145deg,
        rgba(16,43,48,.30) 0%,
        rgba(13,38,43,.22) 56%,
        rgba(9,30,34,.16) 100%
      ) !important;
    border-color:rgba(255,255,255,.075) !important;
    box-shadow:
      0 24px 56px rgba(0,0,0,.24),
      0 8px 18px rgba(0,0,0,.10),
      inset 0 1px 0 rgba(255,255,255,.042) !important;
    backdrop-filter:blur(38px) saturate(1.02) !important;
    -webkit-backdrop-filter:blur(38px) saturate(1.02) !important;
  }

  html[data-theme="dark"] .loginDesktopFormPanel .loginPanelSub,
  html[data-theme="dark"] .loginDesktopAuthSecurity{
    color:#aac8cc !important;
  }
}

@media (min-width:980px) and (max-width:1180px){
  .hero.heroSplit.loginHero{
    --login-hero-content-top:44px;
    grid-template-columns:minmax(0,1.40fr) minmax(390px,.86fr) !important;
    background-size:
      100% 100%,
      100% 100%,
      1020px auto,
      100% 100% !important;
    background-position:
      left top,
      left top,
      right top,
      left top !important;
  }

  .loginDesktopSceneImage{
    width:82% !important;
    right:-7% !important;
    max-height:78% !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding:
      var(--login-hero-content-top)
      26px
      32px
      38px !important;
  }

  .loginDesktopVariant1Copy{
    max-width:555px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoShadow,
  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:68px !important;
    min-width:68px !important;
    max-width:68px !important;
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
    flex-basis:68px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogo{
    width:59px !important;
    min-width:59px !important;
    max-width:59px !important;
    height:59px !important;
    min-height:59px !important;
    max-height:59px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy strong{
    font-size:35px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy small{
    font-size:9.5px !important;
  }

  .loginDesktopVariant1Headline{
    margin-top:24px !important;
    font-size:clamp(28px,2.70vw,36px) !important;
  }

  .loginDesktopVariant1Description{
    max-width:470px !important;
    margin-top:13px !important;
    font-size:11.8px !important;
  }

  .loginDesktopVariant1Institution{
    width:min(370px,100%) !important;
    margin-top:20px !important;
    padding:13px 15px 14px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    height:27px !important;
    max-width:120px !important;
  }

  .loginDesktopVariant1InstitutionPoints li{
    font-size:8.8px !important;
    gap:7px !important;
  }
.loginDesktopFormPanel{
    padding:
      var(--login-hero-content-top)
      24px
      30px !important;
  }

  .loginDesktopFormPanel .loginCard{
    width:min(420px,100%) !important;
    max-width:420px !important;
    padding:20px 18px 18px !important;
    border-radius:23px !important;
  }

  .loginDesktopFormPanel:has(#tabSignUp:checked){
    padding-bottom:84px !important;
  }

  .loginDesktopFormPanel .loginCard:has(#tabSignUp:checked){
    margin-bottom:52px !important;
  }
}

@media (min-width:1440px){
  .hero.heroSplit.loginHero{
    --login-hero-content-top:64px;
    grid-template-columns:minmax(0,1.56fr) minmax(470px,.76fr) !important;
    background-size:
      100% 100%,
      100% 100%,
      clamp(1520px,106vw,1780px) auto,
      100% 100% !important;
    background-position:
      left top,
      left top,
      right top,
      left top !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-left:clamp(72px,5vw,108px) !important;
  }


  .loginDesktopVariant1Copy{
    max-width:740px !important;
  }

  .loginDesktopVariant1Headline{
    max-width:740px !important;
  }
}

@media (min-width:980px) and (max-height:820px){
  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoShadow,
  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:64px !important;
    min-width:64px !important;
    max-width:64px !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    flex-basis:64px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogo{
    width:56px !important;
    min-width:56px !important;
    max-width:56px !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy strong{
    font-size:34px !important;
  }

  .loginDesktopVariant1Headline{
    margin-top:21px !important;
    font-size:clamp(27px,2.65vw,37px) !important;
  }

  .loginDesktopVariant1Description{
    margin-top:11px !important;
    font-size:11.5px !important;
  }

  .loginDesktopVariant1Institution{
    margin-top:17px !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
  }

  .loginDesktopVariant1InstitutionPoints{
    gap:5px !important;
  }
.loginDesktopFormPanel .loginCard{
    padding-top:18px !important;
    padding-bottom:16px !important;
  }

  .loginDesktopAuthSecurity{
    margin-top:9px !important;
  }

  .loginDesktopFormPanel:has(#tabSignUp:checked){
    padding-bottom:72px !important;
  }

  .loginDesktopFormPanel .loginCard:has(#tabSignUp:checked){
    margin-bottom:42px !important;
  }
}



/* =========================================================
   V39 - HERO SHADOW FULL-RIGHT ULTRA-SOFT
   ---------------------------------------------------------
   - Desktop/laptop only.
   - White/dark hero wash now continues smoothly to 100% width.
   - Opacity at the far-right edge stays extremely light so the
     hospital image remains clear and natural.
   - Hero size, position, auth, navbar, footer and mobile remain
     unchanged.
   ========================================================= */

/* =========================================================
   V27 - HERO LOGIN ASSET LOCK
   ---------------------------------------------------------
   - Hero desktop memakai ../../assets/site/desktop/hero/hero-login.png.
   - Gambar dipatok dari TOP hero dan tidak mengikuti tinggi viewport.
   - White fade kiri dibuat oleh CSS, bukan tertanam di gambar.
   - Card login dan copy kiri tetap memakai top anchor stabil.
   - Auth, navbar, footer, JS, dan mobile tidak diubah.
   ========================================================= */


/* =========================================================
   V34 - FROSTED GLASS EVEN MORE TRANSPARENT + SIGNUP FOOTER GAP
   ---------------------------------------------------------
   - Desktop/laptop >=980px only.
   - Keeps V31 frosted-glass auth card and copy down 35px.
   - Main login headline reduced further for a more formal scale.
   - Auth card shifted left exactly 30px without changing internals.
   - Auth logic, navbar, footer, JS and mobile remain unchanged.
   ========================================================= */


/* =========================================================
   V36 - LAPTOP AUTH CARD COMPACT FINAL
   ---------------------------------------------------------
   - Desktop/laptop only (>=980px).
   - Card, header logo, tabs, fields, labels, controls, CTA,
     Google action, divider and security note made more compact.
   - Signup footer safety spacing remains preserved.
   - Hero, navbar, footer, auth logic, JS and mobile unchanged.
   ========================================================= */

/* =========================================================
   V37 - DESKTOP AUTH CARD MOVE DOWN 30PX
   ---------------------------------------------------------
   - HANYA laptop / desktop >=980px.
   - Seluruh login card digeser turun tepat 30px.
   - Ukuran compact V36, frosted glass, isi card, auth flow,
     hero, navbar, footer, JavaScript, dan mobile tidak diubah.
   - Position offset dipakai agar transform scale V36 tetap utuh.
   ========================================================= */
@media (min-width:980px){
  .loginDesktopFormPanel .loginCard{
    position:relative !important;
    top:30px !important;
  }

  /* Reserve ruang visual tambahan agar tab Daftar tetap aman
     dan tidak terlalu dekat dengan footer setelah card turun. */
  .loginDesktopFormPanel{
    padding-bottom:calc(clamp(92px,9vh,126px) + 30px) !important;
  }
}

@media (min-width:980px) and (max-width:1180px){
  .loginDesktopFormPanel{
    padding-bottom:118px !important;
  }
}

@media (min-width:980px) and (max-height:820px){
  .loginDesktopFormPanel{
    padding-bottom:106px !important;
  }
}

@media (min-width:980px) and (max-height:720px){
  .loginDesktopFormPanel{
    padding-bottom:98px !important;
  }
}

@media (min-width:1440px) and (min-height:821px){
  .loginDesktopFormPanel{
    padding-bottom:calc(clamp(104px,9.5vh,138px) + 30px) !important;
  }
}

/* =========================================================
   V40 - DESKTOP AUTH CARD SLIGHTLY LARGER
   ---------------------------------------------------------
   TARGET:
   - Login card dibuat sedikit lebih besar lagi sesuai mockup.
   - Seluruh isi card membesar proporsional karena memakai scale.
   - Posisi turun 30px dari V37 tetap dipertahankan.
   - Mobile/tablet <980px tetap tidak berubah.
   - Auth flow / ID / JavaScript tidak disentuh.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopFormPanel .loginCard{
    transform:scale(1.10) !important;
    transform-origin:top center !important;
    will-change:transform !important;
  }

  /* Tambah ruang bawah agar pembesaran visual card tidak
     membuat shadow atau tab Daftar terlalu dekat footer. */
  .loginDesktopFormPanel{
    padding-bottom:calc(clamp(92px,9vh,126px) + 52px) !important;
  }
}

@media (min-width:980px) and (max-width:1180px){
  .loginDesktopFormPanel .loginCard{
    transform:scale(1.05) !important;
  }

  .loginDesktopFormPanel{
    padding-bottom:132px !important;
  }
}

@media (min-width:980px) and (max-height:820px){
  .loginDesktopFormPanel .loginCard{
    transform:scale(1.05) !important;
  }

  .loginDesktopFormPanel{
    padding-bottom:120px !important;
  }
}

@media (min-width:980px) and (max-height:720px){
  .loginDesktopFormPanel .loginCard{
    transform:scale(1.03) !important;
  }

  .loginDesktopFormPanel{
    padding-bottom:108px !important;
  }
}

@media (min-width:1440px) and (min-height:821px){
  .loginDesktopFormPanel .loginCard{
    transform:scale(1.10) !important;
  }

  .loginDesktopFormPanel{
    padding-bottom:calc(clamp(104px,9.5vh,138px) + 52px) !important;
  }
}

/* =========================================================
   V46 - DESKTOP LOGIN/COPY SWAP + EXTRA EXTENDED WHITE WASH RIGHT
   ---------------------------------------------------------
   TARGET:
   - Card login tetap di sisi KIRI.
   - Hero copy / branding tetap di sisi KANAN.
   - White readability wash / shadow putih tetap datang dari sisi KIRI,
     dan sekarang diperpanjang LEBIH JAUH lagi ke arah KANAN.
   - Area putih kuat dipertahankan lebih lama sebelum masuk ke
     transisi transparan agar efek tidak berhenti di tengah hero.
   - Hero image tetap diposisikan dari sisi kiri.
   - Ukuran card V40 tetap dipertahankan.
   - Mobile/tablet <980px tetap TIDAK berubah.
   - Auth flow / ID / JavaScript tidak disentuh.
   ========================================================= */

@media (min-width:980px){
  .hero.heroSplit.loginHero{
    grid-template-columns:
      minmax(430px,.78fr)
      minmax(0,1.48fr) !important;

    background-image:
      linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255,255,255,1) 16%,
        rgba(255,255,255,.998) 30%,
        rgba(255,255,255,.990) 42%,
        rgba(255,255,255,.955) 52%,
        rgba(255,255,255,.885) 62%,
        rgba(255,255,255,.770) 70%,
        rgba(255,255,255,.625) 78%,
        rgba(255,255,255,.465) 84%,
        rgba(255,255,255,.315) 89%,
        rgba(255,255,255,.185) 93%,
        rgba(255,255,255,.095) 96%,
        rgba(255,255,255,.040) 98.5%,
        rgba(255,255,255,0) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 68%,
        rgba(255,255,255,.06) 82%,
        rgba(255,255,255,.18) 100%
      ),
      url("../../assets/site/desktop/hero/hero-login.png"),
      linear-gradient(180deg,#ffffff 0%,#fbfefe 100%) !important;

    background-position:
      left top,
      left top,
      left top,
      left top !important;
  }

  /* Copy pindah ke kanan. */
  .loginDesktopIntro.loginDesktopIntro--variant1{
    grid-column:2 !important;
    grid-row:1 !important;
    padding:
      var(--login-hero-content-top)
      clamp(60px,5vw,96px)
      48px
      clamp(44px,4.6vw,82px) !important;
  }

  /* Card login pindah ke kiri. */
  .loginDesktopFormPanel{
    grid-column:1 !important;
    grid-row:1 !important;
    padding:
      var(--login-hero-content-top)
      clamp(32px,3.6vw,58px)
      calc(clamp(92px,9vh,126px) + 52px)
      clamp(46px,4.2vw,74px) !important;
  }

  .loginDesktopFormPanel .loginCard{
    left:24px !important;
  }

  /* Dark mode: readability wash juga dibalik ke kanan. */
  html[data-theme="dark"] .hero.heroSplit.loginHero{
    background-image:
      linear-gradient(
        90deg,
        #102b30 0%,
        rgba(16,43,48,1) 16%,
        rgba(16,43,48,.998) 30%,
        rgba(16,43,48,.990) 42%,
        rgba(16,43,48,.955) 52%,
        rgba(16,43,48,.885) 62%,
        rgba(16,43,48,.770) 70%,
        rgba(16,43,48,.625) 78%,
        rgba(16,43,48,.465) 84%,
        rgba(16,43,48,.315) 89%,
        rgba(16,43,48,.185) 93%,
        rgba(16,43,48,.095) 96%,
        rgba(16,43,48,.040) 98.5%,
        rgba(16,43,48,0) 100%
      ),
      linear-gradient(
        180deg,
        rgba(11,32,36,.06) 0%,
        rgba(11,32,36,.02) 66%,
        rgba(11,32,36,.20) 100%
      ),
      url("../../assets/site/desktop/hero/hero-login.png"),
      linear-gradient(180deg,#102b30 0%,#0b2024 100%) !important;

    background-position:
      left top,
      left top,
      left top,
      left top !important;
  }
}

/* Laptop / desktop compact. */
@media (min-width:980px) and (max-width:1180px){
  .hero.heroSplit.loginHero{
    grid-template-columns:
      minmax(390px,.86fr)
      minmax(0,1.40fr) !important;

    background-position:
      left top,
      left top,
      left top,
      left top !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding:
      var(--login-hero-content-top)
      38px
      32px
      26px !important;
  }

  .loginDesktopFormPanel{
    padding:
      var(--login-hero-content-top)
      24px
      132px
      30px !important;
  }

  .loginDesktopFormPanel .loginCard{
    left:12px !important;
  }
}

/* Desktop lebar. */
@media (min-width:1440px){
  .hero.heroSplit.loginHero{
    grid-template-columns:
      minmax(470px,.76fr)
      minmax(0,1.56fr) !important;

    background-position:
      left top,
      left top,
      left top,
      left top !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-left:clamp(44px,4.6vw,82px) !important;
    padding-right:clamp(72px,5vw,108px) !important;
  }

  .loginDesktopFormPanel .loginCard{
    left:32px !important;
  }
}

/* Tinggi viewport lebih pendek: ikuti safe spacing V40. */
@media (min-width:980px) and (max-height:820px){
  .loginDesktopFormPanel{
    padding-bottom:120px !important;
  }
}

@media (min-width:980px) and (max-height:720px){
  .loginDesktopFormPanel{
    padding-bottom:108px !important;
  }
}

@media (min-width:1440px) and (min-height:821px){
  .loginDesktopFormPanel{
    padding-bottom:calc(clamp(104px,9.5vh,138px) + 52px) !important;
  }
}

/* =========================================================
   V43 - DESKTOP LOGIN CARD SOLID NEUMORPHISM
   ---------------------------------------------------------
   TARGET:
   - Menghilangkan karakter frosted / kaca berembun pada card login.
   - Card login menjadi solid cool-white neumorphism.
   - Shadow utama dibuat timbul dari kanan-bawah + highlight putih
     dari kiri-atas agar terasa sebagai permukaan fisik lembut.
   - Tab dan field dibuat sedikit lebih neumorphic agar konsisten.
   - Posisi card kiri, copy kanan, white wash kiri V42 tetap.
   - Ukuran card V40 tetap dipertahankan.
   - Mobile/tablet <980px tidak diubah.
   - Auth flow / ID / JavaScript tidak disentuh.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopFormPanel .loginCard{
    background:#f2f6f5 !important;
    background-image:none !important;

    border:1px solid rgba(255,255,255,.94) !important;

    box-shadow:
      18px 18px 38px rgba(40,76,84,.18),
      -16px -16px 34px rgba(255,255,255,.96),
      0 8px 22px rgba(25,72,80,.08),
      inset 1px 1px 0 rgba(255,255,255,.96),
      inset -1px -1px 0 rgba(74,105,112,.055) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    overflow:visible !important;
  }

  .loginDesktopFormPanel .authTabSwitch{
    background:#eaf0ef !important;
    border:1px solid rgba(255,255,255,.78) !important;
    box-shadow:
      inset 5px 5px 11px rgba(56,88,94,.10),
      inset -5px -5px 11px rgba(255,255,255,.94),
      0 1px 0 rgba(255,255,255,.72) !important;
  }

  .loginDesktopFormPanel .inputShell{
    background:#f7faf9 !important;
    border:1px solid rgba(255,255,255,.86) !important;
    box-shadow:
      inset 3px 3px 7px rgba(56,88,94,.085),
      inset -3px -3px 7px rgba(255,255,255,.96),
      0 2px 5px rgba(25,72,80,.025) !important;
  }

  .loginDesktopFormPanel .inputShell:focus-within{
    border-color:rgba(15,159,141,.30) !important;
    box-shadow:
      0 0 0 3px rgba(15,159,141,.09),
      inset 3px 3px 7px rgba(56,88,94,.085),
      inset -3px -3px 7px rgba(255,255,255,.96) !important;
  }

  .loginDesktopFormPanel #googleLoginBtn.loginIndexGoogleAction{
    background:#f7faf9 !important;
    border:1px solid rgba(255,255,255,.88) !important;
    box-shadow:
      8px 8px 18px rgba(46,80,87,.11),
      -7px -7px 16px rgba(255,255,255,.94),
      inset 1px 1px 0 rgba(255,255,255,.96) !important;
  }

  .loginDesktopFormPanel #googleLoginBtn.loginIndexGoogleAction:hover{
    background:#fbfdfc !important;
    box-shadow:
      10px 10px 22px rgba(46,80,87,.13),
      -8px -8px 18px rgba(255,255,255,.98),
      inset 1px 1px 0 rgba(255,255,255,1) !important;
  }

  html[data-theme="dark"] .loginDesktopFormPanel .loginCard{
    background:#102b30 !important;
    background-image:none !important;
    border-color:rgba(255,255,255,.055) !important;
    box-shadow:
      18px 18px 40px rgba(0,0,0,.38),
      -12px -12px 28px rgba(44,83,89,.14),
      0 8px 22px rgba(0,0,0,.18),
      inset 1px 1px 0 rgba(255,255,255,.045),
      inset -1px -1px 0 rgba(0,0,0,.18) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html[data-theme="dark"] .loginDesktopFormPanel .authTabSwitch{
    background:#0d252a !important;
    border-color:rgba(255,255,255,.045) !important;
    box-shadow:
      inset 5px 5px 11px rgba(0,0,0,.28),
      inset -5px -5px 11px rgba(42,77,82,.10),
      inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  html[data-theme="dark"] .loginDesktopFormPanel .inputShell{
    background:#102b30 !important;
    border-color:rgba(255,255,255,.055) !important;
    box-shadow:
      inset 3px 3px 7px rgba(0,0,0,.24),
      inset -3px -3px 7px rgba(42,77,82,.09),
      0 2px 5px rgba(0,0,0,.10) !important;
  }

  html[data-theme="dark"] .loginDesktopFormPanel .inputShell:focus-within{
    border-color:rgba(83,235,232,.20) !important;
    box-shadow:
      0 0 0 3px rgba(83,235,232,.07),
      inset 3px 3px 7px rgba(0,0,0,.24),
      inset -3px -3px 7px rgba(42,77,82,.09) !important;
  }

  html[data-theme="dark"] .loginDesktopFormPanel #googleLoginBtn.loginIndexGoogleAction{
    background:#14343a !important;
    border-color:rgba(255,255,255,.06) !important;
    box-shadow:
      8px 8px 18px rgba(0,0,0,.27),
      -7px -7px 16px rgba(42,77,82,.10),
      inset 1px 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"] .loginDesktopFormPanel #googleLoginBtn.loginIndexGoogleAction:hover{
    background:#173b41 !important;
    box-shadow:
      10px 10px 22px rgba(0,0,0,.31),
      -8px -8px 18px rgba(42,77,82,.12),
      inset 1px 1px 0 rgba(255,255,255,.045) !important;
  }
}

/* =========================================================
   V44 - DESKTOP HERO / FOOTER WHITE GAP REMOVAL
   ---------------------------------------------------------
   TARGET:
   - Menghilangkan ruang putih kosong berlebih di bawah hero
     sebelum footer resmi pada laptop / desktop.
   - Hero tidak lagi dipaksa setinggi viewport.
   - Tinggi hero mengikuti konten aktual dengan minimum yang
     cukup untuk card login dan copy kanan.
   - Padding bawah besar warisan safety spacing lama dipangkas.
   - Tab Daftar tetap diberi ruang tambahan secara dinamis.
   - Card solid neumorphism V43, swap V42, white wash kiri,
     navbar, footer, auth flow, JS, serta mobile <980px tetap.
   ========================================================= */

@media (min-width:980px){
  main{
    min-height:0 !important;
    height:auto !important;
  }

  .hero.heroSplit.loginHero{
    min-height:clamp(500px,58vh,585px) !important;
    height:auto !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1,
  .loginDesktopFormPanel{
    min-height:0 !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-bottom:32px !important;
  }

  .loginDesktopFormPanel{
    padding-bottom:54px !important;
  }

  .loginDesktopFormPanel .loginCard{
    margin-bottom:0 !important;
  }

  /* Sign-up jauh lebih tinggi daripada sign-in. Parent dibiarkan
     membesar natural dan diberi reserve kecil untuk scale + shadow. */
  .loginDesktopFormPanel:has(#tabSignUp:checked){
    padding-bottom:94px !important;
  }

  .loginDesktopFormPanel .loginCard:has(#tabSignUp:checked){
    margin-bottom:34px !important;
  }
}

@media (min-width:980px) and (max-width:1180px){
  .hero.heroSplit.loginHero{
    min-height:490px !important;
  }

  .loginDesktopIntro.loginDesktopIntro--variant1{
    padding-bottom:26px !important;
  }

  .loginDesktopFormPanel{
    padding-bottom:48px !important;
  }

  .loginDesktopFormPanel:has(#tabSignUp:checked){
    padding-bottom:82px !important;
  }
}

@media (min-width:980px) and (max-height:820px){
  .hero.heroSplit.loginHero{
    min-height:480px !important;
  }

  .loginDesktopFormPanel{
    padding-bottom:46px !important;
  }

  .loginDesktopFormPanel:has(#tabSignUp:checked){
    padding-bottom:78px !important;
  }
}

@media (min-width:1440px) and (min-height:821px){
  .hero.heroSplit.loginHero{
    min-height:clamp(520px,57vh,590px) !important;
  }

  .loginDesktopFormPanel{
    padding-bottom:56px !important;
  }
}

/* =========================================================
   V47 - COMPACT DESKTOP HEADLINE + INSTITUTION CARD
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Headline "Pendamping Kehamilan / Terpercaya..." diperkecil.
   - Card informasi Peningkatan Mutu RSAB diperkecil menyeluruh:
     lebar, padding, logo, typography, gap, list, dan shadow.
   - Posisi card login, white wash V46, navbar, footer, auth,
     dan mobile/tablet <980px tidak diubah.
   ========================================================= */

@media (min-width:980px){
  /* Headline lebih compact, tetap terkunci dua baris. */
  .loginDesktopVariant1Headline{
    max-width:620px !important;
    margin-top:clamp(22px,2.8vh,31px) !important;
    font-size:clamp(30px,2.65vw,41px) !important;
    line-height:1.035 !important;
    letter-spacing:-.038em !important;
  }

  .loginDesktopVariant1Headline span{
    margin-top:3px !important;
  }

  /* Institution card diperkecil tanpa mengubah isi/struktur HTML. */
  .loginDesktopVariant1Institution{
    width:min(360px,100%) !important;
    margin-top:clamp(18px,2.35vh,26px) !important;
    padding:12px 14px 13px !important;
    gap:6px !important;
    border-radius:15px !important;
    box-shadow:
      0 11px 24px rgba(16,70,80,.070),
      0 3px 9px rgba(16,70,80,.030),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .loginDesktopVariant1InstitutionLabel{
    font-size:6.8px !important;
  }

  .loginDesktopVariant1InstitutionBody{
    gap:9px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    height:28px !important;
    max-width:122px !important;
  }

  .loginDesktopVariant1InstitutionBody > span{
    min-height:27px !important;
    padding-left:9px !important;
  }

  .loginDesktopVariant1InstitutionBody strong{
    font-size:9.4px !important;
    line-height:1.10 !important;
  }

  .loginDesktopVariant1InstitutionBody small{
    margin-top:2px !important;
    font-size:7.8px !important;
    line-height:1.10 !important;
  }

  .loginDesktopVariant1InstitutionPoints{
    margin-top:3px !important;
    padding-top:7px !important;
    gap:5px !important;
  }

  .loginDesktopVariant1InstitutionPoints li{
    gap:7px !important;
    font-size:9px !important;
    line-height:1.30 !important;
  }

  .loginDesktopVariant1InstitutionPoints i{
    width:10px !important;
    flex-basis:10px !important;
    font-size:8.8px !important;
  }

  html[data-theme="dark"] .loginDesktopVariant1Institution{
    box-shadow:
      0 12px 26px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.03) !important;
  }
}

/* Compact laptop: diperkecil lagi agar proporsional. */
@media (min-width:980px) and (max-width:1180px){
  .loginDesktopVariant1Headline{
    margin-top:19px !important;
    font-size:clamp(24px,2.35vw,31px) !important;
  }

  .loginDesktopVariant1Institution{
    width:min(315px,100%) !important;
    margin-top:15px !important;
    padding:10px 12px 11px !important;
    border-radius:13px !important;
  }

  .loginDesktopVariant1InstitutionLabel{
    font-size:6.1px !important;
  }

  .loginDesktopVariant1InstitutionBody img{
    height:23px !important;
    max-width:102px !important;
  }

  .loginDesktopVariant1InstitutionBody > span{
    min-height:23px !important;
    padding-left:7px !important;
  }

  .loginDesktopVariant1InstitutionBody strong{
    font-size:8.2px !important;
  }

  .loginDesktopVariant1InstitutionBody small{
    font-size:6.8px !important;
  }

  .loginDesktopVariant1InstitutionPoints{
    padding-top:6px !important;
    gap:4px !important;
  }

  .loginDesktopVariant1InstitutionPoints li{
    gap:6px !important;
    font-size:7.7px !important;
  }

  .loginDesktopVariant1InstitutionPoints i{
    width:9px !important;
    flex-basis:9px !important;
    font-size:7.6px !important;
  }
}

/* Short-height laptop: headline/card tetap compact. */
@media (min-width:980px) and (max-height:820px){
  .loginDesktopVariant1Headline{
    margin-top:17px !important;
    font-size:clamp(24px,2.30vw,31px) !important;
  }

  .loginDesktopVariant1Institution{
    margin-top:13px !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
  }
}

/* =========================================================
   FINAL V48 - DESKTOP LEFT COPY MOVE DOWN +30PX
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Seluruh .loginDesktopVariant1Copy digeser turun 30px
     dari posisi V47 saat ini.
   - Offset existing V47 = translateY(35px).
   - Offset final V48    = translateY(65px).
   - Semua isi bergerak sebagai satu blok:
       logo/brand Bumil Ku,
       headline,
       deskripsi,
       institution card + checklist.
   - Ukuran, spacing internal, white wash V46, card login,
     navbar, footer, auth, dan mobile/tablet <980px tidak diubah.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopVariant1Copy{
    transform:translateY(65px) !important;
  }
}

/* =========================================================
   FINAL V49 - DESKTOP AUTH CARD TRUE WHITE
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Surface utama .loginCard dibuat BENAR-BENAR PUTIH (#fff).
   - Karakter putih mengikuti card/casing timbangan analog:
     putih solid + neutral cool-gray 3D shadow, tanpa tint hijau.
   - Neumorphism tetap terasa timbul, tetapi warna permukaan
     tidak lagi cool-white / kehijauan.
   - Input, tab, tombol, posisi V48, white wash V46, navbar,
     footer, auth flow, dan mobile/tablet <980px tidak diubah.
   ========================================================= */

@media (min-width:980px){
  html:not([data-theme="dark"])
  .loginDesktopFormPanel .loginCard{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    border:1px solid rgba(86,104,114,.10) !important;

    box-shadow:
      -11px -11px 24px rgba(86,104,114,.045),
      -4px -4px 10px rgba(86,104,114,.028),
      9px 12px 22px rgba(56,72,82,.075),
      18px 22px 42px rgba(56,72,82,.095),
      0 30px 54px rgba(56,72,82,.055),
      inset 1px 1px 0 rgba(255,255,255,1),
      inset -1px -1px 0 rgba(118,132,140,.055) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* =========================================================
   FINAL V50 - DESKTOP AUTH CARD TRUE WHITE SHADOW
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Surface .loginCard tetap putih murni #ffffff dari V49.
   - Shadow luar diubah menjadi dominan PUTIH seperti karakter
     casing/card timbangan analog: halo putih lembut dan bersih.
   - Cast abu/hijau pada elevasi utama dihilangkan.
   - Hanya contact shadow netral yang sangat tipis dipertahankan
     agar batas card tetap terbaca di area background putih.
   - Posisi V48, white wash V46, headline/institution V47,
     auth, navbar, footer, dan mobile/tablet <980px tidak diubah.
   ========================================================= */

@media (min-width:980px){
  html:not([data-theme="dark"])
  .loginDesktopFormPanel .loginCard{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    border:1px solid rgba(255,255,255,.98) !important;

    box-shadow:
      /* white upper/left face */
      -16px -16px 30px rgba(255,255,255,1),
      -8px -8px 18px rgba(255,255,255,.98),
      /* white halo/elevation around card */
      10px 12px 24px rgba(255,255,255,.88),
      20px 24px 44px rgba(255,255,255,.72),
      0 34px 62px rgba(255,255,255,.58),
      /* very light contact depth so edge remains readable */
      0 3px 6px rgba(56,72,82,.045),
      0 8px 18px rgba(56,72,82,.028),
      /* clean white bevel */
      inset 2px 2px 0 rgba(255,255,255,1),
      inset -1px -1px 0 rgba(205,214,219,.035) !important;

    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* =========================================================
   FINAL V51 - DESKTOP AUTH CARD RAISED WHITE NEUMORPHISM
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Surface card tetap putih murni #ffffff.
   - Shadow putih V50 tetap dipertahankan sebagai highlight /
     halo pada sisi atas-kiri.
   - Ditambahkan contact + elevation shadow neutral cool-gray
     di sisi bawah/kanan agar card kembali terbaca TIMBUL.
   - Tidak memakai cast hijau.
   - Tidak mengubah ukuran, posisi, auth, navbar, footer,
     white wash hero, atau mobile/tablet <980px.
   ========================================================= */

@media (min-width:980px){
  html:not([data-theme="dark"])
  .loginDesktopFormPanel .loginCard{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    border:1px solid rgba(150,164,173,.16) !important;

    box-shadow:
      /* bright white neumorphic highlight */
      -18px -18px 34px rgba(255,255,255,1),
      -9px -9px 20px rgba(255,255,255,.98),
      -3px -3px 8px rgba(255,255,255,1),

      /* tight contact depth */
      0 3px 6px rgba(56,72,82,.070),
      5px 7px 13px rgba(56,72,82,.080),

      /* visible raised elevation */
      12px 16px 28px rgba(56,72,82,.105),
      22px 28px 48px rgba(56,72,82,.115),
      0 38px 66px rgba(56,72,82,.075),

      /* clean white bevel */
      inset 2px 2px 0 rgba(255,255,255,1),
      inset -2px -2px 0 rgba(135,150,160,.045) !important;

    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* =========================================================
   FINAL V52 - DESKTOP AUTH CARD ANALOG SCALE 3D CASING
   ---------------------------------------------------------
   REFERENSI VISUAL:
   - Casing timbangan analog putih pada fitur Berat Badan Bumil.
   - True-white body, rounded physical shell, bevel kuat,
     recessed inner surface, dan neutral cool-gray elevation.

   TARGET:
   - HANYA laptop / desktop >=980px.
   - Login card dibuat terasa seperti casing perangkat fisik 3D,
     bukan glass / flat card.
   - Surface utama tetap putih murni.
   - Outer shell memakai karakter shadow casing timbangan analog.
   - Inner panel dibuat sedikit cekung untuk memberi tebal material.
   - Tab dan input ikut dibuat recessed agar menyatu dengan casing.
   - Posisi V48, ukuran/scale V40, white wash V46,
     headline/institution V47, auth, navbar, footer, dan
     mobile/tablet <980px tidak diubah.
   ========================================================= */

@media (min-width:980px){

  /* -------------------------------------------------------
     OUTER CASING - karakter mengikuti casing timbangan analog.
     ------------------------------------------------------- */
  html:not([data-theme="dark"])
  .loginDesktopFormPanel .loginCard{
    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #ffffff 34%,
        #f7f9fa 74%,
        #edf1f3 100%
      ) !important;

    border:1px solid rgba(173,184,191,.20) !important;
    border-radius:36px !important;

    box-shadow:
      /* white raised face */
      -16px -16px 30px rgba(255,255,255,1),
      -8px -8px 16px rgba(255,255,255,.96),

      /* tight contact */
      0 4px 6px rgba(48,63,73,.07),

      /* physical lift */
      12px 16px 26px rgba(48,63,73,.11),
      24px 30px 48px rgba(48,63,73,.15),
      0 40px 68px rgba(48,63,73,.10),

      /* casing bevel */
      inset 2px 2px 0 rgba(255,255,255,1),
      inset -4px -5px 11px rgba(105,120,130,.11) !important;

    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* -------------------------------------------------------
     INNER CASING FACE
     Membentuk bibir/rim putih seperti body timbangan analog.
     ------------------------------------------------------- */
  html:not([data-theme="dark"])
  .loginDesktopFormPanel .loginCard::before{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;

    inset:10px !important;

    border:1px solid rgba(255,255,255,.84) !important;
    border-radius:28px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,1) 0%,
        rgba(253,254,254,1) 46%,
        rgba(244,247,248,.98) 100%
      ) !important;

    box-shadow:
      inset 0 3px 0 rgba(255,255,255,1),
      inset 3px 0 7px rgba(255,255,255,.54),
      inset -3px -5px 10px rgba(105,120,130,.08),
      0 1px 2px rgba(47,63,73,.025) !important;

    pointer-events:none !important;
  }

  /* Recessed inner lip agar casing tidak terasa seperti box biasa. */
  html:not([data-theme="dark"])
  .loginDesktopFormPanel .loginCard::after{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;

    inset:17px !important;

    border:1px solid rgba(164,176,184,.11) !important;
    border-radius:24px !important;

    background:transparent !important;

    box-shadow:
      inset 0 8px 14px rgba(91,107,117,.030),
      inset 0 -5px 10px rgba(255,255,255,.88),
      inset 0 0 0 1px rgba(255,255,255,.55) !important;

    pointer-events:none !important;
  }

  /* Seluruh konten auth tetap berada di atas casing dekoratif. */
  html:not([data-theme="dark"])
  .loginDesktopFormPanel .loginCard > *{
    position:relative !important;
    z-index:1 !important;
  }

  /* -------------------------------------------------------
     TAB SWITCH = RECESSED CONTROL
     ------------------------------------------------------- */
  html:not([data-theme="dark"])
  .loginDesktopFormPanel .authTabSwitch{
    background:
      linear-gradient(
        180deg,
        #f7f9fa 0%,
        #ffffff 100%
      ) !important;

    border:1px solid rgba(155,168,177,.18) !important;

    box-shadow:
      inset 0 7px 12px rgba(91,107,117,.075),
      inset 0 2px 4px rgba(91,107,117,.045),
      inset 0 -3px 6px rgba(255,255,255,.96),
      inset 0 0 0 1px rgba(210,217,222,.30),
      0 1px 0 rgba(255,255,255,1) !important;
  }

  /* -------------------------------------------------------
     INPUT = RECESSED SURFACE
     Analogi display timbangan: frame keluar, field masuk.
     ------------------------------------------------------- */
  html:not([data-theme="dark"])
  .loginDesktopFormPanel .inputShell{
    background:
      linear-gradient(
        180deg,
        #fbfcfd 0%,
        #ffffff 100%
      ) !important;

    border:1px solid rgba(151,165,175,.17) !important;

    box-shadow:
      inset 0 7px 12px rgba(91,107,117,.070),
      inset 0 2px 4px rgba(91,107,117,.045),
      inset 0 -3px 5px rgba(255,255,255,.95),
      inset 0 0 0 1px rgba(205,213,218,.30),
      0 1px 0 rgba(255,255,255,.98) !important;
  }

  html:not([data-theme="dark"])
  .loginDesktopFormPanel .inputShell:focus-within{
    background:#ffffff !important;
    border-color:rgba(15,159,141,.28) !important;

    box-shadow:
      0 0 0 3px rgba(15,159,141,.07),
      inset 0 7px 12px rgba(91,107,117,.065),
      inset 0 2px 4px rgba(91,107,117,.040),
      inset 0 -3px 5px rgba(255,255,255,.97),
      inset 0 0 0 1px rgba(15,159,141,.045) !important;
  }

  /* -------------------------------------------------------
     GOOGLE ACTION = SMALL RAISED WHITE CONTROL
     ------------------------------------------------------- */
  html:not([data-theme="dark"])
  .loginDesktopFormPanel #googleLoginBtn.loginIndexGoogleAction{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #ffffff 44%,
        #f3f6f7 100%
      ) !important;

    border:1px solid rgba(163,175,183,.16) !important;

    box-shadow:
      -6px -6px 12px rgba(255,255,255,.98),
      0 2px 3px rgba(48,63,73,.045),
      6px 8px 13px rgba(48,63,73,.085),
      10px 13px 20px rgba(48,63,73,.080),
      inset 1px 1px 0 rgba(255,255,255,1),
      inset -1px -2px 4px rgba(105,120,130,.055) !important;
  }

  html:not([data-theme="dark"])
  .loginDesktopFormPanel #googleLoginBtn.loginIndexGoogleAction:hover{
    background:#ffffff !important;

    box-shadow:
      -7px -7px 14px rgba(255,255,255,1),
      0 3px 4px rgba(48,63,73,.050),
      8px 10px 16px rgba(48,63,73,.10),
      12px 15px 24px rgba(48,63,73,.090),
      inset 1px 1px 0 rgba(255,255,255,1),
      inset -1px -2px 4px rgba(105,120,130,.050) !important;
  }
}

/* Compact laptop: rim sedikit dipadatkan tanpa mengubah layout/card size. */
@media (min-width:980px) and (max-width:1180px){
  html:not([data-theme="dark"])
  .loginDesktopFormPanel .loginCard{
    border-radius:32px !important;
  }

  html:not([data-theme="dark"])
  .loginDesktopFormPanel .loginCard::before{
    inset:9px !important;
    border-radius:25px !important;
  }

  html:not([data-theme="dark"])
  .loginDesktopFormPanel .loginCard::after{
    inset:15px !important;
    border-radius:21px !important;
  }
}

/* =========================================================
   V54 - DESKTOP HERO BRAND LARGER ON LAPTOP
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Memperbesar blok .loginDesktopHeroBrand sebagai satu
     identitas visual: heart logo, text "Bumil Ku", dan
     tagline "Platform Kesehatan".
   - Headline, description, institution card, auth card,
     navbar, footer, dan mobile/tablet <980px tidak diubah.
   - Shadow / gradient brand existing tetap dipertahankan.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopVariant1Copy .loginDesktopHeroBrand{
    gap:18px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoShadow,
  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:104px !important;
    min-width:104px !important;
    max-width:104px !important;
    height:104px !important;
    min-height:104px !important;
    max-height:104px !important;
    flex-basis:104px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogo{
    width:91px !important;
    min-width:91px !important;
    max-width:91px !important;
    height:91px !important;
    min-height:91px !important;
    max-height:91px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy strong{
    font-size:60px !important;
    line-height:.97 !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy small{
    margin-top:7px !important;
    font-size:13.5px !important;
    line-height:1.08 !important;
  }
}

/* Compact laptop: tetap lebih besar dari baseline V53,
   tetapi tidak terlalu agresif agar headline tetap lega. */
@media (min-width:980px) and (max-width:1180px){
  .loginDesktopVariant1Copy .loginDesktopHeroBrand{
    gap:15px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoShadow,
  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:80px !important;
    min-width:80px !important;
    max-width:80px !important;
    height:80px !important;
    min-height:80px !important;
    max-height:80px !important;
    flex-basis:80px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogo{
    width:70px !important;
    min-width:70px !important;
    max-width:70px !important;
    height:70px !important;
    min-height:70px !important;
    max-height:70px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy strong{
    font-size:41px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy small{
    margin-top:5px !important;
    font-size:10.8px !important;
  }
}

/* Short-height laptop: pertahankan pembesaran tetapi jaga
   keseluruhan hero tetap muat vertikal. */
@media (min-width:980px) and (max-height:820px){
  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoShadow,
  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;
    height:78px !important;
    min-height:78px !important;
    max-height:78px !important;
    flex-basis:78px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogo{
    width:68px !important;
    min-width:68px !important;
    max-width:68px !important;
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy strong{
    font-size:40px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy small{
    margin-top:5px !important;
    font-size:10.8px !important;
  }
}

@media (min-width:980px) and (max-height:720px){
  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoShadow,
  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogoWrap{
    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    flex-basis:72px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrand .heroBrandLogo{
    width:63px !important;
    min-width:63px !important;
    max-width:63px !important;
    height:63px !important;
    min-height:63px !important;
    max-height:63px !important;
  }

  .loginDesktopVariant1Copy .loginDesktopHeroBrandCopy strong{
    font-size:37px !important;
  }

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

/* =========================================================
   V55 - DESKTOP AUTH CARD GOOGLE BOTTOM SPACE
   ---------------------------------------------------------
   TARGET:
   - Menambah ruang kosong di BAWAH tombol "Masuk dengan Google".
   - Ruang dibuat melalui padding-bottom pada card pembungkus login,
     bukan margin tombol, agar casing 3D V52 tetap proporsional.
   - HANYA laptop / desktop >=980px.
   - Posisi tombol, ukuran card, auth flow, navbar, footer,
     hero, dan mobile/tablet <980px tidak diubah.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopFormPanel .loginCard{
    padding-bottom:38px !important;
  }
}

/* Compact laptop: tetap memberi napas tanpa membuat card terlalu tinggi. */
@media (min-width:980px) and (max-width:1180px){
  .loginDesktopFormPanel .loginCard{
    padding-bottom:32px !important;
  }
}

/* Short-height laptop: ruang tetap ada, tetapi lebih konservatif. */
@media (min-width:980px) and (max-height:820px){
  .loginDesktopFormPanel .loginCard{
    padding-bottom:30px !important;
  }
}

@media (min-width:980px) and (max-height:720px){
  .loginDesktopFormPanel .loginCard{
    padding-bottom:27px !important;
  }
}

@media (min-width:1440px) and (min-height:821px){
  .loginDesktopFormPanel .loginCard{
    padding-bottom:40px !important;
  }
}

/* =========================================================
   V56 - DESKTOP HERO HEADLINE TEXT SHADOW
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Menambah depth/shadow halus pada headline agar tetap
     terbaca jelas di atas area white wash hero.
   - Baris navy dan baris gradient hijau mendapat karakter
     shadow berbeda agar tetap clean dan profesional.
   - Ukuran, posisi, spacing, warna gradient, hero brand,
     institution card, auth card, navbar, footer, dan mobile
     <980px tidak diubah.
   ========================================================= */

@media (min-width:980px){
  html:not([data-theme="dark"])
  .loginDesktopVariant1Headline{
    text-shadow:
      0 1px 0 rgba(255,255,255,.96),
      0 2px 4px rgba(23,56,76,.16),
      0 6px 14px rgba(23,56,76,.085) !important;
  }

  html:not([data-theme="dark"])
  .loginDesktopVariant1Headline span{
    text-shadow:
      0 1px 0 rgba(255,255,255,.92),
      0 2px 4px rgba(10,126,113,.19),
      0 6px 14px rgba(10,126,113,.10) !important;

    filter:
      drop-shadow(0 1px 1px rgba(7,103,94,.10))
      drop-shadow(0 3px 6px rgba(7,103,94,.075)) !important;
  }
}

/* =========================================================
   V57 - HEADLINE SHADOW COLOR LOCK
   ---------------------------------------------------------
   TARGET:
   - Mempertahankan 100% warna headline existing.
   - Tidak menambah tint hijau/navy pada isi huruf.
   - Shadow hanya sebagai depth di belakang teks.
   - Gradient asli "Terpercaya untuk Ibu & Buah Hati"
     tetap dikendalikan oleh rule warna existing.
   - HANYA laptop / desktop >=980px.
   ========================================================= */

@media (min-width:980px){
  html:not([data-theme="dark"])
  .loginDesktopVariant1Headline{
    text-shadow:
      0 1px 1px rgba(0,0,0,.10),
      0 3px 7px rgba(0,0,0,.075),
      0 8px 18px rgba(0,0,0,.045) !important;
  }

  html:not([data-theme="dark"])
  .loginDesktopVariant1Headline span{
    /* Warna/gradient tidak disentuh; hanya bayangan netral. */
    text-shadow:
      0 1px 1px rgba(0,0,0,.11),
      0 3px 7px rgba(0,0,0,.075),
      0 8px 18px rgba(0,0,0,.045) !important;

    /* Hapus tint filter V56 agar gradient asli tampil persis. */
    filter:none !important;
  }
}

/* =========================================================
   V58 - DESKTOP HERO WHITE WASH WIDER + DENSER
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px pada LIGHT MODE.
   - White readability wash tetap datang dari sisi KIRI.
   - Area putih dibuat LEBIH PEKAT dan bertahan LEBIH LAMA.
   - Fade transparan digeser lebih jauh ke sisi KANAN sehingga
     transisi foto rumah sakit terasa lebih panjang dan smooth.
   - Warna headline V57, hero brand V54, card 3D V52,
     spacing V55, navbar, footer, auth, dan mobile <980px
     tidak diubah.
   ========================================================= */

@media (min-width:980px){
  html:not([data-theme="dark"])
  .hero.heroSplit.loginHero{
    background-image:
      linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255,255,255,1) 24%,
        rgba(255,255,255,1) 38%,
        rgba(255,255,255,.998) 50%,
        rgba(255,255,255,.985) 60%,
        rgba(255,255,255,.945) 68%,
        rgba(255,255,255,.875) 76%,
        rgba(255,255,255,.780) 83%,
        rgba(255,255,255,.660) 88%,
        rgba(255,255,255,.540) 92%,
        rgba(255,255,255,.420) 95%,
        rgba(255,255,255,.300) 97%,
        rgba(255,255,255,.180) 98.5%,
        rgba(255,255,255,.080) 99.4%,
        rgba(255,255,255,0) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 68%,
        rgba(255,255,255,.06) 82%,
        rgba(255,255,255,.18) 100%
      ),
      url("../../assets/site/desktop/hero/hero-login.png"),
      linear-gradient(180deg,#ffffff 0%,#fbfefe 100%) !important;
  }
}

/* =========================================================
   V59 - DESKTOP AUTH CARD WIDER INNER PADDING
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Memperlebar ruang dalam casing login agar seluruh konten
     tidak terlalu dekat dengan tepi card 3D V52.
   - Padding kiri/kanan ditambah paling terasa; padding atas
     dan bawah ikut diseimbangkan agar casing tetap proporsional.
   - Lebar card dinaikkan sedikit agar area form tidak justru
     menyempit setelah padding diperbesar.
   - Struktur HTML, field, tab, tombol, auth flow, hero, navbar,
     footer, white wash V58, dan mobile/tablet <980px tidak diubah.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopFormPanel .loginCard{
    width:min(530px,100%) !important;
    max-width:530px !important;
    padding:34px 38px 42px !important;
  }
}

/* Compact laptop: breathing room tetap lebih lega tanpa membuat
   card terlalu lebar untuk kolom kanan. */
@media (min-width:980px) and (max-width:1180px){
  .loginDesktopFormPanel .loginCard{
    width:min(462px,100%) !important;
    max-width:462px !important;
    padding:28px 30px 36px !important;
  }
}

/* Short-height laptop: padding tetap lebih lebar dari baseline,
   tetapi tinggi card dijaga agar tab Daftar tetap aman. */
@media (min-width:980px) and (max-height:820px){
  .loginDesktopFormPanel .loginCard{
    padding:30px 32px 36px !important;
  }
}

@media (min-width:980px) and (max-height:720px){
  .loginDesktopFormPanel .loginCard{
    padding:27px 30px 33px !important;
  }
}

/* Desktop besar mendapatkan breathing room paling lapang. */
@media (min-width:1440px) and (min-height:821px){
  .loginDesktopFormPanel .loginCard{
    width:min(548px,100%) !important;
    max-width:548px !important;
    padding:36px 40px 44px !important;
  }
}

/* =========================================================
   V60 - DESKTOP HERO COPY MOVE RIGHT 20PX
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Seluruh .loginDesktopVariant1Copy digeser ke KANAN 20px.
   - Offset vertikal existing V48 (translateY(65px)) tetap utuh.
   - Logo/brand, headline, description, institution card +
     checklist bergerak sebagai satu blok.
   - Ukuran, spacing internal, white wash V58, card login V59,
     navbar, footer, auth, dan mobile/tablet <980px tidak diubah.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopVariant1Copy{
    position:relative !important;
    left:20px !important;
  }
}

/* =========================================================
   V61 - DESKTOP FOOTER LOCK DIRECTLY AFTER HERO
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Footer desktop selalu langsung mengikuti akhir hero/foto.
   - Menghapus white gap yang muncul ketika viewport lebih tinggi.
   - Penyebab utama dikunci: main tidak lagi flex-grow mengisi
     sisa tinggi viewport setelah hero selesai.
   - Tinggi hero V44 tetap dipertahankan sehingga foto/background
     hero tidak dipaksa ikut membesar saat layar makin tinggi.
   - Navbar, hero image, white wash V58, copy V60, auth card,
     footer visual, auth flow, dan mobile/tablet <980px tidak diubah.
   ========================================================= */

@media (min-width:980px){
  /* Base stylesheet memberi main flex:1. Pada viewport tinggi,
     properti itu membuat main menyerap sisa tinggi layar dan
     menghasilkan area putih di antara hero dan footer. */
  main{
    flex:0 0 auto !important;
    min-height:0 !important;
    height:auto !important;
  }

  /* Hero tetap mengikuti tinggi konten / baseline V44 dan tidak
     ikut meregang hanya karena viewport bertambah tinggi. */
  .hero.heroSplit.loginHero{
    height:auto !important;
  }

  /* Footer resmi harus mulai tepat setelah main/hero. */
  .desktopOfficialFooter{
    margin-top:0 !important;
  }
}

/* =========================================================
   V63 - DESKTOP HERO PHOTO FILL WITHOUT SHRINKING HERO
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Membatalkan pendekatan V62 yang mengunci tinggi hero dan
     menyebabkan komposisi/card terlihat rusak pada beberapa layar.
   - Mempertahankan tinggi hero natural dari baseline stabil V44/V61.
   - Menghilangkan area putih kosong di dalam hero dengan membuat
     layer foto hero selalu MENUTUP seluruh tinggi hero.
   - Footer tetap langsung mengikuti hero seperti V61.
   - Posisi copy V60, white wash V58, card 3D/padding V59,
     navbar, footer visual, auth flow, dan mobile/tablet <980px
     tidak diubah.
   ========================================================= */

@media (min-width:980px){
  /* V61 tetap menjadi dasar: main tidak menyerap sisa viewport. */
  main{
    flex:0 0 auto !important;
    min-height:0 !important;
    height:auto !important;
  }

  /* Jangan paksa tinggi hero berdasarkan vw/vh baru.
     Biarkan min-height baseline V44/V61 dan tinggi konten bekerja natural. */
  .hero.heroSplit.loginHero{
    height:auto !important;

    /*
     * Layer ke-3 = hero-login.png.
     * 'cover' membuat foto selalu menutup seluruh hero, termasuk saat
     * tinggi hero bertambah karena card Daftar / viewport tertentu.
     * Layer gradient/wash tetap 100% sehingga karakter V58 tidak berubah.
     */
    background-size:
      100% 100%,
      100% 100%,
      cover,
      100% 100% !important;

    background-position:
      left top,
      left top,
      right top,
      left top !important;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat !important;
  }

  /* Footer tetap menempel natural sesudah hero. */
  .desktopOfficialFooter{
    margin-top:0 !important;
  }
}

/* Compact laptop tetap menggunakan tinggi natural yang sudah ada;
   hanya foto yang dipastikan mengisi seluruh hero. */
@media (min-width:980px) and (max-width:1180px){
  .hero.heroSplit.loginHero{
    background-size:
      100% 100%,
      100% 100%,
      cover,
      100% 100% !important;
    background-position:
      left top,
      left top,
      right top,
      left top !important;
  }
}

/* Desktop lebar sama: tidak mengubah min-height/spacing, hanya fill foto. */
@media (min-width:1440px){
  .hero.heroSplit.loginHero{
    background-size:
      100% 100%,
      100% 100%,
      cover,
      100% 100% !important;
    background-position:
      left top,
      left top,
      right top,
      left top !important;
  }
}

/* =========================================================
   V64 - DESKTOP SIGN-IN / SIGN-UP FOOTER CONSISTENCY
   ---------------------------------------------------------
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Memperbaiki perbedaan tinggi halaman antara tab Masuk dan
     Daftar tanpa membuat rule khusus yang mengubah visual card.
   - Saat tab Masuk lebih pendek, MAIN mengisi sisa tinggi viewport
     dan HERO ikut meregang bersama MAIN, sehingga tidak ada ruang
     kosong setelah footer.
   - Saat tab Daftar lebih tinggi, tinggi konten tetap menang dan
     halaman membesar natural tanpa crop.
   - Footer tetap langsung berada setelah akhir hero/foto.
   - Foto background V63 tetap cover seluruh hero.
   - Card login, copy V60, white wash V58, navbar, footer visual,
     auth flow, dan mobile/tablet <980px tidak diubah.
   ========================================================= */

@media (min-width:980px){
  /* Wrapper desktop tetap minimal setinggi viewport. */
  .wrap{
    min-height:100svh !important;
    display:flex !important;
    flex-direction:column !important;
  }

  /*
   * V61/V63 memakai flex:0 sehingga state Masuk yang lebih pendek
   * dapat menyisakan area kosong SETELAH footer pada layar tinggi.
   * Main dikembalikan menjadi flex filler, tetapi hero juga dibuat
   * ikut mengisi main supaya sisa tinggi tidak muncul sebagai bidang
   * putih di antara hero dan footer.
   */
  main{
    flex:1 0 auto !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
  }

  .hero.heroSplit.loginHero{
    flex:1 1 auto !important;
    width:100% !important;
    align-self:stretch !important;
    height:auto !important;

    /* Baseline aman V44 dipertahankan. Flex hanya MENAMBAH tinggi
       bila viewport memang lebih tinggi; tidak pernah memendekkan
       hero di bawah kebutuhan card / content. */
    min-height:clamp(500px,58vh,585px) !important;

    background-size:
      100% 100%,
      100% 100%,
      cover,
      100% 100% !important;

    background-position:
      left top,
      left top,
      right top,
      left top !important;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat !important;
  }

  .desktopOfficialFooter{
    flex:0 0 auto !important;
    margin-top:0 !important;
  }
}

/* Compact laptop mempertahankan minimum baseline existing V44. */
@media (min-width:980px) and (max-width:1180px){
  .hero.heroSplit.loginHero{
    min-height:490px !important;
  }
}

/* Short-height laptop tetap memakai minimum aman existing. */
@media (min-width:980px) and (max-height:820px){
  .hero.heroSplit.loginHero{
    min-height:480px !important;
  }
}

/* Desktop besar tetap memakai baseline existing dan boleh bertambah
   natural lewat flex ketika viewport lebih tinggi. */
@media (min-width:1440px) and (min-height:821px){
  .hero.heroSplit.loginHero{
    min-height:clamp(520px,57vh,590px) !important;
  }
}

/* =========================================================
   V65 - LOGIN ACCOUNT ICON + COPY
   ---------------------------------------------------------
   TARGET:
   - Mengganti heart/logo pada header login card dengan icon akun.
   - Visual mengikuti referensi: badge akun circular, putih-teal,
     raised/neumorphism ringan dan tetap selaras dengan casing V52.
   - Hanya elemen identitas di dalam login card yang berubah.
   - Hero brand Bumil Ku di area kanan tetap memakai logo heart.
   - Layout/footer/auth baseline V64 tidak diubah.
   ========================================================= */

.loginAccountIcon{
  position:relative !important;
  isolation:isolate !important;

  width:60px !important;
  min-width:60px !important;
  max-width:60px !important;
  height:60px !important;
  min-height:60px !important;
  max-height:60px !important;
  flex:0 0 60px !important;

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

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

  color:#ffffff !important;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfdfd 48%,
      #eef3f4 100%
    ) !important;

  border:1px solid rgba(164,178,186,.18) !important;
  border-radius:50% !important;

  box-shadow:
    -7px -7px 14px rgba(255,255,255,1),
    0 2px 4px rgba(48,63,73,.045),
    7px 9px 16px rgba(48,63,73,.09),
    12px 15px 24px rgba(48,63,73,.065),
    inset 1px 1px 0 rgba(255,255,255,1),
    inset -2px -2px 5px rgba(105,120,130,.055) !important;

  overflow:visible !important;
}

.loginAccountIcon::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  inset:7px !important;

  border-radius:50% !important;

  background:
    linear-gradient(
      145deg,
      #4fb7a7 0%,
      #24a691 38%,
      #0f9f8d 68%,
      #0e9382 100%
    ) !important;

  border:1px solid rgba(255,255,255,.44) !important;

  box-shadow:
    0 6px 13px rgba(15,159,141,.18),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 5px rgba(5,92,84,.10) !important;

  pointer-events:none !important;
}

.loginAccountIcon::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;

  top:8px !important;
  left:13px !important;
  width:28px !important;
  height:13px !important;

  border-radius:999px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,0) 100%
    ) !important;

  transform:rotate(-8deg) !important;
  pointer-events:none !important;
}

.loginAccountIcon i,
.loginAccountIcon .svg-inline--fa{
  position:relative !important;
  z-index:2 !important;

  display:block !important;

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

  color:#ffffff !important;
  font-size:25px !important;
  line-height:1 !important;

  filter:
    drop-shadow(0 2px 3px rgba(5,91,83,.12)) !important;
}

html[data-theme="dark"] .loginAccountIcon{
  background:
    linear-gradient(
      145deg,
      #183a40 0%,
      #102b30 52%,
      #0b2227 100%
    ) !important;

  border-color:rgba(255,255,255,.07) !important;

  box-shadow:
    -5px -5px 12px rgba(255,255,255,.035),
    0 3px 5px rgba(0,0,0,.20),
    8px 10px 18px rgba(0,0,0,.28),
    inset 1px 1px 0 rgba(255,255,255,.04),
    inset -2px -2px 5px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] .loginAccountIcon::before{
  background:
    linear-gradient(
      145deg,
      #39b6a5 0%,
      #159d8d 46%,
      #0e8176 100%
    ) !important;

  border-color:rgba(255,255,255,.12) !important;

  box-shadow:
    0 7px 15px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 5px rgba(0,0,0,.16) !important;
}

/* Desktop/laptop: proporsi menggantikan logo heart lama tanpa
   mengubah tinggi header/card. */
@media (min-width:980px){
  .loginDesktopFormPanel .loginAccountIcon{
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    flex-basis:54px !important;
  }

  .loginDesktopFormPanel .loginAccountIcon::before{
    inset:6px !important;
  }

  .loginDesktopFormPanel .loginAccountIcon::after{
    top:7px !important;
    left:11px !important;
    width:26px !important;
    height:12px !important;
  }

  .loginDesktopFormPanel .loginAccountIcon i,
  .loginDesktopFormPanel .loginAccountIcon .svg-inline--fa{
    font-size:22px !important;
  }
}

/* Mobile mengikuti footprint logo existing agar layout HP tidak bergeser. */
@media (max-width:620px){
  .loginAccountIcon{
    width:60px !important;
    min-width:60px !important;
    max-width:60px !important;
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
    flex-basis:60px !important;
  }
}

@media (max-width:420px){
  .loginAccountIcon{
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    flex-basis:54px !important;
  }

  .loginAccountIcon::before{
    inset:6px !important;
  }

  .loginAccountIcon i,
  .loginAccountIcon .svg-inline--fa{
    font-size:22px !important;
  }
}

@media (max-width:350px){
  .loginAccountIcon{
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
    flex-basis:50px !important;
  }

  .loginAccountIcon i,
  .loginAccountIcon .svg-inline--fa{
    font-size:20px !important;
  }
}



/* =========================================================
   FINAL V66 - LOGIN ACCOUNT ICON ROUNDED SQUARE
   ---------------------------------------------------------
   TARGET:
   - Memperbaiki V65 yang tampil bulat karena border-radius:50%.
   - Bentuk badge akun mengikuti referensi: rounded-square teal,
     soft 3D / neumorphism, bukan lingkaran.
   - Icon user putih tetap di tengah.
   - Hanya badge account pada header login card yang berubah.
   - Copy V65, footer baseline V64, auth, navbar, hero, mobile
     flow, dan seluruh fungsi tetap dipertahankan.
   ========================================================= */

.loginAccountIcon{
  border-radius:17px !important;

  background:
    linear-gradient(
      145deg,
      #7bcfc1 0%,
      #43b6a4 34%,
      #1ca28f 68%,
      #0e9382 100%
    ) !important;

  border:1px solid rgba(255,255,255,.82) !important;

  box-shadow:
    -7px -7px 14px rgba(255,255,255,.98),
    0 2px 4px rgba(48,63,73,.045),
    7px 9px 16px rgba(48,63,73,.10),
    12px 15px 24px rgba(48,63,73,.065),
    inset 1px 1px 0 rgba(255,255,255,.44),
    inset -2px -2px 5px rgba(5,92,84,.10) !important;
}

.loginAccountIcon::before{
  inset:3px !important;
  border-radius:14px !important;

  background:
    linear-gradient(
      145deg,
      rgba(111,205,190,.98) 0%,
      rgba(63,180,162,.98) 34%,
      rgba(28,162,143,.99) 68%,
      rgba(14,147,130,1) 100%
    ) !important;

  border:1px solid rgba(255,255,255,.30) !important;

  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.30),
    inset -2px -3px 6px rgba(5,92,84,.11),
    0 5px 12px rgba(15,159,141,.10) !important;
}

.loginAccountIcon::after{
  top:6px !important;
  left:9px !important;
  width:29px !important;
  height:12px !important;
  border-radius:999px !important;
  opacity:.92 !important;
}

.loginAccountIcon i,
.loginAccountIcon .svg-inline--fa{
  color:#ffffff !important;
  filter:
    drop-shadow(0 2px 3px rgba(5,91,83,.15)) !important;
}

html[data-theme="dark"] .loginAccountIcon{
  border-radius:17px !important;
  background:
    linear-gradient(
      145deg,
      #42b9a7 0%,
      #249f90 48%,
      #0e8176 100%
    ) !important;
  border-color:rgba(255,255,255,.11) !important;
}

html[data-theme="dark"] .loginAccountIcon::before{
  border-radius:14px !important;
  background:
    linear-gradient(
      145deg,
      #4fc2af 0%,
      #25a794 48%,
      #0d7f74 100%
    ) !important;
}

@media (min-width:980px){
  .loginDesktopFormPanel .loginAccountIcon{
    border-radius:15px !important;
  }

  .loginDesktopFormPanel .loginAccountIcon::before{
    inset:3px !important;
    border-radius:12px !important;
  }

  .loginDesktopFormPanel .loginAccountIcon::after{
    top:5px !important;
    left:8px !important;
    width:27px !important;
    height:11px !important;
  }
}

@media (max-width:620px){
  .loginAccountIcon{
    border-radius:17px !important;
  }
  .loginAccountIcon::before{
    border-radius:14px !important;
  }
}

@media (max-width:420px){
  .loginAccountIcon{
    border-radius:15px !important;
  }
  .loginAccountIcon::before{
    border-radius:12px !important;
  }
}

@media (max-width:350px){
  .loginAccountIcon{
    border-radius:14px !important;
  }
  .loginAccountIcon::before{
    border-radius:11px !important;
  }
}

/* =========================================================
   FINAL V67 - LOGIN ACCOUNT ICON REFERENCE STYLE
   ---------------------------------------------------------
   TARGET:
   - Hanya menyempurnakan badge Account di header login card.
   - Mengikuti referensi terbaru: outer shell putih/dingin,
     inner rounded-square teal, highlight kaca halus kiri-atas,
     user putih di tengah, dan depth neumorphism ringan.
   - Footprint icon tetap mengikuti V66 agar layout card tidak
     bergeser dan baseline footer V64 tetap aman.
   - Auth, navbar, hero, footer, copy, dan mobile flow tidak
     diubah.
   ========================================================= */

.loginAccountIcon{
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfdfd 44%,
      #f2f7f7 72%,
      #e8f1f1 100%
    ) !important;

  border:1px solid rgba(94,127,137,.10) !important;
  border-radius:18px !important;

  box-shadow:
    -7px -7px 16px rgba(255,255,255,1),
    -2px -2px 6px rgba(255,255,255,.92),
    0 2px 4px rgba(44,67,75,.045),
    7px 9px 17px rgba(44,67,75,.10),
    12px 15px 26px rgba(44,67,75,.065),
    inset 1px 1px 0 rgba(255,255,255,1),
    inset -2px -2px 5px rgba(102,127,133,.055) !important;
}

.loginAccountIcon::before{
  inset:6px !important;
  border-radius:12px !important;

  background:
    linear-gradient(
      145deg,
      #69cbbb 0%,
      #45baa7 30%,
      #2eaa97 58%,
      #169a88 82%,
      #0e9382 100%
    ) !important;

  border:1px solid rgba(255,255,255,.30) !important;

  box-shadow:
    0 5px 11px rgba(15,159,141,.13),
    inset 1px 1px 0 rgba(255,255,255,.38),
    inset -2px -3px 6px rgba(5,91,83,.12) !important;
}

.loginAccountIcon::after{
  top:7px !important;
  left:10px !important;
  width:25px !important;
  height:10px !important;

  border-radius:999px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.52) 0%,
      rgba(255,255,255,.16) 58%,
      rgba(255,255,255,0) 100%
    ) !important;

  opacity:.82 !important;
  transform:rotate(-9deg) !important;
}

.loginAccountIcon i,
.loginAccountIcon .svg-inline--fa{
  color:#ffffff !important;
  filter:
    drop-shadow(0 2px 3px rgba(4,90,82,.16)) !important;
}

html[data-theme="dark"] .loginAccountIcon{
  background:
    linear-gradient(
      145deg,
      #193a40 0%,
      #122f35 52%,
      #0c252a 100%
    ) !important;

  border-color:rgba(255,255,255,.07) !important;

  box-shadow:
    -5px -5px 12px rgba(255,255,255,.035),
    0 3px 5px rgba(0,0,0,.20),
    8px 10px 18px rgba(0,0,0,.28),
    inset 1px 1px 0 rgba(255,255,255,.04),
    inset -2px -2px 5px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] .loginAccountIcon::before{
  background:
    linear-gradient(
      145deg,
      #56c3b1 0%,
      #32ad9b 44%,
      #169585 74%,
      #0c7d72 100%
    ) !important;

  border-color:rgba(255,255,255,.12) !important;

  box-shadow:
    0 6px 14px rgba(0,0,0,.20),
    inset 1px 1px 0 rgba(255,255,255,.18),
    inset -2px -3px 6px rgba(0,0,0,.16) !important;
}

@media (min-width:980px){
  .loginDesktopFormPanel .loginAccountIcon{
    border-radius:16px !important;
  }

  .loginDesktopFormPanel .loginAccountIcon::before{
    inset:6px !important;
    border-radius:11px !important;
  }

  .loginDesktopFormPanel .loginAccountIcon::after{
    top:7px !important;
    left:9px !important;
    width:24px !important;
    height:9px !important;
  }

  .loginDesktopFormPanel .loginAccountIcon i,
  .loginDesktopFormPanel .loginAccountIcon .svg-inline--fa{
    font-size:24px !important;
  }
}

@media (max-width:620px){
  .loginAccountIcon{
    border-radius:18px !important;
  }

  .loginAccountIcon::before{
    inset:6px !important;
    border-radius:12px !important;
  }

  .loginAccountIcon i,
  .loginAccountIcon .svg-inline--fa{
    font-size:26px !important;
  }
}

@media (max-width:420px){
  .loginAccountIcon{
    border-radius:16px !important;
  }

  .loginAccountIcon::before{
    inset:6px !important;
    border-radius:11px !important;
  }

  .loginAccountIcon i,
  .loginAccountIcon .svg-inline--fa{
    font-size:23px !important;
  }
}

@media (max-width:350px){
  .loginAccountIcon{
    border-radius:15px !important;
  }

  .loginAccountIcon::before{
    inset:5px !important;
    border-radius:10px !important;
  }

  .loginAccountIcon i,
  .loginAccountIcon .svg-inline--fa{
    font-size:21px !important;
  }
}

/* =========================================================
   FINAL V77 - ANALOG SCALE WHITE CARD STYLE
   =========================================================
   TUJUAN:
   - Card login desktop dibuat mengikuti karakter visual card
     timbangan analog yang user kirim.
   - Putih bersih / clean white.
   - Gaya neumorphism lembut, timbul, rapi.
   - Shadow dominan natural di kanan & bawah.
   - Sisi kiri / atas tetap halus sebagai highlight.
   - Hanya target inner login card yang diubah.
   - Layout, ukuran, isi form, navbar, footer, mobile/tablet,
     dan JavaScript tetap dipertahankan.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel{
    overflow:visible !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard[role="region"][aria-label="Panel autentikasi"]{
    position:relative !important;
    overflow:visible !important;

    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #fdfefe 56%,
        #fafcfd 100%
      ) !important;

    border:1px solid rgba(215,223,228,.82) !important;

    /*
     * Karakter shadow dibuat mengikuti card timbangan analog:
     * - top/left = highlight putih halus
     * - right/bottom = depth lembut
     * - bersih, tidak gelap, tidak kehijauan
     */
    box-shadow:
      /* highlight putih sisi kiri & atas */
      -3px -3px 7px rgba(255,255,255,.98),
      -10px -10px 22px rgba(255,255,255,.95),

      /* rim / body depth dekat permukaan */
      2px 2px 5px rgba(194,202,209,.24),
      6px 8px 14px rgba(186,195,202,.18),

      /* right / bottom main depth */
      12px 14px 28px rgba(178,187,195,.25),
      24px 28px 54px rgba(178,187,195,.20),
      0 34px 58px rgba(178,187,195,.15),

      /* ambient soft */
      0 10px 20px rgba(178,187,195,.08),

      /* inner clean edge */
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(214,221,227,.34),
      inset 1px 0 0 rgba(255,255,255,.98),
      inset -1px 0 0 rgba(214,221,227,.26) !important;

    filter:none !important;
  }

  /* Inner rim tipis agar terasa seperti body card timbangan */
  .heroLeft.loginDesktopFormPanel
  > .loginCard[role="region"][aria-label="Panel autentikasi"]::before{
    content:"";
    position:absolute;
    inset:12px;
    border-radius:24px;
    pointer-events:none;
    border:1px solid rgba(228,234,238,.88);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -1px 0 rgba(213,221,226,.18),
      0 1px 0 rgba(255,255,255,.72);
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard[role="region"][aria-label="Panel autentikasi"]{
    background:
      linear-gradient(
        180deg,
        #17383e 0%,
        #123037 56%,
        #0d262b 100%
      ) !important;

    border-color:rgba(255,255,255,.07) !important;

    box-shadow:
      -3px -3px 7px rgba(255,255,255,.02),
      -10px -10px 22px rgba(255,255,255,.018),
      2px 2px 5px rgba(0,0,0,.14),
      6px 8px 14px rgba(0,0,0,.18),
      12px 14px 28px rgba(0,0,0,.24),
      24px 28px 54px rgba(0,0,0,.22),
      0 34px 58px rgba(0,0,0,.16),
      0 10px 20px rgba(0,0,0,.08),
      inset 0 1px 0 rgba(255,255,255,.04),
      inset 0 -1px 0 rgba(0,0,0,.20),
      inset 1px 0 0 rgba(255,255,255,.025),
      inset -1px 0 0 rgba(0,0,0,.18) !important;

    filter:none !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard[role="region"][aria-label="Panel autentikasi"]::before{
    border-color:rgba(255,255,255,.05);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      inset 0 -1px 0 rgba(0,0,0,.16),
      0 1px 0 rgba(255,255,255,.018);
  }
}

/* =========================================================
   FINAL V81 - DESKTOP SHIFT RIGHT TOTAL 50PX
   =========================================================
   TARGET:
   - Melanjutkan V80 yang sudah berhasil.
   - loginCard bergeser KANAN total 50px.
   - loginDesktopVariant1Copy bergeser KANAN total 50px.
   - Scale card, posisi vertikal, shadow V77, navbar, footer,
     auth, dan mobile/tablet tetap tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard[role="region"][aria-label="Panel autentikasi"]{
    translate:50px 0 !important;
  }

  .loginDesktopVariant1Copy{
    translate:50px 0 !important;
  }
}

/* =========================================================
   FINAL V82 - FIREBASE PHONE AUTH / SMS OTP
   =========================================================
   PRINSIP:
   - V77 analog-scale white card tetap utuh.
   - V81 shift kanan 50px tetap utuh.
   - Email/Password dan Google existing tidak diubah.
   - Phone Auth hanya menambah metode login ketiga.
   - Panel OTP memakai card yang sama; saat aktif, area auth
     existing disembunyikan sementara, bukan dihapus.
   - Mobile/tablet tetap mengikuti layout existing.
   ========================================================= */

.phoneBtn,
.phoneAuthPanel{
  width:100%;
}

.phoneBtn{
  appearance:none;
  min-height:58px;
  margin-top:10px;
  padding:0 12px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 32px;
  align-items:center;
  gap:6px;
  color:#294052;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(65,117,130,.16);
  border-radius:999px;
  box-shadow:
    0 16px 34px rgba(16,70,80,.095),
    0 4px 10px rgba(16,70,80,.045),
    inset 0 1px 0 rgba(255,255,255,1);
  font-size:14px;
  line-height:1;
  font-weight:700;
  text-align:center;
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    opacity .18s ease;
}

.phoneBtn:hover{
  color:#294052;
  background:#ffffff;
  border-color:rgba(15,159,141,.24);
  box-shadow:
    0 20px 38px rgba(24,77,89,.13),
    0 7px 16px rgba(15,159,141,.07),
    inset 0 1px rgba(255,255,255,1);
  transform:translateY(-1px);
}

.phoneBtn:active{
  transform:translateY(0);
}

.phoneBtn:disabled{
  opacity:.66;
  cursor:not-allowed;
  transform:none;
}

.phoneIconWrap{
  width:28px;
  min-width:28px;
  height:28px;
  justify-self:start;
  display:grid;
  place-items:center;
  color:#000000;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:50%;
  box-shadow:
    0 6px 13px rgba(15,23,42,.10),
    inset 0 1px rgba(255,255,255,1);
}

.phoneIconWrap i,
.phoneIconWrap .svg-inline--fa{
  color:currentColor;
  font-size:13px;
}

.phoneBtnText{
  min-width:0;
  display:block;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.phoneTrailing{
  width:29px;
  min-width:29px;
  height:29px;
  justify-self:end;
  display:grid;
  place-items:center;
  color:#426577;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(61,111,124,.22);
  border-radius:50%;
  font-size:10px;
}

.phoneAuthPanel[hidden],
.phoneAuthStage[hidden]{
  display:none !important;
}

/* Phone mode tidak menghapus auth existing; hanya menyembunyikannya sementara. */
.loginCard.is-phone-auth-mode .authTabs,
.loginCard.is-phone-auth-mode .authDivider,
.loginCard.is-phone-auth-mode > #loginStatus,
.loginCard.is-phone-auth-mode > .authContent{
  display:none !important;
}

.loginCard.is-phone-auth-mode .phoneAuthPanel{
  display:block;
}

.phoneAuthPanel{
  margin-top:2px;
  animation:phoneAuthFadeIn .20s ease both;
}

@keyframes phoneAuthFadeIn{
  from{
    opacity:0;
    transform:translateY(5px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.phoneBackBtn{
  appearance:none;
  border:0;
  background:transparent;
  color:#0e9382;
  margin:0 0 12px;
  padding:4px 2px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:750;
  cursor:pointer;
  border-radius:10px;
}

.phoneBackBtn:hover{
  color:#0b7f76;
  background:rgba(15,159,141,.06);
}

.phoneBackBtn:focus-visible,
.phoneBtn:focus-visible,
.phonePrimaryBtn:focus-visible,
.phoneRestartBtn:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

.phoneAuthIntro{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding:12px 13px;
  border:1px solid rgba(58,105,119,.10);
  border-radius:17px;
  background:linear-gradient(145deg,#ffffff,#f5faf9);
  box-shadow:
    0 8px 18px rgba(16,70,80,.055),
    inset 0 1px 0 rgba(255,255,255,1);
}

.phoneAuthIntroIcon{
  width:42px;
  min-width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:#ffffff;
  background:linear-gradient(145deg,#4fc2af,#159986 78%,#0c8177);
  border:1px solid rgba(255,255,255,.52);
  border-radius:14px;
  box-shadow:
    0 8px 16px rgba(15,159,141,.16),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.phoneAuthIntroIcon i,
.phoneAuthIntroIcon .svg-inline--fa{
  font-size:18px;
  color:currentColor;
}

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

.phoneAuthIntroCopy strong{
  color:var(--ink);
  font-size:15px;
  line-height:1.25;
  font-weight:800;
}

.phoneAuthIntroCopy small{
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  font-weight:550;
}

.phoneAuthForm{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.phoneAuthStage{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.phoneAuthHint,
.phoneAuthConsent,
.phoneOtpDestination{
  margin:0;
  color:var(--muted);
  font-size:11.8px;
  line-height:1.55;
}

.phoneAuthHint--muted{
  margin-top:-5px;
  opacity:.86;
}

.phoneAuthConsent{
  margin-top:-3px;
}

.phoneAuthConsent a{
  color:#0e9382;
  font-weight:700;
  text-decoration:none;
}

.phoneAuthConsent a:hover{
  text-decoration:underline;
  text-underline-offset:2px;
}

.phoneOtpDestination{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(15,159,141,.07);
  border:1px solid rgba(15,159,141,.12);
}

.phoneOtpDestination strong{
  display:block;
  margin-top:2px;
  color:#0e9382;
  font-size:13px;
}

.phoneOtpInputShell input{
  letter-spacing:.16em;
  font-weight:750;
}

.phonePrimaryBtn{
  appearance:none;
  width:100%;
  min-height:52px;
  padding:0 12px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 32px;
  align-items:center;
  gap:6px;
  color:#ffffff;
  background:
    radial-gradient(circle at 18% 0%,rgba(255,255,255,.17),rgba(255,255,255,0) 52%),
    linear-gradient(105deg,#087f78 0%,#0b8f84 28%,#119b8a 52%,#19a78f 74%,#25b79a 100%);
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  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);
  font-size:14px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}

.phonePrimaryBtn:hover{
  transform:translateY(-1px);
  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);
}

.phonePrimaryBtn:active{
  transform:translateY(0);
}

.phonePrimaryBtn:disabled{
  opacity:.65;
  cursor:not-allowed;
  transform:none;
}

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

.phonePrimaryBtn .actionLeading{
  justify-self:start;
  font-size:16px;
}

.phonePrimaryBtn .actionTrailing{
  width:29px;
  min-width:29px;
  height:29px;
  justify-self:end;
  color:#ffffff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.50);
  border-radius:50%;
  font-size:9.5px;
}

.phoneRestartBtn{
  appearance:none;
  align-self:center;
  border:0;
  background:transparent;
  color:#0e9382;
  padding:4px 8px;
  font-size:12.5px;
  font-weight:750;
  cursor:pointer;
}

.phoneRestartBtn:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

.phoneAuthMessage{
  margin-top:1px;
}

/* Dark mode mengikuti card V77 tanpa mengubah karakter existing. */
html[data-theme="dark"] .phoneBtn{
  color:#eafcff;
  background:rgba(16,43,48,.94);
  border-color:rgba(255,255,255,.09);
  box-shadow:
    0 16px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-theme="dark"] .phoneBtn:hover{
  color:#eafcff;
  background:rgba(20,52,58,.98);
  border-color:rgba(83,235,232,.18);
}

html[data-theme="dark"] .phoneIconWrap{
  color:#000000;
  background:#ffffff;
  border-color:rgba(15,23,42,.10);
  box-shadow:
    0 6px 13px rgba(0,0,0,.18),
    inset 0 1px rgba(255,255,255,1);
}

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

html[data-theme="dark"] .phoneBackBtn,
html[data-theme="dark"] .phoneAuthConsent a,
html[data-theme="dark"] .phoneOtpDestination strong,
html[data-theme="dark"] .phoneRestartBtn{
  color:#53ebe8;
}

html[data-theme="dark"] .phoneAuthIntro{
  background:linear-gradient(145deg,#17383e,#102b30);
  border-color:rgba(255,255,255,.07);
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.035);
}

html[data-theme="dark"] .phoneOtpDestination{
  background:rgba(83,235,232,.06);
  border-color:rgba(83,235,232,.11);
}

@media (max-width:620px){
  .phoneBtn,
  .phonePrimaryBtn{
    min-height:48px;
    grid-template-columns:32px minmax(0,1fr) 32px;
    font-size:14px;
  }

  .phoneAuthIntro{
    padding:10px 11px;
    margin-bottom:13px;
  }

  .phoneAuthIntroIcon{
    width:38px;
    min-width:38px;
    height:38px;
    border-radius:13px;
  }

  .phoneAuthIntroCopy strong{
    font-size:14px;
  }

  .phoneAuthIntroCopy small,
  .phoneAuthHint,
  .phoneAuthConsent,
  .phoneOtpDestination{
    font-size:11.2px;
  }
}

@media (max-width:420px){
  .phoneBtn,
  .phonePrimaryBtn{
    min-height:46px;
    padding-left:10px;
    padding-right:10px;
    grid-template-columns:30px minmax(0,1fr) 30px;
    font-size:13px;
  }

  .phoneIconWrap{
    width:26px;
    min-width:26px;
    height:26px;
  }

  .phoneTrailing,
  .phonePrimaryBtn .actionTrailing{
    width:27px;
    min-width:27px;
    height:27px;
  }
}

/* =========================================================
   FINAL V86 - PHONE LABEL FONT PARITY WITH GOOGLE
   =========================================================
   TARGET:
   - HANYA menyamakan ukuran teks tombol "Masuk dengan Nomor HP"
     dengan tombol "Masuk dengan Google" pada desktop/laptop.
   - Acuan final card desktop: Google = 11.2px.
   - Ikon phone hitam + lingkaran putih V85 tetap utuh.
   - Tinggi tombol, padding, grid, shadow, hover, Phone Auth, OTP,
     Firebase, JavaScript, serta layout lain tidak diubah.
   - Mobile sudah konsisten melalui baseline existing dan tidak diubah.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopFormPanel #phoneLoginBtn.loginIndexPhoneAction{
    font-size:11.2px !important;
  }

  .loginDesktopFormPanel #phoneLoginBtn .loginIndexPhoneLabel{
    font-size:inherit !important;
    line-height:1 !important;
    font-weight:700 !important;
  }
}


/* =========================================================
   FINAL V87 - PHONE BUTTON SIZE PARITY WITH GOOGLE
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Tombol "Masuk dengan Nomor HP" dibuat identik secara
     proporsi dengan tombol "Masuk dengan Google".
   - Tinggi tombol mengikuti Google final = 43px.
   - Ukuran teks tetap parity V86 = 11.2px.
   - Leading circle mengikuti Google final = 24px.
   - Trailing circle mengikuti Google final = 25px.
   - Ikon phone hitam + lingkaran putih V85 tetap dipertahankan.
   - Width, grid, padding, radius, shadow, hover, Phone Auth,
     OTP, Firebase, JavaScript, dan mobile/tablet tidak diubah.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopFormPanel #phoneLoginBtn.loginIndexPhoneAction{
    min-height:43px !important;
    font-size:11.2px !important;
  }

  .loginDesktopFormPanel #phoneLoginBtn .phoneIconWrap{
    width:24px !important;
    min-width:24px !important;
    max-width:24px !important;
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
  }

  .loginDesktopFormPanel #phoneLoginBtn .phoneTrailing{
    width:25px !important;
    min-width:25px !important;
    max-width:25px !important;
    height:25px !important;
    min-height:25px !important;
    max-height:25px !important;
    font-size:8.5px !important;
  }

  .loginDesktopFormPanel #phoneLoginBtn .loginIndexPhoneLabel{
    font-size:inherit !important;
    line-height:1 !important;
    font-weight:700 !important;
  }
}


/* =========================================================
   FINAL V89 - SOLID RAISED CLEAN BUTTON STYLE (TYPE 1)
   =========================================================
   TARGET:
   - Laptop / desktop login card mengikuti pilihan user:
     "Solid Raised Clean (Rekomendasi)".
   - Karakter tombol dibuat TIMBUL, SOLID, EMPUK, dan CLEAN.
   - Tombol utama: teal solid tanpa gradient.
   - Tombol Google & Nomor HP: background putih benar-benar clean.
   - Fokus visual saja; fungsi, struktur auth, OTP, Firebase,
     mobile/tablet, dan alur existing tidak diubah.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopFormPanel #signInSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel #signUpSubmitBtn.loginIndexPrimaryAction{
    background:#19a99b !important;
    border:1px solid rgba(11,139,129,.34) !important;
    border-radius:999px !important;
    box-shadow:
      0 20px 36px rgba(11,139,129,.18),
      0 8px 16px rgba(11,139,129,.10),
      0 2px 5px rgba(17,61,69,.08),
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -2px 0 rgba(8,120,112,.20) !important;
  }

  .loginDesktopFormPanel #signInSubmitBtn.loginIndexPrimaryAction:hover,
  .loginDesktopFormPanel #signUpSubmitBtn.loginIndexPrimaryAction:hover{
    background:#18a193 !important;
    border-color:rgba(10,132,123,.40) !important;
    box-shadow:
      0 24px 42px rgba(11,139,129,.22),
      0 10px 18px rgba(11,139,129,.12),
      0 2px 5px rgba(17,61,69,.09),
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -2px 0 rgba(8,120,112,.22) !important;
    transform:translateY(-1px) !important;
  }

  .loginDesktopFormPanel #signInSubmitBtn.loginIndexPrimaryAction:active,
  .loginDesktopFormPanel #signUpSubmitBtn.loginIndexPrimaryAction:active{
    background:#17998c !important;
    box-shadow:
      0 12px 22px rgba(11,139,129,.16),
      0 4px 10px rgba(11,139,129,.08),
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 2px 6px rgba(7,110,103,.16) !important;
    transform:translateY(0) !important;
  }

  .loginDesktopFormPanel #signInSubmitBtn .actionTrailing,
  .loginDesktopFormPanel #signUpSubmitBtn .actionTrailing{
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.46) !important;
    box-shadow:
      0 6px 14px rgba(7,110,103,.16),
      inset 0 1px 0 rgba(255,255,255,.26) !important;
  }

  .loginDesktopFormPanel #googleLoginBtn.loginIndexGoogleAction,
  .loginDesktopFormPanel #phoneLoginBtn.loginIndexPhoneAction{
    background:#ffffff !important;
    border:1px solid rgba(226,233,238,.96) !important;
    border-radius:999px !important;
    box-shadow:
      0 18px 34px rgba(22,61,70,.08),
      0 7px 16px rgba(22,61,70,.05),
      0 2px 5px rgba(22,61,70,.04),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -2px 0 rgba(234,240,243,.92) !important;
  }

  .loginDesktopFormPanel #googleLoginBtn.loginIndexGoogleAction:hover,
  .loginDesktopFormPanel #phoneLoginBtn.loginIndexPhoneAction:hover{
    background:#ffffff !important;
    border-color:rgba(218,227,232,.98) !important;
    box-shadow:
      0 22px 40px rgba(22,61,70,.10),
      0 9px 18px rgba(22,61,70,.06),
      0 2px 5px rgba(22,61,70,.05),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -2px 0 rgba(236,242,245,.96) !important;
    transform:translateY(-1px) !important;
  }

  .loginDesktopFormPanel #googleLoginBtn.loginIndexGoogleAction:active,
  .loginDesktopFormPanel #phoneLoginBtn.loginIndexPhoneAction:active{
    background:#ffffff !important;
    box-shadow:
      0 12px 22px rgba(22,61,70,.07),
      0 4px 10px rgba(22,61,70,.04),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -1px 0 rgba(236,242,245,.92) !important;
    transform:translateY(0) !important;
  }

  .loginDesktopFormPanel #googleLoginBtn .googleIconWrap,
  .loginDesktopFormPanel #phoneLoginBtn .phoneIconWrap{
    background:#ffffff !important;
    border:1px solid rgba(232,238,242,.98) !important;
    box-shadow:
      0 8px 16px rgba(22,61,70,.10),
      0 2px 5px rgba(22,61,70,.05),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(238,243,246,.92) !important;
  }

  .loginDesktopFormPanel #phoneLoginBtn .phoneIconWrap,
  .loginDesktopFormPanel #phoneLoginBtn .phoneIconWrap i,
  .loginDesktopFormPanel #phoneLoginBtn .phoneIconWrap .svg-inline--fa{
    color:#111111 !important;
  }

  .loginDesktopFormPanel #googleLoginBtn .googleTrailing,
  .loginDesktopFormPanel #phoneLoginBtn .phoneTrailing{
    background:#ffffff !important;
    border:1px solid rgba(214,224,230,.98) !important;
    color:#5f7b89 !important;
    box-shadow:
      0 6px 14px rgba(22,61,70,.08),
      0 2px 4px rgba(22,61,70,.04),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(236,242,245,.96) !important;
  }
}


/* =========================================================
   FINAL V90 - LOGIN CARD TEAL COLOR PARITY
   =========================================================
   TARGET:
   - HANYA area di dalam login card desktop/laptop >=980px.
   - Semua aksen hijau/teal diselaraskan dengan tombol utama
     Masuk V89: #19A99B.
   - Tombol utama Solid Raised Clean V89 tetap utuh.
   - Tombol Google/Phone putih clean V89 tetap utuh.
   - Tidak mengubah fungsi, ukuran, spacing, auth, OTP,
     Firebase, navbar, footer, maupun mobile/tablet.
   ========================================================= */

@media (min-width:980px){

  /* ACTIVE TAB: Masuk / Daftar */
  .loginDesktopFormPanel
  #tabSignIn:checked ~ .authTabSwitch label[for="tabSignIn"],
  .loginDesktopFormPanel
  #tabSignUp:checked ~ .authTabSwitch label[for="tabSignUp"]{
    background:#19a99b !important;
    color:#ffffff !important;
    border-color:transparent !important;
    box-shadow:
      0 10px 20px rgba(11,139,129,.18),
      0 4px 10px rgba(11,139,129,.10),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  /* FORM ICONS + LINKS */
  .loginDesktopFormPanel .inputShell > i,
  .loginDesktopFormPanel .inputShell > .svg-inline--fa,
  .loginDesktopFormPanel .textLink,
  .loginDesktopFormPanel .textLinkBtn,
  .loginDesktopFormPanel .authLegalInline a,
  .loginDesktopFormPanel .passwordToggleBtn:hover,
  .loginDesktopFormPanel .passwordToggleBtn.is-visible{
    color:#19a99b !important;
  }

  /* CHECKBOX */
  .loginDesktopFormPanel .checkWrap input{
    accent-color:#19a99b !important;
  }

  /* INPUT FOCUS */
  .loginDesktopFormPanel .inputShell:focus-within{
    border-color:rgba(25,169,155,.42) !important;
    box-shadow:
      0 0 0 4px rgba(25,169,155,.10),
      inset 0 1px 0 rgba(255,255,255,1),
      0 5px 14px rgba(16,70,80,.035) !important;
  }

  /* PASSWORD EYE HOVER / ACTIVE */
  .loginDesktopFormPanel .passwordToggleBtn:hover,
  .loginDesktopFormPanel .passwordToggleBtn.is-visible{
    background:rgba(25,169,155,.08) !important;
  }

  /* PHONE AUTH ACCENTS - SAME TEAL FAMILY */
  .loginDesktopFormPanel .phoneBackBtn,
  .loginDesktopFormPanel .phoneAuthConsent a,
  .loginDesktopFormPanel .phoneOtpDestination strong,
  .loginDesktopFormPanel .phoneRestartBtn{
    color:#19a99b !important;
  }

  .loginDesktopFormPanel .phoneBackBtn:hover{
    color:#18a193 !important;
    background:rgba(25,169,155,.06) !important;
  }

  .loginDesktopFormPanel .phoneAuthIntroIcon{
    background:#19a99b !important;
    border-color:rgba(255,255,255,.46) !important;
    box-shadow:
      0 10px 20px rgba(11,139,129,.18),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  .loginDesktopFormPanel .phoneOtpDestination{
    background:rgba(25,169,155,.07) !important;
    border-color:rgba(25,169,155,.14) !important;
  }

  .loginDesktopFormPanel .phonePrimaryBtn{
    background:#19a99b !important;
    border-color:rgba(11,139,129,.34) !important;
    box-shadow:
      0 20px 36px rgba(11,139,129,.18),
      0 8px 16px rgba(11,139,129,.10),
      0 2px 5px rgba(17,61,69,.08),
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -2px 0 rgba(8,120,112,.20) !important;
  }

  .loginDesktopFormPanel .phonePrimaryBtn:hover{
    background:#18a193 !important;
    box-shadow:
      0 24px 42px rgba(11,139,129,.22),
      0 10px 18px rgba(11,139,129,.12),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  /* Focus accessibility memakai warna tombol utama */
  .loginDesktopFormPanel .primaryAuthBtn:focus-visible,
  .loginDesktopFormPanel .googleBtn:focus-visible,
  .loginDesktopFormPanel .phoneBtn:focus-visible,
  .loginDesktopFormPanel .phonePrimaryBtn:focus-visible,
  .loginDesktopFormPanel .phoneRestartBtn:focus-visible,
  .loginDesktopFormPanel .textLinkBtn:focus-visible,
  .loginDesktopFormPanel .passwordToggleBtn:focus-visible,
  .loginDesktopFormPanel .inputShell input:focus-visible{
    outline-color:rgba(25,169,155,.30) !important;
  }
}


/* =========================================================
   FINAL V91 - ACCOUNT ICON TEAL PARITY
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Card/badge Account pada header login mengikuti karakter
     Solid Raised Clean yang sudah dipilih.
   - Outer shell: putih clean.
   - Inner account tile: teal solid #19A99B, TANPA gradient.
   - Icon user: putih.
   - Shadow tetap timbul/empuk, bukan cekung.
   - Ukuran, posisi, HTML, auth, Firebase, OTP, navbar,
     footer, serta mobile/tablet tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .loginDesktopFormPanel .loginAccountIcon{
    background:#ffffff !important;
    border:1px solid rgba(226,233,238,.96) !important;

    box-shadow:
      0 16px 30px rgba(22,61,70,.085),
      0 6px 14px rgba(22,61,70,.055),
      0 2px 5px rgba(22,61,70,.04),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -2px 0 rgba(234,240,243,.92) !important;
  }

  .loginDesktopFormPanel .loginAccountIcon::before{
    background:#19a99b !important;
    border:1px solid rgba(11,139,129,.28) !important;

    box-shadow:
      0 10px 19px rgba(11,139,129,.18),
      0 4px 9px rgba(11,139,129,.10),
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -2px 0 rgba(8,120,112,.18) !important;
  }

  /* Hilangkan highlight kaca/gradient lama agar benar-benar clean. */
  .loginDesktopFormPanel .loginAccountIcon::after{
    content:none !important;
    display:none !important;
    background:none !important;
    opacity:0 !important;
  }

  .loginDesktopFormPanel .loginAccountIcon i,
  .loginDesktopFormPanel .loginAccountIcon .svg-inline--fa{
    color:#ffffff !important;
    filter:
      drop-shadow(0 2px 3px rgba(5,91,83,.13)) !important;
  }
}


/* =========================================================
   FINAL V92 - AUTH CONTENT LOWER + WIDER BUTTON GAP
   =========================================================
   TARGET:
   - Fokus HANYA area tombol alternatif login pada desktop/laptop.
   - Blok authContent (Google + Nomor HP) diturunkan 8px.
   - Jarak antar tombol dibuat sedikit lebih lega agar tidak mepet.
   - Tidak mengubah fungsi, HTML auth, OTP, Firebase, mobile/tablet,
     warna V89/V90/V91, maupun komponen lain yang sudah stabil.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopFormPanel .authContent{
    margin-top:12px !important; /* semula 4px → turun total 8px */
    gap:12px !important;        /* beri jarak antar tombol agar lebih lega */
  }

  /* Pastikan spacing bawah divider tetap proporsional */
  .loginDesktopFormPanel .authDivider{
    margin-bottom:10px !important;
  }
}


/* =========================================================
   FINAL V94 - AUTH DIVIDER DOWN TOTAL 13PX
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Divider "atau lanjutkan dengan" digeser turun total 13px (tambahan 8px dari V93).
   - Tombol Google + Nomor HP V92 tetap pada posisi sekarang.
   - Jarak antar tombol V92 tetap.
   - Tidak mengubah fungsi login, auth, OTP, Firebase,
     mobile/tablet, warna, shadow, atau komponen lain.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopFormPanel .authDivider{
    transform:translateY(13px) !important;
  }
}


/* =========================================================
   FINAL V96 - AUTH CONTENT DOWN ADDITIONAL 8PX AGAIN
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Seluruh blok .authContent yang berisi:
       1. Masuk dengan Google
       2. Masuk dengan Nomor HP
     digeser TURUN tambahan 8px lagi dari V95 (total transform 16px).
   - Jarak antar tombol 12px dari V92 tetap.
   - Divider V94 tetap pada posisi total 13px ke bawah.
   - Tidak mengubah ukuran tombol, warna, shadow, HTML,
     fungsi login, Firebase, OTP, maupun mobile/tablet.
   ========================================================= */

@media (min-width:980px){
  .loginDesktopFormPanel .authContent{
    transform:translateY(16px) !important;
  }
}


/* =========================================================
   FINAL V97 - PHONE BUTTON UP 4PX + WIDER BOTTOM SPACE
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Tombol "Masuk dengan Nomor HP" naik tepat 4px.
   - Margin bawah tombol ditambah 4px agar jarak visual
     ke batas bawah login card terasa lebih lega.
   - Posisi Google, authContent V96, divider V94, ukuran,
     warna, shadow, Auth/Firebase/OTP, dan mobile/tablet
     tidak diubah.
   - Hover tetap naik 1px dari posisi barunya.
   ========================================================= */

@media (min-width:980px){

  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction{
    transform:translateY(-4px) !important;
    margin-bottom:4px !important;
  }

  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction:hover{
    transform:translateY(-5px) !important;
  }

  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction:active{
    transform:translateY(-4px) !important;
  }
}


/* =========================================================
   FINAL V98 - SIGN UP MANUAL ONLY
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Saat tab "Daftar" aktif:
       1. Divider "atau lanjutkan dengan" tidak ditampilkan.
       2. Tombol "Masuk dengan Google" tidak ditampilkan.
       3. Tombol "Masuk dengan Nomor HP" tidak ditampilkan.
       4. Global loginStatus ikut disembunyikan agar tidak ada
          pesan sisa dari metode login alternatif.
   - Form Daftar manual + tombol "Buat akun" tetap tampil.
   - Saat kembali ke tab "Masuk", seluruh metode login
     alternatif tampil kembali otomatis seperti V97.
   - Tidak mengubah Firebase Auth, Email/Password signup,
     Google Auth, Phone OTP, reCAPTCHA, event handler,
     login-ui.js, login-auth.js, atau mobile/tablet.
   ========================================================= */

@media (min-width:980px){

  .loginDesktopFormPanel
  .loginCard:has(#tabSignUp:checked)
  > .authDivider,

  .loginDesktopFormPanel
  .loginCard:has(#tabSignUp:checked)
  > #loginStatus,

  .loginDesktopFormPanel
  .loginCard:has(#tabSignUp:checked)
  > .authContent{
    display:none !important;
  }
}


/* =========================================================
   FINAL V99 - CLEAN PURE WHITE DEFAULT AUTH BUTTONS
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Tombol Google dan Nomor HP pada kondisi DEFAULT dibuat
     seputih kondisi hover: putih murni #FFFFFF.
   - Tidak ada gradient / tint abu-abu pada permukaan tombol.
   - Hover tetap memberi efek lift, tetapi warna permukaan
     tidak berubah lagi.
   - Posisi V96/V97, spacing, icon, auth, Firebase, OTP,
     tab Daftar V98, dan mobile/tablet tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction,
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    border-color:rgba(218,227,232,.98) !important;

    box-shadow:
      0 18px 34px rgba(22,61,70,.08),
      0 7px 16px rgba(22,61,70,.05),
      0 2px 5px rgba(22,61,70,.04),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction:hover,
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction:hover{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    border-color:rgba(218,227,232,.98) !important;

    box-shadow:
      0 22px 40px rgba(22,61,70,.10),
      0 9px 18px rgba(22,61,70,.06),
      0 2px 5px rgba(22,61,70,.05),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction:focus-visible,
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction:focus-visible{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;
  }
}


/* =========================================================
   FINAL V101 - DEFAULT GOOGLE/PHONE EXACTLY LIKE HOVER
   =========================================================
   FIX:
   - Rule lama yang memakai:
       html:not([data-theme="dark"])
       .loginDesktopFormPanel #googleLoginBtn...
     memiliki specificity lebih tinggi dan masih memenangkan
     cascade, sehingga Google default tetap terlihat agak gelap.
   - V101 menggunakan selector dengan specificity yang sama /
     lebih tinggi dan ditempatkan paling akhir.
   - DEFAULT sekarang memakai surface + shadow HOVER.
   - Hover tidak mengubah warna/shadow lagi; hanya micro-lift.
   - Phone juga dikunci dengan prinsip yang sama.
   - HANYA desktop/laptop light mode >=980px.
   - Auth/Firebase/OTP/reCAPTCHA/JS/mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  /* =======================================================
     GOOGLE
     Default = visual hover existing
     ======================================================= */
  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction,

  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction:hover,

  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction:focus-visible{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    border:1px solid rgba(163,175,183,.16) !important;

    box-shadow:
      -7px -7px 14px rgba(255,255,255,1),
      0 3px 4px rgba(48,63,73,.050),
      8px 10px 16px rgba(48,63,73,.10),
      12px 15px 24px rgba(48,63,73,.090),
      inset 1px 1px 0 rgba(255,255,255,1),
      inset -1px -2px 4px rgba(105,120,130,.050) !important;
  }

  /* =======================================================
     PHONE
     Default = visual hover existing
     ======================================================= */
  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction,

  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction:hover,

  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction:focus-visible{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    border:1px solid rgba(218,227,232,.98) !important;

    box-shadow:
      0 22px 40px rgba(22,61,70,.10),
      0 9px 18px rgba(22,61,70,.06),
      0 2px 5px rgba(22,61,70,.05),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -2px 0 rgba(236,242,245,.96) !important;
  }

  /*
   * Posisi interaksi tetap mengikuti baseline:
   * Google hover naik 1px.
   * Phone V97 default -4px dan hover -5px.
   */
  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction:hover{
    transform:translateY(-1px) !important;
  }

  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction{
    transform:translateY(-4px) !important;
  }

  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction:hover{
    transform:translateY(-5px) !important;
  }
}


/* =========================================================
   FINAL V102 - LOGIN CARD UP 10PX + WIDTH +10PX
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Card autentikasi .loginCard digeser NAIK tepat 10px
     dibanding baseline existing V37:
       top: 30px -> 20px.
   - Lebar card ditambah tepat 10px pada setiap baseline
     responsive existing:
       desktop umum : 530px -> 540px
       compact      : 462px -> 472px
       large >=1440 : 548px -> 558px
   - Scale existing V40 tetap:
       desktop umum : 1.10
       compact      : 1.05
       short <=720  : 1.03
       large        : 1.10
   - Offset horizontal existing (left), padding internal,
     radius, shadow, tab Sign In/Sign Up, Google/Phone,
     V98 manual signup, V101 white auth buttons, dan seluruh
     fungsi Firebase/Auth/OTP/reCAPTCHA TIDAK diubah.
   - Mobile/tablet <980px TIDAK disentuh.
   ========================================================= */

@media (min-width:980px){

  .loginDesktopFormPanel .loginCard{
    /*
     * Baseline V37 = top:30px.
     * Dikurangi 10px agar card naik tepat 10px.
     */
    top:20px !important;

    /*
     * Baseline V59 desktop = 530px.
     * Ditambah tepat 10px.
     */
    width:min(540px,100%) !important;
    max-width:540px !important;
  }
}


/* =========================================================
   COMPACT LAPTOP 980 - 1180PX
   Baseline V59: 462px -> 472px
   ========================================================= */
@media (min-width:980px) and (max-width:1180px){

  .loginDesktopFormPanel .loginCard{
    width:min(472px,100%) !important;
    max-width:472px !important;
  }
}


/* =========================================================
   LARGE DESKTOP >=1440PX, HEIGHT NORMAL
   Baseline V59: 548px -> 558px
   ========================================================= */
@media (min-width:1440px) and (min-height:821px){

  .loginDesktopFormPanel .loginCard{
    width:min(558px,100%) !important;
    max-width:558px !important;
  }
}


/* =========================================================
   FINAL V103 - MOBILE LOGIN CARD + AUTH BUTTONS
   MATCH LAPTOP SOLID RAISED CLEAN STYLE
   =========================================================
   TARGET:
   - HANYA HP <=620px.
   - Card login HP mengikuti karakter visual card laptop V77:
       * clean white
       * neumorphism / raised 3D
       * depth dominan kanan-bawah
       * highlight lembut kiri-atas
       * inner rim tipis
   - Tombol auth HP mengikuti karakter laptop V89/V101:
       * Masuk / Buat akun / Phone OTP = teal solid #19A99B
       * Google + Nomor HP = pure white #FFFFFF
       * default Google/Phone sudah memakai visual raised/hover
       * tidak ada gradient pada tombol auth utama/Google/Phone
   - Account icon mengikuti V91:
       * outer putih clean
       * tile teal solid
       * icon putih
   - UKURAN MOBILE existing tetap dipertahankan.
   - Navbar, footer, sidebar, form spacing, JS, Firebase Auth,
     Google Auth, Phone OTP, reCAPTCHA, event handler,
     redirect, serta desktop/laptop TIDAK diubah.
   ========================================================= */

@media (max-width:620px){

  /* =======================================================
     MOBILE LOGIN CARD = LAPTOP V77 CHARACTER
     ======================================================= */
  .heroLeft.loginDesktopFormPanel{
    overflow:visible !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard[role="region"][aria-label="Panel autentikasi"]{
    position:relative !important;
    overflow:visible !important;

    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #fdfefe 56%,
        #fafcfd 100%
      ) !important;

    border:1px solid rgba(215,223,228,.82) !important;

    box-shadow:
      -2px -2px 5px rgba(255,255,255,.99),
      -7px -7px 16px rgba(255,255,255,.96),
      2px 2px 4px rgba(194,202,209,.20),
      5px 7px 12px rgba(186,195,202,.16),
      10px 12px 22px rgba(178,187,195,.22),
      18px 22px 38px rgba(178,187,195,.17),
      0 26px 44px rgba(178,187,195,.13),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(214,221,227,.30),
      inset 1px 0 0 rgba(255,255,255,.98),
      inset -1px 0 0 rgba(214,221,227,.22) !important;

    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard[role="region"][aria-label="Panel autentikasi"]::before{
    content:"" !important;
    position:absolute !important;
    inset:9px !important;
    border-radius:18px !important;
    pointer-events:none !important;

    border:1px solid rgba(228,234,238,.88) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 -1px 0 rgba(213,221,226,.16),
      0 1px 0 rgba(255,255,255,.72) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard[role="region"][aria-label="Panel autentikasi"]{
    background:
      linear-gradient(
        180deg,
        #17383e 0%,
        #123037 56%,
        #0d262b 100%
      ) !important;

    border-color:rgba(255,255,255,.07) !important;

    box-shadow:
      -2px -2px 5px rgba(255,255,255,.018),
      -7px -7px 16px rgba(255,255,255,.015),
      2px 2px 4px rgba(0,0,0,.13),
      5px 7px 12px rgba(0,0,0,.17),
      10px 12px 22px rgba(0,0,0,.23),
      18px 22px 38px rgba(0,0,0,.21),
      0 26px 44px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(255,255,255,.04),
      inset 0 -1px 0 rgba(0,0,0,.18),
      inset 1px 0 0 rgba(255,255,255,.022),
      inset -1px 0 0 rgba(0,0,0,.16) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard[role="region"][aria-label="Panel autentikasi"]::before{
    border-color:rgba(255,255,255,.05) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      inset 0 -1px 0 rgba(0,0,0,.14),
      0 1px 0 rgba(255,255,255,.016) !important;
  }


  /* =======================================================
     MOBILE ACCOUNT ICON = LAPTOP V91
     ======================================================= */
  .loginDesktopFormPanel .loginAccountIcon{
    background:#ffffff !important;
    border:1px solid rgba(226,233,238,.96) !important;

    box-shadow:
      0 13px 24px rgba(22,61,70,.075),
      0 5px 11px rgba(22,61,70,.045),
      0 2px 4px rgba(22,61,70,.035),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -2px 0 rgba(234,240,243,.88) !important;
  }

  .loginDesktopFormPanel .loginAccountIcon::before{
    background:#19a99b !important;
    background-image:none !important;
    border:1px solid rgba(11,139,129,.28) !important;

    box-shadow:
      0 8px 15px rgba(11,139,129,.16),
      0 3px 7px rgba(11,139,129,.09),
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -2px 0 rgba(8,120,112,.18) !important;
  }

  .loginDesktopFormPanel .loginAccountIcon::after{
    content:none !important;
    display:none !important;
  }

  .loginDesktopFormPanel .loginAccountIcon i,
  .loginDesktopFormPanel .loginAccountIcon .svg-inline--fa{
    color:#ffffff !important;
    filter:drop-shadow(0 2px 3px rgba(5,91,83,.12)) !important;
  }


  /* =======================================================
     PRIMARY AUTH BUTTONS = LAPTOP V89 SOLID RAISED CLEAN
     ======================================================= */
  .loginDesktopFormPanel
  #signInSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel
  #signUpSubmitBtn.loginIndexPrimaryAction,
  .loginDesktopFormPanel
  .phonePrimaryBtn{
    background:#19a99b !important;
    background-color:#19a99b !important;
    background-image:none !important;

    border:1px solid rgba(11,139,129,.34) !important;
    border-radius:999px !important;

    box-shadow:
      0 15px 27px rgba(11,139,129,.18),
      0 6px 13px rgba(11,139,129,.10),
      0 2px 4px rgba(17,61,69,.07),
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -2px 0 rgba(8,120,112,.20) !important;
  }

  .loginDesktopFormPanel
  #signInSubmitBtn.loginIndexPrimaryAction:hover,
  .loginDesktopFormPanel
  #signUpSubmitBtn.loginIndexPrimaryAction:hover,
  .loginDesktopFormPanel
  .phonePrimaryBtn:hover{
    background:#18a193 !important;
    background-color:#18a193 !important;
    background-image:none !important;

    border-color:rgba(10,132,123,.40) !important;

    box-shadow:
      0 18px 32px rgba(11,139,129,.21),
      0 8px 15px rgba(11,139,129,.12),
      0 2px 4px rgba(17,61,69,.08),
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -2px 0 rgba(8,120,112,.22) !important;

    transform:translateY(-1px) !important;
  }

  .loginDesktopFormPanel
  #signInSubmitBtn.loginIndexPrimaryAction:active,
  .loginDesktopFormPanel
  #signUpSubmitBtn.loginIndexPrimaryAction:active,
  .loginDesktopFormPanel
  .phonePrimaryBtn:active{
    background:#17998c !important;
    background-color:#17998c !important;
    background-image:none !important;

    box-shadow:
      0 10px 18px rgba(11,139,129,.15),
      0 3px 8px rgba(11,139,129,.07),
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 2px 5px rgba(7,110,103,.14) !important;

    transform:translateY(0) !important;
  }

  .loginDesktopFormPanel
  #signInSubmitBtn .actionTrailing,
  .loginDesktopFormPanel
  #signUpSubmitBtn .actionTrailing,
  .loginDesktopFormPanel
  .phonePrimaryBtn .actionTrailing{
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.46) !important;

    box-shadow:
      0 5px 11px rgba(7,110,103,.14),
      inset 0 1px 0 rgba(255,255,255,.26) !important;
  }


  /* =======================================================
     GOOGLE + PHONE = LAPTOP V101 PURE WHITE RAISED
     Default visual already equals desktop hover character.
     ======================================================= */
  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction,

  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction:hover,

  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction:focus-visible{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    border:1px solid rgba(163,175,183,.16) !important;

    box-shadow:
      -5px -5px 10px rgba(255,255,255,1),
      0 2px 3px rgba(48,63,73,.045),
      6px 8px 13px rgba(48,63,73,.09),
      9px 11px 18px rgba(48,63,73,.078),
      inset 1px 1px 0 rgba(255,255,255,1),
      inset -1px -2px 3px rgba(105,120,130,.045) !important;
  }

  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction,

  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction:hover,

  html:not([data-theme="dark"])
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction:focus-visible{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    border:1px solid rgba(218,227,232,.98) !important;

    box-shadow:
      0 17px 30px rgba(22,61,70,.09),
      0 7px 14px rgba(22,61,70,.055),
      0 2px 4px rgba(22,61,70,.045),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -2px 0 rgba(236,242,245,.94) !important;
  }

  /* Preserve mobile sizes; only surface/material is mirrored. */
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction,
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction{
    border-radius:999px !important;
  }

  .loginDesktopFormPanel
  #googleLoginBtn .googleIconWrap,
  .loginDesktopFormPanel
  #phoneLoginBtn .phoneIconWrap{
    background:#ffffff !important;
    background-image:none !important;

    border:1px solid rgba(232,238,242,.98) !important;

    box-shadow:
      0 7px 13px rgba(22,61,70,.09),
      0 2px 4px rgba(22,61,70,.045),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(238,243,246,.90) !important;
  }

  .loginDesktopFormPanel
  #phoneLoginBtn .phoneIconWrap,
  .loginDesktopFormPanel
  #phoneLoginBtn .phoneIconWrap i,
  .loginDesktopFormPanel
  #phoneLoginBtn .phoneIconWrap .svg-inline--fa{
    color:#111111 !important;
  }

  .loginDesktopFormPanel
  #googleLoginBtn .googleTrailing,
  .loginDesktopFormPanel
  #phoneLoginBtn .phoneTrailing{
    background:#ffffff !important;
    background-image:none !important;

    border:1px solid rgba(214,224,230,.98) !important;

    color:#5f7b89 !important;

    box-shadow:
      0 5px 11px rgba(22,61,70,.07),
      0 2px 4px rgba(22,61,70,.035),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(236,242,245,.94) !important;
  }

  /* Touch feedback without changing the selected default look. */
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction:active,
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction:active{
    background:#ffffff !important;
    background-image:none !important;

    box-shadow:
      0 10px 18px rgba(22,61,70,.065),
      0 3px 8px rgba(22,61,70,.035),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -1px 0 rgba(236,242,245,.90) !important;
  }


  /* =======================================================
     MOBILE TEAL PARITY INSIDE CARD
     Same color family as desktop V90.
     ======================================================= */
  .loginDesktopFormPanel
  #tabSignIn:checked ~ .authTabSwitch label[for="tabSignIn"],
  .loginDesktopFormPanel
  #tabSignUp:checked ~ .authTabSwitch label[for="tabSignUp"]{
    background:#19a99b !important;
    background-image:none !important;

    color:#ffffff !important;
    border-color:transparent !important;

    box-shadow:
      0 8px 16px rgba(11,139,129,.17),
      0 3px 8px rgba(11,139,129,.09),
      inset 0 1px 0 rgba(255,255,255,.26) !important;
  }

  .loginDesktopFormPanel .inputShell > i,
  .loginDesktopFormPanel .inputShell > .svg-inline--fa,
  .loginDesktopFormPanel .textLink,
  .loginDesktopFormPanel .textLinkBtn,
  .loginDesktopFormPanel .authLegalInline a{
    color:#19a99b !important;
  }

  .loginDesktopFormPanel .checkWrap input{
    accent-color:#19a99b !important;
  }

  .loginDesktopFormPanel .inputShell:focus-within{
    border-color:rgba(25,169,155,.42) !important;

    box-shadow:
      0 0 0 4px rgba(25,169,155,.10),
      inset 0 1px 0 rgba(255,255,255,1),
      0 5px 14px rgba(16,70,80,.035) !important;
  }

  .loginDesktopFormPanel .primaryAuthBtn:focus-visible,
  .loginDesktopFormPanel .googleBtn:focus-visible,
  .loginDesktopFormPanel .phoneBtn:focus-visible,
  .loginDesktopFormPanel .phonePrimaryBtn:focus-visible,
  .loginDesktopFormPanel .textLinkBtn:focus-visible,
  .loginDesktopFormPanel .passwordToggleBtn:focus-visible,
  .loginDesktopFormPanel .inputShell input:focus-visible{
    outline-color:rgba(25,169,155,.30) !important;
  }
}


/* =========================================================
   MOBILE DARK MODE AUTH SURFACES
   Keep dark theme coherent while retaining raised character.
   ========================================================= */
@media (max-width:620px){

  html[data-theme="dark"]
  .loginDesktopFormPanel
  #googleLoginBtn.loginIndexGoogleAction,

  html[data-theme="dark"]
  .loginDesktopFormPanel
  #phoneLoginBtn.loginIndexPhoneAction{
    color:#eafcff !important;

    background:#163a40 !important;
    background-color:#163a40 !important;
    background-image:none !important;

    border-color:rgba(255,255,255,.08) !important;

    box-shadow:
      0 17px 30px rgba(0,0,0,.26),
      0 7px 14px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -2px 0 rgba(0,0,0,.18) !important;
  }

  html[data-theme="dark"]
  .loginDesktopFormPanel
  #googleLoginBtn .googleTrailing,
  html[data-theme="dark"]
  .loginDesktopFormPanel
  #phoneLoginBtn .phoneTrailing{
    color:#bdd4d8 !important;
    background:#17383e !important;
    border-color:rgba(255,255,255,.10) !important;
    box-shadow:
      0 5px 11px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"]
  .loginDesktopFormPanel
  #googleLoginBtn .googleIconWrap,
  html[data-theme="dark"]
  .loginDesktopFormPanel
  #phoneLoginBtn .phoneIconWrap{
    background:#ffffff !important;
    border-color:rgba(255,255,255,.16) !important;
  }

  html[data-theme="dark"]
  .loginDesktopFormPanel
  #phoneLoginBtn .phoneIconWrap,
  html[data-theme="dark"]
  .loginDesktopFormPanel
  #phoneLoginBtn .phoneIconWrap i,
  html[data-theme="dark"]
  .loginDesktopFormPanel
  #phoneLoginBtn .phoneIconWrap .svg-inline--fa{
    color:#111111 !important;
  }
}


/* =========================================================
   FINAL V104 - HIDE LOGIN FOOTER ON MOBILE
   =========================================================
   TARGET:
   - HANYA HP <=620px.
   - Footer .siteFooter tidak ditampilkan sama sekali.
   - Mengalahkan seluruh rule mobile footer V3 / breakpoint
     lama yang sebelumnya memaksa display:grid.
   - Tidak menghapus footer dari HTML agar struktur tetap aman
     untuk breakpoint lain.
   - Navbar, sidebar, login card, tombol auth, Google Auth,
     Phone OTP, reCAPTCHA, Firebase, JS, tablet, laptop,
     desktop official footer TIDAK diubah.
   ========================================================= */

@media (max-width:620px){

  footer.siteFooter{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;

    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;

    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;

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

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

    overflow:hidden !important;
    pointer-events:none !important;
  }

  /* Tidak menyisakan ruang footer di bawah halaman login HP. */
  :root{
    --mobile-footer-h:0px !important;
  }

  main{
    padding-bottom:22px !important;
  }
}


/* =========================================================
   FINAL V105 - REMOVE MOBILE INNER LOGIN CARD LINE
   =========================================================
   TARGET:
   - HANYA HP <=620px.
   - Menghapus garis/rim KEDUA yang berada di dalam loginCard.
   - Outer loginCard tetap dipertahankan:
       * border luar
       * radius
       * raised / neumorphism shadow
       * background
   - Sumber garis kedua adalah pseudo-element ::before
     dari V103 dengan inset:9px.
   - Tidak mengubah ukuran card, padding, tombol, input,
     navbar, sidebar, footer V104, tablet/laptop/desktop,
     Firebase/Auth/OTP/reCAPTCHA, atau JavaScript.
   ========================================================= */

@media (max-width:620px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard[role="region"][aria-label="Panel autentikasi"]::before,

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard[role="region"][aria-label="Panel autentikasi"]::before{
    content:none !important;
    display:none !important;

    position:static !important;
    inset:auto !important;

    width:0 !important;
    height:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:none !important;
    background-image:none !important;

    box-shadow:none !important;
    filter:none !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}


/* =========================================================
   FINAL V106 - MOBILE SIGN UP MANUAL ONLY
   =========================================================
   TARGET:
   - HANYA HP <=620px.
   - Menyamakan perilaku tab "Daftar" HP dengan laptop V98.
   - Saat #tabSignUp aktif:
       1. Divider "ATAU LANJUTKAN DENGAN" disembunyikan.
       2. Tombol "Masuk dengan Google" disembunyikan.
       3. Tombol "Masuk dengan Nomor HP" disembunyikan.
       4. #loginStatus global ikut disembunyikan agar tidak
          menyisakan ruang/pesan metode login alternatif.
   - Form daftar manual + tombol "Buat akun" tetap tampil.
   - Saat kembali ke tab "Masuk", divider, Google, dan
     Nomor HP tampil kembali otomatis.
   - Tidak mengubah HTML, login-ui.js, login-auth.js,
     Firebase Auth, Email/Password signup, Google Auth,
     Phone OTP, reCAPTCHA, event handler, navbar, sidebar,
     footer V104, card V105, tablet, laptop, atau desktop.
   ========================================================= */

@media (max-width:620px){

  .loginDesktopFormPanel
  .loginCard:has(#tabSignUp:checked)
  > .authDivider,

  .loginDesktopFormPanel
  .loginCard:has(#tabSignUp:checked)
  > #loginStatus,

  .loginDesktopFormPanel
  .loginCard:has(#tabSignUp:checked)
  > .authContent{
    display:none !important;
  }
}
/* =========================================================
   FINAL V105 - PHONE AUTH REFERENCE CARD + RECAPTCHA NOTICE
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Mode Nomor HP mengikuti referensi:
       logo bulat di atas
       tombol close kanan atas
       judul + subtitle center
       prefix Indonesia +62
       input nomor ponsel
       tombol Lanjut
       legal copy
       disclosure "Dilindungi oleh reCAPTCHA"
   - Firebase Phone Auth, invisible reCAPTCHA, SMS OTP,
     validation, ID elemen, event listener, dan redirect
     TIDAK diubah.
   - HP/tablet <=979px mempertahankan baseline existing.
   ========================================================= */

.phoneRecaptchaNotice{
  display:none;
}

@media (min-width:980px){

  /* -------------------------------------------------------
     PHONE MODE: header autentikasi existing disembunyikan.
     Struktur DOM tetap ada untuk mode Email/Google.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  > .loginCardTop{
    display:none !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    position:relative !important;
    width:min(500px,100%) !important;
    max-width:500px !important;
    padding:30px 30px 27px !important;

    background:#ffffff !important;
    border:1px solid rgba(206,220,226,.92) !important;
    border-radius:22px !important;

    box-shadow:
      0 26px 60px rgba(30,74,84,.15),
      0 8px 20px rgba(30,74,84,.075),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    overflow:visible !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    background:#102b30 !important;
    border-color:rgba(255,255,255,.09) !important;
    box-shadow:
      0 28px 64px rgba(0,0,0,.38),
      0 8px 20px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthPanel{
    position:relative !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* -------------------------------------------------------
     CLOSE BUTTON - mengikuti referensi X kanan atas.
     Button tetap #phoneBackBtn sehingga fungsi existing aman.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn{
    position:absolute !important;
    top:-10px !important;
    right:-8px !important;
    z-index:5 !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:#617886 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:50% !important;
    box-shadow:none !important;

    font-size:0 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn i{
    display:none !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn::before{
    content:"×" !important;
    display:block !important;
    color:currentColor !important;
    font-size:27px !important;
    line-height:1 !important;
    font-weight:300 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn:hover{
    color:#17384c !important;
    background:rgba(15,159,141,.055) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn{
    color:#aac8cc !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn:hover{
    color:#eafcff !important;
  }

  /* -------------------------------------------------------
     INTRO - logo bulat + title/subtitle center.
     Existing icon mobile-screen tidak dihapus dari HTML.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntro{
    position:relative !important;

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

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

    gap:13px !important;

    text-align:center !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    position:relative !important;

    width:66px !important;
    min-width:66px !important;
    height:66px !important;

    margin:-60px auto 2px !important;

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

    background:
      linear-gradient(145deg,#ffffff 0%,#f7fbfb 100%) !important;

    border:1px solid rgba(216,228,232,.96) !important;
    border-radius:50% !important;

    box-shadow:
      0 15px 32px rgba(24,77,89,.16),
      0 5px 12px rgba(24,77,89,.08),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    overflow:hidden !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon i{
    display:none !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    content:"" !important;

    width:48px !important;
    height:48px !important;

    display:block !important;

    background:
      url("../../assets/global/logo/logo-lacak.png")
      center / contain
      no-repeat !important;

    filter:
      drop-shadow(0 3px 5px rgba(15,159,141,.13)) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    background:#ffffff !important;
    border-color:rgba(255,255,255,.78) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy{
    width:100% !important;
    max-width:330px !important;

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

    gap:7px !important;
  }

  /*
   * Copy visible mengikuti referensi, tetapi key i18n existing
   * tetap berada di DOM. :lang(en) menjaga mode English.
   */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy strong{
    color:#17384c !important;
    font-size:0 !important;
    line-height:1.18 !important;
    font-weight:800 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy strong::after{

    font-size:18px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy small{
    max-width:300px !important;

    color:#6c8190 !important;
    font-size:0 !important;
    line-height:1.45 !important;
    font-weight:500 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy small::after{

    font-size:11px !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy strong{
    color:#eafcff !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy small{
    color:#aac8cc !important;
  }

  /* -------------------------------------------------------
     FORM - clean seperti referensi.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthForm,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthStage{
    gap:13px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage .inputGroup{
    gap:0 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage .inputGroup > label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:-1px !important;
    padding:0 !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
  }

  /* Prefix Indonesia +62 dibuat sebagai bagian visual shell.
     Input DOM tetap satu field sehingga normalisasi JS existing aman. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell{
    min-height:48px !important;

    padding:3px 12px 3px 4px !important;

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

    gap:8px !important;

    background:#ffffff !important;
    border:1px solid rgba(202,216,223,.82) !important;
    border-radius:8px !important;

    box-shadow:
      0 3px 9px rgba(30,74,84,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell > i{
    display:none !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell::before{

    height:40px !important;

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

    color:#435d6b !important;
    background:#f8fafb !important;

    border:1px solid rgba(202,216,223,.72) !important;
    border-radius:7px !important;

    font-size:10.5px !important;
    line-height:1 !important;
    font-weight:650 !important;

    white-space:pre !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell input{
    min-width:0 !important;
    height:40px !important;

    padding:0 5px !important;

    color:#294052 !important;

    font-size:11px !important;
    line-height:1 !important;
    font-weight:500 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell input::placeholder{
    color:#a4b0b8 !important;
    opacity:1 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell:focus-within{
    border-color:rgba(15,159,141,.42) !important;

    box-shadow:
      0 0 0 3px rgba(15,159,141,.08),
      0 4px 12px rgba(30,74,84,.05) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell{
    background:#102b30 !important;
    border-color:rgba(255,255,255,.10) !important;
    box-shadow:
      0 3px 9px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell::before{
    color:#d6e3e6 !important;
    background:#16363c !important;
    border-color:rgba(255,255,255,.08) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell input{
    color:#eafcff !important;
  }

  /* Hints teknis disederhanakan secara visual seperti referensi.
     Informasi penting tetap hadir melalui subtitle + consent. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberHint,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSmsNotice{
    display:none !important;
  }

  /* -------------------------------------------------------
     PRIMARY PHONE BUTTON = "Lanjut".
     ID #phoneSendOtpBtn dan event reCAPTCHA existing tetap.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSendOtpBtn.phonePrimaryBtn{
    min-height:48px !important;

    grid-template-columns:28px minmax(0,1fr) 28px !important;

    color:#ffffff !important;

    background:
      linear-gradient(
        135deg,
        #0f9f8d 0%,
        #13aa9a 55%,
        #16b4a5 100%
      ) !important;

    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:8px !important;

    box-shadow:
      0 12px 24px rgba(15,159,141,.20),
      0 4px 9px rgba(14,147,130,.10),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSendOtpBtn .actionLeading{
    visibility:hidden !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSendOtpBtn > span[data-auth-i18n="phoneSendOtpBtn"]{
    font-size:0 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSendOtpBtn > span[data-auth-i18n="phoneSendOtpBtn"]::after{
    content:"Lanjut" !important;
    font-size:12px !important;
    font-weight:750 !important;
  }

  html[lang="en"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSendOtpBtn > span[data-auth-i18n="phoneSendOtpBtn"]::after{
    content:"Continue" !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSendOtpBtn .actionTrailing{
    width:auto !important;
    min-width:0 !important;
    height:auto !important;

    justify-self:start !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;

    font-size:10px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSendOtpBtn:hover{
    background:
      linear-gradient(
        135deg,
        #0e9887 0%,
        #12a696 55%,
        #16b2a2 100%
      ) !important;

    box-shadow:
      0 15px 28px rgba(15,159,141,.24),
      0 6px 12px rgba(14,147,130,.12),
      inset 0 1px 0 rgba(255,255,255,.30) !important;
  }

  /* -------------------------------------------------------
     CONSENT + RECAPTCHA
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthConsent{
    width:100% !important;
    max-width:360px !important;

    margin:2px auto 0 !important;

    color:#6c8190 !important;

    text-align:center !important;

    font-size:8.7px !important;
    line-height:1.45 !important;
    font-weight:500 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthConsent a{
    color:#0e9382 !important;
    font-weight:700 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNotice{
    width:100% !important;

    margin:-3px 0 0 !important;
    padding:0 !important;

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

    gap:5px !important;

    color:#8a9aa4 !important;

    text-align:center !important;

    font-size:8px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNotice i{
    color:#0f9f8d !important;
    font-size:9px !important;
  }

  .phoneRecaptchaNoticeEn{
    display:none !important;
  }

  html[lang="en"] .phoneRecaptchaNoticeId{
    display:none !important;
  }

  html[lang="en"] .phoneRecaptchaNoticeEn{
    display:inline !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthConsent,
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNotice{
    color:#91aeb5 !important;
  }

  /*
   * OTP stage tidak dirombak total agar state kedua tetap stabil.
   * Hanya mengikuti radius/surface card V105 saat ditampilkan.
   */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .phonePrimaryBtn{
    border-radius:8px !important;
  }
}

/* =========================================================
   FINAL V106 - RECAPTCHA PROTECTION CARD BELOW CONTINUE
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Card "Dilindungi oleh reCAPTCHA" berada tepat di bawah
     tombol Lanjut.
   - Badge floating reCAPTCHA disembunyikan secara visual.
   - Disclosure reCAPTCHA tetap terlihat di dalam card beserta
     link Privasi & Persyaratan Google.
   - Flow Firebase Phone Auth / RecaptchaVerifier tidak diubah.
   - Mobile/tablet <=979px tidak disentuh.
   ========================================================= */

@media (min-width:980px){

  /* =======================================================
     URUTAN PHONE NUMBER STAGE
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  /* Field */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage .inputGroup{
    order:1 !important;
  }

  /* Hints tetap tersembunyi */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberHint{
    order:2 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSmsNotice{
    order:3 !important;
  }

  /* Legal consent tetap sebelum tombol */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthConsent{
    order:4 !important;
    margin:1px auto 0 !important;
  }

  /* Tombol Lanjut */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSendOtpBtn.phonePrimaryBtn{
    order:5 !important;
    margin-top:3px !important;
  }

  /* =======================================================
     CARD RECAPTCHA - DI BAWAH TOMBOL LANJUT
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNotice{
    order:6 !important;

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

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

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

    gap:8px !important;

    color:#6f8791 !important;

    text-align:left !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.98) 0%,
        rgba(247,250,251,.98) 100%
      ) !important;

    border:
      1px solid rgba(103,137,147,.14) !important;

    border-radius:9px !important;

    box-shadow:
      0 7px 16px rgba(27,75,85,.055),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    font-size:8.4px !important;
    line-height:1.25 !important;
    font-weight:600 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNotice > i{
    width:26px !important;
    min-width:26px !important;
    height:26px !important;

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

    color:#0f9f8d !important;

    background:
      linear-gradient(
        145deg,
        rgba(240,253,250,1) 0%,
        rgba(229,248,245,1) 100%
      ) !important;

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

    border-radius:8px !important;

    box-shadow:
      0 4px 9px rgba(15,159,141,.07),
      inset 0 1px 0 rgba(255,255,255,.96) !important;

    font-size:11px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNoticeText{
    min-width:0 !important;

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

    gap:2px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNoticeTitle{
    display:block !important;

    color:#5c7480 !important;

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

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNoticeLinks{
    display:inline-flex !important;
    align-items:center !important;

    gap:4px !important;

    color:#9aabb2 !important;

    font-size:7.2px !important;
    line-height:1.2 !important;
    font-weight:500 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNoticeLinks a{
    color:#0e9382 !important;

    text-decoration:none !important;

    font-weight:650 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNoticeLinks a:hover{
    color:#0f9f8d !important;
    text-decoration:underline !important;
    text-underline-offset:2px !important;
  }

  /* =======================================================
     HILANGKAN BADGE FLOATING GOOGLE
     =======================================================
     Disclosure reCAPTCHA tetap tampil melalui card di atas.
     Elemen reCAPTCHA tidak dihapus dari DOM sehingga
     Firebase RecaptchaVerifier tetap bekerja.
     ======================================================= */
  body.auth-page .grecaptcha-badge{
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNotice{
    color:#9bb6bc !important;

    background:
      linear-gradient(
        145deg,
        rgba(19,53,59,.98) 0%,
        rgba(14,45,50,.98) 100%
      ) !important;

    border-color:
      rgba(255,255,255,.075) !important;

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

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNotice > i{
    color:#53ebe8 !important;

    background:
      rgba(15,159,141,.09) !important;

    border-color:
      rgba(83,235,232,.10) !important;

    box-shadow:none !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNoticeTitle{
    color:#c2d8dc !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNoticeLinks{
    color:#78959b !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNoticeLinks a{
    color:#53ebe8 !important;
  }
}

/* =========================================================
   FINAL V107 - RECAPTCHA BADGE VISUAL INSIDE CARD
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Tambahkan visual badge mirip kartu verifikasi reCAPTCHA
     di dalam card disclosure reCAPTCHA.
   - Badge floating Google tetap disembunyikan secara visual.
   - Phone Auth Firebase / RecaptchaVerifier tetap existing.
   - Mobile/tablet <=979px tidak diubah.
   ========================================================= */

@media (min-width:980px){

  /* Card disclosure dibuat sedikit lebih tegas */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNotice{
    min-height:48px !important;
    padding:8px 12px !important;
    gap:10px !important;
  }

  /* Hilangkan ikon shield lama, diganti badge visual */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNotice > i{
    display:none !important;
  }

  /* =======================================================
     BADGE VISUAL
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaBadgeVisual{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;

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

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f4f7fb 100%
      ) !important;

    border:1px solid rgba(111,140,151,.14) !important;
    border-radius:10px !important;

    box-shadow:
      0 6px 12px rgba(25,71,82,.07),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaBadgeMark{
    position:relative !important;
    width:22px !important;
    height:22px !important;
    display:block !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaBadgeRing{
    position:absolute !important;
    inset:2px !important;

    border-radius:50% !important;
    background:
      conic-gradient(
        from 210deg,
        #4285f4 0deg 138deg,
        transparent 138deg 180deg,
        #34a853 180deg 312deg,
        transparent 312deg 360deg
      ) !important;

    box-shadow:
      0 1px 2px rgba(32,73,85,.08) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaBadgeRing::before{
    content:"" !important;
    position:absolute !important;
    inset:5px !important;
    background:#ffffff !important;
    border-radius:50% !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaBadgeArrowOne,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaBadgeArrowTwo{
    position:absolute !important;
    z-index:2 !important;
    display:grid !important;
    place-items:center !important;
    line-height:1 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaBadgeArrowOne{
    top:-1px !important;
    left:-1px !important;
    color:#4285f4 !important;
    font-size:9px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaBadgeArrowTwo{
    right:-1px !important;
    bottom:-1px !important;
    color:#34a853 !important;
    font-size:9px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNoticeText{
    gap:1px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNoticeTitle{
    font-size:8.7px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaNoticeLinks{
    font-size:7.1px !important;
  }

  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneRecaptchaBadgeVisual{
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.96) 0%,
        rgba(244,247,251,.96) 100%
      ) !important;

    border-color:rgba(255,255,255,.08) !important;

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

/* =========================================================
   FINAL V108 - NATIVE GOOGLE RECAPTCHA BADGE INSIDE CARD
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - HAPUS badge reCAPTCHA buatan/custom V107.
   - Tampilkan badge ASLI Google yang dibuat oleh
     Firebase RecaptchaVerifier (.grecaptcha-badge + iframe).
   - Badge asli ditempatkan secara visual di card putih
     tepat di bawah tombol Lanjut.
   - Tidak mengubah RecaptchaVerifier, Phone Auth, SMS OTP,
     validation, callback, atau redirect.
   - HP/tablet <=979px tidak disentuh.
   ========================================================= */

@media (min-width:980px){

  /* =======================================================
     PHONE NUMBER STAGE
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage .inputGroup{
    order:1 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberHint{
    order:2 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSmsNotice{
    order:3 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthConsent{
    order:4 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSendOtpBtn.phonePrimaryBtn{
    order:5 !important;
    margin-top:3px !important;
  }

  /* =======================================================
     WRAPPER YANG DIBUAT RUNTIME OLEH GOOGLE/FIREBASE
     -------------------------------------------------------
     Pada runtime Firebase menambahkan wrapper <div> yang
     berisi .grecaptcha-badge dan iframe tersembunyi.
     :has() dipakai hanya untuk wrapper runtime tersebut.
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge){
    order:6 !important;

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

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

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

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.99) 0%,
        rgba(247,250,251,.99) 100%
      ) !important;

    border:
      1px solid rgba(103,137,147,.14) !important;

    border-radius:9px !important;

    box-shadow:
      0 7px 16px rgba(27,75,85,.055),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    overflow:visible !important;
  }

  /* Fallback jika wrapper Google berubah satu level DOM. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  div:has(> .grecaptcha-badge){
    overflow:visible !important;
  }

  /* =======================================================
     BADGE ASLI GOOGLE
     -------------------------------------------------------
     PENTING:
     - Tidak mengubah isi iframe.
     - Tidak mengganti logo.
     - Tidak menggambar ulang reCAPTCHA.
     - Hanya mengubah posisi container badge dari fixed
       menjadi relative agar seluruh badge asli terlihat
       di dalam card.
     ======================================================= */
  body.auth-page
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  .grecaptcha-badge{
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    width:256px !important;
    height:60px !important;

    margin:0 auto !important;

    display:block !important;

    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;

    transform:none !important;
    transition:none !important;

    overflow:hidden !important;

    /*
     * Biarkan karakter badge tetap menyerupai badge asli
     * Google. Shadow ringan mengikuti style runtime aslinya.
     */
    box-shadow:
      0 0 5px rgba(128,128,128,.72) !important;

    border-radius:2px !important;
  }

  /* Pastikan iframe asli Google tampil utuh. */
  body.auth-page
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  .grecaptcha-badge iframe{
    display:block !important;

    width:256px !important;
    height:60px !important;

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

    opacity:1 !important;
    visibility:visible !important;
  }

  /* =======================================================
     OVERRIDE V106/V107 YANG MENYEMBUNYIKAN BADGE
     ======================================================= */
  body.auth-page .grecaptcha-badge{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* Tidak ada lagi visual/card reCAPTCHA buatan. */
  .phoneRecaptchaNotice,
  .phoneRecaptchaBadgeVisual,
  .phoneRecaptchaBadgeMark,
  .phoneRecaptchaBadgeRing,
  .phoneRecaptchaBadgeArrowOne,
  .phoneRecaptchaBadgeArrowTwo{
    display:none !important;
  }

  /* =======================================================
     DARK MODE - OUTER HOST SAJA.
     Badge Google tetap asli dari iframe.
     ======================================================= */
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge){
    background:
      linear-gradient(
        145deg,
        rgba(19,53,59,.98) 0%,
        rgba(14,45,50,.98) 100%
      ) !important;

    border-color:
      rgba(255,255,255,.075) !important;

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

/* =========================================================
   FINAL V109 - PROFESSIONAL NATIVE RECAPTCHA CARD
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Badge ASLI Google reCAPTCHA tetap dipakai.
   - Tidak menggambar ulang logo / iframe Google.
   - Card dibuat lebih profesional dengan redaksi keamanan.
   - Firebase RecaptchaVerifier / Phone Auth / OTP tetap sama.
   - Mobile/tablet <=979px tidak diubah.
   ========================================================= */

@media (min-width:980px){

  /* =======================================================
     OUTER SECURITY CARD
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge){
    position:relative !important;

    order:6 !important;

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

    margin:4px 0 0 !important;
    padding:12px 14px 13px !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;

    align-items:center !important;
    justify-items:center !important;

    row-gap:4px !important;

    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(15,159,141,.055) 0%,
        rgba(15,159,141,0) 42%
      ),
      linear-gradient(
        145deg,
        rgba(255,255,255,.995) 0%,
        rgba(247,251,251,.995) 100%
      ) !important;

    border:
      1px solid rgba(81,125,136,.13) !important;

    border-radius:12px !important;

    box-shadow:
      0 10px 22px rgba(24,77,89,.065),
      0 3px 8px rgba(24,77,89,.030),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    overflow:visible !important;
  }

  /* Judul keamanan */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::before{

    grid-row:1 !important;

    display:block !important;

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

    color:#294f5d !important;

    text-align:center !important;

    font-size:9.6px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
  }

  /* Deskripsi keamanan */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::after{

    grid-row:2 !important;

    display:block !important;

    max-width:330px !important;

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

    color:#7b919b !important;

    text-align:center !important;

    font-size:7.8px !important;
    line-height:1.42 !important;
    font-weight:500 !important;
  }

  /* =======================================================
     NATIVE GOOGLE BADGE
     ======================================================= */
  body.auth-page
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  .grecaptcha-badge{
    grid-row:3 !important;

    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    width:256px !important;
    height:60px !important;

    margin:0 auto !important;

    display:block !important;

    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;

    transform:none !important;
    transition:none !important;

    overflow:hidden !important;

    border-radius:4px !important;

    box-shadow:
      0 7px 17px rgba(44,80,91,.14),
      0 2px 6px rgba(44,80,91,.08) !important;
  }

  body.auth-page
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  .grecaptcha-badge iframe{
    display:block !important;

    width:256px !important;
    height:60px !important;

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

    visibility:visible !important;
    opacity:1 !important;
  }

  /* =======================================================
     ENGLISH REDACTION
     ======================================================= */
  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge){
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(15,159,141,.05) 0%,
        rgba(15,159,141,0) 42%
      ),
      linear-gradient(
        145deg,
        rgba(19,53,59,.99) 0%,
        rgba(13,43,48,.99) 100%
      ) !important;

    border-color:
      rgba(255,255,255,.075) !important;

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

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::before{
    color:#dceff1 !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::after{
    color:#9ab5ba !important;
  }
}

/* =========================================================
   FINAL V110 - CONSENT BELOW BUTTON + MINI RECAPTCHA BADGE
   =========================================================
   TARGET:
   - Desktop/laptop >=980px only.
   - Pindahkan text consent ke bawah tombol Lanjut.
   - Card reCAPTCHA dibuat lebih ringkas & profesional.
   - Badge asli Google tetap dipakai, diperkecil, dan ditempatkan
     di pojok kanan bawah card.
   - Tidak mengubah Firebase Phone Auth / RecaptchaVerifier / OTP.
   - Mobile/tablet tetap aman.
   ========================================================= */

@media (min-width:980px){

  /* -----------------------------------------------
     URUTAN ELEMEN PHONE NUMBER STAGE
     ----------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage .inputGroup{
    order:1 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberHint{
    order:2 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSmsNotice{
    order:3 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneSendOtpBtn.phonePrimaryBtn{
    order:4 !important;
    margin-top:2px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthConsent{
    order:5 !important;
    width:100% !important;
    max-width:360px !important;
    margin:2px auto 2px !important;
    padding:0 2px !important;
    color:#6f8290 !important;
    text-align:center !important;
    font-size:8.8px !important;
    line-height:1.45 !important;
    font-weight:500 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthConsent a{
    color:#0e9382 !important;
    font-weight:700 !important;
    text-decoration:none !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthConsent a:hover{
    text-decoration:underline !important;
    text-underline-offset:2px !important;
  }

  /* -----------------------------------------------
     CARD RECAPTCHA RINGKAS
     ----------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge){
    order:6 !important;
    position:relative !important;
    width:100% !important;
    min-height:88px !important;
    margin:2px 0 0 !important;
    padding:13px 158px 13px 16px !important;
    display:block !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.995) 0%, rgba(248,251,252,.995) 100%) !important;
    border:1px solid rgba(96,134,145,.12) !important;
    border-radius:12px !important;
    box-shadow:
      0 9px 18px rgba(24,77,89,.055),
      0 2px 6px rgba(24,77,89,.025),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    overflow:visible !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::before{

    display:block !important;
    margin:0 0 4px !important;
    color:#274b59 !important;
    font-size:10.2px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
    text-align:left !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::after{

    display:block !important;
    max-width:190px !important;
    color:#7c909b !important;
    font-size:8px !important;
    line-height:1.45 !important;
    font-weight:500 !important;
    text-align:left !important;
  }

  /* Badge asli Google - diperkecil dan diletakkan di pojok kanan bawah */
  body.auth-page
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  .grecaptcha-badge{
    position:absolute !important;
    right:11px !important;
    bottom:10px !important;
    left:auto !important;
    top:auto !important;
    width:256px !important;
    height:60px !important;
    margin:0 !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:scale(.56) !important;
    transform-origin:right bottom !important;
    transition:none !important;
    overflow:hidden !important;
    box-shadow:0 0 5px rgba(128,128,128,.58) !important;
    border-radius:2px !important;
  }

  body.auth-page
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  .grecaptcha-badge iframe{
    display:block !important;
    width:256px !important;
    height:60px !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  /* Fallback visibility override untuk badge runtime */
  body.auth-page .grecaptcha-badge{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* Hapus sisa visual custom lama bila ada */
  .phoneRecaptchaNotice,
  .phoneRecaptchaBadgeVisual,
  .phoneRecaptchaBadgeMark,
  .phoneRecaptchaBadgeRing,
  .phoneRecaptchaBadgeArrowOne,
  .phoneRecaptchaBadgeArrowTwo{
    display:none !important;
  }

  /* English copy */
  /* Dark mode */
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthConsent{
    color:#95afb5 !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthConsent a{
    color:#53ebe8 !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge){
    background:
      linear-gradient(145deg, rgba(19,53,59,.99) 0%, rgba(13,43,48,.99) 100%) !important;
    border-color:rgba(255,255,255,.075) !important;
    box-shadow:
      0 10px 20px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::before{
    color:#dceff1 !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::after{
    color:#98b3b9 !important;
  }
}

/* =========================================================
   FINAL V111 - INLINE SIMPLE RECAPTCHA CARD
   =========================================================
   TARGET:
   - Desktop/laptop >=980px only.
   - Card reCAPTCHA dibuat sejajar / inline.
   - Badge tidak lagi berada di pojok kanan bawah.
   - Copy sisi kiri dibuat lebih singkat dan formal.
   - Firebase Phone Auth / RecaptchaVerifier / OTP tetap sama.
   - Mobile/tablet tetap aman.
   ========================================================= */

@media (min-width:980px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    column-gap:16px !important;
    row-gap:0 !important;
    min-height:72px !important;
    padding:14px 16px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::before{

    display:block !important;
    margin:0 0 3px !important;
    color:#274b59 !important;
    font-size:10px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    text-align:left !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::after{

    display:block !important;
    max-width:170px !important;
    color:#7d909a !important;
    font-size:7.9px !important;
    line-height:1.42 !important;
    font-weight:500 !important;
    text-align:left !important;
  }

  body.auth-page
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  .grecaptcha-badge{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    justify-self:end !important;
    margin:0 !important;
    transform:scale(.56) !important;
    transform-origin:center center !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::before{
    color:#dceff1 !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::after{
    color:#9ab5bb !important;
  }
}

/* =========================================================
   FINAL V112 - HORIZONTAL RECAPTCHA BADGE
   =========================================================
   TARGET:
   - Desktop/laptop >=980px only.
   - Pertahankan copy seperti versi saat ini:
     "Verifikasi keamanan aktif"
     "Sistem dilindungi Google reCAPTCHA untuk membantu mencegah penyalahgunaan otomatis."
   - Badge reCAPTCHA asli Google dibuat lebih jelas horizontal.
   - Badge ditempatkan sejajar di sisi kanan card.
   - Firebase Phone Auth / OTP / RecaptchaVerifier tidak diubah.
   - Mobile/tablet tetap aman.
   ========================================================= */

@media (min-width:980px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 172px !important;
    align-items:center !important;
    column-gap:16px !important;
    row-gap:0 !important;
    min-height:88px !important;
    padding:14px 16px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::before{

    display:block !important;
    margin:0 0 4px !important;
    color:#274b59 !important;
    font-size:10.1px !important;
    line-height:1.28 !important;
    font-weight:800 !important;
    text-align:left !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::after{

    display:block !important;
    max-width:205px !important;
    color:#7b909a !important;
    font-size:7.85px !important;
    line-height:1.42 !important;
    font-weight:500 !important;
    text-align:left !important;
  }

  body.auth-page
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  .grecaptcha-badge{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    justify-self:end !important;
    align-self:center !important;
    width:256px !important;
    height:60px !important;
    margin:0 !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:scale(.64) !important;
    transform-origin:right center !important;
    transition:none !important;
    overflow:hidden !important;
    box-shadow:0 0 5px rgba(128,128,128,.58) !important;
    border-radius:2px !important;
  }

  body.auth-page
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  .grecaptcha-badge iframe{
    display:block !important;
    width:256px !important;
    height:60px !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  /* pastikan wrapper text tetap kiri, badge kanan */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::before,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::after{
    grid-column:1 !important;
  }

  body.auth-page
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  .grecaptcha-badge{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::before{
    color:#dceff1 !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::after{
    color:#9ab5bb !important;
  }
}

/* =========================================================
   FINAL V113 - RECAPTCHA LEFT COPY ALIGNMENT
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Pertahankan seluruh layout V112.
   - Hanya merapikan copy sisi kiri card reCAPTCHA agar benar-
     benar rata kiri dan tidak terasa center.
   - Badge reCAPTCHA tetap sejajar horizontal di kanan.
   - Firebase Phone Auth / OTP / RecaptchaVerifier tidak diubah.
   - Mobile/tablet tetap aman.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge){
    grid-template-columns:minmax(0,1fr) 172px !important;
    grid-template-rows:auto auto !important;
    grid-template-areas:
      "title badge"
      "copy  badge" !important;
    align-items:center !important;
    justify-items:stretch !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::before{
    grid-area:title !important;
    width:100% !important;
    max-width:none !important;
    justify-self:start !important;
    align-self:end !important;
    margin:0 0 4px 0 !important;
    padding:0 !important;
    text-align:left !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::after{
    grid-area:copy !important;
    width:100% !important;
    max-width:210px !important;
    justify-self:start !important;
    align-self:start !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
  }

  body.auth-page
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  .grecaptcha-badge{
    grid-area:badge !important;
    justify-self:end !important;
    align-self:center !important;
  }
}

/* =========================================================
   FINAL V115 - RECAPTCHA TITLE + COPY UPDATE
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Layout V113/V114 tetap dipertahankan.
   - Judul menjadi: "Verifikasi keamanan".
   - Deskripsi menjadi:
     "reCAPTCHA membantu melindungi akses dari aktivitas otomatis.".
   - Firebase Phone Auth / OTP / RecaptchaVerifier tidak diubah.
   - Mobile/tablet tetap aman.
   ========================================================= */

@media (min-width:980px){
}


/* =========================================================
   FINAL V116 - PHONE INPUT NEUTRAL FOCUS
   =========================================================
   TARGET:
   - HANYA card Nomor HP pada desktop/laptop >=980px.
   - Saat input nomor diklik / aktif / focus, TIDAK muncul
     border atau glow hijau.
   - Surface, border, dan shadow tetap sama seperti kondisi idle.
   - Placeholder, value, prefix +62, reCAPTCHA, OTP, Firebase,
     dan fungsi autentikasi tidak diubah.
   - Mobile/tablet tetap aman.
   ========================================================= */

@media (min-width:980px){

  /* Light mode: focus dibuat identik dengan idle state. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell:focus-within{
    border-color:rgba(202,216,223,.82) !important;

    box-shadow:
      0 3px 9px rgba(30,74,84,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  /* Hilangkan outline hijau langsung pada input. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberInput:focus,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberInput:focus-visible{
    outline:none !important;
    outline-offset:0 !important;
    box-shadow:none !important;
  }

  /* Dark mode: tetap neutral, tidak berubah teal saat aktif. */
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell:focus-within{
    border-color:rgba(255,255,255,.10) !important;

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

/* =========================================================
   FINAL V117 - PHONE AUTH CARD ALIGN DOWN
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Saat mode Nomor HP aktif, seluruh card diturunkan agar
     lebih sejajar dengan blok konten hero di sebelah kanan.
   - Tidak mengubah ukuran card, field, reCAPTCHA, copy,
     Phone OTP, Firebase Auth, navbar, footer, atau mobile.
   ========================================================= */

@media (min-width:980px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    transform:
      translateY(clamp(30px,4.2vh,46px)) !important;
  }
}

/* Laptop dengan tinggi pendek: tetap turun, tetapi lebih aman
   agar bagian bawah card tidak terlalu dekat dengan viewport. */
@media (min-width:980px) and (max-height:820px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    transform:translateY(28px) !important;
  }
}

@media (min-width:980px) and (max-height:720px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    transform:translateY(20px) !important;
  }
}

/* =========================================================
   FINAL V118 - PHONE AUTH CARD DOWN +35PX
   =========================================================
   TARGET:
   - Melanjutkan posisi V117 dan menurunkan card Phone Auth
     TAMBAHAN 35px.
   - HANYA desktop/laptop >=980px.
   - Isi card, reCAPTCHA, field, OTP, Firebase Auth, navbar,
     footer, dan mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    transform:
      translateY(
        clamp(
          65px,
          calc(4.2vh + 35px),
          81px
        )
      ) !important;
  }
}

/* V117 short-laptop 28px + 35px = 63px */
@media (min-width:980px) and (max-height:820px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    transform:translateY(63px) !important;
  }
}

/* V117 very-short 20px + 35px = 55px */
@media (min-width:980px) and (max-height:720px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    transform:translateY(55px) !important;
  }
}

/* =========================================================
   FINAL V119 - PHONE CLOSE OFFSET + HEART INTRO BADGE
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Tombol close Phone Auth turun 2px dan bergeser kiri 2px.
   - Badge/logo atas Phone Auth berubah dari lingkaran menjadi
     bentuk LOVE/HEART mengikuti karakter logo di dalamnya.
   - Posisi card V118, input, consent, reCAPTCHA, OTP,
     Firebase Auth, navbar, footer, dan mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  /* -------------------------------------------------------
     CLOSE BUTTON
     Baseline V105:
       top:-10px;
       right:-8px;
     V119:
       turun 2px  -> top:-8px
       kiri 2px   -> right:-6px
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn{
    top:-8px !important;
    right:-6px !important;
  }

  /* -------------------------------------------------------
     PHONE INTRO LOGO - HEART SHAPE
     -------------------------------------------------------
     Menggunakan heart mask yang sama dengan elemen brand
     Bumil Ku sehingga bentuk badge mengikuti karakter logo.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    position:relative !important;

    width:66px !important;
    min-width:66px !important;
    max-width:66px !important;

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

    margin:-60px auto 2px !important;
    padding:0 !important;

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

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f8fbfb 48%,
        #edf6f5 100%
      ) !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    filter:
      drop-shadow(0 4px 6px rgba(24,77,89,.12))
      drop-shadow(0 12px 20px rgba(24,77,89,.14))
      drop-shadow(0 18px 28px rgba(15,159,141,.08)) !important;

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

    -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;
  }

  /* FontAwesome lama tetap tidak ditampilkan. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon i,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon .svg-inline--fa{
    display:none !important;
  }

  /* Logo di dalam heart dibuat sedikit lebih penuh,
     tetapi tetap tidak menyentuh sisi mask. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    content:"" !important;

    width:54px !important;
    height:54px !important;

    display:block !important;

    background:
      url("../../assets/global/logo/logo-lacak.png")
      center / contain
      no-repeat !important;

    transform:translateY(1px) !important;

    filter:
      drop-shadow(0 3px 5px rgba(15,159,141,.12)) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f6fbfb 100%
      ) !important;

    filter:
      drop-shadow(0 5px 8px rgba(0,0,0,.18))
      drop-shadow(0 13px 22px rgba(0,0,0,.18))
      drop-shadow(0 18px 28px rgba(15,159,141,.07)) !important;
  }
}

/* =========================================================
   FINAL V120 - HEART CARD PADDING
   =========================================================
   TARGET:
   - Desktop/laptop >=980px only.
   - Pertahankan bentuk LOVE dari V119.
   - Tambahkan ruang/padding visual di dalam heart card agar
     permukaan card putih terlihat lebih jelas mengelilingi logo.
   - Posisi tombol close, posisi card utama, OTP, reCAPTCHA,
     Firebase Auth, navbar, footer, dan mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;

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

    /* menjaga posisi visual tetap hampir sama seperti V119 */
    margin:-63px auto 2px !important;

    padding:11px !important;

    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #fbfdfd 42%,
        #eef7f6 100%
      ) !important;

    filter:
      drop-shadow(0 4px 6px rgba(24,77,89,.12))
      drop-shadow(0 12px 20px rgba(24,77,89,.15))
      drop-shadow(0 20px 30px rgba(15,159,141,.09)) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    width:46px !important;
    height:46px !important;

    transform:translateY(1px) !important;

    background:
      url("../../assets/global/logo/logo-lacak.png")
      center / contain
      no-repeat !important;

    filter:
      drop-shadow(0 3px 5px rgba(15,159,141,.11)) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fbfb 100%
      ) !important;

    filter:
      drop-shadow(0 5px 8px rgba(0,0,0,.18))
      drop-shadow(0 13px 22px rgba(0,0,0,.20))
      drop-shadow(0 20px 30px rgba(15,159,141,.08)) !important;
  }
}

/* =========================================================
   FINAL V121 - WHITE NEUMORPHISM HEART CARD
   =========================================================
   TARGET:
   - Desktop/laptop >=980px only.
   - Card love dibuat putih, clean, dan terasa timbul.
   - Nuansa neumorphism lembut dengan highlight kiri-atas
     dan shadow kanan-bawah.
   - Bentuk heart, ukuran, padding, dan logo tetap konsisten.
   - Posisi card utama, close button, reCAPTCHA, OTP,
     Firebase Auth, navbar, footer, dan mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    background:
      radial-gradient(
        circle at 32% 24%,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.98) 26%,
        rgba(248,251,252,.98) 52%,
        rgba(239,245,246,1) 100%
      ) !important;

    border:1px solid rgba(224,232,235,.96) !important;

    filter:
      drop-shadow(-3px -3px 7px rgba(255,255,255,.96))
      drop-shadow(7px 9px 16px rgba(182,194,199,.36))
      drop-shadow(14px 18px 28px rgba(179,191,196,.20))
      drop-shadow(0 2px 4px rgba(255,255,255,.88)) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    width:45px !important;
    height:45px !important;

    filter:
      drop-shadow(0 2px 4px rgba(15,159,141,.10)) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    background:
      radial-gradient(
        circle at 32% 24%,
        rgba(255,255,255,1) 0%,
        rgba(252,253,253,.99) 34%,
        rgba(244,248,248,.99) 100%
      ) !important;

    border-color:rgba(236,242,244,.92) !important;

    filter:
      drop-shadow(-2px -2px 6px rgba(255,255,255,.12))
      drop-shadow(8px 10px 18px rgba(0,0,0,.22))
      drop-shadow(14px 18px 30px rgba(0,0,0,.16))
      drop-shadow(0 1px 3px rgba(255,255,255,.10)) !important;
  }
}

/* =========================================================
   FINAL V122 - HEART CARD STRONG ELEVATION
   =========================================================
   TARGET:
   - Desktop/laptop >=980px.
   - Card love tetap putih.
   - Elevasi dibuat JELAS dengan kombinasi:
       1) inset highlight
       2) box-shadow berlapis
       3) drop-shadow luar mengikuti bentuk heart
   - Tidak mengubah posisi/card utama/auth/reCAPTCHA/mobile.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    background:#ffffff !important;

    border:1px solid rgba(214,226,230,.92) !important;

    /* depth di permukaan heart */
    box-shadow:
      inset 2px 2px 3px rgba(255,255,255,1),
      inset -2px -2px 4px rgba(173,190,196,.16),
      0 4px 8px rgba(45,85,94,.10),
      0 10px 18px rgba(45,85,94,.14) !important;

    /* shadow luar mengikuti siluet heart */
    filter:
      drop-shadow(-5px -5px 8px rgba(255,255,255,.98))
      drop-shadow(6px 7px 10px rgba(153,171,178,.30))
      drop-shadow(11px 14px 20px rgba(119,143,151,.24))
      drop-shadow(18px 22px 34px rgba(91,119,128,.16)) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    width:45px !important;
    height:45px !important;

    filter:
      drop-shadow(0 2px 3px rgba(15,159,141,.10))
      drop-shadow(0 5px 8px rgba(15,159,141,.08)) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    background:#ffffff !important;

    border-color:rgba(230,238,240,.92) !important;

    box-shadow:
      inset 2px 2px 3px rgba(255,255,255,1),
      inset -2px -2px 4px rgba(154,174,181,.15),
      0 5px 10px rgba(0,0,0,.16),
      0 12px 22px rgba(0,0,0,.20) !important;

    filter:
      drop-shadow(-3px -3px 6px rgba(255,255,255,.14))
      drop-shadow(7px 9px 13px rgba(0,0,0,.30))
      drop-shadow(13px 17px 24px rgba(0,0,0,.24)) !important;
  }
}

/* =========================================================
   FINAL V123 - SOLID WHITE HEART CARD + VISIBLE ELEVATION
   =========================================================
   FIX:
   Pada V119-V122 mask dipasang langsung pada
   .phoneAuthIntroIcon. Akibatnya permukaan putih dan shadow
   kurang terbaca karena logo ikut mendominasi siluet.

   V123:
   - Parent TIDAK lagi di-mask.
   - ::after menjadi CARD LOVE putih solid 100%.
   - ::before tetap menjadi logo Bumil Ku di atas card.
   - Shadow dibuat pada layer LOVE sehingga benar-benar terlihat.
   - HANYA desktop/laptop >=980px.
   ========================================================= */

@media (min-width:980px){

  /* -------------------------------------------------------
     OUTER WRAPPER
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    position:relative !important;

    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;

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

    margin:-65px auto 2px !important;
    padding:0 !important;

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

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    /* PENTING: mask lama dimatikan pada parent */
    -webkit-mask-image:none !important;
    mask-image:none !important;

    filter:none !important;

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

  /* -------------------------------------------------------
     SOLID WHITE LOVE CARD
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;

    display:block !important;

    width:76px !important;
    height:76px !important;

    background:#ffffff !important;

    -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;

    /*
     * Shadow dibuat sangat jelas:
     * - halo tipis agar putih terbaca di atas background putih
     * - contact shadow tepat di bawah
     * - elevation shadow kanan-bawah
     */
    filter:
      drop-shadow(0 0 1px rgba(69,103,112,.34))
      drop-shadow(0 4px 4px rgba(66,99,108,.20))
      drop-shadow(6px 9px 9px rgba(74,104,112,.24))
      drop-shadow(11px 15px 18px rgba(73,104,113,.18))
      drop-shadow(-3px -3px 5px rgba(255,255,255,1)) !important;
  }

  /* -------------------------------------------------------
     LOGO DI DALAM LOVE
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    content:"" !important;

    position:relative !important;
    z-index:2 !important;

    width:45px !important;
    height:45px !important;

    display:block !important;

    background:
      url("../../assets/global/logo/logo-lacak.png")
      center / contain
      no-repeat !important;

    transform:translateY(1px) !important;

    filter:
      drop-shadow(0 2px 3px rgba(15,159,141,.08)) !important;
  }

  /* icon FontAwesome existing tidak ditampilkan */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon i,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon .svg-inline--fa{
    display:none !important;
  }

  /* Dark mode tetap mempertahankan card LOVE putih solid */
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    background:#ffffff !important;

    filter:
      drop-shadow(0 0 1px rgba(255,255,255,.26))
      drop-shadow(0 4px 5px rgba(0,0,0,.23))
      drop-shadow(7px 10px 12px rgba(0,0,0,.30))
      drop-shadow(12px 17px 22px rgba(0,0,0,.23)) !important;
  }
}

/* =========================================================
   FINAL V124 - SOLID WHITE HEART + REAL VISIBLE DEPTH
   =========================================================
   FIX UTAMA:
   V123 masih terlalu menyatu dengan background putih karena
   card LOVE dan shadow berada pada layer yang terlalu tipis.

   V124 memakai 3 layer terpisah:
   1. ::before  = shadow LOVE nyata di belakang
   2. ::after   = card LOVE #FFFFFF solid
   3. <img>     = logo Bumil Ku di atas card

   Dengan cara ini area putih card pasti terlihat mengelilingi
   logo dan elevasinya jauh lebih tegas.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    position:relative !important;

    width:84px !important;
    min-width:84px !important;
    max-width:84px !important;

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

    margin:-69px auto 2px !important;
    padding:0 !important;

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

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    -webkit-mask-image:none !important;
    mask-image:none !important;

    filter:none !important;
    overflow:visible !important;
    isolation:isolate !important;
  }

  /* -------------------------------------------------------
     SHADOW LOVE - layer khusus di belakang
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    content:"" !important;

    position:absolute !important;
    inset:4px !important;
    z-index:0 !important;

    background:rgba(85,111,120,.34) !important;

    -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;

    transform:translate(7px,9px) scale(.98) !important;
    filter:blur(7px) !important;
    opacity:.74 !important;
  }

  /* -------------------------------------------------------
     CARD LOVE PUTIH SOLID 100%
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;

    display:block !important;

    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    -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;

    /*
     * Shadow tajam + ambient: dibuat cukup kontras agar
     * card putih terbaca jelas di atas panel putih.
     */
    filter:
      drop-shadow(0 1px 1px rgba(56,82,91,.28))
      drop-shadow(0 4px 5px rgba(56,82,91,.18))
      drop-shadow(5px 8px 8px rgba(65,91,100,.22))
      drop-shadow(10px 13px 15px rgba(65,91,100,.16))
      drop-shadow(-4px -4px 6px rgba(255,255,255,1)) !important;
  }

  /* -------------------------------------------------------
     LOGO DI ATAS CARD - dikecilkan supaya white padding nyata
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroLogo{
    position:relative !important;
    z-index:3 !important;

    width:45px !important;
    height:45px !important;
    max-width:45px !important;
    max-height:45px !important;

    display:block !important;
    object-fit:contain !important;
    object-position:center !important;

    transform:translateY(1px) !important;

    filter:
      drop-shadow(0 2px 3px rgba(15,159,141,.10)) !important;
  }

  /* jika FontAwesome lama masih ter-render dari cache */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon i,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon .svg-inline--fa{
    display:none !important;
  }

  /* Dark mode tetap memakai heart putih solid */
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    background:rgba(0,0,0,.50) !important;
    opacity:.82 !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    background:#ffffff !important;
    background-color:#ffffff !important;

    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.32))
      drop-shadow(0 5px 6px rgba(0,0,0,.26))
      drop-shadow(7px 10px 11px rgba(0,0,0,.32))
      drop-shadow(12px 16px 18px rgba(0,0,0,.24)) !important;
  }
}

/* =========================================================
   FINAL V125 - HEART CARD VISIBLE BORDER
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Bentuk LOVE tetap.
   - Tambahkan border yang BENAR-BENAR terlihat mengikuti
     siluet LOVE.
   - Tidak mengubah posisi, ukuran utama, logo, Auth,
     reCAPTCHA, OTP, navbar, footer, atau mobile.
   ========================================================= */

@media (min-width:980px){

  /* -------------------------------------------------------
     OUTER BORDER LOVE
     -------------------------------------------------------
     ::before dipakai sebagai lapisan border mengikuti
     siluet heart.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;

    display:block !important;

    background:#cbd9de !important;

    -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;

    transform:none !important;
    filter:
      drop-shadow(0 4px 7px rgba(60,91,101,.16))
      drop-shadow(5px 8px 12px rgba(60,91,101,.12)) !important;
    opacity:1 !important;
  }

  /* -------------------------------------------------------
     INNER WHITE LOVE
     -------------------------------------------------------
     Diperkecil sedikit supaya layer ::before terlihat
     sebagai border di sekeliling heart.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;

    display:block !important;

    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    -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;

    transform:scale(.94) !important;
    transform-origin:center !important;

    filter:none !important;
  }

  /* Logo tetap berada paling atas */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroLogo{
    z-index:3 !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    background:#9fb4bb !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    background:#ffffff !important;
  }
}

/* =========================================================
   FINAL V126 - CLEAN HEART CARD
   =========================================================
   FIX:
   - Menghilangkan efek double-heart / bayangan abu yang
     terlihat bergeser di belakang logo pada V125.
   - Card LOVE tetap putih solid.
   - Border/elevasi dibuat melalui drop-shadow yang mengikuti
     siluet LOVE, tanpa layer heart kedua yang terlihat.
   - Logo dipusatkan ulang.
   - HANYA desktop/laptop >=980px.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    position:relative !important;

    width:80px !important;
    min-width:80px !important;
    max-width:80px !important;

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

    margin:-67px auto 2px !important;
    padding:0 !important;

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

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    -webkit-mask-image:none !important;
    mask-image:none !important;

    filter:none !important;
    overflow:visible !important;
    isolation:isolate !important;
  }

  /* HAPUS layer border lama yang menyebabkan double-heart */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    content:none !important;
    display:none !important;
  }

  /* -------------------------------------------------------
     LOVE CARD PUTIH SOLID
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;

    display:block !important;

    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    -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;

    transform:none !important;
    transform-origin:center !important;

    /* outline halus + elevasi tanpa double-heart */
    filter:
      drop-shadow(0 0 1px rgba(93,124,133,.58))
      drop-shadow(0 3px 4px rgba(55,88,98,.14))
      drop-shadow(0 8px 12px rgba(55,88,98,.16))
      drop-shadow(7px 10px 18px rgba(55,88,98,.11))
      drop-shadow(-3px -3px 5px rgba(255,255,255,1)) !important;
  }

  /* -------------------------------------------------------
     LOGO CENTER
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroLogo{
    position:relative !important;
    z-index:3 !important;

    width:44px !important;
    height:44px !important;
    max-width:44px !important;
    max-height:44px !important;

    display:block !important;
    object-fit:contain !important;
    object-position:center !important;

    margin:0 !important;
    transform:translate3d(0,1px,0) !important;

    filter:
      drop-shadow(0 2px 3px rgba(15,159,141,.08)) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon i,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon .svg-inline--fa{
    display:none !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    background:#ffffff !important;

    filter:
      drop-shadow(0 0 1px rgba(255,255,255,.34))
      drop-shadow(0 4px 5px rgba(0,0,0,.22))
      drop-shadow(0 9px 14px rgba(0,0,0,.26))
      drop-shadow(7px 11px 18px rgba(0,0,0,.19)) !important;
  }
}

/* =========================================================
   FINAL V127 - HEART WRAPPER WITH GRAY BORDER
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - <img class="phoneAuthIntroLogo"> benar-benar dibungkus
     oleh card LOVE putih.
   - Card LOVE memiliki border abu-abu yang mengikuti siluet.
   - Tidak membuat double-heart bergeser.
   - Logo tetap berada tepat di tengah.
   - Auth / OTP / reCAPTCHA / mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    position:relative !important;

    width:80px !important;
    min-width:80px !important;
    max-width:80px !important;

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

    margin:-67px auto 2px !important;
    padding:0 !important;

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

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    -webkit-mask-image:none !important;
    mask-image:none !important;

    filter:none !important;
    overflow:visible !important;
    isolation:isolate !important;
  }

  /* -------------------------------------------------------
     OUTER LOVE = BORDER ABU-ABU
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;

    display:block !important;

    background:#c8d2d6 !important;

    -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;

    transform:none !important;
    filter:
      drop-shadow(0 4px 7px rgba(55,86,95,.13))
      drop-shadow(0 9px 14px rgba(55,86,95,.10)) !important;
    opacity:1 !important;
  }

  /* -------------------------------------------------------
     INNER LOVE = CARD PUTIH SOLID
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    content:"" !important;

    position:absolute !important;
    inset:2px !important;
    z-index:1 !important;

    display:block !important;

    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    -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;

    transform:none !important;
    filter:none !important;
  }

  /* -------------------------------------------------------
     LOGO DI DALAM WRAPPER LOVE
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroLogo{
    position:relative !important;
    z-index:3 !important;

    width:44px !important;
    height:44px !important;
    max-width:44px !important;
    max-height:44px !important;

    display:block !important;
    object-fit:contain !important;
    object-position:center !important;

    margin:0 !important;
    transform:translate3d(0,1px,0) !important;

    filter:
      drop-shadow(0 2px 3px rgba(15,159,141,.08)) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    background:#9eafb5 !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    background:#ffffff !important;
  }
}

/* =========================================================
   FINAL V128 - HEART CARD THIN GRAY OUTLINE
   =========================================================
   FIX:
   - Tidak memakai layer heart abu-abu terpisah.
   - Tidak ada double-heart / bentuk bergeser.
   - Hanya SATU card LOVE putih solid.
   - Ditambahkan garis outline abu-abu tipis tepat mengikuti
     siluet LOVE.
   - Shadow timbul tetap sangat ringan.
   - Desktop/laptop >=980px only.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    position:relative !important;

    width:80px !important;
    min-width:80px !important;
    max-width:80px !important;

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

    margin:-67px auto 2px !important;
    padding:0 !important;

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

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    -webkit-mask-image:none !important;
    mask-image:none !important;

    filter:none !important;
    overflow:visible !important;
    isolation:isolate !important;
  }

  /* Hapus seluruh layer heart kedua dari V127 */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    content:none !important;
    display:none !important;
  }

  /* -------------------------------------------------------
     SATU-SATUNYA CARD LOVE
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;

    display:block !important;

    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    -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;

    transform:none !important;

    /*
     * Zero-offset drop-shadow berfungsi sebagai OUTLINE LINE,
     * bukan sebagai card kedua.
     * Dua layer tipis memberi garis abu-abu yang terbaca.
     * Layer terakhir hanya memberi elevasi ringan.
     */
    filter:
      drop-shadow(0 0 .65px rgba(112,132,139,.95))
      drop-shadow(0 0 .65px rgba(112,132,139,.78))
      drop-shadow(0 3px 5px rgba(61,88,97,.12))
      drop-shadow(0 7px 10px rgba(61,88,97,.08)) !important;
  }

  /* Logo tetap center di atas LOVE putih */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroLogo{
    position:relative !important;
    z-index:3 !important;

    width:44px !important;
    height:44px !important;
    max-width:44px !important;
    max-height:44px !important;

    margin:0 !important;
    display:block !important;
    object-fit:contain !important;
    object-position:center !important;

    transform:translate3d(0,1px,0) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    background:#ffffff !important;

    filter:
      drop-shadow(0 0 .65px rgba(130,151,158,.95))
      drop-shadow(0 0 .65px rgba(130,151,158,.78))
      drop-shadow(0 4px 6px rgba(0,0,0,.20))
      drop-shadow(0 8px 12px rgba(0,0,0,.16)) !important;
  }
}

/* =========================================================
   FINAL V129 - LOGO WRAPPED BY HEART CARD
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Logo existing dibungkus card berbentuk LOVE yang jelas.
   - Card LOVE dibuat dengan SVG fill putih + border abu-abu.
   - Tidak ada double-heart atau layer meleset.
   - Logo tetap center.
   - Auth / OTP / reCAPTCHA / mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    position:relative !important;

    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;

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

    margin:-68px auto 2px !important;
    padding:0 !important;

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

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    -webkit-mask-image:none !important;
    mask-image:none !important;

    filter:none !important;
    overflow:visible !important;
    isolation:isolate !important;
  }

  /* Hapus rule heart lama */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    content:none !important;
    display:none !important;
  }

  /* -------------------------------------------------------
     CARD LOVE PEMBUNGKUS
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;

    display:block !important;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 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' fill='%23ffffff' stroke='%23c8d2d6' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / contain no-repeat !important;

    filter:
      drop-shadow(0 1px 1px rgba(91,120,129,.20))
      drop-shadow(0 4px 6px rgba(91,120,129,.14))
      drop-shadow(0 9px 12px rgba(91,120,129,.10)) !important;
  }

  /* -------------------------------------------------------
     LOGO DI DALAM CARD LOVE
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroLogo{
    position:relative !important;
    z-index:3 !important;

    width:44px !important;
    height:44px !important;
    max-width:44px !important;
    max-height:44px !important;

    margin:0 !important;
    display:block !important;
    object-fit:contain !important;
    object-position:center !important;

    transform:translate3d(0,1px,0) !important;
    filter:drop-shadow(0 2px 3px rgba(15,159,141,.08)) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon i,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon .svg-inline--fa{
    display:none !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 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' fill='%23ffffff' stroke='%23b7c5ca' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / contain no-repeat !important;

    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.18))
      drop-shadow(0 5px 7px rgba(0,0,0,.18))
      drop-shadow(0 10px 14px rgba(0,0,0,.14)) !important;
  }
}

/* =========================================================
   FINAL V130 - PHONE AUTH HEART CARD MATCH REFERENCE
   =========================================================
   Implementasi berdasarkan gambar referensi yang dipilih:
   - Card LOVE putih solid.
   - Border abu-abu tipis langsung pada kontur LOVE.
   - Soft elevation/neumorphism.
   - Logo berada di tengah dengan white space yang jelas.
   - Tidak ada pseudo heart / double-heart.
   - HANYA desktop/laptop >=980px.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon{
    position:relative !important;

    width:88px !important;
    min-width:88px !important;
    max-width:88px !important;

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

    margin:-71px auto 4px !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;
    filter:none !important;

    overflow:visible !important;
    isolation:isolate !important;

    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  /* Matikan seluruh eksperimen pseudo-heart lama. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::before,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon::after{
    content:none !important;
    display:none !important;
  }

  /* =======================================================
     CARD LOVE NYATA
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroHeartCard{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;

    width:88px !important;
    height:88px !important;

    display:block !important;
    overflow:visible !important;

    fill:#ffffff !important;
    stroke:#d7e0e3 !important;
    stroke-width:2.2 !important;
    stroke-linejoin:round !important;

    filter:
      drop-shadow(0 1px 1px rgba(55,82,91,.14))
      drop-shadow(0 5px 8px rgba(55,82,91,.13))
      drop-shadow(0 12px 18px rgba(55,82,91,.10))
      drop-shadow(-3px -3px 5px rgba(255,255,255,.98)) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroHeartCard path{
    fill:#ffffff !important;
    stroke:#d7e0e3 !important;
    stroke-width:2.2 !important;
    stroke-linejoin:round !important;
    vector-effect:non-scaling-stroke !important;
  }

  /* =======================================================
     LOGO DI DALAM CARD LOVE
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroLogo{
    position:relative !important;
    z-index:3 !important;

    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;

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

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

    display:block !important;

    object-fit:contain !important;
    object-position:center !important;

    transform:translate3d(0,-1px,0) !important;

    filter:
      drop-shadow(0 2px 4px rgba(15,159,141,.09)) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon i,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroIcon .svg-inline--fa{
    display:none !important;
  }

  /* Dark mode tetap menggunakan card LOVE putih. */
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroHeartCard{
    fill:#ffffff !important;
    stroke:#cbd7db !important;

    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.18))
      drop-shadow(0 6px 10px rgba(0,0,0,.22))
      drop-shadow(0 13px 20px rgba(0,0,0,.16)) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroHeartCard path{
    fill:#ffffff !important;
    stroke:#cbd7db !important;
  }
}

/* =========================================================
   FINAL V133 - PHONE AUTH HEART SHADOW SMOOTH
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Bentuk LOVE, border, ukuran, posisi, dan logo V132 tetap.
   - Shadow dibuat lebih smooth, diffuse, dan ringan.
   - Menghilangkan karakter shadow yang terasa keras/bertumpuk.
   - Phone Auth, OTP, reCAPTCHA, Firebase Auth, navbar,
     footer, dan mobile/tablet tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroHeartCard{
    /*
     * Dua lapisan lembut:
     * 1. contact shadow tipis dekat card
     * 2. ambient shadow luas dengan opacity rendah
     */
    filter:
      drop-shadow(0 3px 6px rgba(55,82,91,.095))
      drop-shadow(0 10px 22px rgba(55,82,91,.075)) !important;
  }

  /* Logo hanya diberi depth sangat halus agar tidak bersaing
     dengan shadow card LOVE. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroLogo{
    filter:
      drop-shadow(0 2px 4px rgba(15,159,141,.060)) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroHeartCard{
    filter:
      drop-shadow(0 4px 8px rgba(0,0,0,.155))
      drop-shadow(0 12px 24px rgba(0,0,0,.125)) !important;
  }
}

/* =========================================================
   FINAL V134 - PHONE AUTH LOVE CARD SMOOTH SHADOW
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Bentuk LOVE V132/V133 tetap dipertahankan.
   - Fill putih, border abu-abu, ukuran, posisi, dan logo tetap.
   - Shadow dibuat lebih smooth, lembut, diffuse, dan natural.
   - Tidak ada shadow keras / bertumpuk / terlalu gelap.
   - Phone Auth, OTP, reCAPTCHA, Firebase Auth, navbar,
     footer, dan tampilan mobile/tablet tidak diubah.
   ========================================================= */

@media (min-width:980px){

  /* -------------------------------------------------------
     CARD LOVE
     -------------------------------------------------------
     Tiga layer shadow tanpa offset horizontal besar:
     1. contact shadow sangat tipis
     2. mid shadow lembut
     3. ambient shadow lebar dengan opacity rendah
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroHeartCard{
    fill:#ffffff !important;
    stroke:#d7e0e3 !important;

    filter:
      drop-shadow(0 2px 5px rgba(45,72,82,.085))
      drop-shadow(0 9px 20px rgba(45,72,82,.070))
      drop-shadow(0 18px 34px rgba(45,72,82,.045)) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroHeartCard path{
    fill:#ffffff !important;
    stroke:#d7e0e3 !important;
  }

  /* -------------------------------------------------------
     LOGO
     -------------------------------------------------------
     Depth logo dibuat sangat ringan supaya fokus shadow
     tetap berada pada card LOVE pembungkus.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroLogo{
    filter:
      drop-shadow(0 2px 4px rgba(15,159,141,.055)) !important;
  }

  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroHeartCard{
    fill:#ffffff !important;
    stroke:#cbd7db !important;

    filter:
      drop-shadow(0 2px 5px rgba(0,0,0,.13))
      drop-shadow(0 10px 21px rgba(0,0,0,.12))
      drop-shadow(0 19px 36px rgba(0,0,0,.075)) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroHeartCard path{
    fill:#ffffff !important;
    stroke:#cbd7db !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroLogo{
    filter:
      drop-shadow(0 2px 4px rgba(0,0,0,.08)) !important;
  }
}

/* =========================================================
   FINAL V135 - PHONE COUNTRY PREFIX WITH INDONESIA FLAG
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px pada mode Phone Auth.
   - Prefix nomor menjadi elemen HTML nyata:
       [Bendera Indonesia] ID +62 v
   - Bendera dibuat 100% HTML + CSS, tanpa image asset.
   - Pseudo-element lama "🇮🇩 +62 ⌄" dimatikan.
   - #phoneNumberInput tetap satu input yang sama sehingga
     normalisasi Firebase Phone Auth / OTP tidak berubah.
   - reCAPTCHA, OTP, validation, navbar, footer, dan mobile
     tidak diubah.
   ========================================================= */

@media (min-width:980px){

  /* -------------------------------------------------------
     GRID PHONE INPUT
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell{
    grid-template-columns:
      104px
      minmax(0,1fr) !important;

    column-gap:8px !important;
  }

  /* Pseudo prefix lama V105 tidak dipakai lagi. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell::before{
    content:none !important;
    display:none !important;
  }

  /* -------------------------------------------------------
     COUNTRY PREFIX SURFACE
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryPrefix{
    height:40px !important;
    min-width:0 !important;

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

    gap:5px !important;

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

    color:#435d6b !important;
    background:#f8fafb !important;

    border:
      1px solid rgba(202,216,223,.72) !important;

    border-radius:7px !important;

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

    line-height:1 !important;
    white-space:nowrap !important;

    user-select:none !important;
    -webkit-user-select:none !important;
  }

  /* -------------------------------------------------------
     INDONESIA FLAG - PURE HTML/CSS
     Merah atas, putih bawah.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryFlag{
    position:relative !important;

    width:18px !important;
    min-width:18px !important;
    height:12px !important;
    min-height:12px !important;

    display:block !important;
    flex:0 0 18px !important;

    overflow:hidden !important;

    background:
      linear-gradient(
        to bottom,
        #e70011 0%,
        #e70011 50%,
        #ffffff 50%,
        #ffffff 100%
      ) !important;

    border:
      1px solid rgba(56,78,88,.14) !important;

    border-radius:2px !important;

    box-shadow:
      0 1px 2px rgba(43,67,77,.10) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryId{
    color:#58717e !important;

    font-size:8px !important;
    line-height:1 !important;
    font-weight:800 !important;

    letter-spacing:.035em !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryCode{
    color:#354f5d !important;

    font-size:10.5px !important;
    line-height:1 !important;
    font-weight:650 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryChevron{
    width:8px !important;
    min-width:8px !important;
    height:12px !important;

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

    color:#708792 !important;

    font-size:6.5px !important;
    line-height:1 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryChevron i,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryChevron .svg-inline--fa{
    display:block !important;

    width:auto !important;

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

    color:currentColor !important;

    font-size:inherit !important;
    line-height:1 !important;
  }

  /* -------------------------------------------------------
     INPUT TETAP MENGISI SISA RUANG
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell input{
    grid-column:2 !important;
    min-width:0 !important;
  }

  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryPrefix{
    color:#d6e3e6 !important;
    background:#16363c !important;

    border-color:
      rgba(255,255,255,.08) !important;

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

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryFlag{
    border-color:
      rgba(255,255,255,.16) !important;

    box-shadow:
      0 1px 2px rgba(0,0,0,.16) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryId{
    color:#a9c0c5 !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryCode{
    color:#eafcff !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryChevron{
    color:#aac8cc !important;
  }
}

/* =========================================================
   FINAL V136 - REFINED INDONESIA FLAG ICON
   =========================================================
   TARGET:
   - Memperhalus icon bendera Indonesia pada prefix ID +62.
   - Proporsi dibuat lebih natural dan premium.
   - Split merah/putih dibuat crisp, bukan gradient blur.
   - Border tipis membantu bagian putih tetap terbaca.
   - Shadow sangat halus agar icon terasa rapi, bukan flat.
   - Struktur prefix, input, Firebase Phone Auth, OTP,
     reCAPTCHA, navbar, footer, dan mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryFlag{
    position:relative !important;

    width:20px !important;
    min-width:20px !important;
    max-width:20px !important;

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

    flex:0 0 20px !important;

    display:block !important;

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

    background:#ffffff !important;
    background-image:none !important;

    border:1px solid rgba(72,94,103,.17) !important;
    border-radius:2.5px !important;

    box-shadow:
      0 1px 2px rgba(43,67,77,.11),
      inset 0 1px 0 rgba(255,255,255,.52) !important;

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

    transform:translateY(.15px) !important;
  }

  /* Merah Indonesia */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryFlag::before{
    content:"" !important;

    position:absolute !important;
    z-index:1 !important;

    top:0 !important;
    right:0 !important;
    left:0 !important;

    height:50% !important;

    display:block !important;

    background:#e70011 !important;
  }

  /* Putih Indonesia */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryFlag::after{
    content:"" !important;

    position:absolute !important;
    z-index:1 !important;

    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    height:50% !important;

    display:block !important;

    background:#ffffff !important;
  }

  /* Sedikit rapikan spacing prefix */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryPrefix{
    gap:5.5px !important;
    padding-left:9px !important;
    padding-right:8px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryId{
    margin-left:1px !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryFlag{
    border-color:rgba(255,255,255,.15) !important;

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

/* =========================================================
   FINAL V137 - PHONE PREFIX CLEAN: FLAG +62
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px pada mode Phone Auth.
   - Hilangkan text "ID".
   - Hilangkan icon chevron.
   - Prefix final menjadi:
       [Bendera Indonesia] +62
   - Lebar prefix dirapikan agar tidak terlalu kosong.
   - Bendera V136 tetap dipertahankan.
   - Firebase Phone Auth, OTP, reCAPTCHA, input, navbar,
     footer, dan mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell{
    grid-template-columns:
      72px
      minmax(0,1fr) !important;

    column-gap:8px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryPrefix{
    gap:7px !important;

    padding-left:9px !important;
    padding-right:9px !important;

    justify-content:center !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryCode{
    margin:0 !important;

    color:#354f5d !important;

    font-size:11px !important;
    line-height:1 !important;
    font-weight:650 !important;

    letter-spacing:0 !important;
  }

  /* Safety lock: jika HTML lama masih tercache, elemen ini tetap hilang. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryId,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryChevron{
    display:none !important;
    visibility:hidden !important;

    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;

    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;

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

    overflow:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryCode{
    color:#eafcff !important;
  }
}

/* =========================================================
   FINAL V138 - PHONE AUTH CARD SIZE PARITY WITH LOGIN CARD
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Card mode Nomor HP mengikuti lebar responsive card login
     normal agar pergantian Email/Google -> Phone OTP tidak
     terasa mengecil pada laptop/desktop.
   - Baseline card login existing V102:
       desktop umum  : 540px
       compact laptop: 472px
       large desktop : 558px
   - Scale, posisi, shadow, bentuk LOVE, input +62, reCAPTCHA,
     OTP, Firebase Auth, navbar, footer, dan mobile tidak diubah.
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP / LAPTOP UMUM
   --------------------------------------------------------- */
@media (min-width:1181px) and (max-width:1439px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:min(540px,100%) !important;
    max-width:540px !important;
  }
}

/* ---------------------------------------------------------
   COMPACT LAPTOP
   Samakan dengan card login normal pada breakpoint yang sama.
   --------------------------------------------------------- */
@media (min-width:980px) and (max-width:1180px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:min(472px,100%) !important;
    max-width:472px !important;
  }
}

/* ---------------------------------------------------------
   LARGE DESKTOP / LAPTOP RESOLUSI TINGGI
   Samakan dengan baseline normal V102 >=1440px.
   --------------------------------------------------------- */
@media (min-width:1440px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:min(558px,100%) !important;
    max-width:558px !important;
  }
}

/* =========================================================
   FINAL V139 - PHONE AUTH CARD +20PX WIDTH
   =========================================================
   TARGET:
   - Menambah lebar card Phone Auth sebesar 20px dari V138.
   - HANYA laptop / desktop >=980px.
   - Tidak mengubah tinggi, scale, posisi, padding internal,
     LOVE card, prefix bendera +62, reCAPTCHA, OTP,
     Firebase Auth, navbar, footer, atau mobile.
   ========================================================= */

/* Compact laptop: 472px -> 492px */
@media (min-width:980px) and (max-width:1180px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:min(492px,100%) !important;
    max-width:492px !important;
  }
}

/* Desktop/laptop umum: 540px -> 560px */
@media (min-width:1181px) and (max-width:1439px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:min(560px,100%) !important;
    max-width:560px !important;
  }
}

/* Large desktop: 558px -> 578px */
@media (min-width:1440px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:min(578px,100%) !important;
    max-width:578px !important;
  }
}

/* =========================================================
   FINAL V140 - PHONE AUTH REAL WIDTH (NO PARENT CAP)
   =========================================================
   FIX UTAMA:
   V138/V139 memakai:
       width:min(...,100%)
   sehingga saat lebar content-area .loginDesktopFormPanel
   lebih kecil dari target, card Phone Auth tetap berhenti
   di 100% parent dan penambahan lebar hampir tidak terlihat.

   V140:
   - Menghapus pembatas 100% KHUSUS card Phone Auth.
   - Memakai lebar riil/fixed pada laptop/desktop.
   - Parent diizinkan overflow visible.
   - Card tetap center.
   - Scale existing V40/V102 tetap dipertahankan.
   - Mobile/tablet <980px tidak disentuh.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel{
    overflow:visible !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    box-sizing:border-box !important;
    flex:0 0 auto !important;

    margin-left:auto !important;
    margin-right:auto !important;

    transform-origin:top center !important;
  }
}

/* ---------------------------------------------------------
   COMPACT LAPTOP
   V139 target = 492px, sekarang benar-benar 492px.
   --------------------------------------------------------- */
@media (min-width:980px) and (max-width:1180px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:492px !important;
    min-width:492px !important;
    max-width:492px !important;
  }
}

/* ---------------------------------------------------------
   DESKTOP / LAPTOP UMUM
   V139 target = 560px, sekarang tidak lagi dicap 100% parent.
   --------------------------------------------------------- */
@media (min-width:1181px) and (max-width:1439px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:560px !important;
    min-width:560px !important;
    max-width:560px !important;
  }
}

/* ---------------------------------------------------------
   LARGE DESKTOP
   --------------------------------------------------------- */
@media (min-width:1440px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:578px !important;
    min-width:578px !important;
    max-width:578px !important;
  }
}

/* ---------------------------------------------------------
   SHORT LAPTOP SAFETY
   Lebar tetap nyata, tetapi scale existing tidak diubah.
   --------------------------------------------------------- */
@media (min-width:980px) and (max-height:720px){

  .heroLeft.loginDesktopFormPanel{
    overflow:visible !important;
  }
}

/* =========================================================
   FINAL V141 - PHONE AUTH CARD MINUS 20PX
   =========================================================
   TARGET:
   - Berdasarkan V140 yang sudah berhasil.
   - Mengurangi lebar card Phone Auth tepat 20px.
   - Tetap memakai FIXED REAL WIDTH agar tidak kembali
     terbatasi oleh 100% parent.
   - HANYA laptop / desktop >=980px.
   - Tinggi, posisi, scale, padding internal, LOVE card,
     prefix bendera +62, reCAPTCHA, OTP, Firebase Auth,
     navbar, footer, dan mobile tidak diubah.
   ========================================================= */

/* Compact laptop: 492px -> 472px */
@media (min-width:980px) and (max-width:1180px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:472px !important;
    min-width:472px !important;
    max-width:472px !important;
  }
}

/* Desktop/laptop umum: 560px -> 540px */
@media (min-width:1181px) and (max-width:1439px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:540px !important;
    min-width:540px !important;
    max-width:540px !important;
  }
}

/* Large desktop: 578px -> 558px */
@media (min-width:1440px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:558px !important;
    min-width:558px !important;
    max-width:558px !important;
  }
}

/* =========================================================
   FINAL V142 - PHONE AUTH CARD MINUS 30PX
   =========================================================
   TARGET:
   - Berdasarkan V141 yang sudah stabil.
   - Mengurangi lebar card Phone Auth tepat 30px lagi.
   - Tetap memakai FIXED REAL WIDTH dari V140/V141.
   - HANYA laptop / desktop >=980px.
   - Tinggi, posisi, scale, padding internal, LOVE card,
     prefix bendera +62, reCAPTCHA, OTP, Firebase Auth,
     navbar, footer, dan mobile tidak diubah.
   ========================================================= */

/* Compact laptop: 472px -> 442px */
@media (min-width:980px) and (max-width:1180px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:442px !important;
    min-width:442px !important;
    max-width:442px !important;
  }
}

/* Desktop/laptop umum: 540px -> 510px */
@media (min-width:1181px) and (max-width:1439px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:510px !important;
    min-width:510px !important;
    max-width:510px !important;
  }
}

/* Large desktop: 558px -> 528px */
@media (min-width:1440px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:528px !important;
    min-width:528px !important;
    max-width:528px !important;
  }
}

/* =========================================================
   FINAL V143 - PHONE AUTH CARD MINUS 30PX AGAIN
   =========================================================
   TARGET:
   - Berdasarkan V142 yang sudah stabil.
   - Mengurangi lebar card Phone Auth tepat 30px lagi.
   - Tetap memakai FIXED REAL WIDTH.
   - HANYA laptop / desktop >=980px.
   - Tinggi, posisi, scale, padding internal, LOVE card,
     prefix bendera +62, reCAPTCHA, OTP, Firebase Auth,
     navbar, footer, dan mobile tidak diubah.
   ========================================================= */

/* Compact laptop: 442px -> 412px */
@media (min-width:980px) and (max-width:1180px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:412px !important;
    min-width:412px !important;
    max-width:412px !important;
  }
}

/* Desktop/laptop umum: 510px -> 480px */
@media (min-width:1181px) and (max-width:1439px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:480px !important;
    min-width:480px !important;
    max-width:480px !important;
  }
}

/* Large desktop: 528px -> 498px */
@media (min-width:1440px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    width:498px !important;
    min-width:498px !important;
    max-width:498px !important;
  }
}

/* =========================================================
   FINAL V144 - PHONE AUTH CARD SHIFT RIGHT 20PX
   =========================================================
   TARGET:
   - Berdasarkan V143 yang sudah stabil.
   - Geser seluruh card Phone Auth ke kanan tepat 20px.
   - Lebar card V143 tetap:
       980-1180px  : 412px
       1181-1439px : 480px
       >=1440px    : 498px
   - HANYA laptop / desktop >=980px.
   - Tidak mengubah tinggi, scale, padding, LOVE card,
     prefix bendera +62, reCAPTCHA, OTP, Firebase Auth,
     navbar, footer, dan mobile/tablet.
   ========================================================= */

@media (min-width:980px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    position:relative !important;
    left:20px !important;
  }
}

/* =========================================================
   FINAL V145 - PHONE AUTH CARD SHIFT RIGHT +30PX
   =========================================================
   TARGET:
   - Berdasarkan V144.
   - V144 sudah bergeser 20px ke kanan.
   - Tambah geser 30px lagi ke kanan.
   - Posisi akhir dari center awal = 50px ke kanan.
   - Lebar card V143/V144 tetap:
       980-1180px  : 412px
       1181-1439px : 480px
       >=1440px    : 498px
   - HANYA laptop / desktop >=980px.
   - Tidak mengubah tinggi, scale, padding, LOVE card,
     prefix bendera +62, reCAPTCHA, OTP, Firebase Auth,
     navbar, footer, dan mobile/tablet.
   ========================================================= */

@media (min-width:980px){
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode{
    position:relative !important;
    left:50px !important;
  }
}

/* =========================================================
   FINAL V146 - PHONE INPUT CONTENT LARGER
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Memperbesar isi phoneInputShell tanpa mengubah flow auth:
       1. Bendera Indonesia
       2. Text +62
       3. Text input / placeholder
   - Placeholder HTML:
       "Masukan nomor ponsel"
   - Struktur #phoneNumberInput tetap sama.
   - Firebase Phone Auth, OTP, normalisasi nomor, reCAPTCHA,
     card width/position V143-V145, navbar, footer, dan mobile
     tidak diubah.
   ========================================================= */

@media (min-width:980px){

  /* -------------------------------------------------------
     Kolom prefix diperlebar sedikit agar ukuran baru lega.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneInputShell{
    grid-template-columns:
      86px
      minmax(0,1fr) !important;

    column-gap:10px !important;
  }

  /* -------------------------------------------------------
     PREFIX [FLAG] +62
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryPrefix{
    gap:8px !important;

    padding-left:10px !important;
    padding-right:10px !important;

    justify-content:center !important;
  }

  /* -------------------------------------------------------
     BENDERA INDONESIA
     V136: 20x14 -> V146: 24x16
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryFlag{
    width:24px !important;
    min-width:24px !important;
    max-width:24px !important;

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

    flex:0 0 24px !important;

    border-radius:2px !important;

    transform:translateY(0) !important;
  }

  /* -------------------------------------------------------
     KODE NEGARA +62
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneCountryCode{
    margin:0 !important;

    font-size:13.5px !important;
    line-height:1 !important;
    font-weight:700 !important;

    letter-spacing:-.01em !important;
  }

  /* -------------------------------------------------------
     INPUT + PLACEHOLDER
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberInput{
    min-width:0 !important;

    font-size:14px !important;
    line-height:1.25 !important;
    font-weight:500 !important;

    letter-spacing:0 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberInput::placeholder{
    color:#82949f !important;

    font-size:14px !important;
    line-height:1.25 !important;
    font-weight:500 !important;

    opacity:.92 !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberInput::placeholder{
    color:#aac8cc !important;
    opacity:.84 !important;
  }
}

/* =========================================================
   FINAL V148 - PROFESSIONAL RECAPTCHA SECURITY COPY
   =========================================================
   TARGET:
   - HANYA mengganti copy pada card keamanan reCAPTCHA.
   - Layout, ukuran, badge Google reCAPTCHA asli, posisi,
     Phone Auth, OTP, RecaptchaVerifier, Firebase Auth,
     navbar, footer, dan mobile tidak diubah.
   - Bahasa Indonesia:
       Perlindungan Keamanan
       reCAPTCHA membantu melindungi akun dan layanan dari
       akses otomatis yang tidak sah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::before{
    content:"Perlindungan Keamanan" !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::after{
    content:"reCAPTCHA membantu melindungi akun dan layanan dari akses otomatis yang tidak sah." !important;
  }

  html[lang="en"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::before{
    content:"Security Protection" !important;
  }

  html[lang="en"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge)::after{
    content:"reCAPTCHA helps protect accounts and services from unauthorized automated access." !important;
  }
}

/* =========================================================
   FINAL V149 - LOVE CARD ULTRA-SMOOTH LIGHT SHADOW
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Bentuk LOVE, ukuran, posisi, fill putih, border, dan logo
     tetap persis seperti baseline sebelumnya.
   - Shadow dibuat lebih tipis, lebih diffuse, dan lebih halus.
   - Mengurangi kesan shadow gelap / tebal di bawah LOVE card.
   - Phone Auth, OTP, reCAPTCHA, Firebase Auth, input nomor,
     posisi/lebar card, navbar, footer, dan mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroHeartCard{
    filter:
      drop-shadow(0 2px 5px rgba(45,72,82,.052))
      drop-shadow(0 8px 18px rgba(45,72,82,.038))
      drop-shadow(0 16px 30px rgba(45,72,82,.024)) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroHeartCard{
    filter:
      drop-shadow(0 2px 5px rgba(0,0,0,.090))
      drop-shadow(0 8px 18px rgba(0,0,0,.066))
      drop-shadow(0 16px 30px rgba(0,0,0,.038)) !important;
  }
}

/* =========================================================
   FINAL V150 - PHONE HEADER COPY + CLOSE POSITION
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Tombol Kembali/close Phone Auth turun tepat 3px.
   - Judul "Masukan Nomor Ponsel" diperbesar sedikit.
   - Subtitle menjadi:
       Masukan nomor ponsel untuk masuk ke Bumil ku atau
       membuat akun baru.
   - Frasa "Masukan nomor ponsel" dibuat bold.
   - LOVE card V149, input, +62, reCAPTCHA, OTP, Firebase,
     ukuran/posisi card, navbar, footer, dan mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  /* -------------------------------------------------------
     CLOSE / BACK BUTTON
     Baseline akhir: top:-8px
     V150: turun 3px -> top:-5px
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn{
    top:-5px !important;
  }

  /* -------------------------------------------------------
     TITLE
     Baseline visual sebelumnya 18px.
     Dibuat sedikit lebih besar menjadi 20px.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy strong::after{
    content:"Masukan Nomor Ponsel" !important;
    font-size:20px !important;
    line-height:1.16 !important;
  }

  html[lang="en"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy strong::after{
    content:"Enter Mobile Number" !important;
  }

  /* -------------------------------------------------------
     SUBTITLE
     Dipecah menjadi ::before + ::after supaya bagian pertama
     bisa bold tanpa mengubah struktur / auth / JavaScript.
     ------------------------------------------------------- */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy small{
    max-width:330px !important;
    line-height:1.45 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy small::before{
    content:"Masukan nomor ponsel" !important;

    font-size:11px !important;
    line-height:1.45 !important;
    font-weight:750 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy small::after{
    content:" untuk masuk ke Bumil ku atau membuat akun baru." !important;

    font-size:11px !important;
    line-height:1.45 !important;
    font-weight:500 !important;
  }

  html[lang="en"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy small::before{
    content:"Enter your mobile number" !important;
  }

  html[lang="en"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneAuthIntroCopy small::after{
    content:" to sign in to Bumil Ku or create a new account." !important;
  }
}

/* =========================================================
   FINAL V151 - RECAPTCHA SECURITY CARD BOTTOM SPACE 15PX
   =========================================================
   TARGET:
   - HANYA desktop/laptop >=980px.
   - Menambahkan breathing space 15px DI BAWAH card keamanan
     reCAPTCHA agar tidak terlalu mepet ke batas bawah
     login card pembungkus.
   - Posisi atas reCAPTCHA tetap sama seperti baseline.
   - Badge Google reCAPTCHA asli, iframe, RecaptchaVerifier,
     Firebase Phone Auth, OTP, copy keamanan, card LOVE,
     input nomor, dan mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge){
    margin:
      2px
      0
      15px !important;
  }
}

/* =========================================================
   FINAL V152 - RECAPTCHA BOTTOM SPACE REDUCED 5PX
   =========================================================
   TARGET:
   - Berdasarkan V151.
   - Jarak bawah card keamanan reCAPTCHA dikurangi 5px.
   - V151: 15px
   - V152: 10px
   - HANYA desktop/laptop >=980px.
   - Bagian lain tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneNumberStage
  > div:has(> .grecaptcha-badge){
    margin:
      2px
      0
      10px !important;
  }
}

/* =========================================================
   FINAL V153 - REFERENCE TEXT AUDIT / LEGACY COPY CLEANUP
   =========================================================
   ACUAN VISUAL PHONE AUTH DESKTOP:
   - Masukan Nomor Ponsel
   - Masukan nomor ponsel untuk masuk ke Bumil ku atau membuat akun baru.
   - Masukan nomor ponsel
   - Lanjut
   - Dengan melanjutkan, Anda menyetujui Syarat & Ketentuan dan Kebijakan Privasi.
   - Perlindungan Keamanan
   - reCAPTCHA membantu melindungi akun dan layanan dari akses otomatis yang tidak sah.

   AUDIT:
   - Copy CSS lama yang sudah kalah cascade sebelum V148 dibersihkan.
   - Teks HTML berikut TIDAK dihapus karena masih punya fungsi:
     * "Kembali"            -> accessible/mobile back action.
     * "Nomor HP"           -> label aksesibilitas input.
     * phoneNumberHint       -> masih dipakai pada baseline mobile.
     * phoneSmsNotice        -> masih dipakai pada baseline mobile.
     * "Kirim OTP"          -> baseline mobile/i18n; desktop tetap tampil "Lanjut".
     * Seluruh copy OTP      -> dibutuhkan pada stage verifikasi.
   - Firebase Auth, RecaptchaVerifier, OTP, event listener, dan mobile tidak diubah.
   ========================================================= */

/* =========================================================
   FINAL V154 - CSS EMPTY RULESET CLEANUP
   =========================================================
   FIX:
   - Menghapus 12 empty CSS rulesets sisa cleanup V153.
   - Empty rulesets tersebut memicu warning VS Code pada
     selector Phone Auth / html[lang="en"].
   - Tidak ada property visual aktif yang dihapus.
   - Copy aktif V148/V150, V149 shadow, V152 spacing,
     Phone Auth, reCAPTCHA, OTP, dan mobile tetap sama.
   ========================================================= */

/* =========================================================
   FINAL V155 - PHONE OTP SMS CONFIRMATION MODAL
   =========================================================
   TUJUAN:
   - Menampilkan konfirmasi SEBELUM OTP dikirim.
   - Memberi informasi bahwa OTP dikirim melalui:
     SMS (Short Message Service).
   - Meminta user memastikan nomor ponsel aktif dan dapat
     menerima SMS.
   - Modal mengikuti visual Bumil Ku:
     white clean card, teal accent, shadow lembut,
     light/dark mode, responsive.
   - Firebase Phone Auth / RecaptchaVerifier tetap asli.
   ========================================================= */

.phoneOtpConfirmModal[hidden]{
  display:none !important;
}

.phoneOtpConfirmModal{
  position:fixed;
  inset:0;
  z-index:5000;

  padding:
    max(24px,env(safe-area-inset-top))
    max(20px,env(safe-area-inset-right))
    max(24px,env(safe-area-inset-bottom))
    max(20px,env(safe-area-inset-left));

  display:grid;
  place-items:center;

  background:rgba(20,45,53,.28);

  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .18s ease,
    visibility .18s ease;
}

.phoneOtpConfirmModal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

body.phone-otp-confirm-open{
  overflow:hidden !important;
}

.phoneOtpConfirmCard{
  position:relative;

  width:min(440px,calc(100vw - 40px));
  max-height:min(680px,calc(100dvh - 48px));

  padding:28px 28px 25px;

  color:#17384c;

  background:
    radial-gradient(
      circle at 94% 5%,
      rgba(15,159,141,.080),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfefe 100%
    );

  border:1px solid rgba(58,105,119,.13);
  border-radius:26px;

  box-shadow:
    0 4px 10px rgba(16,70,80,.075),
    0 18px 42px rgba(16,70,80,.13),
    0 38px 76px rgba(16,70,80,.10),
    inset 0 1px 0 rgba(255,255,255,1);

  overflow:auto;
  overscroll-behavior:contain;

  transform:translateY(10px) scale(.985);
  opacity:0;

  transition:
    transform .20s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease;
}

.phoneOtpConfirmModal.is-open .phoneOtpConfirmCard{
  transform:translateY(0) scale(1);
  opacity:1;
}

.phoneOtpConfirmCard::before{
  content:"";
  position:absolute;
  top:0;
  right:28px;
  left:28px;

  height:2px;

  border-radius:0 0 999px 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(15,159,141,.28),
      rgba(196,214,60,.32),
      transparent
    );

  pointer-events:none;
}

.phoneOtpConfirmCloseBtn{
  appearance:none;
  -webkit-appearance:none;

  position:absolute;
  top:16px;
  right:16px;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  margin:0;
  padding:0;

  color:#718690;
  background:#ffffff;

  border:1px solid rgba(58,105,119,.11);
  border-radius:11px;

  box-shadow:
    0 6px 14px rgba(16,70,80,.07),
    inset 0 1px 0 rgba(255,255,255,1);

  cursor:pointer;

  transition:
    color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

.phoneOtpConfirmCloseBtn:hover{
  color:#0f9f8d;
  transform:translateY(-1px);
}

.phoneOtpConfirmCloseBtn:active{
  transform:translateY(0) scale(.97);
}

.phoneOtpConfirmHeader{
  min-width:0;

  padding-right:40px;

  display:flex;
  align-items:center;

  gap:14px;
}

.phoneOtpConfirmIcon{
  width:54px;
  min-width:54px;
  height:54px;

  display:grid;
  place-items:center;

  color:#ffffff;

  background:
    radial-gradient(
      circle at 25% 15%,
      rgba(255,255,255,.30),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #0f9f8d,
      #0e9382
    );

  border:1px solid rgba(255,255,255,.46);
  border-radius:17px;

  box-shadow:
    0 10px 20px rgba(15,159,141,.18),
    inset 0 1px 0 rgba(255,255,255,.32);

  font-size:20px;
}

.phoneOtpConfirmHeading{
  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.phoneOtpConfirmKicker{
  margin:0 0 5px;

  color:#0e9382;

  font-size:9px;
  line-height:1;
  font-weight:800;

  letter-spacing:.105em;
}

.phoneOtpConfirmHeading h3{
  margin:0;

  color:#17384c;

  font-size:20px;
  line-height:1.18;
  font-weight:800;

  letter-spacing:-.025em;
}

.phoneOtpConfirmDescription{
  margin:20px 0 0;

  color:#65788a;

  font-size:12.5px;
  line-height:1.62;
  font-weight:500;
}

.phoneOtpConfirmDescription strong{
  color:#365d6c;
  font-weight:800;
}

.phoneOtpConfirmNumber{
  width:100%;

  margin-top:17px;
  padding:12px 13px;

  display:grid;
  grid-template-columns:
    30px minmax(0,1fr) 28px;

  align-items:center;

  gap:11px;

  background:#f7fbfb;

  border:1px solid rgba(58,105,119,.10);
  border-radius:15px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 7px 18px rgba(16,70,80,.045);
}

.phoneOtpConfirmFlag{
  position:relative;

  width:26px;
  height:18px;

  display:block;

  background:#ffffff;

  border:1px solid rgba(72,94,103,.15);
  border-radius:3px;

  box-shadow:
    0 2px 5px rgba(43,67,77,.10),
    inset 0 1px 0 rgba(255,255,255,.65);

  overflow:hidden;
}

.phoneOtpConfirmFlag::before{
  content:"";

  position:absolute;
  top:0;
  right:0;
  left:0;

  height:50%;

  background:#e70011;
}

.phoneOtpConfirmFlag::after{
  content:"";

  position:absolute;
  right:0;
  bottom:0;
  left:0;

  height:50%;

  background:#ffffff;
}

.phoneOtpConfirmNumberCopy{
  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  gap:3px;
}

.phoneOtpConfirmNumberCopy small{
  color:#82949f;

  font-size:8.5px;
  line-height:1;
  font-weight:650;
}

.phoneOtpConfirmNumberCopy strong{
  color:#294052;

  font-size:14px;
  line-height:1.1;
  font-weight:800;

  letter-spacing:.01em;
}

.phoneOtpConfirmNumberStatus{
  width:26px;
  height:26px;

  display:grid;
  place-items:center;

  justify-self:end;

  color:#0f9f8d;

  background:rgba(15,159,141,.08);

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

  font-size:11px;
}

.phoneOtpConfirmNotice{
  width:100%;

  margin-top:13px;
  padding:12px 13px;

  display:grid;
  grid-template-columns:
    34px minmax(0,1fr);

  align-items:start;

  gap:11px;

  background:
    linear-gradient(
      145deg,
      rgba(15,159,141,.065),
      rgba(196,214,60,.038)
    );

  border:1px solid rgba(15,159,141,.105);
  border-radius:15px;
}

.phoneOtpConfirmNoticeIcon{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  color:#0f9f8d;

  background:#ffffff;

  border:1px solid rgba(15,159,141,.11);
  border-radius:10px;

  box-shadow:
    0 5px 12px rgba(15,159,141,.075),
    inset 0 1px 0 rgba(255,255,255,1);

  font-size:13px;
}

.phoneOtpConfirmNoticeCopy{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:4px;
}

.phoneOtpConfirmNoticeCopy strong{
  color:#294052;

  font-size:11px;
  line-height:1.3;
  font-weight:800;
}

.phoneOtpConfirmNoticeCopy > span{
  color:#65788a;

  font-size:10px;
  line-height:1.45;
  font-weight:500;
}

.phoneOtpConfirmActions{
  width:100%;

  margin-top:20px;

  display:grid;
  grid-template-columns:minmax(0,1fr);

  gap:0;
}

.phoneOtpConfirmButton{
  appearance:none;
  -webkit-appearance:none;

  min-width:0;
  min-height:46px;

  margin:0;
  padding:0 15px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  border-radius:14px;

  font-size:11px;
  line-height:1;
  font-weight:750;

  cursor:pointer;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.phoneOtpConfirmButton--primary{
  color:#ffffff;

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(255,255,255,.17) 0%,
      rgba(255,255,255,.06) 30%,
      rgba(255,255,255,0) 54%
    ),
    linear-gradient(
      135deg,
      #0f9f8d 0%,
      #0f9f8d 54%,
      #0e9382 100%
    );

  border:1px solid rgba(255,255,255,.18);

  box-shadow:
    0 11px 22px rgba(15,159,141,.20),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.phoneOtpConfirmButton--primary:hover{
  transform:translateY(-1px);

  box-shadow:
    0 14px 26px rgba(15,159,141,.23),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.phoneOtpConfirmButton:active{
  transform:translateY(0) scale(.985);
}

.phoneOtpConfirmCloseBtn:focus-visible,
.phoneOtpConfirmButton:focus-visible{
  outline:3px solid rgba(15,159,141,.22);
  outline-offset:3px;
}

/* =========================================================
   DARK MODE
   ========================================================= */
html[data-theme="dark"] .phoneOtpConfirmModal{
  background:rgba(0,0,0,.48);
}

html[data-theme="dark"] .phoneOtpConfirmCard{
  color:#eafcff;

  background:
    radial-gradient(
      circle at 94% 5%,
      rgba(15,159,141,.055),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #102b30 0%,
      #0b2227 100%
    );

  border-color:rgba(255,255,255,.08);

  box-shadow:
    0 5px 13px rgba(0,0,0,.24),
    0 20px 46px rgba(0,0,0,.32),
    0 42px 82px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);
}

html[data-theme="dark"] .phoneOtpConfirmCloseBtn,
html[data-theme="dark"] .phoneOtpConfirmNumber,
html[data-theme="dark"] .phoneOtpConfirmNoticeIcon{
  background:#163a40;
  border-color:rgba(255,255,255,.08);
  box-shadow:
    0 7px 16px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.035);
}

html[data-theme="dark"] .phoneOtpConfirmHeading h3,
html[data-theme="dark"] .phoneOtpConfirmDescription strong,
html[data-theme="dark"] .phoneOtpConfirmNumberCopy strong,
html[data-theme="dark"] .phoneOtpConfirmNoticeCopy strong{
  color:#eafcff;
}

html[data-theme="dark"] .phoneOtpConfirmDescription,
html[data-theme="dark"] .phoneOtpConfirmNoticeCopy > span{
  color:#aac8cc;
}

html[data-theme="dark"] .phoneOtpConfirmNumberCopy small{
  color:#8eaaaf;
}

html[data-theme="dark"] .phoneOtpConfirmNotice{
  background:
    linear-gradient(
      145deg,
      rgba(15,159,141,.070),
      rgba(196,214,60,.025)
    );

  border-color:rgba(83,235,232,.08);
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:620px){

  .phoneOtpConfirmModal{
    padding:
      max(18px,env(safe-area-inset-top))
      max(14px,env(safe-area-inset-right))
      max(18px,env(safe-area-inset-bottom))
      max(14px,env(safe-area-inset-left));
  }

  .phoneOtpConfirmCard{
    width:min(420px,calc(100vw - 28px));

    padding:24px 20px 21px;

    border-radius:22px;
  }

  .phoneOtpConfirmCloseBtn{
    top:13px;
    right:13px;

    width:32px;
    height:32px;
  }

  .phoneOtpConfirmHeader{
    padding-right:34px;
    gap:11px;
  }

  .phoneOtpConfirmIcon{
    width:48px;
    min-width:48px;
    height:48px;

    border-radius:15px;

    font-size:18px;
  }

  .phoneOtpConfirmHeading h3{
    font-size:18px;
  }

  .phoneOtpConfirmDescription{
    margin-top:17px;
    font-size:12px;
  }

  .phoneOtpConfirmActions{
    margin-top:17px;
  }
}

@media (prefers-reduced-motion:reduce){

  .phoneOtpConfirmModal,
  .phoneOtpConfirmCard{
    transition-duration:.001ms !important;
  }
}

/* =========================================================
   FINAL V156 - OTP CONFIRMATION SINGLE PRIMARY ACTION
   =========================================================
   - Tombol "Periksa Kembali" dihapus.
   - Tombol X kanan atas menjadi aksi kembali utama.
   - Tombol "Kirim OTP" dibuat full width.
   - Flow Firebase / reCAPTCHA tidak diubah.
   ========================================================= */

.phoneOtpConfirmActions{
  grid-template-columns:minmax(0,1fr) !important;
  gap:0 !important;
}

.phoneOtpConfirmButton--primary{
  width:100% !important;
}

/* =========================================================
   FINAL V157 - OTP VERIFICATION CARD PARITY
   =========================================================
   TARGET:
   - HANYA laptop / desktop >=980px.
   - Stage Verifikasi OTP memakai card Phone Auth yang SAMA.
   - LOVE card, ukuran outer card, posisi, shadow, dan tombol
     close/back tetap menggunakan baseline Phone Auth existing.
   - Saat #phoneOtpStage aktif:
       * Judul berubah menjadi "Verifikasi Kode OTP".
       * Subtitle menjelaskan kode 6 digit via SMS.
       * Card nomor tujuan dibuat clean/professional.
       * Input OTP mengikuti visual field nomor HP.
       * Tombol Verifikasi mengikuti tombol Lanjut.
       * Restart tetap tersedia sebagai secondary text action.
   - TIDAK mengubah:
       Firebase Auth, RecaptchaVerifier, signInWithPhoneNumber,
       confirmationResult.confirm(), ID input/button, login-auth.js,
       login.js, navbar, footer, popup konfirmasi, dan mobile.
   ========================================================= */

@media (min-width:980px){

  /* =======================================================
     HEADER PHONE AUTH BERUBAH COPY SAAT OTP STAGE AKTIF
     LOVE CARD TETAP PERSIS SAMA.
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneAuthPanel:has(#phoneOtpStage:not([hidden]))
  .phoneAuthIntroCopy strong::after{
    content:"Verifikasi Kode OTP" !important;
    font-size:20px !important;
    line-height:1.16 !important;
    font-weight:800 !important;
  }

  html[lang="en"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneAuthPanel:has(#phoneOtpStage:not([hidden]))
  .phoneAuthIntroCopy strong::after{
    content:"Verify OTP Code" !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneAuthPanel:has(#phoneOtpStage:not([hidden]))
  .phoneAuthIntroCopy small{
    max-width:340px !important;
    line-height:1.45 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneAuthPanel:has(#phoneOtpStage:not([hidden]))
  .phoneAuthIntroCopy small::before{
    content:"Masukan 6 digit kode OTP" !important;
    font-size:11px !important;
    line-height:1.45 !important;
    font-weight:750 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneAuthPanel:has(#phoneOtpStage:not([hidden]))
  .phoneAuthIntroCopy small::after{
    content:" yang telah dikirim melalui SMS ke nomor ponsel Anda." !important;
    font-size:11px !important;
    line-height:1.45 !important;
    font-weight:500 !important;
  }

  html[lang="en"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneAuthPanel:has(#phoneOtpStage:not([hidden]))
  .phoneAuthIntroCopy small::before{
    content:"Enter the 6-digit OTP code" !important;
  }

  html[lang="en"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneAuthPanel:has(#phoneOtpStage:not([hidden]))
  .phoneAuthIntroCopy small::after{
    content:" sent by SMS to your mobile number." !important;
  }

  /* =======================================================
     OTP STAGE
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:13px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage[hidden]{
    display:none !important;
  }

  /* =======================================================
     CARD NOMOR TUJUAN
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .phoneOtpDestination{
    position:relative !important;
    width:100% !important;
    min-height:58px !important;
    margin:0 !important;
    padding:9px 11px !important;

    display:grid !important;
    grid-template-columns:40px minmax(0,1fr) 26px !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    column-gap:10px !important;
    row-gap:2px !important;

    color:#6c8190 !important;
    background:linear-gradient(145deg,#ffffff 0%,#fbfdfd 100%) !important;
    border:1px solid rgba(202,216,223,.82) !important;
    border-radius:10px !important;

    box-shadow:
      0 5px 14px rgba(30,74,84,.048),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .phoneOtpDestination::before{
    content:"OTP" !important;

    grid-column:1 !important;
    grid-row:1 / span 2 !important;

    width:38px !important;
    height:38px !important;

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

    color:#0e9382 !important;
    background:linear-gradient(145deg,#ffffff 0%,#f1faf8 100%) !important;
    border:1px solid rgba(15,159,141,.13) !important;
    border-radius:10px !important;

    box-shadow:
      0 5px 12px rgba(15,159,141,.065),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    font-size:8px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.05em !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .phoneOtpDestination::after{
    content:"✓" !important;

    grid-column:3 !important;
    grid-row:1 / span 2 !important;

    width:24px !important;
    height:24px !important;

    display:grid !important;
    place-items:center !important;
    justify-self:end !important;

    color:#0f9f8d !important;
    background:rgba(15,159,141,.075) !important;
    border:1px solid rgba(15,159,141,.11) !important;
    border-radius:50% !important;

    font-size:10px !important;
    line-height:1 !important;
    font-weight:800 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .phoneOtpDestination
  > span[data-auth-i18n="phoneOtpSentPrefix"]{
    grid-column:2 !important;
    grid-row:1 !important;
    display:block !important;

    color:#82949f !important;
    font-size:8.5px !important;
    line-height:1.1 !important;
    font-weight:650 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .phoneOtpDestination
  > #phoneOtpDestinationText{
    grid-column:2 !important;
    grid-row:2 !important;
    display:block !important;

    margin:0 !important;

    color:#294052 !important;
    font-size:13.5px !important;
    line-height:1.12 !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
  }

  /* =======================================================
     OTP INPUT = VISUAL PARITY DENGAN PHONE INPUT
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .inputGroup{
    gap:0 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .inputGroup > label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:-1px !important;
    padding:0 !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneOtpInputShell{
    min-height:48px !important;
    padding:3px 12px 3px 4px !important;

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

    background:#ffffff !important;
    border:1px solid rgba(202,216,223,.82) !important;
    border-radius:8px !important;

    box-shadow:
      0 3px 9px rgba(30,74,84,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneOtpInputShell > i{
    width:40px !important;
    height:40px !important;

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

    color:#0f9f8d !important;
    background:#f8fafb !important;
    border:1px solid rgba(202,216,223,.72) !important;
    border-radius:7px !important;

    font-size:12px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpInput{
    min-width:0 !important;
    height:40px !important;
    margin:0 !important;
    padding:0 7px !important;

    color:#294052 !important;
    text-align:center !important;

    font-size:14px !important;
    line-height:1 !important;
    font-weight:750 !important;
    letter-spacing:.24em !important;
    font-variant-numeric:tabular-nums !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpInput::placeholder{
    color:#9aa9b2 !important;
    font-size:12px !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    opacity:.92 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneOtpInputShell:focus-within{
    border-color:rgba(15,159,141,.42) !important;

    box-shadow:
      0 0 0 3px rgba(15,159,141,.08),
      0 4px 12px rgba(30,74,84,.05) !important;
  }

  /* =======================================================
     VERIFY BUTTON = KARAKTER TOMBOL LANJUT
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneVerifyOtpBtn.phonePrimaryBtn{
    min-height:48px !important;
    margin:0 !important;

    grid-template-columns:28px minmax(0,1fr) 28px !important;

    color:#ffffff !important;
    background:
      linear-gradient(
        135deg,
        #0f9f8d 0%,
        #13aa9a 55%,
        #16b4a5 100%
      ) !important;

    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:8px !important;

    box-shadow:
      0 12px 24px rgba(15,159,141,.20),
      0 4px 9px rgba(14,147,130,.10),
      inset 0 1px 0 rgba(255,255,255,.28) !important;

    font-size:12px !important;
    line-height:1 !important;
    font-weight:750 !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneVerifyOtpBtn .actionLeading{
    justify-self:center !important;
    color:#ffffff !important;
    font-size:12px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneVerifyOtpBtn .actionTrailing{
    width:auto !important;
    min-width:0 !important;
    height:auto !important;

    justify-self:start !important;

    color:#ffffff !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;

    font-size:10px !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneVerifyOtpBtn:hover{
    background:
      linear-gradient(
        135deg,
        #0e9887 0%,
        #12a696 55%,
        #16b2a2 100%
      ) !important;

    box-shadow:
      0 15px 28px rgba(15,159,141,.24),
      0 6px 12px rgba(14,147,130,.12),
      inset 0 1px 0 rgba(255,255,255,.30) !important;

    transform:translateY(-1px) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneVerifyOtpBtn:active{
    transform:translateY(0) !important;
  }

  /* =======================================================
     SECONDARY ACTION
     ======================================================= */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneRestartBtn{
    align-self:center !important;

    margin:-1px 0 0 !important;
    padding:4px 8px !important;

    color:#0e9382 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:8px !important;
    box-shadow:none !important;

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

    text-decoration:none !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneRestartBtn:hover{
    color:#0b7f76 !important;
    background:rgba(15,159,141,.055) !important;
    text-decoration:none !important;
  }

  /* =======================================================
     DARK MODE
     ======================================================= */
  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .phoneOtpDestination{
    color:#aac8cc !important;
    background:linear-gradient(145deg,#102b30 0%,#0e292e 100%) !important;
    border-color:rgba(255,255,255,.09) !important;

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

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .phoneOtpDestination::before{
    color:#73e6dd !important;
    background:#163a40 !important;
    border-color:rgba(83,235,232,.10) !important;

    box-shadow:
      0 5px 12px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .phoneOtpDestination::after{
    color:#73e6dd !important;
    background:rgba(83,235,232,.055) !important;
    border-color:rgba(83,235,232,.10) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .phoneOtpDestination
  > span[data-auth-i18n="phoneOtpSentPrefix"]{
    color:#8eaaaf !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpStage .phoneOtpDestination
  > #phoneOtpDestinationText{
    color:#eafcff !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneOtpInputShell{
    background:#102b30 !important;
    border-color:rgba(255,255,255,.10) !important;

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

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneOtpInputShell > i{
    color:#73e6dd !important;
    background:#16363c !important;
    border-color:rgba(255,255,255,.08) !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpInput{
    color:#eafcff !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneOtpInput::placeholder{
    color:#8fa8ad !important;
  }

  html[data-theme="dark"]
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  #phoneRestartBtn{
    color:#73e6dd !important;
  }
}

/* =========================================================
   FINAL V158 - HIDE PHONE AUTH MESSAGE CARD
   =========================================================
   TUJUAN:
   - Menghilangkan card/notifikasi teks di bagian bawah
     Phone Auth, termasuk:
       * "Nomor HP wajib diisi"
       * "Terjadi kesalahan saat proses autentikasi"
       * warning / success / error lain yang masuk ke
         #phoneAuthMessage
   - HANYA tampilan #phoneAuthMessage yang disembunyikan.
   - Validasi input tetap berjalan.
   - State field .is-error / .is-success tetap berjalan.
   - Firebase Phone Auth, reCAPTCHA, OTP, audit log, redirect,
     login-auth.js, login.js, HTML, navbar, footer, mobile,
     dan desktop tidak diubah.
   ========================================================= */

#phoneAuthMessage,
#phoneAuthMessage.authMessage,
#phoneAuthMessage.phoneAuthMessage,
#phoneAuthMessage:not(:empty){
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;

  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;

  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;

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

  border:0 !important;
  border-width:0 !important;
  border-radius:0 !important;

  background:transparent !important;
  box-shadow:none !important;

  overflow:hidden !important;
  pointer-events:none !important;
}

/* =========================================================
   FINAL V159 - OTP STATUS PROFESSIONAL POPUP
   =========================================================
   TARGET:
   - #phoneAuthMessage tetap tidak tampil sebagai card bawah.
   - Status penting OTP ditampilkan melalui #phoneOtpStatusModal.
   - Popup memakai fondasi visual .phoneOtpConfirm* existing:
     clean white surface, teal accent, soft shadow, blur backdrop,
     dark mode, dan responsive.
   - Tidak mengubah Firebase Auth / reCAPTCHA / OTP mechanism.
   ========================================================= */

/* Safety lock: message card Phone Auth tidak boleh muncul kembali. */
#phoneAuthMessage,
#phoneAuthMessage.authMessage,
#phoneAuthMessage.phoneAuthMessage,
#phoneAuthMessage:not(:empty){
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;

  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;

  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;

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

  border:0 !important;
  border-width:0 !important;
  border-radius:0 !important;

  background:transparent !important;
  box-shadow:none !important;

  overflow:hidden !important;
  pointer-events:none !important;
}

/* Popup status berada di atas popup konfirmasi bila ada transisi cepat. */
.phoneOtpStatusModal{
  z-index:5100 !important;
}

body.phone-otp-status-open{
  overflow:hidden !important;
}

.phoneOtpStatusCard{
  width:min(440px,calc(100vw - 40px)) !important;
}

.phoneOtpStatusDescription{
  margin-bottom:16px !important;
}

.phoneOtpStatusNumber[hidden]{
  display:none !important;
}

.phoneOtpStatusNotice{
  margin-top:0 !important;
}

/* =========================================================
   SUCCESS
   ========================================================= */
.phoneOtpStatusModal[data-variant="success"]
.phoneOtpStatusIcon{
  color:#ffffff !important;

  background:
    linear-gradient(
      145deg,
      #0f9f8d 0%,
      #0e9382 100%
    ) !important;

  border-color:
    rgba(255,255,255,.18) !important;

  box-shadow:
    0 10px 22px rgba(15,159,141,.20),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

.phoneOtpStatusModal[data-variant="success"]
.phoneOtpStatusNotice{
  background:
    linear-gradient(
      145deg,
      rgba(15,159,141,.065),
      rgba(196,214,60,.030)
    ) !important;

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

.phoneOtpStatusModal[data-variant="success"]
.phoneOtpStatusNoticeIcon{
  color:#0f9f8d !important;
}

/* =========================================================
   WARNING
   ========================================================= */
.phoneOtpStatusModal[data-variant="warning"]
.phoneOtpStatusIcon{
  color:#ffffff !important;

  background:
    linear-gradient(
      145deg,
      #d29a37 0%,
      #b98125 100%
    ) !important;

  border-color:
    rgba(255,255,255,.18) !important;

  box-shadow:
    0 10px 22px rgba(185,129,37,.18),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.phoneOtpStatusModal[data-variant="warning"]
.phoneOtpStatusNotice{
  background:
    linear-gradient(
      145deg,
      rgba(210,154,55,.075),
      rgba(255,255,255,.40)
    ) !important;

  border-color:
    rgba(185,129,37,.13) !important;
}

.phoneOtpStatusModal[data-variant="warning"]
.phoneOtpStatusNoticeIcon{
  color:#b98125 !important;
}

/* =========================================================
   ERROR
   ========================================================= */
.phoneOtpStatusModal[data-variant="error"]
.phoneOtpStatusIcon{
  color:#ffffff !important;

  background:
    linear-gradient(
      145deg,
      #dc6657 0%,
      #c54f43 100%
    ) !important;

  border-color:
    rgba(255,255,255,.18) !important;

  box-shadow:
    0 10px 22px rgba(197,79,67,.17),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.phoneOtpStatusModal[data-variant="error"]
.phoneOtpStatusNotice{
  background:
    linear-gradient(
      145deg,
      rgba(220,102,87,.065),
      rgba(255,255,255,.42)
    ) !important;

  border-color:
    rgba(197,79,67,.12) !important;
}

.phoneOtpStatusModal[data-variant="error"]
.phoneOtpStatusNoticeIcon{
  color:#c54f43 !important;
}

/* Tombol popup status tetap memakai primary teal Bumil Ku. */
.phoneOtpStatusActionBtn{
  width:100% !important;
}

/* Dark mode variant surfaces tetap lembut. */
html[data-theme="dark"]
.phoneOtpStatusModal[data-variant="warning"]
.phoneOtpStatusNotice{
  background:
    linear-gradient(
      145deg,
      rgba(210,154,55,.085),
      rgba(255,255,255,.018)
    ) !important;

  border-color:
    rgba(210,154,55,.12) !important;
}

html[data-theme="dark"]
.phoneOtpStatusModal[data-variant="error"]
.phoneOtpStatusNotice{
  background:
    linear-gradient(
      145deg,
      rgba(220,102,87,.080),
      rgba(255,255,255,.018)
    ) !important;

  border-color:
    rgba(220,102,87,.11) !important;
}

@media (max-width:620px){
  .phoneOtpStatusCard{
    width:min(440px,calc(100vw - 28px)) !important;
  }
}

/* =========================================================
   FINAL V160 - PHONE CLOSE ICON PRECISION CENTER
   =========================================================
   TARGET:
   - HANYA close/back button Phone Auth desktop >=980px.
   - Posisi tombol existing V150 tetap: top:-5px.
   - Ukuran area tombol tetap 34x34px.
   - Icon X dibuat presisi di pusat geometris tombol.
   - Tidak memakai karakter font "×" karena baseline glyph
     dapat membuat icon terlihat sedikit naik / turun.
   - X dibuat dari dua garis identik yang berpotongan tepat
     pada center 50% x 50%.
   - Fungsi #phoneBackBtn, HTML, JS, Firebase Auth, OTP,
     reCAPTCHA, card, navbar, footer, dan mobile tidak diubah.
   ========================================================= */

@media (min-width:980px){

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn{
    /* Posisi V150 dipertahankan. */
    top:-5px !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;

    line-height:0 !important;
    font-size:0 !important;
  }

  /* Element original tetap ada untuk fungsi/DOM, tetapi visualnya
     digantikan X geometris di pseudo-element. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn > i,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn > .svg-inline--fa,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn > span{
    display:none !important;
  }

  /* Dua stroke bertemu tepat di tengah tombol. */
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn::before,
  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn::after{
    content:"" !important;

    position:absolute !important;
    top:50% !important;
    left:50% !important;

    width:15px !important;
    height:1.8px !important;

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

    display:block !important;

    background:currentColor !important;
    border:0 !important;
    border-radius:999px !important;

    box-shadow:none !important;

    transform-origin:50% 50% !important;

    pointer-events:none !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn::before{
    transform:
      translate(-50%,-50%)
      rotate(45deg) !important;
  }

  .heroLeft.loginDesktopFormPanel
  > .loginCard.is-phone-auth-mode
  .phoneBackBtn::after{
    transform:
      translate(-50%,-50%)
      rotate(-45deg) !important;
  }
}

/* =========================================================
   FINAL V161 — FORMAL EMAIL AUTH NOTICE
   =========================================================

   TUJUAN:
   - Hanya mengubah presentasi #signInMessage.
   - Reset password success dan Email/Password error memakai
     satu bahasa visual formal yang sama.
   - Border garis putus-putus tipis.
   - Background clean, shadow sangat ringan.
   - Teks hitam / dark ink, regular weight.
   - Tidak mengubah Phone Auth / OTP / modal / reCAPTCHA.
   - Tidak mengubah #signUpMessage.
   - Tidak mengubah struktur form, button, navbar, footer.
   ========================================================= */

/* ---------------------------------------------------------
   BASE SIGN-IN NOTICE
   --------------------------------------------------------- */
#signInMessage.authMessage:not(:empty){
  display:block !important;

  width:100% !important;

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

  color:#1f2937 !important;

  background:
    rgba(255,255,255,.78) !important;

  border:
    1px dashed rgba(62,103,113,.30) !important;

  border-radius:12px !important;

  box-shadow:
    0 4px 12px rgba(16,70,80,.030),
    inset 0 1px 0 rgba(255,255,255,.90) !important;

  font-size:12.5px !important;
  line-height:1.45 !important;
  font-weight:400 !important;

  letter-spacing:0 !important;

  text-align:left !important;

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

/*
 * Success / Error / Warning dibuat konsisten secara formal.
 * Variant class tetap dipertahankan di DOM untuk semantik existing,
 * tetapi tidak lagi memakai warna merah/hijau/oranye yang dominan.
 */
#signInMessage.authMessage.is-success,
#signInMessage.authMessage.is-error,
#signInMessage.authMessage.is-warning{
  color:#1f2937 !important;

  background:
    rgba(255,255,255,.78) !important;

  border-color:
    rgba(62,103,113,.30) !important;

  box-shadow:
    0 4px 12px rgba(16,70,80,.030),
    inset 0 1px 0 rgba(255,255,255,.90) !important;

  font-weight:400 !important;
}

/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */
html[data-theme="dark"]
#signInMessage.authMessage:not(:empty),
html[data-theme="dark"]
#signInMessage.authMessage.is-success,
html[data-theme="dark"]
#signInMessage.authMessage.is-error,
html[data-theme="dark"]
#signInMessage.authMessage.is-warning{
  color:#eafcff !important;

  background:
    rgba(16,43,48,.72) !important;

  border-color:
    rgba(170,200,204,.24) !important;

  box-shadow:
    0 4px 12px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.035) !important;

  font-weight:400 !important;
}

/* ---------------------------------------------------------
   MOBILE — tetap compact
   --------------------------------------------------------- */
@media (max-width:620px){
  #signInMessage.authMessage:not(:empty){
    padding:10px 12px !important;

    border-radius:11px !important;

    font-size:12px !important;
    line-height:1.42 !important;
  }
}

/* =========================================================
   END FINAL V161 — FORMAL EMAIL AUTH NOTICE
   ========================================================= */