/* body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100, "YTLC" 500;
  --bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--bg-opacity));
} */
body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100, "YTLC" 500;

  /* Warna dasar background */
  --bg-opacity: 1;
  background-color: rgb(10 25 47 / var(--bg-opacity));
  /* background-color: rgb(23 18 39 / var(--bg-opacity)); */

  /* TAMBAHKAN INI UNTUK EFEK GRADASI */
  /* background-image: radial-gradient(
    600px circle at var(--x) var(--y),
    rgba(29, 78, 216, 0.15),
    transparent 80%
  ); */
  /* background-image: radial-gradient(
    600px circle at var(--x) var(--y),
    rgba(217, 70, 239, 0.15),
    transparent 80%
  ); */
  background-image: radial-gradient(
    400px circle at top left,
    /* Ukuran dikecilkan untuk mobile */ rgba(29, 78, 216, 0.15),
    transparent 80%
  );

  background-attachment: fixed;
}

/* Custom CSS dari Anda */
.redjaa-text-primary {
  --text-opacity: 1;
  color: rgb(204 214 246 / var(--text-opacity));
  /* color: rgb(240 253 244 / var(--text-opacity)); */
}

.redjaa-text-secondary {
  --text-opacity: 1;
  color: rgb(136 146 176 / var(--text-opacity));
  /* color: rgb(240 253 244 / var(--text-opacity)); */
}

.px-6rem {
  padding-left: 6rem;
  padding-right: 6rem;
}

/* --- TATA LETAK RESPONSIVE (MOBILE-FIRST) --- */

/* Gaya default untuk mobile */
#kolom-kiri,
#kolom-kanan {
  padding-left: 2rem;
  padding-right: 2rem;
}

#kolom-kiri {
  padding-top: 3rem;
  padding-bottom: 3rem; /* Memberi jarak antara header & konten di mobile */
}

#konten-kiri-wrapper {
  gap: 1rem;
}

#kolom-kanan {
  padding-top: 0;
  padding-bottom: 0;
}

/* Gaya untuk Desktop (md ke atas, 768px) 
  Di sinilah kita mengaktifkan layout fixed!
*/
@media (min-width: 768px) {
  body {
    background-image: radial-gradient(
      600px circle at var(--x) var(--y),
      rgba(29, 78, 216, 0.15),
      transparent 80%
    );
  }

  #kolom-kiri {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    padding-top: 0; /* Reset padding top */
    padding-bottom: 0; /* Reset padding bottom */
    padding-left: 6rem;
    padding-right: 3rem;
  }

  #konten-kiri-wrapper {
    height: 100%; /* Membuat konten di dalamnya bisa di-align */
    gap: 4rem;
  }

  #kolom-kanan {
    padding-left: 3rem;
    padding-right: 6rem;
  }

  #kolom-kanan section {
    /* Setiap section dibuat setinggi layar agar navigasi lebih smooth */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* --- GAYA NAVIGASI & SOSMED (TIDAK BERUBAH) --- */

#navigasi-utama .nav-link {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

#navigasi-utama .nav-link .nav-text {
  --text-opacity: 1;
  color: rgb(136 146 176 / var(--text-opacity));
  transition: all 0.3s ease;
}

#navigasi-utama .nav-indicator {
  display: inline-block;
  width: 30px;
  height: 1px;
  --background-opacity: 0.6;
  background-color: rgb(
    204 214 246 / var(--background-opacity)
  ); /* Teks Sekunder */
  transition: all 0.1s ease;
}

#navigasi-utama .nav-link:hover .nav-indicator,
#navigasi-utama .nav-link.active .nav-indicator {
  width: 60px;
  --text-opacity: 1;
  color: rgb(204 214 246 / var(--text-opacity)); /* Teks Primer */
}

#navigasi-utama .nav-link:hover .nav-text,
#navigasi-utama .nav-link.active .nav-text {
  --text-opacity: 1;
  color: rgb(204 214 246 / var(--text-opacity)); /* Teks Primer */
}

.fs-4 a {
  --text-opacity: 1;
  color: rgb(136 146 176 / var(--text-opacity));
  transition: color 0.3s ease;
}

.fs-4 a:hover {
  --text-opacity: 1;
  color: rgb(204 214 246 / var(--text-opacity)) !important; /* Teks Primer */
}