/* ============================================================
   07-countdown.css  — GERBANG hitung mundur (index.html)
   ------------------------------------------------------------
   Senada sama halaman ucapan: kertas, crayon, childish.
   File ini HANYA dipakai index.html (gerbang), jadi boleh
   ubah body di sini tanpa ganggu ucapan.html.
   ============================================================ */

body{ overflow-y:auto; overflow-x:hidden; }

.countdown{
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap: clamp(8px, 1.8vh, 16px);
  padding: clamp(20px, 5vh, 48px) var(--jarak);
}

.countdown__kicker{
  font-family:var(--font-tulis);
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  color:var(--tinta-lembut);
  background:var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius:999px;
  padding:.15em 1em;
  box-shadow:var(--bayang-kecil);
  transform:rotate(-2deg);
}

.countdown__judul{
  font-family:var(--font-comik); font-weight:800;
  font-size: clamp(2rem, 8vw, 3.4rem);
  line-height:1.1;
}
.countdown__nama{
  color:var(--merah);
  text-decoration:underline wavy var(--kuning) 4px;
  text-underline-offset:.2em;
}

.countdown__umur{
  font-family:var(--font-comik); font-weight:800;
  font-size: clamp(1.3rem, 4.6vw, 2rem);
  color:var(--putih);
  background:var(--biru);
  border: var(--garis) solid var(--tinta);
  border-radius:999px;
  padding:.1em 1em;
  box-shadow:var(--bayang-kecil);
  transform:rotate(1.5deg);
}

/* ---------- kotak angka ---------- */
.countdown__grid{
  display:flex; gap: clamp(8px, 2.4vw, 16px);
  flex-wrap:wrap; justify-content:center;
  margin-top:6px;
}
.cd-box{
  min-width: clamp(64px, 17vw, 96px);
  padding:.5em .4em .6em;
  background:var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang);
  display:flex; flex-direction:column; align-items:center;
  animation: cdGoyang 2.4s ease-in-out infinite;
}
.cd-box:nth-child(1){ background:#FFE3EA; transform:rotate(-3deg); }
.cd-box:nth-child(2){ background:#FFF3C4; transform:rotate(2deg);  animation-delay:.3s; }
.cd-box:nth-child(3){ background:#DFF7E9; transform:rotate(-2deg); animation-delay:.6s; }
.cd-box:nth-child(4){ background:#E3EFFF; transform:rotate(3deg);  animation-delay:.9s; }
.cd-box b{
  font-family:var(--font-comik); font-weight:800;
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  line-height:1;
  font-variant-numeric: tabular-nums;
}
.cd-box span{
  font-family:var(--font-tulis);
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  color:var(--tinta-lembut);
}
@keyframes cdGoyang{
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

.countdown__note{
  font-family:var(--font-tulis);
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  color:var(--tinta-lembut);
}
.countdown__note b{ color:var(--merah); }

/* ---------- keadaan "waktunya tiba" ---------- */
.countdown__buka{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.countdown__hore{
  font-family:var(--font-comik); font-weight:800;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  animation: cdGoyang 1.2s ease-in-out infinite;
}

/* ---------- doodle melayang ---------- */
.doodle{
  position:fixed; z-index:1; pointer-events:none;
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  opacity:.8;
  animation: doodleFloat 5s ease-in-out infinite;
}
.doodle--1{ top:8%;   left:8%;  color:var(--merah); }
.doodle--2{ top:12%;  right:10%; color:var(--biru);   animation-delay:1s; }
.doodle--3{ bottom:14%; left:12%; color:var(--hijau);  animation-delay:2s; }
.doodle--4{ bottom:10%; right:8%; color:var(--oranye); animation-delay:3s; }
.doodle--5{ top:46%;  left:4%;  color:var(--ungu);   animation-delay:1.5s; }
.doodle--6{ top:44%;  right:5%; color:var(--merah);  animation-delay:2.5s; }
@keyframes doodleFloat{
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-14px) rotate(8deg); }
}

/* layar pendek (HP landscape): doodle disembunyikan biar muat */
@media (max-height: 500px){
  .doodle{ display:none; }
  .countdown{ justify-content:flex-start; padding-top:18px; }
}