/* ====================================================== */
/* COMING SOON */
/* ====================================================== */

.coming-soon-card{
    min-height:405px;
    border:1px dashed rgba(125,211,252,.95)!important;
    background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(240,249,255,.72))!important;
    box-shadow:0 12px 30px rgba(15,23,42,.035)!important;
}

.coming-soon-card:hover{
    transform:translateY(-4px);
    border-color:rgba(14,165,233,.72)!important;
    box-shadow:0 18px 40px rgba(14,165,233,.075)!important;
}

.coming-soon-inner{
    min-height:405px;
    padding:34px 26px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.coming-soon-icon{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0284c7;
    background:rgba(224,242,254,.82);
    border:1px solid rgba(186,230,253,.92);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 10px 28px rgba(14,165,233,.08);
}

.coming-soon-badge{
    margin-top:24px;
    padding:7px 11px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#0369a1;
    background:rgba(224,242,254,.76);
    border:1px solid rgba(186,230,253,.90);
    font-size:9px;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}

.coming-soon-title{
    margin-top:15px;
    color:#0f172a;
    font-size:18px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:-.025em;
}

.coming-soon-description{
    max-width:260px;
    margin-top:9px;
    color:#64748b;
    font-size:11px;
    line-height:1.75;
}

.coming-soon-number{
    margin-top:22px;
    color:#94a3b8;
    font-size:9px;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase;
}


/* ====================================================== */
/* PAGINATION - SAMA DENGAN BERITA.HTML */
/* ====================================================== */

.news-pagination-wrap {
    margin-top:
        38px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        13px;
}

.news-pagination-info {
    color:
        #64748b;

    font-size:
        10px;

    font-weight:
        650;

    text-align:
        center;
}

.news-pagination {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        7px;

    border-radius:
        999px;

    border:
        1px solid
        rgba(255,255,255,.95);

    background:
        rgba(255,255,255,.80);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        0 12px 30px
        rgba(15,23,42,.055);
}

.news-page-btn {
    min-width:
        38px;

    height:
        38px;

    padding:
        0 12px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    border:
        0;

    border-radius:
        999px;

    color:
        #64748b;

    background:
        transparent;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        750;

    cursor:
        pointer;

    transition:
        color .25s ease,
        background .25s ease,
        transform .28s cubic-bezier(.16,1,.3,1);
}

.news-page-btn:hover:not(:disabled) {
    color:
        #0284c7;

    background:
        #f0f9ff;

    transform:
        translateY(-1px);
}

.news-page-btn.active {
    color:
        #ffffff;

    background:
        #0ea5e9;

    box-shadow:
        0 8px 18px
        rgba(14,165,233,.23);
}

.news-page-btn:disabled {
    opacity:
        .34;

    cursor:
        default;
}


/* Animasi halaman mengikuti berita.html */
@keyframes newsPageEnter {

    from {
        opacity:
            0;

        transform:
            translate3d(0, 22px, 0)
            scale(.975);

        filter:
            blur(4px);
    }

    to {
        opacity:
            1;

        transform:
            translate3d(0, 0, 0)
            scale(1);

        filter:
            blur(0);
    }

}

.directory-card.pagination-enter {
    animation:
        newsPageEnter
        .58s
        cubic-bezier(.16,1,.3,1)
        both;
}


@media (max-width: 640px) {

    .news-pagination {
        max-width:
            calc(100vw - 28px);
    }

    .news-page-btn {
        min-width:
            34px;

        height:
            34px;

        padding:
            0 9px;
    }

    .news-page-btn.nav span {
        display:
            none;
    }

    .coming-soon-card,
    .coming-soon-inner {
        min-height:
            330px;
    }

}

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

    .directory-card.pagination-enter {
        animation:
            none !important;
    }

}