/* 1. RESET & BASE STYLE (Menerapkan Selector Universal dan Format Warna HSL) */
* {
    margin: 0; /* Menghapus margin default browser */
    padding: 0; /* Menghapus padding default browser */
    box-sizing: border-box; /* Memastikan padding dan border tidak menambah lebar/tinggi elemen */
}

body {
    font-family: 'Segoe UI', Arial, sans-serif; /* Menetapkan font utama halaman */
    background-color: hsl(220, 15%, 10%); /* Warna latar belakang gelap (dark mode) */
    color: #e0e0e0; /* Warna teks default abu-abu terang */
    line-height: 1.6; /* Jarak antar baris teks untuk keterbacaan */
    max-width: 800px; /* Lebar maksimum konten */
    /* Box Model: Margin atas 30px, Kiri/Kanan Auto (Tengah), Bawah 0 */
    margin: 30px auto 0 auto; /* Margin atas 30px, kiri/kanan otomatis (center), bawah 0 */
    padding: 0 15px; /* Padding kiri/kanan 15px untuk ruang di mobile */
}

/* 2. CONTAINER CARDS (Group Selector) */
header, section {
    background: hsl(220, 15%, 15%); /* Warna latar belakang card gelap */
    padding: 25px; /* Ruang dalam card */
    border-radius: 10px; /* Sudut card membulat */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Bayangan card untuk efek kedalaman */
    margin-bottom: 20px; /* Jarak antar card */
    border: 1px solid hsl(220, 15%, 20%); /* Garis tepi tipis card */
}

h2 {
    color: #ffffff; /* Warna judul putih */
    border-bottom: 2px solid hsl(204, 70%, 53%); /* Garis bawah biru di judul */
    padding-bottom: 5px; /* Ruang di bawah judul sebelum garis */
    margin-bottom: 15px; /* Jarak judul ke konten berikutnya */
    font-size: 1.3rem; /* Ukuran font judul */
}

/* 3. HEADER (Penerapan CSS Grid, Position Relative & Absolute) */
header {
    display: grid; /* Menggunakan CSS Grid untuk layout */
    grid-template-columns: 130px 1fr; /* Kolom 1: 130px (foto), Kolom 2: sisa ruang */
    gap: 20px; /* Jarak antar kolom */
    align-items: center; /* Vertikal center item di grid */
    position: relative; /* Referensi posisi untuk child absolute */
}

/* Badge "Open to Work" menggunakan Position Absolute */
.badge-status {
    position: absolute; /* Posisi absolut relatif ke header */
    top: 15px; /* Jarak 15px dari atas header */
    right: 15px; /* Jarak 15px dari kanan header */
    background-color: hsl(145, 63%, 42%); /* Warna latar hijau */
    color: white; /* Warna teks putih */
    padding: 4px 10px; /* Ruang dalam badge */
    font-size: 0.75rem; /* Ukuran font kecil */
    border-radius: 20px; /* Sudut badge melengkung (pil) */
    font-weight: bold; /* Teks tebal */
    transition: background-color 0.3s ease; /* Animasi warna hover */
    cursor: pointer; /* Kursor pointer saat hover */
}

.badge-status::after {
    content: "✓"; /* Menambah ikon centang setelah teks */
    margin-left: 5px; /* Jarak ikon ke teks */
}

.badge-status:hover {
    background-color: hsl(145, 63%, 35%); /* Warna hijau lebih gelap saat hover */
}

.profile-picture {
    border: 3px solid #3498db; /* Border biru (akan ditimpa border berikutnya) */
    border-radius: 50%; /* Membuat gambar bulat (akan ditimpa) */
    width: 120px; /* Lebar foto 120px */
    height: 120px; /* Tinggi foto 120px */
    border-radius: 50%; /* Membuat gambar bulat sempurna */
    object-fit: cover; /* Memotong gambar agar mengisi kotak tanpa gepeng */
    border: 4px solid #38bdf8; /* Border biru muda 4px */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); /* Bayangan di belakang foto */
    animation: floatPhoto 4s ease-in-out infinite; /* Animasi mengambang naik-turun */
}

@keyframes floatPhoto {
    0%, 100% { transform: translateY(0px); } /* Posisi awal dan akhir: normal */
    50%       { transform: translateY(-14px); } /* Posisi tengah: naik 14px */
}

/* Link dan Pseudo-class :hover */
a {
    color: #5dade2; /* Warna link biru muda */
    text-decoration: none; /* Hilangkan underline default */
    font-weight: 600; /* Teks semi-tebal */
}

a:hover {
    text-decoration: underline; /* Tambah underline saat hover */
}

/* 4. KEAHLIAN & DISPLAY PROPERTIES */
.skills-grid {
    display: grid; /* Grid layout untuk kartu skill */
    grid-template-columns: 1fr 1fr 1fr; /* 3 kolom sama lebar */
    gap: 15px; /* Jarak antar kartu */
    list-style: none; /* Hilangkan bullet list */
}

.skill-card {
    background: hsl(220, 15%, 20%); /* Latar kartu skill gelap */
    padding: 15px; /* Ruang dalam kartu */
    border-radius: 8px; /* Sudut kartu membulat */
    border-left: 4px solid #3498db; /* Garis kiri biru sebagai aksen */
    transition: all 0.3s ease; /* Animasi halus untuk semua properti */
    cursor: pointer; /* Kursor pointer saat hover */
}

.skill-card:hover {
    background-color: hsl(218, 85%, 51%); /* Latar biru terang saat hover */
    transform: translateY(-3px); /* Angkat kartu 3px ke atas */
    transition: all 0.3s ease; /* Animasi halus */
}

.skill-card h3 {
    font-size: 1rem; /* Ukuran font judul skill */
    color: #ffffff; /* Warna judul putih */
    margin-bottom: 5px; /* Jarak judul ke deskripsi */
}

/* Class untuk belajar Display & Visibility */
.aksesibilitas-tersembunyi {
    display: none; /* Sembunyikan elemen total (tidak占据空间) */
}

.elemen-cadangan {
    visibility: hidden; /* Sembunyikan tapi tetap占据空间 */
}

label {
    display: inline-block; /* Elemen inline tapi bisa diatur width/height/margin */
    margin-bottom: 5px; /* Jarak label ke input */
    font-weight: 600; /* Teks label tebal */
    color: #e0e0e0; /* Warna label abu-abu terang */
}

/* 5. LISTS & TABLES */
ol { padding-left: 20px; } /* Indent daftar berurutan */
li { margin-bottom: 8px; } /* Jarak antar item list */

table {
    width: 100%; /* Tabel penuh lebar container */
    border-collapse: collapse; /* Gabungkan border sel */
    margin-top: 10px; /* Jarak atas tabel */
}

th, td {
    padding: 10px; /* Ruang dalam sel */
    text-align: left; /* Teks rata kiri */
    border-bottom: 1px solid hsl(220, 15%, 25%); /* Garis pemisah baris */
}

th {
    background-color: hsl(220, 15%, 20%); /* Latar header tabel gelap */
    color: #ffffff; /* Teks header putih */
}

/* 6. FORMULIR DENGAN CSS GRID */
form {
    display: grid; /* Grid layout untuk form */
    gap: 15px; /* Jarak antar field */
}

.form-row {
    display: grid; /* Grid untuk baris 2 kolom */
    grid-template-columns: 1fr 1fr; /* 2 kolom sama lebar */
    gap: 15px; /* Jarak antar kolom */
}

input[type="text"], input[type="email"], textarea {
    width: 100%; /* Lebar penuh container */
    padding: 10px; /* Ruang dalam input */
    border: 1px solid hsl(220, 15%, 30%); /* Border abu-abu gelap */
    border-radius: 5px; /* Sudut input membulat */
    font-family: inherit; /* Warisi font body */
    background-color: hsl(220, 15%, 12%); /* Latar input sangat gelap */
    color: #e0e0e0; /* Teks input terang */
}

/* Pseudo-class :focus untuk Form */
input:focus, textarea:focus {
    outline: none; /* Hilangkan outline default browser */
    border-color: #3498db; /* Warna border biru saat fokus */
    border: 2px solid #3498db; /* Border tebal biru saat fokus */
}

button {
    background-color: #3498db; /* Latar tombol biru */
    color: white; /* Teks tombol putih */
    padding: 10px 20px; /* Ruang dalam tombol */
    border: none; /* Hilangkan border default */
    border-radius: 5px; /* Sudut tombol membulat */
    font-weight: bold; /* Teks tebal */
    cursor: pointer; /* Kursor pointer */
    transition: background 0.3s; /* Animasi warna latar */
    justify-self: start; /* Rata kiri di grid */
    display: inline-block; /* Elemen inline-block */
}

button:hover {
    background-color: #2980b9; /* Biru lebih gelap saat hover */
}

/* 7. FOOTER (Penerapan Position Sticky & Z-Index) */
footer {
    bottom: 0; /* Posisi bawah (untuk sticky) */
    background-color: #1a252f; /* Latar footer sangat gelap */
    color: #ffffff; /* Teks footer putih */
    text-align: center; /* Teks rata tengah */
    font-size: 0.9rem; /* Ukuran font kecil */
    padding: 15px; /* Ruang dalam footer */
    margin-top: 20px; /* Jarak atas ke konten */
    border-radius: 8px 8px 0 0; /* Sudut atas membulat */
    border-top: 1px solid hsl(220, 15%, 25%); /* Garis atas pemisah */
}

/* 8. MEDIA QUERY (Responsive untuk Tampilan HP) */
@media (max-width: 600px) {

    header {
        grid-template-columns: 1fr; /* 1 kolom di mobile */
        justify-items: center; /* Item rata tengah horizontal */
        text-align: center; /* Teks rata tengah */
    }
    .skills-grid {
        grid-template-columns: 1fr; /* 1 kolom skill di mobile */
    }
    .form-row {
        grid-template-columns: 1fr; /* 1 kolom form di mobile */
    }
}