/* --- 1. GLOBAL VARIABLES & RESET --- */
:root {
    --bg-light: #F3F4F6;
    --bg-dark: #0F0F0F;
    /* Hitam pekat elegan */
    --text-main: #111111;
    --text-light: #F0F0F0;
    --text-muted: #666666;
    --accent: #fff;
    /* Biru Profesional */
    --accent-green: #10B981;
    /* Status Active */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Satoshi', sans-serif;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    /* Pattern Halus di Background Light */
    background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    background-size: 30px 30px;
    overflow-x: hidden;
    /* Hide Scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar,
html::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}

.no-scroll {
    overflow: hidden !important;
}

/* --- 2. NAVBAR --- */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 40px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    transition: 0.3s;
    mix-blend-mode: difference;
    /* Agar terlihat di bg terang/gelap */
    color: white;
}

.nav-logo {
    font-weight: 900;
    letter-spacing: -1px;
    font-size: 1.5rem;
}

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    position: relative;
    opacity: 0.8;
    transition: 0.3s;
}

.nav-links a:hover {
    opacity: 1;
}

/* --- 3. HERO SECTION (STICKY) --- */
.hero-type {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;

    /* KUNCI EFEK STICKY */
    position: sticky;
    top: 0;
    z-index: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.name-container {
    display: flex;
    flex-direction: column;
    line-height: 0.85;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.hero-quote {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.giant-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    /* Ukuran font responsif */
    font-size: clamp(4rem, 13vw, 12rem);
    text-transform: uppercase;
    color: var(--text-main);
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

/* Capsule Style */
.hero-capsule {
    background: #FFFFFF;
    padding: 14px 35px;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-top: -10px;
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s ease;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-green);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    animation: pulse 2s infinite;
}

.scroll-down {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    color: #ccc;
    animation: bounce 2s infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.scroll-down span {
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}

.scroll-down i {
    font-size: 2rem;
}

/* --- 4. MAIN CONTENT WRAPPER (THE CURTAIN) --- */
.main-content {
    position: relative;
    z-index: 10;
    /* Menutupi Hero */
    background-color: var(--bg-dark);
    color: var(--text-light);
    border-radius: 50px 50px 0 0;
    /* Lengkungan atas */
    margin-top: -50px;
    /* Overlap sedikit */
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    min-height: 100vh;
}

/* --- 5. ABOUT SECTION --- */
.about-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 120px 24px 80px;
}

.about-header {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 50px;
    font-weight: 800;
}

.about-header span {
    color: #555;
    transition: color 0.3s;
}

.about-header span:hover {
    color: #999;
}

.bio-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: start;
}

.bio-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #ccc;
    margin-bottom: 25px;
}

/* Expertise List (Clean) */
.expertise-wrapper {
    margin-top: 80px;
}

.expertise-list {
    border-top: 1px solid #333;
}

.expertise-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #333;
    transition: 0.3s;
    cursor: default;
}

.expertise-item:hover {
    padding-left: 15px;
    background: rgba(255, 255, 255, 0.03);
}

.exp-title {
    font-size: 1.4rem;
    font-weight: 700;
}

.exp-desc {
    color: #666;
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
}

/* --- 7. WORKS SECTION (BENTO GRID) --- */
.works-section {
    background-color: var(--bg-light);
    color: var(--text-main);
    padding: 100px 24px 120px;
    position: relative;
    z-index: 11;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 350px 350px;
    gap: 20px;
}

.bento-item {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    background: transparent;
    border: none;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.bento-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.bento-large {
    grid-column: span 2;
}

.bento-tall {
    grid-column: 3;
    grid-row: span 2;
}

.bento-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s;
}

.bento-item:hover .bento-img {
    transform: scale(1.08);
}

.bento-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    pointer-events: none;
    color: #fff;
}

.bento-overlay h3 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: #fff;
}

.bento-overlay span {
    font-size: 0.85rem;
    opacity: 0.85;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255, 255, 255, 0.8);
}

/* --- 8. FOOTER --- */
footer {
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding: 100px 20px 40px;
    position: relative;
    z-index: 12;
    border-radius: 60px 60px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-top: -40px;
    /* Overlap agar border-radius terlihat */
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.cta-text {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 1;
    font-weight: 900;
    margin-bottom: 40px;
}

.email-btn {
    display: inline-block;
    background: white;
    color: black;
    padding: 18px 40px;
    border-radius: 100px;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1rem;
    transition: 0.3s;
}

.email-btn:hover {
    background: #222;
    color: white;
    transform: scale(1.05);
}

.footer-bottom {
    margin-top: 100px;
    border-top: 1px solid #333;
    padding-top: 40px;
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 0.9rem;
}

.socials a {
    color: #fff;
    margin-left: 20px;
    font-size: 1.2rem;
    transition: 0.3s;
}

.socials a:hover {
    color: #aaa;
}

/* --- ANIMATIONS (FRAMER STYLE) --- */
/* Class ini di-trigger oleh JS */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .nav-links {
        display: none;
    }

    .bio-grid {
        grid-template-columns: 1fr;
    }

    .expertise-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .bento-grid {
        display: flex;
        flex-direction: column;
    }

    .bento-item {
        height: 300px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .socials {
        margin-top: 10px;
    }

    .hero-capsule {
        font-size: 0.8rem;
        padding: 12px 20px;
        width: 90%;
        justify-content: center;
    }
}

/* --- CLICK TO ACCESS OVERLAY (LIGHT THEME) --- */
#start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-light);
    background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

#start-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.start-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}

.system-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    animation: blink 2s infinite;
}

.start-btn {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 900;
    color: var(--text-main);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: -2px;
    transition: opacity 0.3s, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    line-height: 0.85;
    position: relative;
    text-decoration: none;
}

.start-btn::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 6px;
    background-color: var(--text-main);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.start-btn:hover {
    opacity: 1;
    /* removed scale to keep underline stable, or keep it? user asked for underline, scaling text might misalign underline visually if not careful. Let's keep scale? typical implementation keeps scale but line moves with it. */
    transform: scale(1.02);
}

.start-btn:hover::after {
    transform: scaleX(1);
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}