/* =============================================================
   SAKTI CSR — Landing / public pages
   Reusable styles. Namespaced with .sakti- to avoid theme clashes.
   Load AFTER bootstrap / Metronic style.bundle.css and main.css
   ============================================================= */

   :root {
    --sakti-navy: #1D293F;
    --sakti-navy-2: #282F65;
    --sakti-gold: #FFC700;
    --sakti-gold-dark: #E6B200;
    --sakti-text-muted: #7E8299;
    --sakti-border: #EFF2F5;
    --sakti-bg-soft: #F5F8FA;
    --sakti-radius: 14px;
    --sakti-shadow: 0 10px 30px rgba(29, 41, 63, .08);
    --sakti-shadow-hover: 0 18px 40px rgba(29, 41, 63, .14);
    --sakti-progress-track: #D9D9D9;
    --sakti-progress-fill: var(--sakti-gold);
}

/* ---------- Generic helpers ---------- */
.sakti-section { padding: 70px 0; }
.sakti-section-sm { padding: 48px 0; }

.sakti-title {
    font-weight: 700;
    color: var(--sakti-navy);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.sakti-subtitle {
    color: var(--sakti-text-muted);
    max-width: 720px;
    margin: 0 auto;
    font-size: .98rem;
}

.sakti-text-gold { color: var(--sakti-gold) !important; }

.sakti-btn-gold {
    background: var(--sakti-gold);
    border: 1px solid var(--sakti-gold);
    color: var(--sakti-navy);
    font-weight: 600;
    border-radius: 8px;
    padding: .65rem 1.4rem;
    transition: .2s all;
}
.sakti-btn-gold:hover {
    background: var(--sakti-gold-dark);
    border-color: var(--sakti-gold-dark);
    color: var(--sakti-navy);
}

.sakti-btn-outline {
    background: transparent;
    border: 1px solid #D8DEE9;
    color: var(--sakti-navy);
    font-weight: 600;
    border-radius: 8px;
    padding: .55rem 1.2rem;
    transition: .2s all;
}
.sakti-btn-outline:hover { border-color: var(--sakti-navy); color: var(--sakti-navy); }

/* ---------- Header / Navbar ---------- */
.sakti-navbar {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.sakti-navbar .navbar-brand img { height: 30px; }
.sakti-navbar .nav-link {
    color: var(--sakti-navy);
    font-weight: 500;
    font-size: .95rem;
    padding: .5rem .9rem !important;
    transition: .2s color;
}
.sakti-navbar .nav-link:hover,
.sakti-navbar .nav-link.active { color: var(--sakti-gold-dark); }

/* ---------- Hero ---------- */
.sakti-hero {
    position: relative;
    min-height: 540px;
    background: var(--sakti-navy);
    background-size: cover;
    background-position: center top;
    overflow: hidden;
}
.sakti-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(29, 41, 63, .15) 0%, rgba(29, 41, 63, .55) 60%, rgba(29, 41, 63, .85) 100%);
}
.sakti-hero__inner { position: relative; z-index: 2; }
.sakti-hero__eyebrow {
    color: var(--sakti-gold);
    font-weight: 600;
    letter-spacing: .03em;
    font-size: .9rem;
}
.sakti-hero__title {
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(1.8rem, 4vw, 3rem);
}
.sakti-hero__desc { color: rgba(255, 255, 255, .8); max-width: 460px; }

/* ---------- Card (program / baznas — reusable) ---------- */
.sakti-card {
    /* background: #fff; */
    border: 0 solid var(--sakti-border);
    border-radius: var(--sakti-radius);
    height: 100%;
    transition: .25s all;
    display: flex;
    flex-direction: column;
}
.sakti-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sakti-shadow-hover);
}
.sakti-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--sakti-radius);
    border: 1px solid var(--sakti-border);
}
.sakti-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sakti-card__badge {
    display: block;
    background: var(--sakti-gold);
    color: var(--sakti-navy);
    font-weight: 600;
    font-size: .72rem;
    padding: .25rem .6rem;
    border-radius: 6px;
    width: fit-content;
    margin-bottom: 4px;
}
.sakti-card__body {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    min-height: 1px;
}
.sakti-card__body-content {
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #f2f2f2;
    border-radius: 0 0 var(--sakti-radius) var(--sakti-radius);
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, .2);
    margin: 0 12px;
}
.sakti-card__title {
    font-weight: 600;
    color: var(--sakti-navy);
    font-size: 1rem;
    line-height: 1.35;
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sakti-card__progress {
    height: 8px;
    border-radius: 50px;
    background-color: var(--sakti-progress-track) !important;
    overflow: hidden;
}
.sakti-card__progress .progress-bar {
    background-color: var(--sakti-progress-fill);
    border-radius: 50px;
    transition: width .35s ease;
}
.sakti-card__meta { font-size: .8rem; }
.sakti-card__meta .label { color: var(--sakti-text-muted); }
.sakti-card__meta .value { color: var(--sakti-navy); font-weight: 600; }
.sakti-card__foot {
    border-top: 1px solid var(--sakti-border);
    margin-top: auto;
    padding-top: .7rem;
    font-size: .78rem;
    color: var(--sakti-text-muted);
}

/* Program card grid — gap between cards (floating body panel needs extra row space) */
.sakti-program-grid {
    --sakti-card-gap: 1.25rem;
    --sakti-card-float: 3.5rem;
    margin-left: calc(var(--sakti-card-gap) * -0.5);
    margin-right: calc(var(--sakti-card-gap) * -0.5);
}
.sakti-program-grid > [class*="col-"] {
    padding-left: calc(var(--sakti-card-gap) * 0.5);
    padding-right: calc(var(--sakti-card-gap) * 0.5);
    margin-bottom: calc(var(--sakti-card-gap) + var(--sakti-card-float));
}
.sakti-program-grid .sakti-card {
    padding-bottom: var(--sakti-card-float);
}
@media (max-width: 575.98px) {
    .sakti-program-grid {
        --sakti-card-gap: 2rem;
        --sakti-card-float: 4rem;
    }
    .sakti-program-grid > [class*="col-"] {
        margin-bottom: calc(var(--sakti-card-gap) + var(--sakti-card-float) + 0.75rem);
    }
}

/* ---------- "Seputar / About" feature cards ---------- */
.sakti-feature {
    background: #fff;
    border: 1px solid var(--sakti-border);
    border-radius: var(--sakti-radius);
    padding: 1.6rem;
    height: 100%;
    transition: .25s all;
}
.sakti-feature:hover { box-shadow: var(--sakti-shadow); }
.sakti-feature h5 { font-weight: 600; color: var(--sakti-navy); }
.sakti-feature p { color: var(--sakti-text-muted); font-size: .9rem; }
.sakti-feature a { color: var(--sakti-navy-2); font-weight: 600; font-size: .88rem; text-decoration: none; }

/* ---------- Tabs (Baznas) ---------- */
.sakti-tabs {
    display: inline-flex;
    background: var(--sakti-bg-soft);
    border-radius: 10px;
    padding: 5px;
    gap: 4px;
}
.sakti-tabs .nav-link {
    border: none;
    border-radius: 8px;
    color: var(--sakti-text-muted);
    font-weight: 600;
    padding: .5rem 1.4rem;
}
.sakti-tabs .nav-link.active {
    background: var(--sakti-gold);
    color: var(--sakti-navy);
}
.sakti-tabs .nav-link:hover:not(.active) {
    background: #fff;
    color: var(--sakti-navy);
}

/* ---------- Partner logos ---------- */
.sakti-partner {
    background: #fff;
    border: 1px solid var(--sakti-border);
    border-radius: var(--sakti-radius);
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: 0 8px;
}
.sakti-partner img { max-height: 80px; max-width: 100%; object-fit: contain; }

/* ---------- News (Berita) ---------- */
.sakti-news-band { background: var(--sakti-bg-soft); }
.sakti-news-card {
    background: #fff;
    border: 1px solid var(--sakti-border);
    border-radius: var(--sakti-radius);
    overflow: hidden;
    height: 100%;
    margin: 0 10px;
}
.sakti-news-card__media { aspect-ratio: 16/10; overflow: hidden; }
.sakti-news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sakti-news-card__body { padding: 1rem 1.1rem 1.2rem; }
.sakti-news-card__title {
    font-weight: 600;
    color: var(--sakti-navy);
    font-size: .98rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sakti-news-card__excerpt {
    color: var(--sakti-text-muted);
    font-size: .85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sakti-chip {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 6px;
    background: rgba(0, 158, 247, .1);
    color: #009EF7;
}

/* ---------- Award logos ---------- */
.sakti-award { height: 90px; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.sakti-award img { max-height: 70px; max-width: 100%; object-fit: contain; }

/* ---------- CTA band ---------- */
.sakti-cta { text-align: center; }
.sakti-cta h3 { font-weight: 700; color: var(--sakti-navy); }
.sakti-cta p { color: var(--sakti-text-muted); }

/* ---------- FAQ ---------- */
.sakti-accordion .accordion-item {
    border: 1px solid var(--sakti-border);
    border-radius: 10px !important;
    margin-bottom: 12px;
    overflow: hidden;
}
.sakti-accordion .accordion-button {
    font-weight: 600;
    color: var(--sakti-navy);
    box-shadow: none;
}
.sakti-accordion .accordion-button:not(.collapsed) {
    background: var(--sakti-bg-soft);
    color: var(--sakti-navy);
}
.sakti-accordion .accordion-body { color: var(--sakti-text-muted); font-size: .92rem; }

/* ---------- Footer ---------- */
.sakti-footer { background: #fff; border-top: 1px solid var(--sakti-border); }
.sakti-footer h6 { font-weight: 600; color: var(--sakti-navy); }
.sakti-footer a, .sakti-footer p, .sakti-footer li { color: var(--sakti-text-muted); text-decoration: none; font-size: .9rem; }
.sakti-footer a:hover { color: var(--sakti-navy-2); }
.sakti-footer__quote {
    background: var(--sakti-bg-soft);
    border-radius: var(--sakti-radius);
    padding: 1.4rem;
    font-style: italic;
    color: var(--sakti-navy);
}
.sakti-footer__bottom { border-top: 1px solid var(--sakti-border); font-size: .82rem; color: var(--sakti-text-muted); }

/* ---------- Responsive ---------- */
/* Tablet 769 - 1024 */
@media (max-width: 1024px) {
    .sakti-hero { min-height: 460px; }
    .sakti-section { padding: 54px 0; }
}
/* Mobile 300 - 768 */
@media (max-width: 768px) {
    .sakti-hero {
        min-height: auto;
        background-position: center;
        padding: 40px 0;
    }
    .sakti-hero::before {
        background: linear-gradient(180deg, rgba(29, 41, 63, .35) 0%, rgba(29, 41, 63, .8) 100%);
    }
    .sakti-hero__inner { text-align: center; }
    .sakti-hero__desc { margin-left: auto; margin-right: auto; }
    .sakti-section { padding: 40px 0; }
    .sakti-tabs { width: 100%; justify-content: center; }
}
@media (max-width: 360px) {
    .sakti-hero__title { font-size: 1.55rem; }
    .sakti-tabs .nav-link { padding: .45rem .9rem; }
}

/* =============================================================
   SAKTI CSR — News listing (Semua Berita) & shared widgets
   ============================================================= */

.sakti-page-title { font-weight: 700; color: var(--sakti-navy); font-size: clamp(1.5rem, 3vw, 2rem); }

/* ---------- Search + filter bar ---------- */
.sakti-search {
    position: relative;
}
.sakti-search .form-control {
    border: 1px solid var(--sakti-border);
    border-radius: 10px;
    padding: .8rem 1rem .8rem 2.7rem;
    background: #fff;
    box-shadow: none;
}
.sakti-search .form-control:focus { border-color: #C9D1DC; }
.sakti-search .bi {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sakti-text-muted);
}
.sakti-toolbtn {
    border: 1px solid var(--sakti-border);
    background: #fff;
    color: var(--sakti-navy);
    font-weight: 500;
    border-radius: 10px;
    padding: .6rem 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: .2s all;
}
.sakti-toolbtn:hover { border-color: #C9D1DC; color: var(--sakti-navy); }

/* ---------- Coloured tags ---------- */
.sakti-tag {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    padding: .28rem .7rem;
    border-radius: 7px;
    background: #DCE6F5;
    color: var(--sakti-navy-2);
}
.sakti-tag--alt { background: #F6E6CF; color: #9A6A1E; }

/* ---------- Horizontal news list card ---------- */
.sakti-listcard {
    display: flex;
    gap: 1.25rem;
    background: #fff;
    border: 1px solid var(--sakti-border);
    border-radius: var(--sakti-radius);
    padding: 1rem;
    transition: .25s all;
}
.sakti-listcard:hover { box-shadow: var(--sakti-shadow); }
.sakti-listcard__media {
    flex: 0 0 270px;
    width: 270px;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
}
.sakti-listcard__media img { width: 100%; height: 100%; object-fit: cover; }
.sakti-listcard__body { flex: 1; display: flex; flex-direction: column; }
.sakti-listcard__title {
    font-weight: 700;
    color: var(--sakti-navy);
    font-size: 1.15rem;
    line-height: 1.35;
}
.sakti-listcard__excerpt { color: var(--sakti-text-muted); font-size: .92rem; }
.sakti-listcard__foot { margin-top: auto; }
.sakti-listcard__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sakti-listcard__author { color: var(--sakti-navy); font-weight: 600; font-size: .85rem; }
.sakti-listcard__date { color: var(--sakti-text-muted); font-size: .85rem; }
.sakti-listcard__date::before { content: '•'; margin-right: .5rem; color: var(--sakti-text-muted); }
.sakti-listcard__more { color: #009EF7; font-weight: 600; font-size: .9rem; text-decoration: none; }
.sakti-listcard__more:hover { color: #007fd1; }

/* ---------- Sidebar widgets ---------- */
.sakti-widget {
    background: #fff;
    border: 1px solid var(--sakti-border);
    border-radius: var(--sakti-radius);
    padding: 1.4rem 1.5rem;
}
.sakti-widget__title { font-weight: 700; color: var(--sakti-navy-2); font-size: 1.15rem; }
.sakti-widget__sep { border: 0; border-top: 1px solid var(--sakti-border); margin: .9rem 0 1.1rem; }

.sakti-popular { display: flex; gap: .9rem; text-decoration: none; }
.sakti-popular + .sakti-popular { margin-top: 1.1rem; }
.sakti-popular__thumb {
    flex: 0 0 88px; width: 88px; height: 66px;
    border-radius: 8px; overflow: hidden;
}
.sakti-popular__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sakti-popular__title {
    font-weight: 600; color: var(--sakti-navy); font-size: .92rem; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sakti-popular__date { color: var(--sakti-text-muted); font-size: .8rem; }

.sakti-pill {
    display: inline-block;
    border: 1px solid var(--sakti-border);
    background: #fff;
    color: var(--sakti-navy);
    font-weight: 500;
    font-size: .9rem;
    padding: .55rem 1rem;
    border-radius: 10px;
    text-decoration: none;
    transition: .2s all;
}
.sakti-pill:hover { background: var(--sakti-bg-soft); color: var(--sakti-navy); }
.sakti-pill.is-active {
    background: var(--sakti-gold);
    border-color: var(--sakti-gold);
    color: var(--sakti-navy);
    font-weight: 600;
}

.sakti-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .65rem;
    margin: 0 -.65rem;
    border-radius: 8px;
    transition: .2s background-color, .2s color;
}
.sakti-check:hover { background: var(--sakti-bg-soft); }
.sakti-check.is-active {
    background: rgba(255, 199, 0, .18);
}
.sakti-check.is-active label { font-weight: 600; color: var(--sakti-navy); }
.sakti-check input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--sakti-gold-dark); }
.sakti-check label { color: var(--sakti-navy); cursor: pointer; margin-bottom: 0; }

/* ---------- Pagination ---------- */
.sakti-pagination { display: flex; justify-content: center; gap: .4rem; }
.sakti-pagination .page-link {
    border: none;
    background: transparent;
    color: var(--sakti-navy);
    font-weight: 500;
    border-radius: 8px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sakti-pagination .page-link:hover { background: var(--sakti-bg-soft); }
.sakti-pagination .page-item.active .page-link { background: var(--sakti-bg-soft); color: var(--sakti-navy); }
.sakti-pagination .page-item.disabled .page-link { color: #C9D1DC; }

/* ---------- Modal (filter / urutkan) ---------- */
.sakti-modal .modal-content { border: 0; border-radius: 16px; box-shadow: 0 20px 60px rgba(29,41,63,.2); }
.sakti-modal .modal-header { border-bottom: 1px solid var(--sakti-border); padding: 1.25rem 1.5rem; }
.sakti-modal .modal-title { font-weight: 600; color: var(--sakti-navy); }
.sakti-modal .modal-body { padding: 1.25rem 1.5rem; }
.sakti-modal .modal-footer { border-top: 1px solid var(--sakti-border); padding: 1rem 1.5rem; }
.sakti-modal__label { font-weight: 600; color: var(--sakti-navy); margin-bottom: .7rem; }

/* selectable chips (btn-check pattern) */
.sakti-choice {
    border: 1px solid var(--sakti-border);
    background: #fff;
    color: var(--sakti-navy);
    font-weight: 500;
    border-radius: 10px;
    padding: .55rem 1rem;
    cursor: pointer;
    transition: .2s all;
    margin: 0;
}
.sakti-choice:hover { border-color: #C9D1DC; }
.btn-check:checked + .sakti-choice {
    background: var(--sakti-gold);
    border-color: var(--sakti-gold);
    color: var(--sakti-navy);
}
.sakti-btn-soft {
    background: var(--sakti-bg-soft);
    border: 1px solid var(--sakti-bg-soft);
    color: var(--sakti-text-muted);
    font-weight: 600;
    border-radius: 8px;
    padding: .6rem 1.2rem;
}
.sakti-btn-soft:hover { background: var(--sakti-border); color: var(--sakti-navy); }

/* ---------- News detail ---------- */
.sakti-author {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.sakti-author__info { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.sakti-author__avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sakti-bg-soft);
}
.sakti-author__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sakti-author__name {
    font-weight: 600;
    color: var(--sakti-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sakti-author__date { color: var(--sakti-text-muted); font-size: .9rem; white-space: nowrap; }

.sakti-detail__title {
    font-weight: 700;
    color: var(--sakti-navy);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.3;
}

.sakti-detail-hero {
    width: 100%;
    max-width: 100%;
    border-radius: var(--sakti-radius);
    overflow: hidden;
    background: var(--sakti-bg-soft);
    aspect-ratio: 16 / 9;
}
.sakti-detail-hero img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

.sakti-article {
    color: var(--sakti-navy);
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.sakti-article img,
.sakti-article video,
.sakti-article iframe {
    max-width: 100% !important;
    width: auto;
    height: auto !important;
    display: block;
}
.sakti-article table { max-width: 100%; display: block; overflow-x: auto; }

.sakti-tag-pill {
    display: inline-block;
    border: 1px solid var(--sakti-border);
    background: #fff;
    color: var(--sakti-navy);
    font-weight: 500;
    font-size: .85rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    text-decoration: none;
}
.sakti-tag-pill:hover { background: var(--sakti-bg-soft); color: var(--sakti-navy); }

.sakti-rekom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.sakti-rekom-card { text-decoration: none; display: block; }
.sakti-rekom-card__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    background: var(--sakti-bg-soft);
    margin-bottom: .65rem;
}
.sakti-rekom-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sakti-rekom-card__title {
    font-weight: 600;
    color: var(--sakti-navy);
    font-size: .95rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sakti-rekom-card__date { color: var(--sakti-text-muted); font-size: .8rem; margin-top: .25rem; }

/* ---------- Responsive (news) ---------- */
@media (max-width: 991.98px) {
    /* sidebar drops below main list on tablet */
    .sakti-news-sidebar,
    .sakti-news-detail-sidebar { margin-top: 1.5rem; }
}
@media (max-width: 575.98px) {
    .sakti-listcard { flex-direction: column; gap: 1rem; }
    .sakti-listcard__media { flex-basis: auto; width: 100%; aspect-ratio: 16/10; }
    .sakti-listcard__foot { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
    .sakti-author { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* =============================================================
   SAKTI CSR — Tentang Kami page (append to sakti-landing.css)
   ============================================================= */

/* ---------- About image+text block ---------- */
.sakti-about__media {
    border-radius: var(--sakti-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.sakti-about__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sakti-about__text {
    color: #444;
    font-size: .97rem;
    line-height: 1.8;
}
.sakti-about__text p { margin-bottom: 1rem; }
.sakti-about__text p:last-child { margin-bottom: 0; }
/* force-center rich text content coming from the CMS editor, which may carry its own inline alignment */
.sakti-about__text--center,
.sakti-about__text--center * {
    text-align: center !important;
}

/* ---------- About image carousel (Image Showcase, kode B) ---------- */
.sakti-about-slider .slick-slide { padding: 0 10px; }
.sakti-about-slider .sakti-about__media {
    aspect-ratio: 16 / 9;
    margin: 0;
}
.sakti-about-slider .slick-dots { bottom: -32px; }

/* ---------- Visi / Misi cards ---------- */
.sakti-visi-misi__card {
    border-radius: var(--sakti-radius);
    padding: 2.5rem 2rem;
    text-align: center;
    height: 100%;
}
.sakti-visi-misi__card--visi { background: #F0F2F5; }         /* cool gray */
.sakti-visi-misi__card--misi { background: #FFF8E6; }         /* warm gold tint */
.sakti-visi-misi__heading {
    font-weight: 700;
    color: var(--sakti-gold-dark);
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}
.sakti-visi-misi__body {
    color: var(--sakti-navy);
    font-size: .97rem;
    line-height: 1.75;
}

/* ---------- Manual Book band ---------- */
.sakti-manual-band {
    background: var(--sakti-navy);
    border-radius: var(--sakti-radius);
    padding: 2.4rem 2.8rem;
}
.sakti-manual-band__title {
    font-weight: 700;
    color: #fff;
    font-size: 1.35rem;
    margin-bottom: .5rem;
}
.sakti-manual-band__desc {
    color: rgba(255, 255, 255, .72);
    font-size: .95rem;
    max-width: 520px;
    margin-bottom: 0;
}

.sakti-visi-misi__card--visi:hover {
    background-color: var(--sakti-navy);
    color: #fff;
    transition: all 0.3s ease;
}

.sakti-visi-misi__card--visi:hover .visi{
    color: #fff;
    transition: all 0.3s ease;
}

.sakti-visi-misi__card--misi:hover {
    background-color: var(--sakti-gold);
    color: #fff;
    transition: all 0.3s ease;
}

.sakti-visi-misi__card--misi:hover .misi{
    color: #fff;
    transition: all 0.3s ease;
}

/* keep heading/body legible against each card's hover background */
.sakti-visi-misi__card--visi:hover .sakti-visi-misi__heading {
    color: var(--sakti-gold);
}
.sakti-visi-misi__card--visi:hover .sakti-visi-misi__body,
.sakti-visi-misi__card--visi:hover .sakti-visi-misi__body * {
    color: var(--sakti-gold);
}

.sakti-visi-misi__card--misi:hover .sakti-visi-misi__heading,
.sakti-visi-misi__card--misi:hover .sakti-visi-misi__body,
.sakti-visi-misi__card--misi:hover .sakti-visi-misi__body * {
    color: var(--sakti-navy);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .sakti-about__media { margin-bottom: 1.5rem; }
    .sakti-manual-band { text-align: center; }
    .sakti-manual-band__desc { margin-left: auto; margin-right: auto; }
    .sakti-manual-band .sakti-btn-gold { margin-top: 1.5rem; }
}
@media (max-width: 575.98px) {
    .sakti-visi-misi__card { padding: 1.75rem 1.25rem; }
    .sakti-manual-band { padding: 1.75rem 1.25rem; }
}

/* =============================================================
   SAKTI CSR — Manual Book download modal
   (append to sakti-landing.css — reuses .sakti-modal base)
   ============================================================= */

/* modal size override for the manual book list */
.sakti-modal--mb .modal-dialog { max-width: 700px; }
.sakti-modal--mb .modal-content { border-radius: 16px; }

/* subtitle under modal title */
.sakti-modal__subtitle { color: var(--sakti-text-muted); font-size: .95rem; margin-top: .25rem; }

/* scrollable list wrapper */
.sakti-mb-list {
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sakti-border) transparent;
}
.sakti-mb-list::-webkit-scrollbar { width: 5px; }
.sakti-mb-list::-webkit-scrollbar-thumb { background: var(--sakti-border); border-radius: 10px; }

/* single list row */
.sakti-mb-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--sakti-border);
}
.sakti-mb-item:last-child { border-bottom: 0; }
.sakti-mb-item__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}
.sakti-mb-item__name {
    color: var(--sakti-navy);
    font-size: .97rem;
    font-weight: 400;
}
.sakti-mb-item__role {
    display: inline-block;
    align-self: flex-start;
    background: var(--sakti-bg-soft);
    color: var(--sakti-navy-2);
    font-size: .76rem;
    font-weight: 600;
    padding: .15rem .55rem;
    border-radius: 6px;
}
.sakti-mb-item__btn {
    flex-shrink: 0;
    background: var(--sakti-gold);
    border: none;
    color: var(--sakti-navy);
    font-weight: 700;
    font-size: .88rem;
    padding: .55rem 1.1rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
    transition: background .2s;
}
.sakti-mb-item__btn:hover { background: var(--sakti-gold-dark); color: var(--sakti-navy); }

/* empty / no-results state */
.sakti-mb-empty { text-align: center; color: var(--sakti-text-muted); padding: 2rem 0; display: none; }
.sakti-mb-empty.active { display: block; }

/* =============================================================
   SAKTI CSR — Program Detail page
   Load AFTER sakti-landing.css
   ============================================================= */

/* ---------- Header ---------- */
.sakti-detail-badge {
    display: inline-block;
    background: var(--sakti-gold);
    color: var(--sakti-navy);
    font-weight: 700;
    font-size: .8rem;
    padding: .4rem .9rem;
    border-radius: 8px;
}
.sakti-detail__title {
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}

/* =============================================================
   GALLERY — CSR MOSAIC (1 – 4 images)
   ============================================================= */

/* shared base */
.sakti-gallery { margin-bottom: 2.5rem; }

/* ------ 1 image: single full-width ------ */
.sakti-gallery--1 .sakti-gallery__single {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    max-height: 440px;
}
.sakti-gallery--1 .sakti-gallery__single img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 440px;
}

/* ------ 2 images: equal columns ------ */
.sakti-gallery--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ------ 3 images: wide left + 2 stacked right ------ */
.sakti-gallery--3 {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 14px;
}
.sakti-gallery--3 .sakti-gallery__grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ------ 4 images: wide left + 2×2 right grid ------ */
.sakti-gallery--4 {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 14px;
}
.sakti-gallery--4 .sakti-gallery__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* shared: main image (used in 2-4 layouts) */
.sakti-gallery__main {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 280px;
}
.sakti-gallery--2 .sakti-gallery__main { min-height: 320px; }
.sakti-gallery--3 .sakti-gallery__main,
.sakti-gallery--4 .sakti-gallery__main { min-height: 380px; }
.sakti-gallery__main img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* shared: thumb */
.sakti-gallery__thumb {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
/* thumb in 2-col layout fills the same height as main */
.sakti-gallery--2 .sakti-gallery__thumb { min-height: 320px; }
/* thumbs in 3-col stack (each half the main height) */
.sakti-gallery--3 .sakti-gallery__thumb { aspect-ratio: 4 / 3; }
/* thumbs in 4-col 2×2 grid */
.sakti-gallery--4 .sakti-gallery__thumb { aspect-ratio: 4 / 3; }

.sakti-gallery__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sakti-gallery__more {
    position: absolute;
    inset: 0;
    background: rgba(29, 41, 63, .6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    text-decoration: none;
}

/* =============================================================
   GALLERY — BAZNAS HERO (always single full-width)
   ============================================================= */
.sakti-gallery--hero .sakti-gallery__hero {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 7;
}
.sakti-gallery--hero .sakti-gallery__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =============================================================
   PANELS — shared
   ============================================================= */
.sakti-panel {
    background: #fff;
    border: 1px solid var(--sakti-border);
    border-radius: var(--sakti-radius);
    padding: 1.75rem;
}
.sakti-panel + .sakti-panel { margin-top: 1.5rem; }
.sakti-detail__label { font-weight: 700; color: var(--sakti-navy); }

/* underline tabs (Deskripsi / Dokumentasi) */
.sakti-detail-tabs { border-bottom: 1px solid var(--sakti-border); }
.sakti-detail-tabs .nav-link {
    flex: 1;
    text-align: center;
    border: 0;
    background: transparent;
    color: var(--sakti-text-muted);
    font-weight: 600;
    padding: .25rem 0 1rem;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
}
.sakti-detail-tabs .nav-link.active {
    color: var(--sakti-navy);
    border-bottom-color: var(--sakti-navy);
    background: transparent;
}

/* rich-text body */
.sakti-prose { color: var(--sakti-text-muted); font-size: .95rem; line-height: 1.7; }
.sakti-prose p { margin-bottom: 1rem; }
.sakti-prose ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.sakti-prose li { margin-bottom: .35rem; }

/* documentation grid */
.sakti-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sakti-doc-grid a { position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; display: block; }
.sakti-doc-grid img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================
   FUNDING CARD — shared
   ============================================================= */
.sakti-fund__label { color: var(--sakti-navy); font-weight: 600; font-size: .95rem; }
.sakti-fund__amount { font-weight: 700; color: var(--sakti-navy); font-size: clamp(1.5rem, 2.5vw, 1.95rem); }
.sakti-fund__divider { border: 0; border-top: 1px solid var(--sakti-border); margin: 1.25rem 0; }
.sakti-detail-link { color: var(--sakti-navy-2); font-weight: 600; text-decoration: underline; }
.sakti-detail-link:hover { color: var(--sakti-navy); }

/* =============================================================
   DONOR CARD — shared
   ============================================================= */
.sakti-donor-count { color: var(--sakti-gold-dark); font-weight: 600; }
.sakti-donor__name { color: var(--sakti-text-muted); font-size: .85rem; }
.sakti-donor__amount { font-weight: 700; color: var(--sakti-navy); }
.sakti-toggle-more {
    background: transparent;
    border: 0;
    color: var(--sakti-navy-2);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.sakti-toggle-more .bi { transition: transform .2s; }
.sakti-toggle-more[aria-expanded="true"] .bi { transform: rotate(180deg); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
/* tablet */
@media (max-width: 991.98px) {
    .sakti-detail-aside { margin-top: 1.5rem; }
    .sakti-gallery--3,
    .sakti-gallery--4 { grid-template-columns: 1fr 1fr; }
    .sakti-gallery--3 .sakti-gallery__main,
    .sakti-gallery--4 .sakti-gallery__main { min-height: 250px; }
    .sakti-gallery--hero .sakti-gallery__hero { aspect-ratio: 16 / 9; }
}

/* mobile */
@media (max-width: 767.98px) {
    /* all CSR mosaic layouts collapse to a stacked list */
    .sakti-gallery--2,
    .sakti-gallery--3,
    .sakti-gallery--4 {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .sakti-gallery--2 .sakti-gallery__main,
    .sakti-gallery--3 .sakti-gallery__main,
    .sakti-gallery--4 .sakti-gallery__main {
        min-height: 220px;
        position: relative;
    }
    .sakti-gallery--3 .sakti-gallery__grid,
    .sakti-gallery--4 .sakti-gallery__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .sakti-gallery--3 .sakti-gallery__thumb,
    .sakti-gallery--4 .sakti-gallery__thumb { aspect-ratio: 4 / 3; }
    .sakti-gallery--2 .sakti-gallery__thumb { min-height: 200px; }
    .sakti-gallery--hero .sakti-gallery__hero { aspect-ratio: 4 / 3; }
    .sakti-doc-grid { grid-template-columns: repeat(2, 1fr); }
    .sakti-detail-tabs .nav-link { font-size: .9rem; }
}

/* =============================================================
   SAKTI CSR — Penghargaan (Award) page
   Load AFTER sakti-landing.css (reuses its CSS variables & helpers)
   ============================================================= */

/* ---------- Stat counter cards ---------- */
.sakti-stat-card {
    background: #fff;
    border: 1px solid var(--sakti-border);
    border-radius: var(--sakti-radius);
    padding: 1.25rem 1.5rem;
    height: 100%;
}
.sakti-stat-card__label {
    color: var(--sakti-text-muted);
    font-size: .85rem;
    margin-bottom: .5rem;
}
.sakti-stat-card__value {
    font-weight: 700;
    color: var(--sakti-navy);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.15;
}

/* ---------- Company award card (horizontal list) ---------- */
.sakti-award-card {
    background: #fff;
    border: 1px solid var(--sakti-border);
    border-radius: var(--sakti-radius);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    cursor: pointer;
    transition: .2s all;
    text-decoration: none;
    color: inherit;
}
.sakti-award-card:hover {
    box-shadow: var(--sakti-shadow);
    border-color: #D0D8E4;
}
.sakti-award-card__logo {
    flex: 0 0 160px;
    width: 160px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--sakti-border);
    padding-right: 1.5rem;
}
.sakti-award-card__logo img {
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
}
.sakti-award-card__body { flex: 1; min-width: 0; }
.sakti-award-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .65rem;
}
.sakti-award-card__name {
    font-weight: 700;
    color: var(--sakti-navy);
    font-size: 1.15rem;
    line-height: 1.3;
}
.sakti-award-card__since {
    flex-shrink: 0;
    font-size: .82rem;
    color: var(--sakti-text-muted);
    text-align: right;
    line-height: 1.3;
}
.sakti-award-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
}
.sakti-award-card__stat { min-width: 130px; }
.sakti-award-card__stat .stat-top {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
    color: var(--sakti-navy);
    font-size: 1rem;
    margin-bottom: .1rem;
}
.sakti-award-card__stat .stat-top i { color: var(--sakti-gold-dark); font-size: 1rem; }
.sakti-award-card__stat .stat-label { color: var(--sakti-text-muted); font-size: .8rem; }

/* ---------- Scrollable Detail Modal ---------- */
.sakti-modal--detail .modal-dialog  { max-width: 600px; }
.sakti-modal--detail .modal-content { border-radius: 16px; }

/* company header inside modal */
.sakti-detail-company {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.sakti-detail-company__logo {
    flex: 0 0 72px;
    width: 72px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sakti-detail-company__logo img { max-width: 100%; max-height: 48px; object-fit: contain; }
.sakti-detail-company__name {
    font-weight: 700;
    color: var(--sakti-navy);
    font-size: 1.1rem;
    line-height: 1.25;
}
.sakti-detail-company__sub { color: var(--sakti-text-muted); font-size: .85rem; }

/* summary number boxes */
.sakti-summary-box {
    border: 1px solid var(--sakti-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    height: 100%;
}
.sakti-summary-box__label { color: var(--sakti-text-muted); font-size: .82rem; margin-bottom: .35rem; }
.sakti-summary-box__value {
    font-weight: 700;
    color: var(--sakti-navy);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
}

/* accordion inside modal */
.sakti-ph-accordion .accordion-item {
    border: 1px solid var(--sakti-border) !important;
    border-radius: 10px !important;
    overflow: hidden;
    margin-bottom: .6rem;
}
.sakti-ph-accordion .accordion-button {
    font-weight: 600;
    color: var(--sakti-navy);
    box-shadow: none;
    background: transparent;
}
.sakti-ph-accordion .accordion-button:not(.collapsed) { background: var(--sakti-bg-soft); }
.sakti-ph-accordion .accordion-count { color: var(--sakti-text-muted); font-weight: 400; }
.sakti-ph-accordion .accordion-body { padding: .75rem 1.25rem; }

/* program item inside accordion */
.sakti-ph-program-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px solid var(--sakti-border);
    text-decoration: none;
    transition: .15s;
}
.sakti-ph-program-item:last-child { border-bottom: 0; }
.sakti-ph-program-item__name {
    color: var(--sakti-navy);
    font-size: .9rem;
    font-weight: 500;
}
.sakti-ph-program-item:hover .sakti-ph-program-item__name { color: var(--sakti-navy-2); }
.sakti-ph-program-item .bi-arrow-up-right { color: var(--sakti-text-muted); font-size: .85rem; }

/* Proyek Terbaru 2-col grid */
.sakti-ph-project {
    display: block;
    text-decoration: none;
    position: relative;
}
.sakti-ph-project__media {
    aspect-ratio: 16 / 11;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: .55rem;
}
.sakti-ph-project__media img { width: 100%; height: 100%; object-fit: cover; }
.sakti-ph-project__name {
    font-weight: 600;
    color: var(--sakti-navy);
    font-size: .88rem;
    line-height: 1.3;
    padding-right: 1.4rem; /* space for arrow */
}
.sakti-ph-project__arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    color: var(--sakti-text-muted);
    font-size: .85rem;
}
.sakti-ph-project:hover .sakti-ph-project__name { color: var(--sakti-navy-2); }

/* modal skeleton / loading state */
.sakti-modal-skeleton { opacity: .4; pointer-events: none; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .sakti-award-card__stat { min-width: 110px; }
}
@media (max-width: 767.98px) {
    .sakti-award-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .sakti-award-card__logo {
        flex-basis: auto;
        width: 100%;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--sakti-border);
        padding-right: 0;
        padding-bottom: 1rem;
        justify-content: flex-start;
    }
    .sakti-award-card__top { flex-wrap: wrap; }
    .sakti-award-card__stats { gap: .75rem 1.25rem; }
    .sakti-award-card__stat { min-width: 120px; }
    .sakti-stat-card__value { font-size: 1.4rem; }
}
@media (max-width: 575.98px) {
    .sakti-award-card__stats { gap: .65rem 1rem; }
    .sakti-award-card__stat { min-width: calc(50% - .5rem); }
}