/* =========================
   GLOBAL
   ========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: Arial, Helvetica, sans-serif;

  overflow-x: hidden;

  background: #ff9218;
}



/* =========================
   LOGIN PAGE
   ========================= */

.login-page {
  position: relative;

  width: 100%;
  min-height: 100vh;

  background: #ff9218;
}



/* =========================
   HERO / DOODLE AREA
   ========================= */

.hero-section {
  position: relative;

  width: 100%;

  height: 55vh;
  min-height: 420px;

  background-color: #ffffff;

  background-image:

    linear-gradient(
      rgba(255, 255, 255, 0.76),
      rgba(255, 255, 255, 0.76)
    ),

    url("hexa-doodle.png");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;


  display: flex;

  justify-content: center;

  align-items: flex-end;
}



/* =========================
   HEXA LOGO
   ========================= */

.hexa-logo {
  display: block;

  width: min(350px, 65vw);

  height: auto;

  margin-bottom: 115px;

  object-fit: contain;
}



/* =========================
   ORANGE AREA
   ========================= */

.orange-section {
  width: 100%;

  min-height: 45vh;

  background: #ff9218;
}



/* =========================
   LOGIN WRAPPER
   ========================= */

.login-wrapper {
  position: absolute;

  top: 55vh;

  left: 50%;

  transform: translate(
    -50%,
    -50px
  );


  width: min(
    380px,
    calc(100% - 36px)
  );


  display: flex;

  flex-direction: column;

  align-items: center;
}



/* =========================
   LOGIN CARD
   ========================= */

.login-card {
  width: 100%;

  padding:
    24px
    28px
    24px;


  background: #f3fbfc;


  border-radius: 12px;


  /*
     PREMIUM FLOATING SHADOW

     Hanya bagian ini yang berbeda
     dari desain lama.
  */

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.12),
    0 20px 40px rgba(0, 0, 0, 0.16),
    0 35px 65px rgba(0, 0, 0, 0.08);
}



/* =========================
   INPUT GROUP
   ========================= */

.input-group {
  width: 100%;

  margin-bottom: 18px;
}


.input-group label {
  display: block;

  margin-bottom: 8px;

  font-size: 13px;

  font-weight: 500;

  color: #111111;
}



/* =========================
   INPUT
   ========================= */

.input-group input {
  width: 100%;

  height: 42px;


  padding:
    0
    12px;


  border:
    1px
    solid
    #89979a;


  border-radius: 6px;


  background: #f7fcfd;


  font-size: 14px;


  outline: none;


  transition: 0.2s;
}


.input-group input:focus {
  border-color: #0759bd;


  box-shadow:
    0 0 0 2px
    rgba(7, 89, 189, 0.12);
}



/* =========================
   PASSWORD
   ========================= */

.password-wrapper {
  position: relative;

  width: 100%;
}


.password-wrapper input {
  padding-right: 48px;
}



/* =========================
   SHOW PASSWORD BUTTON
   ========================= */

.toggle-password {
  position: absolute;

  top: 50%;

  right: 7px;


  transform:
    translateY(-50%);


  width: 34px;

  height: 34px;


  border: none;

  background: transparent;


  cursor: pointer;


  font-size: 16px;
}



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

.login-button {
  width: 100%;

  height: 42px;


  border: none;

  border-radius: 22px;


  background: #0759bd;


  color: #ffffff;


  font-size: 14px;

  font-weight: 500;


  cursor: pointer;


  transition: 0.2s;
}


.login-button:hover {
  background: #064ca1;
}


.login-button:active {
  transform: scale(0.99);
}



/* =========================
   LOGIN MESSAGE
   ========================= */

.login-message {
  min-height: 16px;

  margin-top: 10px;


  text-align: center;


  font-size: 12px;

  line-height: 1.4;
}



/* =========================
   HRS LOGO
   ========================= */

.hrs-logo {
  display: block;


  width: 170px;

  max-width: 50vw;


  height: auto;


  margin-top: 28px;


  object-fit: contain;
}



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

@media (max-width: 600px) {

  .hero-section {

    height: 52vh;

    min-height: 360px;


    background-size:
      auto
      100%;
  }


  .hexa-logo {

    width: min(
      270px,
      72vw
    );


    margin-bottom: 115px;
  }


  .orange-section {

    min-height: 48vh;
  }


  .login-wrapper {

    top: 52vh;


    width: min(
      340px,
      calc(100% - 30px)
    );


    transform:
      translate(
        -50%,
        -55px
      );
  }


  .login-card {

    padding:
      22px
      22px
      22px;

    /*
       Shadow sedikit disesuaikan
       untuk layar HP
    */

    box-shadow:
      0 7px 16px rgba(0, 0, 0, 0.12),
      0 18px 36px rgba(0, 0, 0, 0.15),
      0 30px 55px rgba(0, 0, 0, 0.08);
  }


  .hrs-logo {

    width: 150px;

    margin-top: 25px;
  }

}



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

@media (max-width: 380px) {

  .hero-section {

    min-height: 340px;
  }


  .hexa-logo {

    width: 230px;
  }


  .login-wrapper {

    width:
      calc(
        100% - 24px
      );
  }


  .login-card {

    padding-left: 18px;

    padding-right: 18px;
  }

}