/* DK Time Counter — minimalist, responsive */
.dk-time-counter{
  --bg: #4b653f;          /* kotak hijau */
  --fg: #ffffff;          /* warna angka */
  --radius: 22px;
  --h: clamp(70px, 18vw, 180px);     /* tinggi kotak */
  --w: calc(var(--h) * 1.35);        /* lebar kotak */
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(12px, 3vw, 28px);
  width: 100%;
}

.dk-time-counter .dk-tc-box{
  background: var(--bg);
  color: var(--fg);
  width: var(--w);
  height: var(--h);
  border-radius: var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  font-size: clamp(42px, 12vw, 120px);
  box-sizing: border-box;
}

.dk-time-counter .dk-tc-box .dk-tc-d{
  transform: translateY(2px); /* optik lebih simetris */
}

/* Pemisah ':' berupa dua kotak kecil hijau */
.dk-time-counter .dk-tc-sep{
  width: clamp(10px, 3vw, 26px);
  height: calc(var(--h) * 0.65);
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
}

.dk-time-counter .dk-tc-sep::before,
.dk-time-counter .dk-tc-sep::after{
  content:"";
  display:block;
  width: 100%;
  height: calc(var(--h) * 0.14);
  background: var(--bg);
  border-radius: 4px;
}

/* Saat hitung mundur selesai */
.dk-time-counter.dk-tc-done .dk-tc-box{
  opacity: 0.85;
}