:root {
  --bg-main: #122020;
  --card-bg: #1b4948;
  --primary-mint: #88d49e;
  --accent-teal: #48a9a6;
  --text-light: #e8f6f3;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-main);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Buat jarak bawaan card lebih rapat */
.main-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* Turunkan dari 16px ke 8px */
}

/* Tarik teks agar makin dekat dengan kotaknya */
.set-title {
  font-family: 'Patrick Hand', cursive;
  font-size: 2.2rem;
  color: var(--text-light);
  letter-spacing: 1px;
  margin-bottom: 0px; /* Margin minus untuk mendekatkan ke container */
}

/* Container SET */
.set-container {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: rgba(27, 73, 72, 0.3);
  padding: 24px 32px;
  border-radius: 20px;
  border: 1px solid rgba(72, 169, 166, 0.2);
}

.time-inputs {
  display: flex;
  align-items: center;
}

.colon {
  color: #ffffff;
  font-size: 2rem;
  font-weight: bold;
  margin: 0 6px;
}

.time-input {
  font-family: 'Patrick Hand', cursive;
  background-color: var(--card-bg);
  border: 2px solid var(--accent-teal);
  color: var(--text-light);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 2rem;
  font-weight: bold;
  width: 85px;
  text-align: center;
  outline: none;
  transition: border-color 0.2s ease;
}

.time-input:focus {
  border-color: var(--primary-mint);
}

.btn-set {
  font-family: 'Patrick Hand', cursive;
  background-color: var(--primary-mint);
  color: var(--bg-main);
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-set:hover {
  background-color: var(--accent-teal);
  color: var(--text-light);
}

/* Teks Timer Countdown Raksasa */
.timer-display {
  font-family: 'Patrick Hand', cursive;
  color: var(--primary-mint);
  font-size: 7.5rem;
  letter-spacing: 3px;
}

/* Class untuk Sembunyikan Elemen */
.hidden {
  display: none !important;
}

/* Hilangkan panah spinner di Chrome, Safari, Edge */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hilangkan panah spinner di Firefox & Standar Modern */
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}