/* Ensure proper text rendering for screen readers */
/* Animasi untuk efek keluar */
.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Animasi untuk efek masuk */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.about-me {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 0;
}
/*========navbar==========*/
.about-me .group {
  display: grid;
  width: 100%; /* lebar sesuai Union.svg */
  height: auto; /* tinggi sesuai Union.svg */
  place-items: center;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.about-me .union,
.about-me .nav{
  grid-area: 1/1;
}


.about-me .union {
  
  width: 60%;
  height: auto;
  max-width: 90%;
  justify-content: center;
  align-items: center;
  z-index: 0;
  margin-top: 3%;
}

.about-me .nav {
  display: flex;
  justify-content: center;  /* tengah secara horizontal */
  align-items: center;      /* tengah vertikal */
  gap: 6%;                /* jarak antar menu */
  flex-wrap: wrap;          /* agar menu turun otomatis di layar sempit */
  margin: 0 auto;
  width: 60%;               /* fleksibel sesuai container */
  max-width: 1200px;        /* optional agar tidak terlalu lebar di desktop */
  transform: translateY(20%)
  translateX(-1%);
}


.about-me .text-wrapper-4 { /*project*/
  width: 9.19%;
  height: 25.44%;
  font-size: 1.5vw;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #000000;
  line-height: normal;
  z-index: 3;
  transform: translateX(13%);
}

.about-me .text-wrapper-5 { /*hobi*/

  width: 10.74%;
  height: 25.44%;
  font-size: 1.5vw;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #000000;
  line-height: normal;
  z-index: 3;
  transform: translateX(-13%);
}

.about-me .text-wrapper-6 { /*experience*/

  width: 14.51%;
  height: 25.44%;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  font-size: 1.5vw;
  color: #000000;
  line-height: normal;
  z-index: 3;
}

.about-me .text-wrapper-7 { /* about me */

  width: 12.51%;
  height: 25.44%;
  font-size: 1.5vw;
  min-width: fit-content;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  line-height: normal;
  z-index: 3;
}

.about-me .logo-link{
  display: inline-block; /* penting agar bisa punya ukuran */
  width: 15%; /* sama seperti .logo */
  height: auto;
  z-index: 3;
}
.about-me .logo {
  width: 100%;
  height: auto;
  object-fit: contain;
}


/*=======Konten Pertama=======*/

.about-me .intro-section {
  display: flex; /* susun horizontal */
  justify-content: space-between; /* beri jarak antar elemen */
  align-items: center; /* rata vertikal */
  padding: 5%;
  width: 100%;
  gap : 5%;
  min-height: 600px; /* beri tinggi cukup agar konten muat */
  box-sizing: border-box;
  position: relative;
}

.intro-section .intro-left,
.intro-section .intro-middle,
.intro-section .intro-right {
  flex: 1; /* semua punya lebar proporsional */
}

.intro-section .intro-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.intro-left .hello-my-name-is {
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: transparent;
  font-size: 2vw;
  letter-spacing: 0;
  line-height: normal;
}

.intro-left .text-wrapper {
  color: #000000;
}

.intro-left .span {
  color: #ddadad;
}

.intro-left .dance-with-life-the {
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 2vw;
  text-align: justify;
  letter-spacing: 0;
  line-height: normal;
}

.intro-section .intro-middle {
  display: grid;            /* gunakan grid, bukan flex */
  place-items: center;      /* ratakan isi ke tengah */
  position: relative;
  width: 100%;
  height: auto;
}

/* Semua item akan tumpuk di grid cell yang sama */
.intro-middle .img,
.intro-middle img.image,
.about-me .text-wrapper-8 {
  grid-area: 1 / 1;         /* semua masuk ke sel baris 1 kolom 1 */
}

/* styling masing-masing */
.intro-middle .img {
  width: 97%;
  height: 100%;
  z-index: 0; /* paling bawah */
}

.intro-middle img.image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1; /* di atas background */
  transform: translateY(-14%);
  transform: translateX();
}

.about-me .text-wrapper-8 {
  text-shadow: 0px 4px 4px #00000040;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #ddadad;
  font-size: 10vw;
  z-index: 2; /* paling atas */
  justify-self: end;   /* dorong ke kanan */
  align-self: start;   /* dorong ke atas */
  margin: 20px;        /* jarak aman */
  column-count: 2;
  transform: translateX(70%);
}




.intro-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: left;
}

.intro-right .text-wrapper-3 {
  font-family: "Inter-Bold", Helvetica;
  font-weight: 100%;
  color: #ddadad;
  font-size: 2vw;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.intro-right nav.component {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-width: 40%;
  height: 100%;
  gap: 5%;
  justify-content: center;
  transform: translateX(8%);
}

.intro-right .mdi-instagram {
  width: auto;
  height: auto;
  aspect-ratio: 1;
  transition: transform 0.3s ease-in-out;
}

.intro-right .ic-baseline-tiktok {
  width: auto;
  height: auto;
  aspect-ratio: 1;
  transition: transform 0.3s ease-in-out;
  transform: translateX(12%);
}

.intro-right .material-symbols {
  width: auto;
  height: auto;
  aspect-ratio: 1;
  transition: transform 0.3s ease-in-out;
}

/* Hover effect */
.intro-right .mdi-instagram:hover,
.intro-right .ic-baseline-tiktok:hover,
.intro-right .material-symbols:hover {
  transform: scale(1.2); /* Membesar 20% saat hover */
}


/*====== about left =====*/

.about-me .about-section{
  width: 100%;
  height: auto;
  z-index: 4;
}

.about-section .rectangle-4 {
  display: flex;
  flex-direction: row;
  left: -86px;
  width: 100%;
  gap: 15%;
  padding: 7%;
  height: auto;
  box-shadow: inset 0px 10px 15px #00000040;
  background: linear-gradient(
    360deg,
    rgba(221, 173, 173, 1) 38%,
    rgba(236, 210, 209, 1) 100%
  );
}


.rectangle-4 .about-left {
  height: 100%;
  width: 30%;
  display: grid;
  place-items: center;
}

.about-left .rectangle-5,
.about-left .rectangle-7,
.about-left .rectangle-6 {
  grid-area: 1/1;
}
.rectangle-4 .about-left .rectangle-5 {
  width: 27vw;
  aspect-ratio: 27 / 40;   /* rasio width:height yang sama */
  border-radius: 200px;
  border: 5px solid;
  border-color: #b6c5ca;
  transform: translate3d(-10%, -8%, 0)
}

.about-left img.rectangle-7 {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  z-index: 2;
}

.about-left .rectangle-6 {
  width: 27vw;
  aspect-ratio: 27 / 40;   /* rasio width:height yang sama */
  border-radius: 200px;
  border: 5px solid;
  border-color: #c7c0b6;
  transform: translate3d(10%, 8%, 0);
  z-index: 1;
}

.rectangle-4 .about-rigth{
  height: 100%;
  width: 70%;
  align-items: center;
  justify-content: center;
}

.about-rigth .i-am-an-introverted {
  width: 100%;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #fbfbfb;
  font-size: 2vw;
  text-align: justify;
  letter-spacing: 0;
  line-height: normal;
}

.about-rigth .text-wrapper-2 {
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #fbfbfb;
  font-size: 8vw;
  text-align: justify;
  letter-spacing: 0;
  line-height: normal;
}




.about-me .vector {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 1061px;
}

.about-me .rectangle {
  position: absolute;
  top: 907px;
  left: 1250px;
  width: 343px;
  height: 37px;
  background-color: #b6c5ca;
  border-radius: 50px;
  transform: rotate(-135deg);
}

.about-me .div {
  position: absolute;
  top: 884px;
  left: 1100px;
  width: 452px;
  height: 37px;
  background-color: #c7c0b6;
  border-radius: 50px;
  transform: rotate(-135deg);
}

.about-me .rectangle-2 {
  position: absolute;
  top: 70px;
  left: -179px;
  width: 343px;
  height: 37px;
  background-color: #b6c5ca;
  border-radius: 50px;
  transform: rotate(45deg);
}

.about-me .rectangle-3 {
  position: absolute;
  top: 93px;
  left: -134px;
  width: 452px;
  height: 37px;
  background-color: #c7c0b6;
  border-radius: 50px;
  transform: rotate(45deg);
}








/* Default: Desktop tetap absolute (layout asli) */
/* ================= RESPONSIVE FIX ================= */
/* ================= MOBILE ================= */
@media (max-width: 767px) {

  /* Intro section vertikal */
  .intro-section {
    flex-direction: column;
    gap: 20px;
    padding: 5%;
    min-height: auto; /* otomatis sesuai konten */
    z-index: 3;
  }

  .intro-left, .intro-middle, .intro-right {
    width: 100%;
  }

  .intro-left .hello-my-name-is,
  .intro-left .dance-with-life-the {
    font-size: 4vw;
    text-align: center;
  }

  /* ================= INTRO MIDDLE ================= */
  .intro-middle {
    display: grid;
    place-items: center;
    width: 100%;
    height: auto; /* otomatis menyesuaikan isi */
  }

  .intro-middle .img {
    width: 80%;
    height: auto;
    object-fit: contain;
    z-index: 0;
  }

  .intro-middle img.image {
    width: 80%;
    height: auto;
    object-fit: contain;
    z-index: 1;
    transform: translateY(-13%);
  }

  /* Tetap 2 kolom untuk teks */
  .about-me .text-wrapper-8 {
    font-size: 12vw;       /* responsive font */
    color: #ddadad;
    text-align: center;
    justify-self: end;
    align-self: center;
    transform: translateX(40%) translateY(-90%);
    column-count: 2;       /* dipertahankan menjadi 2 kolom */
    column-gap: 5%;        /* jarak antar kolom */
  }

  /* Social icons */
  .intro-right {
    display: flex;
    flex-direction: column;
    align-items: center;;
  }

  .intro-right .component {
    display: flex;
    gap: 10%;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    transform: translateX(0);
  }
  .intro-right .text-wrapper-3{
    transform: translateX(7%);
    font-size: 4vw;
    align-items: center;
  }

}
.intro-right .mdi-instagram,
.intro-right .ic-baseline-tiktok,
.intro-right .material-symbols {
  height: 40px;
  width: 40px;

}
.div, .rectangle, .rectangle-2, .rectangle-3{
  display: none;
}