*{
box-sizing:border-box;
}

body{

margin:0;
font-family:Segoe UI;

background-image:url("abstract-futuristic-background-with-3d-design.jpg");
background-size:cover;
background-position:center;

display:flex;
justify-content:center;

}

.app
{ width:100%; 
     max-width:420px; 
     background:rgba(255,255,255,0.92); 
     backdrop-filter:blur(6px); 
     padding:16px; 
     border-radius:20px; 
     margin:10px; 
     box-shadow:0 10px 30px rgba(0,0,0,0.25); 
  }

.title{
font-size:20px;
font-weight:600;
margin-bottom:20px;
color:#333;
align-self:center;
text-align:center;
}

.grid-form{

display:grid;
grid-template-columns:1fr 1fr;
gap:14px;

}

.card{

background:white;
border-radius:14px;
padding:14px;

box-shadow:0 4px 12px rgba(0,0,0,0.08);

display:flex;
flex-direction:column;

}

.full{
grid-column:span 2;
}

.card-title{

display:flex;
align-items:center;
gap:6px;
text-align:center;
margin-bottom:8px;

}

.card-title span{
color:#6366f1;
}

input,
select{

width:100%;

padding:10px;

border-radius:8px;

border:1px solid #ddd;

margin-bottom:8px;

font-size:14px;

box-sizing:border-box;

}

input:invalid,select:invalid{
border:2px solid #ef4444;
}

input:focus,
select:focus{

outline:none;

border-color:#6366f1;

box-shadow:0 0 0 2px rgba(99,102,241,0.2);

}

.submit-btn{

margin-top:16px;
width:100%;

padding:14px;

border:none;
border-radius:12px;

background:linear-gradient(135deg,#6366f1,#06b6d4);

color:white;
font-size:16px;
font-weight:bold;

cursor:pointer;

display:flex;
align-items:center;
justify-content:center;
gap:6px;

}

.toast{

position:fixed;
bottom:30px;
left:50%;

transform:translateX(-50%) translateY(100px);

background:#10b981;
color:white;

padding:14px 20px;

border-radius:12px;

display:flex;
align-items:center;
gap:8px;

opacity:0;

transition:all .4s;

}

.toast.show{

opacity:1;
transform:translateX(-50%) translateY(0);

}

@media(max-width:600px){

.grid-form{
grid-template-columns:1fr;
}

.full{
grid-column:span 1;
}

.footer-instansi{

display:flex;

align-items:center;

justify-content:center;

gap:6px;

margin-top:16px;

font-size:12px;

color:#444;

}

.logo-instansi{

width:auto;

object-fit:contain;

}
     
.footer-text{

font-size:11px;

line-height:1.2;

color:#333;

text-align:left;

}

.footer-text span{

font-size:10px;

color:#666;

}
     
.input-note{

display:block;

margin-top:5px !important;

margin-bottom:10px !important;

font-size:11px;

color:#888 !important;

line-height:1.4;

}