/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s;
    color: #000; /* Default text color for light mode */
}

.dark-mode {
    background-color: #121212;
    color: #fff; /* Text color for dark mode */
}

/* Header */
header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 2rem;
    background-color: #f4f4f4;
    margin-left: 2rem;
}

nav {
    padding: 20px 40px;
}

nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}


nav ul li {
    margin-left: 25px;
}

.nav-links a {
    margin: 0 10px;
    text-decoration: none;
    color: #333; /* Default link color for light mode */
}

.dark-mode .nav-links a {
    color: #fff; /* Link color for dark mode */
}

.dark-mode header {
    background-color: #121212;
}


.dark-mode nav ul li a {
    color: #fff; /* Link color for dark mode */
}

#theme-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #333; /* Default icon color for light mode */
}

.dark-mode #theme-toggle {
    color: #fff; /* Icon color for dark mode */
}

/* Hero Section */
#hero {
    text-align: center;
    padding: 4rem 2rem;
}

#hero h1 {
    font-size: 3rem;
    margin: 0;
    color: #000; /* Default text color for light mode */
}

.dark-mode #hero h1 {
    color: #fff; /* Text color for dark mode */
}

#hero p {
    font-size: 1.5rem;
    color: #666; /* Default text color for light mode */
}

.dark-mode #hero p {
    color: #aaa; /* Lighter text color for dark mode */
}

.tech-stack {
    display: flex;
    gap: 8px; /* Jarak antar kotak */
    flex-wrap: wrap; /* Supaya kotak berpindah baris jika ruang tidak cukup */
    justify-content: center;
    align-items: center;
    padding: 1rem;             /* Tambahkan sedikit ruang di sekitar */
    width: 80%; /* Kontainer memiliki lebar 80% dari parent */
    max-width: 800px; /* Batas maksimum lebar kontainer */
    margin: 0 auto; /* Agar kontainer selalu berada di tengah */
}

.nav-links {
    display: flex;
    gap: 8px; /* Jarak antar kotak */
    flex-wrap: wrap; /* Supaya kotak berpindah baris jika ruang tidak cukup */
    justify-content: center;
    align-items: center;
    padding: 1rem;             /* Tambahkan sedikit ruang di sekitar */
    width: 80%; /* Kontainer memiliki lebar 80% dari parent */
    max-width: 800px; /* Batas maksimum lebar kontainer */
    margin: 0 auto; /* Agar kontainer selalu berada di tengah */
}

.tech-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Lebar kotak */
    height: 50px; /* Tinggi kotak */
    border: 2px solid #ccc; /* Border kotak */
    border-radius: 8px; /* Sudut kotak membulat */
    background-color: var(--tech-frame-bg, #f9f9f9); /* Warna kotak sesuai tema */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Bayangan kotak */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    text-align: center;
    margin-bottom: 0; /* Tambahkan jarak untuk mengatur posisi teks */
}

.tech-item {
    text-align: center; /* Memastikan teks dan frame sejajar di tengah */
    display: flex;
    font-weight: bold;
    flex-direction: column; /* Menumpuk gambar di atas teks */
    align-items: center; /* Pusatkan gambar dan teks */
    gap: 0.5rem; /* Jarak antara gambar dan teks */
}

    


.tech-stack .tech-item {
    flex: 1 1 20.66%; /* Membatasi setiap item agar memiliki lebar maksimal 16.66% */
    max-width: 20.66%; /* Pastikan tidak lebih dari 6 per baris */
    box-sizing: border-box; /* Agar padding dan border dihitung dalam lebar */
    margin: 0 1px;
}

.tech-stack .tech-item > p {
    font-size: 12px !important; /* Tambahkan !important jika perlu untuk memprioritaskan */
    line-height: 1.4;
    margin: 0;
    text-align: center; /* Teks rata tengah */
    color: #333;       /* Tambahkan warna teks jika diperlukan */
}

body.dark-mode .tech-frame {
    background-color: #333333;
    border-color: #444444;
}

.tech-frame img {
    max-width: 70%; /* Ukuran logo relatif */
    max-height: 70%; /* Ukuran logo relatif */
}

.tech-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px; /* Jarak antara teks dan frame */
    color: #000; /* Default text color for light mode */
}



.dark-mode .tech-title {
    color: #fff; /* Text color for dark mode */
}

/* Blog Section */
#blog {
    padding: 2rem;
    background-color: #f9f9f9;
}

.dark-mode #blog {
    background-color: #121212;
}

#blog h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #000; /* Default text color for light mode */
}

.dark-mode #blog h2 {
    color: #fff; /* Text color for dark mode */
}

.blog-posts {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.post {
    background-color: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
    color: #000; /* Default text color for light mode */
}

.dark-mode .post {
    background-color: #333;
    color: #fff; /* Text color for dark mode */
}

.post h3 {
    margin: 0;
}

.post p {
    color: #666; /* Default text color for light mode */
}

.dark-mode .post p {
    color: #aaa; /* Lighter text color for dark mode */
}

.post a {
    text-decoration: none;
    color: #007BFF; /* Default link color for light mode */
}

.dark-mode .post a {
    color: #1e90ff; /* Link color for dark mode */
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem;
    background-color: #f4f4f4;
}

.dark-mode footer {
    background-color: #121212;
}

.social-links a {
    margin: 0 10px;
    text-decoration: none;
    color: #333; /* Default link color for light mode */
}

.dark-mode .social-links a {
    color: #fff; /* Link color for dark mode */
}

/* Heading Styles */
h1 {
    font-family: 'Poppins', sans-serif; /* Menggunakan font Poppins */
    font-size: 48px; /* Ukuran font besar agar menonjol */
    font-weight: 700; /* Berat font lebih tebal */
    color: #222; /* Warna teks */
    text-transform: uppercase; /* Ubah teks menjadi huruf kapital */
    letter-spacing: 2px; /* Memberikan jarak antar huruf */
    transition: transform 0.3s ease, color 0.3s ease; /* Animasi transformasi dan perubahan warna */
}

h1:hover {
    transform: scale(1.1); /* Efek perbesaran saat hover */
    color: #ff6347; /* Warna berubah saat hover */
}

.dark-mode h1 {
    color: #fff; /* Text color for dark mode */
}

.dark-mode h1:hover {
    color: #ff6347; /* Warna tetap berubah saat hover */
}

/* About Me Section */
#about {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.about-header h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 0.5rem;
    text-transform: lowercase; /* Menghilangkan huruf kapital */
}

.dark-mode .about-header h1 {
    color: #fff;
}

.underline {
    width: 100px;
    height: 3px;
    background-color: #007BFF; 
    margin-bottom: 2rem;
}

.about-content {
    display: flex;
    gap: 2rem;
}

.about-left {
    flex: 1;
    text-align: center;
}

.photo-frame {
    width: 200px;
    height: 200px;
    border: 5px solid #007BFF;
    border-radius: 50%; /* Frame bulat */
    overflow: hidden;
    margin: 0 auto;
}

.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-left h2 {
    font-size: 1.5rem;
    margin-top: 1rem;
    color: #333;
}

.dark-mode .about-left h2 {
    color: #fff;
}

.about-right {
    flex: 2;
    margin-right: 170px; /* Sesuaikan dengan margin navigasi */
}

.about-right p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
}

.dark-mode .about-right p {
    color: #ddd;
}

.about-right h3 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    color: #333;
}

.dark-mode .about-right h3 {
    color: #fff;
}

.about-right ul {
    list-style-type: disc;
    margin-left: 2rem;
    color: #555;
}

.dark-mode .about-right ul {
    color: #ddd;
}

.download-cv {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    background-color: #007BFF;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.download-cv:hover {
    background-color: #0056b3;
}

#dynamic-text {
    margin-bottom: 2rem; /* Atur jarak bawah elemen dynamic-text */
}

#tech-stack {
    margin-top: 0; /* Opsional: pastikan tidak ada margin tambahan di atas tech-stack */
}

/* Media query untuk layar kecil */
@media (max-width: 768px) {
    .tech-stack {
        gap: 0.75rem; /* Sesuaikan jarak antar elemen */
    }

    .tech-frame {
        width: 60px;  /* Kurangi ukuran frame untuk layar kecil */
        height: 60px;
    }

    .tech-item p {
        font-size: 0.15rem; /* Perkecil teks pada layar kecil */
    }


    header {
        justify-content: center; /* Pusatkan navigasi di layar kecil */
        flex-direction: column; /* Ubah tata letak menjadi vertikal */
        margin-left: 0; /* Hapus margin yang menyebabkan pergeseran */
        text-align: center;
    }

    nav ul {
        flex-direction: column; /* Buat menu bertumpuk */
        gap: 0.5rem; /* Sesuaikan jarak */
    }

    nav ul li {
        margin: 0; /* Hapus margin yang menyebabkan pergeseran */
    }

    nav ul li:last-child {
        margin-left: 0; /* Hapus nilai margin-left besar */
    }

    .about-content {
        flex-direction: column; /* Ubah menjadi vertikal */
        align-items: center; /* Pusatkan elemen */
        text-align: center; /* Teks berada di tengah */
    }

    .about-left {
        width: 100%;
    }

    .photo-frame {
        width: 150px; /* Perkecil ukuran foto */
        height: 150px;
    }

    .about-right {
        margin-right: 0; /* Hapus margin yang menyebabkan ketidakseimbangan */
        width: 90%;
    }

    .qr-code img {
        max-width: 100px; /* Pastikan QR Code tidak terlalu besar */
        height: auto;
    }
}

/* =====================================================
   FEATURED PROJECTS
===================================================== */

.featured-projects {
    position: relative;

    padding: 140px 0;

    /* LIGHT MODE */
    background: #f7f7f5;
    color: #111827;

    overflow: hidden;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


/* =====================================================
   DARK MODE
===================================================== */

.dark-mode .featured-projects {
    background: #0b0d0f;
    color: #f4f4f2;
}


/* =====================================================
   TECHNICAL GRID
===================================================== */

.featured-projects::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.035) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    pointer-events: none;
}


/* Dark mode grid */

.dark-mode .featured-projects::before {
    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );
}


/* =====================================================
   CONTAINER
===================================================== */

.projects-container {
    position: relative;

    z-index: 2;

    width: min(1180px, 90%);

    margin: 0 auto;
}


/* =====================================================
   HEADER
===================================================== */

.projects-header {
    max-width: 680px;

    margin-bottom: 45px;
}

.section-label {
    display: inline-block;

    margin-bottom: 18px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.22em;

    color: #6b7280;
}

.dark-mode .section-label {
    color: #8e969c;
}


.projects-header h2 {
    margin: 0;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -0.04em;

    color: #111827;
}

.dark-mode .projects-header h2 {
    color: #f4f4f2;
}


.projects-header p {
    max-width: 560px;

    margin-top: 22px;

    color: #6b7280;

    font-size: 16px;

    line-height: 1.7;
}

.dark-mode .projects-header p {
    color: #92999e;
}


/* =====================================================
   PROJECT GRID
===================================================== */

.projects-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}


/* =====================================================
   PROJECT CARD
===================================================== */

.project-card {
    position: relative;

    min-height: 440px;

    padding: 34px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border: 1px solid #d1d5db;

    background: #ffffff;

    overflow: hidden;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        background-color 0.3s ease;
}


/* Dark card */

.dark-mode .project-card {
    border-color: #252a2e;

    background: #101315;
}


.project-card:hover {
    transform: translateY(-6px);

    border-color: #9ca3af;
}

.dark-mode .project-card:hover {
    border-color: #596167;
}


/* =====================================================
   PROJECT NUMBER
===================================================== */

.project-number {
    position: absolute;

    top: 27px;

    right: 30px;

    font-family: monospace;

    font-size: 12px;

    color: #9ca3af;

    letter-spacing: 0.08em;
}

.dark-mode .project-number {
    color: #596167;
}


/* =====================================================
   CONTENT
===================================================== */

.project-content {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 520px;

    margin: 0 auto;

    text-align: center;
}


/* =====================================================
   PROJECT CATEGORY
===================================================== */

.project-category {
    display: block;

    width: 100%;

    margin-bottom: 20px;

    text-align: center;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.18em;

    color: #374151;

    opacity: 1;

    visibility: visible;
}


/* Dark mode */

.dark-mode .project-category {
    color: #a4acb1;
}


/* =====================================================
   PROJECT TITLE
===================================================== */

.project-content h3 {
    margin: 0 auto 15px;

    max-width: 430px;

    text-align: center;

    font-size: 30px;

    line-height: 1.15;

    font-weight: 500;

    letter-spacing: -0.025em;

    color: #111827;
}


/* Dark mode */

.dark-mode .project-content h3 {
    color: #f4f4f2;
}


/* =====================================================
   TECHNOLOGY STACK
===================================================== */

.project-stack {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 18px;

    font-family: monospace;

    font-size: 11px;

    line-height: 1.6;

    text-align: center;

    color: #4b5563;
}


/* Dark mode */

.dark-mode .project-stack {
    color: #a4acb1;
}


.project-stack span {
    color: #9ca3af;
}

.dark-mode .project-stack span {
    color: #555d62;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.project-content p {
    max-width: 400px;

    margin: 0 auto;

    color: #6b7280;

    font-size: 14px;

    line-height: 1.7;

    text-align: center;
}


/* Dark mode */

.dark-mode .project-content p {
    color: #858e94;
}


/* =====================================================
   CASE STUDY LINK
===================================================== */

.project-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 25px;

    color: #111827;

    font-size: 13px;

    text-decoration: none;

    transition: gap 0.3s ease;
}


/* Dark mode */

.dark-mode .project-link {
    color: #e5e8e9;
}


.project-link span {
    font-size: 18px;

    transition: transform 0.3s ease;
}


.project-link:hover {
    gap: 17px;
}


.project-link:hover span {
    transform: translateX(3px);
}


/* =====================================================
   PROJECT IMAGE
===================================================== */

.project-image {
    position: absolute;

    right: 0;

    bottom: 0;

    width: 48%;

    height: 48%;

    overflow: hidden;

    opacity: 0.25;

    transition:
        opacity 0.4s ease,
        transform 0.5s ease;
}


/* Dark mode image */

.dark-mode .project-image {
    opacity: 0.35;
}


.project-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255,255,255,0.2) 60%,
            transparent 100%
        );
}


/* Dark mode image overlay */

.dark-mode .project-image::after {
    background:
        linear-gradient(
            90deg,
            #101315 0%,
            rgba(16,19,21,0.2) 60%,
            transparent 100%
        );
}


.project-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: grayscale(100%);

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}


.project-card:hover .project-image {
    opacity: 0.65;

    transform: scale(1.03);
}


.project-card:hover .project-image img {
    filter: grayscale(30%);

    transform: scale(1.05);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

    .featured-projects {
        padding: 100px 0;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        min-height: 400px;
    }

}


@media (max-width: 600px) {

    .featured-projects {
        padding: 80px 0;
    }

    .projects-container {
        width: 88%;
    }

    .projects-header h2 {
        font-size: 42px;
    }

    .project-card {
        min-height: 420px;

        padding: 27px;
    }

    .project-content h3 {
        font-size: 26px;
    }

    .project-image {
        width: 70%;

        height: 42%;
    }

}