* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
 
html { 
    scroll-behavior: smooth; 
} 
 
body { 
    font-family: Arial, sans-serif; 
    background: #fff5fa; 
    color: #4a2636; 
    line-height: 1.6; 
} 

header { 
    width: 100%; 
    background: #ffffff; 
    box-shadow: 0 4px 15px rgba(216, 27, 96, 0.15); 
    position: relative; 
    z-index: 1000; 
} 
 
.navbar { 
    max-width: 1150px; 
    margin: 0 auto; 
    padding: 18px 30px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
} 
 
.logo { 
    font-size: 30px; 
    font-weight: bold; 
    color: #e91e63; 
} 
 
.nav-menu { 
    display: flex; 
    align-items: center; 
    gap: 28px; 
    list-style: none; 
} 
 
.nav-menu li { 
    list-style: none; 
} 
 
.nav-menu a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    color: #4a2636; 
    font-weight: 600; 
    border-radius: 20px; 
    transition: 0.3s ease; 
} 
 
.nav-menu a:hover { 
    color: #e91e63; 
    background: #ffe0ec; 
} 
 
.nav-menu a.active { 
    color: #ffffff; 
    background: #e91e63; 
    font-weight: bold; 
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.25); 
} 

footer { 
    text-align: center; 
    padding: 30px 20px; 
    margin-top: 60px; 
    background: #ffffff; 
    border-top: 2px solid #ffe0ec; 
    color: #684052; 
} 
 
footer h3 { 
    color: #e91e63; 
    margin-bottom: 8px; 
} 
 
footer p { 
    margin: 5px 0; 
} 

.pendidikan-section { 
    max-width: 1000px; 
    margin: 45px auto 0; 
    padding: 0 25px; 
    text-align: center; 
} 
 
.pendidikan-section h1 { 
    font-size: 38px; 
    color: #e91e63; 
    margin-bottom: 10px; 
} 
 
.pendidikan-section > p { 
    color: #684052; 
    margin-bottom: 35px; 
} 
 
.sekolah-list { 
    width: 100%; 
    max-width: 850px; 
    margin: 0 auto; 
} 
 
.sekolah-item { 
    width: 100%; 
    min-height: 105px; 
    display: flex; 
    align-items: center; 
    text-align: left; 
    gap: 20px; 
    padding: 20px 25px; 
    margin: 0 auto 20px; 
    background: #ffffff; 
    border: 2px solid #ffd0e0; 
    border-radius: 18px; 
    box-shadow: 0 7px 20px rgba(216, 27, 96, 0.12); 
    cursor: pointer; 
    transition: 0.3s ease; 
} 
 
.sekolah-item:hover { 
    background: #ffe0ec; 
    border-color: #e91e63; 
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(216, 27, 96, 0.20); 
} 
 
.sekolah-logo { 
    width: 65px; 
    height: 65px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
    background: #e91e63; 
    color: white; 
    border-radius: 50%; 
    font-size: 32px; 
} 
 
.sekolah-info { 
    flex: 1; 
} 

.sekolah-info span { 
    display: none; 
} 
 
.sekolah-info h3 { 
    color: #4a2636; 
    margin: 0; 
    font-size: 19px; 
} 

.modal-overlay { 
    display: none; 
    position: fixed; 
    inset: 0; 
    background: rgba(74, 38, 54, 0.70); 
    align-items: center; 
    justify-content: center; 
    z-index: 2000; 
    padding: 20px; 
} 
 
.modal-overlay.show { 
    display: flex; 
} 
 
.modal-box { 
    position: relative; 
    width: 90%; 
    max-width: 650px; 
    padding: 30px; 
    background: #ffffff; 
    border-radius: 20px; 
    text-align: center; 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); 
} 
 
.modal-box h2 { 
    color: #e91e63; 
    margin-bottom: 20px; 
} 
 
.modal-box img { 
    display: block; 
    width: 100%; 
    max-height: 500px; 
    object-fit: contain; 
    border-radius: 12px; 
} 
 
.modal-close { 
    position: absolute; 
    top: 8px; 
    right: 15px; 
    border: none; 
    background: none; 
    color: #e91e63; 
    font-size: 32px; 
    cursor: pointer; 
} 
 
 
/* ========================= 
   KEAHLIAN 
========================= */ 
 
.skills-container { 
    max-width: 1000px; 
    margin: 45px auto 0; 
    padding: 0 25px; 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
} 
 
.skill-card { 
    position: relative; 
    background: #ffffff; 
    padding: 30px 25px; 
    border-radius: 25px; 
    text-align: center; 
    border: 3px solid #ffe0ec; 
    box-shadow: 0 10px 25px rgba(216, 27, 96, 0.12); 
    transition: 0.4s ease; 
    overflow: hidden; 
} 
 
.skill-card::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 7px; 
} 
 
.skill-card:nth-child(1)::before { 
    background: linear-gradient(90deg, #ff5722, #ff9800); 
} 
 
.skill-card:nth-child(2)::before { 
    background: linear-gradient(90deg, #2196f3, #00bcd4); 
} 
 
.skill-card:nth-child(3)::before { 
    background: linear-gradient(90deg, #6f42c1, #9c27b0); 
} 
 
.skill-card:nth-child(4)::before { 
    background: linear-gradient(90deg, #f0a500, #ffca28); 
} 
 
.skill-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 16px 35px rgba(216, 27, 96, 0.18); 
} 
 
 
/* ========================= 
   JUDUL SKILL DI ATAS IKON 
========================= */ 
 
.skill-title { 
    margin-top: 5px; 
    margin-bottom: 12px; 
    font-size: 17px; 
    font-weight: bold; 
} 
 
.skill-card:nth-child(1) .skill-title { 
    color: #ff5722; 
} 
 
.skill-card:nth-child(2) .skill-title { 
    color: #2196f3; 
} 
 
.skill-card:nth-child(3) .skill-title { 
    color: #6f42c1; 
} 
 
.skill-card:nth-child(4) .skill-title { 
    color: #d99100; 
} 
 
 
/* ========================= 
   IKON KEAHLIAN 
========================= */ 
 
.skill-icon { 
    width: 90px; 
    height: 90px; 
    margin: 0 auto 20px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 25px; 
    cursor: pointer; 
    transition: 0.4s ease; 
    position: relative; 
} 
 
.skill-icon-symbol { 
    font-size: 30px; 
    font-weight: bold; 
    font-family: Arial, sans-serif; 
} 
 
 
/* HTML */ 
 
.skill-card:nth-child(1) .skill-icon { 
    background: linear-gradient(135deg, #fff0eb, #ffd9cc); 
    border: 3px solid #ff5722; 
    color: #ff5722; 
} 
 
 
/* CSS */ 
 
.skill-card:nth-child(2) .skill-icon { 
    background: linear-gradient(135deg, #eaf4ff, #cce7ff); 
    border: 3px solid #2196f3; 
    color: #2196f3; 
} 
 
 
/* GITHUB */ 
 
.skill-card:nth-child(3) .skill-icon { 
    background: linear-gradient(135deg, #f3edff, #e2d4ff); 
    border: 3px solid #6f42c1; 
    color: #6f42c1; 
} 
 
 
/* MYSQL */ 
 
.skill-card:nth-child(4) .skill-icon { 
    background: linear-gradient(135deg, #fff8df, #ffedb0); 
    border: 3px solid #f0a500; 
    color: #d99100; 
} 
 
.skill-icon:hover { 
    transform: scale(1.12) rotate(-5deg); 
    box-shadow: 0 8px 20px rgba(216, 27, 96, 0.18); 
} 
 
 
/* ========================= 
   ISI SKILL TERSEMBUNYI 
========================= */ 
 
.skill-content { 
    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
    transform: translateY(-15px); 
 
    transition: 
        max-height 0.5s ease, 
        opacity 0.4s ease, 
        transform 0.4s ease; 
} 

.skill-card.active .skill-content { 
    max-height: 250px; 
    opacity: 1; 
    transform: translateY(0); 
} 

.skill-name { 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    margin-bottom: 10px; 
    text-align: right; 
} 

.skill-name h3 { 
    display: none; 
} 
 
.skill-name span { 
    font-weight: bold; 
    font-size: 15px; 
} 
 
.skill-card:nth-child(1) .skill-name span { 
    color: #ff5722; 
} 
 
.skill-card:nth-child(2) .skill-name span { 
    color: #2196f3; 
} 
 
.skill-card:nth-child(3) .skill-name span { 
    color: #6f42c1; 
} 
 
.skill-card:nth-child(4) .skill-name span { 
    color: #d99100; 
} 

.skill-bar { 
    width: 100%; 
    height: 9px; 
    background: #f1f1f1; 
    border-radius: 20px; 
    overflow: hidden; 
    margin-bottom: 15px; 
} 

.skill-progress { 
    height: 100%; 
    width: 0%; 
    border-radius: 20px; 
    transition: width 1.5s ease; 
} 

.skill-card.active .skill-progress { 
    width: 20%; 
} 
 
.skill-progress.html { 
    background: linear-gradient(90deg, #ff5722, #ff9800); 
} 
 
.skill-progress.css { 
    background: linear-gradient(90deg, #2196f3, #00bcd4); 
} 
 
.skill-progress.github { 
    background: linear-gradient(90deg, #6f42c1, #9c27b0); 
} 
 
.skill-progress.mysql { 
    background: linear-gradient(90deg, #f0a500, #ffca28); 
} 

.skill-content p { 
    color: #684052; 
    font-size: 14px; 
    line-height: 1.7; 
    margin: 0; 
    text-align: left; 
} 

.hero { 
    min-height: 620px; 
    display: flex; 
    align-items: flex-start; 
    justify-content: center; 
    padding: 65px 25px 40px; 
 
    background: 
        radial-gradient( 
            circle at top right, 
            #ffe0ec 0%, 
            transparent 35% 
        ), 
        radial-gradient( 
            circle at bottom left, 
            #ffd1e2 0%, 
            transparent 30% 
        ); 
} 
 
.hero-content { 
    max-width: 900px; 
    width: 100%; 
    padding: 45px 35px; 
    text-align: center; 
    position: relative; 
    background: rgba(255, 255, 255, 0.85); 
    border: 2px solid #ffe0ec; 
    border-radius: 30px; 
    box-shadow: 0 12px 35px rgba(216, 27, 96, 0.12); 
} 
 
.small-title { 
    display: inline-block; 
    color: #ffffff; 
    background: #e91e63; 
    padding: 6px 18px; 
    border-radius: 20px; 
    font-weight: bold; 
    font-size: 16px; 
    margin-bottom: 15px; 
} 
 
.hero h1 { 
    font-size: 52px; 
    color: #4a2636; 
    margin-bottom: 15px; 
} 
 
.hero h1 span { 
    color: #e91e63; 
} 
 
.hero-description { 
    font-size: 22px; 
    font-weight: bold; 
    color: #684052; 
    margin-bottom: 15px; 
} 
 
.hero-text { 
    max-width: 650px; 
    margin: 0 auto 30px; 
    color: #684052; 
    font-size: 16px; 
} 
 
.hero-buttons { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    margin-top: 25px; 
} 
 
.btn { 
    display: inline-block; 
    padding: 13px 28px; 
    border-radius: 25px; 
    text-decoration: none; 
    font-weight: bold; 
    transition: 0.3s ease; 
} 
 
.btn.primary { 
    background: #e91e63; 
    color: #ffffff; 
    box-shadow: 0 5px 15px rgba(233, 30, 99, 0.25); 
} 
 
.btn.primary:hover { 
    background: #d81b60; 
    transform: translateY(-3px); 
} 
 
.btn.secondary { 
    border: 2px solid #e91e63; 
    color: #e91e63; 
    background: #ffffff; 
} 
 
.btn.secondary:hover { 
    background: #ffe0ec; 
    transform: translateY(-3px); 
} 
 
.hero-decoration { 
    margin-top: 40px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 20px; 
} 
 
.circle { 
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    background: #ffc1d8; 
} 
 
.circle-one { 
    animation: float 3s ease-in-out infinite; 
} 
 
.circle-two { 
    width: 20px; 
    height: 20px; 
    background: #e91e63; 
    animation: float 2s ease-in-out infinite; 
} 
 
.code-box { 
    width: 120px; 
    height: 10px; 
    background: #e91e63; 
    border-radius: 10px; 
} 
 
@keyframes float { 
 
    0%, 
    100% { 
        transform: translateY(0); 
    } 
 
    50% { 
        transform: translateY(-10px); 
    } 
} 

.hero-content { 
    position: relative; 
    overflow: hidden; 
} 
 
.floating-animation { 
    position: absolute; 
    inset: 0; 
    pointer-events: none; 
} 
 
.bubble { 
    position: absolute; 
    border-radius: 50%; 
    background: #ffe0ec; 
    opacity: 0.7; 
    animation: bubbleMove 4s ease-in-out infinite; 
} 
 
.bubble-1 { 
    width: 35px; 
    height: 35px; 
    top: 70px; 
    left: 35px; 
} 
 
.bubble-2 { 
    width: 20px; 
    height: 20px; 
    top: 180px; 
    right: 50px; 
    animation-delay: 1s; 
} 
 
.bubble-3 { 
    width: 28px; 
    height: 28px; 
    bottom: 80px; 
    left: 80px; 
    animation-delay: 2s; 
} 
 
.bubble-4 { 
    width: 45px; 
    height: 45px; 
    bottom: 40px; 
    right: 35px; 
    animation-delay: 1.5s; 
} 
 
@keyframes bubbleMove { 
 
    0%, 
    100% { 
        transform: translateY(0); 
    } 
 
    50% { 
        transform: translateY(-20px); 
    } 
} 
 
.coding { 
    position: absolute; 
    color: #e91e63; 
    font-weight: bold; 
    font-family: monospace; 
    opacity: 0.7; 
    animation: codingMove 3s ease-in-out infinite; 
} 
 
.coding-1 { 
    top: 120px; 
    left: 70px; 
    font-size: 25px; 
} 
 
.coding-2 { 
    top: 70px; 
    right: 80px; 
    font-size: 22px; 
    animation-delay: 1s; 
} 
 
.coding-3 { 
    bottom: 90px; 
    right: 90px; 
    font-size: 18px; 
    animation-delay: 2s; 
} 
 
@keyframes codingMove { 
 
    0%, 
    100% { 
        transform: translateY(0) rotate(0deg); 
    } 
 
    50% { 
        transform: translateY(-15px) rotate(5deg); 
    } 
} 

.contact-container { 
    max-width: 900px; 
    margin: 45px auto 0; 
    padding: 0 25px; 
} 
 
.contact-intro { 
    text-align: center; 
    margin-bottom: 30px; 
} 
 
.contact-intro h2 { 
    color: #e91e63; 
    font-size: 28px; 
    margin-bottom: 10px; 
} 
 
.contact-intro p { 
    color: #684052; 
    margin-bottom: 5px; 
} 
 
.contact-card { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
} 
 
.contact-item { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    padding: 25px 20px; 
    background: #ffffff; 
    border: 2px solid #ffe0ec; 
    border-radius: 20px; 
    box-shadow: 0 8px 20px rgba(216, 27, 96, 0.10); 
    transition: 0.3s ease; 
} 
 
.contact-item:hover { 
    transform: translateY(-6px); 
    border-color: #e91e63; 
    box-shadow: 0 12px 25px rgba(216, 27, 96, 0.18); 
} 
 
.contact-icon { 
    width: 55px; 
    height: 55px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: #e91e63; 
    color: #ffffff; 
    border-radius: 50%; 
    font-size: 25px; 
    text-decoration: none; 
    flex-shrink: 0; 
    cursor: pointer; 
    transition: 0.3s ease; 
} 
 
.contact-icon:hover { 
    background: #d81b60; 
    transform: scale(1.12); 
    box-shadow: 0 6px 15px rgba(233, 30, 99, 0.25); 
} 
 
.contact-item h3 { 
    color: #e91e63; 
    margin-bottom: 3px; 
    font-size: 18px; 
} 
 
.contact-item p { 
    color: #684052; 
    margin: 0; 
    font-size: 14px; 
} 

.about-container { 
    max-width: 900px; 
    margin: 45px auto 0; 
    padding: 0 25px; 
} 
 
.about-container h1 { 
    text-align: center; 
    color: #e91e63; 
    font-size: 38px; 
    margin-bottom: 30px; 
} 
 
.about-card { 
    background: #ffffff; 
    padding: 35px; 
    border-radius: 18px; 
    border: 2px solid #ffe0ec; 
    box-shadow: 0 7px 20px rgba(216, 27, 96, 0.10); 
} 
 
.about-card h2 { 
    color: #e91e63; 
    margin-bottom: 10px; 
} 
 
.about-card p { 
    color: #684052; 
    margin-bottom: 15px; 
} 

.page-section { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 55px 25px 20px; 
} 
 
.section-title { 
    text-align: center; 
    margin-bottom: 40px; 
} 
 
.section-title p { 
    color: #e91e63; 
    font-size: 14px; 
    font-weight: bold; 
    letter-spacing: 2px; 
    margin-bottom: 8px; 
} 
 
.section-title h1 { 
    color: #4a2636; 
    font-size: 40px; 
    margin: 0; 
} 

.about-main-card { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 40px; 
    width: fit-content; 
    margin: 0 auto 25px; 
    padding: 35px; 
    background: #ffffff; 
    border: 2px solid #ffe0ec; 
    border-radius: 25px; 
    box-shadow: 0 8px 25px rgba(216, 27, 96, 0.10); 
} 

.about-photo { 
    flex-shrink: 0; 
} 
 
.about-photo img { 
    display: block; 
    width: 210px; 
    height: 210px; 
    object-fit: cover; 
    border-radius: 50%; 
    border: 5px solid #e91e63; 
    box-shadow: 0 8px 20px rgba(216, 27, 96, 0.20); 
} 

.about-identity { 
    margin-top: 15px; 
    text-align: center; 
} 
 
.identity-item { 
    margin-top: 8px; 
    padding: 8px 20px; 
    background: #ffe0ec; 
    color: #e91e63; 
    border: 2px solid #ffe0ec; 
    border-radius: 20px; 
    cursor: pointer; 
    transition: 0.3s ease; 
} 
 
.identity-item:hover { 
    background: #e91e63; 
    border-color: #e91e63; 
    color: #ffffff; 
    transform: translateY(-2px); 
    box-shadow: 0 5px 12px rgba(233, 30, 99, 0.20); 
} 
 
.identity-item h3 { 
    color: #e91e63; 
    margin: 0; 
    font-size: 16px; 
} 
 
.identity-item:hover h3 { 
    color: #ffffff; 
} 

.about-highlights { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 25px; 
} 
 
.about-highlight-item { 
    display: flex; 
    align-items: flex-start; 
    gap: 18px; 
    padding: 25px; 
    background: #ffffff; 
    border: 2px solid #ffe0ec; 
    border-radius: 35px; 
    box-shadow: 0 7px 20px rgba(216, 27, 96, 0.08); 
    transition: 0.3s ease; 
} 
 
.about-highlight-item:nth-child(3) { 
    grid-column: 1 / 3; 
    width: 50%; 
    justify-self: center; 
} 
 
.about-highlight-item:hover { 
    transform: translateY(-5px); 
    border-color: #e91e63; 
    box-shadow: 0 10px 25px rgba(216, 27, 96, 0.15); 
} 
 
.about-highlight-icon { 
    width: 55px; 
    height: 55px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
    background: #ffe0ec; 
    border-radius: 50%; 
    font-size: 28px; 
} 
 
.about-highlight-text { 
    flex: 1; 
} 
 
.about-highlight-text h3 { 
    color: #e91e63; 
    font-size: 18px; 
    margin: 0 0 8px; 
} 
 
.about-highlight-text p { 
    color: #684052; 
    font-size: 15px; 
    line-height: 1.7; 
    margin: 0; 
} 

.page-section { 
    position: relative; 
    overflow: hidden; 
} 
 
.page-section::before, 
.page-section::after { 
    content: ""; 
    position: absolute; 
    border-radius: 50%; 
    pointer-events: none; 
    z-index: 0; 
} 
 
.page-section::before { 
    width: 180px; 
    height: 180px; 
    background: #ffe0ec; 
    top: 80px; 
    left: -90px; 
    animation: aboutFloat 5s ease-in-out infinite; 
} 
 
.page-section::after { 
    width: 140px; 
    height: 140px; 
    background: #ffd1e2; 
    right: -70px; 
    bottom: 80px; 
    animation: aboutFloat 4s ease-in-out infinite reverse; 
} 
 
@keyframes aboutFloat { 
 
    0%, 
    100% { 
        transform: translateY(0); 
    } 
 
    50% { 
        transform: translateY(-20px); 
    } 
} 
 
.section-title, 
.about-main-card, 
.about-highlights { 
    position: relative; 
    z-index: 1; 
} 
 
.section-title p { 
    display: inline-block; 
    background: #ffe0ec; 
    color: #e91e63; 
    padding: 6px 16px; 
    border-radius: 20px; 
    font-size: 13px; 
    font-weight: bold; 
    letter-spacing: 2px; 
    margin-bottom: 10px; 
} 
 
.section-title h1 { 
    font-size: 42px; 
    position: relative; 
} 
 
.section-title h1::after { 
    content: ""; 
    display: block; 
    width: 60px; 
    height: 4px; 
    background: #e91e63; 
    border-radius: 10px; 
    margin: 12px auto 0; 
} 

.about-main-card { 
    position: relative; 
    overflow: hidden; 
    background: rgba(255, 255, 255, 0.95); 
    transition: 0.4s ease; 
} 
 
.about-main-card::before { 
    content: ""; 
    position: absolute; 
    width: 8px; 
    height: 100%; 
    left: 0; 
    top: 0; 
    background: #e91e63; 
} 
 
.about-main-card:hover { 
    transform: translateY(-7px); 
    box-shadow: 0 15px 35px rgba(216, 27, 96, 0.18); 
} 
 
.about-photo img { 
    transition: 0.4s ease; 
} 
 
.about-main-card:hover .about-photo img { 
    transform: scale(1.05) rotate(2deg); 
} 

.about-highlight-item { 
    position: relative; 
    overflow: hidden; 
    transition: 0.4s ease; 
} 
 
.about-highlight-item::after { 
    content: ""; 
    position: absolute; 
    width: 70px; 
    height: 70px; 
    border-radius: 50%; 
    background: #fff0f6; 
    right: -25px; 
    bottom: -25px; 
    z-index: 0; 
} 
 
.about-highlight-icon, 
.about-highlight-text { 
    position: relative; 
    z-index: 1; 
} 
 
.about-highlight-item:hover { 
    transform: translateY(-8px) scale(1.01); 
} 
 
.about-highlight-icon { 
    transition: 0.4s ease; 
    cursor: pointer; 
} 
 
.about-highlight-item:hover .about-highlight-icon { 
    transform: rotate(-8deg) scale(1.1); 
    background: #e91e63; 
} 

.about-main-card { 
    animation: aboutSlideUp 0.7s ease both; 
} 
 
.about-highlight-item:nth-child(1) { 
    animation: aboutSlideUp 0.7s ease 0.15s both; 
} 
 
.about-highlight-item:nth-child(2) { 
    animation: aboutSlideUp 0.7s ease 0.3s both; 
} 
 
@keyframes aboutSlideUp { 
 
    from { 
        opacity: 0; 
        transform: translateY(25px); 
    } 
 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 

.coding-modal { 
    display: none; 
    position: fixed; 
    inset: 0; 
    background: rgba(74, 38, 54, 0.75); 
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
    z-index: 3000; 
} 
 
.coding-modal.show { 
    display: flex; 
} 
 
.coding-box { 
    position: relative; 
    width: 90%; 
    max-width: 800px; 
    max-height: 85vh; 
    overflow-y: auto; 
    padding: 35px; 
    background: #ffffff; 
    border-radius: 25px; 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); 
    animation: codingPopup 0.3s ease; 
} 
 
@keyframes codingPopup { 
 
    from { 
        opacity: 0; 
        transform: scale(0.9); 
    } 
 
    to { 
        opacity: 1; 
        transform: scale(1); 
    } 
} 
 
.coding-box h2 { 
    text-align: center; 
    color: #e91e63; 
    margin-bottom: 8px; 
} 
 
.coding-box > p { 
    text-align: center; 
    color: #684052; 
    margin-bottom: 25px; 
} 
 
.coding-close { 
    position: absolute; 
    top: 10px; 
    right: 18px; 
    border: none; 
    background: none; 
    color: #e91e63; 
    font-size: 32px; 
    cursor: pointer; 
} 
 
.coding-list { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 18px; 
} 
 
.coding-item { 
    padding: 18px; 
    background: #fff5fa; 
    border: 2px solid #ffe0ec; 
    border-radius: 15px; 
} 
 
.coding-item h3 { 
    color: #e91e63; 
    margin-bottom: 10px; 
} 
 
.coding-item pre { 
    margin: 0; 
    padding: 12px; 
    background: #4a2636; 
    border-radius: 10px; 
    overflow-x: auto; 
} 

.coding-item code { 
    color: #ffffff; 
    font-family: monospace; 
    font-size: 13px; 
} 

#namaModal .coding-box, 
#nimModal .coding-box, 
#kelasModal .coding-box { 
    width: 300px; 
    max-width: 85%; 
    padding: 22px 18px; 
    border-radius: 18px; 
    text-align: center; 
} 

#namaModal .coding-box h2, 
#nimModal .coding-box h2, 
#kelasModal .coding-box h2 { 
    font-size: 20px; 
    margin-bottom: 8px; 
} 

#namaModal .coding-box p, 
#nimModal .coding-box p, 
#kelasModal .coding-box p { 
    font-size: 14px; 
    margin-bottom: 8px; 
} 

#namaModal .coding-box h2:last-child, 
#nimModal .coding-box h2:last-child, 
#kelasModal .coding-box h2:last-child { 
    font-size: 18px; 
    margin-bottom: 0; 
} 

#namaModal .coding-close, 
#nimModal .coding-close, 
#kelasModal .coding-close { 
    top: 5px; 
    right: 10px; 
    font-size: 25px; 
} 

.project-container { 
    max-width: 1000px; 
    margin: 45px auto 0; 
    padding: 0 25px; 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
} 

.project-card { 
    position: relative; 
    display: flex; 
    align-items: flex-start; 
    gap: 22px; 
 
    background: #ffffff; 
    padding: 30px; 
    border-radius: 25px; 
    border: 3px solid #ffe0ec; 
 
    box-shadow: 0 10px 25px rgba(216, 27, 96, 0.12); 
 
    overflow: hidden; 
 
    opacity: 0; 
    animation: projectAppear 0.7s ease forwards; 
 
    transition: 
        transform 0.4s ease, 
        box-shadow 0.4s ease, 
        border-color 0.4s ease; 
} 
 
.project-card::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
 
    width: 100%; 
    height: 6px; 
 
    background: linear-gradient( 
        90deg, 
        #e91e63, 
        #ff80ab 
    ); 
} 
 
.project-card:nth-child(1)::before { 
    background: linear-gradient( 
        90deg, 
        #ff5722, 
        #ff9800 
    ); 
} 
 
.project-card:nth-child(2)::before { 
    background: linear-gradient( 
        90deg, 
        #2196f3, 
        #00bcd4 
    ); 
} 
 
.project-card:nth-child(3)::before { 
    background: linear-gradient( 
        90deg, 
        #6f42c1, 
        #9c27b0 
    ); 
} 
 
.project-card:nth-child(4)::before { 
    background: linear-gradient( 
        90deg, 
        #f0a500, 
        #ffca28 
    ); 
} 
 
.project-card:hover { 
    transform: translateY(-10px) scale(1.02); 
 
    border-color: #e91e63; 
 
    box-shadow: 
        0 18px 40px rgba(216, 27, 96, 0.20); 
} 
 
.project-icon { 
    min-width: 75px; 
    width: 75px; 
    height: 75px; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    border-radius: 22px; 
 
    background: #fff0f6; 
    border: 3px solid #f48fb1; 
 
    font-size: 32px; 
 
    transition: 
        transform 0.4s ease, 
        box-shadow 0.4s ease, 
        background 0.4s ease; 
}  
 
.project-card:nth-child(1) .project-icon { 
    background: #fff0eb; 
    border-color: #ff5722; 
} 
 
.project-card:nth-child(2) .project-icon { 
    background: #eaf4ff; 
    border-color: #2196f3; 
} 
 
.project-card:nth-child(3) .project-icon { 
    background: #f3edff; 
    border-color: #6f42c1; 
} 
 
.project-card:nth-child(4) .project-icon { 
    background: #fff8df; 
    border-color: #f0a500; 
} 
 
.project-card:hover .project-icon { 
    transform: rotate(-8deg) scale(1.15); 
 
    box-shadow: 
        0 8px 20px rgba(216, 27, 96, 0.18); 
} 
 
.project-content { 
    flex: 1; 
} 
 
.project-number { 
    display: inline-block; 
 
    font-size: 12px; 
    font-weight: bold; 
 
    color: #e91e63; 
 
    letter-spacing: 1.5px; 
 
    margin-bottom: 5px; 
} 
 
.project-card:nth-child(1) .project-number { 
    color: #ff5722; 
} 
 
.project-card:nth-child(2) .project-number { 
    color: #2196f3; 
} 
 
.project-card:nth-child(3) .project-number { 
    color: #6f42c1; 
} 
 
.project-card:nth-child(4) .project-number { 
    color: #d99100; 
} 
 
 
/* JUDUL */ 
 
.project-content h2 { 
    margin: 5px 0 10px; 
 
    color: #4a2636; 
 
    font-size: 21px; 
 
    transition: 0.3s ease; 
} 
 
.project-card:hover .project-content h2 { 
    transform: translateX(4px); 
} 
 
.project-content p { 
    margin: 0 0 15px; 
 
    color: #684052; 
 
    font-size: 14px; 
 
    line-height: 1.6; 
} 
 
.project-tech { 
    display: flex; 
    gap: 8px; 
    flex-wrap: wrap; 
} 
 
.project-tech span { 
    padding: 6px 12px; 
 
    border-radius: 20px; 
 
    background: #fff0f6; 
 
    color: #d81b60; 
 
    font-size: 12px; 
    font-weight: bold; 
 
    transition: 0.3s ease; 
} 
 
.project-tech span:hover { 
    transform: translateY(-3px); 
 
    background: #fce4ec; 
} 
 
.project-card:nth-child(1) .project-tech span { 
    color: #ff5722; 
    background: #fff0eb; 
} 
 
.project-card:nth-child(2) .project-tech span { 
    color: #2196f3; 
    background: #eaf4ff; 
} 
 
.project-card:nth-child(3) .project-tech span { 
    color: #6f42c1; 
    background: #f3edff; 
} 
 
.project-card:nth-child(4) .project-tech span { 
    color: #d99100; 
    background: #fff8df; 
} 
 
.project-card:nth-child(1) { 
    animation-delay: 0.1s; 
} 
 
.project-card:nth-child(2) { 
    animation-delay: 0.2s; 
} 
 
.project-card:nth-child(3) { 
    animation-delay: 0.3s; 
} 
 
.project-card:nth-child(4) { 
    animation-delay: 0.4s; 
} 
 
@keyframes projectAppear { 
 
    from { 
        opacity: 0; 
        transform: translateY(35px); 
    } 
 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 
 
@media (max-width: 768px) { 
 
    .navbar { 
        flex-direction: column; 
        gap: 15px; 
        padding: 15px 20px; 
    } 
 
    .nav-menu { 
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 8px; 
    } 
 
    .nav-menu a { 
        padding: 6px 10px; 
        font-size: 14px; 
    } 
 
 
    /* HOME */ 
 
    .hero { 
        min-height: auto; 
        padding: 40px 15px; 
    } 
 
    .hero-content { 
        padding: 35px 20px; 
    } 
 
    .hero h1 { 
        font-size: 38px; 
    } 
 
    .hero-description { 
        font-size: 19px; 
    } 
 
    .hero-buttons { 
        flex-direction: column; 
        align-items: center; 
    } 
 
    .btn { 
        width: 200px; 
        text-align: center; 
    } 
 
    .skills-container { 
        grid-template-columns: 1fr; 
        margin-top: 35px; 
        gap: 20px; 
    } 
 
    .skill-card { 
        padding: 25px 20px; 
    } 
 
    .skill-title { 
        font-size: 16px; 
        margin-bottom: 10px; 
    } 
 
    .skill-icon { 
        width: 80px; 
        height: 80px; 
        margin-bottom: 18px; 
    } 
 
    .skill-icon-symbol { 
        font-size: 27px; 
    } 
 
    .project-container { 
        grid-template-columns: 1fr; 
        gap: 20px; 
        margin-top: 35px; 
    } 
 
    .project-card { 
        padding: 25px 20px; 
        gap: 16px; 
    } 
 
    .project-icon { 
        min-width: 65px; 
        width: 65px; 
        height: 65px; 
        font-size: 28px; 
    } 
 
    .project-content h2 { 
        font-size: 18px; 
    } 
 
    .project-content p { 
        font-size: 13px; 
    } 
 
    .sekolah-item { 
        padding: 15px; 
        gap: 15px; 
    } 
 
    .sekolah-logo { 
        width: 50px; 
        height: 50px; 
        font-size: 25px; 
    } 
 
    .sekolah-info h3 { 
        font-size: 16px; 
    } 
 
    .modal-box { 
        width: 95%; 
        padding: 20px; 
    } 
 
    .contact-container, 
    .about-container, 
    .project-container, 
    .pendidikan-section { 
        margin-top: 35px; 
    } 
 
    .pendidikan-section h1, 
    .contact-container h1, 
    .about-container h1, 
    .project-container h1 { 
        font-size: 30px; 
    } 
 
    .contact-card { 
        grid-template-columns: 1fr; 
    } 
 
    .contact-item { 
        padding: 20px; 
    } 
 
    .about-main-card { 
        width: fit-content; 
        max-width: 100%; 
        padding: 30px 20px; 
        margin-left: auto; 
        margin-right: auto; 
        flex-direction: column; 
        text-align: center; 
        gap: 25px; 
    } 
 
    .about-photo img { 
        width: 180px; 
        height: 180px; 
    } 
 
    .about-highlights { 
        grid-template-columns: 1fr; 
    } 
 
    .about-highlight-item { 
        text-align: left; 
    } 
 
    .about-highlight-item:nth-child(3) { 
        grid-column: auto; 
        width: 100%; 
    } 
 
    .coding-list { 
        grid-template-columns: 1fr; 
    } 
 
    .coding-box { 
        width: 95%; 
        padding: 25px 20px; 
    } 
 
} 
 
.project-tech span { 
    cursor: pointer; 
    user-select: none; 
} 
 
.project-tech span:hover { 
    background: #e91e63; 
    color: white; 
    transform: translateY(-4px) scale(1.05); 
} 
 
.contoh-modal { 
    display: none; 
    position: fixed; 
    z-index: 9999; 
    inset: 0; 
 
    background: rgba(70, 30, 50, 0.55); 
 
    align-items: center; 
    justify-content: center; 
 
    padding: 20px; 
 
    animation: fadeContoh 0.3s ease; 
} 
 
.contoh-modal.show { 
    display: flex; 
} 

.contoh-box { 
    position: relative; 
 
    width: 90%; 
    max-width: 700px; 
 
    max-height: 80vh; 
    overflow-y: auto; 
 
    background: white; 
 
    padding: 30px; 
 
    border-radius: 25px; 
 
    box-shadow: 
        0 20px 50px rgba(216, 27, 96, 0.25); 
 
    animation: munculContoh 0.4s ease; 
} 
 
.contoh-box h2 { 
    margin-bottom: 10px; 
 
    color: #e91e63; 
 
    font-size: 25px; 
} 
 
 
.contoh-box p { 
    margin-bottom: 20px; 
 
    color: #684052; 
 
    line-height: 1.6; 
} 
 
.contoh-box pre { 
    background: #1e1e1e; 
 
    color: #f8f8f2; 
 
    padding: 20px; 
 
    border-radius: 15px; 
 
    overflow-x: auto; 
 
    text-align: left; 
 
    line-height: 1.6; 
 
    font-size: 14px; 
} 
 
.contoh-box code { 
    font-family: Consolas, monospace; 
} 
 
.close-contoh { 
    position: absolute; 
 
    top: 15px; 
    right: 18px; 
 
    width: 35px; 
    height: 35px; 
 
    border: none; 
 
    border-radius: 50%; 
 
    background: #ffe0ec; 
 
    color: #e91e63; 
 
    font-size: 25px; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
} 

.close-contoh:hover { 
    background: #e91e63; 
 
    color: white; 
 
    transform: rotate(90deg); 
} 
 
@keyframes fadeContoh { 
 
    from { 
        opacity: 0; 
    } 
 
    to { 
        opacity: 1; 
    } 
 
} 
 
@keyframes munculContoh { 
 
    from { 
        opacity: 0; 
        transform: translateY(30px) scale(0.95); 
    } 
 
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    } 
 
} 
 
@media (max-width: 600px) { 
 
    .contoh-box { 
        padding: 25px 18px; 
    } 
 
    .contoh-box h2 { 
        font-size: 21px; 
    } 
 
    .contoh-box pre { 
        font-size: 12px; 
    } 
 
} 
 
 
.html-hint { 
    color: #f39c12; 
} 
 
.css-hint { 
    color: #3498db; 
} 
 
.github-hint { 
    color: #8e44ad; 
} 
 
.mysql-hint { 
    color: #d4a017; 
} 

.page-section .section-title { 
    animation: projectAppear 0.7s ease both; 
} 

.pendidikan-section { 
    animation: projectAppear 0.7s ease both; 
} 
 
.sekolah-item { 
    opacity: 0; 
    animation: projectAppear 0.7s ease forwards; 
} 
 
.sekolah-item:nth-child(1) { 
    animation-delay: 0.1s; 
} 
 
.sekolah-item:nth-child(2) { 
    animation-delay: 0.2s; 
} 
 
.sekolah-item:nth-child(3) { 
    animation-delay: 0.3s; 
} 
 
.sekolah-item:nth-child(4) { 
    animation-delay: 0.4s; 
} 

.skill-card { 
    opacity: 0; 
    animation: projectAppear 0.7s ease forwards; 
} 
 
.skill-card:nth-child(1) { 
    animation-delay: 0.1s; 
} 
 
.skill-card:nth-child(2) { 
    animation-delay: 0.2s; 
} 
 
.skill-card:nth-child(3) { 
    animation-delay: 0.3s; 
} 
 
.skill-card:nth-child(4) { 
    animation-delay: 0.4s; 
} 

.contact-item { 
    opacity: 0; 
    animation: projectAppear 0.7s ease forwards; 
} 
 
.contact-item:nth-child(1) { 
    animation-delay: 0.1s; 
} 
 
.contact-item:nth-child(2) { 
    animation-delay: 0.2s; 
} 
 
.contact-item:nth-child(3) { 
    animation-delay: 0.3s; 
} 

.about-main-card { 
    animation: projectAppear 0.7s ease both; 
} 
 
.about-highlight-item { 
    opacity: 0; 
    animation: projectAppear 0.7s ease forwards; 
} 
 
.about-highlight-item:nth-child(1) { 
    animation-delay: 0.1s; 
} 
 
.about-highlight-item:nth-child(2) { 
    animation-delay: 0.2s; 
} 
 
.about-highlight-item:nth-child(3) { 
    animation-delay: 0.3s; 
} 

.hero-content { 
    opacity: 0; 
    animation: projectAppear 0.7s ease forwards; 
} 

#typing-text { 
    display: inline-block; 
    white-space: nowrap; 
    border-right: 3px solid #e91e63; 
    padding-right: 5px; 
    animation: blinkCursor 0.7s infinite; 
} 

@keyframes blinkCursor { 
 
    0%, 
    50% { 
        border-color: #e91e63; 
    } 
 
    51%, 
    100% { 
        border-color: transparent; 
    } 
 
}