/* ============================================================
   Hero background animasi — dipakai lewat komponen
   <x-hero-animated-bg> (resources/views/components).

   Warna mengikuti --bs-primary-rgb dari tema, jadi otomatis
   menyesuaikan saat warna tema diubah dari pengaturan.

   Varian tinggi:
     .hero-modern            -> hero penuh (halaman depan)
     .hero-modern.hero-sm    -> hero ringkas (halaman dalam)
   ============================================================ */

.hero-modern {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
            rgba(var(--bs-primary-rgb), .06) 0%,
            rgba(var(--bs-primary-rgb), .02) 40%,
            #ffffff 100%);
}

/* isi hero selalu di atas lapisan dekorasi */
.hero-modern .hero-content {
    position: relative;
    z-index: 2;
}

/* ---------- lapisan dekorasi ---------- */

/* grid halus di belakang */
.hero-modern .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--bs-primary-rgb), .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--bs-primary-rgb), .07) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%);
    pointer-events: none;
}

/* blob gradient yang bergerak pelan */
.hero-modern .hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
    will-change: transform;
}

.hero-modern .hero-blob-1 {
    width: 480px;
    height: 480px;
    top: -140px;
    right: -100px;
    background: radial-gradient(circle at 30% 30%, rgba(var(--bs-primary-rgb), .55), transparent 70%);
    animation: heroFloat1 18s ease-in-out infinite;
}

.hero-modern .hero-blob-2 {
    width: 420px;
    height: 420px;
    bottom: -160px;
    left: -120px;
    background: radial-gradient(circle at 60% 40%, rgba(var(--bs-primary-rgb), .35), transparent 70%);
    animation: heroFloat2 22s ease-in-out infinite;
}

.hero-modern .hero-blob-3 {
    width: 320px;
    height: 320px;
    top: 40%;
    left: 45%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 190, 60, .30), transparent 70%);
    animation: heroFloat3 26s ease-in-out infinite;
}

@keyframes heroFloat1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-60px, 50px) scale(1.12);
    }
}

@keyframes heroFloat2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(70px, -45px) scale(1.08);
    }
}

@keyframes heroFloat3 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-50px, -35px) scale(1.15);
    }

    66% {
        transform: translate(40px, 30px) scale(.92);
    }
}

/* partikel kecil */
.hero-modern .hero-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), .45);
    animation: heroDot 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes heroDot {

    0%,
    100% {
        transform: translateY(0);
        opacity: .25;
    }

    50% {
        transform: translateY(-26px);
        opacity: .8;
    }
}

/* gelombang pemisah di bawah hero */
.hero-modern .hero-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    line-height: 0;
    pointer-events: none;
}

.hero-modern .hero-wave svg {
    width: 100%;
    height: 70px;
    display: block;
}

/* ---------- elemen isi hero ---------- */

/* badge kecil di atas judul */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .95rem;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), .10);
    border: 1px solid rgba(var(--bs-primary-rgb), .22);
    color: var(--bs-primary);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .3px;
    backdrop-filter: blur(6px);
}

.hero-badge .pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* judul dengan gradient bergerak */
.hero-title-gradient {
    background: linear-gradient(90deg,
            var(--bs-primary) 0%,
            rgba(var(--bs-primary-rgb), .55) 45%,
            var(--bs-primary) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heroShine 6s linear infinite;
}

@keyframes heroShine {
    to {
        background-position: 220% center;
    }
}

/* tombol utama dengan efek kilau */
.btn-hero {
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 28px -8px rgba(var(--bs-primary-rgb), .55);
    transition: transform .25s ease, box-shadow .25s ease;
}

.btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -8px rgba(var(--bs-primary-rgb), .65);
}

.btn-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
    animation: heroSweep 3.5s ease-in-out infinite;
}

@keyframes heroSweep {
    0% {
        left: -120%;
    }

    55%,
    100% {
        left: 140%;
    }
}

/* gambar hero + cincin dekoratif */
.hero-visual {
    position: relative;
    display: inline-block;
}

.hero-visual img {
    position: relative;
    z-index: 2;
    animation: heroBob 6s ease-in-out infinite;
    filter: drop-shadow(0 24px 40px rgba(var(--bs-primary-rgb), .22));
}

@keyframes heroBob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}

.hero-visual .hero-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1.5px dashed rgba(var(--bs-primary-rgb), .28);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.hero-visual .hero-ring-1 {
    width: 340px;
    height: 340px;
    animation: heroSpin 26s linear infinite;
}

.hero-visual .hero-ring-2 {
    width: 450px;
    height: 450px;
    border-style: solid;
    border-color: rgba(var(--bs-primary-rgb), .14);
    animation: heroSpin 40s linear infinite reverse;
}

@keyframes heroSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ---------- responsif ---------- */

@media (max-width: 991.98px) {

    .hero-visual .hero-ring-1 {
        width: 260px;
        height: 260px;
    }

    .hero-visual .hero-ring-2 {
        width: 330px;
        height: 330px;
    }

    .hero-modern .hero-blob {
        filter: blur(55px);
        opacity: .45;
    }
}

/* ---------- varian ringkas: hero halaman dalam ----------
   Hero halaman dalam jauh lebih pendek dari hero depan, jadi blob
   ukuran penuh (480px) akan menutupi seluruh area dan terbaca
   sebagai blok warna, bukan aksen. Di sini blob dikecilkan dan
   dibuat lebih transparan supaya judul tetap kontras. */
.hero-modern.hero-sm .hero-blob {
    filter: blur(55px);
    opacity: .40;
}

.hero-modern.hero-sm .hero-blob-1 {
    width: 300px;
    height: 300px;
    top: -110px;
    right: -70px;
}

.hero-modern.hero-sm .hero-blob-2 {
    width: 260px;
    height: 260px;
    bottom: -120px;
    left: -80px;
}

.hero-modern.hero-sm .hero-blob-3 {
    width: 190px;
    height: 190px;
    top: 30%;
    left: 55%;
}

/* grid dibuat lebih samar supaya tidak ramai di area sempit */
.hero-modern.hero-sm .hero-grid {
    opacity: .55;
}

@media (max-width: 767.98px) {
    .hero-modern.hero-sm .hero-blob-3 {
        display: none;
    }
}

/* ---------- aksesibilitas ---------- */

@media (prefers-reduced-motion: reduce) {

    .hero-modern .hero-blob,
    .hero-modern .hero-dot,
    .hero-visual img,
    .hero-visual .hero-ring,
    .hero-title-gradient,
    .btn-hero::after {
        animation: none !important;
    }
}

/* ============================================================
   Section "Mengapa kuliah" + statistik
   ============================================================ */

/* ---------- gambar dengan blob di belakang ---------- */

.figure-glow {
    position: relative;
    display: inline-block;
}

.figure-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 115%;
    padding-bottom: 115%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(var(--bs-primary-rgb), .22), transparent 68%);
    filter: blur(45px);
    z-index: 0;
    animation: heroFloat1 20s ease-in-out infinite;
}

.figure-glow img {
    position: relative;
    z-index: 1;
}

/* ---------- accordion modern ---------- */

.accordion-modern .accordion-item {
    background: #fff;
    border: 1px solid rgba(var(--bs-primary-rgb), .10);
    border-radius: 14px;
    margin-bottom: .85rem;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.accordion-modern .accordion-item:has(.accordion-collapse.show) {
    border-color: rgba(var(--bs-primary-rgb), .32);
    box-shadow: 0 14px 32px -18px rgba(var(--bs-primary-rgb), .55);
}

.accordion-modern .accordion-item:hover {
    transform: translateY(-2px);
}

.accordion-modern .card-header {
    background: transparent;
    border: 0;
    padding: 0;
}

.accordion-modern .accordion-item button {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: 1.05rem 1.15rem;
    background: transparent;
    border: 0;
    text-align: left;
    font-weight: 700;
    font-size: .95rem;
    color: inherit;
    box-shadow: none;
    transition: color .2s ease;
}

.accordion-modern .accordion-item button:not(.collapsed) {
    color: var(--bs-primary);
}

/* nomor urut bulat */
.accordion-modern .accordion-item button .acc-num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(var(--bs-primary-rgb), .10);
    color: var(--bs-primary);
    font-size: .82rem;
    font-weight: 700;
    transition: background .25s ease, color .25s ease;
}

.accordion-modern .accordion-item button:not(.collapsed) .acc-num {
    background: var(--bs-primary);
    color: #fff;
}

/* ikon +/- di kanan */
.accordion-modern .accordion-item button .acc-icon {
    flex: 0 0 auto;
    margin-left: auto;
    position: relative;
    width: 18px;
    height: 18px;
}

.accordion-modern .accordion-item button .acc-icon::before,
.accordion-modern .accordion-item button .acc-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform .3s ease, opacity .3s ease;
}

.accordion-modern .accordion-item button .acc-icon::before {
    width: 14px;
    height: 2px;
}

.accordion-modern .accordion-item button .acc-icon::after {
    width: 2px;
    height: 14px;
}

/* saat terbuka, batang vertikal hilang -> jadi tanda minus */
.accordion-modern .accordion-item button:not(.collapsed) .acc-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

/* hilangkan panah bawaan bootstrap */
.accordion-modern .accordion-button::after {
    display: none;
}

.accordion-modern .card-body {
    padding: 0 1.15rem 1.15rem 4rem;
}

.accordion-modern .card-body p {
    margin-bottom: 0;
    font-size: .9rem;
}

@media (max-width: 575.98px) {
    .accordion-modern .card-body {
        padding-left: 1.15rem;
    }
}

/* ---------- kartu statistik ---------- */

.stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(var(--bs-primary-rgb), .12);
    box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .35);
    overflow: hidden;
    text-align: left;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--bs-primary-rgb), .16), transparent 70%);
    transition: transform .4s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--bs-primary-rgb), .3);
    box-shadow: 0 20px 36px -22px rgba(var(--bs-primary-rgb), .6);
}

.stat-card:hover::before {
    transform: scale(1.35);
}

.stat-card .stat-icon {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(var(--bs-primary-rgb), .10);
}

.stat-card .stat-icon img {
    width: 26px;
    height: 26px;
}

.stat-card .stat-body {
    position: relative;
    min-width: 0;
}

.stat-card .stat-value {
    display: flex;
    align-items: baseline;
    gap: .1rem;
    margin-bottom: .1rem;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bs-primary);
}

.stat-card .stat-value .stat-suffix {
    font-size: 1.15rem;
    font-weight: 700;
}

.stat-card .stat-label {
    margin-bottom: 0;
    font-size: .82rem;
    line-height: 1.25;
    color: #6c757d;
}

@media (prefers-reduced-motion: reduce) {
    .figure-glow::before {
        animation: none !important;
    }
}