/* ==========================================================
   INCEPTION LOGIN EXPERIENCE V12
   ========================================================== */


/* ==========================================================
   TOPBAR LOGIN CTA
   ========================================================== */

.inception-login-cta {
  min-height: 38px;

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

  padding: 0 17px !important;

  margin-left: 5px;

  border:
    1px solid
    rgba(244, 107, 97, 0.50) !important;

  border-radius:
    11px !important;

  background:
    #f46b61 !important;

  color:
    #ffffff !important;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif !important;

  font-size:
    13px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  text-decoration:
    none !important;

  box-shadow:
    none !important;

  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease
    !important;
}


.inception-login-cta:hover {
  color:
    #ffffff !important;

  background:
    #ff766c !important;

  border-color:
    #ff766c !important;

  transform:
    translateY(-1px);
}


.inception-login-cta::after,
.inception-login-cta::before {
  display:
    none !important;
}


/* ==========================================================
   NORMAL USER LOGIN PAGE
   IMPORTANT:
   hanya aktif pada /login
   bukan /login/admin
   ========================================================== */

body.inc-login-v12 {
  min-height:
    100vh !important;

  margin:
    0 !important;

  overflow-x:
    hidden;

  background:
    linear-gradient(
      90deg,
      #2142ad 0%,
      #2e65bf 50%,
      #d94f50 50%,
      #ef6b60 100%
    )
    !important;
}


/*
   Matikan background gelap bawaan halaman login,
   tapi hanya wrapper terluar.
*/

body.inc-login-v12 #root {
  min-height:
    100vh !important;

  background:
    transparent !important;
}


body.inc-login-v12 #root > * {
  background:
    transparent !important;
}


/* ==========================================================
   LEFT BRAND PANEL
   ========================================================== */

.inc-login-showcase {
  position:
    fixed;

  z-index:
    20;

  left:
    0;

  top:
    0;

  width:
    50%;

  height:
    100vh;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    56px;

  box-sizing:
    border-box;

  overflow:
    hidden;

  text-align:
    center;

  pointer-events:
    none;

  color:
    #ffffff;
}


/* subtle decorative geometry */

.inc-login-showcase::before,
.inc-login-showcase::after {
  content: "";

  position:
    absolute;

  border-radius:
    50%;

  pointer-events:
    none;

  background:
    rgba(255,255,255,.095);
}


.inc-login-showcase::before {
  width:
    110px;

  height:
    110px;

  left:
    5%;

  top:
    7%;
}


.inc-login-showcase::after {
  width:
    84px;

  height:
    84px;

  right:
    7%;

  bottom:
    8%;
}


/* small grid decoration */

.inc-login-grid {
  position:
    absolute;

  inset:
    0;

  opacity:
    .08;

  background-image:
    linear-gradient(
      rgba(255,255,255,.35) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.35) 1px,
      transparent 1px
    );

  background-size:
    78px 78px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 18%,
      #000 82%,
      transparent
    );
}


.inc-login-brand-content {
  position:
    relative;

  z-index:
    2;

  width:
    min(470px, 82%);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;
}


.inc-login-logo {
  width:
    180px;

  height:
    180px;

  display:
    block;

  object-fit:
    contain;

  margin-bottom:
    27px;

  filter:
    drop-shadow(
      0 16px 30px
      rgba(5, 15, 70, .14)
    );
}


.inc-login-eyebrow {
  margin:
    0 0 12px;

  color:
    #bed7ff;

  font-family:
    "IBM Plex Mono",
    ui-monospace,
    monospace;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;
}


.inc-login-showcase h1 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(37px, 4vw, 58px);

  font-weight:
    750;

  line-height:
    1.02;

  letter-spacing:
    -.035em;
}


.inc-login-showcase p {
  max-width:
    38ch;

  margin:
    18px 0 0;

  color:
    rgba(255,255,255,.80);

  font-size:
    15px;

  line-height:
    1.7;
}


/* blue/coral identity line */

.inc-login-brand-line {
  width:
    72px;

  height:
    3px;

  margin-top:
    25px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #91bcff 0 50%,
      #ff8b82 50% 100%
    );
}


/* ==========================================================
   LOGIN CARD
   Form React lama tetap dipakai.
   ========================================================== */

body.inc-login-v12 .inc-login-card {
  position:
    fixed !important;

  z-index:
    50 !important;

  top:
    50% !important;

  left:
    75% !important;

  width:
    min(430px, calc(50vw - 80px))
    !important;

  min-width:
    360px;

  margin:
    0 !important;

  padding:
    34px 34px 29px
    !important;

  transform:
    translate(-50%, -50%)
    !important;

  box-sizing:
    border-box;

  border:
    0 !important;

  border-radius:
    22px !important;

  background:
    #ffffff !important;

  color:
    #17213a !important;

  box-shadow:
    0 24px 60px
    rgba(85, 25, 25, .18)
    !important;
}


/* title */

body.inc-login-v12
.inc-login-card
:is(h1, h2, h3) {
  color:
    #18213a !important;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif !important;

  font-size:
    30px !important;

  font-weight:
    800 !important;

  line-height:
    1.12 !important;

  letter-spacing:
    -.025em !important;

  text-align:
    center !important;
}


/* subtitle / paragraph */

body.inc-login-v12
.inc-login-card p {
  color:
    #747d94 !important;

  text-align:
    center;

  line-height:
    1.55;
}


/* labels */

body.inc-login-v12
.inc-login-card label {
  color:
    #36405b !important;

  font-size:
    12px !important;

  font-weight:
    600 !important;
}


/* inputs */

body.inc-login-v12
.inc-login-card input {
  min-height:
    49px !important;

  box-sizing:
    border-box;

  border:
    1px solid
    #d9deea !important;

  border-radius:
    11px !important;

  background:
    #fbfcff !important;

  color:
    #18213a !important;

  box-shadow:
    none !important;
}


body.inc-login-v12
.inc-login-card input::placeholder {
  color:
    #98a2b7 !important;
}


body.inc-login-v12
.inc-login-card input:focus {
  outline:
    none !important;

  border-color:
    #668ef0 !important;

  box-shadow:
    0 0 0 3px
    rgba(102,142,240,.11)
    !important;
}


/* show password eye */

body.inc-login-v12
.inc-login-card button:not([type="submit"]) {
  color:
    #66728b;
}


/* main login button */

body.inc-login-v12
.inc-login-card button[type="submit"] {
  min-height:
    49px !important;

  border:
    0 !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      90deg,
      #416fd8,
      #f46b61
    )
    !important;

  color:
    #ffffff !important;

  font-weight:
    750 !important;

  box-shadow:
    none !important;

  cursor:
    pointer;
}


body.inc-login-v12
.inc-login-card button[type="submit"]:hover {
  filter:
    brightness(1.04);
}


/* links */

body.inc-login-v12
.inc-login-card a {
  color:
    #3869d2 !important;

  font-weight:
    600;

  text-decoration:
    none;
}


/* ==========================================================
   HIDE CHATBOT ON NORMAL LOGIN
   ========================================================== */

body.inc-login-v12
.inception-chatbot-trigger,

body.inc-login-v12
.inception-chatbot-panel {
  display:
    none !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 860px) {

  body.inc-login-v12 {
    overflow-y:
      auto;

    background:
      linear-gradient(
        180deg,
        #2142ad 0,
        #2e65bf 39%,
        #d94f50 39%,
        #ef6b60 100%
      )
      !important;
  }


  .inc-login-showcase {
    position:
      relative;

    width:
      100%;

    height:
      38vh;

    min-height:
      310px;

    padding:
      38px 24px;
  }


  .inc-login-logo {
    width:
      105px;

    height:
      105px;

    margin-bottom:
      13px;
  }


  .inc-login-eyebrow {
    font-size:
      8px;
  }


  .inc-login-showcase h1 {
    font-size:
      31px;
  }


  .inc-login-showcase p {
    display:
      none;
  }


  .inc-login-brand-line {
    margin-top:
      15px;
  }


  body.inc-login-v12
  .inc-login-card {
    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;

    width:
      calc(100% - 34px)
      !important;

    min-width:
      0;

    max-width:
      440px;

    margin:
      38px auto 60px
      !important;

    transform:
      none !important;
  }

}


/* ==========================================================
   TOPBAR MOBILE LOGIN
   ========================================================== */

@media (max-width: 767px) {

  .inception-login-cta {
    width:
      100%;

    min-height:
      43px;

    margin:
      7px 0 12px;

    justify-content:
      center;
  }

}