/* ==================
   1. PENGATURAN GLOBAL & TEMA
   =================== */

/* :root adalah tempat terbaik untuk menyimpan variabel CSS */
:root {
  --warna-bg: #0a192f; /* Biru Navy Gelap */
  --warna-teks-primer: #ccd6f6; /* Abu-abu Kebiruan Cerah */
  --warna-teks-sekunder: #8892b0; /* Abu-abu */
  --warna-teks-judul: #e6f1ff; /* Putih Cerah */
  --warna-aksen: #64ffda; /* Mint/Cyan Cerah */
  --warna-aksen-transparan: rgba(100, 255, 218, 0.1);
  --warna-kartu-bg: rgba(17, 34, 64, 0.5); /* Biru sedikit transparan */

  --font-sans: "Inter", sans-serif;
}

/* Reset dasar */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Untuk efek scroll-spy nanti */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--warna-bg);
  color: var(--warna-teks-sekunder);
  font-size: 16px;
  line-height: 1.6;
}

/* ==================
   2. LAYOUT UTAMA (GRID)
   Ini adalah teknik kuncinya!
   =================== */
.wrapper {
  display: grid;
  /* Kolom 1 (kiri) lebarnya 40% dari total, tapi maksimal 450px.
      Kolom 2 (kanan) mengambil sisa ruang (1fr).
    */
  grid-template-columns: minmax(300px, 40%) 1fr;

  /* Beri jarak antar kolom */
  gap: 2rem;

  /* Batasi lebar maksimum dan beri padding */
  max-width: 1400px;
  margin: 0 auto;
  padding: 5rem 3rem;
  position: relative; /* Diperlukan untuk z-index */
  z-index: 1; /* Mengangkat semua konten di atas spotlight */
}

/* ==================
   3. STYLING KOLOM KIRI (SIDEBAR)
   =================== */
.sidebar-kiri {
  /* Ini adalah trik kedua:
      1. 'position: sticky' membuatnya menempel saat scroll.
      2. 'top: 5rem' memberinya jarak dari atas layar.
      3. 'align-self: start' mencegahnya meregang.
    */
  position: sticky;
  top: 5rem;
  align-self: start;

  /* Atur tinggi agar tidak melebihi layar saat menempel */
  height: calc(100vh - 10rem);

  /* Gunakan Flexbox untuk mengatur konten di dalamnya */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Mendorong ikon sosial ke bawah */
}

/* MENJADI INI: */
.info-diri h1 {
  color: var(--warna-teks-judul);
  font-size: 2.75rem; /* (Sedikit lebih kecil) */
  font-weight: 900;
  margin-bottom: 0.5rem;
}

/* MENJADI INI: */
.info-diri h2 {
  color: var(--warna-teks-primer);
  font-size: 1.25rem; /* (Lebih ramping) */
  font-weight: 700;
  margin-bottom: 1rem;
}

/* MENJADI INI: */
.info-diri p {
  font-size: 1rem; /* (Ukuran standar body) */
  max-width: 400px; /* Batasi lebar teks */
}

/* Navigasi di sidebar */
.navigasi-halaman {
  margin: 3rem 0;
}

.navigasi-halaman ul {
  list-style: none;
}

.navigasi-halaman li {
  margin-bottom: 1rem;
}

.navigasi-halaman a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--warna-teks-sekunder);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

/* Garis kecil di sebelah kiri teks navigasi */
.navigasi-halaman a span {
  display: inline-block;
  width: 30px;
  height: 1px;
  background-color: var(--warna-teks-sekunder);
  margin-right: 1rem;
  transition: all 0.3s ease;
}

/* Efek hover & active */
.navigasi-halaman a:hover,
.navigasi-halaman a.active {
  color: var(--warna-teks-judul);
}

.navigasi-halaman a:hover span,
.navigasi-halaman a.active span {
  width: 60px;
  background-color: var(--warna-teks-judul);
}

/* Ikon Sosial Media */
.sosial-media {
  list-style: none;
  display: flex; /* Menyusun ikon secara horizontal */
  gap: 1.5rem; /* Jarak antar ikon */
}

.sosial-media a {
  color: var(--warna-teks-sekunder);
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.sosial-media a:hover {
  color: var(--warna-teks-judul);
  transform: translateY(-3px); /* Efek 'terangkat' */
}

/* ==================
   4. STYLING KOLOM KANAN (KONTEN)
   =================== */
.konten-kanan {
  /* Kita beri padding-top agar section pertama tidak
       terlalu menempel dengan header (pada layar kecil) */
  padding-top: 1rem;
}

.konten-section {
  margin-bottom: 6rem; /* Jarak besar antar bagian (About, Exp, Proj) */
  /* Untuk 'scroll-spy' JS nanti */
  scroll-margin-top: 5rem;
}

.konten-section h2 {
  color: var(--warna-teks-judul);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;

  /* Hanya tampil di layar besar */
  display: none;
}

/* MENJADI INI: */
#about p {
  font-size: 1rem; /* (Ukuran standar body, sama seperti sidebar) */
  margin-bottom: 1.5rem;
}

/* ==================
   5. STYLING KARTU (EXPERIENCE & PROJECTS)
   =================== */
.list-card {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  background-color: transparent; /* Awalnya transparan */
  transition: all 0.3s ease;
}

.list-card:hover {
  background-color: var(--warna-kartu-bg); /* Beri background saat di-hover */
  transform: translateY(-5px); /* Efek 'terangkat' */
  box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
}

.list-card a {
  text-decoration: none;
  color: var(--warna-teks-judul);
}

.list-card .card-date {
  color: var(--warna-teks-sekunder);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

/* MENJADI INI: */
.list-card .card-title {
  font-size: 1.1rem; /* (Judul kartu sedikit lebih ramping) */
  font-weight: 700;
  color: var(--warna-teks-judul);
  margin-bottom: 0.25rem;
}

/* Ikon panah kecil di judul */
.list-card .card-title i {
  font-size: 0.8em;
  transform: translateY(-2px);
  display: inline-block;
  transition: transform 0.3s ease;
}

.list-card:hover .card-title i {
  transform: translate(3px, -5px); /* Efek panah bergerak */
}

.list-card .card-subtitle {
  color: var(--warna-teks-primer);
  font-weight: 500;
  margin-bottom: 1rem;
}

/* MENJADI INI: */
.list-card .card-body p {
  font-size: 0.95rem; /* (Sedikit lebih kecil dari teks 'About') */
  margin-bottom: 1rem;
}

/* Styling khusus untuk kartu PROYEK (dengan gambar) */
.project-card {
  display: grid;
  grid-template-columns: 150px 1fr; /* Kolom gambar 150px, sisa untuk teks */
  gap: 1.5rem;
  align-items: center;
}

.project-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--warna-teks-sekunder);
}

/* ==================
   6. PIL TEKNOLOGI (Tech Pills)
   =================== */
.tech-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap; /* Agar bisa pindah baris jika tidak muat */
  gap: 0.5rem;
  margin-top: 1rem;
}

.tech-pills li {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: var(--warna-aksen-transparan);
  color: var(--warna-aksen);
  border-radius: 99px; /* Membuatnya bulat */
  font-size: 0.8rem;
  font-weight: 500;
}

/* ==================
   EFEK CURSOR SPOTLIGHT
   =================== */
.spotlight {
  /* 1. Membuatnya menempel di layar, menutupi semua */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 100% tinggi viewport */

  /* 2. Pastikan di belakang konten (.wrapper z-index: 1) */
  z-index: 0;

  /* 3. Membuatnya 'tembus' klik mouse */
  pointer-events: none;

  /* 4. Ini adalah gradiennya (menggunakan warna tema Anda) */
  background-image: radial-gradient(600px circle at 0 0, var(--warna-aksen-transparan), /* Harus ada di :root */ transparent 40%);
  background-repeat: no-repeat;
}

/* ==================
   7. DESAIN RESPONSIVE
   =================== */

/* === BREAKPOINT 1: TABLET (992px dan di bawahnya) === */
@media (max-width: 992px) {
  /* 1. Ubah layout utama menjadi 1-kolom */
  .wrapper {
    grid-template-columns: 1fr; /* Hanya satu kolom! */
    padding: 4rem 2rem; /* Kurangi padding samping */
    gap: 3rem; /* Beri jarak antara sidebar dan konten */
  }

  /* 2. MATIKAN "STICKY" SIDEBAR */
  .sidebar-kiri {
    position: static; /* Sangat penting! Matikan 'sticky' */
    height: auto; /* Biarkan tinggi-nya otomatis */
  }

  /* 3. Tampilkan judul 'h2' di konten kanan */
  /* (Sebelumnya kita sembunyikan di layar besar) */
  .konten-section h2 {
    display: block; /* Tampilkan "Experience", "Projects", dll. */
  }

  /* 4. Sembunyikan navigasi scroll-spy */
  /* Karena sidebar tidak lagi 'sticky', navigasi ini
       tidak lagi relevan dan memakan tempat. */
  .navigasi-halaman {
    display: none;
  }

  /* 5. Sesuaikan ukuran font header */
  .info-diri h1 {
    font-size: 2.5rem;
  }
}

/* === BREAKPOINT 2: PONSEL KECIL (576px dan di bawahnya) === */
@media (max-width: 576px) {
  /* 1. Kurangi padding lebih lanjut */
  .wrapper {
    padding: 3rem 1rem;
  }

  /* 2. Tumpuk kartu proyek (gambar di atas, teks di bawah) */
  .project-card {
    grid-template-columns: 1fr; /* Tumpuk gambar dan teks */
    gap: 1rem; /* Kurangi jarak */
  }

  /* 3. Atur ulang font header agar tidak terlalu besar */
  .info-diri h1 {
    font-size: 2rem;
  }

  .info-diri h2 {
    font-size: 1.15rem;
  }
}