:root {
    --primary: #3498db;
    --primary-dark: #2980b9;
    --bg-light: #f4f7f6;
    --bg-card: #ffffff;
    --text-main: #333333;
    --text-muted: #7f8c8d;
    --nav-bg: #2c3e50;
    --border-color: rgba(0, 0, 0, 0.05);
    --glass-bg: rgba(44, 62, 80, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
}

body.dark {
    --bg-light: #0f172a;
    --bg-card: #1e293b;
    --text-main: #f1f1f1;
    --text-muted: #cbd5e1;
    --nav-bg: #0f172a;
    --border-color: rgba(255, 255, 255, 0.05);
    --glass-bg: rgba(15, 23, 42, 0.85);
    --glass-border: rgba(255, 255, 255, 0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    opacity: 0;
    animation: fadeInPage 0.8s ease-in-out forwards;
    transition: background-color 0.5s ease, color 0.5s ease;
}

@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

nav {
    background-color: var(--nav-bg);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.4s ease;
}

nav .logo {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease;
}

nav .logo:hover {
    transform: scale(1.05);
}

.nav-container {
    display: flex;
    align-items: center;
    gap: 25px;
}

.menu {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
}

.menu a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.menu a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.menu a:hover::after, .menu a.active::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.menu a:hover, .menu a.active {
    color: var(--primary);
}

.dark-btn {
    background: transparent;
    color: #cbd5e1;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
    box-shadow: none;
    padding: 0;
}

.dark-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    transform: scale(1.1);
}

.dark-btn .sun-icon {
    display: block;
}
.dark-btn .moon-icon {
    display: none;
}

body.dark .dark-btn .sun-icon {
    display: none;
}
body.dark .dark-btn .moon-icon {
    display: block;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.container {
    padding: 40px 10%;
    flex: 1;
}

section {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 80px 20px;
    margin: 40px auto;
    width: 100%;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-img-container, .about-img {
    width: 180px;
    height: 180px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ddd;
}

body.dark .hero-img-container, body.dark .about-img {
    border-color: #1e293b;
}

.hero-img-container:hover, .about-img:hover {
    transform: scale(1.05) rotate(3deg);
    box-shadow: 0 15px 35px rgba(52, 152, 219, 0.2);
}

.profile-img, .about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

.hero p {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 25px;
}

.hero a, button {
    display: inline-block;
    background-color: var(--primary);
    color: white;
    border: none;
    text-decoration: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hero a:hover, button:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 7px 14px rgba(52, 152, 219, 0.4);
    transform: translateY(-2px);
}

.hero a:active, button:active {
    transform: translateY(1px);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 50px;
}

section h2 {
    margin-bottom: 20px;
    font-size: 2rem;
    color: var(--text-main);
}

.info-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.info-item strong {
    color: var(--primary);
}

.skill-item {
    margin-bottom: 20px;
}

.skill-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.progress-bar {
    height: 10px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

body.dark .progress-bar {
    background: #444;
}

.progress {
    height: 100%;
    background: var(--primary);
    border-radius: 10px;
    width: 0%; /* Mulai dari 0% agar memicu animasi memanjang */
    /* cubic-bezier memberikan akselerasi premium melambat di akhir secara mulus */
    transition: width 2s cubic-bezier(0.1, 1, 0.1, 1);
}

.grid-keahlian {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.card {
    background: var(--bg-card);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: 0.4s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.card h3 {
    margin-bottom: 12px;
    color: var(--text-main);
}

.card p {
    line-height: 1.6;
    color: var(--text-muted);
}

.proyek-img {
    height: 180px;
    width: 100%;
    background: linear-gradient(45deg, var(--primary), #a855f7);
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.proyek-img span {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    padding: 8px 15px;
    border-radius: 8px;
    color: white;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: bold;
}

.card:hover .proyek-img {
    transform: scale(1.03);
}

.btn-proyek {
    display: inline-block;
    margin-top: 15px;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--primary);
    text-decoration: none;
    transition: 0.3s;
}

.btn-proyek:hover {
    color: var(--primary-dark);
}

.about-section h3 {
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: 15px;
}

.education-item {
    padding-left: 15px;
    border-left: 3px solid var(--primary);
    margin-bottom: 20px;
}

.edu-date {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: bold;
    margin-bottom: 4px;
}

.edu-school {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-main);
}

.hobby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
}

.hobby-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    font-weight: 500;
    color: var(--text-main);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.hobby-card:hover {
    transform: translateY(-3px);
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

.contact-page {
    text-align: center;
    max-width: 1000px;
    margin: 40px auto;
}

.contact-header h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.contact-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 40px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 10px;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 35px 25px;
}

.contact-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.contact-card h3 {
    font-size: 1.3rem;
    margin-bottom: 8px;
    color: var(--text-main);
}

.contact-detail {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 25px;
    word-break: break-all;
}

.btn-contact {
    display: block;
    width: 100%;
    background-color: var(--primary);
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: bold;
    border-radius: 25px;
    box-shadow: 0 4px 6px rgba(52, 152, 219, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-contact:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 7px 14px rgba(52, 152, 219, 0.3);
    transform: translateY(-3px);
}

footer {
    background-color: var(--nav-bg);
    color: white;
    text-align: center;
    padding: 25px;
    font-size: 14px;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    transition: background-color 0.4s ease;
}

@media (max-width: 992px) {
    nav {
        padding: 15px 5%;
    }
    .container {
        padding: 40px 5%;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
        position: relative;
        z-index: 1002;
    }
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-10px);
    }
    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
    }
    .menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        max-width: 320px;
        height: 100vh;
        background-color: var(--glass-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left: 1px solid var(--glass-border);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0 50px;
        gap: 35px;
        box-shadow: -10px 0 30px rgba(0,0,0,0.15);
        transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        z-index: 1000;
    }
    .menu.active {
        right: 0;
    }
    .menu a {
        font-size: 22px;
        font-weight: 500;
        width: 100%;
        padding: 10px 0;
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portofolio Saya - Tentang</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <div class="logo">PORTFOLIO</div>
        <div class="nav-container">
            <div class="menu" id="navMenu">
                <a href="index.html">Beranda</a>
                <a href="tentang.html" class="active">Tentang</a>
                <a href="kontak.html">Kontak</a>
            </div>
            <button id="darkModeBtn" class="dark-btn" aria-label="Toggle Dark Mode">
                <svg class="sun-icon" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0s-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0s-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41l-1.06-1.06zm1.06-12.37c-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06c.39-.38.39-1.03 0-1.41zm-12.37 12.37c-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06c.39-.38.39-1.03 0-1.41z"/></svg>
                <svg class="moon-icon" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12.3 22c5.52 0 10-4.48 10-10 0-2.2-.71-4.24-1.92-5.91-.4-.55-1.12-.5-1.45.1-.96 1.77-2.85 2.96-5.01 2.96-3.14 0-5.69-2.55-5.69-5.69 0-2.16 1.19-4.05 2.96-5.01.6-.33.65-1.05.1-1.45C11.64 1.71 9.6 1 7.4 1 3.42 1 1 4.42 1 8.4c0 7.51 6.1 13.6 13.6 13.6 1.4 0 2.74-.21 4-.61.6-.19.86-.81.47-1.28l-.77-.77c-.4-.4-1.04-.32-1.4.16-1.16 1.54-2.98 2.5-5.03 2.5z"/></svg>
            </button>
            <div class="menu-toggle" id="menuToggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <main class="container">
        <section class="about-section">
            <div class="about-grid">
                <div class="about-img">
                    <img src="assets/foto-profil.jpg" alt="Andrean Firmansyah">
                </div>
                <div>
                    <h2>Tentang Saya</h2>
                    <p>Halo! Saya Andrean Firmansyah, seorang Junior Front-end Developer yang saat ini sedang menempuh pendidikan di SMA Negeri 1 Gebog. Perjalanan saya di dunia teknologi dimulai sejak saya bersekolah di SMP Negeri 1 Gebog, di mana rasa ingin tahu saya terhadap cara kerja internet mulai tumbuh.</p>
                    <p>Selama masa sekolah, saya secara otodidak mempelajari pengembangan web dengan fokus pada desain UI/UX yang intuitif serta optimasi performa. Saya percaya bahwa menjadi seorang pengembang bukan hanya soal menulis kode, melainkan tentang bagaimana memecahkan masalah dan memberikan nilai nyata bagi pengguna melalui antarmuka yang bersih dan responsif. Saya selalu bersemangat untuk mempelajari teknologi baru demi mengasah kemampuan teknis saya lebih jauh.</p>
                    
                    <div class="info-list">
                        <div class="info-item"><strong>Alamat:</strong> Gondosari RT 08 RW 02</div>
                        <div class="info-item"><strong>Email:</strong> andreanf763@gmail.com</div>
                        <div class="info-item"><strong>Status:</strong> Freelance / Open for Work</div>
                    </div>
                </div>
            </div>

            <div class="about-grid" style="align-items: flex-start; margin-top: 40px;">
                <div>
                    <h3>Keahlian Teknis</h3>
                    <div style="margin-top: 20px;">
                        
                        <div class="skill-item">
                            <div class="skill-info">
                                <span>HTML & CSS</span>
                                <span>0%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress" data-target="90"></div>
                            </div>
                        </div>
                        
                        <div class="skill-item">
                            <div class="skill-info">
                                <span>JavaScript</span>
                                <span>0%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress" data-target="75"></div>
                            </div>
                        </div>
                        
                        <div class="skill-item">
                            <div class="skill-info">
                                <span>UI Design (Figma)</span>
                                <span>0%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress" data-target="80"></div>
                            </div>
                        </div>
                        
                    </div>
                </div>

                <div>
                    <h3>Riwayat Pendidikan</h3>
                    <div style="margin-top: 20px;">
                        <div class="education-item">
                            <div class="edu-date">2022 - Sekarang</div>
                            <div class="edu-school">SMA NEGERI 1 GEBOG</div>
                        </div>
                        <div class="education-item">
                            <div class="edu-date">2019 - 2022</div>
                            <div class="edu-school">SMP NEGERI 1 GEBOG</div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="margin-top: 40px;">
                <h3>Minat & Hobi</h3>
                <div class="hobby-grid" style="margin-top: 20px;">
                    <div class="hobby-card">Responsive Design</div>
                    <div class="hobby-card">Open Source</div>
                    <div class="hobby-card">Cyber Security</div>
                    <div class="hobby-card">Gaming</div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        &copy; 2026 Portofolio Andrean. Semua Hak Dilindungi.
    </footer>

    <script src="script.js"></script>
</body>
</html>    }
    .dark-btn {
        position: relative;
        z-index: 1002;
    }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .info-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .hero h1 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .hero-img-container, .about-img {
        width: 150px;
        height: 150px;
    }
    .contact-header h2 {
        font-size: 2rem;
    }
}