/* Reset margin & padding dasar */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; 
}

/* =================================================== */
/* NAVIGASI UTAMA (DESKTOP)                            */
/* =================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#e8eef4;color:#173451;font-family:Arial,Helvetica,sans-serif}
.cv-shell{width:min(1180px,100%);margin:25px auto;background:#fff;box-shadow:0 12px 45px rgba(20,55,85,.16);overflow:hidden}
.hero{min-height:235px;display:grid;grid-template-columns:58% 42%;align-items:center;padding:40px 55px 28px;background:linear-gradient(105deg,#fbfdff 0,#eef6fd 62%,#d9e9f7 100%);overflow:hidden;border-bottom:1px solid #c9d9e7}
.cv-label{font-size:15px;letter-spacing:6px;color:#193654;margin-bottom:12px}
.hero-copy h1{margin:0;font-size:68px;line-height:.9;letter-spacing:2px;color:#092d57}
.hero-copy h2{margin:10px 0 11px;font-size:30px;color:#115d98}
.hero-copy p{margin:0;font-size:14px;letter-spacing:2px;color:#213c58}
.hero-art{height:170px;position:relative;overflow:hidden}
.code-window{position:absolute;top:5px;right:30px;width:78%;height:120px;background:#dce9f3;border-radius:10px;transform:skewY(-5deg);padding:20px 17px;box-shadow:0 7px 16px rgba(28,58,86,.12);font:12px/1.7 "Courier New",monospace;color:#173553}
.script-word{position:absolute;right:14px;bottom:4px;color:#152d49;font-family:cursive;font-size:31px;line-height:.92;transform:rotate(-5deg)}
.content{background:#fff;min-width:0}
.section{padding:20px 55px 18px}
.section+.section{border-top:1px solid #c8d8e6}
.section-heading{display:flex;align-items:center;gap:12px;border-bottom:2px solid #1472b6;padding-bottom:8px;margin-bottom:14px}
.section-heading>span{width:39px;height:39px;border-radius:50%;background:#0b5189;color:#fff;display:grid;place-items:center;font-size:16px;flex:0 0 39px}
.section-heading h3{margin:0;font-size:22px;color:#113559;letter-spacing:.6px}
.section-heading small{font-size:11px}
.section p{font-size:15px;line-height:1.55;margin:0}
.edu-row{display:grid;grid-template-columns:1fr 290px;gap:24px;align-items:center}
.edu-row h4,.timeline-content h4{font-size:19px;margin:0 0 6px}
.edu-row p{margin:0}
.edu-card{display:flex;align-items:center;gap:13px;background:#edf6fd;padding:14px 17px;border-radius:10px;border:1px solid #d9e8f4}
.edu-icon{font-size:40px;color:#144c7c}.edu-card b,.edu-card span{display:block}.edu-card b{font-size:15px}.edu-card span{font-size:12px;line-height:1.35;margin-top:3px}
.timeline-item{position:relative;padding-left:30px;border-left:2px solid #2f78ad;margin-left:9px}.timeline-dot{position:absolute;width:13px;height:13px;border-radius:50%;background:#0d66a2;left:-7.5px;top:2px}.timeline-content h4{display:flex;justify-content:space-between;gap:15px}.timeline-content time{font-size:13px;color:#1168aa;font-weight:500;white-space:nowrap}.timeline-content ul{margin:6px 0 0;padding-left:18px}.timeline-content li{font-size:14px;line-height:1.5;margin:3px 0}
.tech-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:15px}
.tech-item{text-align:center}.badge{height:58px;width:58px;margin:auto;border-radius:7px;display:grid;place-items:center;font-weight:900;font-size:19px;color:#fff;background:#1d6eae}.badge.html{background:#e9532d}.badge.css{background:#1474ba}.badge.js{background:#f3d342;color:#161616}.badge.boot{background:#6944a4}.badge.tw{background:#36acd3}.badge.git{background:#e85135}.badge.vscode{background:#1682be}.badge.figma{background:#be55a3}.tech-item span{font-size:12px;display:block;margin-top:6px}
.soft-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}.soft-grid>div,.hobby-grid>div{text-align:center}.soft-grid i{display:grid;place-items:center;width:58px;height:46px;margin:auto;border-radius:10px;background:#eef6fd;font-size:24px;font-style:normal}.soft-grid b{font-size:12px;line-height:1.25;display:block;margin-top:6px}
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.cert{display:grid;grid-template-columns:30px 1fr;gap:3px 10px;background:#edf5fb;border-radius:9px;padding:12px 14px;border:1px solid #dce9f3}.cert b{grid-row:1/3;font-size:21px}.cert span{font-size:13px;font-weight:700}.cert small{font-size:11px;line-height:1.3}
.hobby-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.hobby-grid i{font-style:normal;font-size:28px;color:#173f68;display:block;height:36px}.hobby-grid span{font-size:12px}
.closing{margin:12px 55px 38px;background:#e9f4fb;border-radius:11px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #d5e7f3}.closing p{font-size:15px;font-style:italic;line-height:1.45;margin:0;max-width:78%}.signature{font-family:cursive;font-style:italic;font-size:29px;color:#172f49;text-align:center;white-space:nowrap}.signature small{display:block;font:11px Arial,sans-serif;margin-top:-3px}
[id]{scroll-margin-top:20px}

@media (max-width:900px){.cv-shell{margin:0;box-shadow:none}.hero{padding:34px 35px 25px}.hero-copy h1{font-size:56px}.hero-art{height:150px}.section{padding-left:35px;padding-right:35px}.closing{margin-left:35px;margin-right:35px}.tech-grid{grid-template-columns:repeat(4,1fr);row-gap:16px}}
@media (max-width:640px){.hero{grid-template-columns:1fr;min-height:auto;padding:26px 22px 18px;gap:14px}.cv-label{font-size:10px;letter-spacing:4px}.hero-copy h1{font-size:45px}.hero-copy h2{font-size:21px;margin-top:8px}.hero-copy p{font-size:10px;letter-spacing:1px}.hero-art{height:115px}.code-window{right:10px;width:72%;height:82px;font-size:8px;padding:14px}.script-word{font-size:21px;right:0}.section{padding:14px 22px}.section-heading{gap:8px;margin-bottom:10px}.section-heading>span{width:30px;height:30px;flex-basis:30px;font-size:12px}.section-heading h3{font-size:16px}.section p{font-size:11px}.edu-row{grid-template-columns:1fr;gap:10px}.edu-row h4,.timeline-content h4{font-size:13px}.edu-row p,.timeline-content li{font-size:10px}.edu-card{max-width:100%;padding:9px 11px}.edu-icon{font-size:26px}.edu-card b{font-size:10px}.edu-card span{font-size:9px}.timeline-item{padding-left:18px;margin-left:4px}.timeline-dot{width:9px;height:9px;left:-5.5px}.timeline-content h4{gap:6px}.timeline-content time{font-size:8px}.timeline-content ul{padding-left:14px}.tech-grid{grid-template-columns:repeat(4,1fr);gap:12px}.badge{width:38px;height:38px;font-size:12px}.tech-item span{font-size:8px}.soft-grid{grid-template-columns:repeat(3,1fr);gap:12px;row-gap:16px}.soft-grid i{width:38px;height:32px;font-size:15px}.soft-grid b{font-size:8px}.cert-grid{grid-template-columns:1fr;gap:8px}.cert{padding:8px 10px;grid-template-columns:21px 1fr}.cert b{font-size:15px}.cert span{font-size:9px}.cert small{font-size:8px}.hobby-grid{grid-template-columns:repeat(5,1fr);gap:6px}.hobby-grid i{font-size:20px;height:27px}.hobby-grid span{font-size:8px}.closing{margin:10px 22px 22px;padding:12px 13px}.closing p{font-size:9px}.signature{font-size:19px}.signature small{font-size:7px}}
@media print{body{background:#fff}.cv-shell{width:100%;margin:0;box-shadow:none}.section,.hero{break-inside:avoid}.closing{break-inside:avoid}}

nav {
    background-color: #34495e;
    display: flex;
    /* Mengubah center menjadi space-between agar logo ke kiri, menu ke kanan */
    justify-content: space-between; 
    align-items: center;
    padding: 1rem 2rem; /* Menambah padding kiri-kanan agar tidak terlalu menempel ke layar */
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Styling untuk Ikon Logo di Navbar */
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 1006; /* Menjaga logo tetap di atas menu sidebar */
}

.nav-logo img {
    width: 90px;
    height: 40px;
    border-radius: 1%; /* Membuat gambar berbentuk lingkaran */
    object-fit: cover;
    border: 2px solid #ecf0f1;
    transition: transform 0.3s;
}

.nav-logo img:hover {
    transform: scale(1.1);
}

.nav-links {
    display: flex;
    gap: 1rem;
}

.nav-links a {
    color: #ecf0f1;
    text-decoration: none;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.nav-links a:hover {
    background-color: #2c3e50;
}

.hamburger {
    display: none;
}

/* =================================================== */
/* HEADER & LAYOUT UTAMA (DESKTOP SEKARANG MENGIKUTI HP) */
/* =================================================== */
header {
    background-color: #2c3e50;
    color: #ecf0f1;
    min-height: 320px;
    padding: 3rem 1rem 5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

header p {
    font-size: 1.2rem;
    color: #bdc3c7;
}

main {
    display: flex;
    flex-direction: column; 
    flex: 1;
    max-width: 900px;
    margin: 0 auto 2rem auto; 
    gap: 2rem;
    padding: 0 1rem;
}

/* =================================================== */
/* KARTU BIODATA (ASIDE) - POSISI MENGAMBANG DI ATAS   */
/* =================================================== */
aside {
    order: -1; 
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: row; 
    align-items: center;
    text-align: left;
    gap: 2.5rem;
    margin-top: -90px; 
    position: relative;
    z-index: 10;
}

#profile-pic {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #3498db;
    cursor: pointer;
    transition: transform 0.2s;
    flex-shrink: 0;
}

#profile-pic:hover {
    transform: scale(1.05);
}

.bio-content h3 {
    margin-bottom: 0.5rem;
    color: #2c3e50;
    font-size: 1.4rem;
}

.bio-content p {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* =================================================== */
/* KONTEN CV (ARTICLE)                                 */
/* =================================================== */
article {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

article h2 {
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

article section {
    margin-bottom: 1.5rem;
}

.timeline-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #e0e0e0;
}

.timeline-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.job-header h3 {
    font-size: 1.1rem;
    color: #2c3e50;
}

.job-date {
    font-size: 0.85rem;
    color: #7f8c8d;
    font-weight: 600;
}

article ul {
    padding-left: 1.2rem;
}

article ul li {
    margin-bottom: 0.4rem;
}

.project-item {
    background-color: #f8f9fa;
    border-left: 4px solid #3498db;
    padding: 1rem;
    border-radius: 0 6px 6px 0;
    margin-bottom: 1rem;
}

.project-item h3 {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
    color: #2c3e50;
}

.project-item p {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.tech-stack {
    font-size: 0.85rem !important;
    color: #555;
}

.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tag {
    background-color: #eef6fb;
    color: #2980b9;
    border: 1px solid #3498db;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

footer {
    background-color: #2c3e50;
    color: #ecf0f1;
    text-align: center;
    padding: 1.5rem;
    margin-top: auto;
}

/* =================================================== */
/* MODAL STATUS POPUP (DESKTOP)                        */
/* =================================================== */
.modal {
    display: none; 
    position: fixed;
    z-index: 2000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); 
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
    width: 480px; 
    height: 80vh; 
    max-height: 900px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #fff;
    font-size: 32px; 
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
}

.status-header {
    display: flex;
    align-items: center;
    padding: 20px;
    margin-top: 15px;
}

.status-header img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-right: 12px;
}

.status-info h4 {
    margin: 0;
    font-size: 1.2rem;
}

.status-info p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

.status-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 30px;
}

.status-body h2 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.status-body p {
    font-size: 1.25rem;
    line-height: 1.6;
}

.status-progress {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: white;
    width: 0%;
}

@keyframes runProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

.progress-bar.active {
    animation: runProgress 5s linear forwards;
}

/* =================================================== */
/* RESPONSIVE SMARTPHONE (Maksimal 768px)              */
/* =================================================== */
@media screen and (max-width: 768px) {
    nav {
        /* Mempertahankan space-between agar Ikon Logo di kiri & Hamburger di kanan */
        justify-content: space-between; 
        padding: 0.8rem 1.2rem;
        position: sticky;
        top: 0;
        z-index: 1005; 
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 32px;
        height: 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        position: relative;
        z-index: 1006; 
    }

    .hamburger .bar {
        width: 100%;
        height: 3.5px;
        background-color: #ecf0f1;
        border-radius: 4px;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        transform-origin: left center; 
    }

    .hamburger.active .bar:nth-child(1) { transform: rotate(45deg); }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(3) { transform: rotate(-45deg); }

    .nav-links {
        position: fixed;
        top: 60px; 
        right: 0; 
        width: 80vw; 
        height: calc(100vh - 60px); 
        background-color: #2c3e50;
        flex-direction: column;
        align-items: flex-start; 
        justify-content: flex-start;
        padding-top: 20px; 
        gap: 0;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -5px 5px 15px rgba(0,0,0,0.4);
        z-index: 1000;
    }

    .nav-links.active {
        transform: translateX(0); 
    }

    .nav-links a {
        padding: 18px 25px;
        width: 100%;
        text-align: left; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 0;
        font-size: 1.05rem;
    }

    header {
        min-height: 220px;
        padding: 2.5rem 1rem 4rem 1rem; 
    }

    aside {
        flex-direction: row; 
        padding: 1.2rem 1.5rem;
        gap: 1.2rem;
        margin-top: -65px; 
    }

    #profile-pic {
        width: 90px;
        height: 90px;
    }

    .bio-content h3 {
        font-size: 1.2rem;
        margin-bottom: 0.2rem;
    }

    .bio-content p {
        font-size: 0.9rem;
    }

    .modal-content {
        width: 100vw;       
        height: 100vh;      
        max-width: 100%;    
        max-height: 100%;   
        border-radius: 0;   
    }

    .close-btn {
        top: 20px;
        right: 20px;
    }
    
    .status-progress {
        top: 15px;
    }
    
    .status-header {
        margin-top: 25px;
    }
}

/* =========================================================
   FINAL POLISH — ASIDE / CV ARTICLE
   Tidak mengubah data, fitur, atau struktur utama.
   ========================================================= */
#cv-article {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

aside {
    padding: 1rem 1.25rem;
    gap: 1.25rem;
    margin-top: -68px;
    min-height: 0;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
}

#profile-pic {
    width: 108px;
    height: 108px;
    border-width: 3px;
}

.bio-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bio-content h3 {
    margin: 0 0 .35rem;
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: .02em;
}

.bio-content p {
    margin: .12rem 0;
    font-size: .92rem;
    line-height: 1.4;
    color: #4b5563;
    overflow-wrap: anywhere;
}

.bio-content p strong {
    display: inline-block;
    min-width: 82px;
    color: #2c3e50;
    font-weight: 700;
}

@media screen and (max-width: 900px) {
    aside {
        margin-top: -58px;
        padding: .9rem 1rem;
        gap: 1rem;
    }

    #profile-pic {
        width: 96px;
        height: 96px;
    }

    .bio-content h3 { font-size: 1.15rem; }
    .bio-content p { font-size: .88rem; }
}

@media screen and (max-width: 600px) {
    aside {
        padding: .8rem .9rem;
        gap: .8rem;
        margin-top: -42px;
        border-radius: 9px;
        align-items: center;
    }

    #profile-pic {
        width: 76px;
        height: 76px;
        flex: 0 0 76px;
    }

    .bio-content h3 {
        font-size: 1rem;
        margin-bottom: .25rem;
    }

    .bio-content p {
        font-size: .76rem;
        line-height: 1.35;
        margin: .08rem 0;
    }

    .bio-content p strong {
        min-width: 66px;
    }
}

@media screen and (max-width: 400px) {
    aside {
        padding: .7rem .75rem;
        gap: .7rem;
    }

    #profile-pic {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .bio-content h3 { font-size: .92rem; }
    .bio-content p { font-size: .7rem; }
    .bio-content p strong { min-width: 58px; }
}