:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:320px;min-height:100vh;overflow-x:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box;max-width:100%}.navbar{background-color:#0f172ab3;color:#f8fafc;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;width:100%;z-index:1000;box-shadow:0 4px 10px #0000004d}.navbar-logo{font-size:24px;font-weight:700;color:#22c55e;position:absolute;top:10px;right:60px;left:auto}.navbar-menu{display:flex;gap:20px;border-radius:50px;align-items:center;justify-content:center;width:400px;height:50px;background:#1e293b;box-shadow:5px 5px 10px #0e141f,-5px -5px 10px #243144}.navbar-menu a{text-decoration:none;color:#e2e8f0;transition:color .3s ease;border-radius:45px;background:#1e293b;width:80px;height:auto;text-align:center;box-shadow:inset 5px 5px 10px #0f172a,inset -5px -5px 10px #2c3e50;padding:6px 10px;font-weight:500}.navbar-menu a:hover{color:#22c55e}.menu-toggle{display:none;font-size:24px;cursor:pointer;color:#22c55e}@media (max-width: 768px){.navbar{flex-wrap:wrap}.navbar-menu{display:none;flex-direction:column;position:absolute;top:60px;left:0;height:auto;width:100%;border-radius:20px;background:#1e293b;box-shadow:5px 5px 10px #0e141f,-5px -5px 10px #243144;padding:10px}.navbar-menu.open{display:flex}.menu-toggle{display:block}}.gallery-container{display:flex;overflow:hidden;white-space:nowrap;position:relative;width:100%;padding:20px 0;background-color:transparent;margin-top:50px}.gallery-wrapper{display:flex;gap:15px;width:max-content;animation:scroll-left 10s linear infinite}.gallery-image{width:300px;height:130px;object-fit:cover;border-radius:10px;box-shadow:2px 2px 10px #fff3;transition:transform .3s ease-in-out}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-50%)}}.gallery-container:hover .gallery-wrapper{animation-play-state:paused}.text-style{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);color:#f0f8ff;text-align:center}.card-container{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,auto);gap:20px;justify-content:center;align-items:center;width:fit-content;padding:40px;margin:0 auto}.card{text-align:center;width:200px;height:120px;border-radius:45px;background:#e0e0e0;box-shadow:inset 5px 5px 10px #bebebe,inset -5px -5px 10px #fff;display:flex;flex-direction:column;justify-content:center;align-items:center}.card .desk{display:none;font-size:15px}.card:hover .desk{display:block}.card:hover .judul,.card:hover .atom{display:none}.judul{font-size:15px;text-align:center}.atom{display:block;animation:atomanim 2s infinite}@keyframes atomanim{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (min-width: 768px) and (max-width: 1200px){.card-container{grid-template-columns:repeat(4,1fr);gap:15px;padding:20px}.card{width:150px;height:80px}}@media (max-width: 768px){.card-container{grid-template-columns:repeat(3,1fr);gap:15px;padding:20px}.card{width:150px;height:80px}.text-style{font-size:small}}@media (max-width: 600px){.card-container{grid-template-columns:repeat(2,1fr)}.text-style{font-size:10px}}.contact-container{background-color:transparent;padding:60px 20px;color:#e2e8f0;font-family:Arial,sans-serif}.contact-title{text-align:center;font-size:32px;margin-bottom:40px;color:#22c55e}.contact-form{max-width:600px;margin:auto;background:#1e293b;padding:30px;border-radius:10px;box-shadow:0 2px 15px #0006}.form-group{margin-bottom:20px}.form-group label{font-weight:700;display:block;margin-bottom:8px;color:#cbd5e1}.form-group input,.form-group textarea{width:100%;padding:12px;border-radius:6px;border:1px solid #334155;background-color:#0f172a;color:#f8fafc;font-size:16px}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#22c55e;box-shadow:0 0 5px #22c55e}.submit-btn{width:100%;background-color:#22c55e;color:#fff;padding:14px;font-size:16px;font-weight:700;border:none;border-radius:6px;cursor:pointer;transition:background .3s ease}.submit-btn:hover{background-color:#15803d}.contact-info{text-align:center;margin-top:40px;font-size:14px;color:#94a3b8}.contact-info a{color:#22c55e;text-decoration:none}.contact-info a:hover{text-decoration:underline}.hero-section{background-color:transparent;color:#fff;padding:2rem 0;position:relative;z-index:1}.hero-container{max-width:1200px;margin:0 auto;display:flex;flex-direction:column-reverse;align-items:center;text-align:center}.hero-text{max-width:600px}.hero-intro{font-size:1.2rem;margin-bottom:.5rem;color:#bae6fd}.hero-title{font-size:2.5rem;font-weight:700;margin:0}.typing-name{display:inline-block;color:#22c55e;border-right:3px solid #22c55e;white-space:nowrap;overflow:hidden;width:0;animation:typing 3s steps(20,end) forwards,blink .75s step-end infinite}@keyframes typing{0%{width:0}to{width:12ch}}@keyframes blink{0%,to{border-color:transparent}50%{border-color:#22c55e}}.hero-desc{font-size:1rem;margin:.5rem 0 1rem;color:#cbd5e1}.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:.5rem}.btn{padding:.6rem 1.2rem;border-radius:5px;font-weight:700;text-decoration:none;transition:.3s ease}.btn-primary{background-color:#22c55e;color:#fff}.btn-primary:hover{background-color:#15803d}.btn-secondary{background-color:transparent;color:#22c55e;border:2px solid #22c55e}.btn-secondary:hover{background-color:#22c55e;color:#fff}.hero-socials{font-size:.9rem;margin-top:.8rem}.hero-socials a{color:#a7f3d0;text-decoration:none;margin:0 .4rem}.hero-socials a:hover{text-decoration:underline}.hero-image img{width:240px;max-width:100%;margin:0;padding:0;border-radius:0;box-shadow:none}@media (min-width: 768px){.hero-container{flex-direction:row;justify-content:space-between;text-align:left}.hero-image{margin-left:2rem}}.glass-container{background-color:transparent;min-height:100vh;padding:60px 20px;color:#e2e8f0;font-family:Segoe UI,sans-serif;display:flex;flex-direction:column;align-items:center}.biodata-title{font-size:2rem;color:#22c55e;margin-bottom:30px;text-align:center}.biodata-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;width:100%;justify-items:center}.biodata-item{background:#ffffff0d;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:15px;padding:25px;text-align:center;width:100%;color:#cbd5e1;font-size:1rem;box-shadow:0 6px 20px #00000080;border:1px solid rgba(255,255,255,.08);transition:transform .3s ease,box-shadow .3s ease}.biodata-item:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 12px 30px #00ff804d;border-color:#22c55e}@media (max-width: 768px){.biodata-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 500px){.biodata-grid{grid-template-columns:1fr}}.skills-section{background-color:transparent;color:#0ea5e9;text-align:center;padding:4rem 2rem}.skills-title{font-size:2rem;margin-bottom:.5rem;color:#67e8f9}.skills-subtitle{font-size:1.2rem;margin-bottom:2rem;color:#a5f3fc}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1.5rem;justify-items:center}.skill-card{background-color:#000;padding:1rem;border-radius:1rem;width:120px;height:140px;box-shadow:0 0 10px #0ea5e9aa;display:flex;flex-direction:column;align-items:center;justify-content:space-between;transition:transform .3s ease,box-shadow .3s ease}.skill-card:hover{transform:scale(1.05);box-shadow:0 0 15px #22d3ee}.skill-icon{font-size:40px;margin-top:10px}.skill-card p{margin:.5rem 0;color:#f8fafc;font-weight:700}.glow-bar{width:100%;height:4px;background:linear-gradient(to right,#3b82f6,#9333ea);border-radius:2px}.projects-section{background-color:transparent;color:#e2e8f0;padding:60px 20px;text-align:center;font-family:Segoe UI,sans-serif}.projects-title{font-size:2rem;color:#22c55e;margin-bottom:40px}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;max-width:1100px;margin:auto}.project-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;box-shadow:0 8px 20px #00ff801a;transition:transform .3s ease,box-shadow .3s ease}.project-card:hover{transform:translateY(-6px);box-shadow:0 12px 25px #00ff804d}.project-image{width:100%;height:160px;object-fit:cover}.project-content{padding:20px}.project-title{font-size:1.3rem;font-weight:700;color:#22c55e;margin-bottom:10px}.project-desc{font-size:.95rem;color:#cbd5e1;margin-bottom:15px}.project-icons{display:flex;justify-content:center;gap:12px}.icon-badge{background-color:#22c55e33;color:#22c55e;padding:8px;border-radius:50%;font-size:1.2rem;transition:background .3s ease}.icon-badge:hover{background-color:#22c55e;color:#0f172a}