/* SKELETON */
/* SKELETON */
/* SKELETON */

.img-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 12px;
    background: #f5f5f5;
}

/* image default hidden */
.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* saat loaded */
.img-wrapper.loaded img {
    opacity: 1;
}

/* skeleton */
.skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );
    background-size: 400% 100%;
    animation: skeleton-loading 1.2s infinite;
}

/* hilangkan skeleton saat loaded */
.img-wrapper.loaded .skeleton {
    display: none;
}

@keyframes skeleton-loading {
    0% { background-position: 100% 0 }
    100% { background-position: 0 0 }
}


/* SKELETON ARTIKEL */
.img-wrapper-blog {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 12px;
    background: #f5f5f5;
}

/* image default hidden */
.img-wrapper-blog img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* loaded state */
.img-wrapper-blog.loaded img {
    opacity: 1;
}


/* SKELETON */
/* SKELETON */
/* SKELETON */


.accordion-button {
    background: #fff;
    box-shadow: none;
    border-radius: 8px;
}

.accordion-button:not(.collapsed) {
    background: #f8f9fa;
}