/* Responsive Styles */
@media (max-width: 992px) {
    #navbar {
        gap: 20px;
    }

    .hero-left h1 {
        font-size: 3rem;
    }

    .rotating-text-container {
        font-size: 1.7rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .skills-grid {
        grid-template-columns: 1fr;
    }
    /* Tambahkan aturan ini untuk kartu-kartu yang juga berada di grid-3 */
    .service-card,
    .portfolio-card,
    .certificate-card {
        max-width: 450px; /* Atur lebar maksimum kartu, sesuaikan nilai ini */
        margin-left: auto;   /* Pusatkan kartu secara horizontal */
        margin-right: auto;  /* Pusatkan kartu secara horizontal */
    }
}

@media (max-width: 768px) {
    .nav {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 30px;
    }

    .logo {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    #navbar {
        display: none; /* Hide by default for mobile */
        flex-direction:column;
        /* PERHATIAN: 'width: 35rem;' ini sangat besar untuk sebagian besar layar HP. */
        /* Jika ini adalah menu hamburger, pertimbangkan untuk mengubahnya menjadi 'width: 100%;' atau 'max-width: 300px;' */
        /* Ini bisa menjadi penyebab utama tampilan 'aneh' jika memicu scrollbar horizontal. */
        width: 100%; /* Ubah ini untuk memastikan tidak ada overflow */
        max-width: 400px; /* Atau batasi lebar menu hamburger agar tidak terlalu besar */
        gap: 15px;
        background-color: var(--card-bg);
        padding: 20px 0;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        position: absolute; /* Pastikan posisi relatif terhadap parent yang tepat */
        top: 60px; /* Sesuaikan posisi agar di bawah logo/burger */
        left: 50%;
        transform: translateX(-50%); /* Pusatkan secara horizontal */
        z-index: 9999;
    }

    #navbar.active {
        display: flex;
    }

    #navbar li {
        width: 100%;
        text-align: center;
    }

    #navbar li a {
        padding: 10px 0;
        display: block;
    }

    .burger {
        display: flex;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .burger.toggle .line-1 {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .burger.toggle .line-2 {
        opacity: 0;
    }

    .burger.toggle .line-3 {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    #hero {
        flex-direction: column-reverse; /* Image on top for mobile */
        text-align: center;
    }

    .hero-left, .hero-right {
        width: 100%;
        text-align: center;
    }

    .hero-right {
        margin-bottom: 30px;
    }

    .hero-left h1 {
        font-size: 2.5rem;
    }

    .rotating-text-container {
        justify-content: center;
        font-size: 1.5rem;
        height: 30px;
    }

    .paragrap {
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .btn {
        /* PERHATIAN: 'margin-left: 27px;' ini mungkin menyebabkan tombol tidak terpusat dengan baik */
        /* Ubah menjadi 'margin: 0 auto;' jika Anda ingin tombol terpusat di tengah container */
        margin: 0 auto; /* Pusatkan tombol jika menggunakan flex-direction: column */
        width: 90%;
    }

    .grid-3 {
        grid-template-columns: 1fr; /* Pastikan kartu bertumpuk */
        /* gap: 30px; (ini dari styles.css, akan tetap berfungsi untuk jarak vertikal) */
    }

    /* PENTING: Aturan ini membuat kartu lebih ramping dan terpusat */
    .service-card,
    .portfolio-card,
    .certificate-card {
        max-width: 400px; /* Lebar maksimum kartu, sesuaikan nilai ini */
        margin-left: auto;   /* Pusatkan kartu secara horizontal */
        margin-right: auto;  /* Pusatkan kartu secara horizontal */
        /* Padding internal kartu tetap dari styles.css (30px) */
    }

    .section-title {
        font-size: 1.8rem;
    }

    .skills-list {
        flex-direction: column;
        gap: 20px;
    }

    .contact .main-container {
        flex-direction: column;
    }

    .contact-left, .contact-right {
        min-width: unset;
        width: 100%;
    }

    #contact .section-title {
        text-align: center;
    }

    .contact-left p {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .main-container {
        padding: 0 15px;
    }

    .hero-left h1 {
        font-size: 2rem;
    }

    .rotating-text-container {
        font-size: 1.2rem;
        height: 25px;
    }

    .paragrap {
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    /* Sesuaikan lebar dan padding untuk layar yang lebih kecil lagi */
    .service-card,
    .portfolio-card,
    .certificate-card {
        max-width: 500px; /* Lebih ramping untuk layar sangat kecil */
        padding: 20px; /* Kurangi padding internal untuk lebih banyak ruang konten */
    }

    .service-card h4 {
        font-size: 1.3rem;
    }

    .portfolio-title h4 {
        font-size: 1.2rem;
    }

    .education-info h4 {
        font-size: 1.1rem;
    }

    .skills-list li {
        font-size: 0.9rem;
    }

    .certificate-title h4 {
        font-size: 1rem;
    }
}