/* ======================================== */
/*          STYLE.CSS LENGKAP (Revisi)    */
/* ======================================== */

/* Reset Dasar & Variabel */
:root {
    --primary-color: #00bcd4; /* Cyan Terang */
    --secondary-color: #ff4081; /* Pink Cerah */
    --dark-bg: #121212; /* Hitam Sedikit Lebih Terang */
    --medium-bg: #1e1e1e; /* Abu-abu Sangat Gelap */
    --light-bg: #2c2c2c; /* Abu-abu Gelap */
    --text-light: #f1f1f1;
    --text-medium: #bdbdbd;
    --text-dark: #1a1a1a;
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Inter', sans-serif; /* Ganti ke Inter */
    --transition-speed: 0.4s;
    --transition-smooth: cubic-bezier(0.25, 0.8, 0.25, 1); /* Transisi lebih halus */
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    --shadow-light: 0 3px 8px rgba(0, 0, 0, 0.15);
    --border-radius-sm: 5px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 20px;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Ukuran font dasar */
}

body {
    font-family: var(--font-secondary);
    line-height: 1.7;
    background-color: var(--dark-bg);
    color: var(--text-light);
    overflow-x: hidden; /* Mencegah scroll horizontal */
    -webkit-font-smoothing: antialiased; /* Teks lebih halus di Webkit */
    -moz-osx-font-smoothing: grayscale; /* Teks lebih halus di Firefox */
}

/* Utilitas */
.container {
    max-width: 1140px; /* Sedikit lebih lebar */
    margin: 0 auto;
    padding: 0 1.5rem; /* Default padding */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--text-light); /* Default warna heading */
}

h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); } /* Ukuran font responsif */
h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 2.5rem;
    text-align: center;
    color: var(--primary-color);
    position: relative;
}
h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); }

p {
    margin-bottom: 1.2rem;
    color: var(--text-medium); /* Warna teks paragraf sedikit lebih redup */
    max-width: 65ch; /* Batasi lebar teks untuk keterbacaan */
}
p.subtitle {
     max-width: 70ch;
     margin-left: auto;
     margin-right: auto;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}
a:hover { color: var(--secondary-color); }

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-md); /* Default border radius untuk gambar */
}
ul { list-style: none; }

/* Tombol CTA (Call to Action) */
.cta-button, .cta-button-outline {
    display: inline-block;
    padding: 0.8rem 2rem;
    border: 2px solid transparent;
    border-radius: 50px; /* Tombol lebih bulat */
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-smooth);
    text-align: center;
    margin-right: 0.8rem;
    margin-top: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cta-button:last-child, .cta-button-outline:last-child { margin-right: 0; }

.cta-button {
    background-color: var(--primary-color);
    color: var(--text-dark);
    border-color: var(--primary-color);
}
.cta-button:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--text-light);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 4px 15px rgba(var(--secondary-color-rgb, 255 64 129), 0.3); /* Gunakan RGB untuk shadow */
}

.cta-button-outline {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.cta-button-outline:hover {
    background-color: var(--primary-color);
    color: var(--text-dark);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb, 0 188 212), 0.3);
}
.cta-button-outline i, .cta-button i { margin-left: 0.5rem; }

/* Style Section Title */
.section-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    margin: 0.7rem auto 3rem;
    border-radius: 2px;
}
.contact-subtitle {
    text-align: center;
    max-width: 600px;
    margin: -2rem auto 3rem auto;
    color: var(--text-medium);
    font-size: 1.1rem;
}

/* Ikon Sosial Media */
.social-links a {
    color: var(--text-medium);
    font-size: 1.5rem;
    margin: 0 0.7rem;
    transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
    display: inline-block; /* Penting untuk transform */
}
.social-links a:hover {
    color: var(--primary-color);
    transform: scale(1.2) translateY(-2px);
}
.hero-socials { margin-top: 2rem; }
.footer-social-links { margin-bottom: 1rem; }
.footer-social-links a { font-size: 1.6rem; margin: 0 0.8rem;}

/* ======================================== */
/*             Header / Navbar              */
/* ======================================== */
.navbar {
    background-color: rgba(18, 18, 18, 0.8); /* Warna lebih gelap dengan transparansi */
    backdrop-filter: blur(10px); /* Efek blur (jika didukung browser) */
    -webkit-backdrop-filter: blur(10px);
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0; left: 0; z-index: 1000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
    transition: background-color var(--transition-speed) ease, padding var(--transition-speed) ease;
}
.navbar.scrolled { /* Class ditambahkan oleh JS saat scroll */
    background-color: rgba(18, 18, 18, 0.95);
    padding: 0.8rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar .logo {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-light);
    transition: color var(--transition-speed) ease;
}
.navbar .logo:hover { color: var(--primary-color); }

/* Desktop Navigation Links */
.nav-links ul { display: flex; align-items: center; }
.nav-links li { margin-left: 2rem; }
.nav-links a {
    color: var(--text-medium);
    padding: 0.5rem 0;
    position: relative;
    font-weight: 500; /* Sedikit lebih tebal */
    letter-spacing: 0.3px;
    transition: color var(--transition-speed) ease;
}
.nav-links a::after {
    content: ''; position: absolute; width: 0; height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    bottom: -4px; left: 50%; transform: translateX(-50%);
    transition: width var(--transition-speed) var(--transition-smooth);
    border-radius: 1px;
}
.nav-links a:hover, .nav-links a.active { color: var(--text-light); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* Hamburger Button */
.hamburger {
    display: none; /* Sembunyikan di desktop */
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1100; /* Di atas mobile nav */
}

/* Mobile Navigation Menu */
.mobile-nav {
    display: none; /* Sembunyikan secara default */
    position: fixed;
    top: 0; right: -100%; /* Mulai dari luar layar kanan */
    width: 70%;
    max-width: 300px;
    height: 100vh;
    background-color: var(--medium-bg);
    padding-top: 6rem; /* Jarak dari atas */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    z-index: 1050; /* Di bawah hamburger, di atas konten */
    transition: right var(--transition-speed) var(--transition-smooth);
}
.mobile-nav.active {
    right: 0; /* Muncul dari kanan */
}
.mobile-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mobile-nav li {
    width: 100%;
    text-align: center;
}
.mobile-nav a {
    display: block;
    padding: 1.2rem 1.5rem;
    color: var(--text-light);
    font-size: 1.1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--light-bg);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}
.mobile-nav a:hover {
    background-color: var(--primary-color);
    color: var(--text-dark);
}
.mobile-nav li:last-child a { border-bottom: none; }

/* ======================================== */
/*              Hero Section                */
/* ======================================== */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Pusatkan teks di hero */
    background: linear-gradient(rgba(18, 18, 18, 0.85), rgba(18, 18, 18, 0.95)),
                url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80')
                no-repeat center center/cover; /* Ganti URL background jika perlu */
    position: relative;
    padding-top: 80px; /* Jarak dari navbar fixed */
    color: var(--text-light);
}
/* .hero-overlay { /* Jika ingin overlay terpisah * /
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 18, 18, 0.85), rgba(18, 18, 18, 0.95));
    z-index: 1;
} */
.hero-section .container {
    position: relative;
    z-index: 2;
}
.hero-title {
    font-weight: 700;
    margin-bottom: 0.8rem;
}
.hero-title .highlight { color: var(--primary-color); }
.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 400;
    color: var(--text-medium);
    margin-bottom: 2rem;
    max-width: 65ch; /* Lebar teks */
    margin-left: auto; margin-right: auto;
}
.hero-buttons { margin-top: 2rem; }
.scroll-down {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-medium);
    font-size: 1.8rem;
    animation: bounce 2.5s infinite ease-in-out;
    opacity: 0.7;
    transition: color var(--transition-speed) ease;
}
.scroll-down:hover { color: var(--primary-color); animation-play-state: paused; }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-15px); }
  60% { transform: translateX(-50%) translateY(-8px); }
}

/* ======================================== */
/*             About Section                */
/* ======================================== */
.about-section {
    padding: 6rem 0;
    background-color: var(--medium-bg);
    overflow: hidden; /* Agar reveal tidak meluber */
}
.about-content {
    display: flex;
    align-items: center; /* Pusatkan vertikal */
    gap: 3rem; /* Jarak antara teks dan gambar */
    flex-wrap: wrap; /* Wrap jika layar kecil */
}
.about-text {
    flex: 1 1 55%; /* Lebar fleksibel, basis 55% */
    min-width: 300px; /* Lebar minimum sebelum wrap */
}
.about-text h3 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}
.about-text p { max-width: none; } /* Hapus batasan lebar default p */

.about-image-container {
    flex: 1 1 35%; /* Lebar fleksibel, basis 35% */
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 280px;
}
.profile-picture {
    width: 300px; /* Ukuran tetap untuk lingkaran */
    height: 300px;
    border-radius: 50%; /* Membuat gambar melingkar */
    object-fit: cover; /* Pastikan gambar menutupi area tanpa distorsi */
    border: 6px solid var(--light-bg); /* Border halus */
    box-shadow: 0 0 30px rgba(0, 188, 212, 0.3); /* Shadow dengan warna primer */
    transition: transform var(--transition-speed) var(--transition-smooth);
}
.profile-picture:hover {
    transform: scale(1.05);
}

/* ======================================== */
/*             Skills Section               */
/* ======================================== */
.skills-section { padding: 6rem 0; background-color: var(--dark-bg); }
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Ukuran minimum item lebih besar */
    gap: 2rem;
    margin-top: 3rem;
}
.skill-item {
    background-color: var(--medium-bg);
    padding: 2.5rem 1.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-light);
    text-align: center;
    transition: transform var(--transition-speed) var(--transition-smooth),
                box-shadow var(--transition-speed) var(--transition-smooth),
                background-color var(--transition-speed) var(--transition-smooth);
    border: 1px solid transparent; /* Placeholder for hover border */
}
.skill-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
    background-color: var(--light-bg);
    border-color: rgba(var(--primary-color-rgb, 0 188 212), 0.5);
}
.skill-icon {
    font-size: 3.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    display: inline-block;
    transition: transform var(--transition-speed) var(--transition-smooth);
}
.skill-item:hover .skill-icon {
    transform: scale(1.1) rotate(-5deg);
}
.skill-item h3 {
    margin-bottom: 0.8rem;
    font-size: 1.25rem;
    color: var(--text-light);
}
.skill-item p {
    font-size: 0.9rem;
    color: var(--text-medium);
    margin-bottom: 0;
    line-height: 1.5;
}

/* ======================================== */
/*          Portfolio Section (Slider)      */
/* ======================================== */
.portfolio-section { padding: 6rem 0; background-color: var(--medium-bg); overflow: hidden;}

.portfolio-slider-container {
    position: relative;
    width: 100%;
    margin-top: 3rem;
    /* Ruang untuk tombol panah di sisi */
    padding: 0 60px; /* Default padding for buttons */
    box-sizing: border-box;
}

/* Viewport slider (area yang terlihat) */
.portfolio-slider {
    width: 100%;
    overflow: hidden;
}

/* Track yang berisi SEMUA item dan bergerak */
.portfolio-track {
    display: flex;
    /* Transisi lebih halus dengan cubic-bezier kustom */
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform; /* Optimasi performa */
}

/* Styling untuk setiap item portofolio */
.portfolio-item {
    flex-shrink: 0; /* Jangan biarkan item menyusut */
    flex-grow: 0;   /* Jangan biarkan item membesar */
    /* Default: 3 item per slide */
    flex-basis: calc(100% / 3);
    box-sizing: border-box;
    padding: 0 0.75rem; /* Jarak antar item (kiri kanan) */

    /* Visual styling */
    position: relative;
    border-radius: var(--border-radius-lg); /* Rounded UI */
    overflow: hidden; /* Penting agar overlay terpotong */
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Gambar di dalam item */
.portfolio-image {
    width: 100%;
    height: 280px; /* Tinggi gambar konsisten */
    object-fit: cover;
    display: block;
    border-radius: var(--border-radius-lg); /* Cocokkan radius item */
    transition: transform 0.6s ease;
}

/* Overlay item (muncul saat hover) */
.portfolio-overlay {
    position: absolute;
    bottom: 0; /* Mulai dari bawah */
    left: 0;
    width: 100%;
    height: 100%; /* Tutupi seluruh item */
    background: linear-gradient(to top, rgba(18, 18, 18, 0.95), rgba(18, 18, 18, 0.4));
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Konten mulai dari bawah */
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    opacity: 0;
    transform: translateY(30px); /* Mulai sedikit dari bawah */
    transition: opacity 0.4s ease, transform 0.4s ease;
    border-radius: var(--border-radius-lg); /* Cocokkan radius item */
    box-sizing: border-box;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
    transform: translateY(0);
}
/* Zoom out gambar saat overlay muncul */
.portfolio-item:hover .portfolio-image {
    transform: scale(1.05);
}

.portfolio-overlay h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    font-size: 1.4rem;
    transform: translateY(10px);
    transition: transform 0.4s ease 0.1s; /* Delay sedikit */
}
.portfolio-overlay p {
    margin-bottom: 1.2rem;
    font-size: 0.95rem;
    max-width: 90%;
    color: var(--text-medium);
    transform: translateY(10px);
    transition: transform 0.4s ease 0.15s;
}
.portfolio-overlay .btn-overlay {
    transform: translateY(10px);
    transition: background-color 0.3s ease, transform 0.4s ease 0.2s;
}

/* Munculkan elemen overlay saat hover */
.portfolio-item:hover .portfolio-overlay h3,
.portfolio-item:hover .portfolio-overlay p,
.portfolio-item:hover .portfolio-overlay .btn-overlay {
    transform: translateY(0);
}

/* Tombol di dalam overlay */
.btn-overlay {
    background-color: var(--primary-color);
    color: var(--text-dark);
    padding: 0.7rem 1.5rem;
    border-radius: 50px; /* Tombol bulat */
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-overlay:hover {
    background-color: var(--secondary-color);
    color: var(--text-light);
    transform: scale(1.05);
}
.btn-overlay i { margin-left: 0.5rem; }

/* Tombol Navigasi Slider (Panah) */
.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(44, 44, 44, 0.6); /* Sedikit transparan */
    color: var(--primary-color);
    border: none;
    border-radius: 50%;
    width: 45px; height: 45px;
    font-size: 1.2rem;
    cursor: pointer; z-index: 10;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.slider-button:hover:not(:disabled) {
    background-color: var(--primary-color);
    color: var(--text-dark);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
}
.slider-button.prev-btn { left: 10px; }
.slider-button.next-btn { right: 10px; }

.slider-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: rgba(60, 60, 60, 0.5);
    color: #888;
    transform: translateY(-50%) scale(1);
    box-shadow: none;
}

/* ======================================== */
/*            Contact Section               */
/* ======================================== */
.contact-section { padding: 6rem 0; background-color: var(--dark-bg); }
.contact-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
    text-align: center;
}
.contact-item {
    background-color: var(--medium-bg);
    padding: 2.5rem 1.5rem;
    border-radius: var(--border-radius-lg);
    transition: transform var(--transition-speed) var(--transition-smooth), box-shadow var(--transition-speed) var(--transition-smooth);
}
.contact-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}
.contact-item i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    display: block;
}
.contact-item h3 {
    color: var(--text-light);
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
}
.contact-item a, .contact-item span {
    color: var(--text-medium);
    display: block;
    word-break: break-word; /* Agar email panjang tidak meluber */
}
.contact-item a:hover { color: var(--secondary-color); }

/* ======================================== */
/*               Footer                     */
/* ======================================== */
.footer-section {
    background-color: #0c0c0c; /* Lebih gelap dari dark-bg */
    color: #aaa;
    text-align: center;
    padding: 2.5rem 0;
    margin-top: 4rem;
    font-size: 0.95rem;
}
.footer-section p {
    margin-bottom: 0;
    color: #888; /* Warna teks footer lebih redup */
}
.footer-section p i {
    margin: 0 0.2rem;
    font-size: 0.85rem;
}
.pulse { animation: pulse-heart 1.5s infinite ease-in-out; }
@keyframes pulse-heart {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
/* Di dalam bagian CSS Anda, bisa di bawah aturan .footer-section p yang sudah ada */

.footer-section .container p {
    text-align: center; /* Pastikan teks di dalam p selalu center */
    width: 100%; /* Pastikan paragraf mengambil lebar penuh container */
    margin-left: auto;  /* Bantu centering block (meski text-align biasanya cukup) */
    margin-right: auto; /* Bantu centering block (meski text-align biasanya cukup) */
}

/* Anda mungkin juga ingin memastikan social links juga center jika belum */
.footer-social-links {
    text-align: center; /* Center ikon di dalam div social links */
    margin-bottom: 1rem; /* Beri jarak ke teks copyright */
}

/* ======================================== */
/*         Scroll to Top Button             */
/* ======================================== */
#scroll-to-top {
    position: fixed;
    bottom: 25px; right: 25px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: var(--text-light);
    width: 45px; height: 45px;
    border: none;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.3rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    opacity: 0; visibility: hidden;
    transform: translateY(30px) scale(0.8);
    transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease, transform var(--transition-speed) var(--transition-smooth), background-color var(--transition-speed) ease;
    z-index: 999;
    cursor: pointer;
}
#scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
#scroll-to-top:hover {
    background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(var(--secondary-color-rgb, 255 64 129), 0.4);
}

/* ======================================== */
/*      Animasi Reveal saat Scroll        */
/* ======================================== */
.reveal {
    opacity: 0;
    transform: translateY(40px); /* Mulai sedikit dari bawah */
    transition: opacity 0.8s var(--transition-smooth), transform 1s var(--transition-smooth);
    will-change: opacity, transform;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Variasi arah reveal */
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-hero { transform: translateY(20px); transition-delay: 0.2s;} /* Delay untuk hero */

/* Staggered delay untuk item grid/list (opsional, bisa di-JS atau manual) */
.skills-grid .reveal:nth-child(1), .portfolio-track .reveal:nth-child(1) { transition-delay: 0.1s; }
.skills-grid .reveal:nth-child(2), .portfolio-track .reveal:nth-child(2) { transition-delay: 0.2s; }
.skills-grid .reveal:nth-child(3), .portfolio-track .reveal:nth-child(3) { transition-delay: 0.3s; }
.skills-grid .reveal:nth-child(4) { transition-delay: 0.4s; }
.skills-grid .reveal:nth-child(5) { transition-delay: 0.5s; }
.skills-grid .reveal:nth-child(6) { transition-delay: 0.6s; }
/* Sesuaikan jika jumlah item berbeda */

/* ======================================== */
/*           Responsiveness                 */
/* ======================================== */

/* Tablet (<= 992px) */
@media (max-width: 992px) {
    html { font-size: 15px; }
    .container { padding: 0 1.5rem; }

    .about-content { gap: 2rem; }
    .profile-picture { width: 250px; height: 250px; }

    /* Portfolio Slider: 2 item per slide */
    .portfolio-slider-container { padding: 0 50px; }
    .portfolio-item { flex-basis: calc(100% / 2); padding: 0 0.6rem; }
    .portfolio-image { height: 260px; }

    .skills-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
}

/* Mobile Besar (<= 768px) */
@media (max-width: 768px) {
    /* Tampilkan Hamburger, Sembunyikan Nav Desktop */
    .nav-links { display: none; }
    .hamburger { display: block; }
    /* Tampilkan Mobile Nav saat .active */
    .mobile-nav { display: block; }

    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { font-size: 1.2rem; }

    .about-content {
        flex-direction: column-reverse; /* Teks di atas, gambar di bawah */
        text-align: center;
        gap: 2.5rem;
    }
    .about-text { text-align: justify; } /* Justify teks di mobile */
    .about-text .cta-button-outline { display: block; margin: 1.5rem auto 0; width: fit-content; }
    .profile-picture { width: 220px; height: 220px; margin-top: 1rem; }

    .skills-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

    .contact-options { grid-template-columns: 1fr; gap: 1.5rem; }
    .contact-item { padding: 2rem 1rem; }

    .footer-section { padding: 2rem 0; }
}

/* Mobile Kecil (<= 576px) */
@media (max-width: 576px) {
    html { font-size: 14px; }
    .container { padding: 0 1rem; }

    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .cta-button, .cta-button-outline { padding: 0.7rem 1.5rem; font-size: 0.9rem; margin-top: 0.8rem; margin-right: 0.5rem; }
    .hero-buttons { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 1.5rem;}
    .hero-buttons a { margin-right: 0; width: 80%; }
    .hero-socials a { font-size: 1.3rem; margin: 0 0.5rem;}


    /* Portfolio Slider: 1 item per slide */
    .portfolio-slider-container { padding: 0 40px; } /* Ruang lebih kecil untuk tombol */
    .portfolio-item { flex-basis: 100%; padding: 0 0.25rem; }
    .portfolio-image { height: 240px; }
    .portfolio-overlay h3 { font-size: 1.2rem; }
    .portfolio-overlay p { font-size: 0.9rem; }
    .slider-button { width: 38px; height: 38px; font-size: 1rem; }
    .slider-button.prev-btn { left: 5px; }
    .slider-button.next-btn { right: 5px; }

    .skills-grid { grid-template-columns: 1fr; gap: 1rem; } /* 1 kolom di mobile kecil */
    .skill-item { padding: 1.5rem 1rem; }
    .skill-icon { font-size: 3rem; }

    .contact-subtitle { font-size: 1rem; }

    #scroll-to-top { width: 40px; height: 40px; font-size: 1.1rem; bottom: 15px; right: 15px;}
}