/* General Reset */
body {
  font-family: 'Zain', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Header styling */
header {
  background-color: #0F0F0F;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 1em 2em;
  position: relative;
  z-index: 10;
}

/* Header Container */
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo styling */
.logo {
  height: 40px;
}

/* Navigation Styling */
header nav ul {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

header nav ul li a {
  font-size: 25px;
  color: white;
  text-decoration: none;
}

/* Navigation Item */
.nav-item {
  position: relative;
  width: 80px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-text,
.menu-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  transition: opacity 0.3s ease;
  text-align: center;
  white-space: nowrap;
}

.menu-icon a {
  display: block;
  width: 80px;
  height: 40px;
  cursor: pointer;
}


/* Hover Effects */
.nav-item:hover .menu-text {
  opacity: 0;
}

.nav-item:hover .menu-icon {
  opacity: 1;
}

/* Home Section */
#home {
  position: relative;
  overflow: hidden;
  padding: 0em 2em;
  background-color: white;
  color: black;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.svg-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Biar svg tetap di tengah, hanya bagian luar yang terpotong */
  z-index: 0; /* background lebih rendah */
  pointer-events: none; /* supaya tidak mengganggu klik */
}

.svg-background-aboutme,
.svg-foreground-aboutme {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Biar svg tetap di tengah, hanya bagian luar yang terpotong */
  z-index: 0; /* background lebih rendah */
  pointer-events: none; /* supaya tidak mengganggu klik */
}
.svg-foreground-aboutme {
  z-index: 3; /* di atas text dan foto */
}


#about, #projects, #contact {
  position: relative; /* penting! supaya background svg stay di dalam section */
  overflow: hidden; /* supaya bagian luar svg tidak kelihatan */
}


/* Content inside home */
#home .content {
  position: relative;
  z-index: 1;
}

#about {
  position: relative;
  overflow: hidden;
  background-color: #0f0f0f;
  color: #ffffff;
  min-height: 100vh;
}

#about h2 {
  font-size: 36px;
  margin-bottom: 20px;
  padding-left: 4em;
}

#about p {
  font-size: 21px;
  line-height: 1.6;
  max-width: 500px;
  max-height: 500px;
  padding-left: 8em;
}

/* Foto */
.about-photo-wrapper {
  position: absolute;
  top: 4.2%;  /* Bisa kamu adjust */
  left: 69%; /* Bisa kamu adjust */
  z-index: 1;
  width: 20vw; /* 20% dari lebar layar */
  max-width: 400px; /* Maksimal 400px supaya di layar besar tidak terlalu besar */
}

.about-photo {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Inner shadow di foto */
.about-photo-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(to top, rgba(15, 15, 15, 0.7), rgba(15, 15, 15, 0));
  pointer-events: none;
}


/* Section Projects */
#projects {
background-color: white;
margin-top: 20px;          /* Supaya naik mendekati header */
color: #0f0f0f;
position: relative;
padding: 1em 0em;
}

#projects h2 {
text-align: left;
font-size: 36px;
margin-bottom: 0px;
padding-left: 4em;
}

#projects p {
text-align: center;
font-size: 28px;
font-style: italic;
margin-bottom: 20px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* ⬅️ Ini buat efek shadow */
}

/* Wrapper untuk membuat card scroll horizontal */
.project-wrapper {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
gap: 2em;
padding: 2em 0;
scroll-behavior: smooth;
position: relative;
scroll-padding: 4em;
}

/* Tambahkan ini untuk space kiri-kanan */
.project-wrapper::before,
.project-wrapper::after {
content: '';
flex: 0 0 4em; /* ⬅️ Atur jarak padding kiri dan kanan */
}

/* Style untuk masing-masing card */
.project-card {
position: relative;
flex: 0 0 735px;
background: #ffffff;
border-radius: 28px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 0.4em;
text-align: center;
scroll-snap-align: start;
height: 449px; /* Tentukan tinggi card sesuai kebutuhan */
overflow: hidden;
}

.card-content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden; /* Menyembunyikan bagian yang keluar dari batas card */
}

.svg-object {
width: 98%;
height: 98%;
object-fit: contain; /* Pastikan SVG menyesuaikan tanpa merusak aspek rasio */
}

/* Frame */
.card-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
object-fit: contain; /* Menyesuaikan frame dengan konten tanpa merusak rasio */
}

/* Awal keadaan project-card (sembunyi) */
.project-card {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Saat muncul di layar */
.project-card.show-card {
opacity: 1;
transform: scale(1);
}

/* Optional: agar scrollbar terlihat kecil */
.project-wrapper::-webkit-scrollbar {
height: 8px;
}

.project-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.project-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.project-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}



#contact {
background-color: #0F0F0F;
margin-top: -3px;         
color: #ffffff;
position: relative;
padding: 1em 0em;
}

#contact h2 {
text-align: left;
font-size: 36px;
margin-bottom: 10px;
padding: 0em 4em;
}

#contact p {
text-align: left;
font-size: 21px;
margin-bottom: 21px;
padding: 0em 7em;
}

h2, p {
position: relative;  /* Agar teks tetap berada di atas background */
z-index: 1;  /* Pastikan teks di atas background */
}


/* Footer Styling */
footer {
  text-align: center;
  padding: 1em;
  background-color: #f5f5f5;
  color: #0F0F0F;
}

.section-filler {
  width: 100%;
  height: 0px; /* default desktop: tidak terlihat */
  background-color: #0f0f0f; /* warna sama dengan section berikutnya (about) */
  z-index: 2;
  position: relative;
}


@media (max-width: 1200px), (min-width: 1600px) {
  .section-filler {
    height: 80px; /* atau berapa pun sesuai kebutuhanmu */
  }
}

@media (max-width: 1024px) {

  header .container {
    flex-direction: column;
    align-items: center;
    gap: 1em; /* beri jarak antara logo dan navbar */
  }

  header nav {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  header nav ul {
    flex-direction: row; /* tetap horizontal */
    justify-content: center;
    flex-wrap: wrap; /* supaya menu tidak terpotong jika banyak */
    gap: 1em;
    padding: 0;
    margin: 0;
  }

  header nav ul li {
    list-style: none;
  }

  header nav ul li a {
    font-size: 18px;
  }

  .logo {
    margin-bottom: 0.5em;
  }

  #about h2 {
    font-size: 20px;
    padding-left: 2em;
    padding-top: 3em;
  }

  #about p {
    font-size: 15px;
    padding-left: 2em;
    padding-right: 2em;
  }

  .about-container {
    flex-direction: column;
    align-items: center;
    gap: 2em;
    padding: 2em;
    text-align: center;
  }

  .about-photo-wrapper {
    position: relative;
    top: 1em;
    left: unset;
    transform: none;
    width: 50vw;
    max-width: 300px;
    margin: 0 auto;
    z-index: 1;
  }

  .about-photo-wrapper::after {
    bottom: 0;
  }

  .about-photo {
    width: 100%;
    height: auto;
  }
  .svg-background-aboutme {
    top: 0px;
    width: 91%;
    height: 100%;
    object-position: center top;
  }

  .svg-foreground-aboutme {
    top: 0px;
    width: 91%;
    height: 100%;
    object-position: center top;
  }

  #projects h2 {
    text-align: left;
  }

  #projects p {
    font-size: 17px;
  }

  #contact h2 {
    text-align: left;
    font-size: 20px;
    margin-bottom: 10px;
    padding: 0em 1.5em;
    }
    
    #contact p {
    text-align: left;
    font-size: 17px;
    margin-bottom: 21px;
    padding: 0em 2em;
    }
}

@media (max-width: 768px) {
  .section-filler {
    height: 50px; /* atau 150px, tergantung rasio kosong di layar kamu */
    margin-top: -560px;
  }
}