/* =========================================================
   E-PORTAL LKM
   ANNOUNCEMENT
   COMPACT CORPORATE STYLE
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

body {
    background: #f5f7fa;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.page-head {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 14px 0;
    margin-bottom: 14px;
}

.page-head h1 {
    font-size: 1.3rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
}

.page-head h1 i {
    font-size: 1.1rem;
}

.page-head p {
    margin: 3px 0 0;
    color: #6b7280;
    font-size: .82rem;
}


/* =========================================================
   MAIN CONTENT BOX
========================================================= */

.content-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    overflow: hidden;
}


/* =========================================================
   CONTENT HEADER
========================================================= */

.content-header {
    min-height: 52px;
    padding: 10px 15px;
    border-bottom: 1px solid #e5e7eb;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #ffffff;
}

.content-header h5 {
    margin: 0;
    color: #1e293b;
    font-size: .95rem;
    line-height: 1.3;
    font-weight: 700;
}

.content-header h5 i {
    font-size: .85rem;
}


/* =========================================================
   BADGE JUMLAH INFORMASI
========================================================= */

.content-header .badge {
    font-size: .72rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 20px;
}


/* =========================================================
   NEWS ITEM
========================================================= */

.news-item {
    display: grid;

    /*
    kolom:
    1. gambar
    2. informasi
    3. panah
    */

    grid-template-columns: 82px minmax(0, 1fr) 20px;

    gap: 14px;

    min-height: 92px;

    padding: 14px 18px;

    border-bottom: 1px solid #edf0f2;

    background: #ffffff;

    /*
    INI YANG MEMBUAT
    GAMBAR + TEKS + PANAH
    SEJAJAR VERTIKAL
    */

    align-items: center;

    transition:
        background .15s ease,
        box-shadow .15s ease;
}

.news-item:last-child {
    border-bottom: 0;
}

.news-item:hover {
    background: #f8fbff;
}


/* =========================================================
   NEWS IMAGE
========================================================= */

.news-image {
    width: 82px;
    height: 62px;

    flex: 0 0 82px;

    border-radius: 7px;

    overflow: hidden;

    background: #eef3f8;

    /*
    Posisi gambar selalu
    berada di tengah item
    */

    align-self: center;

    display: flex;
    align-items: center;
    justify-content: center;
}

.news-image img {
    width: 100%;
    height: 100%;

    /*
    Ukuran gambar konsisten
    */

    object-fit: cover;

    display: block;
}

.news-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #94a3b8;

    font-size: 21px;
}


/* =========================================================
   NEWS BODY
========================================================= */

.news-body {
    min-width: 0;

    /*
    Membuat isi berada
    di tengah secara vertikal
    */

    align-self: center;
}


/* =========================================================
   NEWS TITLE
========================================================= */

.news-title {
    font-size: 15px;

    line-height: 1.35;

    font-weight: 700;

    margin: 0 0 4px;

    color: #1e293b;
}

.news-title a {
    color: #1e293b;

    text-decoration: none;

    transition: color .15s ease;
}

.news-title a:hover {
    color: #0d6efd;
}


/* =========================================================
   NEWS EXCERPT
========================================================= */

.news-excerpt {
    font-size: 12.5px;

    line-height: 1.4;

    color: #6b7280;

    margin: 0 0 5px;

    /*
    Hanya satu baris
    agar tampilan tetap padat
    */

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   NEWS META
========================================================= */

.news-meta {
    font-size: 11.5px;

    line-height: 1.3;

    color: #94a3b8;

    white-space: nowrap;
}

.news-category {
    color: #0d6efd;

    font-weight: 600;
}


/* =========================================================
   NEWS ARROW
========================================================= */

.news-arrow {
    width: 20px;
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #cbd5e1;

    transition:
        color .15s ease,
        transform .15s ease;
}

.news-arrow i {
    font-size: 13px;
}

.news-item:hover .news-arrow {
    color: #0d6efd;

    transform: translateX(2px);
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar-box {
    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 9px;

    overflow: hidden;

    margin-bottom: 12px;
}


/* =========================================================
   SIDEBAR TITLE
========================================================= */

.sidebar-title {
    min-height: 43px;

    padding: 9px 13px;

    display: flex;

    align-items: center;

    border-bottom: 1px solid #e5e7eb;

    font-size: .85rem;

    line-height: 1.3;

    font-weight: 700;

    color: #1e293b;
}

.sidebar-title i {
    font-size: .8rem;
}


/* =========================================================
   SIDEBAR MENU
========================================================= */

.sidebar-link {
    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 7px 13px;

    border-bottom: 1px solid #f0f2f4;

    color: #4b5563;

    text-decoration: none;

    font-size: .8rem;

    line-height: 1.2;

    transition:
        background .15s ease,
        color .15s ease;
}

.sidebar-link:last-child {
    border-bottom: 0;
}

.sidebar-link:hover {
    background: #f8fafc;

    color: #0d6efd;
}


/* =========================================================
   SIDEBAR ICON
========================================================= */

.sidebar-icon {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 5px;

    background: #eff6ff;

    color: #0d6efd;

    font-size: 12px;
}

.sidebar-icon i {
    line-height: 1;
}


/* =========================================================
   SIDEBAR INFO
========================================================= */

.sidebar-info {
    padding: 10px 13px;

    font-size: .75rem;

    line-height: 1.45;

    color: #6b7280;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-box {
    min-height: 130px;

    padding: 30px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #94a3b8;
}

.empty-box i {
    display: block;

    font-size: 30px;

    margin-bottom: 7px;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) {

    /*
    Membuat sidebar mengikuti
    area berita secara natural
    */

    .row.g-3 {
        align-items: flex-start;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .news-item {
        grid-template-columns:
            78px
            minmax(0, 1fr)
            18px;

        gap: 12px;

        min-height: 88px;

        padding: 13px 15px;
    }

    .news-image {
        width: 78px;
        height: 59px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .page-head {
        padding: 11px 0;

        margin-bottom: 10px;
    }

    .page-head h1 {
        font-size: 1.15rem;
    }

    .page-head p {
        font-size: .76rem;
    }


    .content-header {
        min-height: 48px;

        padding: 9px 12px;
    }

    .content-header h5 {
        font-size: .88rem;
    }


    .news-item {

        grid-template-columns:
            68px
            minmax(0, 1fr)
            15px;

        gap: 9px;

        min-height: 76px;

        padding: 10px 12px;

        align-items: center;
    }


    .news-image {

        width: 68px;
        height: 53px;

        border-radius: 6px;
    }


    .news-title {

        font-size: .86rem;

        line-height: 1.3;

        margin-bottom: 3px;
    }


    .news-excerpt {

        font-size: .73rem;

        margin-bottom: 4px;
    }


    .news-meta {

        font-size: .68rem;
    }


    .news-arrow i {

        font-size: 11px;
    }


    .sidebar-box {

        margin-bottom: 10px;
    }


    .sidebar-title {

        min-height: 40px;

        padding: 8px 12px;

        font-size: .82rem;
    }


    .sidebar-link {

        min-height: 39px;

        padding: 6px 12px;

        font-size: .77rem;
    }


    .sidebar-icon {

        width: 24px;
        height: 24px;

        flex-basis: 24px;

        font-size: 11px;
    }


    .sidebar-info {

        padding: 9px 12px;

        font-size: .72rem;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .news-item {

        grid-template-columns:
            58px
            minmax(0, 1fr)
            13px;

        gap: 8px;

        padding: 9px 10px;
    }


    .news-image {

        width: 58px;
        height: 48px;
    }


    .news-title {

        font-size: .82rem;
    }


    .news-excerpt {

        font-size: .7rem;
    }

}
/* =========================================================
   ANNOUNCEMENT DETAIL
========================================================= */

.detail-wrapper {
    margin-top: 14px;
}


/* =========================================================
   DETAIL CONTENT
========================================================= */

.detail-content {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    overflow: hidden;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.detail-top {
    padding: 11px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #475569;
    text-decoration: none;

    font-size: .78rem;
    font-weight: 600;

    padding: 6px 10px;

    border: 1px solid #dbe2ea;
    border-radius: 6px;

    background: #ffffff;

    transition: .15s ease;
}

.detail-back:hover {
    color: #0d6efd;
    border-color: #b9d2ff;
    background: #f8fbff;
}


/* =========================================================
   DETAIL HEADER
========================================================= */

.detail-header {
    padding: 18px 20px 14px;
}

.detail-category {
    display: inline-block;

    color: #0d6efd;
    background: #eff6ff;

    font-size: .72rem;
    font-weight: 600;

    padding: 4px 9px;

    border-radius: 20px;

    margin-bottom: 8px;
}

.detail-title {
    color: #1e293b;

    font-size: 1.45rem;
    line-height: 1.35;

    font-weight: 700;

    margin: 0 0 7px;
}

.detail-meta {
    color: #94a3b8;
    font-size: .75rem;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.detail-image {
    width: 100%;
    max-height: 390px;

    overflow: hidden;

    background: #f1f5f9;

    border-top: 1px solid #f0f2f4;
    border-bottom: 1px solid #f0f2f4;
}

.detail-image img {
    width: 100%;
    height: auto;

    max-height: 390px;

    object-fit: cover;

    display: block;
}


/* =========================================================
   DETAIL ARTICLE
========================================================= */

.detail-body {
    padding: 20px 22px 25px;

    color: #374151;

    font-size: .9rem;

    line-height: 1.7;
}

.detail-body p {
    margin-bottom: 13px;
}

.detail-body h2,
.detail-body h3,
.detail-body h4 {
    color: #1e293b;
    margin-top: 22px;
    margin-bottom: 10px;
}

.detail-body ul,
.detail-body ol {
    padding-left: 22px;
    margin-bottom: 15px;
}

.detail-body li {
    margin-bottom: 5px;
}

.detail-body table {
    width: 100%;
    margin-bottom: 15px;
    border-collapse: collapse;
}

.detail-body table th,
.detail-body table td {
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
}


/* =========================================================
   SIDEBAR DETAIL
========================================================= */

.detail-sidebar {
    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 9px;

    overflow: hidden;

    margin-bottom: 12px;
}


/* TITLE */

.detail-sidebar-title {
    min-height: 42px;

    display: flex;
    align-items: center;

    padding: 9px 12px;

    border-bottom: 1px solid #e5e7eb;

    color: #1e293b;

    font-size: .83rem;

    font-weight: 700;
}


/* OTHER NEWS */

.other-news {
    display: block;

    padding: 10px 12px;

    border-bottom: 1px solid #f0f2f4;

    color: #374151;

    text-decoration: none;

    transition: .15s ease;
}

.other-news:last-child {
    border-bottom: 0;
}

.other-news:hover {
    background: #f8fbff;
    color: #0d6efd;
}

.other-news-title {
    font-size: .78rem;

    line-height: 1.4;

    font-weight: 600;

    margin-bottom: 3px;
}

.other-news-meta {
    font-size: .68rem;

    color: #94a3b8;
}


/* =========================================================
   SIDEBAR QUICK MENU
========================================================= */

.detail-menu-link {
    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 37px;

    padding: 6px 12px;

    border-bottom: 1px solid #f0f2f4;

    color: #4b5563;

    text-decoration: none;

    font-size: .77rem;
}

.detail-menu-link:last-child {
    border-bottom: 0;
}

.detail-menu-link:hover {
    background: #f8fafc;
    color: #0d6efd;
}

.detail-menu-icon {
    width: 24px;
    height: 24px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 5px;

    background: #eff6ff;

    color: #0d6efd;

    font-size: 11px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .detail-header {
        padding: 15px 14px 12px;
    }

    .detail-title {
        font-size: 1.15rem;
    }

    .detail-body {
        padding: 16px 14px 20px;

        font-size: .86rem;
    }

    .detail-image {
        max-height: 280px;
    }

    .detail-image img {
        max-height: 280px;
    }

    .detail-top {
        padding: 9px 12px;
    }

}