@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap";:root{--bg-main:#0b1120;--bg-card:#111827;--primary:#3b82f6;--text-main:#e5e7eb;--text-muted:#9ca3af}*{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,sans-serif}html{scroll-behavior:smooth}body{color:var(--text-main);background:radial-gradient(circle at top,#0f172a,#020617)}.navbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:999;background:#020617bf;width:100%;position:fixed;top:0}.nav-container{justify-content:space-between;align-items:center;max-width:1100px;margin:auto;padding:18px 20px;display:flex}.nav-right{align-items:center;gap:35px;display:flex}.logo{color:var(--text-main);font-size:1.4rem;font-weight:700}.nav-menu{gap:28px;list-style:none;display:flex}.nav-menu a{color:var(--text-muted);font-weight:500;text-decoration:none;transition:all .3s}.nav-menu a:hover{color:var(--primary)}header{padding-top:80px}.hamburger{cursor:pointer;z-index:1000;border-radius:8px;flex-direction:column;gap:5px;padding:8px;transition:all .3s;display:none}.hamburger:hover{background:#3b82f61a}.hamburger span{background:#fff;border-radius:5px;width:28px;height:3px;transition:all .3s}.hamburger.active span{background:#fff}[data-theme=light] .hamburger span,[data-theme=light] .hamburger.active span{background:#1e293b}@media (width<=768px){.hamburger{display:flex}.nav-right{opacity:0;pointer-events:none;background:#0b1120;border-left:2px solid #3b82f666;flex-direction:column;gap:0;width:280px;height:100vh;padding:80px 30px 30px;transition:all .4s cubic-bezier(.4,0,.2,1);position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%);box-shadow:-10px 0 50px #00000080}.nav-right.active{opacity:1;pointer-events:auto;transform:translate(0)}.nav-menu{flex-direction:column;gap:0;width:100%;margin-bottom:30px}.nav-menu li{border-bottom:1px solid #ffffff14;width:100%}.nav-menu li:last-child{border-bottom:none}.nav-menu a{color:var(--text-main);border-radius:10px;padding:18px 15px;font-size:1.1rem;transition:all .3s;display:block}.nav-menu a:hover{background:#3b82f626;padding-left:20px}.theme-toggle{border-top:1px solid #ffffff1a;justify-content:center;margin-top:20px;padding:20px 0}.theme-toggle button{padding:12px 16px;font-size:1.1rem}.nav-right.active:before{content:"";z-index:-1;background:#0009;width:100vw;height:100vh;position:fixed;top:0;left:0}[data-theme=light] .nav-right{border-left:2px solid #2563eb4d;box-shadow:-10px 0 40px #00000026;background:#fff!important}[data-theme=light] .nav-menu li{border-bottom-color:#00000014}[data-theme=light] .nav-menu a{color:#1e293b!important}[data-theme=light] .nav-menu a:hover{background:#2563eb1a;color:#2563eb!important}[data-theme=light] .theme-toggle{border-top-color:#0000001a}[data-theme=light] .theme-toggle button{background:#0000000d;color:#1e293b!important}[data-theme=light] .theme-toggle button:hover{background:#2563eb;color:#fff!important}[data-theme=light] .nav-right.active:before{background:#0006}}header{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.header-content{justify-content:space-between;align-items:center;gap:60px;width:100%;max-width:1100px;display:flex}.header-text{text-align:left;flex:1}header h1{letter-spacing:1px;font-size:3.2rem;font-weight:700;line-height:1.2}header p{color:var(--text-muted);letter-spacing:.8px;margin-top:14px;margin-bottom:38px;font-size:1.15rem;line-height:1.8}.header-image{flex:none;position:relative}.header-image img{object-fit:cover;border:5px solid var(--primary);border-radius:50%;width:350px;height:350px;transition:all .5s;box-shadow:0 0 0 15px #3b82f61a,0 20px 60px #3b82f64d}.header-image img:hover{transform:scale(1.05);box-shadow:0 0 0 15px #3b82f626,0 25px 80px #3b82f666}@keyframes glow{0%,to{box-shadow:0 0 0 15px #3b82f61a,0 20px 60px #3b82f64d}50%{box-shadow:0 0 0 20px #3b82f626,0 25px 70px #3b82f666}}.header-image img{animation:3s ease-in-out infinite glow}.btn{background:linear-gradient(135deg, var(--primary), #60a5fa);color:#fff;border-radius:999px;padding:14px 38px;font-weight:600;text-decoration:none;transition:all .35s;display:inline-block;box-shadow:0 12px 35px #3b82f673}.btn:hover{transform:translateY(-5px);box-shadow:0 18px 45px #3b82f699}section{max-width:1100px;margin:auto;padding:100px 20px}section h2{text-align:center;margin-bottom:55px;font-size:2.3rem;position:relative}section h2:after{content:"";background:var(--primary);border-radius:12px;width:65px;height:4px;margin:14px auto 0;display:block}.fade-in-section{opacity:0;transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1);transform:translateY(40px)}.fade-in-section.animate-in{opacity:1;transform:translateY(0)}.card{opacity:0;animation:.6s cubic-bezier(.4,0,.2,1) forwards fadeInUp;transform:translateY(30px)scale(.95)}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)scale(1)}}.projects{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:35px;display:grid}.project-card{background:var(--bg-card);border:1px solid #ffffff0f;border-radius:22px;padding:0;transition:all .45s;overflow:hidden}.project-card:hover{border-color:var(--primary);transform:translateY(-12px);box-shadow:0 28px 65px #3b82f647}.project-card h3{margin-bottom:12px;font-size:1.2rem}.project-card p{color:var(--text-muted);margin-bottom:20px;line-height:1.7}.project-links{gap:12px;margin-top:20px;display:flex}.project-btn{text-align:center;color:var(--text-main);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .3s;display:flex}.project-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-3px);box-shadow:0 8px 20px #3b82f666}.project-btn.demo{background:linear-gradient(135deg, var(--primary), #60a5fa);color:#fff;border:none}.project-btn.demo:hover{background:linear-gradient(135deg, #2563eb, var(--primary));box-shadow:0 8px 25px #3b82f680}.project-btn i{font-size:.95rem}[data-theme=light] .project-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffffe6,#ffffffb3);border:1px solid #ffffff4d;box-shadow:0 8px 32px #1f268726,inset 0 1px #ffffff80}[data-theme=light] .project-card:hover{border-color:#2563eb66;box-shadow:0 15px 50px #2563eb40,inset 0 1px #fff9}[data-theme=light] .project-card h3{color:#1e293b}[data-theme=light] .project-btn{color:#1e293b;background:#2563eb14;border-color:#2563eb33}[data-theme=light] .project-btn:hover{color:#fff;background:#2563eb}@media (width<=480px){.project-links{flex-direction:column}.project-btn{width:100%}}#about p{text-align:center;max-width:820px;color:var(--text-muted);margin:auto;font-size:1.05rem;line-height:1.9}.skills{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px;display:grid}.card{background:linear-gradient(160deg, #020617, var(--bg-card));text-align:center;letter-spacing:.5px;border-radius:20px;padding:28px;font-weight:600;transition:all .45s;position:relative;overflow:hidden}.card:before{content:"";opacity:0;background:linear-gradient(120deg,#0000,#3b82f640,#0000);transition:all .45s;position:absolute;inset:0}.card:hover:before{opacity:1}.card:hover{transform:translateY(-10px)scale(1.03);box-shadow:0 25px 55px #0009}.card i{color:var(--primary);margin-bottom:12px;font-size:2.8rem}.card span{font-size:1.05rem;display:block}[data-theme=light] .card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffffe6,#ffffffb3);border:1px solid #ffffff4d;box-shadow:0 8px 32px #1f268726,inset 0 1px #ffffff80}[data-theme=light] .card:before{background:linear-gradient(120deg,#0000,#2563eb1a,#0000)}[data-theme=light] .card:hover{border-color:#2563eb4d;box-shadow:0 15px 45px #2563eb40,inset 0 1px #fff9}[data-theme=light] .card i{color:#2563eb}[data-theme=light] .card span{color:#1e293b}.project-card{padding:0;overflow:hidden}.project-thumb{background:#0f172a;width:100%;height:180px;position:relative;overflow:hidden}.project-thumb img{object-fit:cover;width:100%;height:100%;transition:transform .5s;display:block}.project-card:hover .project-thumb img{transform:scale(1.06)}.project-thumb-placeholder{background:linear-gradient(135deg,#0f172a,#1e293b);flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;height:100%;display:none}.project-thumb-placeholder i{color:var(--primary);opacity:.6;font-size:2.2rem}.project-thumb-placeholder span{color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;font-size:.75rem}.project-body{padding:24px 28px 28px}.card{flex-direction:column;justify-content:center;align-items:center;display:flex}.card i{color:var(--primary);align-items:center;height:45px;margin-bottom:12px;font-size:2.8rem;display:flex}[data-theme=light] .project-thumb{background:#f1f5f9}[data-theme=light] .project-thumb-placeholder{background:linear-gradient(135deg,#eff6ff,#dbeafe)}[data-theme=light]{--bg-main:#f9fafb;--bg-card:#fff;--primary:#2563eb;--text-main:#111827;--text-muted:#4b5563}[data-theme=light] body{background:radial-gradient(circle at top,#e5e7eb,#f9fafb)}[data-theme=light] .navbar{background:#fffc}[data-theme=light] footer{background:#e5e7eb}.theme-toggle{align-items:center;display:flex}.slide-track{align-items:center;gap:10px;display:inline-flex}.slide-icon svg{stroke:#fff6;fill:none;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:17px;height:17px;transition:stroke .3s}.slide-icon.active svg{stroke:#fff}.switch{cursor:pointer;flex-shrink:0;width:52px;height:28px;position:relative}.switch input{opacity:0;width:0;height:0;position:absolute}.slider-track{background:#1e293b;border:1px solid #ffffff1f;border-radius:999px;transition:background .3s,border-color .3s;position:absolute;inset:0}.slider-knob{background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);position:absolute;top:4px;left:4px;box-shadow:0 1px 4px #0000004d}.switch input:checked~.slider-track{background:#3b82f6;border-color:#3b82f6}.switch input:checked~.slider-knob{transform:translate(24px)}[data-theme=light] .slider-track{background:#e2e8f0;border-color:#cbd5e1}[data-theme=light] .slide-icon svg{stroke:#94a3b8}[data-theme=light] .slide-icon.active svg{stroke:#1e293b}@media (width<=768px){.slide-track{border-top:1px solid #ffffff1a;justify-content:center;width:100%;margin-top:20px;padding:20px 0}[data-theme=light] .slide-track{border-top-color:#0000001a}}#contact p{text-align:center;color:var(--text-muted);margin:14px 0;font-size:1.05rem;transition:all .3s}#contact p:hover{color:var(--text-main)}footer{color:var(--text-muted);background:linear-gradient(135deg,#020617,#0b1120);border-top:1px solid #3b82f633;padding:60px 20px 30px}.footer-content{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;max-width:1100px;margin:0 auto 40px;display:grid}.footer-section h3{color:var(--text-main);background:linear-gradient(135deg, var(--primary), #60a5fa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:15px;font-size:1.5rem}.footer-section h4{color:var(--text-main);margin-bottom:15px;font-size:1.1rem;font-weight:600}.footer-section p{color:var(--text-muted);line-height:1.8}.footer-section ul{list-style:none}.footer-section ul li{margin-bottom:10px}.footer-section ul li a{color:var(--text-muted);text-decoration:none;transition:all .3s;display:inline-block}.footer-section ul li a:hover{color:var(--primary);transform:translate(5px)}.social-links{flex-wrap:wrap;gap:15px;display:flex}.social-links a{width:45px;height:45px;color:var(--text-main);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;justify-content:center;align-items:center;font-size:1.2rem;text-decoration:none;transition:all .3s;display:flex}.social-links a:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-5px);box-shadow:0 10px 25px #3b82f666}.footer-bottom{text-align:center;border-top:1px solid #ffffff1a;max-width:1100px;margin:0 auto;padding-top:30px}.footer-bottom p{color:var(--text-muted);margin:8px 0;font-size:.9rem}.footer-bottom i.fa-heart{color:#ef4444;animation:1.5s ease-in-out infinite heartbeat}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}[data-theme=light] footer{background:linear-gradient(135deg,#f9fafb,#e5e7eb);border-top:1px solid #2563eb33}[data-theme=light] .social-links a{color:#1e293b;background:#2563eb14;border-color:#2563eb33}[data-theme=light] .social-links a:hover{color:#fff;background:#2563eb}[data-theme=light] .footer-bottom{border-top-color:#0000001a}@media (width<=768px){.header-content{text-align:center;flex-direction:column-reverse;gap:40px}.header-text{text-align:center}.header-image img{width:250px;height:250px}header h1{font-size:2.4rem}header p{font-size:1.05rem}section h2{font-size:1.9rem}footer{padding:50px 20px 25px}.footer-content{text-align:left;grid-template-columns:1fr;gap:40px}.footer-section{padding:0 10px}.footer-section h3{margin-bottom:12px;font-size:1.3rem}.footer-section h4{margin-bottom:12px;font-size:1rem}.footer-section p{font-size:.95rem;line-height:1.7}.footer-section ul li{margin-bottom:12px}.footer-section ul li a{padding:8px 0;font-size:.95rem;display:inline-block}.footer-section ul li a:hover{color:var(--primary);transform:translate(0)}.social-links{justify-content:flex-start;gap:12px}.social-links a{width:50px;height:50px;font-size:1.3rem}.footer-bottom{margin-top:10px;padding-top:25px}.footer-bottom p{margin:6px 0;font-size:.85rem}.fade-in-section{opacity:0;transform:translateY(30px)}.card{transform:translateY(20px)scale(.95)}.project-card{transform:translateY(20px)}header h1{animation:.8s cubic-bezier(.4,0,.2,1) mobileSlideUp}header p{animation:.8s cubic-bezier(.4,0,.2,1) .2s backwards mobileSlideUp}header .btn{animation:.8s cubic-bezier(.4,0,.2,1) .4s backwards mobileSlideUp}header .header-image{animation:1s cubic-bezier(.4,0,.2,1) .3s backwards mobileZoomIn}@keyframes mobileSlideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes mobileZoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.nav-right{animation-duration:.5s}.nav-right.active{animation:.4s cubic-bezier(.34,1.56,.64,1) slideInRight}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.nav-right.active .nav-menu li{animation:.4s cubic-bezier(.4,0,.2,1) backwards menuItemSlide}.nav-right.active .nav-menu li:first-child{animation-delay:.1s}.nav-right.active .nav-menu li:nth-child(2){animation-delay:.15s}.nav-right.active .nav-menu li:nth-child(3){animation-delay:.2s}.nav-right.active .nav-menu li:nth-child(4){animation-delay:.25s}.nav-right.active .nav-menu li:nth-child(5){animation-delay:.3s}@keyframes menuItemSlide{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.nav-right.active .theme-toggle{animation:.5s cubic-bezier(.4,0,.2,1) .4s backwards fadeInScale}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.card:active,.project-card:active,.project-btn:active,.social-links a:active{transform:scale(.95)}html{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}}@media (width<=480px){.footer-content{gap:35px}.footer-section{padding:0 5px}.social-links{flex-wrap:wrap}.social-links a{width:48px;height:48px;font-size:1.2rem}.fade-in-section{transform:translateY(20px)}}.cert-tabs{flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:45px;display:flex}.cert-tab{color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #3b82f64d;border-radius:999px;padding:10px 26px;font-family:Poppins,sans-serif;font-size:.95rem;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1)}.cert-tab:hover,.cert-tab.active{background:linear-gradient(135deg, var(--primary), #60a5fa);color:#fff;border-color:#0000;box-shadow:0 8px 25px #3b82f666}.cert-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;display:grid}.cert-card{background:linear-gradient(160deg, #020617, var(--bg-card));opacity:0;border:1px solid #ffffff0f;border-radius:20px;transition:all .45s cubic-bezier(.4,0,.2,1);animation:.6s cubic-bezier(.4,0,.2,1) forwards fadeInCard;position:relative;overflow:hidden;transform:translateY(30px)}@keyframes fadeInCard{to{opacity:1;transform:translateY(0)}}.cert-card:first-child{animation-delay:50ms}.cert-card:nth-child(2){animation-delay:.15s}.cert-card:nth-child(3){animation-delay:.25s}.cert-card:nth-child(4){animation-delay:.35s}.cert-card:nth-child(5){animation-delay:.45s}.cert-card:nth-child(6){animation-delay:.55s}.cert-card:hover{border-color:#3b82f680;transform:translateY(-10px);box-shadow:0 25px 60px #3b82f640}.cert-card:before{content:"";background:linear-gradient(90deg, transparent, var(--primary), transparent);opacity:0;z-index:1;height:2px;transition:all .45s;position:absolute;top:0;left:0;right:0}.cert-card:hover:before{opacity:1}.cert-img-wrap{background:#0f172a;justify-content:center;align-items:center;width:100%;min-height:160px;max-height:280px;display:flex;position:relative;overflow:hidden}.cert-img-wrap img{object-fit:contain;width:100%;height:auto;max-height:280px;transition:transform .5s;display:block}.cert-card:hover .cert-img-wrap img{transform:scale(1.03)}.cert-img-placeholder{background:linear-gradient(135deg,#0f172a,#1e293b);flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;height:100%;display:flex}.cert-img-placeholder i{color:var(--primary);opacity:.7;font-size:3.5rem}.cert-img-placeholder span{color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;font-size:.8rem}.cert-img-overlay{opacity:0;background:#020617b3;justify-content:center;align-items:center;transition:all .35s;display:flex;position:absolute;inset:0}.cert-card:hover .cert-img-overlay{opacity:1}.cert-view-btn{background:linear-gradient(135deg, var(--primary), #60a5fa);color:#fff;cursor:pointer;border:none;border-radius:999px;align-items:center;gap:8px;padding:10px 24px;font-family:Poppins,sans-serif;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .3s;display:flex}.cert-view-btn:hover{transform:scale(1.05);box-shadow:0 8px 25px #3b82f680}.cert-badge{letter-spacing:.5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2;border-radius:999px;padding:5px 14px;font-size:.75rem;font-weight:600;position:absolute;top:14px;left:14px}.badge-sertifikat{color:#93c5fd;background:#3b82f640;border:1px solid #3b82f680}.badge-prestasi{color:#fcd34d;background:#f59e0b40;border:1px solid #f59e0b80}.badge-lomba{color:#6ee7b7;background:#10b98140;border:1px solid #10b98180}.cert-body{padding:22px 24px}.cert-body h3{color:var(--text-main);margin-bottom:8px;font-size:1.05rem;font-weight:600;line-height:1.4}.cert-issuer{color:var(--primary);align-items:center;gap:6px;margin-bottom:10px;font-size:.9rem;display:flex}.cert-issuer i{font-size:.85rem}.cert-desc{color:var(--text-muted);margin-bottom:14px;font-size:.88rem;line-height:1.65}.cert-meta{border-top:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding-top:14px;display:flex}.cert-date{color:var(--text-muted);align-items:center;gap:6px;font-size:.82rem;display:flex}.cert-date i{font-size:.8rem}.cert-action{color:var(--primary);align-items:center;gap:5px;font-size:.82rem;font-weight:500;text-decoration:none;transition:all .3s;display:flex}.cert-action:hover{color:#60a5fa;gap:8px}.cert-card.hidden{display:none}[data-theme=light] .cert-card{background:#fff;border:1px solid #e2e8f0;box-shadow:0 4px 20px #0f172a14}[data-theme=light] .cert-card:hover{border-color:#2563eb;box-shadow:0 16px 45px #2563eb2e}[data-theme=light] .cert-card:before{background:linear-gradient(90deg,#0000,#2563eb,#0000)}[data-theme=light] .cert-img-placeholder{background:linear-gradient(135deg,#eff6ff,#dbeafe)}[data-theme=light] .cert-img-wrap{background:#f1f5f9}[data-theme=light] .cert-img-placeholder i{color:#2563eb;opacity:.85}[data-theme=light] .cert-img-placeholder span{color:#64748b}[data-theme=light] .cert-img-overlay{background:#eff6ffd1}[data-theme=light] .badge-sertifikat{color:#1d4ed8;background:#dbeafe;border:1px solid #93c5fd}[data-theme=light] .badge-prestasi{color:#b45309;background:#fef3c7;border:1px solid #fbbf24}[data-theme=light] .badge-lomba{color:#047857;background:#d1fae5;border:1px solid #6ee7b7}[data-theme=light] .cert-body h3{color:#0f172a}[data-theme=light] .cert-issuer{color:#2563eb}[data-theme=light] .cert-desc{color:#475569}[data-theme=light] .cert-meta{border-top-color:#e2e8f0}[data-theme=light] .cert-date{color:#64748b}[data-theme=light] .cert-action{color:#2563eb}[data-theme=light] .cert-action:hover{color:#1d4ed8}[data-theme=light] .cert-tab{color:#475569;background:#f1f5f9;border-color:#e2e8f0}[data-theme=light] .cert-tab:hover{color:#1d4ed8;box-shadow:none;background:#dbeafe;border-color:#93c5fd}[data-theme=light] .cert-tab.active{color:#fff;background:linear-gradient(135deg,#2563eb,#3b82f6);border-color:#0000;box-shadow:0 6px 20px #2563eb59}@media (width<=768px){.cert-grid{grid-template-columns:1fr;gap:20px}.cert-tabs{gap:8px}.cert-tab{padding:8px 18px;font-size:.88rem}}