:root{
--blue:#2869ef;
--ink:#0f203c;
--yellow:#ffdd50;
--paper:#eef4ff;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
color:var(--ink);
font-family:Manrope,Arial,sans-serif;
}

a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

a:focus-visible,button:focus-visible{
outline:3px solid #ffc926;
outline-offset:4px;
}

.homepage{
display:grid;
grid-template-columns:minmax(0,55fr) minmax(0,45fr);
min-height:100svh;
}

.side{
position:relative;
isolation:isolate;
min-width:0;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:20px;
}

.left{
padding:40px clamp(23px,4.2vw,62px) 32px;
background:var(--blue);
border-right:2px solid var(--ink);
}

.right{
padding:44px clamp(23px,4vw,58px) 31px;
background:var(--paper);
}

/* GRID */

.side::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
background-size:27px 27px;
background-image:
linear-gradient(#ffffff24 1px,transparent 1px),
linear-gradient(90deg,#ffffff24 1px,transparent 1px);
}

.right::before{
background-image:
linear-gradient(#2869ef12 1px,transparent 1px),
linear-gradient(90deg,#2869ef12 1px,transparent 1px);
}

/* ANIMASI IPA */

.side>.science{
position:absolute;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:0;
}

.side>:not(.science){
position:relative;
z-index:1;
}

.molecule,.atom,.spark,.square{
position:absolute;
display:block;
}


.ml{
right:-38px;
top:29%;
width:clamp(130px,14vw,185px);
color:#e2efff;
opacity:.55;
animation:float 12s ease-in-out infinite alternate;
}


.al{
left:-23px;
right:auto;
bottom:13%;
width:clamp(95px,10vw,125px);
color:#f7fbff;
opacity:.62;
animation:spin 37s linear infinite;
}


.sl{
top:20%;
left:8%;
font-size:27px;
color:#ffdd50;
animation:pulse 5s ease-in-out infinite;
}


.ql{
right:8%;
bottom:9%;
width:26px;
height:26px;
border:2px solid var(--ink);
border-radius:5px;
background:#ff9c94;
transform:rotate(12deg);
animation:float 9s ease-in-out infinite alternate;
}


.mr{
left:-38px;
right:auto;
top:29%;
width:clamp(130px,14vw,185px);
color:#5e90df;
opacity:.55;
animation:float 12s ease-in-out infinite alternate;
}


.ar{
right:-23px;
left:auto;
bottom:13%;
width:clamp(95px,10vw,125px);
color:#3f7be3;
opacity:.62;
animation:spin 37s linear infinite reverse;
}


.sr{
top:20%;
right:8%;
font-size:27px;
color:#edb932;
animation:pulse 5s ease-in-out infinite;
}


.qr{
left:8%;
bottom:9%;
width:26px;
height:26px;
border:2px solid var(--ink);
border-radius:5px;
background:#ffdd50;
transform:rotate(12deg);
animation:float 9s ease-in-out infinite alternate;
}

/* BRAND */

.brand-header,.right-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.brand{
display:flex;
align-items:center;
gap:14px;
min-width:0;
}

.brand-icon{
display:grid;
place-items:center;
flex-shrink:0;
width:54px;
height:54px;
border:2px solid var(--ink);
border-radius:12px;
background:var(--yellow);
box-shadow:4px 5px 0 var(--ink);
}

.brand-icon svg{width:32px}

.brand-copy strong{
display:block;
font:800 clamp(27px,2.7vw,38px)/.96
'Bricolage Grotesque',sans-serif;
letter-spacing:-.07em;
}

.brand-copy strong span{color:#fff}

.brand-copy small{
display:block;
font-weight:800;
font-size:10px;
margin-top:4px;
}

.year{
white-space:nowrap;
font-size:10px;
font-weight:900;
letter-spacing:.08em;
color:#e8f0ff;
}

/* HERO */

.hero{
padding:62px 0 55px;
max-width:650px;
}

.eyebrow-label{
display:inline-flex;
align-items:center;
max-width:100%;
padding:10px 13px;
background:var(--yellow);
border:2px solid var(--ink);
border-radius:7px;
box-shadow:3px 4px 0 var(--ink);
font-size:11px;
font-weight:900;
}

.hero h1{
font:800 clamp(53px,6.3vw,100px)/.97
'Bricolage Grotesque',sans-serif;
letter-spacing:-.075em;
margin:25px 0 23px;
}

.hero h1 span{color:#fff}

.hero p{
max-width:550px;
font-size:clamp(14px,1.22vw,18px);
line-height:1.7;
margin:0;
}

.cta{
display:inline-flex;
align-items:center;
gap:25px;
margin-top:27px;
padding:13px 18px;
border:2px solid var(--ink);
border-radius:8px;
background:var(--yellow);
box-shadow:4px 5px 0 var(--ink);
font-size:13px;
font-weight:900;
transition:transform .2s,box-shadow .2s;
}

.cta:hover,.present:hover{
transform:translate(-2px,-3px);
box-shadow:6px 8px 0 var(--ink);
}

/* IDENTITAS */

.identity-line{
display:flex;
align-items:center;
justify-content:space-between;
color:#eaf1ff;
font-size:10px;
font-weight:900;
letter-spacing:.13em;
margin-bottom:14px;
}

.identity-cards{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.id-card{
min-width:0;
min-height:76px;
padding:10px 6px;
background:#fff;
border:2px solid var(--ink);
border-radius:9px;
box-shadow:3px 4px 0 var(--ink);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:5px;
text-align:center;
}

.id-card:first-child,
.id-card:last-child{
background:var(--yellow);
}

.id-card strong{
font:800 clamp(17px,2vw,26px)/1
'Bricolage Grotesque',sans-serif;
letter-spacing:-.06em;
overflow-wrap:anywhere;
}

.id-card small{
font-size:9px;
font-weight:900;
}

/* HEADER KANAN */

.team-mini{
display:flex;
align-items:center;
gap:9px;
white-space:nowrap;
font-size:10px;
font-weight:900;
letter-spacing:.07em;
}

.team-mini i{
height:8px;
width:8px;
background:#24b69d;
border-radius:50%;
}

.present{
flex-shrink:0;
background:var(--yellow);
border:2px solid var(--ink);
border-radius:8px;
box-shadow:3px 4px 0 var(--ink);
padding:11px 13px;
font-size:10px;
font-weight:900;
white-space:nowrap;
transition:transform .2s,box-shadow .2s;
}

/* TEKS KANAN */

.team-copy{
border-bottom:1px solid #c5d6f2;
padding:10px 0 15px;
}

.overline{
color:var(--blue);
font-size:11px;
letter-spacing:.14em;
font-weight:900;
}

.team-copy h2{
font:800 clamp(35px,3.6vw,55px)/1.07
'Bricolage Grotesque',sans-serif;
letter-spacing:-.065em;
margin:12px 0 10px;
}

.team-copy h2 span{color:var(--blue)}

.team-copy p{
margin:0;
color:#566b86;
font-size:14px;
line-height:1.6;
}

/* FOTO KELOMPOK */

.photo{
position:relative;
aspect-ratio:4/3;
max-height:390px;
min-height:220px;
overflow:hidden;
display:grid;
place-items:center;
background:linear-gradient(
135deg,#d8e6ff,#ecf4ff 60%,#c9dcff
);
border:2.5px solid var(--ink);
border-radius:11px;
box-shadow:6px 7px 0 var(--ink);
}

.photo::before{
content:"";
position:absolute;
inset:0;
background-size:25px 25px;
background-image:
linear-gradient(#2869ef13 1px,transparent 1px),
linear-gradient(90deg,#2869ef13 1px,transparent 1px);
}

.photo img{
display:none;
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
background:#dbe8ff;
z-index:1;
}

.photo.has-image img{display:block}
.photo.has-image .photo-empty{display:none}

.photo-empty{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
}

.photo-empty>span{
font:800 clamp(100px,12vw,180px)/.96
'Bricolage Grotesque',sans-serif;
letter-spacing:-.1em;
color:var(--blue);
}

.photo-empty>span span{color:#ffc934}

.photo-empty small{
letter-spacing:.24em;
font-size:10px;
font-weight:900;
}

.photo-sticker{
position:absolute;
bottom:17px;
left:16px;
z-index:2;
transform:rotate(-3deg);
background:var(--yellow);
border:2px solid var(--ink);
border-radius:6px;
padding:9px 13px;
box-shadow:3px 4px 0 var(--ink);
font-weight:900;
font-size:11px;
}

/* FOOTER */

.right-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
font-size:11px;
font-weight:800;
color:#5e6e88;
}

.right-footer a{
text-decoration:underline;
text-underline-offset:5px;
color:#102e5e;
}

/* ANIMASI */

.hero,.team-copy,.photo{
animation:enter .7s both;
}

.team-copy{animation-delay:.1s}
.photo{animation-delay:.2s}

@keyframes enter{
from{opacity:0;transform:translateY(16px)}
to{opacity:1;transform:translateY(0)}
}

@keyframes float{
to{transform:translate(-10px,13px) rotate(7deg)}
}

@keyframes spin{
to{transform:rotate(360deg)}
}

@keyframes pulse{
50%{opacity:.32;transform:scale(.85)}
}

/* TABLET */

@media(max-width:1120px){
.left,.right{
padding-left:27px;
padding-right:27px;
}
.year{display:none}
.team-mini{font-size:9px}
.present{font-size:9px;padding:10px}
}

/* MOBILE */

@media(max-width:920px){

.homepage{display:block}

.left{
border-right:0;
border-bottom:2px solid var(--ink);
min-height:88svh;
padding:25px 21px 29px;
}

.right{
min-height:86svh;
padding:29px 21px 37px;
gap:27px;
}

.year{display:inline}

.hero{padding:64px 0 50px}

.hero h1{
font-size:clamp(52px,10vw,78px);
}

.hero p{font-size:15px}

.team-copy h2{
font-size:clamp(35px,7vw,53px);
}

.photo{
max-height:none;
min-height:0;
}

.ml{width:135px;top:26%}
.mr{width:140px;top:24%}
.al,.ar{width:86px}

}

@media(max-width:420px){

.year{display:none}

.brand-icon{
height:49px;
width:49px;
}

.brand-copy strong{font-size:28px}
.brand-copy small{font-size:9px}

.hero{padding:51px 0 44px}

.hero h1{
font-size:clamp(47px,12vw,61px);
}

.eyebrow-label{
font-size:9px;
padding:9px 11px;
}

.identity-line{font-size:9px}
.id-card strong{font-size:17px}
.id-card small{font-size:8px}

.team-mini{font-size:8px}
.present{font-size:9px;padding:9px}

.team-copy h2{
font-size:clamp(34px,9vw,43px);
}

.right-footer{font-size:10px}
.photo-empty small{font-size:9px}

}

/* AKSESIBILITAS */

@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important;
}
}


/* Penyelarasan visual homepage */
.right{
gap:clamp(20px,4vh,38px);
}

.right .photo{
width:100%;
margin-block:auto;
max-height:440px;
}

@media(max-width:920px){
.right{
gap:26px;
}
.right .photo{
margin-block:22px;
max-height:none;
}
}