*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Arial, sans-serif;
  background:linear-gradient(
  135deg,
  #0f2027 0%,
  #203a43 50%,
  #2c5364 100%
  );
  color:white;
  min-height:100vh;
  overflow-x:hidden;
}

.container{
  max-width:700px;
  margin:80px auto;
  padding:20px;
}

.card{
  background:rgba(255,255,255,0.05);
  padding:30px;
  border-radius:15px;
  backdrop-filter:blur(10px);
}

h1{
  text-align:center;
  margin-bottom:25px;
}

.form-group{
  margin-bottom:15px;
}

input{
  width:100%;
  padding:12px;
  border-radius:8px;
  border:none;
  margin-top:5px;
}

.harga-preset{
  margin-top:10px;
  display:flex;
  gap:10px;

display:flex;

gap:10px;

}

.harga-btn{

padding:8px 12px;

border:none;

border-radius:8px;

background:#3a556a;

color:white;

cursor:pointer;

}

.harga-btn:hover{

background:#4e718b;

}

.btn-hitung{

margin-top:20px;

width:100%;

padding:14px;

border:none;

border-radius:10px;

background:linear-gradient(90deg,#00d2ff,#3a7bd5);

color:white;

font-size:16px;

cursor:pointer;

}

.stats{

display:flex;

gap:15px;

margin-top:20px;

}

.stat-box{

flex:1;

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

padding:20px;

border-radius:10px;

text-align:center;

}

.hasil-box{

margin-top:20px;

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

padding:20px;

border-radius:10px;

white-space:pre-line;

}

.analisis-box{

margin-top:20px;

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

padding:20px;

border-radius:10px;

white-space:pre-line;

}

.actions{

margin-top:20px;

display:flex;

gap:10px;

justify-content:center;

}

.actions button{

padding:10px 14px;

border:none;

border-radius:8px;

cursor:pointer;

}

.navbar{

position:sticky;
top:0;

background:rgba(10,30,45,0.9);

backdrop-filter:blur(10px);

z-index:1000;

}

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

.nav-container{

max-width:1200px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 20px;

}

.logo{

font-size:20px;

font-weight:700;

color:#00d4ff;

}

.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{
  padding:8px 10px;
  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;
}

nav a{

color:white;

text-decoration:none;

margin-left:12px;

font-size:12px;

font-weight:500;

white-space:nowrap;

transition:0.2s;

}

nav a:hover{

color:#00d4ff;

}

.hero{

height:70vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);

color:white;

padding:40px;

}

.hero-content{

max-width:700px;

}

.hero h1{

font-size:42px;

margin-bottom:20px;

}

.hero p{

font-size:18px;

opacity:0.9;

margin-bottom:30px;

}

.hero-buttons{

display:flex;

gap:15px;

justify-content:center;

}

.btn-primary{

padding:14px 24px;

background:#00d4ff;

color:#002b36;

border-radius:8px;

text-decoration:none;

font-weight:600;

}

.btn-secondary{

padding:14px 24px;

background:transparent;

border:1px solid white;

color:white;

border-radius:8px;

text-decoration:none;

}

.footer{

background:#0b1f2a;

color:white;

margin-top:80px;

}

.footer-container{

max-width:1200px;

margin:auto;

display:grid;

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

gap:40px;

padding:50px 20px;

}

.footer-links a{

display:block;

color:#ccc;

text-decoration:none;

margin-top:8px;

}

.footer-links a:hover{

color:#00d4ff;

}

.footer-bottom{

text-align:center;

padding:20px;

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

color:#aaa;

}

/* SCROLL TO TOP */

.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: 700px) {
  .nav-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

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

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

  nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: hidden;
    padding: 10px 10px;
    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 a {
    white-space: normal;
    margin-left: 0;
    margin-right: 0;
    padding: 10px 8px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    display: flex;
    justify-content: center;
    min-width: 0;
    box-sizing: border-box;
  }

  .hero {
    height: auto;
    padding: 90px 16px 60px;
  }

  .hero h1 {
    font-size: 28px;
    margin-bottom: 12px;
  }

  .hero p {
    font-size: 14px;
    margin-bottom: 18px;
  }

  .hero-buttons {
    flex-wrap: wrap;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    text-align: center;
  }

  .container {
    margin: 24px auto;
    padding: 16px;
  }

  .card {
    padding: 18px;
  }

  .harga-preset {
    flex-wrap: wrap;
  }

  .stats {
    flex-direction: column;
  }

  .actions {
    flex-wrap: wrap;
  }

  .actions button {
    flex: 1 1 100%;
  }
}