.navbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#0000004d;border:1px solid #bdbdce33;border-radius:10px;height:80px;transition:all .4s cubic-bezier(.16,1,.3,1);position:fixed;top:2%;left:2%;right:2%;box-shadow:0 10px 30px #0006}nav{justify-content:space-between;align-items:center;height:100%;padding:0 5%;display:flex;position:relative}.logo{color:#fff;letter-spacing:1px;cursor:pointer;font-family:Poppins,sans-serif;font-size:2em;font-weight:600;transition:all .3s}.logo:hover{text-shadow:0 0 15px #fff9;transform:scale(1.02)}.checkbtn{background:0 0;border:none;transition:transform .3s cubic-bezier(.16,1,.3,1);display:none}.checkbtn:hover{transform:scale(1.1)}.checkbtn:active{transform:scale(.9)}.desktop-menu{margin:0;font-family:Poppins,sans-serif;list-style:none;display:flex}.desktop-menu li{margin:0 15px}.desktop-menu li a,.mobile-menu li a{color:#c2bcbc;padding:7px 13px;font-size:17px;text-decoration:none;transition:all .3s;position:relative}.desktop-menu li a:hover,.mobile-menu li a:hover,.desktop-menu a.active,.mobile-menu a.active{color:#fff;text-shadow:0 0 10px #ffffff80}.desktop-menu a:after,.mobile-menu a:after{content:"";transform-origin:50%;background-color:var(--s-third-color,#fff);border-radius:50px;width:30px;height:3px;transition:transform .4s cubic-bezier(.16,1,.3,1);position:absolute;bottom:-2px;left:50%;transform:translate(-50%)scaleX(0);box-shadow:0 0 8px #fff9}.desktop-menu a:hover:after,.mobile-menu a:hover:after,.desktop-menu a.active:after,.mobile-menu a.active:after{transform:translate(-50%)scaleX(1)}.mobile-menu{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:49;opacity:0;pointer-events:none;background:#0000004d;border:1px solid #bdbdce33;border-radius:15px;flex-direction:column;align-items:center;width:50%;transition:all .6s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;top:105px;left:2%;transform:translate(-120%)skew(5deg);box-shadow:0 20px 40px #00000080}.mobile-menu.open{opacity:1;pointer-events:auto;transform:translate(0)skew(0)}.mobile-menu ul{flex-direction:column;align-items:center;width:100%;padding:20px 0;list-style:none;display:flex}.mobile-menu ul li{margin:15px 0;line-height:30px}.mobile-menu ul li a{font-size:18px;font-weight:500}@media (max-width:960px){.desktop-menu{display:none}.checkbtn{cursor:pointer;display:block;position:absolute}nav{justify-content:flex-start}.logo{margin-left:60px}}@media (max-width:620px){.logo{font-size:1.5em}.mobile-menu{width:96%}}
.proker-container{grid-template-rows:repeat(2,225px);grid-template-columns:2fr 1fr 1fr;gap:1.2rem;display:grid}.proker-box{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;background-color:#1a1a1a66;border:1px solid #ffffff1a;border-radius:15px;width:100%;height:100%;transition:all 1s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;box-shadow:0 10px 20px #0003}.proker-img{object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}.proker-box:hover{border-color:#60a5fa80;transform:translateY(-8px);box-shadow:0 15px 30px #0006,0 0 20px #60a5fa33}.proker-box:hover .proker-img{transform:scale(1.08)}.proker-div1{grid-area:1/1/3/2}.proker-overlay-latest{background:linear-gradient(#0000 0%,#0f172a4d 50%,#0f172af2 100%);align-items:flex-end;padding:25px;display:flex;position:absolute;inset:0}.explore-box{color:#304356;text-align:center;cursor:pointer;background:#3043561a;border:2px dashed #60a5fa66;border-radius:15px;flex-direction:column;grid-area:2/3/3/4;justify-content:center;align-items:center;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.blur-bg{filter:blur(15px);opacity:.8;transition:opacity .4s;transform:scale(1.2)}.explore-content{z-index:10;flex-direction:column;align-items:center;gap:10px;display:flex;position:relative}.explore-icon{transition:all .3s cubic-bezier(.4,0,.2,1);transform:rotate(-10deg)}.explore-text{font-size:1.2rem;font-weight:600;transition:all .3s}.explore-box:hover .explore-icon{transform:scale(1.1)rotate(25deg)}.explore-box:hover .explore-text{transform:translateY(5px)}.explore-box:hover{background:#3043564d;border-color:#60a5facc;box-shadow:0 10px 25px #60a5fa33}.explore-box:hover .blur-bg{opacity:.3}.modal-overlay{z-index:1000;justify-content:center;align-items:center;padding:20px;animation:.4s cubic-bezier(.16,1,.3,1) fadeIn;display:flex;position:fixed;inset:0}.modal-backdrop{background:#000000b3;position:absolute;inset:0}.modal-card{background:#18191bf2;border:1px solid #ffffff1a;border-radius:25px;width:100%;max-width:800px;max-height:90vh;animation:.5s cubic-bezier(.16,1,.3,1) popUp;position:relative;overflow-y:auto;box-shadow:0 30px 60px #0009}.modal-close{z-index:50;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:45px;height:45px;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:20px;right:20px}.modal-close:hover{background:#ef4444;border-color:#ef4444;transform:rotate(90deg)scale(1.1)}.modal-banner{width:100%;height:350px;position:relative}.modal-gradient-overlay{background:linear-gradient(#0000 30%,#18191bf2);position:absolute;inset:0}.modal-body{z-index:5;margin-top:-80px;padding:0 45px 45px;position:relative}.modal-title{color:#fff;margin-bottom:25px;font-size:2.2rem;font-weight:800;line-height:1.2}.markdown-content{color:#cbd5e1;font-size:1.05rem;line-height:1.8}.markdown-content h1,.markdown-content h2,.markdown-content h3{color:#fff;margin:2rem 0 1rem;font-weight:700}.markdown-content p{margin-bottom:1.2rem}.markdown-content img{border:1px solid #ffffff0d;border-radius:15px;max-width:100%;margin:2rem 0;box-shadow:0 10px 25px #0000004d}.markdown-content blockquote{color:#94a3b8;background:#60a5fa0d;border-left:4px solid #60a5fa;border-radius:0 10px 10px 0;margin:2rem 0;padding:1rem 1.5rem;font-style:italic}.modal-video-container{border-top:1px solid #ffffff1a;margin-top:40px;padding-top:30px}.video-wrapper{border:1px solid #ffffff1a;border-radius:15px;width:100%;height:0;padding-bottom:56.25%;position:relative;overflow:hidden;box-shadow:0 15px 35px #0006}.video-wrapper iframe{border:none;width:100%;height:100%;position:absolute;inset:0}.custom-scroll::-webkit-scrollbar{width:6px}.custom-scroll::-webkit-scrollbar-track{background:0 0}.custom-scroll::-webkit-scrollbar-thumb{background-color:#60a5fa4d;border-radius:20px}.custom-scroll::-webkit-scrollbar-thumb:hover{background-color:#60a5fa99}.markdown-content ul{margin-bottom:1rem;padding-left:1.5rem;list-style-type:disc}.markdown-content ol{margin-bottom:1rem;padding-left:1.5rem;list-style-type:decimal}.markdown-content li{margin-bottom:.25rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popUp{0%{opacity:0;transform:translateY(40px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@media (max-width:1024px){.proker-container{grid-template-rows:repeat(3,200px);grid-template-columns:1fr 1fr}.proker-div1{grid-area:1/1/2/3}.explore-box{grid-area:3/2/4/3}}@media (max-width:768px){.proker-container{grid-template-rows:auto;grid-template-columns:1fr}.proker-div1{grid-area:auto;height:280px}.proker-box,.explore-box{grid-area:auto;height:200px}.modal-card{border-radius:20px}.modal-banner{height:250px}.modal-body{margin-top:-50px;padding:0 25px 25px}.modal-title{font-size:1.6rem}}
.cabinet-section{padding:60px 0;overflow:hidden}.section-title{text-align:center;letter-spacing:.5px;text-transform:uppercase;text-shadow:2px 2px 10px #3043561a;margin:0 5vw 2.5rem;font-size:2.2rem;font-weight:800;color:#304356!important}.cabinet-scroll-container{scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;flex-direction:row;gap:25px;padding:20px 5% 40px;scroll-padding-inline:5%;display:flex;overflow:auto hidden}.cabinet-scroll-container::-webkit-scrollbar{height:6px;display:block}.cabinet-scroll-container::-webkit-scrollbar-track{background:#ffffff08;border-radius:10px;margin:0 5%}.cabinet-scroll-container::-webkit-scrollbar-thumb{background:#47556966 padding-box padding-box;border:1px solid #0000;border-radius:10px;transition:all .3s}.cabinet-scroll-container::-webkit-scrollbar-thumb:hover{background:#475569cc}.cabinet-scroll-container{scrollbar-width:thin;scrollbar-color:#47556966 transparent}.cabinet-card{aspect-ratio:16/9;cursor:pointer;scroll-snap-align:start;border:1px solid #fff3;border-radius:15px;flex-shrink:0;width:30%;min-width:360px;height:auto;transition:all .5s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;box-shadow:0 10px 20px #0003}.cabinet-bg-img{object-fit:cover;z-index:1;transition:transform .6s cubic-bezier(.16,1,.3,1)}.cabinet-overlay{z-index:2;background:linear-gradient(#0000 0%,#0f172a80 60%,#0f172af2 100%);justify-content:center;align-items:flex-end;padding:30px 20px 25px;transition:all .4s;display:flex;position:absolute;inset:0}.ministry-tag{-webkit-backdrop-filter:none;backdrop-filter:none;color:#e1e1e1;text-align:center;letter-spacing:.5px;text-shadow:0 4px 10px #000c;background:0 0;border:none;width:100%;font-size:1.15rem;font-weight:600;transition:transform .4s cubic-bezier(.16,1,.3,1)}.cabinet-card:hover .cabinet-overlay{background:linear-gradient(#0000 0%,#0f172ab3 50%,#0f172a 100%)}.cabinet-card:hover .ministry-tag{transform:translateY(-5px)}.cabinet-card:hover .cabinet-bg-img{transform:scale(1.1)}.modal-banner{width:100%;height:350px;position:relative}.banner-gradient{z-index:2;pointer-events:none;background:linear-gradient(#0000 0%,#18191b99 70%,#18191b 100%);position:absolute;inset:0}.modal-title{color:#fff;text-shadow:0 0 10px #fff3;margin-bottom:5px;font-size:2rem;font-weight:800}.modal-desc{color:#cbd5e1;margin-bottom:30px;font-size:1rem;line-height:1.7}.member-heading{color:#fff;border-left:4px solid #60a5fa;margin-bottom:25px;padding-left:15px;font-size:1.3rem;font-weight:600}.members-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px;display:grid}.member-card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;background:#ffffff08;border:1px solid #ffffff14;border-radius:15px;max-width:200px;padding:10px;transition:all .4s cubic-bezier(.16,1,.3,1)}.member-card:hover{background:#ffffff14;transform:translateY(-5px);box-shadow:0 10px 20px #0000004d}.member-photo-wrapper{aspect-ratio:1;background-origin:border-box;background-clip:content-box,border-box;border:3px solid #0000;border-radius:10px;width:100%;margin:0 auto 15px;transition:all .5s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.member-card:hover .member-photo-wrapper{transform:scale(1.05)}.member-photo{object-fit:cover;border-radius:10px}.member-name{color:#fff;margin-bottom:4px;font-size:.9rem;font-weight:700}.member-role{color:#e1e1e1;text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:500}.biodata-content{flex-direction:row;gap:2rem;margin:2rem;display:flex}.biodata-details{flex-direction:column;flex:1;gap:.5rem;display:flex}.biodata-kementrian{color:#60a5fa}.biodata-jabatan-container{gap:10px;margin-top:5px;display:flex}.biodata-jabatan{color:#fff;text-transform:uppercase;background-color:#60a5fa33;border:1px solid #fffc;border-radius:20px;width:fit-content;padding:.5rem 1rem;font-size:.65rem;font-weight:600}.member-photo-wrapper.big{aspect-ratio:3/4;max-width:30%;margin:0}.member-proker-container{margin-top:-10px;padding:0 2rem 2rem}.proker-title-small{color:#fff;border-left:3px solid #60a5fa;margin-bottom:12px;padding-left:10px;font-size:1.05rem;font-weight:600}.member-proker-list{flex-direction:column;gap:10px;max-height:180px;padding-right:10px;display:flex;overflow-y:auto}.member-proker-item{color:#cbd5e1;cursor:pointer;background:#ffffff08;border:1px solid #ffffff14;border-radius:12px;justify-content:space-between;align-items:center;padding:12px 16px;font-size:.95rem;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex}.member-proker-item:hover{color:#fff;background:#ffffff14}.proker-arrow-icon{color:#60a5fa;transition:transform .3s}.member-proker-item:hover .proker-arrow-icon{transform:translate(3px)}@media (max-width:768px){.section-title{font-size:1.8rem}.ministry-tag{padding:10px;font-size:.85rem}.cabinet-card{min-width:320px}.members-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:15px}.biodata-content{text-align:center;flex-direction:column;align-items:center}.member-photo-wrapper.big{max-width:50%}.biodata-jabatan-container{justify-content:center}}@media (max-width:480px){.cabinet-card{aspect-ratio:4/3;min-width:85vw}.ministry-tag{padding:10px;font-size:.85rem}.modal-title{font-size:1.5rem}}
.hero-wrapper{flex-direction:column;justify-content:flex-end;align-items:flex-end;width:100%;height:100dvh;display:flex;position:relative;overflow:hidden;margin:0!important}.overlay-top{z-index:25;pointer-events:none;background:linear-gradient(#000c,#0006,#0000);width:100%;height:40vh;position:absolute;top:0;left:0}.overlay-bottom{z-index:25;pointer-events:none;background:linear-gradient(#0000 0%,#001f3fcc 80%,#001f3f 100%);width:100%;height:40vh;position:absolute;bottom:0;left:0}.hero-logo-mobile{color:#fff;text-align:right;filter:drop-shadow(0 0 20px #ffffff80);z-index:30;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem;display:none;position:absolute;top:8rem;left:2rem}.hero-logo-container{flex-direction:row;justify-content:flex-end;align-items:center;gap:1rem;margin-bottom:.5rem;display:flex}.school-name-text{letter-spacing:-.05em;text-transform:uppercase;font-size:1.125rem;font-weight:700}.banner-container{z-index:0;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.banner-image-wrapper{width:100%;height:100%;position:absolute;inset:0}.nav-arrows-container{z-index:20;pointer-events:none;justify-content:space-between;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.nav-btn{pointer-events:auto;cursor:pointer;opacity:1;z-index:1;background:0 0;border:none;border-radius:0;justify-content:center;align-items:center;width:12vw;max-width:160px;height:100%;transition:all .5s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.nav-btn:before{content:"";opacity:0;z-index:-1;pointer-events:none;transition:opacity .5s cubic-bezier(.16,1,.3,1);position:absolute;inset:0}.nav-btn:first-child:before{background:linear-gradient(90deg,#0009 0%,#0000 80%)}.nav-btn:last-child:before{background:linear-gradient(270deg,#0009 0%,#0000 80%)}.nav-btn:hover:before{opacity:1}.nav-btn .nav-icon{color:#fff6;filter:drop-shadow(0 2px 10px #0000004d);font-size:3rem;transition:all .4s cubic-bezier(.16,1,.3,1);transform:scale(.9)}.nav-btn:hover .nav-icon{color:#fff;filter:drop-shadow(0 0 15px #fff9)}.nav-btn:active .nav-icon{transition:all .1s ease-in!important;transform:scale(.95)!important}.nav-btn:first-child:hover .nav-icon{transform:scale(1.1)translate(-8px)}.nav-btn:last-child:hover .nav-icon{transform:scale(1.1)translate(8px)}@media (max-width:586px){.nav-btn .nav-icon{font-size:1.25rem}}.hero-btm{z-index:30;flex-direction:row;justify-content:space-between;align-items:flex-end;width:100%;margin-bottom:2.5rem;padding:0 5vw;display:flex}.hero-txt{flex-direction:column;justify-content:flex-end;align-items:flex-start;width:max-content;display:flex}.text-anim-holder{height:calc(100% + 1rem);margin-bottom:-1rem;display:grid}.text-item-container{flex-direction:column;grid-area:1/1;justify-content:end;display:flex}.tagline-text{color:#e5e7eb;letter-spacing:.1em;font-size:.875rem;font-weight:600}.btn-learn{color:#000;text-align:center;cursor:pointer;z-index:10;background-color:#fff;border:none;border-radius:50px;width:100%;min-width:200px;max-width:400px;margin-top:2rem;padding:12px 2.5rem;font-size:1rem;font-weight:600;transition:all .1s}.btn-learn:hover{background-color:#e5e7eb}.btn-learn:active{transform:scale(.95)}.hero-logo.desktop{color:#fff;text-align:right;flex-direction:column;justify-content:flex-end;gap:.5rem;display:flex}.z-20{z-index:20}.z-10{z-index:10}.opacity-100{opacity:1}.opacity-0{opacity:0}.start{left:0}@keyframes slideOverRight{0%{opacity:1;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOverLeft{0%{opacity:1;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes rollInFromTop{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes rollOutToBottom{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}@keyframes rollInFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes rollOutToTop{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}.animate-roll-in-from-top{animation:.8s cubic-bezier(.4,0,.2,1) forwards rollInFromTop}.animate-roll-out-to-bottom{animation:.8s cubic-bezier(.4,0,.2,1) forwards rollOutToBottom}.animate-roll-in-from-bottom{animation:.8s cubic-bezier(.4,0,.2,1) forwards rollInFromBottom}.animate-roll-out-to-top{animation:.8s cubic-bezier(.4,0,.2,1) forwards rollOutToTop}.animate-slide-fade-right,.animate-slide-fade-left{animation-duration:.7s}.animate-slide-over-right{animation:.7s cubic-bezier(.25,1,.5,1) forwards slideOverRight}.animate-slide-over-left{animation:.7s cubic-bezier(.25,1,.5,1) forwards slideOverLeft}.start{margin:0!important}@media (max-width:876px){.hero-btm{flex-direction:column;align-items:center}.hero-txt{width:100%}.hero-logo.desktop{display:none}.hero-logo-mobile{width:calc(100% - 4rem);display:flex}}@media (max-width:586px){.cibadak{display:none}.hero-logo-container{justify-content:end;width:100%}.hero-btm{padding:0 2rem}}
.banner{z-index:-1;width:100%}.banner img{object-fit:cover;width:100%;height:100%}.custom-scroll::-webkit-scrollbar{width:8px}.custom-scroll::-webkit-scrollbar-track{background:#001f3f}.custom-scroll::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.custom-scroll::-webkit-scrollbar-thumb:hover{background:#fff5}.boxes{border:5px solid #304356;border-radius:25px;justify-content:center;align-items:end;min-width:30%;height:270px;display:flex}.ministry{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;text-align:center;background:#0000004d;border:1px solid #bdbdce4d;border-radius:20px;width:100%;margin:10px;padding:15px;box-shadow:10px 0 30px 5px #0000004d}.btn-next{color:#fffc;cursor:pointer;background-color:#0000001a;border-radius:50%;justify-content:center;align-items:center;width:90px;height:90px;font-size:2rem;transition:all .3s;display:flex}.btn-next:hover{color:#f3f2f2;background:#0000004d;scale:1.1}.btn-next.left svg{transform:translate(-3px)}.btn-next.right svg{transform:translate(3px)}.sosmed{color:#e1e1e1;cursor:pointer;border:3px solid #e1e1e1;border-radius:20px;flex-direction:row;align-items:center;gap:1rem;padding:1rem 2rem 1rem 1rem;font-size:2rem;transition:all .3s;display:flex}.sosmed:hover{color:#18191b;background-color:#e1e1e1;transform:scale(1.05)}.sosmed.utama{color:#18191b;background-color:#e1e1e1}.sosmed span{font-size:1rem;font-weight:600}.main-layout{overflow-x:hidden}.intro-section{background-color:#001f3f;flex-direction:column;justify-content:space-between;gap:2rem;width:100%;padding:12rem 15vw;display:flex}.intro-header{text-align:center;flex-direction:column;display:flex}.intro-content{flex-direction:column;gap:5rem;display:flex}.intro-desc{white-space:pre-line;text-align:center;font-size:1.2rem}.video-section{text-align:center;flex-direction:column;gap:1rem;width:100%;max-width:40rem;margin:0 auto;padding:1rem;display:flex}.video-box{aspect-ratio:16/9;filter:drop-shadow(0 0 20px #ffffff4d);border-radius:25px;position:relative;overflow:hidden}.video-iframe{border:none;width:100%;height:100%;position:absolute;top:0;left:0}.video-caption{color:#b4b4b4!important}.sosmed-section{background-color:#18191b;flex-direction:column;width:100%;display:flex;padding:2.5rem 15rem!important}.sosmed-wrapper{flex-direction:row;justify-content:center;gap:3vw;width:100%;display:flex}.sec3{background-image:radial-gradient(#969393 1px,#0000 1px);background-size:30px 30px;flex-direction:column;gap:2rem;padding:5vw 10vw;display:flex}.proker .boxes{width:100%;height:100%;transition:all .3s}.footer{color:#fff;text-align:center;background-color:#304356;padding:20px;font-family:Montserrat,sans-serif;font-size:.8rem}@media (max-width:1440px){.sosmed-section{padding:2.5rem 5rem!important}}@media (max-width:1024px){.intro-section{padding:8rem 10vw}}@media (max-width:768px){.intro-section{padding:6rem 5vw}.sosmed-section{padding:2.5rem 2rem!important}.sosmed-wrapper{flex-direction:column;align-items:center;gap:1.5rem}.sosmed{width:100%}}