*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;

}

body{

height:100vh;

}

header{

position:absolute;

top:0;
left:0;

width:100%;

padding:25px 60px;

display:flex;

justify-content:flex-start;

align-items:center;

z-index:100;

}

.logo{

font-size:40px;

font-weight:700;

color:white;

letter-spacing:2px;

}

.logo span{

color:#3B82F6;

}

.btn-login{

background:#F59E0B;

padding:12px 30px;

border-radius:12px;

text-decoration:none;

color:white;

font-weight:600;

transition:.3s;

}

.btn-login:hover{

transform:scale(1.05);

}

.hero{

height:100vh;

background:

linear-gradient(
rgba(0,0,0,.6),
rgba(0,0,0,.6)
),

url("asset/gedung.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

}

.overlay{

padding-left:100px;

color:white;

max-width:700px;

}

.overlay h1{

font-size:80px;

line-height:1.1;

margin-bottom:20px;

}

.overlay h1 span{

color:#3B82F6;

}

.overlay p{

font-size:20px;

line-height:1.8;

margin-bottom:30px;

}

.btn-masuk{

display:inline-block;

background:#3B82F6;

padding:15px 35px;

border-radius:15px;

text-decoration:none;

color:white;

font-weight:600;

transition:.3s;

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

box-shadow:
0 0 0 0
rgba(59,130,246,0.7);

}

70%{

transform:scale(1.05);

box-shadow:
0 0 0 15px
rgba(59,130,246,0);

}

100%{

transform:scale(1);

box-shadow:
0 0 0 0
rgba(59,130,246,0);

}

}

.btn-masuk:hover{

transform:translateY(-3px);

box-shadow:
0 10px 25px
rgba(59,130,246,0.5);

}