/* ── Rijuna Countdown ─────────────────────────────────────────────────────── */

.rijuna-cd-wrapper {
	text-align: center;
	padding: 24px 16px;
}

/* ── Judul ────────────────────────────────────────────────────────────────── */

.rijuna-cd-title {
	font-family: 'Dancing Script', cursive;
	font-size: 20px;
	font-weight: 600;
	color: #2D3B6E;
	margin-bottom: 20px;
	line-height: 1.4;
}

/* ── Baris unit (hari jam menit detik) ────────────────────────────────────── */

.rijuna-cd-units {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

/* ── Setiap unit ──────────────────────────────────────────────────────────── */

.rijuna-cd-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── Ring wrapper ─────────────────────────────────────────────────────────── */

.rijuna-cd-ring-wrap {
	position: relative;
	width: 110px;
	height: 110px;
}

/* ── SVG ──────────────────────────────────────────────────────────────────── */

.rijuna-cd-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg); /* mulai dari atas */
	overflow: visible;
}

.rijuna-cd-svg-track {
	fill: none;
	stroke: rgba(192, 162, 117, 0.18);
	stroke-width: 5;
}

.rijuna-cd-svg-progress {
	fill: none;
	stroke: #C0A275;
	stroke-width: 5;
	stroke-linecap: round;
	transition: stroke-dashoffset 1s linear;
}

/* ── Lingkaran dalam (tempat angka) ──────────────────────────────────────── */

.rijuna-cd-inner {
	position: absolute;
	inset: 10%;
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}

/* ── Angka ────────────────────────────────────────────────────────────────── */

.rijuna-cd-value {
	font-family: Poppins, sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: #2D3B6E;
	line-height: 1;
	display: block;
	transform-style: preserve-3d;
	perspective: 300px;
}

/* Animasi flip angka */
.rijuna-cd-value.rijuna-flipping {
	animation: rijuna-cd-flip 0.35s ease-in-out;
}

@keyframes rijuna-cd-flip {
	0%   { transform: rotateX(0deg);    opacity: 1; }
	40%  { transform: rotateX(-90deg);  opacity: 0; }
	60%  { transform: rotateX(90deg);   opacity: 0; }
	100% { transform: rotateX(0deg);    opacity: 1; }
}

/* ── Label ────────────────────────────────────────────────────────────────── */

.rijuna-cd-label {
	font-family: Poppins, sans-serif;
	font-size: 11px;
	font-weight: 500;
	color: #C0A275;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-top: 10px;
}

/* ── Pemisah ──────────────────────────────────────────────────────────────── */

.rijuna-cd-sep {
	font-size: 18px;
	color: #C0A275;
	line-height: 1;
	align-self: center;
	margin-bottom: 20px; /* kompensasi label bawah */
	user-select: none;
}

/* Animasi denyut pada pemisah */
.rijuna-cd-sep-pulse {
	animation: rijuna-cd-sep-beat 1s ease-in-out infinite;
}

@keyframes rijuna-cd-sep-beat {
	0%, 100% { transform: scale(1);    opacity: 1;    }
	50%       { transform: scale(1.25); opacity: 0.75; }
}

/* ── Denyut pada ring detik ───────────────────────────────────────────────── */

.rijuna-cd-sec-ring.rijuna-cd-ticking .rijuna-cd-inner {
	animation: rijuna-cd-ring-pulse 1s ease-out;
}

@keyframes rijuna-cd-ring-pulse {
	0%   { box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 0 0 0 rgba(192,162,117,0.45); }
	70%  { box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 0 0 12px rgba(192,162,117,0); }
	100% { box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 0 0 0 rgba(192,162,117,0); }
}

/* ── Teks Expired ─────────────────────────────────────────────────────────── */

.rijuna-cd-expired {
	font-family: 'Dancing Script', cursive;
	font-size: 20px;
	color: #C0A275;
	margin-top: 12px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.rijuna-cd-ring-wrap {
		width: 80px;
		height: 80px;
	}

	.rijuna-cd-value {
		font-size: 22px;
	}

	.rijuna-cd-units {
		gap: 12px;
	}

	.rijuna-cd-sep {
		font-size: 14px;
	}
}