body{

font-family:Arial;

background:#0b1f35;

color:white;

margin:0;

}


.navbar{

position:sticky;

top:0;

z-index:1000;

background:rgba(8,25,44,0.9);

backdrop-filter:blur(8px);

padding:16px 40px;

border-bottom:1px solid rgba(255,255,255,0.08);

box-shadow:0 10px 30px rgba(0,0,0,0.4);

}

@media (max-width: 768px) {
  .navbar {
    position: static;
    top: auto;
  }
}


.nav-container{

display:flex;

justify-content:space-between;

align-items:center;

max-width:1200px;

margin:auto;

}


.logo{
font-size:20px;
font-weight:700;
text-decoration:none;

background:linear-gradient(90deg,#00c6ff,#4facfe);

background-clip:text;
-webkit-background-clip:text;

color:transparent;
-webkit-text-fill-color:transparent;

display:inline-block;
}

.nav-brand{
  text-decoration:none;
  color:inherit;
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.nav-brand-glass{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 12px 30px rgba(0,0,0,0.22);
  box-sizing:border-box;
}

.nav-brand-icon{
  width:22px;
  height:22px;
  border-radius:8px;
}

.nav-brand-text{
  font-weight:800;
  letter-spacing:0.01em;
  white-space:nowrap;
  color:white;
}

.nav-menu{

display:flex;

gap:10px;

list-style:none;

padding:6px 8px;
border-radius:18px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(12px);
box-sizing:border-box;

flex-wrap:nowrap;

}


.nav-menu a{

color:#d6eaff;

text-decoration:none;

font-size:12px;

font-weight:500;

white-space:nowrap;

transition:0.3s;

}


.nav-menu a:hover{

color:#4facfe;

}

.hero{

text-align:center;

padding:70px 20px;

background:linear-gradient(
180deg,
rgba(0,140,255,0.2),
transparent
);

}


.hero h1{

font-size:36px;

margin-bottom:10px;

}


.hero p{

color:#cfe7ff;

}


.kaffarah-section{

display:flex;

justify-content:center;

padding:40px;

}


.kaffarah-card{

width:500px;

background:rgba(255,255,255,0.05);

padding:30px;

border-radius:16px;

}


.form-group{

margin-bottom:20px;

}


input{

width:100%;

padding:12px;

border-radius:10px;

border:none;

background:#0e2a4a;

color:white;

}


.harga-preset{

display:flex;

gap:10px;

margin-bottom:20px;

}


.harga-preset button{

padding:6px 14px;

border:none;

border-radius:8px;

background:#1e3a5f;

color:white;

cursor:pointer;

}


.harga-preset button:hover{

background:#00c6ff;

}


.btn-hitung{

width:100%;

padding:14px;

border:none;

border-radius:12px;

background:linear-gradient(
90deg,
#00c6ff,
#4facfe
);

color:white;

font-size:16px;

cursor:pointer;

}


.stat-box{

margin-top:20px;

}


.hasil-box{

margin-top:20px;

padding:20px;

border-radius:12px;

background:#0e2a4a;

}


.analisis-box{

margin-top:25px;

padding:20px;

border-radius:14px;

background:linear-gradient(
145deg,
rgba(0,40,80,0.7),
rgba(0,70,120,0.5)
);

border-left:4px solid #00d4ff;

}

.footer{

margin-top:60px;

padding:30px 20px;

text-align:center;

background:linear-gradient(
180deg,
rgba(0,140,255,0.1),
rgba(0,0,0,0.2)
);

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

}


.footer-links{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:10px;

}


.footer-links a{

color:#cfe7ff;

text-decoration:none;

font-size:14px;

}


.footer-links a:hover{

color:#4facfe;
}


.footer p{
font-size:13px;
color:#a9c7e8;
}

.btn-reset{
background:#00cfe8;
color:#002b33;
}

.btn-reset:hover{
background:#00b3c9;
}

.stats-container{
display:flex;
gap:15px;
margin:20px 0;
}

.stat-card{
flex:1;
background:rgba(255,255,255,0.05);
padding:15px;
border-radius:10px;
text-align:center;
}

.stat-card span{
font-size:13px;
color:#9ecbff;
}

.stat-card h3{
font-size:24px;
margin-top:5px;
}

.harga-btn.active{
background:#00e0ff;
color:#001018;
font-weight:600;
box-shadow:0 0 10px rgba(0,224,255,.5);
}

.harga-btn{
padding:8px 14px;
border-radius:10px;
background:#2a3c4f;
border:none;
color:white;
cursor:pointer;
transition:.2s;
}

.harga-btn:hover{
background:#3c556f;
}

.harga-btn.active{
background:#00e0ff;
color:#001018;
box-shadow:0 0 8px rgba(0,224,255,.6);
}

.action-buttons{
display:flex;
justify-content:center;
gap:12px;
margin-top:25px;
flex-wrap:wrap;
}

.action-buttons button{
padding:10px 16px;
border-radius:10px;
border:none;
font-size:14px;
cursor:pointer;
transition:0.25s;
}

.btn-copy{
background:#2a3c4f;
color:#fff;
}

.btn-copy:hover{
background:#3e556f;
}

.btn-wa{
background:#25D366;
color:#fff;
}

.btn-wa:hover{
background:#1ebe5d;
}

.scroll-to-top{
position: fixed;
left: 18px;
bottom: 26px;
width: 42px;
height: 36px;
border: none;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: linear-gradient(135deg,#ef4444,#dc2626);
color: white;
box-shadow:
0 6px 16px rgba(0,0,0,0.25),
0 3px 8px rgba(239,68,68,0.35);
opacity: 0;
visibility: hidden;
transform: translateY(14px);
transition: all 0.28s ease;
z-index: 999;
pointer-events: none;
}

.scroll-to-top svg{
width: 16px;
height: 16px;
}

.scroll-to-top.show{
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}

.scroll-to-top:hover{
transform: translateY(-2px);
box-shadow:
0 10px 22px rgba(0,0,0,0.3),
0 6px 14px rgba(239,68,68,0.45);
}

.scroll-to-top:active{
transform: scale(0.95);
}

@media (max-width:768px){
.nav-container{
flex-direction:column;
justify-content:center;

align-items:center;

text-align:center;

}

.nav-brand{
  width:100%;
  justify-content:center;
}

.nav-brand-glass{
  width:100%;
  justify-content:center;
  padding:9px 12px;
}

.nav-menu{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  overflow:hidden;
  padding:10px 10px;
  margin:10px 0 0;
  border-radius:18px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  box-sizing:border-box;
  min-width:0;
}

.nav-menu a{
  font-size:13px;
  white-space:normal;
  padding:10px 8px;
  border-radius:14px;
  background: rgba(255,255,255,0.04);
  display:flex;
  justify-content:center;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

}