/* HERO SECTION */

.hero-teks{

position:relative;
overflow:hidden;

background:
linear-gradient(
135deg,
#07111f 0%,
#0f2d46 40%,
#1c6ea4 100%
);

padding:120px 20px;

color:white;

text-align:center;

}


/* efek glow */

.hero-teks::before{

content:"";

position:absolute;

width:500px;
height:500px;

background:rgba(255,255,255,.06);

border-radius:50%;

top:-200px;
right:-150px;

filter:blur(80px);

}

.hero-teks::after{

content:"";

position:absolute;

width:350px;
height:350px;

background:rgba(0,174,255,.12);

border-radius:50%;

bottom:-150px;
left:-120px;

filter:blur(80px);

}

.hero-teks-box{

position:relative;
z-index:2;

max-width:850px;

margin:auto;

}


.hero-badge{

display:inline-block;

padding:10px 18px;

background:rgba(255,255,255,.12);

border:1px solid rgba(255,255,255,.15);

backdrop-filter:blur(12px);

border-radius:50px;

font-size:14px;

margin-bottom:25px;

letter-spacing:.5px;

}


.hero-teks h1{

font-size:58px;

line-height:1.15;

font-weight:700;

margin-bottom:25px;

text-shadow:
0 4px 20px rgba(0,0,0,.35);

}


.hero-teks p{

font-size:19px;

line-height:1.9;

color:#d6e4f0;

margin-bottom:40px;

max-width:760px;

margin-left:auto;
margin-right:auto;

}


.hero-teks-btn{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}


.hero-teks-btn a{

text-decoration:none;

padding:16px 32px;

border-radius:50px;

font-weight:600;

transition:.4s;

}


.btn-primary{

background:white;

color:#0f2d46;

box-shadow:
0 8px 25px rgba(255,255,255,.2);

}

.btn-primary:hover{

transform:translateY(-5px);

}


.btn-secondary{

border:1px solid rgba(255,255,255,.3);

background:rgba(255,255,255,.08);

backdrop-filter:blur(15px);

color:white;

}

.btn-secondary:hover{

background:rgba(255,255,255,.15);

transform:translateY(-5px);

}


@media(max-width:768px){

.hero-teks{

padding:90px 20px;

}

.hero-teks h1{

font-size:36px;

}

.hero-teks p{

font-size:16px;

}

}

.hero-wrap{

display:grid;

grid-template-columns:
1.3fr .8fr;

gap:60px;

align-items:center;

}


.hero-left{

text-align:left;

}


.hero-right{

display:flex;

justify-content:center;

}


.hero-info{

display:grid;

gap:20px;

width:100%;

}


.info-card{

background:
rgba(255,255,255,.08);

border:1px solid
rgba(255,255,255,.15);

backdrop-filter:blur(15px);

padding:25px;

border-radius:25px;

}


.label{

font-size:14px;

opacity:.8;

margin-bottom:10px;

}


.value{

font-size:28px;

font-weight:700;

}


@media(max-width:992px){

.hero-wrap{

grid-template-columns:1fr;

}

.hero-left{

text-align:center;

}

}