/* 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;
}
main {
  padding: 37px 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.register {
  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;
}

img.icon-name.eye-icon,
img.icon-name.eye-show-icon {
  right: 13px;
  left: auto;
  cursor: pointer;
}

.toggle,
.toggle2 {
  display: none;
}

img.icon-name.eye-show-icon {
  display: none;
}

/* Ketika checkbox checked, sembunyikan eye-slash dan tampilkan eye-show. */
.toggle:checked ~ label img.icon-name.eye-icon,
.toggle2:checked ~ label img.icon-name.eye-icon {
  display: none;
}

.toggle:checked ~ label img.icon-name.eye-show-icon,
.toggle2:checked ~ label img.icon-name.eye-show-icon {
  display: inline;
}

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

/*footer */
footer.footer {
  text-align: center;
  margin: 25px 0;
  font-weight: 400;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  color: #4f5665;
}

footer.footer p a {
  color: #ff8906;
  text-decoration: none;
}

div.or-line {
  text-align: center;
}

div.line {
  border-bottom: 0.5px solid #dedede;
  display: inline-block;
  /* width: 270px; */
  width: 130px;
  vertical-align: middle;
}

span.span-text {
  display: inline-block;
  vertical-align: middle;
  color: #aaaaaa;
  margin: 0 60px;
}

div.container-icon {
  text-align: center;
  margin-top: 25px;
}
.container-facebook {
  margin-right: 14px;
}
a.container-facebook,
a.container-google {
  display: inline-block;
  background-color: #ffffff;
  border-radius: 16px;
  /* padding: 20px 110px; */
  padding: 20px;
  color: #4f5665;
  font-weight: 500;
  font-size: 18px;
  font-family: "Plus Jakarta Sans", sans-serif;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
}

.facebook-icon,
.google-icon {
  display: inline-block;
  vertical-align: middle;
}

.facebook,
.google {
  display: none;
}

/* responsive design tablet 640px+ */
@media (min-width: 640px) {
  .container {
    display: grid;
    grid-template-areas: "img main";
    grid-template-columns: 1fr 1fr;
  }
  div.img {
    display: block;
    grid-area: img;
  }
  main {
    padding: 61px 100px 0 70px;
    grid-area: main;
  }

  .container-icon a {
    text-decoration: none;
  }
  a.container-facebook,
  a.container-google {
    padding: 20px 110px;
    display: flex;
    gap: 10px;
  }

  .container-icon {
    display: flex;
  }

  .facebook,
  .google {
    display: block;
  }
}

/* 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;
  }
  main {
    padding: 61px 130px 0 70px;
    grid-area: main;
  }
  a.container-facebook,
  a.container-google {
    padding: 20px 110px;
    display: flex;
    gap: 10px;
  }

  .container-icon {
    display: flex;
  }

  .facebook,
  .google {
    display: block;
  }
}