html{
    scroll-behavior: smooth;
}

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

body{
background:#28282B;
color:white;
}

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 10%;
    background:rgba(40,40,43,.85);
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 30px rgba(0,0,0,.25);
    z-index:999;
    transition:.3s;
}

.logo{
animation:logoFloat 3s ease-in-out infinite;
font-size:28px;
font-weight:800;
}

.logo span{
color:#ffffff;
}

nav a{
margin-left:35px;
text-decoration:none;
color:#ffffff;
font-weight:500;
transition:.3s;
}

nav a:hover{
color:#28282B;
}

.hero{

    position:relative;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:100px 10%;

    overflow:hidden;

    text-align:center;

    color:white;

}

.hero-bg{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-2;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.75),
        rgba(0,0,0,.45)
    );

    z-index:-1;

}

.hero h1{

font-size:60px;

margin-bottom:20px;

}

.hero p{

font-size:20px;

max-width:700px;

margin:auto;

margin-bottom:35px;

}

.btn{

padding:16px 40px;

border:none;

border-radius:40px;

font-size:17px;

cursor:pointer;

transition:.4s;

text-decoration:none;

display:inline-block;

margin:10px;

}

.btn-primary{

background:#28282B;

color:white;

}

.btn-primary:hover{

transform:translateY(-4px);

background:#28282B;

}

.btn-outline{

border:2px solid white;

color:white;

}

.btn-outline:hover{

background:white;

color:black;

}

.section{
padding:90px 10%;
background:#28282B;
color:white;
}

.title{

text-align:center;

font-size:40px;

margin-bottom:50px;

}

.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:40px;
}

.card{
background:#35363A;
color:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.15);
transition:.35s;

display:flex;
flex-direction:column;
height:100%;
}

.card:hover{

transform:translateY(-10px);

}

.card img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:20px 20px 0 0;
}

.card-content{
padding:25px;
display:flex;
flex-direction:column;
flex:1;
}

.card h3{

margin-bottom:10px;

}

.price{

font-size:24px;

color:#ffffff;

font-weight:700;

margin:15px 0;

}

.buy{

margin-top:auto;

display:block;

width:100%;

padding:14px;

border:none;

border-radius:10px;

background:#FFD166;

color:#222;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.buy:hover{

transform:translateY(-3px);

background:white;

}

.features{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.about{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about-image img{
width:100%;
border-radius:20px;
box-shadow:0 20px 50px rgba(0,0,0,.4);
}

.about-content h3{
font-size:36px;
margin-bottom:20px;
}

.about-content p{
color:#cfcfcf;
line-height:1.8;
margin-bottom:30px;
}

.stats{
display:flex;
gap:30px;
margin-bottom:35px;
}

.stat{
background:#35363A;
padding:25px;
border-radius:15px;
text-align:center;
flex:1;
transition:.3s;
}

.stat:hover{
transform:translateY(-8px);
}

.stat h2{
color:#FFD166;
font-size:30px;
}

.stat p{
margin-top:8px;
}

.contact{
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    justify-items: center;
}

.contact-info{
    max-width: 700px;
    text-align: center;
}

.contact-info h3{
font-size:35px;
margin-bottom:20px;
}

.contact-info p{
color:#bbb;
line-height:1.8;
margin-bottom:30px;
}

.contact-item{
display:flex;
align-items:center;
margin-bottom:20px;
font-size:18px;
}

.contact-item i{
width:50px;
height:50px;
background:#35363A;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-right:15px;
color:#FFD166;
}

.contact-form{
background:#35363A;
padding:40px;
border-radius:20px;
}

.contact-form input,
.contact-form textarea{

width:100%;
padding:18px;
margin-bottom:20px;
background:#28282B;
border:none;
border-radius:10px;
color:white;
font-size:16px;

}

.contact-form textarea{
height:170px;
resize:none;
}

.feature{
    background:#ffffff;   /* Sama seperti card */
    color:#35363A;          /* Membuat semua tulisan putih */
    padding:40px;
    border-radius:20px;
    text-align:center;
}

.feature i{

font-size:45px;

color:#28282B;

margin-bottom:20px;

}

footer{

background:#111;

color:white;

padding:40px;

text-align:center;

margin-top:60px;

}

@media(max-width:768px){

.about,
.contact{
grid-template-columns:1fr;
}

.stats{
flex-direction:column;
}

.hero h1{

font-size:42px;

}

header{

padding:20px;

}

nav{

display:none;

}

@keyframes logoFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-4px);
}

100%{
transform:translateY(0);
}

}

}

/* ===========================
   FOOTER
=========================== */

.footer{

    background:#060606;

    padding:80px 10% 30px;

    margin-top:100px;

}

.footer-container{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

}

.footer h2{

    margin-bottom:20px;

}

.footer h3{

    margin-bottom:20px;

}

.footer p{

    color:#bfbfbf;

    line-height:1.8;

}

.footer ul{

    list-style:none;

}

.footer li{

    margin-bottom:15px;

}

.footer a{

    text-decoration:none;

    color:#bfbfbf;

    transition:.3s;

}

.footer a:hover{

    color:white;

}

.footer-social{

    margin-top:25px;

    display:flex;

    gap:20px;

}

.footer-social a{

    font-size:24px;

}

.copyright{

    margin-top:60px;

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:30px;

    text-align:center;

    color:#888;

}

/* ===========================
   BACK TO TOP
=========================== */

#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:white;

    color:black;

    font-size:18px;

    cursor:pointer;

    display:none;

    z-index:999;

    transition:.3s;

}

#backToTop:hover{

    transform:translateY(-5px);

}