/* --- 
   STYLE.CSS - Tema Neo-Brutalism Dasar
   --- */

/* 1. Definisi Variabel (Pusat Kendali Tema) */
:root {
    /* Warna */
    --color-bg: #F5F5F5;       /* Latar belakang (sedikit off-white) */
    --color-text: #0A0A0A;       /* Teks (hitam pekat) */
    --color-white: #FFFFFF;    /* Warna kartu */
    --color-primary: #FFFF00;   /* Aksen utama (Kuning cerah) */ 
    --color-accent: #000000;    /* Aksen sekunder (Hijau cerah) */

    /* Font (dari CDN Google Fonts) */
    --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: 'Work Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Efek Neo-Brutalism */
    --border-main: 2px solid var(--color-text);
    --shadow-main: 6px 6px 0px var(--color-text);
    --shadow-small: 3px 3px 0px var(--color-text);
    --border-radius: 4px; /* Sedikit lengkungan agar tidak terlalu kaku */
}

/* 2. Reset & Setup Global */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    padding-bottom: 3rem;

    /* Ini adalah ANIMASI TRANSISI halaman sederhana */
    animation: pageFadeIn 0.4s ease-out;
}

/* Keyframe untuk animasi transisi */
@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. Utilitas & Layout */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem; /* Padding kiri-kanan */
}

/* 4. Komponen "Card" (Elemen utama Neo-brutalism) */
.card {
    background-color: var(--color-white);
    border: var(--border-main);
    box-shadow: var(--shadow-main);
    border-radius: var(--border-radius);
    padding: 1.5rem 2rem;
    margin-top: 1.5rem;
    overflow: hidden; /* Menjaga shadow tetap rapi */
}

/* 5. Komponen "Button" */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text);
    background-color: var(--color-primary); /* Warna kuning */
    padding: 12px 24px;
    border: var(--border-main);
    box-shadow: var(--shadow-small);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}

/* Efek hover Neo-brutalism: tombol "ditekan" */
.btn:hover {
    box-shadow: none;
    transform: translate(3px, 3px);
}

/* 6. Styling Header & Navigasi */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.nav-logo a {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--color-text);
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 0.5rem; /* Jarak antar tombol nav */
}

.nav-button {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    border: var(--border-main);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    transition: all 0.2s ease;
}

/* Tombol nav aktif (halaman saat ini) */
.nav-button.active {
    background-color: var(--color-primary); /* Kuning */
}

/* Tombol nav hover (bukan yang aktif) */
.nav-button:not(.active):hover {
    background-color: var(--color-bg);
    box-shadow: var(--shadow-small);
    transform: translate(-2px, -2px);
}


/* 7. Styling Hero Section (Beranda) */
.hero-section {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Kolom teks 2x lebih besar dari gambar */
    gap: 1.5rem;
    align-items: start;
}

.hero-text .hero-subtitle {
    font-family: var(--font-mono); /* Pakai font mono untuk "jabatan" */
    font-weight: 500;
    font-size: 1rem;
    color: #444; /* Sedikit abu-abu */
}

.hero-text h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 3rem;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar mengisi kotak */
    border: var(--border-main);
    border-radius: var(--border-radius);
}

/* 8. Styling Footer */
footer {
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: var(--border-main);
    color: #555;
}
.footer-links {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.footer-links a {
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}
.footer-links a:hover {
    text-decoration: underline;
}

/* 9. Responsif (Contoh sederhana untuk HP) */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 1rem;
    }
    .nav-links {
        /* Nanti bisa disembunyikan di balik tombol hamburger dgn JS */
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
    .nav-button {
        font-size: 0.9rem;
        padding: 6px 10px;
    }

    .hero-section {
        grid-template-columns: 1fr; /* Tumpuk di HP */
    }
    .hero-image {
        order: -1; /* Pindahkan gambar ke atas di HP */
    }
    .hero-text h1 {
        font-size: 2.5rem;
    }
}

/* --- 
   10. Styling Halaman Analisis & Tulisan
   --- */

/* Judul Halaman */
.page-header {
    text-align: center;
    background-color: var(--color-primary); /* Pakai warna primer untuk highlight */
    padding: 2rem;
}
.page-header h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

/* Kartu Highlight Skripsi */
.analysis-highlight {
    background-color: var(--color-white);
    border: 3px solid var(--color-accent); /* Pakai warna aksen (hijau) */
    box-shadow: 8px 8px 0px var(--color-accent);
}
.analysis-highlight h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2rem;
    margin: 0.5rem 0 1rem 0;
}
.analysis-highlight p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* Daftar Tulisan Lainnya */
.analysis-list {
    margin-top: 3rem;
}
.analysis-list h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.2rem;
    margin-bottom: -0.5rem; /* Agar lebih nempel dengan kartu pertama */
}
.analysis-list article.card {
    /* Sedikit override card default */
    margin-top: 2rem;
    transition: all 0.2s ease-out;
}
.analysis-list article.card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0px var(--color-text);
}
.analysis-list article.card h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0.25rem 0 0.75rem 0;
}

/* --- 
   11. Styling Halaman Portofolio Web (Versi Tanpa Gambar)
   --- */

/* Promo GitHub (Ini masih sama) */
.github-promo {
    text-align: center;
    background-color: var(--color-white);
    border: 3px solid var(--color-text);
}
.github-promo h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 0.75rem;
}
.github-promo .btn {
    background-color: color(--color-accent); /* Pakai warna hijau */
}
.github-promo .btn:hover {
    background-color: #FFFF00; /* Hijau sedikit lebih gelap */
}

/* Galeri Proyek (Ini masih sama) */
.project-gallery {
    margin-top: 3rem;
}
.project-gallery h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.2rem;
    margin-bottom: -0.5rem;
}

/* Kartu Proyek (Ini yang berubah) */
.project-card {
    /* Layout grid sudah dihapus */
    margin-top: 2rem;
    transition: all 0.2s ease-out;
}
.project-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0px var(--color-text);
}

/* Konten di dalam kartu (Ini yang berubah) */
.project-content {
    padding: 0; /* Hapus padding extra, karena card sudah punya padding */
}
.project-content h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0.25rem 0 0.75rem 0;
}
.project-content p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}


/* --- 
   12. Styling Halaman Pendidikan & Keahlian
   --- */

/* Judul Bagian */
.education-section h2,
.skill-section h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.2rem;
    margin-top: 3rem;
    margin-bottom: -0.5rem;
}

/* Daftar Pendidikan */
.education-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 kolom di desktop */
    gap: 1.5rem;
    margin-top: 2rem;
}

.education-card {
    /* override card default */
    border-width: 3px;
    transition: all 0.2s ease-out;
}
.education-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0px var(--color-text);
}

.education-year {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.9rem;
    color: #333;
}
.education-school {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0.25rem 0;
}
.education-degree {
    font-size: 1rem;
}

/* Bagian Keahlian */
.skill-section {
    margin-top: 2rem;
    background-color: var(--color-text); /* Latar hitam */
    color: var(--color-bg); /* Teks putih */
    border-color: var(--color-primary);
    box-shadow: 6px 6px 0px var(--color-primary);
}
.skill-section h2 {
    margin-top: 0;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 1rem;
}

.skill-category {
    margin-top: 1.5rem;
}
.skill-category h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-primary); /* Judul skill pakai warna kuning */
}
.skill-list {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.7;
    padding: 0.5rem 0;
}

/* Responsif untuk Halaman Pendidikan */
@media (max-width: 768px) {
    .education-list {
        grid-template-columns: 1fr; /* 1 kolom di HP */
    }
}

/* --- 
   13. Styling Halaman Sertifikasi
   --- */

.certification-section h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.2rem;
    margin-top: 3rem;
    margin-bottom: -0.5rem;
}

.certification-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 kolom di desktop */
    gap: 1.5rem;
    margin-top: 2rem;
}

.certification-card {
    /* override card default */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-width: 3px;
    border-color: var(--color-accent); /* Pakai warna hijau */
    transition: all 0.2s ease-out;
}
.certification-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0px var(--color-accent);
}

.cert-logo {
    width: 100px; /* Sesuaikan ukurannya */
    height: auto;
    margin-bottom: 1rem;
}

.cert-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}
.cert-issuer {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: #333;
    margin-top: auto; /* Mendorong issuer ke bagian bawah kartu */
}

/* Responsif untuk Halaman Sertifikasi */
@media (max-width: 768px) {
    .certification-list {
        grid-template-columns: 1fr; /* 1 kolom di HP */
    }
}

/* --- 
   14. Styling Modal (Pop-up)
   --- */

.modal-overlay {
    /* Defaultnya tersembunyi */
    display: none; 
    
    /* Tampilan */
    position: fixed; /* Menutupi seluruh layar */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Latar belakang semi-transparan */
    
    /* Layout */
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    z-index: 100; /* Selalu di paling depan */
}

.modal-image {
    width: 100%; /* Lebar penuh menyesuaikan modal */
    max-width: 600px; /* Batas lebar maks */
    margin: 1rem auto 1.5rem auto; /* Posisikan di tengah */
    display: block;
    border: var(--border-main);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-small);
}

.modal-content {
    position: relative;
    max-width: 700px; /* Batasi lebar modal */
    width: 100%;
    max-height: 85vh; /* Batasi tinggi modal */
    overflow-y: auto; /* Bisa di-scroll jika konten panjang */
    
    /* Animasi muncul */
    animation: modalFadeIn 0.3s ease-out; 
}

.modal-content h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2rem;
    margin: 0.5rem 0 1rem 0;
}

.modal-content p, .modal-content ul {
    font-size: 1.05rem;
    margin-bottom: 1rem;
}
.modal-content ul {
    margin-left: 1.5rem;
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text);
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.modal-close-btn:hover {
    color: #ff0000; /* Merah saat hover */
}

/* Animasi modal */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}