/* Component markup and visual proportions follow the PEN homepage skeletons. */
.home-card-skeleton, .home-custom-skeleton, .blog-news-button-skeleton { display: none; }
.home-skeleton-enabled [data-home-loading]:not(.home-is-ready) {
    position: relative;
    overflow: hidden;
    visibility: visible !important;
    animation: none !important;
    --skeleton-surface: #fff;
    --skeleton-gradient: linear-gradient(90deg, #e4ebf3 0%, #f8fafc 45%, #e4ebf3 100%);
}
.home-skeleton-enabled [data-home-loading]:not(.home-is-ready) [data-home-skeleton-card] {
    position: relative;
    overflow: hidden;
    min-height: 160px;
}
.home-skeleton-enabled [data-home-loading]:not(.home-is-ready) [data-home-skeleton-card] > :not(.home-card-skeleton),
.home-skeleton-enabled [data-home-loading="custom"]:not(.home-is-ready) > :not(.home-custom-skeleton) {
    visibility: hidden !important;
}
.home-skeleton-enabled [data-home-loading]:not(.home-is-ready) .home-card-skeleton {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    border-radius: 10px;
    background: var(--skeleton-surface);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
    pointer-events: none;
}
.home-news-skeleton__thumb, .home-news-skeleton__line,
.blog-news-button-skeleton, .home-exim-skeleton__tab,
.blog-slider-skeleton__image {
    background: var(--skeleton-gradient);
    background-size: 220% 100%;
    animation: homeSkeletonPulse 1.1s ease-in-out infinite;
}
.home-news-skeleton__thumb {
    flex: 0 0 178px;
    width: 100%;
    border-radius: 10px 10px 0 0;
}
.home-news-skeleton__content { flex: 1 1 auto; min-width: 0; padding: 18px; }
.home-news-skeleton__line {
    display: block;
    height: 14px;
    width: 100%;
    margin-bottom: 12px;
    border-radius: 999px;
}
.home-news-skeleton__line:nth-child(2) { width: 72%; }
.home-news-skeleton__line:nth-child(3) { width: 56%; height: 12px; margin-bottom: 0; }
/* Latest news: two title lines, followed by date and view-count placeholders. */
.home-skeleton-enabled .latest-news-panel:not(.home-is-ready) [data-home-skeleton-card] {
    min-height: 78px;
}
.home-skeleton-enabled .latest-news-panel:not(.home-is-ready) .latest-news-skeleton {
    inset: 2px 0 14px;
    gap: 10px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.latest-news-skeleton__title { display: grid; gap: 6px; }
.latest-news-skeleton__title .home-news-skeleton__line {
    width: 96%;
    height: 14px;
    margin: 0;
    border-radius: 4px;
}
.latest-news-skeleton__title .home-news-skeleton__line:last-child { width: 78%; }
.latest-news-list li:nth-child(2) .latest-news-skeleton__title .home-news-skeleton__line:last-child { width: 88%; }
.latest-news-list li:nth-child(3) .latest-news-skeleton__title .home-news-skeleton__line:last-child { width: 68%; }
.latest-news-skeleton__meta { display: flex; align-items: center; gap: 10px; }
.latest-news-skeleton__meta .home-news-skeleton__line {
    width: 58%;
    height: 10px;
    margin: 0;
    border-radius: 4px;
}
.latest-news-skeleton__meta .home-news-skeleton__line:last-child { width: 24px; }
.home-skeleton-enabled .latest-news-panel:not(.home-is-ready) .latest-news-action > a { display: none; }
.home-skeleton-enabled [data-home-loading]:not(.home-is-ready) .blog-news-button-skeleton {
    display: inline-block;
    width: 150px;
    height: 31px;
    border-radius: 10px;
}
/* Publication rows follow the real cover/text columns instead of a square thumbnail. */
.home-skeleton-enabled .pub-list:not(.home-is-ready) a[data-home-skeleton-card] {
    display: block;
    width: 100%;
    min-height: 190px;
}
.home-skeleton-enabled .pub-list:not(.home-is-ready) .publication-skeleton {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 15px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.publication-skeleton__media { display: grid; gap: 7px; }
.publication-skeleton__media .home-news-skeleton__thumb {
    display: block;
    width: 100%;
    height: 155px;
    border-radius: 5px;
}
.publication-skeleton__media .publication-skeleton__date {
    width: 100%;
    height: 22px;
    margin: 0;
    border-radius: 10px;
}
.publication-skeleton__text { min-width: 0; padding-top: 3px; }
.publication-skeleton__title { display: grid; gap: 8px; margin-bottom: 18px; }
.publication-skeleton__title .home-news-skeleton__line {
    width: 100%;
    height: 15px;
    border-radius: 4px;
    margin: 0;
}
.publication-skeleton__title .home-news-skeleton__line:last-child { width: 80%; }
.publication-skeleton__description { display: grid; gap: 8px; }
.publication-skeleton__description .home-news-skeleton__line {
    width: 100%;
    height: 11px;
    border-radius: 4px;
    margin: 0;
}
.publication-skeleton__description .home-news-skeleton__line:last-child { width: 65%; }
.swiper-eselon .home-news-skeleton__thumb { flex-basis: 70px; }
.carausel-testimoni .home-news-skeleton__thumb {
    flex: 0 0 80px;
    width: 80px;
    margin: 24px auto 0;
    border-radius: 50%;
}
.carausel-testimoni .home-news-skeleton__line { margin-left: auto; margin-right: auto; }
.home-skeleton-enabled .carausel-3-columns:not(.home-is-ready) [data-home-skeleton-card] { min-height: 58px; }
.home-skeleton-enabled .carausel-3-columns:not(.home-is-ready) .home-card-skeleton {
    background: var(--skeleton-gradient);
    justify-content: center;
    align-items: center;
}
.carausel-3-columns .home-news-skeleton__thumb {
    flex: 0 0 30px;
    width: 64%;
    border-radius: 8px;
    background: rgba(255,255,255,.82);
}
.carausel-3-columns .home-news-skeleton__content { display: none; }
.home-skeleton-enabled [data-home-loading]:not(.home-is-ready) .home-custom-skeleton { display: block; }
.home-skeleton-enabled .blog-slider:not(.home-is-ready) .blog-slider-skeleton {
    display: flex;
    align-items: center;
    position: absolute;
    inset: 5px;
    z-index: 6;
    gap: 60px;
    padding: 30px;
    --skeleton-gradient: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.42), rgba(255,255,255,.18));
}
.blog-slider-skeleton__image { flex: 0 0 35%; height: 220px; border-radius: 20px; }
.blog-slider-skeleton__content { flex: 1; min-width: 0; }
.home-exim-skeleton { margin-top: 30px; }
.home-exim-skeleton__tabs { display: flex; gap: 20px; padding-bottom: 30px; border-bottom: 1px solid #dce3ec; }
.home-exim-skeleton__tab { flex: 1; height: 86px; border-radius: 12px; }
.home-exim-skeleton__panel { background: var(--skeleton-surface); border-radius: 18px; margin-top: 30px; padding: 20px 16px; }
.home-exim-skeleton__row { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 18px; padding: 24px; border-bottom: 1px solid #dce3ec; }
.home-exim-skeleton__row .home-news-skeleton__line { width: 100%; margin: 0; height: 18px; }
.home-exim-skeleton__row:nth-child(even) { background: rgba(15,98,254,.04); }
[data-theme="dark"] [data-home-loading]:not(.home-is-ready) {
    --skeleton-surface: #1e293b;
    --skeleton-gradient: linear-gradient(90deg, #334155, #475569, #334155);
}
@keyframes homeSkeletonPulse { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
    .home-skeleton-enabled [class*="skeleton"] { animation: none !important; }
}
@media (max-width: 768px) {
    .home-skeleton-enabled .blog-slider:not(.home-is-ready) .blog-slider-skeleton { flex-direction: column; gap: 20px; padding: 16px; }
    .blog-slider-skeleton__image { flex: 0 0 150px; width: 90%; }
    .blog-slider-skeleton__content { width: 100%; }
    .home-exim-skeleton__row { padding: 16px 8px; gap: 10px; grid-template-columns: 2fr 1fr 1fr; }
    .home-exim-skeleton__row > :nth-child(n+4) { display: none; }
}
/* Reserve the visible card columns before carousel initialization. */
.home-skeleton-enabled .swiper-berita:not(.swiper-container-horizontal) .swiper-slide,
.home-skeleton-enabled .swiper-eselon:not(.swiper-container-horizontal) .swiper-slide {
    flex-shrink: 0;
    width: calc((100% - 60px) / 3);
    margin-right: 30px;
}
.home-skeleton-enabled .swiper-eselon:not(.swiper-container-horizontal) .swiper-slide {
    width: calc((100% - 90px) / 4);
}
@media (max-width: 982px) {
    .home-skeleton-enabled .swiper-eselon:not(.swiper-container-horizontal) .swiper-slide {
        width: calc((100% - 60px) / 3);
    }
}
@media (max-width: 768px) {
    .home-skeleton-enabled .swiper-berita:not(.swiper-container-horizontal) .swiper-slide {
        width: calc((100% - 10px) / 2);
        margin-right: 10px;
    }
    .home-skeleton-enabled .swiper-eselon:not(.swiper-container-horizontal) .swiper-slide {
        width: calc((100% - 30px) / 2);
    }
}

.home-skeleton-enabled .carausel-3-columns[data-home-loading="cards"]:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
    --skeleton-columns: 7;
}
.home-skeleton-enabled .carausel-3-columns:not(.slick-initialized) > [data-home-skeleton-card] {
    flex: 0 0 calc(100% / var(--skeleton-columns));
}
@media (max-width: 1023px) {
    .home-skeleton-enabled .carausel-3-columns[data-home-loading="cards"]:not(.slick-initialized) {
        --skeleton-columns: 6;
    }
}
@media (max-width: 779px) {
    .home-skeleton-enabled .carausel-3-columns[data-home-loading="cards"]:not(.slick-initialized) {
        --skeleton-columns: 3;
    }
}

/* The loading grid stays fixed while Swiper creates and moves loop slides. */
.home-news-skeleton-grid { display: none; }
.home-skeleton-enabled .swiper-berita[data-home-loading]:not(.home-is-ready) > .swiper-wrapper {
    visibility: hidden;
}
.home-skeleton-enabled .swiper-berita[data-home-loading]:not(.home-is-ready) > .home-news-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    position: absolute;
    inset: 0 2px;
    z-index: 6;
    pointer-events: none;
}
.home-skeleton-enabled #pills-pelatihan:not(.home-is-ready) [data-home-skeleton-card] {
    width: 100%;
    min-height: 340px;
}
.home-skeleton-enabled .carausel-testimoni[data-home-loading]:not(.slick-initialized) {
    display: flex;
    --skeleton-columns: 4;
}
.home-skeleton-enabled .carausel-testimoni:not(.slick-initialized) > [data-home-skeleton-card] {
    flex: 0 0 calc(100% / var(--skeleton-columns));
}
.home-skeleton-enabled .carausel-testimoni:not(.home-is-ready) [data-home-skeleton-card] {
    min-height: 300px;
}
@media (max-width: 779px) {
    .home-skeleton-enabled .carausel-testimoni[data-home-loading]:not(.slick-initialized) {
        --skeleton-columns: 2;
    }
}

.home-skeleton-enabled .latest-news-panel[data-home-loading]:not(.home-is-ready) .blog-news-button-skeleton {
    width: 120px;
    height: 36px;
    border-radius: 8px;
    vertical-align: middle;
}