/* Token ukuran tetap (sop/rapi.md) */
:root {
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px;
  --t-13: 13px; --t-16: 16px; --t-20: 20px; --t-hero: 64px;
  --digit-h: 1.1em;
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #71717a;
  --hair: #e4e4e7;
  --accent: #16a34a; /* satu aksen: titik "live" */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding:
    calc(var(--s-24) + env(safe-area-inset-top))
    calc(var(--s-24) + env(safe-area-inset-right))
    calc(var(--s-24) + env(safe-area-inset-bottom))
    calc(var(--s-24) + env(safe-area-inset-left));
}

.clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.zone {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--muted);
}
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }

.time {
  display: flex;
  align-items: center;
  font-size: var(--t-hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.digits { display: inline-flex; }
.slot {
  display: inline-block;
  height: var(--digit-h);
  overflow: hidden;
  /* lebar tetap per digit supaya tidak goyang */
  width: 0.62em;
}
.strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.strip span {
  display: block;
  height: var(--digit-h);
  line-height: var(--digit-h);
  text-align: center;
}
.sep {
  color: var(--muted);
  padding: 0 0.04em;
  transform: translateY(-0.04em);
}

.date {
  margin: 0;
  font-size: var(--t-16);
  color: var(--muted);
  text-wrap: balance;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (min-width: 769px) {
  .date { font-size: var(--t-20); }
}
@media (max-width: 768px) {
  .page {
    padding:
      calc(var(--s-16) + env(safe-area-inset-top))
      calc(var(--s-16) + env(safe-area-inset-right))
      calc(var(--s-16) + env(safe-area-inset-bottom))
      calc(var(--s-16) + env(safe-area-inset-left));
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}