/* selector (*) digunakan untuk reset margin dan padding di semua elemen.
box-sizing: border-box memastikan padding dan border dihitung dalam width/height elemen */

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

/* container & layout structure */
/* Container menggunakan width: 100% untuk responsive full-width layout. */
.container {
  width: 100%;
}

div.img {
  display: none;
}

.img img {
  width: 100%;
}
main {
  padding: 252px 20px;
}

.logo img,
.logo span {
  vertical-align: middle;
}

.logo .logo-text {
  font-family: "Sacramento", cursive;
  color: #8e6447;
  font-size: 20px;
  font-weight: 400;
  margin-left: 15px;
}

/* header & title */
h1.login {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #8e6447;
  font-size: 22px;
  font-weight: 600;
  margin-top: 51px;
  margin-bottom: 25px;
}

p.from-subtitle {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #4f5665;
  font-size: 16px;
  font-weight: 400;
}

/* form  */
div.input-wrapper {
  position: relative;
}

form .label {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #0b132a;
  margin-top: 25px;
}

form .input {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  display: block;
  width: 100%;
  padding: 18.5px 0;
  padding-left: 47px;
  color: #4f5665;
  border: 1px solid #dedede;
  border-radius: 8px;
  background-color: #fcfdfe;
  margin-top: 13px;
  margin-bottom: 25px;
}

/* input icon */
img.icon-name {
  position: absolute;
  top: 53px;
  left: 13px;
  z-index: 2;
}

/* submit button */
button.button {
  font-family: "Plus Jakarta Sans", sans-serif;
  display: block;
  width: 100%;
  background-color: #ff8906;
  padding: 15px 0;
  cursor: pointer;
  color: #0b132a;
  font-weight: 500;
  font-size: 16px;
  border-radius: 6px;
  border: none;
}

/* responsive design tablet 640px+ */
@media (min-width: 640px) {
  .container {
    display: grid;
    grid-template-areas: "img main";
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  div.img {
    display: block;
    grid-area: img;
    max-width: 380px;
    padding: auto;
  }

  main {
    padding: 150px 20px 0 0;
    grid-area: main;
  }
}

/* responsive design desktop 768px+ */
@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-areas: "img main";
    grid-template-columns: 1fr 1fr;
  }
  div.img {
    display: block;
    grid-area: img;
    max-width: 460px;
    padding: auto;
  }
  main {
    padding: 185px 100px 0 0;
    grid-area: main;
  }
}