/* card pendaftaran */
/* -- Style untuk Card Pendaftaran di Hero Section -- */

/* Style untuk Desktop (lg ke atas) */
.hero-card-pendaftaran {
    position: absolute;
    top: -20%;
    left: -10%;
    max-width: 300px;
    transition: all 0.3s ease; /* Transisi halus saat ukuran berubah */
}

/* Style untuk Mobile (di bawah lg / < 992px) */
@media (max-width: 991.98px) {
    .hero-card-pendaftaran {
        /* Pindahkan posisi agar tidak terlalu keluar layar */
        top: -10%;
        left: -5%;
        /* Perkecil lebar maksimal kartu */
        max-width: 220px;
    }

    /* Perkecil ukuran font heading */
    .hero-card-pendaftaran h3 {
        font-size: 1.5rem; /* Ukuran asli h3 sekitar 1.75rem */
    }

    /* Perkecil ukuran font paragraf */
    .hero-card-pendaftaran p {
        font-size: 0.8rem; /* Ukuran asli fs-14 Anda */
    }

    /* Perkecil ukuran ikon */
    .hero-card-pendaftaran [data-feather] {
        width: 20px;
        height: 20px;
    }
}

/* Penyesuaian untuk layar sangat kecil */
@media (max-width: 575.98px) {
    .hero-card-pendaftaran {
        /* Sembunyikan saja jika terlalu sempit, atau perkecil lagi */
        /* display: none; */
        max-width: 180px;
        left: 0;
    }
    .hero-card-pendaftaran h3 {
        font-size: 1.25rem;
    }
    .hero-card-pendaftaran p {
        font-size: 0.75rem;
    }
}

/* Base style for the circle */
.circle {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the circle initially */
    /* Properties for size, blur, and animation will be overridden by the classes below */
    /* Default radius if no specific radius class is applied */
    --circle-radius: -300px;
    z-index: -5;
}

.blur-circle {
    width: 500px;
    height: 500px; /* Agar stroke terlihat */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Pusatkan objek */
    filter: blur(120px); /* Tingkat blur yang konstan */
    opacity: 0.8; /* Sedikit transparansi agar blur lebih terlihat */
    z-index: -10;
}

/* --- Classes for Circle Size --- */
.circle-small {
    width: 30px;
    height: 30px;
}

.circle-medium {
    width: 50px;
    height: 50px;
}

.circle-large {
    width: 80px;
    height: 80px;
}

/* --- Classes for Rotation Speed --- */
/* These classes control the 'speed rotate' as requested */
.speed-slow {
    animation: rotateCircle 20s infinite linear;
}

.speed-normal {
    animation: rotateCircle 10s infinite linear;
}

.speed-fast {
    animation: rotateCircle 3s infinite linear;
}

/* --- Classes for Blur Level --- */
.blur-low {
    filter: blur(5px);
    opacity: 1;
}

.blur-medium {
    filter: blur(20px);
    opacity: 1;
}

.blur-high {
    filter: blur(40px);
    opacity: 1;
}

/* --- Classes for Circular Path Radius (translateY) --- */
.radius-small {
    --circle-radius: -100px; /* Small radius */
}

.radius-medium {
    --circle-radius: -200px; /* Medium radius */
}

.radius-large {
    --circle-radius: -300px; /* Large radius */
}

/* Keyframes for rotation */
@keyframes rotateCircle {
    0% {
        /* Uses the --circle-radius variable for the circular path */
        transform: translate(-50%, -50%) rotate(0deg)
            translateY(var(--circle-radius));
    }
    100% {
        /* Uses the --circle-radius variable for the circular path */
        transform: translate(-50%, -50%) rotate(360deg)
            translateY(var(--circle-radius));
    }
}