/* Explain: Styles for the Transparansi page hero background gradient. */
/* Latar gradasi hero halaman Transparansi Desa.
   Perpaduan warna dibuat bertahap (multi-stop) agar titik peralihan
   antara warna biru desa dan putih terlihat halus, bukan bergaris kasar. */
.transparansi-hero-bg {
    background-image: linear-gradient(
        to bottom,
        var(--primary-color) 0%,
        var(--primary-color) 30%,
        color-mix(in srgb, var(--primary-color) 62%, var(--cream-color)) 54%,
        color-mix(in srgb, var(--primary-color) 28%, var(--cream-color)) 78%,
        var(--cream-color) 100%
    );
}

@media (min-width: 1024px) {
    .transparansi-hero-bg {
        background-image: linear-gradient(
            to right,
            var(--primary-color) 0%,
            var(--primary-color) 34%,
            color-mix(in srgb, var(--primary-color) 62%, var(--cream-color)) 58%,
            color-mix(in srgb, var(--primary-color) 28%, var(--cream-color)) 80%,
            var(--cream-color) 100%
        );
    }
}

.process-line {
    position: relative;
}

@media (min-width: 1024px) {
    .process-line::before {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        top: 3.5rem;
        height: 1px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary-color) 60%, transparent), transparent);
    }

    .process-line > article {
        position: relative;
        z-index: 1;
    }
}

@media (max-width: 640px) {
    .service-card,
    .news-card,
    .timeline-card {
        min-height: auto;
    }
}

/* Kemunculan kategori pengaduan tambahan dengan transisi lembut bertahap. */
.pengaduan-extra {
    opacity: 0;
    translate: 0 -0.75rem;
    transition: opacity 380ms ease, translate 380ms ease, transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.pengaduan-extra.is-shown {
    opacity: 1;
    translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .pengaduan-extra {
        transition: none;
    }
}

/* Kemunculan kartu layanan administrasi tambahan dengan transisi lembut bertahap. */
.layanan-extra {
    opacity: 0;
    translate: 0 -0.75rem;
    transition: opacity 380ms ease, translate 380ms ease, transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.layanan-extra.is-shown {
    opacity: 1;
    translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .layanan-extra {
        transition: none;
    }
}