/* =====================================
   KIOSHOSTING.MY.ID
   MODERN HOSTING STYLE
===================================== */


:root{

--bg:#06101f;
--bg-soft:#0b1b33;

--card:#102642;

--text:#ffffff;

--muted:#9fb0c8;

--primary:#00eaff;

--primary-dark:#0077ff;

--border:#203b60;

--success:#00e676;

--danger:#ff5252;

--warning:#ffb300;

}


.light{

--bg:#f4f8ff;

--bg-soft:#ffffff;

--card:#ffffff;

--text:#111827;

--muted:#64748b;

--primary:#006cff;

--primary-dark:#00a8ff;

--border:#dbe5f0;

}



/* RESET */

*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

transition:.3s;

}





/* =================
HEADER
================= */


.header{

position:sticky;

top:0;

z-index:999;

padding:20px 8%;

display:flex;

align-items:center;

justify-content:space-between;

background:rgba(6,16,31,.75);

backdrop-filter:blur(15px);

}



.logo{

font-size:28px;

font-weight:800;

color:var(--primary);

}



nav{

display:flex;

gap:30px;

}



nav a{

text-decoration:none;

color:var(--text);

font-weight:500;

}



nav a:hover{

color:var(--primary);

}



.actions{

display:flex;

gap:15px;

align-items:center;

}



#theme{

width:42px;

height:42px;

border-radius:50%;

border:none;

cursor:pointer;

background:var(--card);

color:var(--text);

}



.login{

background:var(--primary);

padding:10px 25px;

border-radius:30px;

text-decoration:none;

color:#001018;

font-weight:bold;

}



.hamburger{

display:none;

font-size:25px;

background:none;

border:0;

color:var(--text);

}






/* =================
HERO
================= */


.hero{

padding:90px 8%;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}



.hero h1{

font-size:clamp(40px,5vw,70px);

line-height:1.1;

}



.hero h1 span{

color:var(--primary);

}



.hero p{

margin:25px 0;

font-size:18px;

color:var(--muted);

}



.hero-btn{

display:flex;

gap:20px;

}



.btn,
.btn-outline{

padding:15px 35px;

border-radius:40px;

text-decoration:none;

font-weight:bold;

}



.btn{

background:var(--primary);

color:#001018;

}



.btn-outline{

border:1px solid var(--primary);

color:var(--primary);

}





/* STAT */


.stats{

display:flex;

gap:20px;

margin-top:50px;

}



.stats div{

background:var(--card);

padding:20px;

border-radius:20px;

border:1px solid var(--border);

}



.stats h3{

color:var(--primary);

font-size:25px;

}



.stats p{

margin:0;

font-size:14px;

}





/* SERVER */


.server-card{

height:330px;

width:330px;

margin:auto;

background:var(--card);

border-radius:40px;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

box-shadow:0 20px 60px #0005;

animation:float 4s infinite;

}



.circle{

font-size:80px;

}



@keyframes float{

40%{

transform:translateY(-15px);

}

}


.floating-card{

background:var(--card);

padding:15px 20px;

border-radius:200px;

position:absolute;

}



/* =================
DOMAIN CHECKER
================= */


.domain{

padding:80px 8%;

text-align:center;

}



.domain h2{

font-size:40px;

}



.domain-search{

max-width:700px;

margin:30px auto;

display:flex;

background:var(--card);

padding:10px;

border-radius:50px;

border:1px solid var(--border);

}



.domain-search input{

flex:1;

background:none;

border:0;

outline:0;

padding:15px;

color:var(--text);

font-size:16px;

}



.domain-search button{

border:0;

padding:15px 35px;

border-radius:40px;

background:var(--primary);

cursor:pointer;

font-weight:bold;

}





/* HASIL DOMAIN */


.domain-result-box{

max-width:800px;

margin:40px auto;

background:var(--card);

padding:30px;

border-radius:30px;

border:1px solid var(--border);

}



.domain-result-box h3{

color:var(--primary);

margin-bottom:25px;

}



.domain-item{

display:flex;

justify-content:space-between;

align-items:center;

background:var(--bg);

padding:18px;

margin:12px 0;

border-radius:15px;

border:1px solid var(--border);

}



.domain-checking{

color:var(--warning);

}



.domain-available{

color:var(--success);

}



.domain-unavailable{

color:var(--danger);

}







/* =================
HOSTING CARD
================= */


.section{

padding:80px 8%;

}



.section h2,
.faq h2{

text-align:center;

font-size:40px;

margin-bottom:40px;

}



.pricing{

display:grid;

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

gap:30px;

}



.price-card{

background:var(--card);

padding:40px;

border-radius:30px;

border:1px solid var(--border);

}



.price-card.active{

border:2px solid var(--primary);

transform:scale(1.05);

}



.price-card li{

list-style:none;

margin:15px 0;

color:var(--muted);

}



.price-card button{

width:100%;

padding:15px;

border:0;

border-radius:30px;

background:var(--primary);

cursor:pointer;

}





/* FEATURE */


.features{

display:grid;

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

gap:25px;

}



.features div{

background:var(--card);

padding:30px;

border-radius:25px;

text-align:center;

border:1px solid var(--border);

font-size:35px;

}



.features p{

color:var(--muted);

font-size:15px;

}






/* FAQ */


.faq{

padding:80px 8%;

}



details{

background:var(--card);

padding:20px;

margin:15px auto;

max-width:700px;

border-radius:15px;

}





/* FOOTER */


footer{

padding:50px 8%;

text-align:center;

background:#020817;

}



footer a{

color:var(--primary);

margin:10px;

text-decoration:none;

}





/* MOBILE */


@media(max-width:900px){


.hero{

grid-template-columns:1fr;

text-align:center;

}


nav{

display:none;

position:absolute;

top:80px;

left:0;

width:100%;

background:var(--card);

padding:30px;

flex-direction:column;

}



nav.active{

display:flex;

}



.hamburger{

display:block;

}



.login{

display:none;

}



.stats{

justify-content:center;

flex-wrap:wrap;

}



.hero-btn{

justify-content:center;

}



.domain-search{

flex-direction:column;

border-radius:25px;

gap:10px;

}


.domain-search button{

width:100%;

}



.domain-item{

flex-direction:column;

gap:10px;

}


}