html,body{scroll-behavior:smooth;font-family:Poppins,sans-serif;padding:0;margin:0;background:linear-gradient(135deg,#010030,#160078 40%,#7226ff)}.profil-container a{text-decoration:none}.icon-a{margin-top:20px;width:clamp(20px,6vw,40px);height:clamp(20px,6vw,40px);-o-object-fit:contain;object-fit:contain;transition:all .3s ease}.icon-a:hover{transform:scale(1.1);filter:drop-shadow(0 5px 5px rgba(0,0,0,.2))}.btn-contact{background:linear-gradient(135deg,#5c66f6,#558ef7);color:#fff;border:none;padding:16px 32px;border-radius:50px;font-size:18px;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;display:flex;align-items:center;gap:12px;box-shadow:0 0 20px #5c73f69d,0 0 40px #5c9ff633,0 0 60px #8b5cf61a;text-decoration:none;border:1px solid rgba(85,101,247,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:50%}.btn-contact:hover{transform:translateY(-2px);box-shadow:0 0 30px #8b5cf699,0 0 60px #8b5cf666,0 0 90px #8b5cf633;background:linear-gradient(135deg,#33b0ea,#8bb3ee)}.btn-contact:active{transform:translateY(0)}.sparkle-icon{font-size:20px;animation:sparkle 2s ease-in-out infinite}@keyframes sparkle{0%,to{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.7;transform:scale(1.1) rotate(180deg)}}.grid-container{display:grid;grid-template-areas:"header header" "content skill" "resume resume" "portofolio portofolio" "contact contact" "footer footer";grid-template-columns:1fr 1fr;-moz-column-gap:20px;column-gap:20px;row-gap:20px;padding:0 20px;margin-bottom:0;margin-right:auto;margin-left:auto;max-width:1400px;width:100%;height:100%;box-sizing:border-box}.footer{grid-area:footer;background-color:#0a086b;padding:20px;color:#fff;text-align:center;justify-content:center;align-items:center;align-content:center;border-radius:10px 10px 0 0;width:100%;height:auto;box-sizing:border-box}.footer .row{flex-direction:row;flex-wrap:wrap}.footer .col{margin:auto}.footer .col:nth-child(1),.footer .col:nth-child(2){border-right:.5px solid rgba(255,255,255,.534)}.footer .col:nth-child(3){border-right:none}.footer p,.footer a{font-size:14px;margin:0}.footer a{text-decoration:none;color:#fff}.contact{grid-area:contact;width:100%;height:auto;padding:20px;background:#200487;box-shadow:0 6px 6px -6px #000;border-radius:20px;color:#fff;text-align:center;justify-content:center;align-items:center;align-content:center;box-sizing:border-box}.form-container{padding:30px 0 0;width:60%;margin:0 auto;text-align:center;color:#fff;box-sizing:border-box}.form-container h4,.form-container p{margin-bottom:30px}.form-container h4{font-size:24px;font-weight:700;color:#ff0}.form-container .row{display:flex;flex-direction:row;flex-wrap:wrap;text-align:start;margin-bottom:30px}.form-container .row:last-child{text-align:end}.form-container .form-control{background-color:#726ee79c;color:#fff}.form-control::-moz-placeholder{color:#fff;opacity:1}.form-control::placeholder{color:#fff;opacity:1}.header-saya{grid-area:header;position:sticky;width:100%;height:60px;top:0;z-index:3;padding:0;margin:0;background:linear-gradient(135deg,#242e68,#2d5a94);text-align:center;box-shadow:0 6px 6px -6px #0009;border-bottom-left-radius:10px;border-bottom-right-radius:10px;box-sizing:border-box}.navbar-saya{display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:10px;border-radius:10px;box-sizing:border-box}.menu-nav{display:flex;gap:1rem;list-style:none;margin:0;padding:0;gap:40px}.menu-nav li a{text-decoration:none;font-size:larger;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;font-weight:600;color:#fff;transition:all .3s ease-in-out}.menu-nav li a:hover{transform:scale(1.1);filter:drop-shadow(0 5px 5px rgba(0,0,0,.2));color:#e5ff87}.menu-nav li a.active{font-weight:bolder;color:#eeff90!important;border-bottom:2px solid #ffed89!important;z-index:1000}main{grid-area:content;padding:50px 0;margin:0;width:100%;height:100%;color:#ff0;border-radius:10px;box-shadow:0 6px 6px -6px #0000001a;box-sizing:border-box}main p,main span{color:#fff}.section-portofolio{grid-area:portofolio;margin:auto;padding:20px auto;width:100%;height:100%;border-radius:10px;box-sizing:border-box}.portofolio-container{display:flex;flex-direction:column;flex-wrap:wrap;width:100%;height:100%;padding:0;color:#fff}.portofolio-content{padding:0;margin:0;box-sizing:border-box}.portofolio-content .row{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;justify-content:center;align-items:center;align-content:center}.portofolio-content .col-8{padding:20px}.portofolio-content .col,.portofolio-content p{font-size:18px;text-align:start;margin:30px auto;align-items:center;align-content:center}.portofolio-content h4{font-size:20px;font-weight:700;line-height:1.4}.portofolio-content .col .btn-contact{width:50%;text-align:center;justify-content:center;align-items:center;align-content:center}.frame-img-portofolio{width:100%;height:450px;overflow:hidden;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.img-portofolio{width:90%;height:80%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;transition:.3s ease-in-out;filter:drop-shadow(0 5px 5px rgba(0,0,0,.5))}.img-portofolio:hover{transform:scale(1.1);filter:drop-shadow(0 5px 5px rgba(126,123,145,.993))}.portofolio-header{text-align:center;padding:20px;margin-bottom:10px}.portofolio-header h4{font-size:24px;font-weight:700;color:#ff0;width:20%;margin:20px auto;padding-bottom:20px;border-bottom:4px solid rgb(95,52,253);box-shadow:0 6px 6px -6px #02197ee6}.portofolio-header p{width:60%;margin:auto;font-size:18px}.portofolio-header h5{width:20%;margin:20px auto;padding-bottom:20px;border-bottom:3px solid black}.section-resume{grid-area:resume;margin:0;padding:0;width:100%;height:100%;border-radius:20px;background:#200487;box-shadow:0 6px 6px -6px #0006;box-sizing:border-box}.resume-container{display:grid;grid-template-areas:"desc desc" "detail detail";grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:0;padding:20px;margin:0;max-width:1400px;width:100%;height:100%;color:#fff;box-sizing:border-box;border-radius:20px;background:#0003}.desc{grid-area:desc;width:100%;height:100px;margin:20px 0;padding:0;border-bottom:1px solid rgb(255,255,255);box-sizing:border-box}.deskripsi-resume{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:0;margin:0;box-sizing:border-box}.deskripsi-resume h4{font-size:24px;font-weight:700;color:#ff0}.detail{grid-area:detail;margin:0;width:100%;height:100%;box-sizing:border-box;overflow:hidden}.detail-container{width:100%;height:100%;margin:0;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:wrap}.row-detail{padding:0;margin:0 10px;display:flex;flex-direction:row;box-sizing:border-box}.row-detail .col-4{border-right:1px solid rgb(255,255,255)}.row-detail:first-child{border-bottom:1px solid rgb(255,255,255);margin-bottom:30px}.resume-item1{margin:0 0 20px;padding:0 0 0 30px;box-sizing:border-box;text-align:start;border-bottom:1px solid white}.resume-item1 h4{font-size:20px;font-weight:700}.resume-item2{margin:auto 20px;padding:0 0 0 10px;box-sizing:border-box;text-align:start}.highlight{background-color:#e6ff03;color:#000;border-radius:10px;padding:2px;font-weight:600;width:47%;text-align:center}.highlight2{background-color:#e6ff03;color:#000;border-radius:10px;padding:2px;font-weight:600;width:80%;text-align:center}h4{font-weight:600;font-size:24px}.resume-item2 h4{font-weight:600;font-size:20px;margin:20px 0}.resume-item1 ul li p,.resume-item2 ul li p{font-family:Poppins,sans-serif;font-size:16px;text-align:start;line-height:30px;height:100%}.skills{grid-area:skill;width:100%;padding:50px 20px;margin:0;display:flex;flex-direction:column;flex-wrap:wrap;border-radius:15px;color:#ff0}.skills-container{padding:20px 0;border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.skills thead,.skills tbody{display:flex;flex-direction:column;text-align:center}.skills tr{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:start;gap:0}.skills p{margin-top:10px;color:#fff;font-size:16px;font-weight:400;font-family:Poppins,sans-serif}.skills th{width:95px;margin:0}.grid-frame{width:320px;height:320px;border-radius:20px;background:linear-gradient(50deg,#1e4ea0,#3e4cc569);padding:0;box-shadow:0 6px 6px -6px #0006;margin:0;display:flex;justify-content:center;align-items:center;overflow:hidden;flex-direction:column;box-sizing:border-box}.frame{width:100%;height:100%;background:linear-gradient(180deg,#9dc4f786,#01094e6e);font-family:Arial,sans-serif;margin:auto;display:flex;justify-content:center;align-items:center;overflow:hidden;flex-direction:column;box-sizing:border-box}.frame .foto{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:20px;-o-object-position:top;object-position:top}.profil-container{padding:10px 0 10px 20px;width:100%;margin-top:10px;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:start;box-sizing:border-box}.profil-container .row{width:800px;margin-right:0}.profil-container .col{margin-right:10px}.profil-container p{font-size:18px;line-height:2;font-family:Poppins,sans-serif;font-weight:400;color:#fff;margin-bottom:30px}.profil-container span{font-size:18px;line-height:1.6;font-family:Poppins,sans-serif;font-weight:600;color:#f0e665;margin-bottom:3px}h1{font-family:Poppins,sans-serif;font-size:30px;font-weight:700;margin-bottom:20px}.icon-text-container{display:flex;flex-direction:row;align-items:center;gap:8px}.icon{width:clamp(20px,6vw,45px);height:clamp(20px,6vw,45px);-o-object-fit:contain;object-fit:contain;transition:all .3s ease}.icon:hover{transform:scale(1.3);filter:drop-shadow(0 5px 5px rgba(0,0,0,.2))}@media (min-width: 1025px) and (max-width: 1208px){.grid-container{grid-template-areas:"header header" "content content" "skill skill" "resume resume" "portofolio portofolio" "contact contact" "footer footer";grid-template-columns:1fr 1fr;justify-items:center}.footer{width:100%}.footer .row{flex-direction:row;flex-wrap:wrap}.footer .col{margin:auto}.footer .col:nth-child(1),.footer .col:nth-child(2){border-right:.5px solid rgba(255,255,255,.534)}.footer .col:nth-child(3){border-right:none}.footer p,.footer a{font-size:14px}main{grid-area:content;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;padding:20px 0 0}.profil-container{width:100%;display:flex;flex-direction:column;align-items:center}.profil-container .row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:40px;width:100%}.profil-container .col{max-width:500px;min-width:320px}.grid-frame{margin:0}.highlight{width:350px}.highlight2{width:270px}.skills{grid-area:skill;width:100%;padding:10px;margin:0 auto 10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.skills-container .row{text-align:center}.skills-container{padding:0 0 20px;width:100%;max-width:900px;margin:0 auto}.skills .table{margin-bottom:0}.skills tr{margin:auto}}@media (max-width: 1024px){.grid-container{grid-template-columns:1fr;grid-template-areas:"header" "content" "skill" "resume" "portofolio" "contact" "footer";gap:15px;padding:0 15px}.form-container{width:70%}.form-container .row{display:flex;flex-direction:row;flex-wrap:wrap;margin-bottom:20px}.footer{width:100%}.footer .row{flex-direction:row;flex-wrap:wrap}.footer .col{margin:auto}.footer .col:nth-child(1),.footer .col:nth-child(2){border-right:.5px solid rgba(255,255,255,.534)}.footer .col:nth-child(3){border-right:none}.footer p,.footer a{font-size:14px}main{padding-bottom:0}.profil-container .row{padding:0 25px;width:100%}.profil-container .col{max-width:500px;height:auto;margin:0;display:flex;flex-direction:column;flex-wrap:wrap;align-items:start}.profil-container p{width:auto}.grid-frame{width:300px;height:300px;margin:20px auto}.frame,.foto{width:100%;height:100%}.btn-contact{width:50%;justify-content:center}.skills{padding-top:0;padding-bottom:10px}.skills-container{text-align:center;padding:0}.skills-container .row h1{justify-content:center;align-items:center;text-align:center;align-content:center}.skills tr{flex-wrap:wrap;gap:0;justify-content:center;margin:auto}.icon{width:clamp(40px,8vw,45px);height:clamp(40px,8vw,45px)}.deskripsi-resume{width:70%;margin:0 auto;align-items:center;text-align:center}.row-detail{display:flex;flex-direction:column;flex-wrap:wrap}.row-detail .col-4{border-bottom:1px solid white;margin-bottom:20px}.row-detail .col-4,.row-detail .col-8{width:100%;border-right:0}.highlight{width:60%}.highlight2{width:50%}.portofolio-content .row{flex-direction:column;padding:0 30px}.portofolio-content .col-8,.portofolio-content .col{padding:0;width:100%;margin-bottom:20px}.portofolio-content .col .btn-contact{width:100%;max-width:200px;margin:20px auto;padding:14px 10px;font-size:16px;justify-content:center}.portofolio-content p{padding:20px 20px 10px;font-size:16px}.portofolio-content h4{padding:0 20px;font-size:20px}.frame-img-portofolio{height:400px;width:100%;margin-bottom:20px}}@media (min-width: 769px) and (max-width: 920px){.grid-container{grid-template-areas:"header header" "content content" "skill skill" "resume resume" "portofolio portofolio" "contact contact" "footer footer";grid-template-columns:1fr 1fr;justify-items:center}.form-container{width:70%}.form-container .row{display:flex;flex-direction:row;flex-wrap:wrap;margin-bottom:20px}.footer{width:100%}.footer .row{flex-direction:row}.footer .col{margin:auto}.footer .col:nth-child(1),.footer .col:nth-child(2){border-right:.5px solid rgba(255,255,255,.534)}.footer .col:nth-child(3){border-right:none}.footer p,.footer a{font-size:14px}main{grid-area:content;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center}.profil-container{width:100%;display:flex;flex-direction:column;align-items:center}.profil-container .row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;margin:0}.profil-container .col{max-width:450px;min-width:200px;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:start;margin:0;padding:0}.profil-container h1{font-size:26px}.profil-container p{width:auto;margin-bottom:10px}.btn-contact{margin-top:20px;width:210px}.grid-frame{width:250px;height:250px;margin:0}.skills{grid-area:skill;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 10px}.skills-container{width:100%;max-width:600px;margin:0 auto}.skills-container .row{text-align:center}.skills-container tr{margin:0;gap:0}.icon{width:clamp(40px,8vw,40px);height:clamp(40px,8vw,40px)}}@media (max-width: 768px){*{outline:none!important}.grid-container{grid-template-columns:1fr;padding:0 20px;gap:20px}.form-container{width:80%}.form-container .row{display:flex;flex-direction:row;flex-wrap:wrap;margin-bottom:20px}.header-saya{height:auto;min-height:50px;padding:0 20px}.footer{width:100%}.footer .row{flex-direction:row;flex-wrap:wrap}.footer .col{margin:auto}.footer .col:nth-child(1),.footer .col:nth-child(2){border-right:.5px solid rgba(255,255,255,.534)}.footer .col:nth-child(3){border-right:none}.footer p,.footer a{font-size:13px}.menu-nav{flex-wrap:wrap;gap:15px;justify-content:center}.menu-nav li a{font-size:14px;padding:8px 12px}main{padding:20px 0}h1{font-size:24px;text-align:center}.profil-container{padding-bottom:0}.profil-container .row{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center}.profil-container .col{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:center}.profil-container p{font-size:16px;text-align:center}.profil-container span{font-size:16px}.grid-frame{width:250px;height:250px;margin:0 auto 20px;order:-1}.btn-contact{width:45%;margin:20px auto;padding:14px 24px;font-size:16px;justify-content:center}.icon-a{width:35px;height:35px;margin:10px 5px}.skills{padding:0 10px;align-items:center}.skills-container{max-width:600px;padding:0}.skills tr{flex-direction:row;gap:0;align-items:center}.skills th{display:flex;flex-direction:column;align-items:center;margin-bottom:0;padding:10px 0;width:90px}.icon{width:45px;height:45px;margin-bottom:8px}.skills p{font-size:14px;margin:0}.section-resume{height:auto;min-height:500px}.resume-container{grid-template-areas:"desc" "detail";grid-template-columns:1fr;padding:15px}.desc{width:100%;height:auto;min-height:80px;margin-bottom:0;text-align:center}.detail-container{flex-direction:column;padding:10px}.row-detail{flex-direction:column;margin:0;padding:15px}.row-detail .col-4,.row-detail .col{border-right:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:0;margin-top:10px;width:100%}.resume-item1,.resume-item2{margin:0;padding:10px 0}.resume-item2 h4{font-size:18px}.highlight,.highlight2{width:auto;display:inline-block;padding:4px 8px;font-size:14px}.section-portofolio{width:100%;margin:0 auto}.portofolio-header{padding-bottom:0;margin-bottom:0}.portofolio-header h4{width:50%;font-size:20px}.portofolio-header p{width:90%;font-size:16px}.frame-img-portofolio{height:100%;width:100%;margin-bottom:30px}.img-portofolio{width:100%;height:100%}.portofolio-content .row{flex-direction:column}.portofolio-content .col-8,.portofolio-content .col{padding:0 30px;width:100%;margin:0}.portofolio-content p{padding:20px 20px 10px;font-size:16px;margin-top:0}.portofolio-content h4{padding:0 20px;font-size:20px}}@media (max-width: 576px){*{outline:none!important}html,body{font-size:14px;padding:0;margin:0;background:linear-gradient(135deg,#010030,#160078 40%,#7226ff)}.grid-container{width:100%!important;max-width:100%;padding:0 8px;gap:12px;grid-template-columns:1fr;grid-template-areas:"header" "content" "skill" "resume" "portofolio" "contact" "footer"}.contact{width:90%;margin:0 auto}.contact h4{font-size:16px;margin-bottom:10px}.contact p{font-size:12px}.form-container{width:85%}.form-container label,.form-container input{font-size:12px}.form-container .row{display:flex;flex-direction:column;flex-wrap:wrap;margin-bottom:20px}.form-container .col:nth-child(2){margin-top:20px}.header-saya{height:auto;min-height:48px;padding:0 8px;border-radius:0 0 10px 10px;font-size:15px}.footer{width:100%}.footer .row{flex-direction:column}.footer .col{margin:auto}.footer .col:nth-child(1),.footer .col:nth-child(2){border-bottom:.5px solid rgba(255,255,255,.534);border-right:none}.footer .col:nth-child(3){border-bottom:none}.footer p,.footer a{font-size:12px}.navbar-saya{padding:0}.menu-nav{flex-direction:column;gap:6px;justify-content:center;align-items:center}.menu-nav li a{font-size:13px;padding:6px 10px}main{width:90%;padding:12px 0 0;margin:0 auto;border-radius:0;box-shadow:none}h1{font-size:20px;margin-bottom:10px;text-align:center}.profil-container{padding:8px 0;margin-bottom:10px;align-items:center;width:100%}.profil-container .row{flex-direction:column;align-items:center;gap:10px;margin:0;width:100%}.profil-container .col{width:100%;max-width:100%;margin:0;padding:0 4px;align-items:center;text-align:center}.profil-container p{font-size:13px;line-height:1.5;margin-bottom:10px;width:100%;text-align:center}.profil-container span{font-size:13px;color:#f0e665}.grid-frame{width:140px;height:140px;margin:0 auto 10px;border-radius:12px}.frame,.frame .foto{border-radius:12px}.btn-contact{width:90%;min-width:120px;max-width:220px;padding:10px 0;font-size:13px;margin:10px auto;justify-content:center;align-items:center;border-radius:30px}.sparkle-icon{font-size:15px}.icon-a-container{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:8px}.icon-a{width:28px;height:28px;margin:0 2px}.skills{width:90%;padding:8px 2px;margin:0 auto;border-radius:10px;align-items:center}.skills-container{padding:0;border-radius:8px;width:90%;max-width:100%;margin:0 auto}.skills-container .row h1{font-size:16px;margin-bottom:25px;text-align:center}.skills tr{flex-wrap:wrap;gap:5px;justify-content:center;align-items:center;margin:auto}.skills th{width:54px;height:54px;display:flex;flex-direction:column;align-items:center;margin-bottom:0;padding:0}.icon{width:32px;height:32px;margin-bottom:4px}.skills p{font-size:11px;margin:0}.section-resume{width:90%;height:auto;min-height:300px;border-radius:10px;box-shadow:none;margin:0 auto;padding:0}.resume-container{grid-template-areas:"desc" "detail";grid-template-columns:1fr;padding:20px;border-radius:10px}.desc{width:100%;height:auto;min-height:60px;margin-bottom:0;text-align:center;border-bottom:1px solid #fff2;padding:0 0 6px}.desc h4{font-size:15px;margin-bottom:4px}.desc p{font-size:12px;margin:0}.detail-container{flex-direction:column;padding:0;gap:0}.row-detail{flex-direction:column;margin:0;padding:0;gap:0}.row-detail .col-4,.row-detail .col{width:100%;border:none;padding:0;margin:0 0 10px}.resume-item1,.resume-item2{margin:0;padding:6px 0}.resume-item1 h4,.resume-item2 h4{font-size:13px;margin:0 0 4px}.resume-item1 p,.resume-item2 p,.resume-item2 ul li p{font-size:12px;line-height:1.4;margin:0}.highlight,.highlight2{font-size:11px;padding:2px 6px;border-radius:6px;width:auto;display:inline-block;margin:2px 0}.portofolio-container{width:90%;margin:0 auto}.portofolio-header{padding:8px 0;margin-bottom:4px}.portofolio-header h4{width:90%;font-size:15px;margin:10px auto 4px;padding-bottom:6px;border-bottom-width:2px}.portofolio-header p{width:98%;font-size:12px;margin:0 auto 6px}.frame-img-portofolio{min-height:180px;max-height:180px;width:100%;margin-bottom:10px;border-radius:10px}.img-portofolio{width:100%;height:100%;border-radius:10px;-o-object-fit:cover;object-fit:cover}.portofolio-content{padding:0 15px}.portofolio-content .row{flex-direction:column;gap:0;padding:0}.portofolio-content .col-8,.portofolio-content .col{padding:0 2px;width:100%;margin-bottom:10px;text-align:center}.portofolio-content .col h4{font-size:13px;margin:0 0 4px}.portofolio-content .col p{font-size:11px;margin:0 0 6px;text-align:center}.portofolio-content .col .btn-contact{width:90%;max-width:160px;margin:8px auto;padding:8px 0;font-size:12px;justify-content:center}}