@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap');

.contacts {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -120%);
  color: dimgrey;
}



.tempBack, .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 1s ease-in-out;
  z-index: -2;
  opacity: 0.3;
}

#bg1 { transform: translateX(0); }
#bg2 { transform: translateX(100%); }

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

#switching-image {
  transition: opacity 0.5s ease-in-out;
  filter: grayscale(100%) blur(0.2rem);
  margin-top: 5vh;
}

.OverviewImages { filter: blur(0.3rem); }

header div { width: 100%; }

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

body {
  margin: 0;
  height: 100vh;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
  transition: opacity 0.5s ease-in-out;
  overflow-x: hidden; /* biar nggak scroll ke samping */
  overflow-y: auto;   /* biar halaman lain tetap bisa di-scroll */
}

header {
  margin: 0 0 2rem 0;
  position: fixed;
  top: 0; left: 0; right: 0;
  font-family: "Barlow Condensed", sans-serif;
  color: floralwhite;
  text-align: left;
  z-index: -1;
  background: url("Images/forest.jpg") no-repeat;
  width: 15vw;
  height: 100vh;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - 80px);
  text-align: center;
  margin-top: 0;
  color: darkgreen;
  font-family: "Lexend";
  /* height: 100vh; */ /* ❌ hapus baris ini */
}


.aboutUs {
  width: 70%;
  margin-left: 20vw;
  margin-top: 10vh;
  text-align: justify;
  color: black;
}

.heads { font-weight: bold; font-size: 1.25rem; }
.spacing, .spacingC, .space { opacity: 0; font-size: 0.6rem; }
.largeText { font-size: clamp(2rem, 8vw, 6rem); }
.nonBold { font-weight: normal; }
.nonItalic { font-style: normal; }

.logo { height: 6rem; margin: -0.6rem 0; }
.webLink{ color: darkgray; text-decoration: none; }
.specLink { color: dimgray; text-decoration: none; }
.webLink:hover, .specLink:hover { text-decoration: underline; }

.mainLogo {
  margin-top: 1rem;
  text-align: center;
  display: inline-block;
  width: 100%;
  font-size: 1.6rem;
}

.logoDesc { margin: -1rem 0 0.3rem 0; font-weight: normal; }
.logoDesc2 {
  width: 8rem;
  margin: 0 auto;
  color: darkgrey;
  font-size: 1rem;
  font-weight: normal;
  text-align: justify;
  text-align-last: justify;
}
.logoDesc2::after { content: ""; display: inline-block; width: 100%; }

footer {
  position: absolute;
  font-size: 1.2rem;
  margin: 0;
  bottom: 5%;
  width: 100%;
}


ol {
  margin-right: 1%;
  font-family: "Lexend";
  color: black;
  list-style-type: none;
  margin-top: -8rem;
}
ol li {position: relative; margin-bottom: 0.8rem; text-align: right; width: 7rem; }
ol li span { font-weight: bold; color: forestgreen; }

ul {
  margin: 20vh auto 0 auto;
  font-family: "Lexend";
  color: black;
  list-style-type: none;
  text-align: left;
}

ul li {font-size: 2rem;}


.centerImage { margin-top: 5vh; width: 40vw; }
.centerBigImage, .interactibleDiv { margin: 1vh 0 0 10vw; width: 45vw; }
.symbol { width: 2.5rem; vertical-align: middle; }

.highlight1 { color: ghostwhite; }
.highlight2 { color: lightgray; }

.hexagonal {
  position: relative;
  width: 60vw;
  height: 60vh;
  margin: 10vh auto;
}

.team {
  position: absolute;
  width: 12vw;
  margin-left: 8vw;
  transition: transform 0.3s ease, opacity 0.4s ease;
  cursor: pointer;
}

#team1 { top: 4.9rem; left: 0.3125rem; }
#team2 { top: 10rem; left: 9.4375rem; }
#team3 { top: 4.9rem; left: 18.4375rem; }
#team4 { top: 10rem; left: 27.5rem; }
#team5 { top: 15.09375rem; left: 0.3125rem; }
#team6 { top: 15.09375rem; left: 18.4375rem; }
#team7 { top: -0.1875rem; left: 9.4375rem; }
#team8 { top: 20.1875rem; left: 9.4375rem; }

.team:hover { transform: scale(1.08); }

.info {
  width: 25vw;
  height: 60vh;
  position: absolute;
  right: 2vw;
  top: 12%;
  color: darkolivedrab;
  text-align: left;
  opacity: 0;
  transform: translateY(2vh);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 0;
  pointer-events: none;
}

.description {
  height: 60vh;
  overflow-wrap: break-word;
  white-space: normal;
}

.projects {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  margin-left: 15vw;
  max-height: 100vh;
  width: calc(100vw - 15vw);
  overflow: hidden;
}


.projects > div {
  position: relative;
  flex: 1;
  overflow: hidden;
  margin: 0;
  padding: 0;
}


.projectImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(40%);
  transition: filter 0.3s ease, transform 0.4s ease;
  display: block;
  transform: none; /* atau pastikan skala 1 */
  overflow: hidden;
}
.projects > div:hover .projectImage {
  filter: brightness(80%);
  transform: scale(1.05);
}

.projectDesc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: "Lexend", sans-serif;
  font-size: 1.2rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  pointer-events: none;
}
.gallery {
  position: absolute;
  top: 50%;
  left: 15vw;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  height: 70vh;
  width: calc(100vw - 15vw);
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 2;
  display: none;
  pointer-events: none;
}

.gallery > div {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.galleryImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(60%);
  transition: filter 0.3s ease, transform 0.4s ease;
}
.gallery > div:hover .galleryImage {
  filter: brightness(80%);
  transform: scale(1.05);
}

.galleryDesc {
  width: 100%;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: "Lexend", sans-serif;
  font-size: 1rem;
  text-align: center;
  letter-spacing: 0.1rem;
  pointer-events: none;
}

.galleryLoc {
  position: absolute;
  width: 100%;
  top: 94%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: "Lexend", sans-serif;
  font-size: 0.7rem;
  font-weight: 200;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  pointer-events: none;
}

.hiddenProject {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

.bigImage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100vw - 15vw);
  max-height: 95vh;
  object-fit: contain;
  border-radius: 0.6rem;
  z-index: 10;
  transition: transform 0.3s ease;
  margin-left: 8vw;
  display: none;
  background-color: rgba(255, 255, 255, 0.5);
}

.arrow {
  position: absolute;
  width: 2rem;
  z-index: 60;
  display: none;
  filter: invert(1);
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* === PANAH KIRI & KANAN === */
.leftArrow, .rightArrow {
  top: 50%;
}

.arrow:has(> img.leftArrow) {
  left: 17vw; /* agak keluar dari header, biar sejajar konten */
}

.arrow:has(> img.rightArrow) {
  right: 2vw; /* sisi kanan layar */
}


.arrowU, .arrowD {
  position: absolute;
  width: 5rem;
  z-index: 60;
  display: none;
  filter: invert(1);
  opacity: 0.5;
  margin-left: calc(50vw + 1rem);
  right: 40%
}

.arrowU { top: 2%; }
.arrowD { top: 93%; }

.upArrow:hover, .downArrow:hover,
.leftArrow:hover, .rightArrow:hover {
  transform: scale(1.08);
}


.debug { z-index: 100; display: none; }

/* ============================= */
/* ====== RESPONSIVE FIXES ===== */
/* ============================= */
/*
@media (max-width: 1024px) {
  header { width: 12vw; }
  main, .projects, .gallery {
    margin-left: 12vw;
    width: calc(100vw - 12vw);
  }
  .aboutUs { margin-left: 15vw; width: 80%; }
  .info { right: 2vw; width: 20vw; }
  .largeText { font-size: clamp(2rem, 6vw, 4rem); }
}

@media (max-width: 768px) {
  header {
    width: 100%;
    height: 10vh;
    z-index: 10;
    text-align: center;
  }
  .mainLogo, .logoDesc, .logoDesc2 {
    margin: 0 auto;
    text-align: center;
  }
  main { margin-top: 12vh; width: 100%; height: auto; }
  .aboutUs { width: 90%; margin: 15vh auto 0 auto; }
  .projects {
    flex-direction: column;
    margin-left: 0;
    width: 100%;
    height: auto;
  }
  .projects > div { width: 100%; height: 30vh; }
  .gallery { left: 0; width: 100%; }
  .arrow { width: 2rem; opacity: 0.7; }
  .leftArrow { margin-left: 2vw; }
  .rightArrow { margin-left: calc(100vw - 3rem); }
  .hexagonal {
    width: 100%;
    height: auto;
    margin: 5vh auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .team {
    position: relative;
    margin: 1rem;
    width: 40%;
  }
  .info {
    position: relative;
    margin: 3vh auto;
    text-align: center;
    transform: none;
  }
  .largeText { font-size: 12vw; }
  footer { margin-top: 3vh; }
}

@media (max-width: 480px) {
  .aboutUs { margin-top: 8vh; width: 95%; font-size: 0.9rem; }
  .projects > div { height: 25vh; }
  .galleryDesc { font-size: 0.8rem; }
  .galleryLoc { font-size: 0.6rem; }
  .logoDesc2 { font-size: 0.8rem; width: 6rem; margin: 0 auto; }
  ol, ul { margin: 0 auto; text-align: center; }
  .arrow { width: 1.5rem; }
  .leftArrow { margin-left: 1vw; }
  .rightArrow { margin-left: calc(100vw - 2.5rem); }
}