:root{
  --bg:#0f1724;      /* gelap elegan */
  --card:#0b1220;
  --accent:#ffd166;  /* kuning lembut */
  --muted:#9aa4b2;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, #071024 0%, #081428 100%);
  color:var(--muted);
  -webkit-font-smoothing:antialiased;
}

.card{
  width:320px;
  padding:28px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  text-align:center;
}

/* Jam */
.clock{
  font-size:48px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:4px;
  text-shadow:0 6px 18px rgba(255,209,102,0.07);
  margin-bottom:8px;
}

/* Tanggal */
.date{
  font-size:14px;
  color:var(--muted);
  background: rgba(255,255,255,0.02);
  padding:10px 14px;
  border-radius:10px;
  display:inline-block;
  min-width:260px;
}

/* Responsive */
@media (max-width:380px){
  .card{width:92%; padding:20px}
  .clock{font-size:40px}
}