/* =======================================================
   DAFTAR ISI CSS PORTOFOLIO ALFAREL
   01. VARIABLES & FONT
   02. GLOBAL STYLES & ANIMATIONS
   03. NAVBAR & SIDEBAR
   04. HERO SECTION
   05. ABOUT SECTION (TABS, TIMELINE, GRID)
   06. MODAL POPUPS (PORTFOLIO & SKILLS)
   07. CYBER DIVIDER
   08. SKILLS SECTION
   09. PROJECT SECTION & WAVE TRANSITION
   10. CONTACT SECTION & FOOTER
   11. CUSTOM SCROLLBAR
   12. LIGHT MODE STYLES
   13. RESPONSIVE DESIGN (MOBILE/TABLET)
   ======================================================= */

/* --- 01. VARIABLES & FONT --- */
@font-face {
    font-family: 'LogoAghsay'; 
    src: url('assets/fonts/RahayuScript.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg-utama: #0B191E;
    --aksen-tosca: #1be8ff;
    --teks-putih: #EDF6F9;
    --bayangan-teks-glowing: 
        0 0 10px var(--aksen-tosca),
        0 0 30px var(--aksen-tosca),
        0 0 60px var(--aksen-tosca),
        0 0 100px var(--aksen-tosca),
        0 0 150px var(--aksen-tosca);
    --bayangan-teks: 0 0 15px rgba(0, 229, 255, 0.3);
    --garis-grid: rgba(0, 229, 255, 0.05);
    --cahaya-glow: rgba(0, 229, 255, 0.15); 
    --bayangan-kotak: 0 0 15px rgba(0, 229, 255, 0.4);
    --bayangan-gelombang: 
        drop-shadow(0px -20px 50px rgba(0, 229, 255, 0.3)) 
        drop-shadow(0px -90px 60px rgba(0, 229, 255, 0.2))
        drop-shadow(0px -120px 20px rgba(0, 229, 255, 0.1));
}

/* --- 02. GLOBAL STYLES & ANIMATIONS --- */
html {
    scroll-behavior: smooth; 
    scroll-padding-top: 100px; 
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-utama);
    font-family: 'Poppins', sans-serif;
    color: var(--teks-putih);
    overflow-x: hidden; 
}

.reveal {
    position: relative;
    transform: translateY(80px); 
    opacity: 0; 
    transition: all 1s ease-in-out; 
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

.overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- 03. NAVBAR & SIDEBAR --- */
.top-navbar {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%;
    padding: 1px 60px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    background: rgba(11, 25, 30, 0.6); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 229, 255, 0.15); 
    z-index: 999; 
    box-sizing: border-box; 
    transition: all 0.4s ease;
}

.top-navbar.scrolled {
    background: var(--bg-utama); 
    border-bottom: 1px solid rgba(0, 229, 255, 0.3); 
    padding: 0.8px 60px; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.logo { 
    font-family: 'LogoAghsay', cursive; 
    font-size: 2rem; 
    color: var(--teks-putih); 
    letter-spacing: 2px; 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

.logo span { 
    color: var(--aksen-tosca); 
}

.desktop-nav { 
    display: flex; 
    gap: 35px; 
    align-items: center; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
}

.desktop-nav a { 
    text-decoration: none; 
    color: var(--teks-putih); 
    font-family: 'Poppins', sans-serif; 
    font-size: 1rem; 
    font-weight: 500; 
    transition: color 0.3s ease; 
}

.desktop-nav a:hover { 
    color: var(--aksen-tosca); 
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); 
}

.desktop-nav a.active { 
    color: var(--aksen-tosca); 
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); 
    border-bottom: 2px solid var(--aksen-tosca); 
    padding-bottom: 3px; 
}

.nav-right { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
}

.btn-lets-talk { 
    border: 1px solid var(--aksen-tosca); 
    padding: 5px 15px; 
    border-radius: 20px; 
    color: var(--aksen-tosca); 
    text-decoration: none; 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.9rem; 
    font-weight: 500; 
    transition: all 0.3s ease; 
}

.btn-lets-talk:hover { 
    background-color: var(--aksen-tosca); 
    color: var(--bg-utama); 
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4); 
}

.menu-toggle { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    cursor: pointer; 
    z-index: 1000; 
}

.menu-toggle .bar { 
    width: 25px; 
    height: 2.5px; 
    background-color: var(--teks-putih); 
    border-radius: 5px; 
    transition: all 0.3s ease-in-out; 
}

.menu-toggle:hover .bar { 
    background-color: var(--aksen-tosca); 
    box-shadow: 0 0 10px var(--aksen-tosca); 
}

.vertical-theme-switch {
    position: fixed;
    right: 0 !important; 
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 110px; 
    background: rgba(11, 25, 30, 0.95); 
    clip-path: path('M 55 0 L 16 12 Q 8 16 8 26 L 8 84 Q 8 94 16 98 L 55 110 Z');
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 9px; 
    box-sizing: border-box !important; 
    margin: 0 !important; 
    z-index: 1002;
    filter: drop-shadow(-2px 0px 5px rgba(0, 229, 255, 0.4)); 
}

.vertical-theme-switch input {
    display: none;
}

.vertical-theme-switch .slider {
    position: relative;
    width: 28px;
    height: 48px; 
    background: rgba(11, 25, 30, 0.5); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 229, 255, 0.3); 
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    cursor: pointer;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.vertical-theme-switch .slider i {
    font-size: 12px;
    z-index: 2;
    transition: 0.3s;
}

.vertical-theme-switch .slider .fa-moon {
    color: #EDF6F9; 
}

.vertical-theme-switch .slider .fa-sun {
    color: #f39c12; 
}

.vertical-theme-switch .slider::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 1;
    top: calc(100% - 25px); 
    background-color: rgba(255, 243, 18, 0.15);
    border: 1px solid rgba(243, 156, 18, 0.6);
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.4);
}

.vertical-theme-switch input:checked + .slider::before {
    top: 3px; 
    background-color: rgba(0, 229, 255, 0.2);
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

.sidebar { 
    position: fixed; 
    top: 0; 
    left: -100%; 
    width: 225px; 
    height: 100vh; 
    background: rgba(11, 25, 30, 0.98); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px); 
    border-right: 1px solid rgba(0, 229, 255, 0.15); 
    z-index: 1001; 
    padding: 30px 15px; 
    display: flex; 
    flex-direction: column; 
    transition: left 0.4s ease-in-out; 
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.7); 
    overflow-y: auto; 
    overflow-x: hidden; 
}

.sidebar::-webkit-scrollbar { 
    width: 1px; 
}

.sidebar::-webkit-scrollbar-thumb { 
    background: rgba(0, 229, 255, 0.4); 
    border-radius: 10px; 
}

.sidebar::-webkit-scrollbar-track { 
    background: transparent; 
}

.sidebar.active { 
    left: 0; 
}

.sidebar-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 40px; 
}

.sidebar-header .logo { 
    font-size: 2rem; 
    margin-left: 12px; 
}

.close-btn { 
    font-size: 2.8rem; 
    color: var(--teks-putih); 
    cursor: pointer; 
    line-height: 1; 
    transition: all 0.3s ease; 
}

.close-btn:hover { 
    color: var(--aksen-tosca); 
    transform: rotate(90deg); 
}

.sidebar-nav { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
}

.sidebar-nav a { 
    text-decoration: none; 
    color: var(--teks-putih); 
    font-family: 'Poppins', sans-serif; 
    font-size: 1.1rem; 
    font-weight: 500; 
    transition: all 0.3s ease; 
    padding: 8px 15px; 
    border-radius: 8px; 
}

.sidebar-nav a i { 
    width: 25px; 
    margin-right: 10px; 
    text-align: center; 
    color: transparent; 
    -webkit-text-stroke: 1.2px var(--teks-putih); 
    transition: all 0.3s ease; 
}

.sidebar-nav a:hover:not(.btn-lets-talk-sidebar) { 
    color: var(--aksen-tosca); 
    background: rgba(255, 255, 255, 0.05); 
    transform: translateX(5px); 
}

.sidebar-nav a:hover:not(.active):not(.btn-lets-talk-sidebar) i { 
    -webkit-text-stroke: 1.2px var(--aksen-tosca); 
}

.sidebar-nav a.active { 
    background: rgba(0, 229, 255, 0.15); 
    color: var(--aksen-tosca); 
    border-left: 4px solid var(--aksen-tosca); 
    border-radius: 0 8px 8px 0; 
    transform: translateX(0); 
}

.sidebar-nav a.active i { 
    color: var(--aksen-tosca); 
    -webkit-text-stroke: 0px; 
}

.sidebar-promo { 
    margin-top: 15px; 
    background: rgba(0, 229, 255, 0.03); 
    border: 1px solid rgba(0, 229, 255, 0.15); 
    border-radius: 15px; 
    padding: 20px; 
    text-align: left; 
    box-sizing: border-box; 
    width: 100%; 
}

.sidebar-promo h4 { 
    font-family: 'Poppins', sans-serif; 
    font-size: 1.05rem; 
    font-weight: 600; 
    color: var(--teks-putih); 
    margin: 0 0 8px 0; 
    line-height: 1.4; 
}

.sidebar-promo p { 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.78rem; 
    color: rgba(237, 246, 249, 0.6); 
    margin: 0 0 18px 0; 
    line-height: 1.5; 
}

.btn-coffee-chat { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px; 
    width: 100%; 
    box-sizing: border-box; 
    background: linear-gradient(135deg, rgba(9, 104, 163, 0.7), rgba(0, 229, 255, 0.6)); 
    border: 1px solid rgba(0, 229, 255, 0.3); 
    color: var(--teks-putih); 
    text-decoration: none; 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.9rem; 
    font-weight: 500; 
    padding: 10px 0; 
    border-radius: 8px; 
    transition: all 0.3s ease; 
}

.btn-coffee-chat:hover { 
    background: linear-gradient(135deg, rgba(9, 104, 163, 1), rgba(0, 229, 255, 1)); 
    border-color: var(--teks-putih); 
    color: var(--bg-utama); 
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4); 
    transform: translateY(-2px); 
}

.sidebar-cv { 
    display: block; 
    margin-top: 15px; 
    background: rgba(0, 229, 255, 0.03); 
    border: 1px solid rgba(0, 229, 255, 0.15); 
    border-radius: 12px; 
    padding: 15px; 
    text-decoration: none; 
    transition: all 0.3s ease; 
    box-sizing: border-box; 
    width: 100%; 
}

.sidebar-cv:hover { 
    background: rgba(0, 229, 255, 0.08); 
    border-color: rgba(0, 229, 255, 0.4); 
    transform: translateY(-2px); 
}

.cv-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.9rem; 
    font-weight: 500; 
    color: var(--teks-putih); 
    margin-bottom: 8px; 
}

.cv-header i { 
    color: var(--aksen-tosca); 
    margin-left: auto; 
}

.cv-file { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.8rem; 
    color: rgba(237, 246, 249, 0.6); 
}

.cv-file i { 
    font-size: 1.1rem; 
    color: #ff4757; 
}

.sidebar-footer { 
    margin-top: 20px; 
    border-top: 1px solid rgba(0, 229, 255, 0.15); 
    padding-top: 20px; 
    padding-bottom: 50px; 
}

.sidebar-footer p { 
    font-family: 'Poppins', sans-serif; 
    font-size: 1rem; 
    font-weight: 500; 
    color: var(--teks-putih); 
    margin: 0 0 15px 0; 
    letter-spacing: 1px; 
}

.social-icons { 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
}

.social-icons a { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 5px; 
    height: 20px; 
    background: transparent; 
    border: 1px solid rgba(0, 229, 255, 0.4); 
    border-radius: 50%; 
    text-decoration: none; 
    transition: all 0.3s ease; 
}

.social-icons a i { 
    color: var(--teks-putih) !important; 
    -webkit-text-stroke: 0 !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    font-size: 1.3rem !important; 
}

.social-icons a:hover { 
    background: var(--aksen-tosca); 
    border-color: var(--aksen-tosca); 
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(0, 229, 255, 0.4); 
}

.social-icons a:hover i { 
    color: var(--aksen-tosca) !important; 
}

/* --- 04. HERO SECTION --- */
.hero-section { 
    position: relative; 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden; 
}

.hero-wrapper { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    max-width: 1500px; 
    z-index: 3; 
}

.badge { 
    border: 1px solid var(--aksen-tosca); 
    padding: 6px 200px; 
    border-radius: 50px; 
    font-size: 1.25rem; 
    letter-spacing: 9px; 
    margin-bottom: 15px; 
    box-shadow: var(--bayangan-kotak);
}

.hero-container { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
}

.hero-image-wrapper { 
    position: relative; 
    width: 500px; 
    z-index: 2; 
}

.image-glow { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 400px; 
    height: 600px; 
    background: var(--cahaya-glow); 
    filter: blur(90px); 
    border-radius: 50%; 
    z-index: -1; 
}

.hero-image { 
    width: 100%; 
    height: auto; 
    z-index: 2; 
}

.hero-content { 
    position: relative; 
    z-index: 1; 
    display: flex; 
    flex-direction: column; 
    margin-top: -200px; 
    margin-left: -170px; 
}

.my-text { 
    font-family: 'Dancing Script', cursive; 
    font-size: 7.5rem; 
    font-weight: 600; 
    margin-left: 29px; 
    margin-bottom: -80px; 
    color: var(--teks-putih); 
    transform: rotate(-5deg); 
}

.portofolio-text { 
    font-family: 'Fredoka', sans-serif; 
    font-size: 15rem; 
    font-weight: 700; 
    text-transform: lowercase; 
    letter-spacing: 1px; 
    text-shadow: var(--bayangan-teks-glowing); 
}

.subtitle-text { 
    font-family: 'Poppins', sans-serif; 
    font-size: 1.4rem; 
    font-weight: 500; 
    letter-spacing: 18.5px; 
    color: var(--teks-putih); 
    text-transform: uppercase; 
    margin-top: 5px; 
    margin-left: 60px; 
    margin-right: -21px; 
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.4); 
}

.btn-about { 
    display: inline-block; 
    margin-top: 50px; 
    margin-left: 100px; 
    padding: 12px 35px; 
    background-color: transparent; 
    color: var(--aksen-tosca); 
    text-decoration: none; 
    font-family: 'Poppins', sans-serif; 
    font-size: 1.1rem; 
    font-weight: 600; 
    letter-spacing: 2px; 
    border: 2px solid var(--aksen-tosca); 
    border-radius: 50px; 
    text-transform: uppercase; 
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2); 
    align-self: flex-start; 
    transition: all 0.3s ease; 
}

.btn-about:hover { 
    background-color: var(--aksen-tosca); 
    color: var(--bg-utama); 
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.6); 
    transform: translateY(-5px); 
}

.btn-about .arrow { 
    display: inline-block; 
    margin-left: 5px; 
    transition: transform 0.3s ease; 
}

.btn-about:hover .arrow { 
    transform: translateX(5px); 
}

.grid-bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: linear-gradient(var(--garis-grid) 1px, transparent 1px), linear-gradient(90deg, var(--garis-grid) 1px, transparent 1px); 
    background-size: 60px 60px; 
    z-index: -3; 
}

.glow-circle { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 65vw; 
    max-width: 1200px; 
    height: 500px; 
    background: var(--cahaya-glow); 
    border-radius: 50%; 
    filter: blur(140px); 
    z-index: -2; 
}

.section-transition { 
    position: relative; 
    width: 100%; 
    margin-top: -400px; 
    z-index: 5; 
    line-height: 0; 
    pointer-events: none; 
}

.section-transition svg { 
    display: block; 
    width: 100%; 
    height: auto; 
    filter: var(--bayangan-gelombang); 
}

.section-transition svg path { 
    fill: var(--bg-utama); 
    transition: fill 0.4s ease; 
}

/* --- 05. ABOUT SECTION (TABS, TIMELINE, GRID) --- */
.vector-splash-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 1; 
    overflow: hidden; 
    pointer-events: none; 
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); 
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); 
}

.vector-splash { 
    width: 100%; 
    height: 100%; 
    fill: var(--aksen-tosca); 
}

.vector-splash path:nth-child(1) { opacity: 0.02; }
.vector-splash path:nth-child(2) { opacity: 0.04; }
.vector-splash path:nth-child(3) { opacity: 0.03; }
.vector-splash circle { opacity: 0.15; }
.mobile-splash-wrapper { display: none; }

.about-section { 
    position: relative; 
    min-height: auto; 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    padding: 150px 10% 160px 10%; 
    background-color: var(--bg-utama); 
    z-index: 10; 
}

.about-container { 
    width: 100%; 
    max-width: 1600px; 
    z-index: 2; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.about-section .section-title { 
    position: relative; 
    font-family: 'Changa One', sans-serif; 
    font-size: 4.5rem; 
    color: var(--teks-putih); 
    margin-top: -170px; 
    margin-bottom: 80px; 
    text-transform: capitalize; 
    z-index: 9999; 
    align-self: flex-start; 
}

.about-section .section-title span { 
    color: var(--aksen-tosca); 
    text-shadow: var(--bayangan-teks); 
}

.about-content-wrapper { 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    width: max-content !important; 
    max-width: 100% !important; 
    margin: 0 auto !important; 
    gap: 0 !important; 
    position: relative; 
}

.about-top-row { 
    display: flex !important; 
    flex-direction: row !important; 
    justify-content: space-between !important; 
    align-items: flex-start !important; 
    gap: 85px; 
    width: 100% !important; 
    position: relative; 
    z-index: 10 !important; 
}

.about-text-box {
    flex: 0 1 1050px;
    background: rgba(11, 25, 30, 0.7) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(0, 229, 255, 0.15);
    padding: 35px 40px;
    border-radius: 25px;
    position: relative;
    z-index: 15 !important;
    height: auto;
    box-sizing: border-box !important; 
    transition: all 0.4s ease !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4) !important;
}

.text-mobile {
    display: none;
}

.about-text-box p { 
    font-size: 1.05rem; 
    line-height: 1.8; 
    color: rgba(237, 246, 249, 0.85); 
    margin-bottom: 13px; 
    text-align: justify; 
}

.about-text-box p:last-of-type { 
    margin-bottom: 3px; 
}

.about-text-box p:last-child { 
    margin-bottom: 0; 
}

.about-text-box strong { 
    color: var(--aksen-tosca); 
    font-size: 1.15rem; 
    font-weight: 600; 
}

.btn-read-more { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    margin-top: 10px; 
    padding: 8px 25px; 
    background: rgba(0, 229, 255, 0.05); 
    border: 1px solid rgba(0, 229, 255, 0.3); 
    border-radius: 20px; 
    color: var(--aksen-tosca); 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.9rem; 
    font-weight: 500; 
    text-decoration: none; 
    transition: all 0.3s ease; 
}

.btn-read-more:hover { 
    background: var(--aksen-tosca); 
    color: var(--bg-utama); 
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4); 
    transform: translateY(-3px); 
}

.btn-read-more i { 
    transition: transform 0.3s ease; 
}

.btn-read-more:hover i { 
    transform: translateY(3px); 
}

.about-extra-info {
    width: 100% !important; 
    background: rgba(11, 25, 30, 0.7) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: 0 25px 25px 25px !important; 
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    position: relative;
    z-index: 5 !important; 
    box-sizing: border-box !important; 
    transition: all 0.4s ease !important;
}

.about-extra-info.active {
    max-height: 800px; 
    opacity: 1;
    padding: 40px !important; 
    border-top-left-radius: 0 !important;
    border-top: none !important; 
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4) !important; 
    clip-path: inset(0px -150px -150px -150px) !important;
}

.about-content-wrapper:has(.about-extra-info.active) .about-text-box {
    background: rgba(11, 25, 30, 0.7) !important; 
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: none !important; 
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: 0 !important; 
    padding-bottom: 35px !important;
    clip-path: inset(-150px -150px 0px -150px) !important; 
}

.about-text-box:hover {
    border-color: rgba(0, 229, 255, 0.6) !important;
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.3), 0 0 70px rgba(0, 229, 255, 0.15) !important;
}

.about-content-wrapper:has(.about-extra-info.active):hover .about-text-box {
    border-color: rgba(0, 229, 255, 0.6) !important;
    border-bottom: none !important; 
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.3), 0 0 70px rgba(0, 229, 255, 0.15) !important;
}

.about-content-wrapper:has(.about-extra-info.active):hover .about-extra-info {
    border-color: rgba(0, 229, 255, 0.6) !important;
    border-top: none !important; 
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.3), 0 0 70px rgba(0, 229, 255, 0.15) !important;
}

.about-content-wrapper:has(.about-extra-info.active) .btn-read-more {
    display: none;
}

.about-extra-info .info-grid-split {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s; 
}

.about-extra-info.active .info-grid-split {
    opacity: 1;
    transform: translateY(0);
}

.btn-read-less-icon {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.3);
    color: var(--aksen-tosca);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
    opacity: 0.6;
}

.btn-read-less-icon:hover {
    background: var(--aksen-tosca);
    color: var(--bg-utama);
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4);
}

.info-grid-split { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    width: 100%; 
}

.split-col { 
    display: flex; 
    flex-direction: column; 
}

.mini-tabs { 
    display: flex; 
    gap: 20px; 
    margin-bottom: 25px; 
    border-bottom: 2px solid rgba(0, 229, 255, 0.1); 
    padding-bottom: 12px; 
}

.mini-tab-btn { 
    background: transparent; 
    border: none; 
    color: rgba(237, 246, 249, 0.5); 
    font-family: 'Poppins', sans-serif; 
    font-size: 1.05rem; 
    font-weight: 500; 
    cursor: pointer; 
    padding: 0 5px 12px 5px; 
    transition: all 0.3s ease; 
    position: relative; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: -14px; 
}

.mini-tab-btn i { 
    font-size: 0.9rem; 
    transition: color 0.3s ease; 
}

.mini-tab-btn:hover { 
    color: var(--teks-putih); 
}

.mini-tab-btn.active { 
    color: var(--aksen-tosca); 
    font-weight: 600; 
}

.mini-tab-btn.active::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 3px; 
    background: var(--aksen-tosca); 
    border-radius: 3px 3px 0 0; 
    box-shadow: 0 -2px 10px rgba(0, 229, 255, 0.5); 
}

.mini-tab-content { 
    display: none; 
    animation: fadeIn 0.4s ease; 
}

.mini-tab-content.active { 
    display: block; 
}

.timeline-straight { 
    position: relative; 
    padding-left: 25px; 
    padding-top: 5px; 
}

.timeline-straight::before { 
    content: ''; 
    position: absolute; 
    left: 5.5px; 
    top: 15px; 
    bottom: 0; 
    width: 2px; 
    background: linear-gradient(to bottom, var(--aksen-tosca) 80%, transparent); 
    opacity: 0.4; 
}

.timeline-item { 
    position: relative; 
    margin-bottom: 20px; 
}

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

.dot { 
    position: absolute; 
    left: -25.5px; 
    top: 20px; 
    width: 12px; 
    height: 12px; 
    background: var(--bg-utama); 
    border: 2.5px solid var(--aksen-tosca); 
    border-radius: 50%; 
    z-index: 2; 
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6); 
}

.timeline-mini-zigzag { 
    position: relative; 
    width: 100%; 
    padding-top: 5px; 
}

.timeline-mini-zigzag::before { 
    content: ''; 
    position: absolute; 
    left: 50%; 
    top: 0; 
    bottom: 15px; 
    width: 2px; 
    background: linear-gradient(to bottom, var(--aksen-tosca) 80%, transparent); 
    transform: translateX(-50%); 
    opacity: 0.4; 
    z-index: 0; 
}

.timeline-zigzag-item { 
    position: relative; 
    width: 50%; 
    margin-bottom: -42px; 
    z-index: 2; 
}

.timeline-zigzag-item.left-side { 
    left: 0; 
    padding-right: 15px; 
    box-sizing: border-box; 
}

.timeline-zigzag-item.left-side .dot-zigzag { 
    position: absolute; 
    right: -7px; 
    top: 18px; 
    width: 14px; 
    height: 14px; 
    background: var(--bg-utama); 
    border: 2.5px solid var(--aksen-tosca); 
    border-radius: 50%; 
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6); 
}

.timeline-zigzag-item.right-side { 
    left: 50%; 
    padding-left: 15px; 
    box-sizing: border-box; 
}

.timeline-zigzag-item.right-side .dot-zigzag { 
    position: absolute; 
    left: -7px; 
    top: 18px; 
    width: 14px; 
    height: 14px; 
    background: var(--bg-utama); 
    border: 2.5px solid var(--aksen-tosca); 
    border-radius: 50%; 
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6); 
}

.timeline-zigzag-item .timeline-card { 
    width: 100%; 
    box-sizing: border-box; 
    padding: 12px 15px; 
}

.timeline-zigzag-item .timeline-card h4 { 
    font-size: 0.95rem; 
}

.timeline-zigzag-item .timeline-card p { 
    font-size: 0.75rem; 
    margin-bottom: 8px; 
}

.timeline-zigzag-item.full-width { 
    width: 100%; 
    left: 0; 
    padding: 0; 
    margin-top: 60px; 
    margin-bottom: 20px;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.branch-fork-center { 
    width: calc(50% + 15px); 
    height: 12px; 
    border-top: 2px solid rgba(0, 229, 255, 0.4); 
    border-left: 2px solid rgba(0, 229, 255, 0.4); 
    border-right: 2px solid rgba(0, 229, 255, 0.4); 
    border-radius: 6px 6px 0 0; 
    margin: 0 auto 10px auto; 
    z-index: 1; 
}

.split-cards-zigzag { 
    display: flex; 
    gap: 15px; 
    width: 100%; 
    flex-wrap: wrap; 
}

.split-cards-zigzag .branch-card { 
    flex: 1; 
    min-width: 150px; 
    padding: 15px; 
}

.timeline-card { 
    background: rgba(11, 25, 30, 0.6); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border: 1px solid rgba(0, 229, 255, 0.15); 
    padding: 18px 20px; 
    border-radius: 12px; 
    transition: all 0.3s ease; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
    cursor: pointer; 
}

.timeline-card:hover { 
    border-color: rgba(0, 229, 255, 0.5); 
    box-shadow: 0 5px 20px rgba(0, 229, 255, 0.2); 
    transform: translateY(-3px); 
}

.timeline-date { 
    display: block; 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.8rem; 
    color: var(--aksen-tosca); 
    font-weight: 600; 
    margin-bottom: 5px; 
    letter-spacing: 1px; 
}

.timeline-card h4 { 
    margin: 0 0 5px 0; 
    font-family: 'Poppins', sans-serif; 
    font-size: 1rem; 
    font-weight: 600; 
    color: var(--teks-putih); 
    line-height: 1.3; 
}

.timeline-card p { 
    margin: 0 0 10px 0; 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.8rem; 
    color: rgba(237, 246, 249, 0.6); 
    line-height: 1.5; 
}

.timeline-badge { 
    display: inline-flex; 
    align-items: center; 
    padding: 4px 12px; 
    background: rgba(0, 229, 255, 0.05); 
    color: var(--aksen-tosca); 
    border-radius: 20px; 
    font-size: 0.7rem; 
    font-weight: 600; 
    border: 1px solid rgba(0, 229, 255, 0.2); 
}

.empty-text { 
    color: rgba(237, 246, 249, 0.4) !important; 
    font-style: italic; 
    margin: 0 !important; 
    font-size: 0.9rem !important; 
}

.about-image-wrapper.reveal.active { 
    transform: none !important; 
}

.about-top-row, .about-image-wrapper, .transform-box { 
    z-index: auto !important; 
}

.oval-ring, .transform-box .anchor, .about-glow { 
    z-index: 1 !important; 
}

.about-extra-info { 
    position: relative !important;
    z-index: 5 !important; 
}

.popout-wrapper { 
    position: relative !important; 
    z-index: 10 !important; 
}

.ai-toolbar { 
    position: absolute !important;
    z-index: 10 !important; 
}

.timeline-straight .timeline-card, 
.timeline-straight-right .timeline-card { 
    padding: 12px 15px; 
    min-height: 90px; 
    display: flex;
    flex-direction: column;
}

.timeline-straight .timeline-card { 
    align-items: flex-start; 
    text-align: left; 
}

.timeline-straight-right .timeline-card { 
    align-items: flex-end; 
    text-align: right; 
}

.timeline-straight .timeline-card h4, 
.timeline-straight-right .timeline-card h4 { 
    font-size: 0.95rem; 
    margin-bottom: 3px; 
}

.timeline-straight .timeline-card p, 
.timeline-straight-right .timeline-card p { 
    font-size: 0.75rem; 
    margin-bottom: 8px; 
}

.timeline-straight .timeline-date, 
.timeline-straight-right .timeline-date { 
    font-size: 0.8rem; 
}

.timeline-straight .timeline-badge, 
.timeline-straight-right .timeline-badge { 
    padding: 3px 10px; 
    font-size: 0.65rem; 
    margin-top: auto; 
}

.custom-mobile-dropdown {
    display: none !important;
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px;
    padding-top: 5px;
}

.cert-card {
    background: rgba(11, 25, 30, 0.6);
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    transform: translateZ(0); 
    isolation: isolate; 
}

.cert-card:hover {
    border-color: rgba(0, 229, 255, 0.9); 
    box-shadow: 0 5px 25px rgba(0, 229, 255, 0.25), inset 0 0 12px rgba(0, 229, 255, 0.15);
    transform: translateY(-3px);
}

.cert-img-wrapper {
    position: relative;
    width: 100%;
    height: 130px;
    overflow: hidden;
    border-radius: 11px 11px 0 0; 
}

.cert-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.cert-card:hover .cert-img-wrapper img {
    transform: scale(1.1);
}

.cert-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 25, 28, 0.85); 
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 11px 11px 0 0; 
}

.cert-card:hover .cert-overlay {
    opacity: 1;
}

.cert-overlay button, 
.cert-overlay a {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    width: 100px;
    padding: 6px 0;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cert-overlay button:hover, 
.cert-overlay a:hover {
    background: #fff;
    color: var(--bg-utama);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.cert-info {
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.2);
}

.cert-info h4 {
    margin: 0 0 3px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--teks-putih);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cert-info p {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    color: rgba(237, 246, 249, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.achieve-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px;
    padding-top: 5px;
}

.achieve-card {
    background: rgba(11, 25, 30, 0.6);
    border: 1px solid rgba(0, 229, 255, 0.15); 
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.achieve-card:hover {
    border-color: var(--aksen-tosca); 
    box-shadow: 0 5px 20px rgba(0, 229, 255, 0.2);
    transform: translateY(-3px);
}

.achieve-badge {
    background: rgba(0, 229, 255, 0.05);
    color: var(--aksen-tosca);
    border: 1px solid rgba(0, 229, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.achieve-card h4 {
    margin: 0 0 5px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--teks-putih);
    line-height: 1.3;
}

.achieve-card p {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: rgba(237, 246, 249, 0.6);
    line-height: 1.5;
}

.experience-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px; 
}

.timeline-straight-right {
    position: relative;
    padding-right: 25px; 
    padding-left: 0; 
    padding-top: 5px;
    text-align: right; 
}

.timeline-straight-right::before {
    content: '';
    position: absolute;
    right: 5.5px; 
    left: auto; 
    top: 15px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--aksen-tosca) 80%, transparent);
    opacity: 0.4;
}

.timeline-straight-right .dot {
    left: auto; 
    right: -25.5px; 
}

.about-image-wrapper { 
    flex: 0.0 auto; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 40px; 
    margin-top: -175px !important; 
    position: relative; 
    z-index: 5; 
}

.about-subtitle-photo { 
    position: relative !important; 
    top: 0 !important; 
    margin-bottom: 35px !important; 
    text-align: center; 
    font-family: 'Changa One', sans-serif; 
    font-weight: normal; 
    font-size: 2rem; 
    line-height: 1; 
    color: rgba(237, 246, 249, 0.5); 
    z-index: 10; 
}

.about-subtitle-photo span { 
    color: var(--aksen-tosca); 
    font-family: 'Lobster', cursive; 
    font-weight: normal; 
    font-size: 3rem; 
    display: inline-block; 
    margin-top: 5px; 
}

.about-glow { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 320px; 
    height: 320px; 
    background: var(--cahaya-glow); 
    filter: blur(80px); 
    border-radius: 50%; 
    z-index: -2; 
}

.transform-box { 
    position: relative; 
    width: 300px; 
    height: 370px; 
    border: 1.5px solid var(--aksen-tosca); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 2; 
}

.transform-box .anchor { 
    position: absolute; 
    width: 10px; 
    height: 10px; 
    background: #FFFFFF; 
    border: 1.5px solid var(--aksen-tosca); 
    z-index: 3; 
}

.transform-box .top-left { 
    top: -6px; 
    left: -6px; 
    cursor: nw-resize; 
}

.transform-box .top-right { 
    top: -6px; 
    right: -6px; 
    cursor: ne-resize; 
}

.transform-box .bottom-left { 
    bottom: -6px; 
    left: -6px; 
    cursor: sw-resize; 
}

.transform-box .bottom-right { 
    bottom: -6px; 
    right: -6px; 
    cursor: se-resize; 
} 

.oval-ring { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    border-radius: 50%; 
    z-index: -1; 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
}

.ring-bg-solid { 
    width: 360px; 
    height: 360px; 
    background: rgba(0, 229, 255, 0.05); 
    transform: translate(-50%, -50%); 
    border: none; 
}

.ring-line-solid { 
    width: 350px; 
    height: 410px; 
    border: 3px solid var(--aksen-tosca); 
    transform: translate(-50%, -50%) rotate(15deg); 
}

.ring-dashed-1 { 
    width: 390px; 
    height: 360px; 
    border: 2px dashed rgba(0, 229, 255, 0.6); 
    transform: translate(-50%, -50%) rotate(-25deg); 
}

.ring-dashed-2 { 
    width: 380px; 
    height: 420px; 
    border: 3px dashed rgba(0, 229, 255, 0.3); 
    transform: translate(-50%, -50%) rotate(40deg); 
}

.transform-box:hover .ring-line-solid { 
    transform: translate(-50%, -50%) rotate(-10deg); 
}

.transform-box:hover .ring-dashed-1 { 
    transform: translate(-50%, -50%) rotate(25deg); 
}

.transform-box:hover .ring-dashed-2 { 
    transform: translate(-50%, -50%) rotate(-20deg); 
}

.popout-wrapper { 
    position: relative; 
    width: 100%; 
    height: 100%; 
}

.oval-mask { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 300px; 
    height: 370px; 
    border-radius: 50%; 
    overflow: hidden; 
    border: 3px solid var(--aksen-tosca); 
    z-index: 1; 
}

.bg-img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 385px; 
    height: auto; 
    transform: translate(-50%, -46%); 
    transition: all 0.4s ease; 
}

.popout-img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 385px; 
    transform: translate(-50%, -46%); 
    z-index: 2; 
    pointer-events: none; 
    transition: all 0.4s ease; 
}

.transform-box:hover .bg-img, 
.transform-box:hover .popout-img { 
    transform: translate(-50%, -46%) scale(1.05); 
}

.ai-toolbar { 
    position: absolute; 
    left: -45px; 
    top: 50%; 
    transform: translateY(-50%); 
    background: #1E1E1E; 
    border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 8px; 
    padding: 12px 8px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    z-index: 5; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
}

.ai-toolbar i { 
    color: #888; 
    font-size: 1.1rem; 
    cursor: pointer; 
    transition: 0.3s; 
}

.ai-toolbar i.active, 
.ai-toolbar i:hover { 
    color: var(--teks-putih); 
}

/* --- 06. MODAL POPUPS (PORTFOLIO & SKILLS) --- */
.modal-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh;
    background: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s ease;
}

.modal-overlay.active { 
    opacity: 1; 
    visibility: visible; 
}

.modal-content {
    background: #0B191E; 
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 15px; 
    width: 90%; 
    max-width: 450px; 
    padding: 30px;
    position: relative; 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    transform: translateY(30px); 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 90vh; 
    overflow-y: auto;
}

.modal-overlay.active .modal-content { 
    transform: translateY(0); 
}

.modal-close {
    position: absolute; 
    top: 15px; 
    right: 20px; 
    background: transparent;
    border: none; 
    color: rgba(237, 246, 249, 0.5); 
    font-size: 1.8rem;
    cursor: pointer; 
    transition: 0.3s; 
    line-height: 1;
}

.modal-close:hover { 
    color: #ff4757; 
    transform: scale(1.1); 
}

.modal-header-icon { 
    text-align: center; 
    font-size: 2.5rem; 
    color: var(--aksen-tosca); 
    margin-bottom: 15px; 
}

.modal-content h3 { 
    color: var(--teks-putih); 
    margin: 0 0 5px 0; 
    font-size: 1.3rem; 
    text-align: center; 
}

.modal-content #modal-subtitle { 
    color: rgba(237, 246, 249, 0.6); 
    font-size: 0.8rem; 
    margin: 0 0 20px 0; 
    text-align: center; 
}

.modal-badges { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 8px; 
    margin-bottom: 20px; 
}

.modal-badges span { 
    background: rgba(0, 229, 255, 0.1); 
    color: var(--aksen-tosca); 
    padding: 5px 12px; 
    border-radius: 20px; 
    font-size: 0.75rem; 
    border: 1px solid rgba(0, 229, 255, 0.2); 
}

.modal-desc { 
    font-size: 0.9rem; 
    color: rgba(237, 246, 249, 0.85); 
    line-height: 1.6; 
    margin-bottom: 25px; 
    text-align: justify; 
}

.modal-achievements h4 { 
    color: var(--aksen-tosca); 
    font-size: 1rem; 
    margin: 0 0 10px 0; 
}

.modal-achievements ul { 
    list-style: none; 
    padding: 0; 
    margin: 0 0 20px 0; 
}

.modal-achievements ul li { 
    font-size: 0.85rem; 
    color: rgba(237, 246, 249, 0.85); 
    margin-bottom: 8px; 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
}

.modal-achievements ul li::before { 
    content: '\f14a'; 
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900; 
    color: var(--aksen-tosca); 
    font-size: 0.9rem; 
    margin-top: 2px; 
}

.modal-image-box {
    border: 2px dashed rgba(0, 229, 255, 0.3); 
    border-radius: 12px;
    padding: 20px; 
    text-align: center; 
    color: rgba(237, 246, 249, 0.5);
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    gap: 10px; 
    min-height: 120px; 
    cursor: pointer; 
    transition: 0.3s;
    position: relative; 
    overflow: hidden; 
    background: rgba(0, 0, 0, 0.2);
}

.modal-image-box:hover { 
    border-color: var(--aksen-tosca); 
    color: var(--aksen-tosca); 
    background: rgba(0, 229, 255, 0.05); 
}

.modal-image-box img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    z-index: 2; 
    border-radius: 10px; 
}

.modal-content::-webkit-scrollbar { 
    width: 5px; 
}

.modal-content::-webkit-scrollbar-thumb { 
    background: var(--aksen-tosca); 
    border-radius: 10px; 
}

.expertise-card, 
.skill-pill { 
    cursor: pointer; 
}

.skill-modal-content {
    background: rgba(0, 29, 34, 0.75); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 229, 255, 0.15); 
    border-radius: 16px;
    width: 90%; 
    max-width: 480px; 
    padding: 25px;
    position: relative; 
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transform: translateY(30px); 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.active .skill-modal-content { 
    transform: translateY(0); 
}

.skill-modal-header { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 20px; 
    position: relative; 
}

.skill-modal-icon {
    width: 55px; 
    height: 55px; 
    border-radius: 12px;
    background: rgba(4, 25, 28, 0.6); 
    border: 1px solid rgba(0, 229, 255, 0.1);
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 1.8rem; 
    color: #fff;
}

.skill-modal-icon img { 
    width: 32px; 
    height: 32px; 
    object-fit: contain; 
    filter: none; 
}

.skill-modal-header-text { 
    display: flex; 
    flex-direction: column; 
    gap: 3px; 
}

.skill-modal-header-text h3 { 
    margin: 0; 
    color: #FFFFFF; 
    font-size: 1.35rem; 
    font-weight: 600; 
}

.skill-modal-header-text p { 
    margin: 0; 
    color: rgba(255, 255, 255, 0.5); 
    font-size: 0.75rem; 
    letter-spacing: 1px; 
    font-weight: 600; 
    text-transform: uppercase; 
}

.skill-modal-close {
    position: absolute; 
    top: 0; 
    right: 0;
    width: 32px; 
    height: 32px; 
    border-radius: 50%;
    background: rgba(4, 25, 28, 0.6); 
    border: 1px solid rgba(0, 229, 255, 0.1);
    color: rgba(255, 255, 255, 0.8); 
    font-size: 1.2rem; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    transition: 0.3s;
}

.skill-modal-close:hover { 
    background: rgba(0, 229, 255, 0.2); 
    color: #fff; 
    border-color: rgba(0, 229, 255, 0.5); 
}

.skill-modal-desc { 
    font-size: 0.9rem; 
    color: rgba(255, 255, 255, 0.8); 
    line-height: 1.6; 
    margin-bottom: 25px; 
    text-align: left; 
}

.skill-modal-section-title { 
    font-size: 0.8rem; 
    color: rgba(0, 229, 255, 0.6); 
    letter-spacing: 1px; 
    margin-bottom: 12px; 
}

.skill-expertise-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.skill-expertise-list li {
    background: rgba(4, 25, 28, 0.7); 
    border: 1px solid rgba(0, 229, 255, 0.05);
    border-radius: 12px; 
    padding: 15px 20px;
    display: flex; 
    align-items: center; 
    gap: 12px;
    font-size: 0.9rem; 
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
}

.skill-expertise-list li:hover { 
    background: rgba(13, 60, 65, 0.8); 
    transform: translateX(5px); 
    border-color: rgba(0, 229, 255, 0.3); 
}

.skill-expertise-list li::before {
    content: ''; 
    display: block; 
    width: 6px; 
    height: 6px;
    background: #00E5FF; 
    border-radius: 50%; 
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

/* --- 07. CYBER DIVIDER --- */
.cyber-divider { 
    position: relative; 
    width: 100%; 
    max-width: 1200px; 
    margin: -50px auto 30px auto; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 20; 
    gap: 25px; 
}

.cyber-divider::after { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 2500px; 
    height: 380px; 
    background: radial-gradient(ellipse at center, rgba(11, 25, 30, 1) 0%, rgba(11, 25, 30, 0.5) 45%, transparent 75%); 
    z-index: -2; 
    pointer-events: none; 
}

.cyber-divider .line { 
    flex: 1; 
    height: 2px; 
    background: rgba(0, 229, 255, 0.2); 
    position: relative; 
    overflow: hidden; 
    border-radius: 2px; 
}

.cyber-divider .line:first-child::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: -100%; 
    width: 60%; 
    height: 100%; 
    background: linear-gradient(90deg, transparent, var(--aksen-tosca), transparent); 
    animation: shoot-right 3s infinite linear; 
}

.cyber-divider .line:last-child::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: -100%; 
    left: auto; 
    width: 60%; 
    height: 100%; 
    background: linear-gradient(270deg, transparent, var(--aksen-tosca), transparent); 
    animation: shoot-left 3s infinite linear; 
}

@keyframes shoot-right { 
    0% { left: -100%; } 
    100% { left: 100%; } 
}

@keyframes shoot-left { 
    0% { right: -100%; } 
    100% { right: 100%; } 
}

.cyber-divider .hex-icon { 
    margin: 0; 
    width: auto; 
    height: auto; 
    padding: 12px 30px; 
    background: rgba(11, 25, 30, 0.85); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border: 2px solid rgba(0, 229, 255, 0.5); 
    border-radius: 40px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.15), inset 0 0 10px rgba(0, 229, 255, 0.1); 
    position: relative; 
    transition: all 0.4s ease; 
    transform: none; 
}

.cyber-divider .hex-icon::before { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: calc(100% + 14px); 
    height: calc(100% + 14px); 
    border: 2px solid rgba(0, 229, 255, 0.3); 
    border-radius: 40px; 
    z-index: -1; 
    opacity: 0; 
    animation: pulse-ring 3s infinite cubic-bezier(0.215, 0.61, 0.355, 1); 
}

@keyframes pulse-ring { 
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; } 
}

.cyber-divider .hex-icon i { 
    transform: none; 
    color: var(--aksen-tosca); 
    font-size: 1.3rem; 
    filter: drop-shadow(0 0 8px var(--aksen-tosca)); 
    margin-right: 10px; 
}

.cyber-divider .hex-icon::after { 
    content: "</>"; 
    font-family: 'Poppins', sans-serif; 
    font-weight: 600; 
    color: var(--teks-putih); 
    font-size: 1.1rem; 
    letter-spacing: 1px; 
}

.cyber-divider.active .hex-icon { animation: none; }


/* --- 08. SKILLS SECTION --- */
.skills-section { 
    position: relative; 
    min-height: 600px; 
    margin-top: -100px; 
    padding: 120px 10% 10px 10%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    background-color: transparent; 
    box-shadow: none; 
}

.skills-section > * { position: relative; z-index: 30; }

.skills-section::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: url('assets/images/tekstur/topografi.png'); 
    background-repeat: repeat; 
    background-size: 1920px; 
    opacity: 0.07; 
    pointer-events: none; 
    z-index: 0; 
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 150px); 
    mask-image: linear-gradient(to bottom, transparent 0px, black 150px); 
}

.section-subtitle { 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.9rem; 
    color: rgba(237, 246, 249, 0.6); 
    letter-spacing: 4px; 
    text-transform: uppercase; 
    margin-top: 0; 
    margin-bottom: -10px; 
}

.skills-section .section-title { 
    font-family: 'Changa One', sans-serif; 
    font-size: 4.5rem; 
    color: var(--teks-putih); 
    margin-top: 0; 
    margin-bottom: 20px; 
    text-transform: capitalize; 
    text-align: center; 
}

.skills-section .section-title span { color: var(--aksen-tosca); text-shadow: var(--bayangan-teks); }

.skills-filter { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 5px; 
    margin-bottom: 10px; 
    background: rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(0, 229, 255, 0.15); 
    padding: 8px; 
    border-radius: 50px; 
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.3); 
}

.filter-btn { 
    background: transparent; 
    border: none; 
    color: rgba(237, 246, 249, 0.7); 
    padding: 10px 25px; 
    border-radius: 30px; 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.95rem; 
    font-weight: 500; 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

.filter-btn:hover { background: rgba(0, 229, 255, 0.1); color: var(--teks-putih); }
.filter-btn.active { background: var(--aksen-tosca); color: var(--bg-utama); font-weight: 600; box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4); }

.skills-wrapper { 
    width: 100%; 
    max-width: 1000px; 
    display: flex; 
    flex-direction: column; 
    gap: 0px; 
}

.skill-category { display: block; animation: fadeIn 0.5s ease; }

.category-title { 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.85rem; 
    color: rgba(237, 246, 249, 0.5); 
    letter-spacing: 3px; 
    text-transform: uppercase; 
    text-align: center; 
    margin-bottom: 5px; 
}

.marquee-container { 
    width: 100%; 
    padding: 10px 0; 
    overflow: hidden; 
    white-space: nowrap; 
    position: relative; 
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); 
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); 
}

.skills-wrapper.grid-mode .marquee-container { 
    -webkit-mask-image: none; 
    mask-image: none; 
    overflow: visible; 
    white-space: normal; 
}

.skills-wrapper.grid-mode .marquee-track { 
    display: flex !important; 
    animation: none !important; 
    transform: none !important; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    max-width: 800px; 
    margin: 0 auto; 
}

.skills-wrapper.grid-mode .duplicate { display: none !important; }
.marquee-track { display: inline-flex; gap: 25px; width: max-content; }
.marquee-container:hover .marquee-track { animation-play-state: paused; }

.track-left { animation: scrollLeft 45s linear infinite; }
.track-right { animation: scrollRight 45s linear infinite; }

@keyframes scrollLeft { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(calc(-50% - 12.5px)); } 
}

@keyframes scrollRight { 
    0% { transform: translateX(calc(-50% - 12.5px)); } 
    100% { transform: translateX(0); } 
}

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

.expertise-card { 
    background: rgba(0, 229, 255, 0.02); 
    border: 1px solid rgba(0, 229, 255, 0.15); 
    padding: 15px 30px; 
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    transition: all 0.3s ease; 
    cursor: default; 
}

.expertise-card i { font-size: 1.5rem; color: var(--teks-putih); transition: 0.3s; }
.expertise-card span { font-family: 'Poppins', sans-serif; font-size: 1.05rem; font-weight: 500; }
.expertise-card:hover { border-color: var(--aksen-tosca); background: rgba(0, 229, 255, 0.08); box-shadow: 0 5px 15px rgba(0, 229, 255, 0.2); }
.expertise-card:hover i { color: var(--aksen-tosca); filter: drop-shadow(0 0 5px var(--aksen-tosca)); }

.skill-pill { 
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 12px 25px; 
    border-radius: 50px; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    transition: all 0.3s ease; 
    cursor: default; 
}

.skill-pill i { font-size: 1.2rem; color: var(--brand-color, var(--teks-putih)); transition: 0.3s; }
.skill-pill span { font-family: 'Poppins', sans-serif; font-size: 0.95rem; }
.skill-pill:hover { border-color: var(--aksen-tosca); background: rgba(0, 229, 255, 0.05); box-shadow: 0 0 15px rgba(0, 229, 255, 0.2); transform: scale(1.05); }
.skill-pill:hover i { color: var(--aksen-tosca); }

.skill-pill img.real-icon { 
    width: 20px; 
    height: 20px; 
    object-fit: contain; 
    transition: transform 0.3s ease; 
    pointer-events: none; 
    user-select: none; 
    -webkit-user-drag: none; 
}

.skill-pill:hover img.real-icon { transform: scale(1.15); }
.invert-on-dark { filter: invert(1); }

/* --- 09. PROJECT SECTION & WAVE TRANSITION --- */
.wave-transition { 
    position: relative; 
    width: 100%; 
    line-height: 0; 
    z-index: 5; 
    margin-top: -150px; 
    pointer-events: none; 
}

.wave-transition svg { display: block; width: 100%; height: auto; filter: var(--bayangan-gelombang); }
.wave-transition svg path { fill: var(--bg-utama); transition: fill 0.4s ease; }

/* Background SVG Khusus Project */
.vector-splash-container-project { 
    display: none; /* KUNCI BIAR GAIB DI DARK MODE */
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 1; 
    overflow: hidden; 
    pointer-events: none; 
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); 
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); 
}

.vector-splash-project { 
    width: 100%; 
    height: 100%; 
}

.project-section { 
    position: relative; 
    margin-top: 0; 
    padding: 0 10% 30px 10%; 
    padding-bottom: 0 !important; 
    background-color: var(--bg-utama); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    z-index: 20; 
}

.project-section .section-subtitle { margin-top: -190px; position: relative; z-index: 20; }

.project-section .section-title { 
    font-family: 'Changa One', sans-serif; 
    font-size: 4.5rem; 
    color: var(--teks-putih); 
    margin-top: 0; 
    margin-bottom: 120px; 
    text-transform: capitalize; 
    text-align: center; 
    position: relative; 
    z-index: 20; 
}

.project-section .section-title span { color: var(--aksen-tosca); text-shadow: var(--bayangan-teks); }

.project-filter { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 5px; 
    margin: -70px auto 30px auto; 
    position: relative; 
    z-index: 30; 
    background: rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(0, 229, 255, 0.15); 
    padding: 8px; 
    border-radius: 50px; 
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3); 
    width: max-content; 
}

.p-filter-btn { 
    background: transparent; 
    border: none; 
    color: rgba(237, 246, 249, 0.7); 
    padding: 10px 25px; 
    border-radius: 30px; 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.95rem; 
    font-weight: 500; 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

.p-filter-btn:hover { color: var(--teks-putih); border-color: rgba(0, 229, 255, 0.5); }
.p-filter-btn.active { background: var(--aksen-tosca); color: var(--bg-utama); font-weight: 600; box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4); }

.project-carousel-wrapper { 
    position: relative; 
    width: 100%; 
    max-width: 1600px; 
    margin: -50px auto 0 auto; 
    overflow: visible !important; 
    padding: 50px 0 50px 0 !important; 
    z-index: 20 !important; 
}

.project-track-container { 
    width: 100%; 
    overflow: visible !important; 
    padding-top: 100px; 
    padding-bottom: 140px !important; 
    margin-top: -100px; 
    margin-bottom: -100px !important; 
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); 
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); 
}

.project-track { display: flex; align-items: center; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }

.carousel-btn { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 55px; 
    height: 55px; 
    border-radius: 50%; 
    background: rgba(11, 25, 30, 0.8); 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(0, 229, 255, 0.3); 
    color: var(--aksen-tosca); 
    font-size: 1.4rem; 
    cursor: pointer; 
    z-index: 100; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.3s ease; 
}

.carousel-btn:hover { background: var(--aksen-tosca); color: var(--bg-utama); box-shadow: 0 0 20px rgba(0, 229, 255, 0.5); }
.prev-btn { left: 0px; } 
.next-btn { right: 0px; } 

.empty-project-msg { 
    display: none; 
    width: 100%; 
    padding: 120px 0; 
    text-align: center; 
    color: rgba(237, 246, 249, 0.5); 
    z-index: 50; 
}

.empty-project-msg i { font-size: 3rem; color: rgba(0, 229, 255, 0.3); margin-bottom: 15px; display: block; }
.empty-project-msg p { font-family: 'Poppins', sans-serif; font-size: 1rem; font-style: italic; margin: 0; }

.project-counter { 
    text-align: center; 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.85rem; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    color: var(--teks-putih); 
    margin: -20px auto 30px auto !important; 
    position: relative; 
    z-index: 30 !important; 
    background: transparent !important; 
    border: none !important; 
    border-top: 1px solid rgba(0, 229, 255, 0.3) !important; 
    border-bottom: 1px solid rgba(0, 229, 255, 0.3) !important; 
    border-radius: 0 !important; 
    padding: 8px 30px !important; 
    box-shadow: none !important; 
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important; 
}

.project-counter.reveal { transform: translateY(-11px) !important; transition: opacity 0.4s ease-out, transform 0.4s ease-out !important; }
.project-counter.reveal.active { transform: translateY(0) !important; opacity: 1 !important; }
.project-counter span { color: var(--teks-putih) !important; font-weight: 600; text-shadow: 0 0 8px rgba(0, 229, 255, 0.6); }

.project-slide { 
    flex: 0 0 65%; 
    max-width: 800px; 
    padding: 0 5px; 
    box-sizing: border-box; 
    opacity: 0.35; 
    transform: scale(0.85); 
    transition: opacity 0.5s ease, transform 0.5s ease; 
}

.project-slide.active { opacity: 1; transform: scale(1); }
.p-card-shadow { height: 100%; width: 100%; filter: drop-shadow(0 15px 35px rgba(0,0,0,0.8)) drop-shadow(0 0 40px rgba(0, 229, 255, 0.35)) !important; }

.p-card-glass { 
    height: 100%; 
    position: relative; 
    clip-path: url(#card-slant); 
    -webkit-clip-path: url(#card-slant); 
    background: linear-gradient(135deg, rgba(0, 140, 161, 0.25) 0%, rgba(4, 25, 28, 0.9) 100%); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
    padding: 65px 35px 35px 35px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.p-card-glass::before { 
    content: ''; 
    position: absolute; 
    inset: 0; 
    z-index: 10; 
    pointer-events: none; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M 0,0.16 Q 0,0.09 0.06,0.08 L 0.94,0.01 Q 1,-0.005 1,0.07 L 1,0.93 Q 1,1 0.94,1 L 0.06,1 Q 0,1 0,0.93 Z' fill='none' stroke='%2300E5FF' stroke-width='4.5px' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); 
    background-size: 100% 100%; 
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.6)); 
}

.p-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.p-card-title h3 { margin: 0 0 5px 0; color: #fff; font-size: 1.45rem; font-family: 'Poppins', sans-serif; }

.p-card-title p { 
    margin: 0; 
    color: rgba(237, 246, 249, 0.7); 
    font-size: 0.9rem; 
    padding-right: 20px; 
    line-height: 1.5; 
}

.btn-external { 
    flex-shrink: 0; 
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    background: #fff; 
    color: #000; 
    font-size: 1.2rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none; 
    transition: 0.3s; 
    margin: -25px -5px 0 0; 
}

.btn-external:hover { transform: scale(1.1); background: var(--aksen-tosca); color: #fff; box-shadow: 0 0 15px var(--aksen-tosca); }

.p-card-gallery { 
    display: flex; 
    justify-content: space-between; 
    gap: 12px; 
    height: 240px; 
    margin-top: 15px; 
}
.p-card-gallery .img-light { display: none !important; }
.p-card-gallery .img-dark { display: block !important; }

.p-card-gallery img { 
    width: 23.5%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 12px; 
    border: 1px solid rgba(0, 229, 255, 0.3); 
    transition: 0.4s ease; 
    user-select: none; 
    -webkit-user-drag: none; 
}

.p-card-gallery img:hover { transform: translateY(-8px); border-color: var(--aksen-tosca); box-shadow: 0 10px 20px rgba(0, 229, 255, 0.2); }

.p-card-footer { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 20px; 
    margin-top: 15px; 
}

.tool-line { flex: 1; display: flex; align-items: center; }
.tool-line .line { height: 2px; flex: 1; background: linear-gradient(to right, transparent, rgba(0, 229, 255, 0.8)); }
.tool-line i { color: rgba(0, 229, 255, 0.8); margin-left: -3px; font-size: 1.2rem; }
.tool-icons { display: flex; gap: 10px; }

.tool-icons img, 
.tool-icons i { 
    width: 38px; 
    height: 38px; 
    border-radius: 50%; 
    background: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    object-fit: contain; 
    padding: 6px; 
    box-sizing: border-box; 
    transition: 0.3s; 
}

.tool-icons img:hover, .tool-icons i:hover { border-color: var(--aksen-tosca); box-shadow: 0 0 10px rgba(0, 229, 255, 0.4); }

.show-more-wrapper { 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    margin-top: 30px; 
    padding-top: 15px; 
    border-top: 1px dashed rgba(0, 229, 255, 0.2); 
    grid-column: 1 / -1; 
}

.btn-show-more { 
    background: rgba(0, 229, 255, 0.05); 
    border: 1px solid rgba(0, 229, 255, 0.3); 
    color: var(--aksen-tosca); 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.85rem; 
    font-weight: 500; 
    padding: 8px 25px; 
    border-radius: 20px; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.btn-show-more:hover { background: var(--aksen-tosca); color: var(--bg-utama); box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4); transform: translateY(-3px); }

.btn-read-less-icon { 
    position: absolute; 
    top: 25px; 
    right: 25px; 
    background: rgba(0, 229, 255, 0.1); 
    border: 1px solid rgba(0, 229, 255, 0.3); 
    color: var(--aksen-tosca); 
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    z-index: 100; 
    opacity: 0.6; 
}

.btn-read-less-icon:hover { background: var(--aksen-tosca); color: var(--bg-utama); opacity: 1; transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4); }


/* --- 10. CONTACT SECTION & FOOTER --- */
.wave-transition-contact { position: relative; width: 100%; line-height: 0; z-index: 15 !important; margin-top: -5px !important; background-color: #061217; background-image: radial-gradient(circle, rgba(0, 229, 255, 0.07) 1.8px, transparent 1.8px); background-size: 45px 45px; background-position: center bottom; pointer-events: none; }
.wave-transition-contact svg { display: block; width: 100%; height: auto; filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.4)); transform: none; }
.wave-transition-contact svg path { fill: var(--bg-utama); transition: fill 0.4s ease; }
.contact-section { position: relative; padding: 0px 10% 50px 10%; background-color: #061217; display: flex; flex-direction: column; align-items: center; z-index: 25; margin-bottom: 0; }
.contact-section::before { content: ""; position: absolute; top: -0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(0, 229, 255, 0.07) 1.8px, transparent 1.8px); background-size: 45px 45px; background-position: center top; -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, black 85%, transparent 100%); }
.glow-circle-contact { display: none; }

/* Wrapper Contact - FIX OVERFLOW */
.contact-wrapper { width: 100%; max-width: 1100px; position: relative; z-index: 20; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
.contact-section .section-subtitle { margin-top: -250px; position: relative; z-index: 20; }
.contact-section .section-title { font-family: 'Changa One', sans-serif; font-size: 4.5rem; color: var(--teks-putih); margin-top: 0; margin-bottom: 50px; text-align: center; position: relative; z-index: 20; }
.contact-section .section-title span { color: var(--aksen-tosca); text-shadow: var(--bayangan-teks); }

/* STRUKTUR CONTACT BARU SESUAI REFERENSI */
.contact-content-new { width: 100%; display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; }
.contact-top-row { display: flex; gap: 30px; width: 100%; box-sizing: border-box; }

/* FORM KIRI */
.contact-form-new { flex: 1.8; display: flex; flex-direction: column; justify-content: center; width: 100%; overflow: hidden; box-sizing: border-box; }
.contact-form-new form { display: flex; flex-direction: column; gap: 15px; width: 100%; box-sizing: border-box; }
.form-row-1, .form-row-2 { display: flex; gap: 10px; width: 100%; box-sizing: border-box; }

.form-row-2 input, .form-row-1 input, .form-row-1 textarea { width: 100%; padding: 18px 25px; border-radius: 40px; border: 1px solid rgba(0, 229, 255, 0.2); background: rgba(11, 25, 30, 0.6); color: var(--teks-putih); font-family: 'Poppins', sans-serif; font-size: 0.95rem; outline: none; box-sizing: border-box; transition: all 0.3s ease; }
.form-row-1 textarea { border-radius: 25px; resize: none; height: 160px; }
.form-row-2 input:focus, .form-row-1 input:focus, .form-row-1 textarea:focus { border-color: var(--aksen-tosca); background: rgba(0, 229, 255, 0.05); }
.form-row-2 input::placeholder, .form-row-1 input::placeholder, .form-row-1 textarea::placeholder { color: rgba(237, 246, 249, 0.5); font-style: normal; }

.btn-submit-new { 
    align-self: flex-start; 
    padding: 15px 40px; 
    border-radius: 40px; 
    background: var(--aksen-tosca); 
    color: #0B191E; 
    font-weight: 600; 
    font-family: 'Poppins', sans-serif; 
    font-size: 1rem; 
    border: 2px solid var(--aksen-tosca);
    cursor: pointer; 
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    margin-top: 5px;
}
.btn-submit-new:hover { 
    background: transparent;
    color: var(--aksen-tosca);
    box-shadow: 0 8px 25px rgba(0, 229, 255, 0.5), inset 0 0 12px rgba(0, 229, 255, 0.3);
    transform: translateY(-5px);
    letter-spacing: 1px;
}
.btn-submit-new:active {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4), inset 0 0 8px rgba(0, 229, 255, 0.2);
}

/* NEWSLETTER KANAN */
.newsletter-card { flex: 1; background: rgba(11, 25, 30, 0.8); border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 30px; padding: 40px 30px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; box-sizing: border-box; }
.newsletter-card h3 { color: var(--teks-putih); font-size: 1.6rem; margin: 0 0 15px 0; z-index: 2; position: relative; }
.newsletter-card p { color: rgba(237, 246, 249, 0.7); font-size: 0.85rem; line-height: 1.6; margin: 0 0 25px 0; z-index: 2; position: relative; }
.newsletter-form { display: flex; flex-direction: column; gap: 15px; z-index: 2; position: relative; }
.newsletter-form input { width: 100%; padding: 15px 25px; border-radius: 40px; border: none; background: #fff; color: #333; outline: none; font-family: 'Poppins', sans-serif; box-sizing: border-box; }
.newsletter-form input::placeholder { color: #999; font-style: italic; }
.newsletter-form button { width: 100%; padding: 15px 25px; border-radius: 40px; border: none; background: #000; color: #fff; font-weight: 600; font-family: 'Poppins', sans-serif; cursor: pointer; transition: 0.3s; box-sizing: border-box; }
.newsletter-form button:hover { background: var(--aksen-tosca); color: #000; }

/* 3 INFO BOX BAWAH - FIX OVERFLOW */
.contact-bottom-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; box-sizing: border-box; }
.info-box-new { border-radius: 25px; padding: 30px 25px; display: flex; flex-direction: column; gap: 15px; border: 1px solid rgba(0, 229, 255, 0.2); box-sizing: border-box; overflow: hidden;}
.info-header-new { display: flex; align-items: center; gap: 15px; }
.info-header-new i { font-size: 1.8rem; color: var(--aksen-tosca); }
.info-header-new h4 { margin: 0; color: var(--teks-putih); font-size: 0.95rem; }
.info-box-new p { margin: 0; font-size: 0.8rem; color: rgba(237, 246, 249, 0.7); line-height: 1.6; }
.info-box-new.dark-box { background: rgba(11, 25, 30, 0.8); }
.info-box-new.mid-box { background: rgba(11, 25, 30, 0.6); }
.info-box-new.light-box { background: rgba(11, 25, 30, 0.4); }

/* FOOTER BARU DENGAN SPASI YANG DIRAPETIN */
.fat-footer { background: #0B1D24; padding: 30px 10% 15px 10%; color: rgba(237, 246, 249, 0.7); font-family: 'Poppins', sans-serif; position: relative; z-index: 20; border-top: 1px solid rgba(0, 229, 255, 0.1); }
.footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 20px; margin-bottom: 5px; }
.brand-col .logo { font-family: 'LogoAghsay', cursive; font-size: 2.2rem; color: var(--teks-putih); margin-bottom: 5px; }
.brand-col .logo span { color: var(--aksen-tosca); }
.brand-col p { font-size: 0.8rem; line-height: 1.5; padding-right: 20px;}
.link-col h4 { color: var(--teks-putih); font-size: 0.95rem; margin: 0 0 10px 0; }
.link-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.link-col ul li a { color: rgba(237, 246, 249, 0.7); text-decoration: none; transition: 0.3s; font-size: 0.8rem; }
.link-col ul li a:hover { color: var(--aksen-tosca); padding-left: 5px; }

.footer-middle { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-top: 1px solid rgba(0, 229, 255, 0.15); border-bottom: 1px solid rgba(0, 229, 255, 0.15); flex-wrap: wrap; gap: 10px; }
.f-contact-item { display: flex; align-items: center; gap: 8px; }
.f-contact-item i { font-size: 1rem; color: var(--teks-putih); }
.f-contact-item span { font-size: 0.8rem; color: var(--teks-putih); font-weight: 500;}
.f-socials { display: flex; gap: 8px; }
.f-socials a { color: var(--teks-putih); background: transparent; width: 28px; height: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none; transition: 0.3s; font-size: 1rem;}
.f-socials a:hover { color: var(--aksen-tosca); transform: translateY(-3px);}

.footer-bottom { text-align: center; font-size: 0.75rem; color: rgba(237, 246, 249, 0.5); padding-top: 5px; }


/* --- 11. CUSTOM SCROLLBAR --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-utama); }
::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--aksen-tosca); }


/* =======================================================
   12. LIGHT MODE STYLES
   ======================================================= */
body.light-mode {
    --bg-utama: #F4F7F7; 
    --teks-putih: #1A2E2F; 
    --aksen-tosca: #669295; 
    --bayangan-teks-glowing: none; 
    --bayangan-teks: none; 
    --garis-grid: rgb(104, 143, 142, 0.12); 
    --cahaya-glow: transparent; 
    --bayangan-kotak: 0 4px 15px rgba(26, 46, 47, 0.05); 
    --bayangan-gelombang: drop-shadow(0px -10px 20px rgba(26, 46, 47, 0.05));
}

/* Nav & Sidebar */
body.light-mode .top-navbar { background: rgba(244, 247, 247, 0.9); border-bottom: 1px solid #D0E2E6; }
body.light-mode .top-navbar.scrolled { background: rgba(155, 185, 187, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(26, 46, 47, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
body.light-mode .desktop-nav a:hover { color: #688F8E; text-shadow: none; }
body.light-mode .desktop-nav a.active { color: #1A2E2F; text-shadow: none; border-bottom: 2px solid #1A2E2F; }
body.light-mode .menu-toggle:hover .bar { background-color: #669295; box-shadow: none; }

body.light-mode .sidebar { background: #FFFFFF; border-right: 1px solid #D0E2E6; box-shadow: 5px 0 20px rgba(26, 46, 47, 0.05); }
body.light-mode .sidebar-cv, 
body.light-mode .sidebar-promo { background: #D0E2E6; border-color: #9BB9BB; }
body.light-mode .sidebar-nav a i { -webkit-text-stroke: 0; color: #669295; }
body.light-mode .sidebar-nav a:hover:not(.active):not(.btn-lets-talk-sidebar) i { -webkit-text-stroke: 0; color: #1A2E2F; }
body.light-mode .sidebar-nav a:hover:not(.btn-lets-talk-sidebar) { background: #D0E2E6; color: #1A2E2F; }
body.light-mode .sidebar-nav a.active { background: #D0E2E6; border-left: 4px solid #1A2E2F; color: #1A2E2F; }
body.light-mode .sidebar-nav a.active i { color: #1A2E2F; }
body.light-mode .sidebar-footer { border-top: 1px solid #D0E2E6; }
body.light-mode .social-icons a { border: 1px solid #9BB9BB; }
body.light-mode .social-icons a i { color: #669295 !important; }
body.light-mode .social-icons a:hover { background: #1A2E2F; border-color: #1A2E2F; box-shadow: 0 4px 10px rgba(26, 46, 47, 0.1); transform: translateY(-3px); }
body.light-mode .social-icons a:hover i { color: #FFFFFF !important; text-shadow: none !important; }
body.light-mode .sidebar-promo p, 
body.light-mode .cv-file { color: rgba(26, 46, 47, 0.7); }
body.light-mode .sidebar-promo h4, 
body.light-mode .cv-header { color: #1A2E2F; }

/* Theme Switcher */
body.light-mode .vertical-theme-switch { background: #688F8E; filter: drop-shadow(-2px 0px 5px rgba(26, 46, 47, 0.05)); }
body.light-mode .vertical-theme-switch .slider { background: #D0E2E6; border-color: #669295; }
body.light-mode .vertical-theme-switch .slider .fa-moon { color: #1A2E2F; }
body.light-mode .vertical-theme-switch input:checked + .slider::before { background-color: #D0E2E6; border-color: #FFFFFF; box-shadow: 0 2px 5px rgba(26, 46, 47, 0.2); }

/* Buttons */
body.light-mode .btn-about { background-color: #1A2E2F; color: #FFFFFF; border-color: #1A2E2F; box-shadow: 0 4px 15px rgba(26, 46, 47, 0.1); }
body.light-mode .btn-about:hover { background-color: transparent; border-color: #1A2E2F; color: #1A2E2F; box-shadow: 0 6px 20px rgba(26, 46, 47, 0.1); transform: translateY(-5px); }
body.light-mode .btn-lets-talk { border-color: #1A2E2F; color: #1A2E2F; }
body.light-mode .btn-lets-talk:hover { background-color: #1A2E2F; border-color: #1A2E2F; color: #FFFFFF; box-shadow: 0 4px 10px rgba(26, 46, 47, 0.15); }
body.light-mode .btn-read-more,
body.light-mode .btn-read-less-icon,
body.light-mode .btn-show-more { background: #D0E2E6; border-color: #9BB9BB; color: #1A2E2F; }
body.light-mode .btn-read-more:hover,
body.light-mode .btn-read-less-icon:hover,
body.light-mode .btn-show-more:hover { background: #9BB9BB; color: #1A2E2F; box-shadow: 0 4px 12px rgba(26, 46, 47, 0.1); }

/* Vector & Text Typography */
body.light-mode .vector-splash { fill: #D0E2E6; }
body.light-mode .vector-splash path:nth-child(1), 
body.light-mode .vector-splash path:nth-child(2), 
body.light-mode .vector-splash path:nth-child(3), 
body.light-mode .vector-splash circle { opacity: 0.5; }
body.light-mode .about-subtitle-photo { color: #1A2E2F; }
body.light-mode .about-subtitle-photo span { color: #F4F7F7 !important; text-shadow: none !important; }
body.light-mode .about-text-box p { color: #1A2E2F; line-height: 28px !important; margin-bottom: 30px !important; }
body.light-mode .about-text-box p:last-child { margin-bottom: 0 !important; }
body.light-mode .about-text-box strong { color: #1A2E2F !important; font-weight: 700 !important; }
body.light-mode .my-text { color: #669295; }
body.light-mode .subtitle-text { text-shadow: none; color: #1A2E2F; }

/* Custom Scrollbar */
body.light-mode::-webkit-scrollbar-track { background: #688F8E; }
body.light-mode::-webkit-scrollbar-thumb { background: #D0E2E6; border-radius: 10px; border: 2px solid #9BB9BB; }
body.light-mode::-webkit-scrollbar-thumb:hover { background: #FFFFFF; }

/* Badge & Transitions */
body.light-mode .badge { background-color: #9BB9BB; color: #1A2E2F; border: 1px solid #1A2E2F; font-weight: 600; }
body.light-mode .section-transition svg path,
body.light-mode .wave-transition svg path { fill: #9BB9BB !important; }

/* About Section */
body.light-mode .about-section { background: linear-gradient(to bottom, #9BB9BB 0%, #D0E2E6 35%, #F4F7F7 100%); }
body.light-mode .about-section .section-title { color: #1A2E2F; }
body.light-mode .about-section .section-title span { color: #F4F7F7 !important; text-shadow: none !important; }
body.light-mode .about-text-box { background-color: #FFFFFF !important; background-image: repeating-linear-gradient(transparent, transparent 29px, #D0E2E6 29px, #D0E2E6 30px) !important; background-position: 0 17px !important; box-shadow: 0 10px 30px rgba(26, 46, 47, 0.05) !important; border-color: #D0E2E6 !important; }
body.light-mode .about-extra-info { background-color: #FFFFFF !important; background-image: none !important; border-color: #D0E2E6 !important; }
body.light-mode .about-content-wrapper:has(.about-extra-info.active) .about-text-box { background-color: #FFFFFF !important; background-image: repeating-linear-gradient(transparent, transparent 29px, #D0E2E6 29px, #D0E2E6 30px) !important; border-color: #D0E2E6 !important; }
body.light-mode .about-extra-info.active { box-shadow: 0 10px 30px rgba(26, 46, 47, 0.05) !important; }
body.light-mode .about-text-box:hover { border-color: #9BB9BB !important; box-shadow: 0 15px 35px rgba(26, 46, 47, 0.08) !important; }
body.light-mode .about-content-wrapper:has(.about-extra-info.active):hover .about-text-box, 
body.light-mode .about-content-wrapper:has(.about-extra-info.active):hover .about-extra-info { border-color: #9BB9BB !important; box-shadow: 0 15px 35px rgba(26, 46, 47, 0.08) !important; }

/* Timeline & Grids */
body.light-mode .timeline-mini-zigzag::before,
body.light-mode .timeline-straight::before,
body.light-mode .timeline-straight-right::before { background: linear-gradient(to bottom, #9BB9BB 80%, transparent); opacity: 0.5; }
body.light-mode .timeline-zigzag-item.left-side .dot-zigzag, 
body.light-mode .timeline-zigzag-item.right-side .dot-zigzag,
body.light-mode .dot { background: #FFFFFF; border-color: #669295; box-shadow: none; }
body.light-mode .branch-fork-center,
body.light-mode .diagonal-line { border-color: #9BB9BB; }
body.light-mode .mini-tabs { border-color: #D0E2E6; }
body.light-mode .mini-tab-btn { color: rgba(26, 46, 47, 0.5); }
body.light-mode .mini-tab-btn:hover { color: #688F8E; }
body.light-mode .mini-tab-btn.active { color: #1A2E2F; }
body.light-mode .mini-tab-btn.active::after { background: #1A2E2F; box-shadow: none; } 
body.light-mode .timeline-card,
body.light-mode .achieve-card { background: #FFFFFF; border-color: #D0E2E6; box-shadow: 0 4px 15px rgba(26, 46, 47, 0.03); }
body.light-mode .timeline-card:hover,
body.light-mode .achieve-card:hover { border-color: #669295; box-shadow: 0 8px 25px rgba(26, 46, 47, 0.08); transform: translateY(-3px); }
body.light-mode .timeline-date { color: #669295; }
body.light-mode .timeline-card h4,
body.light-mode .achieve-card h4 { color: #1A2E2F; }
body.light-mode .timeline-card p,
body.light-mode .achieve-card p { color: rgba(26, 46, 47, 0.7); }
body.light-mode .timeline-badge,
body.light-mode .achieve-badge { background: #1A2E2F; color: #D0E2E6; border-color: #9BB9BB; }
body.light-mode .empty-text { color: rgba(26, 46, 47, 0.5) !important; }

/* Certificate Cards */
body.light-mode .cert-card { background: #FFFFFF; border-color: #D0E2E6; }
body.light-mode .cert-card:hover { border-color: #669295; box-shadow: 0 8px 25px rgba(26, 46, 47, 0.08); }
body.light-mode .cert-info { background: #F4F7F7; }
body.light-mode .cert-info h4 { color: #1A2E2F; }
body.light-mode .cert-info p { color: rgba(26, 46, 47, 0.7); }
body.light-mode .cert-overlay { background: rgba(26, 46, 47, 0.85); }
body.light-mode .cert-overlay button:hover, 
body.light-mode .cert-overlay a:hover { box-shadow: none; background: #688F8E; border-color: #688F8E; color: #FFFFFF; } 

/* 3D Tools & Rings */
body.light-mode .transform-box { border-color: #9BB9BB; }
body.light-mode .transform-box .anchor { border-color: #1A2E2F; background: #FFFFFF; }
body.light-mode .ring-bg-solid { background: #D0E2E6; }
body.light-mode .ring-line-solid { border-color: #9BB9BB; }
body.light-mode .ring-dashed-1 { border-color: #688F8E; }
body.light-mode .ring-dashed-2 { border-color: #669295; }
body.light-mode .oval-mask { border-color: #1A2E2F; }
body.light-mode .ai-toolbar { background: #FFFFFF; border: 1px solid #D0E2E6; box-shadow: 0 5px 15px rgba(26, 46, 47, 0.08); }
body.light-mode .ai-toolbar i { color: #9BB9BB; }
body.light-mode .ai-toolbar i.active, 
body.light-mode .ai-toolbar i:hover { color: #1A2E2F; }

/* Modals */
body.light-mode .modal-content { background: #FFFFFF; border-color: #D0E2E6; box-shadow: 0 15px 40px rgba(26, 46, 47, 0.15); }
body.light-mode .modal-content h3 { color: #1A2E2F; }
body.light-mode .modal-content #modal-subtitle, 
body.light-mode .modal-desc, 
body.light-mode .modal-achievements ul li { color: rgba(26, 46, 47, 0.8); }
body.light-mode .modal-image-box { border-color: #9BB9BB; color: rgba(26, 46, 47, 0.6); background: #F4F7F7; }
body.light-mode .modal-badges span { background: #D0E2E6; color: #1A2E2F; border-color: #9BB9BB; }
body.light-mode .modal-achievements ul li::before { color: #669295; }
body.light-mode .modal-header-icon,
body.light-mode .modal-close:hover { color: #1A2E2F; }

body.light-mode .skill-modal-content { background: rgba(255, 255, 255, 0.95); border-color: #D0E2E6; box-shadow: 0 15px 40px rgba(26, 46, 47, 0.15); }
body.light-mode .skill-modal-header-text h3 { color: #1A2E2F; }
body.light-mode .skill-modal-header-text p { color: rgba(26, 46, 47, 0.6); }
body.light-mode .skill-modal-close { background: #F4F7F7; border-color: #D0E2E6; color: #1A2E2F; }
body.light-mode .skill-modal-close:hover { background: #D0E2E6; border-color: #9BB9BB; color: #1A2E2F; }
body.light-mode .skill-modal-desc { color: rgba(26, 46, 47, 0.8); }
body.light-mode .skill-modal-section-title { color: rgba(26, 46, 47, 0.5); }
body.light-mode .skill-expertise-list li { background: #F4F7F7; border: 1px solid #D0E2E6; color: #1A2E2F; }
body.light-mode .skill-expertise-list li:hover { background: #FFFFFF; border-color: #9BB9BB; transform: translateX(5px); }
body.light-mode .skill-expertise-list li::before { background: #669295; box-shadow: none; } 
body.light-mode .skill-modal-icon { background: #F4F7F7; border: 1px solid #D0E2E6; color: #1A2E2F; }

/* Cyber Divider */
body.light-mode .cyber-divider::after { background: radial-gradient(ellipse at center, rgba(244, 247, 247, 1) 0%, rgba(244, 247, 247, 0.5) 45%, transparent 75%); }
body.light-mode .cyber-divider .line { background: #D0E2E6; box-shadow: none; }
body.light-mode .cyber-divider .line:first-child::before { background: linear-gradient(90deg, transparent, #669295, transparent); }
body.light-mode .cyber-divider .line:last-child::before { background: linear-gradient(270deg, transparent, #669295, transparent); }
body.light-mode .cyber-divider .hex-icon { background: #FFFFFF; border: 2px solid #9BB9BB; box-shadow: 0 4px 15px rgba(26, 46, 47, 0.05); } 
body.light-mode .cyber-divider .hex-icon::before { border-color: #D0E2E6; box-shadow: none; }
body.light-mode .cyber-divider .hex-icon i { color: #1A2E2F; filter: none; }
body.light-mode .cyber-divider .hex-icon::after { color: #1A2E2F; }

/* Skills Section */
body.light-mode .skills-filter { background: #E2ECEC !important; border: 1px solid rgba(255, 255, 255, 0.8) !important; box-shadow: inset 0 4px 10px rgba(26, 46, 47, 0.12) !important; }
body.light-mode .filter-btn { color: #1A2E2F !important; font-weight: 600 !important; opacity: 0.6 !important; }
body.light-mode .filter-btn:hover { background: rgba(255, 255, 255, 0.5) !important; opacity: 1 !important; box-shadow: 0 2px 8px rgba(26, 46, 47, 0.05) !important; }
body.light-mode .filter-btn.active { background: #1A2E2F !important; color: #FFFFFF !important; opacity: 1 !important; }
body.light-mode .filter-btn.active { box-shadow: 0 4px 12px rgba(26, 46, 47, 0.25) !important; }
body.light-mode .invert-on-dark { filter: invert(0); }
body.light-mode .expertise-card,
body.light-mode .skill-pill { background: #FFFFFF; border-color: #D0E2E6; }
body.light-mode .expertise-card i { color: #1A2E2F; }
body.light-mode .skill-pill i { color: var(--brand-color, #1A2E2F); }
body.light-mode .expertise-card:hover,
body.light-mode .skill-pill:hover { background: #F4F7F7; border-color: #9BB9BB; box-shadow: 0 6px 15px rgba(26, 46, 47, 0.06); }
body.light-mode .expertise-card:hover i,
body.light-mode .skill-pill:hover i { filter: none; color: #669295; } 

/* Project Section */
body.light-mode .project-section { background: linear-gradient(to bottom, #9BB9BB 0%, #D0E2E6 55%, #E2ECEC 100%) !important; }
body.light-mode .vector-splash-container-project { display: block !important; }
body.light-mode .vector-splash-project { fill: #669295 !important; }
body.light-mode .vector-splash-project path:nth-child(1) { opacity: 0.08 !important; }
body.light-mode .vector-splash-project path:nth-child(2) { opacity: 0.12 !important; }
body.light-mode .vector-splash-project path:nth-child(3) { opacity: 0.1 !important; }
body.light-mode .vector-splash-project circle { opacity: 0.15 !important; }
body.light-mode .project-section .section-subtitle { color: #1A2E2F !important; font-weight: 700 !important; letter-spacing: 5px !important; }
body.light-mode .project-section .section-title { color: #FFFFFF !important; text-shadow: 0 4px 20px rgba(26, 46, 47, 0.12) !important; }
body.light-mode .project-section .section-title span { color: #1A2E2F !important; text-shadow: none !important; }

/* Project Cards & Filters */
body.light-mode .project-filter { background: #D0E2E6 !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; box-shadow: inset 0 4px 10px rgba(26, 46, 47, 0.12) !important; }
body.light-mode .p-filter-btn { color: #1A2E2F !important; font-weight: 600 !important; opacity: 0.6 !important; }
body.light-mode .p-filter-btn:hover { background: rgba(255, 255, 255, 0.4) !important; opacity: 1 !important; box-shadow: 0 2px 8px rgba(26, 46, 47, 0.05) !important; }
body.light-mode .p-filter-btn.active { 
    background: #1A2E2F !important; 
    color: #FFFFFF !important; 
    opacity: 1 !important; 
    box-shadow: 0 4px 12px rgba(26, 46, 47, 0.25) !important; 
}

body.light-mode .project-slide { opacity: 1 !important; filter: drop-shadow(0 15px 25px rgba(26, 46, 47, 0.25)); }
body.light-mode .project-slide:not(.active) { filter: drop-shadow(0 8px 15px rgba(26, 46, 47, 0.1)) brightness(0.95); }
body.light-mode .p-card-shadow { filter: none !important; }
body.light-mode .p-card-glass { 
    background: #F4F7F7 !important; 
    border: none !important; 
    border-radius: 0 !important; 
    clip-path: url(#card-slant) !important; 
    -webkit-clip-path: url(#card-slant) !important; 
    box-shadow: inset 0 0 80px rgba(26, 46, 47, 0.25), inset 0 20px 40px rgba(26, 46, 47, 0.25) !important; 
}
body.light-mode .p-card-glass::before { display: block !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M 0,0.16 Q 0,0.09 0.06,0.08 L 0.94,0.01 Q 1,-0.005 1,0.07 L 1,0.93 Q 1,1 0.94,1 L 0.06,1 Q 0,1 0,0.93 Z' fill='none' stroke='%231A2E2F' stroke-width='4px' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E") !important; filter: none !important; }

/* Project Card Typography & Elements */
body.light-mode .p-card-title h3 { color: #1A2E2F !important; font-weight: 700 !important; }
body.light-mode .p-card-title p { color: #1A2E2F !important; font-weight: 500 !important; opacity: 0.9 !important; }
body.light-mode .btn-external { background: #D0E2E6 !important; color: #1A2E2F !important; border: 2px solid #1A2E2F !important;}
body.light-mode .btn-external:hover { background: #1A2E2F !important; color: #F4F7F7 !important; box-shadow: 0 4px 10px rgba(26, 46, 47, 0.3) !important; transform: scale(1.1) !important;} 
body.light-mode .tool-line .line { background: linear-gradient(to right, transparent, #1A2E2F) !important; }
body.light-mode .tool-line i { color: #1A2E2F !important; }
body.light-mode .tool-icons img, 
body.light-mode .tool-icons i { background: #F4F7F7 !important; border: 2px solid #1A2E2F !important; color: #1A2E2F !important; }
body.light-mode .tool-icons img:hover, 
body.light-mode .tool-icons i:hover { border-color: #1A2E2F !important; box-shadow: 0 4px 8px rgba(26, 46, 47, 0.3) !important; transform: translateY(-3px) !important; } 
body.light-mode .p-card-gallery .img-light { display: block !important; }
body.light-mode .p-card-gallery .img-dark { display: none !important; }
body.light-mode .p-card-gallery img { border: 2px solid rgba(26, 46, 47, 0.15) !important; }
body.light-mode .p-card-gallery img:hover { border-color: #1A2E2F !important; box-shadow: 0 8px 20px rgba(26, 46, 47, 0.2) !important; transform: translateY(-5px) !important;}

/* Project Utilities (Buttons, Counters, etc) */
body.light-mode .empty-project-msg { color: rgba(26, 46, 47, 0.8); font-weight: 500; }
body.light-mode .empty-project-msg i { color: #1A2E2F; }
body.light-mode .project-counter { background: transparent !important; border-color: #1A2E2F !important; }
body.light-mode .project-counter span { color: #1A2E2F !important; text-shadow: none; }
body.light-mode .show-more-wrapper { border-top-color: #F4F7F7; }
body.light-mode .carousel-btn { background: #F4F7F7; border: 2px solid #1A2E2F; color: #1A2E2F; }
body.light-mode .carousel-btn:hover { background: #1A2E2F; color: #F4F7F7; box-shadow: 0 6px 15px rgba(26, 46, 47, 0.2); }

/* Contact & Footer Section */
body.light-mode .wave-transition-contact { background-color: #F4F7F7 !important; background-image: radial-gradient(circle, rgba(104, 143, 142, 0.15) 2px, transparent 1.5px) !important; }
body.light-mode .wave-transition-contact svg { filter: none !important; }
body.light-mode .wave-transition-contact svg path { fill: #E2ECEC !important; filter: none !important; }
body.light-mode .contact-section { background-color: #F4F7F7 !important; box-shadow: none !important; }
body.light-mode .contact-section::before { background-image: radial-gradient(circle, rgba(104, 143, 142, 0.15) 2px, transparent 1.5px) !important; }
body.light-mode .contact-section .section-subtitle { color: rgba(26, 46, 47, 0.6) !important; }
body.light-mode .contact-section .section-title { color: #1A2E2F !important; }
body.light-mode .contact-section .section-title span { color: #669295 !important; text-shadow: none !important; }

/* Contact Form */
body.light-mode .form-row-2 input, 
body.light-mode .form-row-1 input, 
body.light-mode .form-row-1 textarea { background: #FFFFFF !important; border: 1.5px solid #669295 !important; color: #1A2E2F !important; box-shadow: 0 5px 15px rgba(26, 46, 47, 0.03) !important; }
body.light-mode .form-row-2 input::placeholder, 
body.light-mode .form-row-1 input::placeholder, 
body.light-mode .form-row-1 textarea::placeholder { color: rgba(26, 46, 47, 0.5) !important; font-style: normal !important; }
body.light-mode .form-row-2 input:focus, 
body.light-mode .form-row-1 input:focus, 
body.light-mode .form-row-1 textarea:focus { border-color: #669295 !important; box-shadow: 0 0 0 4px rgba(102, 146, 149, 0.1) !important; }
body.light-mode .btn-submit-new { background: #688F8E !important; color: #FFFFFF !important; box-shadow: 0 4px 15px rgba(26, 46, 47, 0.1) !important; }
body.light-mode .btn-submit-new:hover { background: #1A2E2F !important; transform: translateY(-3px); }

/* Newsletter */
body.light-mode .newsletter-card { background: #688F8E !important; border: none !important; box-shadow: 0 10px 30px rgba(26, 46, 47, 0.1) !important; }
body.light-mode .newsletter-card h3, 
body.light-mode .newsletter-card p { color: #FFFFFF !important; }
body.light-mode .newsletter-form button { background: #1A2E2F !important; color: #FFFFFF !important; }
body.light-mode .newsletter-form button:hover { background: #FFFFFF !important; color: #1A2E2F !important; }

/* Info Boxes */
body.light-mode .info-box-new.dark-box { background: #9BB9BB !important; border: none !important; }
body.light-mode .info-box-new.dark-box .info-header-new i, 
body.light-mode .info-box-new.dark-box .info-header-new h4, 
body.light-mode .info-box-new.dark-box p { color: #FFFFFF !important; }
body.light-mode .info-box-new.mid-box { background: #D0E2E6 !important; border: none !important; }
body.light-mode .info-box-new.mid-box .info-header-new i, 
body.light-mode .info-box-new.mid-box .info-header-new h4 { color: #1A2E2F !important; }
body.light-mode .info-box-new.mid-box p { color: rgba(26, 46, 47, 0.7) !important; }
body.light-mode .info-box-new.light-box { background: #FFFFFF !important; border: 1px solid #D0E2E6 !important; box-shadow: 0 4px 15px rgba(26, 46, 47, 0.05) !important; }
body.light-mode .info-box-new.light-box .info-header-new i, 
body.light-mode .info-box-new.light-box .info-header-new h4 { color: #1A2E2F !important; }
body.light-mode .info-box-new.light-box p { color: rgba(26, 46, 47, 0.7) !important; }

/* Footer */
body.light-mode .fat-footer { background: #1A2E2F !important; color: #FFFFFF !important; border-top: none !important; }
body.light-mode .brand-col .logo { color: #FFFFFF !important; }
body.light-mode .brand-col .logo span { color: #D0E2E6 !important; }
body.light-mode .brand-col p, 
body.light-mode .link-col ul li a, 
body.light-mode .footer-bottom { color: rgba(255,255,255,0.8) !important; }
body.light-mode .link-col h4, 
body.light-mode .f-contact-item span, 
body.light-mode .f-contact-item i, 
body.light-mode .f-socials a { color: #FFFFFF !important; }
body.light-mode .footer-middle { border-color: rgba(255,255,255,0.2) !important; }
body.light-mode .link-col ul li a:hover, 
body.light-mode .f-socials a:hover { color: #D0E2E6 !important; }


/* =======================================================
   13. RESPONSIVE DESIGN (MOBILE/TABLET)
   ======================================================= */

   .custom-mobile-dropdown { display: none !important; }

/* --- TABLET & SMALL LAPTOP (Max 1024px) --- */
@media screen and (max-width: 1024px) {
    html, body { overflow-x: hidden; width: 100%; }
    .top-navbar { padding: 15px clamp(20px, 4vw, 40px); align-items: center; }
    .desktop-nav {
        gap: clamp(15px, 2.5vw, 35px);
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
    }
    .hero-section { height: auto; min-height: 100vh; padding-top: 50px; }
    .hero-wrapper { padding: 0 5%; }
    .hero-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        margin-top: 0;
    }
    .badge { padding: clamp(8px, 1.5vw, 12px) clamp(25px, 5vw, 50px); font-size: clamp(0.85rem, 1.5vw, 1.1rem); margin: 0 auto clamp(30px, 5vw, 50px) auto; }
    .hero-image-wrapper {
        width: clamp(200px, 28vw, 300px);
        margin: 0 auto;
        position: relative;
        z-index: 2;
        filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.45));
    }
    .hero-content {
        margin: -3rem 0 0 0;
        align-items: center;
        text-align: center;
        width: 100%;
        padding-bottom: 4rem;
        position: relative;
        z-index: 5;
    }
    .my-text { font-size: clamp(3rem, 6vw, 4.5rem); margin: 0 0 -1rem 0; transform: rotate(-3deg); }
    .portofolio-text { font-size: clamp(4.5rem, 9vw, 7rem); line-height: 1.1; }
    .subtitle-text {
        font-size: clamp(1rem, 1.8vw, 1.5rem);
        letter-spacing: clamp(4px, 1vw, 10px);
        margin: 1.5rem 0 2.5rem 0;
        width: 100%;
    }
    .btn-about { margin: 0 auto; align-self: center; }
    .hero-content { padding-bottom: 0 !important; }
    .section-transition { margin-top: clamp(-140px, -10vw, -80px) !important; }
    .about-section .section-title, .project-section .section-subtitle, .contact-section .section-subtitle { margin-top: 0 !important; align-self: center; text-align: center; }
    .about-section { padding-top: clamp(80px, 12vw, 120px) !important; }
    .about-top-row {
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4vw !important;
        width: 100% !important;
        position: relative !important;
        padding-top: 100px !important;
    }
    .about-image-wrapper {
        flex: 0 0 45% !important;
        display: flex !important;
        justify-content: center !important;
        position: static !important;
        margin: 0 !important;
        transform: none !important;
    }
    .transform-box { transform: scale(0.95) !important; margin: 0 auto !important; }
    .about-subtitle-photo {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 50% !important;
        text-align: left !important;
        margin: 0 !important;
        font-size: clamp(2.2rem, 4vw, 2.8rem) !important;
        line-height: 1.2 !important;
    }
    .about-text-box {
        flex: 0 0 50% !important;
        padding: clamp(35px, 4vw, 50px) !important;
        margin: 0 !important;
        border-radius: 25px !important;
    }
    .about-text-box p {
        font-size: clamp(0.95rem, 1.5vw, 1.05rem) !important;
        line-height: 1.8 !important;
        margin-bottom: 1.2rem !important;
    }
    .about-text-box p:last-of-type { margin-bottom: 0 !important; }
    .project-slide { flex: 0 0 85%; }
    .contact-bottom-row { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
}

/* --- MOBILE DEVICES (Max 768px) --- */
@media screen and (max-width: 768px) {
    /* --- RESET & TYPOGRAPHY --- */
    html, body { overflow-x: hidden; width: 100vw; max-width: 100vw; }
    .desktop-nav, .btn-lets-talk, .text-desktop, .desktop-splash, .branch-fork-center, .mini-tabs, .tool-line { display: none !important; }
    .text-mobile { display: block !important; }

    /* --- ANIMASI MOBILE LEBIH CEPAT & RINGAN --- */
    .reveal { 
        transform: translateY(30px) !important; /* Jarak naiknya diperpendek */
        transition: all 0.4s ease-out !important; /* Durasi dipercepat jadi 0.4 detik */
    }
    .reveal.active {
        transform: translateY(0) !important;
    }

    /* --- NAVBAR & SIDEBAR --- */
    .top-navbar { padding: 6px 20px; align-items: center; height: auto; }
    .logo { font-size: clamp(1.2rem, 4.5vw, 1.8rem); }
    .menu-toggle { margin-top: 2px; }
    .vertical-theme-switch {
        transform: scale(0.85) translateY(-50%) !important;
        right: -3px !important;
        transform-origin: right center;
    }

    /* --- HERO SECTION --- */
    .hero-section {
        height: auto;
        min-height: 100vh;
        padding: clamp(20px, 4vh, 40px) 5vw clamp(100px, 15vh, 150px) 5vw !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .badge {
        margin: 0 auto 15px auto !important;
        padding: 8px clamp(20px, 5vw, 30px);
        font-size: clamp(0.75rem, 2vw, 0.9rem);
        letter-spacing: clamp(2px, 1vw, 4px);
        width: fit-content;
    }
    .hero-image { 
        -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 98%); 
        mask-image: linear-gradient(to bottom, black 70%, transparent 98%); 
    }
    .hero-image-wrapper {
        display: block !important;
        width: clamp(250px, 65vw, 380px) !important;
        margin: 0 auto;
        position: relative;
        z-index: 2;
        filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.45));
    }
    .hero-content {
        margin: clamp(-95px, -22vw, -70px) 0 0 0 !important;
        align-items: center;
        text-align: center;
        width: 100%;
        padding: 0;
        position: relative;
        z-index: 5;
        display: flex;
        flex-direction: column;
    }
    .my-text {
        font-size: 10vw;
        align-self: flex-start;
        margin: 0 0 -6vw 12vw !important;
        transform: rotate(-4deg);
        text-align: left;
        max-width: 100%;
        color: var(--teks-putih);
        text-shadow: 0 0 10px var(--aksen-tosca), 0 0 20px var(--aksen-tosca), 0 0 40px var(--aksen-tosca), 0 0 80px var(--aksen-tosca) !important;
    }
    .portofolio-text {
        font-size: 13vw;
        line-height: 1.1;
        margin-bottom: 3vw;
        text-align: center;
        max-width: 100%;
        word-break: keep-all;
    }
    .subtitle-text {
        font-size: clamp(0.65rem, 3vw, 1rem);
        margin: 0 0 clamp(20px, 4vh, 30px) 0;
        letter-spacing: clamp(2.7px, 1vw, 6px);
        line-height: 1.6;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }
    .btn-about { margin: 0 auto; font-size: clamp(0.6rem, 2vw, 0.95rem); padding: clamp(7px, 2.5vw, 12px) clamp(22px, 5vw, 35px); }
    .glow-circle { width: 120vw; height: 50vh; }

    /* --- SECTION TRANSITIONS --- */
    .section-transition.reveal { transform: translateY(0) !important; opacity: 1 !important; margin-top: clamp(-280px, -35vw, -150px) !important; }
    .wave-transition { 
        margin-top: -65px !important; /* Menarik gelombang mendekat ke elemen skills */
        position: relative !important;
        z-index: 10 !important; 
    }

    /* --- SPLASH BACKGROUNDS (MOBILE) --- */
    .mobile-splash-wrapper {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
    }
    .mobile-tile {
        flex: 0 0 750px !important;
        height: 750px !important;
        width: 100% !important;
        margin: 0 !important;
        opacity: 0.7 !important;
        transform-origin: center center;
    }
    .mobile-tile:nth-child(odd) { transform: scale(1, 1) !important; }
    .mobile-tile:nth-child(even) { transform: scale(-1, -1) !important; }

    /* --- ABOUT SECTION --- */
    .about-section {
        padding: clamp(60px, 10vw, 80px) 5vw 40px 5vw !important;
        background-size: 100% auto !important;
        background-repeat: repeat-y !important;
        background-position: top center !important;
    }
    section#about h2.section-title {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
    }
    .about-top-row {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: center !important;
        gap: clamp(10px, 3vw, 20px) !important;
        width: 100% !important;
        padding-top: 0 !important;
    }
    .about-image-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
        position: relative !important;
        margin: 0 !important;
        z-index: 20 !important;
    }
    .transform-box { transform: scale(0.75) !important; margin: 0 !important; }
    .about-subtitle-photo {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        text-align: center !important;
        font-size: clamp(1.3rem, 6vw, 1.5rem) !important;
        margin: -8vw 0 5px 0 !important;
        line-height: 1 !important;
    }
    .about-subtitle-photo span {
        font-size: clamp(2.2rem, 9vw, 2.5rem) !important;
        margin-top: 2px !important;
        display: inline-block !important;
    }
    .about-text-box {
        width: 90% !important;
        flex: none !important;
        padding: clamp(30px, 7vw, 40px) clamp(25px, 6vw, 35px) !important;
        margin: 0 auto !important;
        border-radius: 20px !important;
    }
    .about-text-box p {
        font-size: clamp(0.8rem, 3vw, 0.9rem) !important;
        line-height: 1.7 !important;
        margin-bottom: 1rem !important;
        text-align: left !important;
    }
    .about-text-box p:last-of-type { margin-bottom: 2rem !important; }

    /* --- ABOUT EXTRA INFO (TIMELINE & TABS) --- */
    .about-extra-info {
        width: 92vw !important; 
        margin: 30px auto 0 auto !important; 
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important; 
        padding: 35px 20px 50px 20px !important; 
        border-radius: 25px !important; 
        background: rgba(11, 25, 30, 0.6) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 3px solid rgba(0, 229, 255, 0.8) !important; 
        box-sizing: border-box !important; 
    }
    .about-extra-info.active { clip-path: none !important; display: block !important; margin-bottom: 50px !important; }
    .about-content-wrapper:has(.about-extra-info.active) .about-text-box {
        clip-path: none !important;
        border-radius: 20px !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid rgba(0, 229, 255, 0.15) !important;
        padding-bottom: clamp(30px, 7vw, 40px) !important; 
    }
    .btn-read-more { 
        margin: 0 auto !important; 
        display: flex !important; 
        width: max-content !important; 
        justify-content: center !important; 
        padding: 10px 25px !important; 
    }
    .about-content-wrapper:has(.about-extra-info.active) .btn-read-more { display: none !important; }
    .about-extra-info .btn-read-less-icon {
        top: 12px !important; 
        right: 12px !important; 
        width: 28px !important; 
        height: 28px !important; 
        font-size: 0.75rem !important; 
        z-index: 105 !important;
        position: absolute !important;
        background: rgba(0, 229, 255, 0.1) !important;
        border: 1px solid rgba(0, 229, 255, 0.3) !important;
        color: var(--aksen-tosca) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* --- MOBILE CUSTOM DROPDOWN --- */
    .custom-mobile-dropdown {
        display: block !important;
        position: relative !important;
        width: 75% !important; 
        max-width: 250px !important;
        margin: 0 auto 15px auto !important;
        order: 1 !important;
        font-family: 'Poppins', sans-serif !important;
        box-sizing: border-box !important;
        font-size: 0.85rem !important;
        align-self: center !important;
    }
    .info-grid-split { 
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
    }
    .split-col { display: contents !important; }
    .dropdown-selected {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 16px !important; 
        background: rgba(11, 25, 30, 0.8) !important;
        border: 1px solid var(--aksen-tosca) !important;
        color: var(--aksen-tosca) !important;
        border-radius: 8px !important; 
        font-size: 0.85rem !important; 
        font-weight: 600 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        cursor: pointer !important;
        box-shadow: 0 4px 15px rgba(0, 229, 255, 0.15) !important;
    }
    .dropdown-selected i:not(.chevron) { margin-right: 8px !important; font-size: 1rem !important; }
    .dropdown-selected .chevron { font-size: 0.9rem !important; }
    .dropdown-items {
        display: none; 
        position: absolute !important;
        box-sizing: border-box !important;
        background: rgba(4, 25, 28, 0.95) !important; 
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(0, 229, 255, 0.3) !important;
        border-radius: 8px !important;
        width: 100% !important;
        top: 110% !important;
        left: 0 !important;
        z-index: 999 !important;
        overflow: hidden !important;
    }
    .dropdown-items.show { display: block !important; }
    .dropdown-item { 
        padding: 8px 15px !important; 
        font-size: 0.85rem !important; 
        color: rgba(237, 246, 249, 0.8) !important; 
        display: flex !important; 
        align-items: center !important; 
        border-bottom: 1px solid rgba(0, 229, 255, 0.1) !important; 
    }
    .dropdown-item i { margin-right: 8px !important; color: rgba(0, 229, 255, 0.6) !important; width: 20px !important; text-align: center !important; }
    .dropdown-item:last-child { border-bottom: none !important; }
    .dropdown-item:hover { background: rgba(0, 229, 255, 0.15) !important; color: var(--aksen-tosca) !important; }
    .mini-tab-content { order: 2 !important; width: 100% !important; }

    /* --- TIMELINE ZIGZAG (ACADEMIC) --- */
    .timeline-mini-zigzag { 
        width: 100% !important; 
        box-sizing: border-box !important;
        position: relative !important;
    }
    .timeline-mini-zigzag::before {
        content: '' !important;
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: translateX(-50%) !important;
        width: 2px !important;
        background: rgba(0, 229, 255, 0.2) !important;
        z-index: 0 !important;
    }
    .timeline-zigzag-item {
        width: 50% !important; 
        margin-bottom: -35px !important; 
        padding: 0 !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
    .timeline-zigzag-item.left-side { 
        left: 0 !important; 
        padding-right: 15px !important; 
        display: flex !important;
        justify-content: flex-end !important; 
        text-align: left !important; 
    }
    .timeline-zigzag-item.right-side { 
        left: 50% !important; 
        padding-left: 15px !important; 
        display: flex !important;
        justify-content: flex-start !important; 
        text-align: left !important; 
    }
    .timeline-zigzag-item.left-side .timeline-card,
    .timeline-zigzag-item.right-side .timeline-card {
        width: 125% !important; 
        flex-shrink: 0 !important; 
        margin: 0 !important; 
        position: relative !important;
        z-index: 5 !important;
    }
    .timeline-zigzag-item.left-side .dot-zigzag { right: -6px !important; left: auto !important; }
    .timeline-zigzag-item.right-side .dot-zigzag { left: -6px !important; right: auto !important; }
    .timeline-zigzag-item .dot-zigzag {
        position: absolute !important;
        top: 18px !important; 
        width: 10px !important; 
        height: 10px !important; 
        background: var(--bg-utama) !important;
        border: 2px solid var(--aksen-tosca) !important;
        border-radius: 50% !important;
        box-shadow: 0 0 0 3px rgba(11, 25, 30, 0.8) !important; 
        z-index: 2 !important;
    }
    .timeline-zigzag-item.full-width {
        display: block !important;
        width: 100% !important; 
        left: 0 !important; 
        padding: 0 !important; 
        margin-top: 45px !important; 
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }
    .split-cards-zigzag { 
        display: flex !important;
        flex-direction: column !important; 
        gap: 15px !important; 
        width: 100% !important; 
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .split-cards-zigzag .branch-card { 
        width: 100% !important; 
        padding: 15px 12px !important; 
        box-sizing: border-box !important; 
        margin: 0 !important;
    }

    /* --- EXPERIENCE & ACHIEVEMENT LAYOUT --- */
    .experience-grid-2col {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px !important;
        align-items: stretch !important;
    }
    #experience-content .timeline-straight, 
    #experience-content .timeline-straight-right {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #experience-content .timeline-straight::before, 
    #experience-content .timeline-straight-right::before,
    #experience-content .dot { display: none !important; }
    #experience-content .timeline-item {
        width: 100% !important; 
        margin-bottom: 0 !important; 
        padding: 0 !important; 
        left: 0 !important; 
        text-align: left !important;
        flex-grow: 1 !important; 
    }
    #experience-content .timeline-card {
        height: 100% !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }
    #experience-content .timeline-badge { margin-top: auto !important; width: fit-content !important; }
    .achieve-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* --- GENERAL CARD STYLES --- */
    .timeline-card, .achieve-card, .cert-card { 
        background: rgba(11, 25, 30, 0.6) !important; 
        border: 1px solid rgba(0, 229, 255, 0.15) !important; 
        border-radius: 12px !important; 
        padding: 10px 12px !important; 
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; 
        position: relative !important;
        z-index: 2 !important;
    }
    .timeline-card h4, .achieve-card h4 { font-size: 0.65rem !important; margin-bottom: 2px !important; line-height: 1.2 !important; }
    .timeline-card p, .achieve-card p { font-size: 0.55rem !important; margin-bottom: 6px !important; line-height: 1.3 !important; }
    .timeline-date { font-size: 0.55rem !important; margin-bottom: 4px !important; }
    .timeline-badge, .achieve-badge { 
        font-size: 0.5rem !important; 
        padding: 3px 6px !important; 
        margin-bottom: 4px !important; 
        display: inline-block !important; 
    }
    
    /* --- CERTIFICATE GRID --- */
    .cert-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px !important;
    }
    .cert-img-wrapper { height: 100px !important; }
    .cert-info { padding: 10px 8px !important; }
    .cert-info h4 { 
        font-size: 0.7rem !important; 
        white-space: normal !important; 
        display: -webkit-box !important; 
        line-clamp: 2 !important;
        -webkit-line-clamp: 2 !important; 
        -webkit-box-orient: vertical !important; 
        line-height: 1.2 !important; 
        margin-bottom: 3px !important; 
    }
    .cert-info p { font-size: 0.55rem !important; }
    .cert-overlay { gap: 6px !important; }
    .cert-overlay button, .cert-overlay a { width: 70px !important; padding: 4px 0 !important; font-size: 0.65rem !important; }

    /* --- CYBER DIVIDER & SKILLS SECTION --- */
    .cyber-divider { 
        margin: -20px auto 15px auto !important; 
        padding: 0 5vw !important; 
        box-sizing: border-box !important; 
        position: relative !important; 
        z-index: 30 !important; 
    }
    
    /* Pengecilan ikon cyber khusus di HP */
    .cyber-divider .hex-icon { padding: 7px 24px !important; border-radius: 30px !important; }
    .cyber-divider .hex-icon i { font-size: 1rem !important; margin-right: 8px !important; }
    .cyber-divider .hex-icon::after { font-size: 0.9rem !important; }
    
    .skills-section { 
        margin-top: 0 !important; 
        padding: 5px 5vw 130px 5vw !important; 
        min-height: auto !important; 
    }

    .skills-section .section-subtitle { 
        margin-top: 0 !important; 
        margin-bottom: 2px !important; /* Dirapatkan ke judul utama */
        font-size: 0.75rem !important; /* Subtitle sedikit dikecilkan */
    }

    .skills-section .section-title, .project-section .section-title { 
        font-size: clamp(2rem, 7vw, 2.4rem) !important; /* Judul utama sedikit dikecilkan */
        margin-bottom: 20px !important; 
    }
    
    /* Box background filter dirapatkan lagi */
    .skills-filter, .project-filter { 
        padding: 4px !important; 
        border-radius: 20px !important; 
        width: max-content !important; 
        max-width: 95% !important; 
        margin: 0 auto 20px auto !important; 
        gap: 4px !important; 
        justify-content: center !important;
    }
    
    /* Tombol filter disusutkan maksimal */
    .filter-btn, .p-filter-btn { 
        white-space: nowrap !important; 
        font-size: 0.65rem !important; 
        padding: 6px 12px !important; 
        border-radius: 15px !important; 
        flex-shrink: 0 !important; 
    }

    /* Kategori Judul (Expertise, dll) */
    .category-title {
        font-size: 0.65rem !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 5px !important;
        margin-top: 5px !important;
    }

    .marquee-container { padding: 5px 0 !important; }

    /* Kotak Skil (Expertise Card) - Ukuran Pico */
    .expertise-card { 
        padding: 8px 12px !important; 
        gap: 8px !important;
        border-radius: 8px !important;
    }
    .expertise-card i { font-size: 1.1rem !important; }
    .expertise-card span { font-size: 0.85rem !important; }

    /* Pil Skill (Language, Tools) - Ukuran Pico */
    .skill-pill { 
        padding: 6px 12px !important; 
        gap: 6px !important;
        border-radius: 20px !important;
    }
    .skill-pill i { font-size: 1rem !important; }
    .skill-pill span { font-size: 0.85rem !important; }
    .skill-pill img.real-icon { 
        width: 14px !important; 
        height: 14px !important; 
    }

    /* --- TATA LETAK KHUSUS TAB TOOLS & LANGUAGES (3 KOLOM RAPI & TENGAH) --- */
    .skills-wrapper.grid-mode #cat-tools .marquee-track,
    .skills-wrapper.grid-mode #cat-languages .marquee-track {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important; /* Membuat sisa elemen ganjil di bawah jadi ke tengah */
        gap: 12px 8px !important; 
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    .skills-wrapper.grid-mode #cat-tools .skill-pill,
    .skills-wrapper.grid-mode #cat-languages .skill-pill {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important; 
        align-items: center !important;
        padding: 8px 4px !important; 
        gap: 5px !important; 
        border-radius: 12px !important; 
        width: calc(33.33% - 6px) !important; /* Paksa lebar rata 3 kolom menggunakan matematika */
        box-sizing: border-box !important;
    }
    
    .skills-wrapper.grid-mode #cat-tools .skill-pill.duplicate,
    .skills-wrapper.grid-mode #cat-languages .skill-pill.duplicate { display: none !important; }
    
    .skills-wrapper.grid-mode #cat-tools .skill-pill i,
    .skills-wrapper.grid-mode #cat-languages .skill-pill i { font-size: 0.95rem !important; margin: 0 !important; }
    
    .skills-wrapper.grid-mode #cat-tools .skill-pill span,
    .skills-wrapper.grid-mode #cat-languages .skill-pill span { 
        font-size: 0.65rem !important; 
        white-space: nowrap !important; 
        overflow: hidden !important; 
        text-overflow: ellipsis !important; 
    }
    
    .skills-wrapper.grid-mode #cat-tools .skill-pill img.real-icon,
    .skills-wrapper.grid-mode #cat-languages .skill-pill img.real-icon { width: 15px !important; height: 15px !important; margin: 0 !important; }


    /* --- TATA LETAK KHUSUS TAB EXPERTISE (2 KOLOM LEBIH KECIL & RAMPING) --- */
    .skills-wrapper.grid-mode #cat-expertise .marquee-track {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px 8px !important; /* Spasi antar kotak diperkecil */
        width: 100% !important;
        padding: 0 3vw !important; /* Menambah jarak dari tepi layar hp sedikit */
        box-sizing: border-box !important;
    }

    .skills-wrapper.grid-mode #cat-expertise .expertise-card {
        display: flex !important;
        flex-direction: column !important; 
        justify-content: center !important;
        align-items: center !important;
        width: calc(50% - 4px) !important; /* 2 Kolom presisi */
        padding: 10px 5px !important; /* Padding disusutkan agar kotaknya makin kecil */
        gap: 6px !important; /* Jarak antara ikon dan teks dipersempit */
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .skills-wrapper.grid-mode #cat-expertise .expertise-card.duplicate { display: none !important; }
    
    .skills-wrapper.grid-mode #cat-expertise .expertise-card i { 
        font-size: 1.15rem !important; /* Ikon disusutkan dari 1.3rem */
        margin: 0 !important;
    }
    
    .skills-wrapper.grid-mode #cat-expertise .expertise-card span { 
        font-size: 0.65rem !important; /* Teks disusutkan dari 0.7rem */
        text-align: center !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    /* --- PROJECT SECTION & WAVE SHADOW --- */
    .wave-transition svg { 
        filter: drop-shadow(0px -8px 10px rgba(0, 229, 255, 0.15)) !important; 
    }

    .project-section { 
        padding: 10px 5vw 0 5vw !important; 
        display: flex !important;
        flex-direction: column !important;
    }
    
    .project-section .section-subtitle { margin-top: -20px !important; margin-bottom: -5px !important; font-size: 0.7rem !important; order: unset !important; }
    .project-section .section-title { font-size: 2rem !important; margin-bottom: 20px !important; order: unset !important; }
    
    /* MATIKAN FILTER LAMA DI HP */
    .project-filter { display: none !important; } 
    
    /* DROPDOWN UMUM (ACADEMIC) - JANGAN DIGANGGU */
    .custom-mobile-dropdown {
        display: block !important;
        position: relative !important;
        width: 75% !important; 
        max-width: 250px !important;
        margin: 0 auto 15px auto !important; 
        font-family: 'Poppins', sans-serif !important;
        box-sizing: border-box !important;
        font-size: 0.85rem !important;
        align-self: center !important;
        order: unset !important;
    }
    
    /* ======================================================== */
    /* INI DIA! KHUSUS DROPDOWN PROJECT: ATUR JARAK KE JUDUL DI SINI */
    /* ======================================================== */
    #project-mobile-dropdown {
        order: unset !important; /* Hapus perintah urutan biar gak nyasar ke bawah! */
        margin-top: 45px !important; /* <--- INI JARAK KE JUDUL (Makin besar = Makin jauh ke bawah) */
        margin-bottom: 35px !important; /* <--- INI JARAK KE KOTAK PROJECT BAWAHNYA */
        z-index: 100 !important;
    }

    /* UKURAN KOTAK DROPDOWN TETAP SLIM/NORMAL */
    .dropdown-selected {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 16px !important; 
        background: rgba(11, 25, 30, 0.8) !important;
        border: 1px solid var(--aksen-tosca) !important;
        color: var(--aksen-tosca) !important;
        border-radius: 8px !important; 
        font-size: 0.85rem !important; 
        font-weight: 600 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        cursor: pointer !important;
        box-shadow: 0 4px 15px rgba(0, 229, 255, 0.15) !important;
    }
    .dropdown-selected i:not(.chevron) { margin-right: 8px !important; font-size: 1rem !important; }
    .dropdown-selected .chevron { font-size: 0.9rem !important; }
    .dropdown-items {
        display: none; 
        position: absolute !important;
        box-sizing: border-box !important;
        background: rgba(4, 25, 28, 0.95) !important; 
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(0, 229, 255, 0.3) !important;
        border-radius: 8px !important;
        width: 100% !important;
        top: 110% !important;
        left: 0 !important;
        z-index: 999 !important;
        overflow: hidden !important;
    }
    .dropdown-items.show { display: block !important; }
    
    /* JARAK ANTAR PILIHAN DI DALAM DROPDOWN DIDEMPETIN */
    .dropdown-item { 
        padding: 6px 15px !important; 
        font-size: 0.8rem !important; 
        color: rgba(237, 246, 249, 0.8) !important; 
        display: flex !important; 
        align-items: center !important; 
        border-bottom: 1px solid rgba(0, 229, 255, 0.1) !important; 
    }
    .dropdown-item i { margin-right: 8px !important; color: rgba(0, 229, 255, 0.6) !important; width: 18px !important; text-align: center !important; font-size: 0.8rem !important; }
    .dropdown-item:last-child { border-bottom: none !important; }
    .dropdown-item:hover { background: rgba(0, 229, 255, 0.15) !important; color: var(--aksen-tosca) !important; }
    
    /* CAROUSEL KARTU PROJECT */
    .project-carousel-wrapper { order: unset !important; padding: 0 0 35px 0 !important; margin: 0 !important; width: 100% !important; }
    .project-track-container { padding: 0 !important; margin: 0 !important; mask-image: none; -webkit-mask-image: none; }
    
    .project-slide { flex: 0 0 100%; padding: 0 35px !important; box-sizing: border-box !important; } 
    
    .p-card-glass { 
        padding: 42px 15px 18px 15px !important; 
        border-radius: 0 !important; 
        clip-path: url(#card-slant) !important; 
        -webkit-clip-path: url(#card-slant) !important; 
        height: auto !important; 
        gap: 0px !important; 
    }
    .p-card-glass::before { display: block !important; }

    .p-card-header { align-items: flex-start !important; flex-direction: row !important; justify-content: space-between !important; gap: 8px !important; margin-bottom: 6px !important; }
    .p-card-title { flex: 1 !important; }
    .p-card-title h3 { font-size: 0.9rem !important; line-height: 1.2; margin-bottom: 2px !important; } 
    .p-card-title p { font-size: 0.6rem !important; padding-right: 0; margin-top: 0 !important; line-height: 1.3 !important; } 
    
    .btn-external { flex-shrink: 0 !important; width: 28px !important; height: 28px !important; font-size: 0.7rem !important; margin-top: 0 !important; }
    
    .p-card-gallery { 
        display: grid !important; 
        grid-template-columns: repeat(4, 1fr) !important; 
        gap: 6px !important; 
        width: 100% !important;
        height: auto !important;
        margin-top: 5px !important; 
        margin-bottom: 8px !important; 
    }
    .p-card-gallery img { 
        width: 100% !important; 
        height: auto !important; 
        aspect-ratio: 9 / 16 !important; 
        border-radius: 4px !important; 
        object-fit: cover !important; 
    }
    
    .p-card-footer { flex-wrap: wrap; gap: 6px !important; justify-content: center; margin-top: 0px !important; } 
    .tool-icons { justify-content: center; width: 100%; gap: 6px !important; }
    
    .tool-icons img, .tool-icons i { 
        width: 22px !important; 
        height: 22px !important; 
        padding: 4px !important; 
        border-width: 1px !important; 
        font-size: 0.75rem !important;
    }
    
    .carousel-btn { 
        width: 32px !important; 
        height: 32px !important; 
        font-size: 0.8rem !important; 
        top: 50% !important; 
        bottom: auto !important; 
        transform: translateY(-50%) !important; 
        background: var(--aksen-tosca) !important; 
        color: var(--bg-utama) !important; 
        z-index: 100 !important;
    }
    .prev-btn { left: 0px !important; } 
    .next-btn { right: 0px !important; } 
    
    .project-counter { 
        order: unset !important;
        margin-top: -15px !important; 
        font-size: 0.55rem !important; 
        padding: 6px 20px !important; 
    }

    /* --- CONTACT SECTION & FOOTER --- */
    .contact-section { padding: 40px 5vw 40px 5vw !important; }
    
    /* TARIK "GET IN TOUCH" KE ATAS DENGAN WAJAR & KASIH JARAK KE "CONTACT US" */
    .contact-section .section-subtitle { 
        margin-top: -60px !important; /* <-- Nah ini udah dijinakin, gak bablas lagi! */
        margin-bottom: 8px !important; /* Jarak asik ke judul Contact Us */
        font-size: 0.75rem !important; 
    }
    .contact-section .section-title { 
        font-size: 2.2rem !important; 
        margin-bottom: 30px !important; 
    }
    
    /* ======================================================= */
    /* LEBAR SEMUA KOTAK DIKECILIN BIAR GAK MENTOK KANAN-KIRI  */
    /* ======================================================= */
    .contact-content-new { 
        width: 85% !important; /* Lebar dibatasi cuma 85% dari layar HP */
        margin: 0 auto !important; /* Biar posisinya pas di tengah */
    }
    
    .contact-top-row { flex-direction: column !important; gap: 20px !important; }
    .contact-form-new { overflow: visible !important; }
    .contact-form-new form { gap: 10px !important; }
    .form-row-2 { flex-direction: column !important; gap: 10px !important; }
    
    /* INPUT & TEXTAREA DIKECILIN */
    .form-row-2 input, .form-row-1 input, .form-row-1 textarea { 
        width: 100% !important; 
        padding: 10px 15px !important; 
        font-size: 0.8rem !important; 
        border-radius: 12px !important; 
    }
    .form-row-1 textarea { border-radius: 12px !important; height: 100px !important; } 
    
    /* TOMBOL SUBMIT DIKECILIN */
    .btn-submit-new { 
        width: 100% !important; 
        text-align: center !important; 
        border-radius: 20px !important; 
        padding: 10px 20px !important; 
        font-size: 0.75rem !important;
        margin-top: 0 !important;
    }
    
    /* KARTU NEWSLETTER DIKECILIN */
    .newsletter-card { padding: 20px 15px !important; border-radius: 16px !important; text-align: center !important; }
    .newsletter-card h3 { font-size: 1.1rem !important; margin-bottom: 8px !important; }
    .newsletter-card p { font-size: 0.7rem !important; margin-bottom: 15px !important; line-height: 1.4 !important; }
    .newsletter-form { gap: 8px !important; }
    .newsletter-form input { padding: 10px 15px !important; font-size: 0.7rem !important; border-radius: 15px !important; }
    .newsletter-form button { padding: 10px 15px !important; font-size: 0.75rem !important; border-radius: 15px !important; }
    
    /* 3 INFO BOX DI BAWAH DIKECILIN */
    .contact-bottom-row { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: -5px !important; }
    .info-box-new { padding: 15px !important; border-radius: 12px !important; gap: 8px !important; }
    .info-header-new { gap: 10px !important; }
    .info-header-new i { font-size: 1.2rem !important; }
    .info-header-new h4 { font-size: 0.8rem !important; }
    .info-box-new p { font-size: 0.65rem !important; line-height: 1.4 !important; }


    /* ======================================================= */
    /* FOOTER MOBILE OPTIMIZATION (JARAK LOGIS & RAPI)         */
    /* ======================================================= */
    .fat-footer { padding: 35px 5vw 15px 5vw !important; }
    
    /* Jarak perpindahan antar kategori (Navigation -> Quick Links -> Services) dijauhin */
    .footer-top { grid-template-columns: 1fr !important; gap: 20px !important; text-align: center !important; }
    
    .brand-col { text-align: center !important; margin-bottom: 5px !important; }
    .brand-col .logo { font-size: 1.8rem !important; margin: 0 0 5px 0 !important; }
    .brand-col p { font-size: 0.7rem !important; margin: 0 !important; padding: 0 10px !important; line-height: 1.4 !important; }
    
    /* Judul menu ditarik nempel ke list bawahnya */
    .link-col h4 { font-size: 0.9rem !important; margin: 0 0 6px 0 !important; }
    
    /* Jarak antar link (Home -> About) dibikin pas */
    .link-col ul { display: flex !important; flex-direction: column !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; }
    .link-col ul li { margin: 0 !important; padding: 0 !important; }
    .link-col ul li a { font-size: 0.75rem !important; padding: 0 !important; display: inline-block !important; line-height: 1.2 !important; }
    
    .footer-middle { 
        flex-direction: column !important; 
        gap: 9px !important; 
        text-align: center !important; 
        padding: 18px 0 12px 0 !important; 
        margin-top: 10px !important;
    }
    .f-contact-item { width: 100% !important; justify-content: center !important; gap: 8px !important; margin: 0 !important; }
    .f-contact-item i { font-size: 0.85rem !important; }
    .f-contact-item span { font-size: 0.75rem !important; line-height: 1.2 !important; margin: 0 !important; }
    
    .f-socials { justify-content: center !important; margin-top: 5px !important; width: 100% !important; gap: 15px !important; }
    .f-socials a { width: 28px !important; height: 28px !important; font-size: 0.85rem !important; }
    
    .footer-bottom { font-size: 0.65rem !important; padding-top: 12px !important; margin: 0 !important; }
    .footer-bottom p { margin: 0 !important; line-height: 1.2 !important; }

    /* --- MODAL POPUPS PICO SIZE --- */
    .modal-content, .skill-modal-content { 
        width: 82% !important; 
        max-width: 310px !important; 
        padding: 18px 16px !important; 
        max-height: 80vh !important; 
        border-radius: 14px !important; 
    }
    .modal-close { top: 12px !important; right: 15px !important; font-size: 1.4rem !important; }
    .skill-modal-close { width: 26px !important; height: 26px !important; font-size: 1rem !important; top: 0 !important; right: 0 !important; }
    .modal-header-icon { font-size: 1.5rem !important; margin-bottom: 8px !important; }
    .modal-content h3, .skill-modal-header-text h3 { font-size: 0.95rem !important; margin-bottom: 2px !important; }
    .modal-content #modal-subtitle, .skill-modal-header-text p { font-size: 0.65rem !important; margin-bottom: 12px !important; }
    .modal-badges { gap: 5px !important; margin-bottom: 12px !important; }
    .modal-badges span { font-size: 0.6rem !important; padding: 3px 8px !important; }
    .modal-desc, .skill-modal-desc { font-size: 0.7rem !important; margin-bottom: 12px !important; line-height: 1.45 !important; }
    .modal-achievements h4, .skill-modal-section-title { font-size: 0.75rem !important; margin-bottom: 6px !important; }
    .modal-achievements ul { margin: 0 0 12px 0 !important; }
    .modal-achievements ul li { font-size: 0.65rem !important; margin-bottom: 5px !important; line-height: 1.3 !important; }
    .modal-image-box { min-height: 70px !important; padding: 10px !important; border-radius: 8px !important; gap: 4px !important; }
    .modal-image-box i { font-size: 1rem !important; }
    .modal-image-box span { font-size: 0.65rem !important; }
    .skill-expertise-list li { padding: 8px 12px !important; font-size: 0.7rem !important; border-radius: 8px !important; margin-bottom: 6px !important; }
    .skill-modal-icon { width: 36px !important; height: 36px !important; font-size: 1.1rem !important; border-radius: 8px !important; }
    .skill-modal-icon img { width: 20px !important; height: 20px !important; }

    /* --- LIGHT MODE SPECIFIC ADJUSTMENTS --- */
    body.light-mode .my-text, body.light-mode .portofolio-text { text-shadow: 0 0 8px #F4F7F7, 0 0 15px #F4F7F7, 0 0 30px #F4F7F7, 0 0 50px #F4F7F7, 0 0 80px #F4F7F7 !important; }
    body.light-mode .about-extra-info { background: rgba(255, 255, 255, 0.85) !important; border: 3px solid #669295 !important; }
    body.light-mode .timeline-card, body.light-mode .achieve-card, body.light-mode .cert-card { background: #FFFFFF !important; border: 1px solid #D0E2E6 !important; box-shadow: 0 4px 15px rgba(26, 46, 47, 0.05) !important; }
    body.light-mode .timeline-card h4, body.light-mode .achieve-card h4, body.light-mode .cert-info h4 { color: #1A2E2F !important; }
    body.light-mode .timeline-card p, body.light-mode .achieve-card p, body.light-mode .cert-info p { color: rgba(26, 46, 47, 0.7) !important; }
    body.light-mode .timeline-date { color: #669295 !important; }
    body.light-mode .timeline-mini-zigzag::before, body.light-mode .timeline-straight::before, body.light-mode .timeline-straight-right::before { background: linear-gradient(to bottom, #669295 80%, transparent) !important; opacity: 1 !important; width: 2.5px !important; }
    body.light-mode .timeline-badge, body.light-mode .achieve-badge { background: #1A2E2F !important; color: #D0E2E6 !important; border-color: #9BB9BB !important; }
    body.light-mode .cert-info { background: #F4F7F7 !important; }
    body.light-mode .custom-mobile-dropdown .dropdown-selected { background: #FFFFFF !important; border-color: #9BB9BB !important; color: #1A2E2F !important; box-shadow: 0 4px 15px rgba(26, 46, 47, 0.05) !important; }
    body.light-mode .custom-mobile-dropdown .dropdown-selected i { color: #669295 !important; }
    body.light-mode .custom-mobile-dropdown .dropdown-items { background: rgba(255, 255, 255, 0.95) !important; border-color: #9BB9BB !important; box-shadow: 0 10px 25px rgba(26, 46, 47, 0.15) !important; }
    body.light-mode .custom-mobile-dropdown .dropdown-item { color: #1A2E2F !important; border-bottom-color: #D0E2E6 !important; }
    body.light-mode .custom-mobile-dropdown .dropdown-item i { color: #669295 !important; }
    body.light-mode .custom-mobile-dropdown .dropdown-item:hover, body.light-mode .custom-mobile-dropdown .dropdown-item:active { background: #D0E2E6 !important; color: #1A2E2F !important; }
    body.light-mode .about-content-wrapper .about-text-box, body.light-mode .about-content-wrapper:has(.about-extra-info.active) .about-text-box { padding-top: 30px !important; background-image: repeating-linear-gradient(transparent, transparent 23px, #D0E2E6 23px, #D0E2E6 24px) !important; background-position: 0 17px !important; }
    body.light-mode .about-content-wrapper .about-text-box p { line-height: 24px !important; margin-bottom: 24px !important; }
    body.light-mode .about-content-wrapper .about-text-box p:last-of-type { margin-bottom: 24px !important; }
}

/* --- SMALL MOBILE (Max 400px) --- */
@media screen and (max-width: 400px) {
    .badge { font-size: 0.75rem; padding: 8px 15px; }
    .portofolio-text { font-size: 14vw; }
    .about-section .section-title, .skills-section .section-title, .project-section .section-title, .contact-section .section-title { font-size: clamp(2rem, 10vw, 2.5rem); }
    .prev-btn { left: 10%; }
    .next-btn { right: 10%; }
}

/* =======================================================
   14. CUSTOM TOAST NOTIFICATION
   ======================================================= */
.custom-notification {
    position: fixed;
    top: 30px;
    right: -400px; /* Ngumpet di luar layar kanan */
    max-width: 350px;
    background: rgba(11, 25, 30, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-left: 4px solid var(--aksen-tosca);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Animasi membal */
}

/* Class untuk nampilin pop up-nya */
.custom-notification.show { right: 30px; }

/* Warna kalau gagal (Merah) */
.custom-notification.error { border-left-color: #ff4757; }
.custom-notification.error .notification-icon i { color: #ff4757; }

/* Warna kalau berhasil (Hijau) */
.custom-notification.success { border-left-color: #2ed573; }
.custom-notification.success .notification-icon i { color: #2ed573; }

.notification-icon i { font-size: 1.5rem; color: var(--aksen-tosca); }
.notification-content { flex: 1; }
.notification-content h4 { margin: 0 0 4px 0; font-family: 'Poppins', sans-serif; font-size: 0.95rem; color: var(--teks-putih); }
.notification-content p { margin: 0; font-family: 'Poppins', sans-serif; font-size: 0.8rem; color: rgba(237, 246, 249, 0.7); line-height: 1.4; }

.notification-close { background: transparent; border: none; color: rgba(237, 246, 249, 0.5); font-size: 1.5rem; cursor: pointer; transition: 0.3s; margin-left: auto; line-height: 1; }
.notification-close:hover { color: #ff4757; transform: scale(1.1); }

/* --- LIGHT MODE SUPPORT --- */
body.light-mode .custom-notification { background: rgba(255, 255, 255, 0.95); border-color: #D0E2E6; box-shadow: 0 10px 30px rgba(26, 46, 47, 0.1); }
body.light-mode .custom-notification.success { border-left-color: #2ed573; }
body.light-mode .custom-notification.error { border-left-color: #ff4757; }
body.light-mode .notification-content h4 { color: #1A2E2F; }
body.light-mode .notification-content p { color: rgba(26, 46, 47, 0.8); }
body.light-mode .notification-close { color: rgba(26, 46, 47, 0.5); }
body.light-mode .notification-close:hover { color: #ff4757; }

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .custom-notification {
        top: 20px;
        right: -100%;
        max-width: 90%;
        width: 90%;
        padding: 12px 15px;
    }
    .custom-notification.show { right: 5%; } /* Biar di tengah layar HP */
}