:root{--primary:#151515;--second:#04a8fa}*{box-sizing:border-box;max-width:100vw;margin:0;padding:0;font-family:Outfit}html{scroll-behavior:smooth}body{width:100%;height:100vh;overflow-x:hidden}.chat-popup{opacity:0;visibility:hidden;z-index:999;background:#fff;border-radius:20px;flex-direction:column;width:350px;height:500px;transition:all .3s;display:flex;position:fixed;bottom:90px;right:50px;overflow:hidden;transform:translateY(20px);box-shadow:0 10px 35px #00000040}.chat-popup.active{opacity:1;visibility:visible;transform:translateY(0)}.chat-header{background:var(--second);color:#fff;padding:18px}.titik:after{content:".";animation:2s infinite titik}@keyframes titik{0%{content:"."}30%{content:".."}60%{content:"..."}to{content:"...."}}.profile{align-items:center;gap:12px;display:flex}.avatar{width:45px;height:45px;color:var(--second);background:#fff;border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:flex}.avatar img{width:70%}.profile h3{font-size:18px}.profile span{opacity:.8;font-size:13px}.chat-body{background:#f8fafc;flex-direction:column;flex:1;gap:15px;padding:20px;display:flex;overflow-y:auto}.message{border-radius:15px;max-width:75%;padding:12px 15px;font-size:14px}.admin{background:#fff;align-self:flex-start;box-shadow:0 2px 10px #00000014}.user{background:var(--second);color:#fff;align-self:flex-end}.chat-footer{background:#fff;border-top:1px solid #e2e8f0;gap:10px;padding:15px;display:flex}.chat-footer input{background:#f1f5f9;border:none;border-radius:10px;outline:none;flex:1;padding:12px}.chat-footer button{background:var(--second);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:12px 18px;transition:all .3s}.chat-footer button:hover{background:#1d4ed8}.logout-box{z-index:999;background:#00000080;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.logout-card{text-align:center;background:#fff;border-radius:15px;width:350px;padding:25px}.btn-group{gap:10px;margin-top:20px;display:flex}.btn-group button{cursor:pointer;border:none;border-radius:8px;flex:1;padding:10px}.batal{background:#ddd}.keluar{color:#fff;background:#dc143c}.chat-button{color:#fff;cursor:pointer;z-index:999;background:#00a8ff;border:none;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:28px;transition:all .3s;display:flex;position:fixed;bottom:25px;right:25px;box-shadow:0 5px 15px #0000004d}.chat-button:hover{background:#0097e6;transform:scale(1.1)}.notif{color:#fff;z-index:20;background-color:#019be8;border-radius:4px;width:20%;margin-top:5rem;padding:10px;font-size:1.2rem;font-weight:500;transition:all .3s ease-out;position:fixed;left:0}.notif p{padding-left:.7rem}.notifi{display:flex}.notif span{padding-left:.7rem;font-size:1.3rem;font-weight:700}.notif h4:hover{cursor:pointer;color:#fff}.navbar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0px 0px 10px var(--second);color:#fff;z-index:1000;background-color:#0000;border-radius:100px;justify-content:space-between;align-items:center;width:80%;margin-top:1%;margin-left:10%;padding:.5rem 2rem;font-family:"";display:flex;position:fixed;top:0;left:0}.navbar .logo{font-family:Outfit;font-size:2rem;font-weight:700}.nav-hp{align-items:center;display:none}.logo span{color:var(--second);text-shadow:0 0 5px;margin-right:30px;font-family:outfit}.navbar .menu ul{flex-direction:row;display:flex}.navbar .menu li{list-style:none}.navbar .menu a{text-align:center;color:#fff;justify-content:center;margin:8px;font-family:poppins;font-size:1.3rem;font-weight:600;text-decoration-line:none;transition:all .3s;position:relative}.navbar button{border:3px solid var(--second);cursor:pointer;background-color:var(--second);color:#fff;border-radius:5px;margin:5px;padding:5px;font-size:1rem;font-weight:600}.navbar .t-daftar{border:3px solid var(--second);color:var(--second);background-color:#0000;transition:all .5s ease-in-out}.navbar .t-daftar:hover{background-color:var(--second);color:#fff}.navbar .lognhp{justify-content:right;margin:0}#daftar{background-color:#0000}.navbar .menu a:hover{color:var(--second);text-shadow:0 0 5px}.navbar .menu a:after{content:"";background-color:var(--second);align-items:center;width:0;height:2px;transition:width .5s;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.navbar .menu a:hover:after{width:50%}.navbar ion-icon{font-size:2rem}@keyframes garis{0%{width:0}to{width:100%}}.garis{z-index:99;background-color:#019be8;border-radius:80px;height:10px;margin-top:4%;margin-left:-1%;position:fixed;box-shadow:0 0 20px #001aff}.confirm{color:#fff;text-align:center;z-index:40;cursor:default;background-color:#151515;border-radius:7px;width:15rem;padding:1.5rem;font-size:2rem;font-weight:500;transition:all .3s;position:fixed;top:50%;left:-50%;transform:translate(-50%,-50%)}.confirm.aktif{left:50%}.confirm button{background-color:var(--second);text-align:center;color:#fff;cursor:pointer;border:none;border-radius:4px;width:4rem;margin:.4rem;padding:.4rem;font-size:1.3rem;font-weight:600;transition:all .3s}.confirm button:hover{box-shadow:0 0 20px #001aff}.confirm .no{border:var(--second) 2px solid;color:var(--second);background-color:#0000}.login,.register{z-index:30;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#000;opacity:0;pointer-events:none;background-color:#fff;border-radius:20px;width:20rem;margin-top:-5%;padding:3rem;font-size:2rem;transition:all .5s;position:fixed;top:50%;left:50%}.login h3,.register h3{text-align:center}.login{transform:translate(-400%,-50%)}.register{transform:translate(400%,-50%)}.login ion-icon,.register ion-icon{z-index:2;cursor:pointer;margin-left:-10%;font-size:1rem}.register.aktif,.login.aktif{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}.login input,.register input{background:0 0;border:none;border-bottom:1px solid #000;border-radius:0;outline:none;width:90%;padding:6px 10px;font-size:1rem}.login .centang,.register .centang{text-align:left;margin-top:7px;margin-left:14px}.login p{font-size:.7rem}.login .centang span{color:#001aff;cursor:pointer}.centang .to:hover{cursor:pointer}.register p{margin-left:8px;font-size:.7rem}.register .centang span{color:#001aff;cursor:pointer}.login button,.register button{background-color:var(--second);color:#fff;cursor:pointer;border:none;border-radius:10px;width:90%;padding:5px;font-size:1rem;font-weight:400;transition:all .2s ease-in}.login button:hover,.register button:hover{background-color:#019be8}.close-btn{color:#000;cursor:pointer;z-index:1000;border-radius:10%;padding:8px;font-size:1.5rem;font-weight:600;transition:color .2s ease-in;position:absolute;top:10px;right:15px}.close-btn:hover{color:var(--second)}.home-about{background-image:url(/build/assets/balck%20and%20white-BYkHF2Bh.webp);background-attachment:fixed;width:100%}.home{display:block}.home .foto{height:100vh;position:relative;overflow:hidden}.poto1{z-index:1}.poto2{z-index:4;transition:all .1s linear}.foto img{object-fit:cover;width:100%;position:absolute}.home h1{z-index:3;color:#fff;font-family:Bebas Neue;font-size:9rem;transition:all .1s linear;position:absolute;top:25%;left:16%}.homehp{color:#fff;justify-content:center;height:100vh;margin-top:-10%;padding-top:20%;padding-bottom:25%;padding-left:20%;animation:5s linear scroll;animation-timeline:view();animation-range:entry;display:none}.homehp h1 span{color:#74cffc;transition:text-shadow .7s}.homehp h1 span:hover{text-shadow:0 0 10px #74cffc;cursor:pointer}.homehp img{float:right;width:25%;height:auto;box-shadow:var(--second) 0px 0px 30px;border-radius:50%;margin-right:20%;transition:box-shadow .5s;display:block}.homehp img:hover{box-shadow:var(--second) 0px 0px 75px;cursor:pointer}.homehp .media a{color:var(--second);box-shadow:0px;transition:box-shadow 0,5s ease;margin:5px}.homehp .media a:hover{box-shadow:var(--second) 0px 0px 75px}.homehp button{background-color:var(--second);border:none;border-radius:10px;transition:box-shadow .7s}.homehp button a{color:#fff;margin:15px 10px 10px;font-family:poppins;font-size:20px;font-weight:600;text-decoration:none}.homehp button:hover{box-shadow:var(--second) 0px 0px 20px}.homehp ion-icon{border:2px var(--second);font-size:2rem}.about{color:#fff;background-color:#151515;margin-top:-3%;padding-top:5%;padding-bottom:10%;padding-left:20%}.about span{color:var(--second)}.about p{width:45%;font-size:1.1rem;display:flex}.about img{float:left;width:25%;box-shadow:var(--second) 0px 0px 30px;border-radius:50%;margin-top:0%;margin-right:10%;transition:box-shadow 1s}.about img:hover{box-shadow:var(--second) 0px 0px 75px;cursor:pointer}.about .sosial{margin-top:2%;margin-left:35%}.about .sosial a{text-align:center;color:#fff;background-color:#2e2e2e;border-radius:5px;gap:6px;margin-top:1%;padding:7px;font-size:100%;text-decoration:none;display:inline-flex}.about .sosial iconify-icon{font-size:20px}.skil{text-align:center;color:#fff;background-color:#151515;justify-content:center;align-items:center;padding-bottom:10%}.skil p{font-size:1rem}.skil img{border-radius:20px;width:10%;margin:3%;transition:all .5s}.skil img:hover{cursor:pointer;box-shadow:0 0 70px #001aff}.kartu{justify-content:center}.pr-kntk{background-image:url(/build/assets/wallpaper-9YKRqorw.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;width:100%}.projek{color:#fff;text-align:center;padding-top:10%}.projek h1{text-align:center;position:relative}.kartu{z-index:1;grid-template-columns:repeat(3,1fr);place-items:stretch stretch;gap:2rem;padding:0 5%;display:grid;position:relative}.card{background-color:#151515;border-radius:15px;flex-direction:column;width:100%;height:auto;display:flex;overflow:hidden}.card img{width:100%}.card .tulisan{text-align:left;flex-direction:column;flex:1;justify-content:space-between;padding:50px 20px;display:flex}.card .bahasa{flex-wrap:wrap;gap:12px;margin:15px 0;display:flex}.card .tech{background:#1f1f1f;border:1px solid #2c2c2c;border-radius:10px;align-items:center;gap:4px;padding:8px;transition:all .3s;display:flex}.card .tech:hover{border-color:#38bdf8;transform:translateY(-3px);box-shadow:0 5px 15px #38bdf84d}.card .tech i{font-size:1.3rem}.card .tech span{color:#fff;font-size:.7rem;font-weight:500}.card a{background-color:var(--second);color:#fff;border-radius:40000px;justify-content:center;align-items:center;gap:5px;width:100%;margin-top:25px;padding:15px;font-weight:600;text-decoration:none;transition:all .3s;display:flex}.card a iconify-icon{font-size:1.3rem;font-weight:600}.card a:hover{background-color:#038cd1}.P{flex-wrap:wrap;justify-content:center;gap:10rem;display:flex}.kontak{background-color:#151515;border-radius:1rem;justify-content:center;align-items:center;width:90%;margin-top:10%;margin-left:0%;padding-bottom:10%;transition:all .3s;position:relative;left:0}.kontak:hover{box-shadow:var(--second) 0px 0px 20px}.kontak .form{width:100vh}.kontak h1{text-align:center;color:#fff}.kontak span{color:var(--second)}.form input{color:#fff;background-color:#0000;border-style:none none solid;border-bottom-width:medium;border-bottom-color:#040404;width:50vh;margin:1.5%;font-size:1rem}.form span textarea{resize:none;color:#fff;background-color:#0000;border-style:none none solid;border-bottom-width:medium;border-bottom-color:#040404;width:50vh;margin:1.5%;padding-bottom:100px;font-size:1rem}.kontak button{color:#151515;background-color:#74cffc;border:none;border-radius:4px;width:50%;margin-top:5%;padding:10px;font-size:1rem;font-weight:600;transition:box-shadow .5s}.kontak button:hover{cursor:pointer;box-shadow:var(--second) 0px 0px 20px}.kontak .form p{margin-left:2%}footer{color:#fff;text-align:center;background:0 0;padding:20px}.social-icons a{color:#fff;width:2rem;margin:0 10px;transition:all .3s}.footer marquee{width:100%}.footer span{font-style:italic}@keyframes scroll{0%{opacity:0;scale:.4}to{opacity:1;scale:1}}@keyframes kontak{0%{left:-50%}to{left:0%}}@keyframes kiri{0%{opacity:0;transform:translate(-200%)}to{opacity:1;transform:translate(0%)}}@keyframes kanan{0%{opacity:0;transform:translate(200%)}to{opacity:1;transform:translate(0%)}}@media only screen and (width<=1900px){.garis{margin-top:5%}}@media screen and (width<=1300px){.home h1{font-size:6rem}.about{margin-top:-5%}}@media only screen and (width<=1200px){.home{display:none}.homehp{display:block}.navbar{width:90%;margin-left:5%}.garis{margin-top:7%}.home{padding-left:10%}.about p{width:80%}.about .sosial{margin-left:0%}.about .sosial a{margin-left:1%}.kartu{grid-template-columns:35% 35%}}@media only screen and (width<=900px){body{font-size:50%}.navbar .logo{font-size:1.4rem}.navbar .menu{background-color:#151515;width:15rem;height:100vh;font-size:.8rem;transition:all .3s;position:absolute;top:100%;right:-1000%}.navbar .menu ul{display:block}.navbar .menu.active{margin-right:-50px;right:0}.navbar .menu a{text-align:left;color:#fff;margin:1rem;padding:.5rem;display:block}.navbar .menu a:after{transform:scaleX(0)}.navbar .menu button,.navbar .daftar{display:none}.notif{width:60vh}.nav-hp{color:#fff;cursor:pointer;display:flex}.garis{margin-top:9%}.homehp{flex-direction:column;height:100vh;font-size:1rem;display:flex}.homehp img{width:50%}.about{display:grid}.about .sosial a{font-size:200%}.about img{width:50%}.skil img{width:20%}.skil p{font-size:.6rem}.kartu{grid-template-columns:40% 40%}.card,.projek{font-size:.8rem}.kontak .form{width:80%}.kontak .form input,.kontak span textarea{width:90%}.kontak h1{margin-left:11%}footer{background-color:#0000;margin-top:10%}}@media only screen and (width<=750px){.kartu{grid-template-columns:80%}.card{height:auto}}@media only screen and (width<=600px){.navbar .menu a{font-size:.9rem}.navbar .logo{font-size:1.4rem}.navbar .menu{background-color:#151515;width:15rem;height:100vh;font-size:.8rem;transition:all .3s;position:absolute;top:100%;right:-1000%}.navbar .menu.active{right:0}.navbar .menu a{color:#fff;margin:1rem;padding:.5rem;display:block}.navbar .menu a:after{transform:scaleX(0)}#menu{color:#fff;cursor:pointer;display:inline-block}.garis{margin-top:14%}.homehp h1{font-size:1.5rem}.homehp button a{font-size:1rem}.about p{font-size:.9rem}.form input,.form textarea{width:90%}.kontak{width:95%;margin-top:5%;margin-left:0%}}