#loading-overlay {
	position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.05);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999999; /* sangat tinggi, di atas semua */
    pointer-events: all;
    flex-direction: column;
}

.loading-circle {
	position: relative;
	width: 80px;
	height: 80px;
}

.loading-circle span {
	position: absolute;
	width: 16px;
	height: 16px;
	background-color: #3498db;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform-origin: center;
	opacity: 0.2;
	animation: fadeRotate 1.2s linear infinite;
}

.loading-circle span:nth-child(1) { transform: rotate(0deg) translate(32px) rotate(0deg); animation-delay: 0s; }
.loading-circle span:nth-child(2) { transform: rotate(45deg) translate(32px) rotate(-45deg); animation-delay: 0.15s; }
.loading-circle span:nth-child(3) { transform: rotate(90deg) translate(32px) rotate(-90deg); animation-delay: 0.3s; }
.loading-circle span:nth-child(4) { transform: rotate(135deg) translate(32px) rotate(-135deg); animation-delay: 0.45s; }
.loading-circle span:nth-child(5) { transform: rotate(180deg) translate(32px) rotate(-180deg); animation-delay: 0.6s; }
.loading-circle span:nth-child(6) { transform: rotate(225deg) translate(32px) rotate(-225deg); animation-delay: 0.75s; }
.loading-circle span:nth-child(7) { transform: rotate(270deg) translate(32px) rotate(-270deg); animation-delay: 0.9s; }
.loading-circle span:nth-child(8) { transform: rotate(315deg) translate(32px) rotate(-315deg); animation-delay: 1.05s; }

@keyframes fadeRotate {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 1; }
}

#loading-overlay p {
	margin-top: 10px;
	font-size: 16px;
	color: #333;
	font-weight: 500;
}