/* ==========================================================
   INCEPTION AUTH V12.2
   50% BLUE / 50% CORAL
   ========================================================== */

body.inc-auth-v122 {
  min-height: 100vh !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #2448b5 !important;
}


/* ==========================================================
   GUARANTEED SPLIT BACKGROUND
   Tidak bergantung background React wrapper.
   ========================================================== */

.inc-auth-split-bg {
  position: fixed;
  inset: 0;

  z-index: 0;

  display: grid;

  grid-template-columns:
    50% 50%;

  pointer-events: none;
}


.inc-auth-split-blue {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #213b9f 0%,
      #2857bb 55%,
      #3473c7 100%
    );
}


.inc-auth-split-coral {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #b64048 0%,
      #d55152 52%,
      #ef7163 100%
    );
}


/* subtle texture */

.inc-auth-split-blue::before,
.inc-auth-split-coral::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.045) 1px,
      transparent 1px
    );

  background-size:
    82px 82px;

  opacity:
    .42;

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


/* decorative circles */

.inc-auth-split-blue::after {
  content: "";

  position: absolute;

  width: 112px;
  height: 112px;

  top: 7%;
  left: 5%;

  border-radius: 50%;

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


.inc-auth-split-coral::after {
  content: "";

  position: absolute;

  width: 88px;
  height: 88px;

  right: 7%;
  bottom: 8%;

  border-radius: 50%;

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


/* ==========================================================
   BERSIHKAN BACKGROUND WRAPPER REACT
   hanya ancestor halaman auth.
   ========================================================== */

body.inc-auth-v122
.inc-auth-shell-transparent {
  background:
    transparent !important;

  background-image:
    none !important;

  border:
    0 !important;

  box-shadow:
    none !important;

  filter:
    none !important;
}


body.inc-auth-v122 #root {
  position:
    relative;

  z-index:
    1;

  min-height:
    100vh;

  background:
    transparent !important;
}


/* ==========================================================
   LEFT BRAND AREA
   ========================================================== */

.inc-auth-brand {
  position:
    fixed;

  z-index:
    3;

  top:
    0;

  left:
    0;

  width:
    50%;

  height:
    100vh;

  box-sizing:
    border-box;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    54px;

  color:
    white;

  text-align:
    center;

  pointer-events:
    none;
}


.inc-auth-brand-inner {
  width:
    min(500px, 86%);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;
}


.inc-auth-brand-logo {
  width:
    176px;

  height:
    176px;

  display:
    block;

  object-fit:
    contain;

  margin-bottom:
    25px;
}


.inc-auth-brand-kicker {
  margin-bottom:
    12px;

  color:
    #cbdcff;

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

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;
}


.inc-auth-brand h1 {
  margin:
    0;

  color:
    #fff;

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

  font-size:
    clamp(42px, 4.4vw, 64px);

  font-weight:
    800;

  line-height:
    .98;

  letter-spacing:
    -.04em;
}


.inc-auth-brand p {
  max-width:
    39ch;

  margin:
    19px 0 0;

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

  font-size:
    15px;

  line-height:
    1.72;
}


.inc-auth-brand-line {
  width:
    76px;

  height:
    3px;

  margin-top:
    27px;

  border-radius:
    99px;

  background:
    linear-gradient(
      90deg,
      #bed7ff 0 50%,
      #ff9a90 50% 100%
    );
}


/* ==========================================================
   FORM CARD
   ========================================================== */

body.inc-auth-v122
.inc-auth-card {
  position:
    fixed !important;

  z-index:
    5 !important;

  top:
    50% !important;

  left:
    75% !important;

  margin:
    0 !important;

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

  box-sizing:
    border-box;

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

  border-radius:
    22px !important;

  background:
    #ffffff !important;

  background-image:
    none !important;

  color:
    #17213a !important;

  box-shadow:
    0 22px 52px
    rgba(70, 16, 20, .17)
    !important;

  overflow:
    auto;
}


/* LOGIN SIZE */

body.inc-auth-v122
.inc-auth-card-login {
  width:
    min(430px, calc(50vw - 90px))
    !important;

  min-width:
    370px;

  max-height:
    calc(100vh - 70px);

  padding:
    34px 34px 29px
    !important;
}


/* REGISTER SIZE */

body.inc-auth-v122
.inc-auth-card-register {
  width:
    min(475px, calc(50vw - 72px))
    !important;

  min-width:
    395px;

  max-height:
    calc(100vh - 52px);

  padding:
    30px 34px
    !important;
}


/* custom scrollbar register */

body.inc-auth-v122
.inc-auth-card::-webkit-scrollbar {
  width:
    5px;
}


body.inc-auth-v122
.inc-auth-card::-webkit-scrollbar-thumb {
  border-radius:
    99px;

  background:
    #d8ddea;
}


/* ==========================================================
   CARD TYPOGRAPHY
   ========================================================== */

body.inc-auth-v122
.inc-auth-card
:is(h1, h2, h3) {
  margin-top:
    0 !important;

  color:
    #18213a !important;

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

  font-size:
    29px !important;

  font-weight:
    800 !important;

  line-height:
    1.15 !important;

  letter-spacing:
    -.025em !important;

  text-align:
    center !important;
}


body.inc-auth-v122
.inc-auth-card > p,

body.inc-auth-v122
.inc-auth-card
form ~ p {
  color:
    #778198 !important;
}


body.inc-auth-v122
.inc-auth-card p {
  color:
    #778198;
}


/* labels */

body.inc-auth-v122
.inc-auth-card label {
  color:
    #38425d !important;

  font-size:
    12px !important;

  font-weight:
    650 !important;
}


/* input */

body.inc-auth-v122
.inc-auth-card input {
  min-height:
    48px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    #d6ddea !important;

  border-radius:
    11px !important;

  background:
    #fbfcff !important;

  color:
    #17213a !important;

  caret-color:
    #3f69d5 !important;

  box-shadow:
    none !important;
}


body.inc-auth-v122
.inc-auth-card input::placeholder {
  color:
    #a0a8b9 !important;
}


body.inc-auth-v122
.inc-auth-card input:focus {
  outline:
    none !important;

  border-color:
    #527de4 !important;

  box-shadow:
    0 0 0 3px
    rgba(82,125,228,.10)
    !important;
}


/* password eye */

body.inc-auth-v122
.inc-auth-card button:not([type="submit"]) {
  color:
    #737f98;
}


/* submit */

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

  border:
    0 !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      90deg,
      #4771d9,
      #e15e58
    )
    !important;

  color:
    #fff !important;

  font-weight:
    750 !important;

  box-shadow:
    none !important;

  cursor:
    pointer;
}


body.inc-auth-v122
.inc-auth-card button[type="submit"]:hover {
  filter:
    brightness(1.045);
}


/* links */

body.inc-auth-v122
.inc-auth-card a {
  color:
    #3d69d1 !important;

  font-weight:
    650 !important;

  text-decoration:
    none !important;
}


/* ==========================================================
   TOPBAR LOGIN BUTTON
   ========================================================== */

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

  display:
    inline-flex !important;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 17px !important;

  margin-left:
    4px;

  border:
    1px solid
    #f46b61 !important;

  border-radius:
    10px !important;

  background:
    #f46b61 !important;

  color:
    #fff !important;

  font-size:
    13px !important;

  font-weight:
    700 !important;

  text-decoration:
    none !important;

  box-shadow:
    none !important;
}


.inception-login-cta:hover {
  background:
    #ff766c !important;

  color:
    #fff !important;

  transform:
    translateY(-1px);
}


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


/* ==========================================================
   CHATBOT
   Jangan muncul di login / register.
   ========================================================== */

body.inc-auth-v122
.inception-chatbot-trigger,

body.inc-auth-v122
.inception-chatbot-panel {
  display:
    none !important;
}


/* ==========================================================
   TABLET + MOBILE
   50:50 berubah vertical supaya usable.
   ========================================================== */

@media (max-width: 860px) {

  body.inc-auth-v122 {
    overflow-y:
      auto !important;
  }


  .inc-auth-split-bg {
    grid-template-columns:
      1fr;

    grid-template-rows:
      38vh auto;
  }


  .inc-auth-brand {
    position:
      relative;

    width:
      100%;

    height:
      38vh;

    min-height:
      300px;

    padding:
      35px 22px;
  }


  .inc-auth-brand-logo {
    width:
      98px;

    height:
      98px;

    margin-bottom:
      11px;
  }


  .inc-auth-brand-kicker {
    margin-bottom:
      8px;

    font-size:
      8px;
  }


  .inc-auth-brand h1 {
    font-size:
      31px;
  }


  .inc-auth-brand p {
    display:
      none;
  }


  .inc-auth-brand-line {
    margin-top:
      14px;
  }


  body.inc-auth-v122
  .inc-auth-card {
    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;

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

    min-width:
      0 !important;

    max-width:
      470px;

    max-height:
      none;

    margin:
      38px auto 60px
      !important;

    transform:
      none !important;
  }

}


@media (max-width: 520px) {

  body.inc-auth-v122
  .inc-auth-card {
    padding:
      27px 21px !important;

    border-radius:
      17px !important;
  }


  body.inc-auth-v122
  .inc-auth-card
  :is(h1, h2, h3) {
    font-size:
      25px !important;
  }

}

/* INCEPTION_AUTH_SELECT_API_V2_START */

body.inc-auth-v122
.inc-auth-card select {
  width: 100% !important;

  min-height: 48px !important;

  box-sizing: border-box !important;

  padding:
    0 42px 0 14px !important;

  border:
    1px solid
    #d6ddea !important;

  border-radius:
    11px !important;

  outline:
    none !important;

  background-color:
    #fbfcff !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c7892' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    !important;

  background-repeat:
    no-repeat !important;

  background-position:
    right 13px center !important;

  background-size:
    17px !important;

  color:
    #17213a !important;

  font:
    inherit !important;

  appearance:
    none !important;

  -webkit-appearance:
    none !important;

  cursor:
    pointer;
}


body.inc-auth-v122
.inc-auth-card select:focus {
  border-color:
    #527de4 !important;

  box-shadow:
    0 0 0 3px
    rgba(82,125,228,.10)
    !important;
}


body.inc-auth-v122
.inc-auth-card select:disabled {
  cursor:
    not-allowed;

  color:
    #98a2b7 !important;

  background-color:
    #f4f6fa !important;

  opacity:
    .78;
}


.auth-select-help {
  display:
    block;

  margin-top:
    6px;

  color:
    #748199;

  font-size:
    10px;

  line-height:
    1.4;
}


.auth-reference-warning {
  margin:
    0 0 13px;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(218, 154, 67, .28);

  border-radius:
    9px;

  background:
    rgba(218,154,67,.08);

  color:
    #8c6230;

  font-size:
    11px;

  line-height:
    1.45;
}


/* register sedikit lebih tinggi karena dropdown */

body.inc-auth-v122
.inc-auth-card-register {
  max-height:
    calc(100vh - 34px)
    !important;
}


/* INCEPTION_AUTH_SELECT_API_V2_END */

/* INCEPTION_PARTICIPANT_FINAL_V3_START */


body.inc-auth-v122
.inc-auth-card-register {
  width:
    min(500px, calc(50vw - 64px))
    !important;

  min-width:
    420px;

  max-height:
    calc(100vh - 28px)
    !important;

  padding:
    27px 32px
    !important;

  overflow-y:
    auto !important;

  overflow-x:
    visible !important;
}


/* PASSWORD */

body.inc-auth-v122
.inc-auth-card
input.is-invalid {
  border-color:
    #dc625d !important;

  box-shadow:
    0 0 0 3px
    rgba(220,98,93,.10)
    !important;
}


.auth-password-error {
  display:
    block;

  margin-top:
    5px;

  color:
    #bf4d48 !important;

  font-size:
    10px;
}


/* ==========================================================
   SEARCH DROPDOWN
   ========================================================== */

.auth-search-field {
  position:
    relative;

  z-index:
    3;
}


.auth-search-field:focus-within {
  z-index:
    50;
}


.auth-search-control {
  position:
    relative;
}


body.inc-auth-v122
.inc-auth-card
.auth-search-input {
  padding-right:
    46px !important;
}


.auth-search-toggle {
  position:
    absolute;

  z-index:
    3;

  top:
    50%;

  right:
    5px;

  width:
    38px;

  height:
    38px;

  padding:
    0 !important;

  display:
    grid !important;

  place-items:
    center;

  transform:
    translateY(-50%);

  border:
    0 !important;

  border-radius:
    8px !important;

  background:
    transparent !important;

  color:
    #748096 !important;

  box-shadow:
    none !important;

  cursor:
    pointer;
}


.auth-search-toggle:hover {
  background:
    #eef3fc !important;

  color:
    #426bd2 !important;
}


.auth-search-menu {
  position:
    absolute;

  z-index:
    300;

  top:
    calc(100% + 6px);

  left:
    0;

  right:
    0;

  max-height:
    270px;

  overflow-y:
    auto;

  padding:
    6px;

  border:
    1px solid
    #d7deeb;

  border-radius:
    12px;

  background:
    #ffffff;

  box-shadow:
    0 16px 38px
    rgba(22,34,62,.16);
}


.auth-search-menu-info {
  padding:
    8px 10px 9px;

  color:
    #8a95aa;

  font-size:
    10px;
}


body.inc-auth-v122
.inc-auth-card
.auth-search-option {
  width:
    100%;

  min-height:
    45px !important;

  margin:
    0 !important;

  padding:
    8px 10px !important;

  display:
    flex !important;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  border:
    0 !important;

  border-radius:
    8px !important;

  background:
    transparent !important;

  color:
    #202b43 !important;

  box-shadow:
    none !important;

  text-align:
    left;

  cursor:
    pointer;
}


body.inc-auth-v122
.inc-auth-card
.auth-search-option:hover {
  background:
    #edf3ff !important;
}


body.inc-auth-v122
.inc-auth-card
.auth-search-option.is-selected {
  background:
    #e6efff !important;

  color:
    #315ec9 !important;
}


.auth-search-option span {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12px;
}


.auth-search-option small {
  flex:
    0 0 auto;

  color:
    #8b96aa;

  font-size:
    9px;
}


.auth-search-empty {
  padding:
    18px 10px;

  color:
    #8d97aa;

  text-align:
    center;

  font-size:
    11px;
}


.auth-select-help {
  display:
    block;

  margin-top:
    5px;

  color:
    #7e899d;

  font-size:
    10px;

  line-height:
    1.4;
}


/* ==========================================================
   OTP
   ========================================================== */

.auth-otp-form {
  display:
    grid;

  gap:
    18px;
}


.auth-email-verified-target {
  padding:
    20px 16px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  border:
    1px solid
    #dfe5ef;

  border-radius:
    14px;

  background:
    #f8faff;

  text-align:
    center;
}


.auth-mail-icon {
  width:
    50px;

  height:
    50px;

  margin-bottom:
    11px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #dce8ff,
      #ffe2de
    );

  font-size:
    21px;
}


.auth-email-verified-target strong {
  color:
    #1c2740 !important;

  font-size:
    15px;
}


.auth-email-verified-target span {
  margin-top:
    5px;

  color:
    #7b869b;

  font-size:
    11px;
}


.auth-email-verified-target b {
  margin-top:
    4px;

  color:
    #3d68cc;

  font-size:
    12px;
}


.auth-email-verified-target small {
  margin-top:
    8px;

  color:
    #929cad;
}


.auth-otp-boxes {
  display:
    grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap:
    8px;
}


body.inc-auth-v122
.inc-auth-card
.auth-otp-boxes input {
  width:
    100%;

  min-width:
    0;

  height:
    57px;

  padding:
    0 !important;

  text-align:
    center;

  color:
    #17213a !important;

  font-size:
    23px !important;

  font-weight:
    750;

  border:
    1px solid
    #d6deed !important;

  border-radius:
    10px !important;

  background:
    #fbfcff !important;
}


body.inc-auth-v122
.inc-auth-card
.auth-otp-boxes input:focus {
  border-color:
    #527de4 !important;

  box-shadow:
    0 0 0 3px
    rgba(82,125,228,.10)
    !important;
}


.auth-otp-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


body.inc-auth-v122
.inc-auth-card
.auth-otp-actions button {
  min-height:
    0 !important;

  padding:
    3px 0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  color:
    #416bce !important;

  box-shadow:
    none !important;

  font-size:
    11px;

  font-weight:
    650;

  cursor:
    pointer;
}


body.inc-auth-v122
.inc-auth-card
.auth-otp-actions button:disabled {
  color:
    #a1a8b7 !important;

  cursor:
    not-allowed;
}


@media (max-width: 860px) {

  body.inc-auth-v122
  .inc-auth-card-register {
    width:
      calc(100% - 32px)
      !important;

    min-width:
      0 !important;

    max-height:
      none !important;
  }


  .auth-search-menu {
    max-height:
      230px;
  }

}


@media (max-width: 480px) {

  .auth-otp-boxes {
    gap:
      5px;
  }


  body.inc-auth-v122
  .inc-auth-card
  .auth-otp-boxes input {
    height:
      50px;

    font-size:
      19px !important;
  }

}


/* INCEPTION_PARTICIPANT_FINAL_V3_END */