body{
  margin:0;
  font-family:Arial, sans-serif;
  background:#0a0e1a;
  color:#e2e8f0;
}

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:#0f172a;
  position:sticky;
  top:0;
  border-bottom:1px solid #1e293b;
}
.navbar .logo{ font-size:22px; font-weight:800; color:#2dd4bf; }
.navbar a{ color:#2dd4bf; text-decoration:none; margin-left:18px; font-size:14px; }

.container{ max-width:600px; margin:auto; padding:16px; }
h2{ font-size:20px; color:#fff; margin:20px 0 12px; display:flex; align-items:center; gap:8px; }

#totalFaucets{ font-size:13px; color:#94a3b8; margin:12px 0; }

/* =====================
   INPUT & SELECT - SAMA LEBAR KAYAK CARD
===================== */
input,
select{
  width:100%; 
  box-sizing: border-box; /* KUNCI: Biar padding gak nambah lebar */
  padding:14px 16px;
  margin-bottom:12px;
  border:1px solid #1e293b;
  border-radius:14px; /* Sama kayak card */
  background:#111827;
  color:#e2e8f0;
  font-size:14px;
  outline:none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input::placeholder{ color:#64748b; }

/* Panah dropdown */
select{
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394A3B8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 40px;
}

input:focus,
select:focus{
  border-color: #2dd4bf;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.2);
}

.badge{
  display:inline-block; padding:4px 6px; margin:4px 6px 4px 0;
  font-size:10px; font-weight:600; border-radius:8px;
  background:transparent; border:1px solid #2dd4bf; color:#2dd4bf;
}

#list, #trending { display:flex; flex-direction:column; gap:12px; }

.card{
  background:#111827;
  border:1px solid #1e293b;
  border-radius:14px; /* Sama kayak input */
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:12px;
}

.rank{
  font-size:14px;
  font-weight:700;
  color:#94a3b8;
  flex-shrink:0;
  width:28px;
}

.info{ flex:1; min-width:0; }
.name{
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.meta{
  font-size:12px;
  color:#94a3b8;
  margin-top:3px;
  display:flex;
  gap:6px;
}

.visit-btn{
  padding:9px 18px;
  background:#0f766e;
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
}
.visit-btn:hover{ background:#0d9488; }

.footer{ 
  text-align:center; 
  color:#64748b; 
  font-size:13px; 
  padding:20px 0; 
  margin-top:30px; 
  border-top:1px solid #1e293b; 
}

/* KUNCI: Warna link di footer */
.footer a{
  color: #2dd4bf; /* Hijau tosa */
  text-decoration: none; /* Buang garis bawah */
  font-weight: 600;
}

.footer a:hover{
  color: #5eead4; /* Hijau lebih terang pas di-hover */
  text-decoration: underline;
}