*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color:#2563eb;--secondary-color:#64748b;--accent-color:#f8fafc;--text-dark:#1e293b;--text-light:#64748b;--white:#ffffff;--shadow:0 10px 25px rgba(0, 0, 0, 0.1);--shadow-hover:0 20px 40px rgba(37, 99, 235, 0.15)}html{scroll-behavior:smooth}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:var(--text-dark);overflow-x:hidden}.navbar{position:fixed;top:0;width:100%;background:rgb(255 255 255 / .95);backdrop-filter:blur(10px);z-index:1000;padding:1rem 0;box-shadow:0 2px 20px rgb(0 0 0 / .1);transition:all 0.3s ease}.nav-container{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:700;color:var(--primary-color)}.nav-menu{display:flex;list-style:none;gap:2rem}.nav-link{text-decoration:none;color:var(--text-dark);font-weight:500;transition:color 0.3s ease;position:relative}.nav-link::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--primary-color);transition:width 0.3s ease}.nav-link:hover::after{width:100%}.nav-link:hover{color:var(--primary-color)}.nav-link.active{color:var(--primary-color)}.nav-link.active::after{width:100%}.mobile-menu{display:none;flex-direction:column;cursor:pointer}.mobile-menu span{width:25px;height:3px;background:var(--primary-color);margin:3px 0;transition:0.3s}.hero{height:100vh;background:linear-gradient(135deg,var(--accent-color) 0%,rgb(37 99 235 / .05) 100%);display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}.hero::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgb(37 99 235 / .1) 0%,transparent 70%);animation:float 6s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(5deg)}}.hero-content{position:relative;z-index:2;animation:fadeInUp 1s ease}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.profile-img{width:200px;height:200px;border-radius:50%;object-fit:cover;border:5px solid var(--white);box-shadow:var(--shadow);margin-bottom:2rem;transition:transform 0.3s ease}.profile-img:hover{transform:scale(1.05)}.hero h1{font-size:3rem;margin-bottom:1rem;color:var(--text-dark)}.hero .subtitle{font-size:1.3rem;color:var(--primary-color);margin-bottom:2rem;font-weight:500}.cta-btn{display:inline-block;background:var(--primary-color);color:var(--white);padding:1rem 2rem;text-decoration:none;border-radius:50px;font-weight:600;transition:all 0.3s ease;box-shadow:var(--shadow)}.cta-btn:hover{background:#1d4ed8;transform:translateY(-3px);box-shadow:var(--shadow-hover)}.section{padding:5rem 0}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.section-title{text-align:center;font-size:2.5rem;margin-bottom:3rem;position:relative;color:var(--text-dark)}.section-title::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:80px;height:3px;background:var(--primary-color)}.about{background:var(--white)}.about-content{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.about-text{font-size:1.1rem;color:var(--text-light);line-height:1.8}.skills{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}.skill-tag{background:var(--accent-color);color:var(--primary-color);padding:.5rem 1rem;border-radius:25px;font-weight:500;border:2px solid var(--primary-color);transition:all 0.3s ease}.skill-tag:hover{background:var(--primary-color);color:var(--white);transform:translateY(-2px)}.projects{background:var(--accent-color)}.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:3rem}.project-card{background:var(--white);border-radius:15px;overflow:hidden;box-shadow:var(--shadow);transition:all 0.3s ease;position:relative}:root{--shadow-normal:0 2px 8px rgba(0, 0, 0, 0.1);--shadow-hover:0 8px 20px rgba(0, 0, 0, 0.25)}.projects .project-card{box-shadow:var(--shadow-normal);transition:transform 0.3s ease,box-shadow 0.3s ease;border-radius:10px;background:#fff}.projects .project-card:hover{transform:translateY(-10px)!important;box-shadow:var(--shadow-hover)!important}.project-img{width:100%;height:200px;background:linear-gradient(45deg,var(--primary-color),#3b82f6);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:3rem}.project-content{padding:1.5rem}.project-title{font-size:1.3rem;margin-bottom:1rem;color:var(--text-dark)}.project-desc{color:var(--text-light);margin-bottom:1.5rem;line-height:1.6}.project-links{display:flex;gap:1rem}.project-link{padding:.5rem 1rem;text-decoration:none;border-radius:25px;font-weight:500;transition:all 0.3s ease;font-size:.9rem}.demo-link{background:var(--primary-color);color:var(--white)}.demo-link:hover{background:#1d4ed8;transform:translateY(-2px)}.project-links .project-link:hover{background:var(--primary-color);transform:translateY(-2px);color:var(--white)}.detail-btn{border:2px solid var(--primary-color);color:var(--primary-color)}.github-link{border:2px solid var(--primary-color);color:var(--primary-color)}.github-link:hover{background:var(--primary-color);transform:translateY(-2px);color:var(--white)}.category-badge{position:absolute;top:1rem;right:1rem;background:rgb(255 255 255 / .9);color:var(--primary-color);padding:.3rem .8rem;border-radius:15px;font-size:.8rem;font-weight:600}.contact{background:var(--white)}.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.contact-form{background:var(--accent-color);padding:2rem;border-radius:15px;box-shadow:var(--shadow)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--text-dark)}.form-group input,.form-group textarea{width:100%;padding:1rem;border:2px solid #e2e8f0;border-radius:10px;font-size:1rem;transition:border-color 0.3s ease;background:var(--white)}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-color)}.form-group textarea{min-height:120px;resize:vertical}.submit-btn{background:var(--primary-color);color:var(--white);padding:1rem 2rem;border:none;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;box-shadow:var(--shadow)}.submit-btn:hover{background:#1d4ed8;transform:translateY(-2px)}.social-links{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.social-links h3{margin-bottom:2rem;color:var(--text-dark);font-size:1.5rem}.social-icons{display:flex;gap:2rem;margin-bottom:2rem}.social-icon{display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:var(--primary-color);color:var(--white);border-radius:50%;text-decoration:none;font-size:1.5rem;transition:all 0.3s ease;box-shadow:var(--shadow)}.social-icon:hover{transform:translateY(-3px) scale(1.1);box-shadow:var(--shadow-hover)}.social-icon.linkedin{background:#0077b5}.social-icon.github{background:#333}.social-icon.instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}.footer{background:var(--text-dark);color:var(--white);text-align:center;padding:2rem 0}@media (max-width:768px){.nav-menu{display:none}.mobile-menu{display:flex}.hero h1{font-size:2rem}.hero .subtitle{font-size:1.1rem}.profile-img{width:150px;height:150px}.about-content,.contact-content{grid-template-columns:1fr;gap:2rem}.project-grid{grid-template-columns:1fr}.social-icons{gap:1rem}.social-icon{width:50px;height:50px;font-size:1.2rem}.container{padding:0 1rem}}.fade-in{opacity:0;transform:translateY(30px);transition:all 0.8s ease}.fade-in.active{opacity:1;transform:translateY(0)}.modal{opacity:0;visibility:hidden;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgb(0 0 0 / .7);justify-content:center;align-items:center;transition:opacity 0.4s ease,visibility 0.4s ease;display:flex;padding:20px}.modal.active{opacity:1;visibility:visible}.modal-content{background:#fff;padding:20px;border-radius:12px;width:90%;max-width:1000px;max-height:90vh;overflow-y:auto;text-align:center;transform:scale(.95);transition:transform 0.4s ease,opacity 0.4s ease;opacity:0}.modal.active .modal-content{transform:scale(1);opacity:1}.modal-content-app{background:#fff;padding:20px;border-radius:12px;width:90%;max-width:1000px;max-height:90vh;overflow-y:auto;text-align:center;transform:scale(.95);transition:transform 0.4s ease,opacity 0.4s ease;opacity:0}.modal.active .modal-content-app{transform:scale(1);opacity:1}.swiper{width:100%;height:auto;margin:20px 0}.swiper img{width:100%;height:auto;object-fit:contain;border-radius:8px;display:block;margin:auto}.swiper .swiper-button-prev,.swiper .swiper-button-next{color:#fff;opacity:0;transition:opacity 0.3s;top:50%;transform:translateY(-50%)}.swiper:hover .swiper-button-prev,.swiper:hover .swiper-button-next{opacity:1}.swiper .swiper-pagination{bottom:10px}.close-btn{float:right;font-size:28px;cursor:pointer;color:#333}@media (max-width:768px){.modal-content{width:95%;padding:15px}}@media (max-width:480px){.modal-content{width:100%;height:90vh;padding:10px}}#demoModal{opacity:0;visibility:hidden;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgb(0 0 0 / .7);display:flex;justify-content:center;align-items:center;transition:opacity 0.4s ease,visibility 0.4s ease}#demoModal.active{opacity:1;visibility:visible}#demoModal .modal-content{background:#fff;padding:25px;border-radius:12px;width:90%;max-width:500px;text-align:center;transform:scale(.95);opacity:0;transition:transform 0.4s ease,opacity 0.4s ease;box-shadow:0 10px 30px rgb(0 0 0 / .2)}#demoModal.active .modal-content{transform:scale(1);opacity:1}#demoModal button.project-link{padding:10px 20px;margin:0 10px;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:all 0.3s ease}#cancelDemo{background:#ccc;color:#333}#cancelDemo:hover{background:#b3b3b3;transform:translateY(-2px)}#continueDemo{background:#007bff;color:#fff}#continueDemo:hover{background:#0056b3;transform:translateY(-2px)}#playstoreModal{opacity:0;visibility:hidden;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgb(0 0 0 / .7);display:flex;justify-content:center;align-items:center;transition:opacity 0.4s ease,visibility 0.4s ease}#playstoreModal.active{opacity:1;visibility:visible}#playstoreModal .modal-content{background:#fff;padding:25px;border-radius:12px;width:90%;max-width:500px;text-align:center;transform:scale(.95);opacity:0;transition:transform 0.4s ease,opacity 0.4s ease;box-shadow:0 10px 30px rgb(0 0 0 / .2)}#playstoreModal.active .modal-content{transform:scale(1);opacity:1}#playstoreModal button.project-link{padding:10px 20px;margin:0 10px;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:all 0.3s ease}.play-link{background:var(--primary-color);color:var(--white)}.play-link:hover{background:#1d4ed8;transform:translateY(-2px)}#cancelPlay{background:#ccc;color:#333}#cancelPlay:hover{background:#b3b3b3;transform:translateY(-2px)}#continuePlay{background:#007bff;color:#fff}#continuePlay:hover{background:#0056b3;transform:translateY(-2px)}#appPreviewModal{opacity:0;visibility:hidden;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgb(0 0 0 / .7);display:flex;justify-content:center;align-items:center;transition:opacity 0.4s ease,visibility 0.4s ease}#appPreviewModal.active{opacity:1;visibility:visible}#appPreviewModal .swiper img{width:auto;max-width:300px;height:500px;object-fit:cover;display:block;margin:10px auto;border-radius:10px}#appPreviewModal.active .modal-content-app{transform:scale(1);opacity:1}#appPreviewModal .swiper img{width:100%;height:auto;object-fit:contain;display:block;margin:10px auto;border-radius:6px}#appPreviewModal .close-btn{float:right;font-size:24px;cursor:pointer;color:#333}#appPreviewModal button.project-link{padding:10px 20px;margin:0 10px;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:all 0.3s ease}#appPreviewModal button.project-link:hover{transform:translateY(-2px)}@media (max-width:480px){#appPreviewModal .modal-content-app{width:95%;padding:15px}}#appPreviewOtaku{opacity:0;visibility:hidden;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgb(0 0 0 / .7);display:flex;justify-content:center;align-items:center;transition:opacity 0.4s ease,visibility 0.4s ease}#appPreviewOtaku.active{opacity:1;visibility:visible}#appPreviewOtaku .modal-content{background:#fff;padding:20px;border-radius:12px;max-width:90%;max-height:90%;overflow-y:auto;transform:scale(.8);opacity:0;transition:transform 0.3s ease,opacity 0.3s ease}#appPreviewOtaku.active .modal-content{transform:scale(1);opacity:1}#appPreviewOtaku .close-btn{float:right;font-size:24px;cursor:pointer;color:#333}#appPreviewOtaku .swiper img{width:100%;max-width:300px;height:auto;object-fit:contain;display:block;margin:10px auto;border-radius:6px}#appPreviewOtaku .swiper-button-next,#appPreviewOtaku .swiper-button-prev{color:#333}#appPreviewOtaku .swiper-pagination-bullet{background:#333}#appPreviewOtaku button.project-link{padding:10px 20px;margin:0 10px;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:all 0.3s ease}#appPreviewOtaku button.project-link:hover{transform:translateY(-2px)}@media (max-width:480px){#appPreviewOtaku .modal-content{width:95%;padding:15px}#appPreviewOtaku .swiper img{max-width:90%}}#playstoreOtaku{opacity:0;visibility:hidden;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgb(0 0 0 / .7);display:flex;justify-content:center;align-items:center;transition:opacity 0.4s ease,visibility 0.4s ease}#playstoreOtaku.active{opacity:1;visibility:visible}#playstoreOtaku .modal-content{background:#fff;padding:25px;border-radius:12px;width:90%;max-width:500px;text-align:center;transform:scale(.95);opacity:0;transition:transform 0.4s ease,opacity 0.4s ease;box-shadow:0 10px 30px rgb(0 0 0 / .2)}#playstoreOtaku.active .modal-content{transform:scale(1);opacity:1}#playstoreOtaku button.project-link{padding:10px 20px;margin:0 10px;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:all 0.3s ease}.otaku-link{background:var(--primary-color);color:var(--white)}.otaku-link:hover{background:#1d4ed8;transform:translateY(-2px)}#cancelOtaku{background:#ccc;color:#333}#cancelOtaku:hover{background:#b3b3b3;transform:translateY(-2px)}#continueOtaku{background:#007bff;color:#fff}#continueOtaku:hover{background:#0056b3;transform:translateY(-2px)}