/* ================= RESET + VARIABLES ================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Press Start 2P', cursive;
}

:root{
    --bg:#0b0b0b;
    --text:#ffffff;
    --muted:#bbbbbb;
    --border:#222;
    --card:#111;
    --accent:#8a5cff;
    --accent-hover:#9d6fff;
    --grid:rgba(255,255,255,0.04);
    --shadow:rgba(0,0,0,0.3);
}

body.light{
    --bg:#f5f5f5;
    --text:#111;
    --muted:#444;
    --border:#ddd;
    --card:#fff;
    --grid:rgba(0,0,0,0.06);
    --shadow:rgba(0,0,0,0.1);
}

body{
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
}

/* ================= GRID BACKGROUND ================= */
.grid-bg{
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:40px 40px;
    z-index:-2;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    from { background-position: 0 0; }
    to { background-position: 40px 40px; }
}

/* ================= FLOATING PARTICLES ================= */
.particles{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
}

.particle{
    position:absolute;
    width:4px;
    height:4px;
    background:var(--accent);
    border-radius:50%;
    opacity:0.6;
}

/* ================= HEADER ================= */
.header{
    position:fixed;
    top:0;
    width:100%;
    padding:20px 8%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:color-mix(in srgb, var(--bg) 95%, transparent);
    backdrop-filter: blur(10px);
    border-bottom:2px solid var(--border);
    z-index:10;
    box-shadow: 0 4px 20px var(--shadow);
}

.header-right{
    display:flex;
    align-items:center;
    gap:18px;
}

.logo{
    color:var(--accent);
    font-size:14px;
    cursor:pointer;
    transition: transform 0.3s ease;
}

.logo:hover{ transform: scale(1.1) rotate(5deg); }

/* ================= NAVIGATION ================= */
nav{
    margin-left:auto;
    display:flex;
    align-items:center;
}

nav a{
    margin-left:25px;
    text-decoration:none;
    color:var(--muted);
    font-size:12px;
    transition: color 0.3s ease;
    position:relative;
}

nav a:hover{ color:var(--accent); }

nav a::after{
    content:'';
    position:absolute;
    bottom:-5px;
    left:0;
    width:0;
    height:2px;
    background:var(--accent);
    transition: width 0.3s ease;
}

nav a:hover::after{ width:100%; }

/* ================= THEME TOGGLE ================= */
.theme-toggle{
    margin-right:20px;
    width:42px;
    height:42px;
    background:var(--card);
    color:var(--accent);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    border:2px solid var(--border);
    transition: all 0.3s ease;
}

.theme-toggle:hover{
    border-color:var(--accent);
    transform: scale(1.05);
}

.theme-toggle .icon{
    position:absolute;
    font-size:18px;
    transition:.3s;
}

.theme-toggle .sun{ opacity:1; transform:rotate(0); }
.theme-toggle .moon{ opacity:0; transform:rotate(90deg); }

body.light .theme-toggle .sun{
    opacity:0;
    transform:rotate(-90deg);
}
body.light .theme-toggle .moon{
    opacity:1;
    transform:rotate(0);
}

/* ================= BURGER MENU ================= */
.burger{
    display:none;
    font-size:22px;
    cursor:pointer;
    color:var(--accent);
    transition: transform 0.3s ease;
}

.burger:hover{ transform: rotate(90deg); }

.close{ display:none; }

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    display:none;
    z-index:8;
}

.overlay.active{ display:block; }

/* ================= HERO SECTION ================= */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:140px 8% 60px;
}

.hero-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    gap:60px;
}

.hero-left{
    max-width:650px;
    position:relative;
}

/* ================= PIXEL STARS ================= */
.pixel-star{
    position:absolute;
    font-size:24px;
    color:var(--accent);
    animation: twinkle 3s ease-in-out infinite;
}

.hero-star-1{ top:-30px; left:-20px; animation-delay:0s; }
.hero-star-2{ top:-20px; right:-30px; animation-delay:1.5s; }

@keyframes twinkle {
    0%, 100% { opacity:0.3; transform:scale(1); }
    50% { opacity:1; transform:scale(1.2); }
}

/* ================= HERO TITLE ================= */
.hero-title{
    font-size:28px;
    line-height:1.8;
    margin-bottom:10px;
}

.hero-title .line{
    display:block;
}

.jump span{
    display:inline-block;
    animation:jump 1s ease-in-out infinite;
}

@keyframes jump{
    0%, 100%{transform:translateY(0)}
    50%{transform:translateY(-12px)}
}

.purple{ color:var(--accent); }

.pixel-name{
    font-size:24px;
    margin:20px 0;
    background: linear-gradient(135deg, var(--accent), #ff6b9d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description{
    font-size:11px;
    line-height:2;
    color:var(--muted);
    margin:25px 0;
}

/* ================= TAGS ================= */
.tags{
    display:flex;
    gap:15px;
    margin:30px 0;
}

.tag-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    background:var(--card);
    border:2px solid var(--border);
    font-size:9px;
    transition: all 0.3s ease;
}

.tag-item:hover{
    border-color:var(--accent);
    transform:translateY(-3px);
    box-shadow: 4px 4px 0 var(--accent);
}

.tag-icon{
    font-size:14px;
}

/* ================= HERO BUTTONS ================= */
.hero-buttons{
    display:flex;
    gap:15px;
    margin:30px 0;
}

.btn-primary, .btn-secondary{
    padding:14px 28px;
    font-size:10px;
    text-decoration:none;
    cursor:pointer;
    transition: all 0.3s ease;
    border:2px solid var(--accent);
    display:inline-block;
}

.btn-primary{
    background:var(--accent);
    color:#fff;
}

.btn-primary:hover{
    background:var(--accent-hover);
    transform: translateY(-3px);
    box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
}

.btn-secondary{
    background:transparent;
    color:var(--accent);
}

.btn-secondary:hover{
    background:var(--accent);
    color:#fff;
    transform: translateY(-3px);
    box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
}

/* ================= SOCIAL LINKS ================= */
.social-links{
    display:flex;
    gap:15px;
    margin-top:30px;
}

.social-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--card);
    border:2px solid var(--border);
    text-decoration:none;
    font-size:18px;
    transition: all 0.3s ease;
}

.social-icon:hover{
    border-color:var(--accent);
    transform: translateY(-5px) rotate(360deg);
    box-shadow: 4px 4px 0 var(--accent);
}

/* ================= PHOTO CONTAINER ================= */
.hero-right{
    position:relative;
}

.photo-container{
    position:relative;
    width:340px;
    height:420px;
}

/* Pixel Frame Decorations */
.pixel-frame-decoration{
    position:absolute;
    width:20px;
    height:20px;
    border:3px solid var(--accent);
    z-index:2;
}

.pixel-frame-decoration.top-left{
    top:-10px;
    left:-10px;
    border-right:none;
    border-bottom:none;
}

.pixel-frame-decoration.top-right{
    top:-10px;
    right:-10px;
    border-left:none;
    border-bottom:none;
}

.pixel-frame-decoration.bottom-left{
    bottom:-10px;
    left:-10px;
    border-right:none;
    border-top:none;
}

.pixel-frame-decoration.bottom-right{
    bottom:-10px;
    right:-10px;
    border-left:none;
    border-top:none;
}

/* ===== PHOTO FRAME FINAL FIX ===== */
.photo-frame{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--card);
    overflow:hidden;
    border-radius:6px;
}

.photo-frame img{
    display:block;
    width:auto;
    height:auto;
    max-width:92%;
    max-height:92%;
    object-fit:contain;
    image-rendering:pixelated;
}

/* glow tetap */
.frame-glow{
    position:absolute;
    inset:0;
    pointer-events:none;
    background: linear-gradient(45deg, transparent, var(--accent), transparent);
    opacity:0;
    transition:opacity .5s ease;
}

.photo-frame:hover .frame-glow{
    opacity:.15;
    animation: glowMove 2s linear infinite;
}


.frame-glow{
    position:absolute;
    inset:0;
    background: linear-gradient(45deg, transparent, var(--accent), transparent);
    opacity:0;
    transition: opacity 0.5s ease;
}

.photo-frame:hover .frame-glow{
    opacity:0.1;
    animation: glowMove 2s linear infinite;
}

@keyframes glowMove {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}



.photo-frame:hover img{
    transform: scale(1.05);
}

/* Status Badge */
.status-badge{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    background:var(--card);
    border:2px solid var(--accent);
    padding:8px 16px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:8px;
    z-index:3;
}

.status-dot{
    width:8px;
    height:8px;
    background:#00ff00;
    border-radius:50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity:1; transform:scale(1); }
    50% { opacity:0.5; transform:scale(1.2); }
}

/* ================= SECTION STYLES ================= */
.section-header{
    text-align:center;
    margin-bottom:60px;
    position:relative;
}

.section-title{
    font-size:20px;
    color:var(--accent);
    margin-bottom:10px;
}

.section-subtitle{
    font-size:10px;
    color:var(--muted);
}

.section-header .pixel-star{
    position:absolute;
}

.section-header .star-1{ top:-15px; left:20%; }
.section-header .star-2{ top:-10px; right:25%; animation-delay:1s; }

/* ================= PROJECTS SECTION ================= */
.projects{
    padding:80px 8%;
}

.project-slider{
    overflow:hidden;
    padding:20px 0;
}

.project-track{
    display:flex;
    gap:30px;
    width:max-content;
    animation: slideProjects 40s linear infinite;
}

@keyframes slideProjects {
    from { transform:translateX(0); }
    to { transform:translateX(-50%); }
}

.project-slide{
    min-width:360px;
    background:var(--card);
    border:3px solid var(--border);
    position:relative;
    transition: all 0.3s ease;
}

.project-slide:hover{
    transform:translateY(-8px);
    border-color:var(--accent);
    box-shadow: 8px 8px 0 var(--accent);
}

.project-slide.featured{
    border-color:var(--accent);
    box-shadow: 0 0 20px rgba(138, 92, 255, 0.3);
}

.featured-badge{
    position:absolute;
    top:15px;
    right:15px;
    background:var(--accent);
    color:#fff;
    padding:6px 12px;
    font-size:8px;
    z-index:2;
}

.project-image{
    width:100%;
    height:240px;
    overflow:hidden;
    position:relative;
}

.project-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition: transform 0.5s ease;
}

.project-slide:hover .project-image img{
    transform: scale(1.1);
}

.project-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition: opacity 0.3s ease;
}

.project-slide:hover .project-overlay{
    opacity:1;
}

.overlay-icon{
    font-size:32px;
    animation: iconBounce 0.6s ease infinite;
}

@keyframes iconBounce {
    0%, 100% { transform:scale(1); }
    50% { transform:scale(1.2); }
}

.project-info{
    padding:20px;
}

.project-info h4{
    font-size:12px;
    margin-bottom:12px;
}

.project-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.project-tags span{
    background:var(--border);
    color:var(--accent);
    padding:5px 10px;
    font-size:8px;
    border:1px solid var(--accent);
}

/* ================= LEARNING SERIES ================= */
.learning-series{
    padding:80px 8%;
    background:var(--card);
    border-top:2px solid var(--border);
    border-bottom:2px solid var(--border);
}

.course-slider{
    overflow:hidden;
}

.course-track{
    display:flex;
    gap:30px;
    width:max-content;
    animation: slideCourses 45s linear infinite;
}

@keyframes slideCourses {
    from { transform:translateX(0); }
    to { transform:translateX(-50%); }
}

.course-card{
    position:relative;
    min-width:340px;
    background:var(--bg);
    border:3px solid var(--border);
    padding:25px;
    padding-top:80px;
    transition: all 0.3s ease;
}

.course-card:hover{
    transform:translateY(-5px);
    border-color:var(--accent);
    box-shadow: 6px 6px 0 var(--accent);
}

.course-card.highlight{
    border-color:#ff4d4d;
}

.highlight-badge{
    position:absolute;
    top:15px;
    right:15px;
    background:#ff4d4d;
    color:#fff;
    padding:6px 12px;
    font-size:8px;
}

/* Course Icon */
.course-icon{
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%, -50%);
    width:100px;
    height:100px;
    background:var(--card);
    border:4px solid var(--accent);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: transform 0.3s ease;
    overflow:hidden;
    padding:8px;
}

.course-card:hover .course-icon{
    transform:translate(-50%, -50%) rotate(360deg);
}

.course-card.highlight .course-icon{
    border-color:#ff4d4d;
}

.course-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:50%;
    image-rendering:auto;
}

.course-content h4{
    font-size:14px;
    margin-bottom:10px;
}

.course-author{
    font-size:10px;
    color:var(--muted);
    margin-bottom:20px;
}

.course-divider{
    height:2px;
    background:var(--border);
    margin:15px 0;
}

.course-meta{
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:9px;
    color:var(--muted);
}

/* ================= STATS SECTION ================= */
.stats-section{
    padding:80px 8%;
}

.stats-container{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:30px;
}

.stat-box{
    background:var(--card);
    border:3px solid var(--border);
    padding:40px 20px;
    text-align:center;
    transition: all 0.3s ease;
}

.stat-box:hover{
    border-color:var(--accent);
    transform:translateY(-8px);
    box-shadow: 6px 6px 0 var(--accent);
}

.stat-icon{
    font-size:40px;
    margin-bottom:20px;
}

.stat-number{
    font-size:32px;
    color:var(--accent);
    margin-bottom:10px;
}

.stat-label{
    font-size:9px;
    color:var(--muted);
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
    .burger{ display:block; }

    nav{
        position:fixed;
        top:0;
        right:-100%;
        height:100vh;
        width:240px;
        background:var(--card);
        flex-direction:column;
        padding-top:100px;
        transition:0.4s;
        z-index:9;
        border-left:3px solid var(--accent);
    }

    nav a{ margin:20px; }
    nav.active{ right:0; }

    .close{
        display:block;
        position:absolute;
        top:20px;
        right:20px;
        font-size:18px;
        cursor:pointer;
        color:var(--accent);
    }

    .hero{ padding:120px 5% 60px; }

    .hero-content{
        flex-direction:column-reverse;
        gap:40px;
    }

    .hero-left{ max-width:100%; text-align:center; }

    .hero-title{ font-size:18px; }
    .pixel-name{ font-size:18px; }
    .hero-description{ font-size:10px; }

    .tags{ flex-direction:column; align-items:center; }
    .tag-item{ width:100%; justify-content:center; }

    .hero-buttons{ flex-direction:column; }
    .btn-primary, .btn-secondary{ width:100%; text-align:center; }

    .social-links{ justify-content:center; }

    .photo-container{
        width:280px;
        height:340px;
    }

    .theme-toggle{
        width:36px;
        height:36px;
        margin-right:10px;
    }

    .project-slide{ min-width:280px; }
    .course-card{ min-width:280px; padding:20px; padding-top:70px; }
    .course-icon{ width:80px; height:80px; }

    .stats-container{
        grid-template-columns:repeat(2, 1fr);
        gap:20px;
    }
}

@media(max-width:480px){
    .hero-title{ font-size:14px; }
    .pixel-name{ font-size:16px; }
    .hero-description{ font-size:9px; }

    .section-title{ font-size:16px; }
    .section-subtitle{ font-size:9px; }

    .project-slide{ min-width:250px; }
    .course-card{ min-width:250px; padding:18px; padding-top:65px; }
    .course-icon{ width:70px; height:70px; }

    .stats-container{ grid-template-columns:1fr; }

    .photo-container{
        width:240px;
        height:300px;
    }
}

/* ================= PIXEL LOADER ================= */
.pixel-loader{
    position:fixed;
    inset:0;
    background:#0b0b0b;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:9999;
    image-rendering:pixelated;
}

.spinner{
    width:60px;
    height:60px;
    border:8px solid #222;
    border-top:8px solid var(--accent);
    animation:spinPixel 1s linear infinite;
    box-shadow:
        0 0 0 4px #111,
        0 0 0 8px #000;
}

@keyframes spinPixel{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

.loading-text{
    margin-top:25px;
    font-size:10px;
    color:var(--accent);
    letter-spacing:2px;
    animation:blink 1s infinite;
}

@keyframes blink{
    50%{ opacity:0.3; }
}

body.preload *{
    animation:none !important;
    transition:none !important;
}

/* Container untuk loader pixel */
.pixel-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    /* Membuat grid 10x10 kotak */
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    z-index: 100;
    pointer-events: none;
}

.pixel-block {
    background-color: var(--bg-color, #0f0f13); /* Sesuaikan dengan warna bg kamu */
    border: 0.1px solid rgba(138, 92, 255, 0.1);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Animasi menghilang */
.pixel-block.fade-out {
    opacity: 0;
    transform: scale(0.8);
}



/* Munculkan kembali setelah loading */
.content-ready {
    visibility: visible !important;
    opacity: 1 !important;
}

.reveal-text{
    opacity:0;
    transform:translateY(30px) scale(0.95);
    filter:blur(6px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16,1,.3,1),
        filter .8s ease;
}

.reveal-text.show{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
}



@keyframes photoReveal{
    to{
        opacity:1;
        transform:scale(1);
    }
}