/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */
/* =========================================================
   RENCANA PENGGUNAAN ANGGARAN - PA BUNTOK
   ========================================================= */

.rpa-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 20px 40px;
    color: #334155;
}

/* HEADER */

.rpa-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 35px;
    padding: 30px 20px;
    background: linear-gradient(135deg, #0f5132, #176b45);
    border-radius: 18px;
    color: #fff;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15, 81, 50, .15);
}

.rpa-header::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -80px;
    right: -70px;
    border: 25px solid rgba(212, 175, 55, .15);
    border-radius: 50%;
}

.rpa-header::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    left: -50px;
    bottom: -50px;
    border: 15px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.rpa-header-content {
    position: relative;
    z-index: 2;
}

.rpa-label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50px;
    color: #f4d77d;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.rpa-header h1 {
    margin: 0 0 7px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}

.rpa-header p {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
}

/* INTRO */

.rpa-intro {
    margin-bottom: 28px;
    padding: 18px 22px;
    border-left: 4px solid #d4af37;
    border-radius: 10px;
    background: #f8faf9;
    font-size: 15px;
    line-height: 1.7;
}

.rpa-intro strong {
    color: #0f5132;
}

/* GRID */

.rpa-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* CARD */

.rpa-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .06);
    transition: all .25s ease;
}

.rpa-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: #0f5132;
}

.rpa-card:hover {
    border-color: #d8e5dd;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .11);
    transform: translateY(-4px);
}

/* YEAR */

.rpa-year {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.rpa-year-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 12px;
    background: #edf7f1;
    color: #0f5132;
    font-size: 22px;
}

.rpa-year-info {
    flex: 1;
}

.rpa-year-info span {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 12px;
}

.rpa-year-info strong {
    color: #0f5132;
    font-size: 20px;
}

/* DOCUMENT BUTTON */

.rpa-docs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.rpa-doc {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 10px;
    border: 1px solid #dce9e1;
    border-radius: 9px;
    background: #f8faf9;
    color: #0f5132 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    transition: all .2s ease;
}

.rpa-doc:hover {
    border-color: #0f5132;
    background: #0f5132;
    color: #fff !important;
    transform: translateY(-2px);
}

.rpa-doc-icon {
    font-size: 17px;
}

/* FOOTER */

.rpa-note {
    margin-top: 28px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

.rpa-note span {
    color: #0f5132;
    font-weight: 600;
}


/* =========================================================
   SAMBUTAN KETUA PENGADILAN
   PA BUNTOK
   ========================================================= */

.sambutan-ketua {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 20px 40px;
    color: #333;
    font-family: inherit;
    box-sizing: border-box;
}


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

.sambutan-header {
    text-align: center;
    margin-bottom: 28px;
}

.sambutan-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #0b7a3b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sambutan-header h1 {
    margin: 0 !important;
    padding: 0 !important;
    color: #183b2b;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
}

.sambutan-line {
    width: 55px;
    height: 3px;
    margin: 13px auto 0;
    background: #0b7a3b;
    border-radius: 10px;
}


/* =========================================================
   PROFILE KETUA
   ========================================================= */

.sambutan-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 35px;
}


/* FOTO */

.sambutan-photo {
    position: relative;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #dce9e1;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.sambutan-photo img {
    display: block;
    width: 177px;
    height: 262px;
    object-fit: cover;
    border-radius: 9px;
}


/* IDENTITAS */

.sambutan-identity {
    text-align: center;
    margin-top: 16px;
}

.sambutan-identity h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #183b2b;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.sambutan-identity p {
    margin: 5px 0 0 !important;
    padding: 0 !important;
    color: #6b7770;
    font-size: 14px;
}


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

.sambutan-content {
    max-width: 820px;
    margin: 0 auto;
}

.sambutan-content p {
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: #424a46;
    font-size: 15px;
    line-height: 1.9;
    text-align: justify;
}


/* BASMALAH */

.sambutan-basmalah {
    margin-bottom: 8px !important;
    color: #0b7a3b !important;
    font-size: 17px !important;
    font-weight: 600;
    text-align: left !important;
}


/* SALAM */

.sambutan-salam {
    margin-bottom: 25px !important;
    color: #183b2b !important;
    font-size: 15px !important;
    font-weight: 600;
    text-align: left !important;
}


/* =========================================================
   CLOSING
   ========================================================= */

.sambutan-closing {
    max-width: 820px;
    margin: 30px auto 0;
    padding-top: 25px;
    border-top: 1px solid #e3ebe6;
}

.sambutan-wassalam {
    margin: 0 0 35px !important;
    color: #424a46;
    font-size: 15px;
    line-height: 1.8;
}

.sambutan-signature {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sambutan-signature span {
    color: #6b7770;
    font-size: 14px;
}

.sambutan-signature strong {
    color: #183b2b;
    font-size: 17px;
    font-weight: 700;
}


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

@media (max-width: 767px) {

    .sambutan-ketua {
        padding: 5px 15px 30px;
    }

    .sambutan-header {
        margin-bottom: 23px;
    }

    .sambutan-eyebrow {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .sambutan-header h1 {
        font-size: 23px;
    }

    .sambutan-line {
        width: 45px;
        height: 3px;
        margin-top: 10px;
    }

    .sambutan-photo img {
        width: 145px;
        height: 215px;
    }

    .sambutan-photo {
        padding: 5px;
        border-radius: 12px;
    }

    .sambutan-photo img {
        border-radius: 8px;
    }

    .sambutan-identity {
        margin-top: 13px;
    }

    .sambutan-identity h2 {
        font-size: 18px;
    }

    .sambutan-identity p {
        font-size: 13px;
    }

    .sambutan-profile {
        margin-bottom: 28px;
    }

    .sambutan-content p {
        font-size: 14px;
        line-height: 1.85;
        text-align: justify;
    }

    .sambutan-basmalah {
        font-size: 16px !important;
    }

    .sambutan-salam {
        font-size: 14px !important;
    }

    .sambutan-closing {
        margin-top: 25px;
        padding-top: 20px;
    }

    .sambutan-wassalam {
        font-size: 14px;
        margin-bottom: 30px !important;
    }

    .sambutan-signature span {
        font-size: 13px;
    }

    .sambutan-signature strong {
        font-size: 16px;
    }

}

/* =========================================================
   VISI & MISI
   PENGADILAN AGAMA BUNTOK
   ========================================================= */

.visi-misi-pa {
    max-width: 950px;
    margin: 0 auto;
    padding: 10px 20px 40px;
    box-sizing: border-box;
}


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

.visi-misi-header {
    max-width: 700px;
    margin: 0 auto 45px;
    text-align: center;
}

.visi-misi-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #0b7a3b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.visi-misi-header h1 {
    margin: 0 !important;
    padding: 0 !important;
    color: #183b2b;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
}

.visi-misi-line {
    width: 55px;
    height: 3px;
    margin: 14px auto 17px;
    background: #0b7a3b;
    border-radius: 10px;
}

.visi-misi-header p {
    margin: 0 !important;
    color: #758078;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   SECTION LABEL
   ========================================================= */

.visi-label,
.misi-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.visi-label span,
.misi-label span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background: #eaf7ee;
    color: #0b7a3b;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 700;
}

.visi-label h2,
.misi-label h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: #183b2b;

    font-size: 24px;
    font-weight: 700;
}


/* =========================================================
   VISI
   ========================================================= */

.visi-section {
    margin-bottom: 50px;
}

.visi-card {
    position: relative;

    padding: 35px 45px;

    background: linear-gradient(
        135deg,
        #0b7a3b,
        #08612f
    );

    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(11, 122, 59, 0.18);

    overflow: hidden;
}

.visi-card:before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -120px;
    right: -70px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);
}

.visi-card:after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    bottom: -80px;
    left: -40px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);
}

.visi-icon {
    position: relative;
    z-index: 2;

    margin-bottom: 15px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 28px;
}

.visi-card p {
    position: relative;
    z-index: 2;

    max-width: 750px;

    margin: 0 !important;

    color: #ffffff;

    font-size: 22px;
    font-weight: 400;

    line-height: 1.65;
}

.visi-card strong {
    color: #ffffff;
    font-weight: 700;
}


/* =========================================================
   MISI
   ========================================================= */

.misi-section {
    margin-top: 10px;
}

.misi-intro {
    margin: -5px 0 25px !important;

    color: #68756d;

    font-size: 15px;
    line-height: 1.7;
}


/* GRID */

.misi-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}


/* CARD */

.misi-card {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    min-height: 130px;

    padding: 22px;

    background: #ffffff;

    border: 1px solid #e1ebe4;

    border-radius: 14px;

    box-sizing: border-box;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.misi-card:hover {
    transform: translateY(-4px);

    border-color: #b8d9c3;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.07);
}


/* NUMBER */

.misi-number {
    display: flex;

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

    flex-shrink: 0;

    width: 42px;
    height: 42px;

    background: #eaf7ee;

    color: #0b7a3b;

    border-radius: 10px;

    font-size: 13px;
    font-weight: 700;
}


/* CONTENT */

.misi-content h3 {
    margin: 0 0 7px !important;
    padding: 0 !important;

    color: #183b2b;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;
}

.misi-content p {
    margin: 0 !important;
    padding: 0 !important;

    color: #6b7770;

    font-size: 14px;

    line-height: 1.65;
}


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

.visi-misi-image {
    margin-top: 45px;

    text-align: center;
}

.visi-misi-image img {
    display: block;

    width: 100%;
    max-width: 369px;

    height: auto;

    margin: 0 auto;

    border-radius: 14px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);
}


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

@media (max-width: 767px) {

    .visi-misi-pa {
        padding: 5px 15px 30px;
    }

    .visi-misi-header {
        margin-bottom: 32px;
    }

    .visi-misi-eyebrow {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .visi-misi-header h1 {
        font-size: 25px;
    }

    .visi-misi-header p {
        font-size: 14px;
    }


    /* LABEL */

    .visi-label h2,
    .misi-label h2 {
        font-size: 21px;
    }


    /* VISI */

    .visi-card {
        padding: 28px 24px;
        border-radius: 14px;
    }

    .visi-card p {
        font-size: 18px;
        line-height: 1.6;
    }


    /* MISI */

    .misi-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .misi-card {
        min-height: auto;
        padding: 19px;
    }

    .misi-content h3 {
        font-size: 15px;
    }

    .misi-content p {
        font-size: 13px;
    }


    /* IMAGE */

    .visi-misi-image {
        margin-top: 35px;
    }

    .visi-misi-image img {
        max-width: 300px;
    }

}

/* =========================================================
   SEJARAH PENGADILAN
   PA BUNTOK
   ========================================================= */

.sejarah-pa {
    max-width: 950px;
    margin: 0 auto;
    padding: 10px 20px 50px;
    box-sizing: border-box;
}


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

.sejarah-header {
    max-width: 700px;
    margin: 0 auto 35px;
    text-align: center;
}

.sejarah-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #0b7a3b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sejarah-header h1 {
    margin: 0 !important;
    padding: 0 !important;
    color: #183b2b;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
}

.sejarah-line {
    width: 55px;
    height: 3px;
    margin: 14px auto 17px;
    background: #0b7a3b;
    border-radius: 10px;
}

.sejarah-header p {
    margin: 0 !important;
    color: #758078;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.sejarah-image {
    margin: 0 auto 55px;
    text-align: center;
}

.sejarah-image img {
    display: block;
    width: 100%;
    max-width: 515px;
    height: auto;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   INTRO
   ========================================================= */

.sejarah-intro {
    max-width: 750px;
    margin: 0 auto 55px;
    padding: 30px;
    background: #f5f9f6;
    border-left: 4px solid #0b7a3b;
    border-radius: 0 14px 14px 0;
    box-sizing: border-box;
}

.sejarah-tag {
    display: inline-block;
    margin-bottom: 10px;
    color: #0b7a3b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.sejarah-intro h2 {
    margin: 0 0 15px !important;
    padding: 0 !important;
    color: #183b2b;
    font-size: 25px;
    line-height: 1.4;
}

.sejarah-intro p {
    margin: 0 !important;
    color: #68756d;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.sejarah-timeline {
    position: relative;
    max-width: 850px;
    margin: 0 auto;
}

.sejarah-timeline:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 120px;
    width: 2px;
    background: #dce9e1;
}


/* =========================================================
   TIMELINE ITEM
   ========================================================= */

.sejarah-item {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 35px;
    padding-bottom: 45px;
}


/* YEAR */

.sejarah-year {
    position: relative;
    z-index: 2;
    padding-top: 4px;
    text-align: right;
}

.sejarah-year:after {
    content: "";
    position: absolute;
    top: 12px;
    right: -42px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 4px solid #0b7a3b;
    border-radius: 50%;
    box-sizing: border-box;
}

.sejarah-year span {
    display: block;
    margin-bottom: 2px;
    color: #87938b;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.sejarah-year strong {
    display: block;
    color: #0b7a3b;
    font-size: 22px;
    font-weight: 700;
}


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

.sejarah-content {
    padding: 0 0 5px;
}

.sejarah-content h3 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #183b2b;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.sejarah-content p {
    margin: 0 0 15px !important;
    padding: 0 !important;
    color: #505b54;
    font-size: 15px;
    line-height: 1.85;
    text-align: justify;
}


/* =========================================================
   LIST
   ========================================================= */

.sejarah-list {
    margin: 5px 0 15px !important;
    padding-left: 20px !important;
}

.sejarah-list li {
    margin-bottom: 8px;
    padding-left: 5px;
    color: #505b54;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   HIGHLIGHT
   ========================================================= */

.sejarah-highlight .sejarah-content {
    padding: 25px;
    background: #f5f9f6;
    border: 1px solid #e1ebe4;
    border-radius: 14px;
}

.sejarah-note {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 20px;
    padding: 16px 18px;
    background: #eaf7ee;
    border-radius: 10px;
}

.sejarah-note strong {
    color: #0b7a3b;
    font-size: 18px;
}

.sejarah-note span {
    color: #526158;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   FOOTER
   ========================================================= */

.sejarah-footer {
    max-width: 800px;
    margin: 25px auto 0;
    padding: 45px 35px;
    background: linear-gradient(135deg, #0b7a3b, #08612f);
    border-radius: 18px;
    text-align: center;
    box-sizing: border-box;
}

.sejarah-footer span {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.sejarah-footer h2 {
    max-width: 650px;
    margin: 0 auto 25px !important;
    padding: 0 !important;
    color: #ffffff;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.55;
}

.sejarah-footer a {
    display: inline-block;
    padding: 11px 22px;
    background: #ffffff;
    color: #0b7a3b !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform 0.2s ease;
}

.sejarah-footer a:hover {
    transform: translateY(-2px);
}


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

@media (max-width: 767px) {

    .sejarah-pa {
        padding: 5px 15px 35px;
    }

    .sejarah-header {
        margin-bottom: 28px;
    }

    .sejarah-eyebrow {
        font-size: 10px;
    }

    .sejarah-header h1 {
        font-size: 25px;
    }

    .sejarah-header p {
        font-size: 14px;
    }

    .sejarah-image {
        margin-bottom: 40px;
    }

    .sejarah-image img {
        border-radius: 13px;
    }


    /* INTRO */

    .sejarah-intro {
        margin-bottom: 40px;
        padding: 23px 20px;
    }

    .sejarah-intro h2 {
        font-size: 21px;
    }

    .sejarah-intro p {
        font-size: 14px;
    }


    /* TIMELINE */

    .sejarah-timeline:before {
        left: 20px;
    }

    .sejarah-item {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-left: 48px;
        padding-bottom: 35px;
    }

    .sejarah-year {
        padding: 0;
        text-align: left;
    }

    .sejarah-year:after {
        top: 6px;
        right: auto;
        left: -36px;
    }

    .sejarah-year span {
        display: inline;
        margin-right: 5px;
    }

    .sejarah-year strong {
        display: inline;
        font-size: 20px;
    }

    .sejarah-content h3 {
        font-size: 18px;
    }

    .sejarah-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .sejarah-list li {
        font-size: 14px;
    }

    .sejarah-highlight .sejarah-content {
        padding: 20px;
    }


    /* FOOTER */

    .sejarah-footer {
        margin-top: 10px;
        padding: 35px 22px;
        border-radius: 15px;
    }

    .sejarah-footer h2 {
        font-size: 19px;
    }

}

/* =========================================================
   STRUKTUR ORGANISASI
   PENGADILAN AGAMA BUNTOK
   ========================================================= */

.struktur-organisasi {
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 20px 45px;
    box-sizing: border-box;
}


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

.struktur-header {
    max-width: 700px;
    margin: 0 auto 38px;
    text-align: center;
}

.struktur-eyebrow {
    display: block;
    margin-bottom: 7px;

    color: #0b7a3b;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.struktur-header h1 {
    margin: 0 !important;
    padding: 0 !important;

    color: #183b2b;

    font-size: 30px;
    font-weight: 700;

    line-height: 1.3;
}

.struktur-line {
    width: 55px;
    height: 3px;

    margin: 14px auto 17px;

    background: #0b7a3b;

    border-radius: 10px;
}

.struktur-header p {
    margin: 0 !important;
    padding: 0 !important;

    color: #758078;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   CHART WRAPPER
   ========================================================= */

.struktur-chart-wrapper {

    background: #ffffff;

    border: 1px solid #e1ebe4;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.06);

}


/* =========================================================
   CHART HEADER
   ========================================================= */

.struktur-chart-header {

    display: flex;

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

    gap: 20px;

    padding: 18px 24px;

    background: #f5f9f6;

    border-bottom: 1px solid #e1ebe4;

    box-sizing: border-box;
}


.struktur-chart-header span {

    display: block;

    margin-bottom: 4px;

    color: #0b7a3b;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.struktur-chart-header strong {

    display: block;

    color: #183b2b;

    font-size: 16px;
    font-weight: 700;

}


.struktur-chart-action {

    flex-shrink: 0;

    padding: 8px 13px;

    background: #eaf7ee;

    color: #0b7a3b;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 600;

}


/* =========================================================
   ORGANIZATION IMAGE
   ========================================================= */

.struktur-chart {

    padding: 28px;

    background: #ffffff;

    text-align: center;

}


.struktur-chart a {

    display: block;

    text-decoration: none !important;

}


.struktur-chart img {

    display: block;

    width: 100% !important;

    max-width: 872px;

    height: auto !important;

    margin: 0 auto;

    border-radius: 8px;

    cursor: zoom-in;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.struktur-chart img:hover {

    transform: scale(1.01);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.08);

}


/* =========================================================
   NOTE
   ========================================================= */

.struktur-note {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    max-width: 850px;

    margin: 25px auto 0;

    padding: 17px 20px;

    background: #f5f9f6;

    border-radius: 12px;

    box-sizing: border-box;

}


.struktur-note-icon {

    display: flex;

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

    flex-shrink: 0;

    width: 26px;
    height: 26px;

    background: #0b7a3b;

    color: #ffffff;

    border-radius: 50%;

    font-size: 14px;
    font-weight: 700;

}


.struktur-note p {

    margin: 1px 0 0 !important;
    padding: 0 !important;

    color: #66736b;

    font-size: 13px;

    line-height: 1.7;

}


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

@media (max-width: 767px) {

    .struktur-organisasi {

        padding: 5px 10px 30px;

    }


    /* HEADER */

    .struktur-header {

        margin-bottom: 28px;

    }

    .struktur-eyebrow {

        font-size: 10px;

        letter-spacing: 1.2px;

    }

    .struktur-header h1 {

        font-size: 25px;

    }

    .struktur-header p {

        font-size: 14px;

    }


    /* CHART */

    .struktur-chart-wrapper {

        border-radius: 14px;

    }


    .struktur-chart-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding: 17px 18px;

    }


    .struktur-chart-header strong {

        font-size: 14px;

    }


    .struktur-chart-action {

        padding: 7px 11px;

        font-size: 11px;

    }


    .struktur-chart {

        padding: 12px;

        overflow-x: auto;

    }


    /*
     * Gambar struktur tetap cukup besar
     * agar teks di dalam bagan tidak terlalu kecil.
     */

    .struktur-chart a {

        min-width: 650px;

    }


    .struktur-chart img {

        width: 100% !important;

        max-width: none;

        border-radius: 5px;

    }


    /* NOTE */

    .struktur-note {

        margin-top: 18px;

        padding: 15px;

    }

    .struktur-note p {

        font-size: 12px;

    }

}
/* =========================================================
   ALAMAT & KONTAK
   PENGADILAN AGAMA BUNTOK
   ========================================================= */

.alamat-pa {
    max-width: 950px;
    margin: 0 auto;
    padding: 10px 20px 50px;
    box-sizing: border-box;
}


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

.alamat-header {
    max-width: 700px;
    margin: 0 auto 35px;
    text-align: center;
}

.alamat-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #0b7a3b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.alamat-header h1 {
    margin: 0 !important;
    padding: 0 !important;
    color: #183b2b;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
}

.alamat-line {
    width: 55px;
    height: 3px;
    margin: 14px auto 17px;
    background: #0b7a3b;
    border-radius: 10px;
}

.alamat-header p {
    margin: 0 !important;
    color: #758078;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   FOTO GEDUNG
   ========================================================= */

.alamat-building {
    max-width: 760px;
    margin: 0 auto 30px;
    padding: 7px;
    background: #ffffff;
    border: 1px solid #e1ebe4;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
}

.alamat-building img {
    display: block;
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
}


/* =========================================================
   ALAMAT UTAMA
   ========================================================= */

.alamat-main {
    display: flex;
    gap: 28px;
    margin-bottom: 22px;
    padding: 35px;
    background: linear-gradient(135deg, #0b7a3b, #08612f);
    border-radius: 18px;
    box-sizing: border-box;
    box-shadow: 0 12px 35px rgba(11, 122, 59, 0.15);
}

.alamat-main-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 55px;
    height: 55px;

    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;

    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.alamat-main-content {
    flex: 1;
}

.alamat-label {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.alamat-main h2 {
    margin: 0 0 17px !important;
    padding: 0 !important;
    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.4;
}

.alamat-text {
    margin: 0 0 17px !important;
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    line-height: 1.8;
}

.alamat-region {
    display: inline-block;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    color: #ffffff;
    font-size: 13px;
}


/* =========================================================
   GRID KONTAK
   ========================================================= */

.alamat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.alamat-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    padding: 22px;

    background: #ffffff;
    border: 1px solid #e1ebe4;
    border-radius: 14px;

    box-sizing: border-box;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.alamat-card:hover {
    transform: translateY(-4px);
    border-color: #b8d9c3;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
}

.alamat-card-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    background: #eaf7ee;
    border-radius: 10px;

    color: #0b7a3b;
    font-size: 13px;
    font-weight: 700;
}

.alamat-card-content span {
    display: block;
    margin-bottom: 5px;
    color: #87938b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.alamat-card-content strong {
    display: block;
    margin-bottom: 5px;
    color: #183b2b;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.alamat-card-content strong a {
    color: #183b2b !important;
    text-decoration: none !important;
    word-break: break-word;
}

.alamat-card-content strong a:hover {
    color: #0b7a3b !important;
}

.alamat-card-content p {
    margin: 0 !important;
    color: #718078;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   IDENTITAS INSTANSI
   ========================================================= */

.alamat-identity {
    display: flex;
    align-items: center;
    gap: 30px;

    max-width: 760px;
    margin: 35px auto;

    padding: 30px;

    background: #f5f9f6;
    border: 1px solid #e1ebe4;
    border-radius: 16px;

    box-sizing: border-box;
}

.alamat-logo {
    flex-shrink: 0;
}

.alamat-logo img {
    display: block;
    width: 130px;
    height: 130px;
    object-fit: contain;
}

.alamat-identity-content span {
    display: block;
    margin-bottom: 7px;
    color: #0b7a3b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.alamat-identity-content h2 {
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: #183b2b;
    font-size: 23px;
    line-height: 1.4;
}

.alamat-identity-content p {
    margin: 0 !important;
    color: #68756d;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   GOOGLE MAP
   ========================================================= */

.alamat-map-section {
    margin-top: 40px;
}

.alamat-map-header {
    max-width: 650px;
    margin: 0 auto 22px;
    text-align: center;
}

.alamat-map-header span {
    display: block;
    margin-bottom: 7px;
    color: #0b7a3b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.alamat-map-header h2 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #183b2b;
    font-size: 25px;
}

.alamat-map-header p {
    margin: 0 !important;
    color: #758078;
    font-size: 14px;
    line-height: 1.7;
}

.alamat-map {
    overflow: hidden;
    border: 1px solid #e1ebe4;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.alamat-map iframe {
    display: block;
    width: 100% !important;
    height: 400px !important;
    border: 0 !important;
}


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

@media (max-width: 767px) {

    .alamat-pa {
        padding: 5px 15px 35px;
    }

    .alamat-header {
        margin-bottom: 28px;
    }

    .alamat-eyebrow {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .alamat-header h1 {
        font-size: 25px;
    }

    .alamat-header p {
        font-size: 14px;
    }


    /* GEDUNG */

    .alamat-building {
        margin-bottom: 22px;
        padding: 5px;
        border-radius: 14px;
    }

    .alamat-building img {
        border-radius: 10px;
    }


    /* ALAMAT */

    .alamat-main {
        flex-direction: column;
        gap: 18px;
        padding: 27px 23px;
        border-radius: 15px;
    }

    .alamat-main h2 {
        font-size: 21px;
    }

    .alamat-text {
        font-size: 14px;
    }


    /* GRID */

    .alamat-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .alamat-card {
        padding: 19px;
    }


    /* IDENTITAS */

    .alamat-identity {
        flex-direction: column;
        gap: 18px;
        margin: 28px auto;
        padding: 25px 20px;
        text-align: center;
    }

    .alamat-logo img {
        width: 105px;
        height: 105px;
    }

    .alamat-identity-content h2 {
        font-size: 20px;
    }


    /* MAP */

    .alamat-map-section {
        margin-top: 30px;
    }

    .alamat-map-header h2 {
        font-size: 21px;
    }

    .alamat-map {
        border-radius: 14px;
    }

    .alamat-map iframe {
        height: 320px !important;
    }

}

/* =========================================================
   WILAYAH YURISDIKSI
   PENGADILAN AGAMA BUNTOK
   ========================================================= */

.yurisdiksi-pa {
    max-width: 950px;
    margin: 0 auto;
    padding: 10px 20px 50px;
    box-sizing: border-box;
}


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

.yurisdiksi-header {
    max-width: 700px;
    margin: 0 auto 35px;
    text-align: center;
}

.yurisdiksi-eyebrow {
    display: block;
    margin-bottom: 7px;

    color: #0b7a3b;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.yurisdiksi-header h1 {
    margin: 0 !important;
    padding: 0 !important;

    color: #183b2b;

    font-size: 30px;
    font-weight: 700;

    line-height: 1.3;
}

.yurisdiksi-line {
    width: 55px;
    height: 3px;

    margin: 14px auto 17px;

    background: #0b7a3b;

    border-radius: 10px;
}

.yurisdiksi-header p {
    margin: 0 !important;

    color: #758078;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   MAP
   ========================================================= */

.yurisdiksi-map-card {
    max-width: 700px;
    margin: 0 auto 28px;

    background: #ffffff;

    border: 1px solid #e1ebe4;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.06);
}

.yurisdiksi-map-title {
    padding: 18px 22px;

    background: #f5f9f6;

    border-bottom: 1px solid #e1ebe4;
}

.yurisdiksi-map-title span {
    display: block;

    margin-bottom: 4px;

    color: #0b7a3b;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.2px;
}

.yurisdiksi-map-title strong {
    color: #183b2b;

    font-size: 16px;
}

.yurisdiksi-map {
    padding: 25px;

    text-align: center;
}

.yurisdiksi-map img {
    display: block;

    width: auto !important;
    max-width: 100%;

    height: auto !important;

    margin: 0 auto;

    border-radius: 8px;
}

.yurisdiksi-map-caption {
    padding: 12px 20px;

    border-top: 1px solid #edf2ee;

    color: #7b877f;

    font-size: 12px;

    text-align: center;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.yurisdiksi-summary {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 40px;

    padding: 25px 28px;

    background: linear-gradient(
        135deg,
        #0b7a3b,
        #08612f
    );

    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(11, 122, 59, 0.13);
}

.yurisdiksi-summary-number {
    display: flex;

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

    flex-shrink: 0;

    width: 65px;
    height: 65px;

    background: rgba(255, 255, 255, 0.13);

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 15px;

    color: #ffffff;

    font-size: 28px;
    font-weight: 700;
}

.yurisdiksi-summary span {
    display: block;

    margin-bottom: 3px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.2px;
}

.yurisdiksi-summary strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 18px;
}

.yurisdiksi-summary p {
    margin: 0 !important;

    color: rgba(255, 255, 255, 0.85);

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.yurisdiksi-section-title {
    margin-bottom: 20px;
}

.yurisdiksi-section-title span {
    display: block;

    margin-bottom: 5px;

    color: #0b7a3b;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.2px;
}

.yurisdiksi-section-title h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: #183b2b;

    font-size: 24px;
}


/* =========================================================
   KECAMATAN CARD
   ========================================================= */

.yurisdiksi-card {
    margin-bottom: 15px;

    background: #ffffff;

    border: 1px solid #e1ebe4;

    border-radius: 15px;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.yurisdiksi-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.06);
}


.yurisdiksi-card-head {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 19px 22px;

    background: #f5f9f6;

    border-bottom: 1px solid #e6eee8;
}


.yurisdiksi-number {
    display: flex;

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

    flex-shrink: 0;

    width: 42px;
    height: 42px;

    background: #eaf7ee;

    border-radius: 10px;

    color: #0b7a3b;

    font-size: 12px;
    font-weight: 700;
}


.yurisdiksi-card-head span {
    display: block;

    margin-bottom: 3px;

    color: #8a958e;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}


.yurisdiksi-card-head h3 {
    margin: 0 !important;
    padding: 0 !important;

    color: #183b2b;

    font-size: 18px;

    line-height: 1.4;
}


.yurisdiksi-distance {
    margin-left: auto;

    padding: 7px 12px;

    background: #ffffff;

    border: 1px solid #dce8df;

    border-radius: 7px;

    color: #0b7a3b;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


.yurisdiksi-card-body {
    padding: 20px 22px 23px;
}


.yurisdiksi-card-body p {
    margin: 0 0 10px !important;

    color: #69766e;

    font-size: 13px;

    line-height: 1.6;
}


.yurisdiksi-card-body p strong {
    color: #183b2b;
}


.yurisdiksi-list {
    color: #59665e;

    font-size: 14px;

    line-height: 1.85;

    text-align: justify;
}


/* =========================================================
   DISTANCE SUMMARY
   ========================================================= */

.yurisdiksi-distance-box {
    margin-top: 35px;

    padding: 28px;

    background: #f5f9f6;

    border: 1px solid #e1ebe4;

    border-radius: 16px;
}


.yurisdiksi-distance-title {
    margin-bottom: 20px;
}


.yurisdiksi-distance-title span {
    display: block;

    margin-bottom: 5px;

    color: #0b7a3b;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.2px;
}


.yurisdiksi-distance-title h2 {
    margin: 0 !important;

    color: #183b2b;

    font-size: 22px;
}


.yurisdiksi-distance-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;
}


.yurisdiksi-distance-grid div {
    padding: 15px;

    background: #ffffff;

    border: 1px solid #e1ebe4;

    border-radius: 10px;
}


.yurisdiksi-distance-grid span {
    display: block;

    margin-bottom: 5px;

    color: #7c8881;

    font-size: 11px;

    line-height: 1.4;
}


.yurisdiksi-distance-grid strong {
    color: #0b7a3b;

    font-size: 18px;
}


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

@media (max-width: 767px) {

    .yurisdiksi-pa {
        padding: 5px 15px 35px;
    }


    .yurisdiksi-header {
        margin-bottom: 28px;
    }


    .yurisdiksi-header h1 {
        font-size: 25px;
    }


    .yurisdiksi-header p {
        font-size: 14px;
    }


/* =========================================================
   PETA YURISDIKSI - UKURAN LEBIH KOMPAK
   ========================================================= */

.yurisdiksi-map-card {
    max-width: 560px;
    margin: 0 auto 28px;

    background: #ffffff;

    border: 1px solid #e1ebe4;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.05);
}


.yurisdiksi-map {
    padding: 20px;

    text-align: center;
}


.yurisdiksi-map img {
    display: block;

    width: 220px !important;
    max-width: 80%;

    height: auto !important;

    margin: 0 auto;

    border-radius: 7px;
}


.yurisdiksi-map-caption {
    padding: 10px 20px;

    border-top: 1px solid #edf2ee;

    color: #7b877f;

    font-size: 11px;

    text-align: center;
}


    /* SUMMARY */

    .yurisdiksi-summary {
        gap: 15px;

        padding: 21px;

        border-radius: 14px;
    }

    .yurisdiksi-summary-number {
        width: 52px;
        height: 52px;

        font-size: 23px;
    }

    .yurisdiksi-summary strong {
        font-size: 16px;
    }


    /* SECTION */

    .yurisdiksi-section-title h2 {
        font-size: 21px;
    }


    /* CARD */

    .yurisdiksi-card-head {
        padding: 16px;

        gap: 12px;
    }

    .yurisdiksi-card-head h3 {
        font-size: 16px;
    }

    .yurisdiksi-number {
        width: 38px;
        height: 38px;
    }

    .yurisdiksi-distance {
        padding: 6px 9px;

        font-size: 11px;
    }

    .yurisdiksi-card-body {
        padding: 17px;
    }

    .yurisdiksi-list {
        font-size: 13px;

        line-height: 1.8;

        text-align: left;
    }


    /* DISTANCE */

    .yurisdiksi-distance-box {
        padding: 21px;
    }

    .yurisdiksi-distance-title h2 {
        font-size: 20px;
    }

    .yurisdiksi-distance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}
/* =========================================================
   TUGAS POKOK DAN FUNGSI
   PENGADILAN AGAMA BUNTOK
   ========================================================= */

.tupoksi-pa {
    max-width: 950px;
    margin: 0 auto;
    padding: 10px 20px 50px;
    box-sizing: border-box;
}


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

.tupoksi-header {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.tupoksi-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: #0b7a3b;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.tupoksi-header h1 {
    margin: 0 !important;
    padding: 0 !important;

    color: #183b2b;

    font-size: 30px;
    font-weight: 700;

    line-height: 1.3;
}

.tupoksi-line {
    width: 55px;
    height: 3px;

    margin: 14px auto 17px;

    background: #0b7a3b;

    border-radius: 10px;
}

.tupoksi-header p {
    margin: 0 !important;

    color: #758078;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   SECTION
   ========================================================= */

.tupoksi-section {
    margin-bottom: 28px;

    background: #ffffff;

    border: 1px solid #e1ebe4;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.tupoksi-section-head {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 20px 24px;

    background: #f5f9f6;

    border-bottom: 1px solid #e4ece6;
}

.tupoksi-icon {
    display: flex;

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

    flex-shrink: 0;

    width: 45px;
    height: 45px;

    background: #eaf7ee;

    border-radius: 11px;

    color: #0b7a3b;

    font-size: 12px;
    font-weight: 700;
}

.tupoksi-section-head span {
    display: block;

    margin-bottom: 3px;

    color: #849088;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.2px;
}

.tupoksi-section-head h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: #183b2b;

    font-size: 20px;
}


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

.tupoksi-content {
    padding: 25px 27px 30px;
}

.tupoksi-content > p {
    margin: 0 0 20px !important;

    color: #59665e;

    font-size: 14px;

    line-height: 1.85;

    text-align: justify;
}


/* =========================================================
   KEWENANGAN
   ========================================================= */

.tupoksi-kewenangan {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin: 22px 0 25px;
}

.tupoksi-kewenangan-item {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 14px;

    background: #f8fbf9;

    border: 1px solid #e3ece6;

    border-radius: 9px;
}

.tupoksi-kewenangan-item span {
    display: flex;

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

    width: 26px;
    height: 26px;

    flex-shrink: 0;

    background: #eaf7ee;

    border-radius: 7px;

    color: #0b7a3b;

    font-size: 10px;
    font-weight: 700;
}

.tupoksi-kewenangan-item strong {
    color: #33483b;

    font-size: 13px;
}


/* =========================================================
   NOTE / DASAR HUKUM
   ========================================================= */

.tupoksi-note {
    margin-top: 25px;

    padding: 22px;

    background: #f5f9f6;

    border-left: 3px solid #0b7a3b;

    border-radius: 0 10px 10px 0;
}

.tupoksi-note > strong {
    display: block;

    margin-bottom: 12px;

    color: #183b2b;

    font-size: 14px;
}

.tupoksi-note p {
    margin: 0 0 12px !important;

    color: #59665e;

    font-size: 13px;

    line-height: 1.8;

    text-align: justify;
}

.tupoksi-note p:last-child {
    margin-bottom: 0 !important;
}


/* =========================================================
   FUNGSI GRID
   ========================================================= */

.tupoksi-fungsi-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    margin-top: 25px;
}


/* =========================================================
   FUNGSI CARD
   ========================================================= */

.tupoksi-fungsi-card {
    position: relative;

    padding: 22px;

    background: #ffffff;

    border: 1px solid #e1ebe4;

    border-radius: 12px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.tupoksi-fungsi-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.05);
}

.tupoksi-fungsi-number {
    display: flex;

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

    width: 34px;
    height: 34px;

    margin-bottom: 13px;

    background: #eaf7ee;

    border-radius: 8px;

    color: #0b7a3b;

    font-size: 10px;
    font-weight: 700;
}

.tupoksi-fungsi-card h3 {
    margin: 0 0 9px !important;
    padding: 0 !important;

    color: #183b2b;

    font-size: 16px;
}

.tupoksi-fungsi-card p {
    margin: 0 0 12px !important;

    color: #59665e;

    font-size: 13px;

    line-height: 1.75;

    text-align: justify;
}

.tupoksi-fungsi-card small {
    display: block;

    padding-top: 10px;

    border-top: 1px solid #edf2ee;

    color: #87928b;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   FOOTER
   ========================================================= */

.tupoksi-footer {
    display: flex;

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

    gap: 20px;

    margin-top: 30px;

    padding: 20px 24px;

    background: linear-gradient(
        135deg,
        #0b7a3b,
        #08612f
    );

    border-radius: 13px;

    color: #ffffff;
}

.tupoksi-footer strong {
    font-size: 14px;
}

.tupoksi-footer span {
    color: rgba(255, 255, 255, 0.8);

    font-size: 12px;
}


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

@media (max-width: 767px) {

    .tupoksi-pa {
        padding: 5px 15px 35px;
    }


    .tupoksi-header {
        margin-bottom: 28px;
    }


    .tupoksi-header h1 {
        font-size: 25px;
    }


    .tupoksi-header p {
        font-size: 13px;
    }


    /* SECTION */

    .tupoksi-section {
        border-radius: 13px;
    }


    .tupoksi-section-head {
        padding: 17px;

        gap: 12px;
    }


    .tupoksi-icon {
        width: 39px;
        height: 39px;
    }


    .tupoksi-section-head h2 {
        font-size: 17px;
    }


    .tupoksi-content {
        padding: 20px 17px 23px;
    }


    .tupoksi-content > p {
        font-size: 13px;

        line-height: 1.8;

        text-align: left;
    }


    /* KEWENANGAN */

    .tupoksi-kewenangan {
        grid-template-columns: repeat(2, 1fr);

        gap: 8px;
    }


    .tupoksi-kewenangan-item {
        padding: 11px;

        gap: 8px;
    }


    .tupoksi-kewenangan-item strong {
        font-size: 12px;
    }


    /* NOTE */

    .tupoksi-note {
        padding: 17px;
    }


    .tupoksi-note p {
        font-size: 12px;

        line-height: 1.75;

        text-align: left;
    }


    /* FUNGSI */

    .tupoksi-fungsi-grid {
        grid-template-columns: 1fr;

        gap: 11px;
    }


    .tupoksi-fungsi-card {
        padding: 18px;
    }


    .tupoksi-fungsi-card p {
        font-size: 12px;

        text-align: left;
    }


    /* FOOTER */

    .tupoksi-footer {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

        padding: 18px;
    }

}

/* =========================================================
   BIAYA PERKARA
   ========================================================= */

.biaya-perkara {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    font-family: Arial, sans-serif;
}


/* =========================================================
   JUDUL
   ========================================================= */

.biaya-perkara-title {
    margin: 0 0 18px 0 !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
}


/* =========================================================
   TABLE
   ========================================================= */

.biaya-perkara-table {
    width: 100%;
    max-width: 771px;
    margin: 0 auto;

    border-collapse: separate;
    border-spacing: 0;

    border: 1px solid #d8e2dc;
    border-radius: 10px;

    overflow: hidden;

    font-size: 14px;

    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}


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

.biaya-perkara-table thead tr {
    background-color: #066640;
    color: #ffffff;
}

.biaya-perkara-table th {
    padding: 13px 10px;
    text-align: center !important;
    font-weight: 700;
    border-right: 1px solid rgba(255,255,255,0.25);
}

.biaya-perkara-table th:last-child {
    border-right: none;
}


/* =========================================================
   LEBAR KOLOM
   ========================================================= */

.biaya-perkara-table th.nomor,
.biaya-perkara-table td.nomor {
    width: 12%;
}

.biaya-perkara-table th:nth-child(2),
.biaya-perkara-table td.bulan {
    width: 48%;
}

.biaya-perkara-table th.aksi,
.biaya-perkara-table td.aksi {
    width: 40%;
}


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

.biaya-perkara-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.biaya-perkara-table tbody tr:nth-child(even) {
    background-color: #f3f8f5;
}

.biaya-perkara-table td {
    padding: 12px 10px;
    border-top: 1px solid #e5ebe7;
}


/* =========================================================
   NOMOR
   ========================================================= */

.biaya-perkara-table td.nomor {
    text-align: center !important;
}


/* =========================================================
   BULAN
   ========================================================= */

.biaya-perkara-table td.bulan {
    text-align: left !important;
}


/* =========================================================
   AKSI
   ========================================================= */

/* Header AKSI */
.biaya-perkara-table th.aksi {
    text-align: center !important;
}

/* Isi kolom AKSI */
.biaya-perkara-table td.aksi {
    text-align: center !important;
    vertical-align: middle !important;
}


/* =========================================================
   BUTTON DOKUMEN / UNDUH
   ========================================================= */

.biaya-perkara-link {
    display: inline-block;

    padding: 7px 15px;

    background-color: #066640;
    color: #ffffff !important;

    text-decoration: none !important;

    border-radius: 5px;

    font-weight: 700;
    line-height: 1.3;

    transition: all 0.2s ease;
}

.biaya-perkara-link:hover {
    background-color: #054f31;
    color: #ffffff !important;
    text-decoration: none !important;
}


/* =========================================================
   BELUM TERSEDIA
   ========================================================= */

.biaya-perkara-empty {
    color: #888;
    font-size: 13px;
    font-style: italic;
}


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

@media (max-width: 600px) {

    .biaya-perkara {
        margin: 15px 0;
    }

    .biaya-perkara-title {
        font-size: 16px !important;
        line-height: 1.4;
    }

    .biaya-perkara-table {
        min-width: 500px;
        font-size: 13px;
    }

    .biaya-perkara-table th {
        padding: 11px 8px;
    }

    .biaya-perkara-table td {
        padding: 10px 8px;
    }

    .biaya-perkara-link {
        padding: 6px 13px;
        font-size: 13px;
    }
}
/* =========================================================
   HALAMAN DIPA
   ========================================================= */

.dipa-page {
    width: 100%;
    max-width: 900px;
    margin: 25px auto 45px;
    font-family: Arial, Helvetica, sans-serif;
    color: #263b33;
}

/* Judul halaman */
.dipa-header {
    text-align: center;
    margin-bottom: 18px;
}

.dipa-header h2 {
    margin: 0;
    padding: 5px 10px;
    font-size: 21px;
    font-weight: 700;
    color: #066640;
    letter-spacing: 0.4px;
}

/* Deskripsi */
.dipa-description {
    max-width: 820px;
    margin: 0 auto 28px;
    padding: 18px 24px;
    background: #f4f8f6;
    border-left: 4px solid #066640;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.dipa-description p {
    margin: 0;
    text-align: justify;
    line-height: 1.7;
    font-size: 14px;
    color: #52635c;
}

/* Wrapper tabel */
.dipa-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Tabel */
.dipa-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d9e4df;
    border-radius: 14px;
}

/* Semua cell */
.dipa-table th,
.dipa-table td {
    border: none;
}

/* Header utama */
.dipa-table thead tr:first-child th {
    padding: 16px 14px;
    background: linear-gradient(135deg, #066640, #078052);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.3px;
}

/* Header kolom */
.dipa-table thead tr:nth-child(2) th {
    padding: 13px 14px;
    background: #dcece3;
    color: #174c39;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #c8dcd2;
}

/* Lebar tahun */
.dipa-table .dipa-tahun {
    width: 110px;
}

/* Isi tabel */
.dipa-table tbody td {
    padding: 15px 14px;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #e3ebe7;
    transition: all 0.2s ease;
}

/* Tahun */
.dipa-table tbody td.dipa-tahun {
    font-weight: 700;
    color: #066640;
    text-align: center;
}

/* Zebra */
.dipa-table tbody tr:nth-child(odd) {
    background: #ffffff;
}

.dipa-table tbody tr:nth-child(even) {
    background: #f4f8f6;
}

/* Hover */
.dipa-table tbody tr:hover {
    background: #e5f3ec;
    box-shadow: inset 4px 0 0 #066640;
}

/* Baris terakhir */
.dipa-table tbody tr:last-child td {
    border-bottom: none;
}

/* Tombol Dokumen */
.dipa-button {
    display: inline-block;
    min-width: 82px;
    padding: 7px 16px;
    background: #066640;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 2px 6px rgba(6, 102, 64, 0.20);
    transition: all 0.25s ease;
}

/* Hover tombol */
.dipa-button:hover {
    background: #078052;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 11px rgba(6, 102, 64, 0.25);
}

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

@media (max-width: 768px) {

    .dipa-page {
        width: 95%;
        margin: 20px auto 35px;
    }

    .dipa-header h2 {
        font-size: 18px;
    }

    .dipa-description {
        padding: 15px 18px;
    }

    .dipa-description p {
        font-size: 13px;
    }

    .dipa-table thead tr:first-child th {
        font-size: 14px;
    }

    .dipa-table thead tr:nth-child(2) th,
    .dipa-table tbody td {
        padding: 11px 9px;
        font-size: 13px;
    }
}

/* =========================================================
   RESPONSIVE HP
   ========================================================= */

@media (max-width: 480px) {

    .dipa-page {
        width: 100%;
    }

    .dipa-header h2 {
        font-size: 16px;
    }

    .dipa-description {
        padding: 14px 15px;
        border-radius: 8px;
    }

    .dipa-description p {
        font-size: 12px;
        line-height: 1.6;
        text-align: left;
    }

    .dipa-table {
        min-width: 500px;
    }

    .dipa-table thead tr:first-child th {
        font-size: 13px;
        padding: 12px 8px;
    }

    .dipa-table thead tr:nth-child(2) th,
    .dipa-table tbody td {
        padding: 10px 7px;
        font-size: 12px;
    }

    .dipa-button {
        min-width: 65px;
        padding: 6px 9px;
        font-size: 11px;
    }
}
/* =========================================================
   LHKPN PA BUNTOK
   ========================================================= */

.lhkpn-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 35px auto;
    font-family: Arial, Helvetica, sans-serif;
}

/* Judul */
.lhkpn-title {
    text-align: center;
    margin: 0 0 5px 0;
    color: #066640;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.lhkpn-subtitle {
    text-align: center;
    margin: 0 0 22px 0;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

/* Tabel */
.lhkpn-table-wrap {
    width: 100%;
    margin: 0 auto 30px auto;
    overflow-x: auto;
}

.lhkpn-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d7e3dd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

/* Header */
.lhkpn-table thead th {
    background: linear-gradient(135deg, #066640, #078052);
    color: #fff;
    padding: 12px 10px;
    font-size: 10pt;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid rgba(255,255,255,0.25);
    border-bottom: 2px solid #055536;
}

.lhkpn-table thead th:last-child {
    border-right: none;
}

/* Isi tabel */
.lhkpn-table tbody td {
    padding: 10px 12px;
    font-size: 10pt;
    color: #008080;
    border-right: 1px solid #dfe8e3;
    border-bottom: 1px solid #dfe8e3;
    vertical-align: middle;
    line-height: 1.45;
    background: #fff;
}

.lhkpn-table tbody tr:last-child td {
    border-bottom: none;
}

.lhkpn-table tbody td:last-child {
    border-right: none;
}

/* Hover baris */
.lhkpn-table tbody tr {
    transition: all 0.2s ease;
}

.lhkpn-table tbody tr:hover td {
    background: #f0f8f4;
}

/* Kolom */
.lhkpn-table .nomor {
    width: 55px;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
}

.lhkpn-table .nama {
    width: 42%;
}

.lhkpn-table .jabatan {
    width: 42%;
}

.lhkpn-table .tautan {
    width: 70px;
    text-align: center;
}

/* Ikon PDF */
.lhkpn-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.lhkpn-pdf:hover {
    background: #e1f2ea;
    transform: translateY(-2px);
}

.lhkpn-pdf img {
    width: 30px;
    height: 30px;
    display: block;
}

/* =========================================================
   LRA DOCUMENT DASHBOARD
   ========================================================= */

.lra-dashboard {
    --lra-green: #176b45;
    --lra-green-dark: #0d4d31;
    --lra-green-light: #eaf6ef;
    --lra-border: #dfe9e3;
    --lra-text: #24352c;
    --lra-muted: #718078;
    --lra-white: #ffffff;

    max-width: 1100px;
    margin: 30px auto;
    padding: 0 18px;
    font-family: inherit;
    color: var(--lra-text);
}

/* HEADER */
.lra-header {
    position: relative;
    overflow: hidden;
    padding: 38px 35px;
    margin-bottom: 28px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, #0d4d31 0%, #176b45 55%, #3d9869 100%);
    color: #fff;
    box-shadow: 0 15px 35px rgba(23, 107, 69, .18);
}

.lra-header::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -80px;
    top: -100px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.lra-header::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: 100px;
    bottom: -110px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}

.lra-header-content {
    position: relative;
    z-index: 2;
}

.lra-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 13px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 30px;
    background: rgba(255,255,255,.1);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.lra-title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}

.lra-description {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 15px;
    line-height: 1.7;
}

/* YEAR TABS */
.lra-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    padding: 7px;
    border: 1px solid var(--lra-border);
    border-radius: 15px;
    background: #f7faf8;
}

.lra-tab {
    flex: 1;
    padding: 13px 20px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--lra-muted);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all .25s ease;
}

.lra-tab:hover {
    background: #fff;
    color: var(--lra-green);
}

.lra-tab.active {
    background: var(--lra-green);
    color: #fff;
    box-shadow: 0 5px 15px rgba(23,107,69,.2);
}

/* YEAR CONTENT */
.lra-year {
    display: none;
    animation: lraFade .35s ease;
}

.lra-year.active {
    display: block;
}

@keyframes lraFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* YEAR HEADER */
.lra-year-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.lra-year-title {
    margin: 0;
    color: var(--lra-text);
    font-size: 21px;
    font-weight: 800;
}

.lra-year-info {
    color: var(--lra-muted);
    font-size: 13px;
}

/* MONTH GRID */
.lra-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
}

/* MONTH CARD */
.lra-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--lra-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(30,60,45,.05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.lra-card:hover {
    transform: translateY(-5px);
    border-color: #b9d8c7;
    box-shadow: 0 14px 30px rgba(30,60,45,.11);
}

/* MONTH */
.lra-month {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.lra-month-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: var(--lra-green-light);
    color: var(--lra-green);
    font-size: 14px;
    font-weight: 800;
}

.lra-month-name {
    margin: 0;
    color: var(--lra-text);
    font-size: 16px;
    font-weight: 800;
}

/* DOCUMENT BUTTONS */
.lra-documents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.lra-doc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 8px;
    border: 1px solid #dce8e1;
    border-radius: 10px;
    background: #f8fbf9;
    color: var(--lra-green);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    transition: all .2s ease;
}

.lra-doc:hover {
    border-color: var(--lra-green);
    background: var(--lra-green);
    color: #fff !important;
}

.lra-doc-icon {
    font-size: 15px;
}

/* EMPTY DOCUMENT */
.lra-doc.empty {
    border-style: dashed;
    background: #fafafa;
    color: #a5aea9;
    cursor: default;
    pointer-events: none;
}

/* FOOTER */
.lra-footer {
    margin-top: 25px;
    padding: 15px 18px;
    border-radius: 12px;
    background: #f5f9f6;
    color: var(--lra-muted);
    font-size: 12px;
    text-align: center;
}

/* =========================================================
   CALK DASHBOARD
   ========================================================= */

.calk-dashboard {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #17352a;
}


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

.calk-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
    padding: 45px 40px;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        #066640 0%,
        #08794d 55%,
        #0b8a59 100%
    );
    box-shadow: 0 12px 35px rgba(0, 80, 50, 0.18);
}

.calk-header::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -80px;
    top: -100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}

.calk-header-content {
    position: relative;
    z-index: 2;
}

.calk-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.calk-title {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.calk-description {
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,0.88);
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   TABS
   ========================================================= */

.calk-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 25px;
    padding: 8px;
    border-radius: 16px;
    background: #f1f7f4;
    box-shadow: inset 0 0 0 1px #dcebe4;
}

.calk-tab {
    flex: 1;
    min-width: 85px;
    padding: 12px 20px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: #437061;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.calk-tab:hover {
    background: #dceee5;
    color: #066640;
}

.calk-tab.active {
    background: #066640;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(6,102,64,0.25);
}


/* =========================================================
   YEAR CONTENT
   ========================================================= */

.calk-year {
    display: none;
    animation: calkFadeIn 0.35s ease;
}

.calk-year.active {
    display: block;
}

@keyframes calkFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   YEAR HEADER
   ========================================================= */

.calk-year-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 22px 25px;
    border: 1px solid #dcebe4;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 7px 25px rgba(0, 70, 45, 0.07);
}

.calk-year-title {
    margin: 0;
    color: #066640;
    font-size: 22px;
    font-weight: 700;
}

.calk-year-subtitle {
    margin: 5px 0 0;
    color: #789088;
    font-size: 13px;
}

.calk-year-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #e4f1eb;
    color: #066640;
    font-size: 16px;
    font-weight: 800;
}


/* =========================================================
   TABLE
   ========================================================= */

.calk-table-wrapper {
    overflow-x: auto;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 70, 45, 0.08);
}

.calk-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    background: #ffffff;
}


/* HEADER TABLE */

.calk-table thead th {
    padding: 16px 20px;
    background: #066640;
    color: #ffffff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.calk-table thead th:first-child {
    text-align: left;
    border-radius: 16px 0 0 0;
}

.calk-table thead th:last-child {
    border-radius: 0 16px 0 0;
}


/* BODY */

.calk-table tbody td {
    padding: 18px 20px;
    border-bottom: 1px solid #e4eee9;
    color: #315247;
    font-size: 14px;
    vertical-align: middle;
}

.calk-table tbody tr:nth-child(even) {
    background: #f4f9f6;
}

.calk-table tbody tr {
    transition: all 0.2s ease;
}

.calk-table tbody tr:hover {
    background: #e8f4ee;
}


/* DIPA */

.calk-table tbody td:first-child {
    width: 25%;
}

.calk-table tbody td:first-child strong {
    color: #066640;
    font-size: 16px;
}

.calk-table tbody td:first-child span {
    margin-left: 3px;
    color: #81958d;
    font-size: 13px;
}


/* CENTER */

.calk-table tbody td:not(:first-child) {
    text-align: center;
}


/* =========================================================
   DOCUMENT BUTTON
   ========================================================= */

.calk-document {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 120px;
    padding: 9px 15px;
    border: 1px solid #c9e2d6;
    border-radius: 9px;
    background: #eef8f3;
    color: #066640 !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.calk-document:hover {
    transform: translateY(-2px);
    border-color: #066640;
    background: #066640;
    color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(6,102,64,0.22);
}

.calk-icon {
    font-size: 15px;
}


/* =========================================================
   DOCUMENT EMPTY
   ========================================================= */

.calk-empty {
    display: inline-block;
    padding: 9px 14px;
    border-radius: 9px;
    background: #f3f4f4;
    color: #98a39f;
    font-size: 12px;
    font-style: italic;
}


/* =========================================================
   FOOTER
   ========================================================= */

.calk-footer {
    margin-top: 18px;
    padding: 15px 20px;
    border-radius: 12px;
    background: #f1f7f4;
    color: #668078;
    text-align: center;
    font-size: 13px;
}

.calk-footer strong {
    color: #066640;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .calk-dashboard {
        margin: 25px auto;
        padding: 0 12px;
    }

    .calk-header {
        padding: 30px 25px;
        border-radius: 16px;
    }

    .calk-title {
        font-size: 25px;
    }

    .calk-description {
        font-size: 14px;
    }

    .calk-tabs {
        gap: 5px;
    }

    .calk-tab {
        min-width: 70px;
        padding: 10px 12px;
        font-size: 13px;
    }

    .calk-year-header {
        padding: 18px;
    }

    .calk-year-title {
        font-size: 19px;
    }

    .calk-year-badge {
        min-width: 52px;
        height: 52px;
        font-size: 14px;
    }

}


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

@media (max-width: 480px) {

    .calk-title {
        font-size: 22px;
    }

    .calk-tabs {
        justify-content: stretch;
    }

    .calk-tab {
        flex: 1 1 30%;
    }

    .calk-year-header {
        align-items: flex-start;
    }

    .calk-year-badge {
        min-width: 45px;
        height: 45px;
        font-size: 12px;
    }

}

/* ================================
   NERACA KEUANGAN
   ================================ */

.neraca-table {
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d9e2dc;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

/* HEADER JUDUL */

.neraca-table .table-title th {
    background: #066640;
    color: #ffffff;
    padding: 18px 12px;
    border: none;
    text-align: center;
}

.neraca-table .title-main {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.neraca-table .title-year {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    opacity: 0.9;
    letter-spacing: 1px;
}

/* HEADER KOLOM */

.neraca-table .table-header th {
    background: #e8f4ed;
    color: #164b36;
    padding: 12px 10px;
    border-bottom: 2px solid #b8d8c5;
    border-right: 1px solid #d4e5dc;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

.neraca-table .table-header th:last-child {
    border-right: none;
}

.neraca-table .table-header th span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: #5f7569;
}

/* LEBAR KOLOM */

.neraca-table .col-no {
    width: 55px;
}

.neraca-table .col-bulan {
    width: 245px;
}

/* ISI TABEL */

.neraca-table tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid #e8eeeb;
    border-right: 1px solid #edf1ef;
    color: #333333;
    font-size: 14px;
    vertical-align: middle;
}

.neraca-table tbody td:last-child {
    border-right: none;
}

.neraca-table tbody tr:last-child td {
    border-bottom: none;
}

/* ZEBRA */

.neraca-table tbody tr:nth-child(even) {
    background: #f8fbf9;
}

/* HOVER */

.neraca-table tbody tr:hover {
    background: #eef7f1;
}

/* NOMOR */

.neraca-table tbody td:first-child {
    color: #066640;
    font-weight: 600;
}

/* LINK DOKUMEN */

.neraca-table a {
    display: inline-block;
    padding: 5px 12px;
    color: #066640;
    background: #edf7f1;
    border: 1px solid #c9e3d3;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.neraca-table a:hover {
    color: #ffffff;
    background: #066640;
    border-color: #066640;
}

/* CENTER */

.neraca-table .text-center {
    text-align: center;
}

/* =========================================================
   PNBP - PENGADILAN AGAMA BUNTOK
   CSS RESPONSIVE
   ========================================================= */

.pnbp-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 25px auto;
    padding: 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
}

.pnbp-wrapper *,
.pnbp-wrapper *::before,
.pnbp-wrapper *::after {
    box-sizing: border-box;
}


/* =========================
   JUDUL
   ========================= */

.pnbp-title {
    text-align: center;
    margin-bottom: 20px;
}

.pnbp-title h2 {
    margin: 0 0 6px;
    color: #008080;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.pnbp-title p {
    margin: 0;
    color: #008080;
    font-size: 14px;
    font-weight: 700;
}


/* =========================
   TAB
   ========================= */

.pnbp-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.pnbp-tab {
    appearance: none;
    -webkit-appearance: none;

    border: 1px solid #cfe5dc;
    outline: none;

    cursor: pointer;

    padding: 10px 25px;

    border-radius: 7px;

    background: #e8f2ef;
    color: #066640;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    line-height: 1.2;

    transition:
        background-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .2s ease;
}

.pnbp-tab:hover {
    background: #d6ebe3;
    color: #066640;
    transform: translateY(-1px);
}

.pnbp-tab:focus-visible {
    outline: 3px solid rgba(0,128,128,.25);
    outline-offset: 2px;
}

.pnbp-tab.active {
    background: #066640;
    border-color: #066640;
    color: #fff;
    box-shadow: 0 4px 10px rgba(6,102,64,.25);
}


/* =========================
   CONTENT TAB
   ========================= */

.pnbp-content {
    display: none;
}

.pnbp-content.active {
    display: block;
    animation: pnbpFade .3s ease;
}

@keyframes pnbpFade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================
   JUDUL TAHUN
   ========================= */

.pnbp-year-title {
    text-align: center;

    margin: 0 0 15px;

    color: #008080;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;
}


/* =========================
   TABLE CONTAINER
   ========================= */

.pnbp-table-container {
    width: 100%;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    border-radius: 8px;

    box-shadow:
        0 3px 12px rgba(0,0,0,.08);
}


/* =========================
   TABLE
   ========================= */

.pnbp-table {
    width: 100%;

    min-width: 500px;

    border-collapse: collapse;

    background: #fff;
}

.pnbp-table th {
    padding: 11px 10px;

    border: 1px solid #055333;

    background: #066640;

    color: #fff;

    font-size: 13px;
    font-weight: 700;

    text-align: center;
}

.pnbp-table td {
    padding: 9px 10px;

    border: 1px solid #d8d8d8;

    font-size: 13px;
}

.pnbp-table tbody tr:nth-child(even) {
    background: #f7faf9;
}

.pnbp-table tbody tr:hover {
    background: #eef7f3;
}


/* =========================
   KOLOM
   ========================= */

.pnbp-table .col-no,
.pnbp-no {
    width: 60px;
    text-align: center;
}

.pnbp-table .col-action,
.pnbp-action {
    width: 160px;
    text-align: center;
}

.pnbp-no {
    color: #008080;
    font-weight: 600;
}

.pnbp-month {
    color: #008080;
    font-weight: 600;
}


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

.pnbp-btn {
    display: inline-block;

    padding: 7px 14px;

    border-radius: 5px;

    background: #008080;
    color: #fff !important;

    text-decoration: none !important;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.2;

    transition:
        background-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.pnbp-btn::before {
    content: "📄 ";
}

.pnbp-btn:hover {
    background: #066640;
    color: #fff !important;

    transform: translateY(-1px);

    box-shadow:
        0 3px 7px rgba(0,0,0,.15);
}

.pnbp-btn:focus-visible {
    outline: 3px solid rgba(0,128,128,.25);
    outline-offset: 2px;
}


/* =========================
   BELUM TERSEDIA
   ========================= */

.pnbp-empty {
    color: #999;
    font-size: 12px;
    font-style: italic;
}

/* =========================================================
   JAM KERJA & PELAYANAN - PA BUNTOK
   ========================================================= */

.pa-jamkerja {
    --pa-green: #056e4f;
    --pa-green-dark: #034c3a;
    --pa-green-light: #eaf7f1;
    --pa-lime: #ddf4ae;
    --pa-gold: #d7b45a;
    --pa-text: #26332f;
    --pa-muted: #71807a;

    max-width: 1000px;
    margin: 30px auto;
    padding: 0 18px;
    color: var(--pa-text);
    font-family: inherit;
}


/* HEADER */

.pa-jam-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 24px 28px;
    margin-bottom: 28px;

    background: linear-gradient(
        135deg,
        var(--pa-green-dark),
        var(--pa-green)
    );

    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
    overflow: hidden;
}

.pa-jam-header::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -80px;

    border: 35px solid rgba(255,255,255,.06);
    border-radius: 50%;
}

.pa-jam-icon {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

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

    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 15px;

    font-size: 30px;
}

.pa-jam-header h2 {
    position: relative;
    z-index: 2;

    margin: 0;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .3px;
}

.pa-jam-header p {
    position: relative;
    z-index: 2;

    margin: 4px 0 0;
    color: rgba(255,255,255,.8);
    font-size: 14px;
}


/* SECTION */

.pa-jam-section {
    margin-bottom: 30px;
}

.pa-jam-section-title {
    display: flex;
    flex-direction: column;
    gap: 3px;

    margin-bottom: 13px;
    padding-left: 14px;

    border-left: 4px solid var(--pa-green);
}

.pa-jam-section-title span {
    color: var(--pa-green-dark);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
}

.pa-jam-section-title small {
    color: var(--pa-muted);
    font-size: 13px;
}


/* TABLE */

.pa-table-wrap {
    width: 100%;
    overflow-x: auto;

    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

.pa-jam-table {
    width: 100%;
    min-width: 650px;

    border-collapse: separate;
    border-spacing: 0;

    background: #fff;
    overflow: hidden;
}

.pa-jam-table thead th {
    padding: 16px 14px;

    background: var(--pa-green);
    color: #fff;

    text-align: center;
    font-size: 14px;
    font-weight: 700;

    border: 0;
}

.pa-jam-table thead th:first-child {
    border-radius: 14px 0 0 0;
}

.pa-jam-table thead th:last-child {
    border-radius: 0 14px 0 0;
}

.pa-jam-table tbody td {
    padding: 17px 14px;

    text-align: center;
    font-size: 15px;

    border-bottom: 1px solid #e8eeeb;
    border-right: 1px solid #edf1ef;

    background: #fff;
}

.pa-jam-table tbody tr:last-child td {
    border-bottom: 0;
}

.pa-jam-table tbody tr:hover td {
    background: #f6fbf8;
}


/* KOLOM HARI */

.pa-jam-table .pa-day {
    background: var(--pa-green-light);
    color: var(--pa-green-dark);

    font-weight: 800;
    letter-spacing: .3px;
}


/* ISTIRAHAT */

.pa-jam-table .pa-rest {
    background: #f5f8e9;
    color: #53611f;

    font-weight: 700;
}


/* RAMADAN */

.pa-ramadan {
    position: relative;
}

.pa-ramadan-notice {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 14px;
    padding: 15px 18px;

    background: linear-gradient(
        135deg,
        #f2f9df,
        #e5f3ce
    );

    border: 1px solid #d6e7b9;
    border-radius: 14px;
}

.pa-ramadan-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    background: #fff;
    border-radius: 50%;

    font-size: 21px;

    box-shadow: 0 3px 10px rgba(0,0,0,.07);
}

.pa-ramadan-notice strong {
    display: block;

    color: var(--pa-green-dark);
    font-size: 15px;
}

.pa-ramadan-notice p {
    margin: 3px 0 0;

    color: #64705b;
    font-size: 13px;
}


/* FOOTER */

.pa-jam-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 32px;
    padding: 18px;

    color: var(--pa-green-dark);

    border-top: 1px solid #e2e9e5;
    text-align: center;
}

.pa-jam-footer > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    background: var(--pa-green-light);
    border-radius: 50%;
}

.pa-jam-footer p {
    margin: 0;

    font-size: 13px;
    font-weight: 700;
}

.pa-jam-footer small {
    color: var(--pa-muted);
    font-weight: 400;
}

/* =========================================================
   PA BUNTOK - SOP PELAYANAN
   Modern / Responsive / Joomla Safe
   ========================================================= */

.pa-sop-page {
    --pa-green: #056e4f;
    --pa-green-dark: #034d38;
    --pa-green-light: #eaf7f1;
    --pa-lime: #ddf4ae;
    --pa-text: #26352f;
    --pa-muted: #718078;
    --pa-border: #e4ebe7;
    --pa-white: #ffffff;

    width: 100%;
    max-width: 1180px;
    margin: 25px auto;
    padding: 0 18px;
    box-sizing: border-box;

    font-family: inherit;
    color: var(--pa-text);
}

.pa-sop-page *,
.pa-sop-page *::before,
.pa-sop-page *::after {
    box-sizing: border-box;
}

/* HEADER */

.pa-sop-header {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 38px 25px 34px;
    margin-bottom: 20px;

    background:
        radial-gradient(circle at 85% 15%, rgba(221,244,174,.22), transparent 28%),
        linear-gradient(135deg, #056e4f 0%, #034d38 100%);

    border-radius: 20px;
    color: #fff;
    box-shadow: 0 12px 30px rgba(5,110,79,.16);
}

.pa-sop-header::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -80px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}

.pa-sop-header::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    left: -55px;
    bottom: -65px;
    border-radius: 50%;
    background: rgba(221,244,174,.08);
}

.pa-sop-icon {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;
    margin: 0 auto 15px;

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

    border-radius: 16px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.2);

    font-size: 28px;
}

.pa-sop-header h1 {
    position: relative;
    z-index: 2;

    margin: 0;
    padding: 0;

    color: #fff !important;
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.3;
}

.pa-sop-header h2 {
    position: relative;
    z-index: 2;

    margin: 5px 0 0;
    padding: 0;

    color: #ddf4ae !important;
    font-size: clamp(15px, 2vw, 20px);
    font-weight: 700;
    line-height: 1.4;
}

.pa-sop-header p {
    position: relative;
    z-index: 2;

    margin: 12px 0 0;
    color: rgba(255,255,255,.82) !important;
    font-size: 14px;
}

/* TOOLBAR */

.pa-sop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 15px;
    padding: 15px 17px;

    background: #fff;
    border: 1px solid var(--pa-border);
    border-radius: 15px;

    box-shadow: 0 5px 18px rgba(25,60,45,.06);
}

.pa-sop-total {
    display: flex;
    align-items: center;
    gap: 10px;

    white-space: nowrap;

    color: var(--pa-muted);
    font-size: 14px;
    font-weight: 600;
}

.pa-sop-total-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 36px;

    border-radius: 10px;
    background: var(--pa-green-light);
    color: var(--pa-green);

    font-size: 16px;
    font-weight: 800;
}

.pa-sop-search {
    position: relative;
    width: min(430px, 100%);
}

.pa-sop-search > span {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);

    color: var(--pa-green);
    font-size: 21px;
    line-height: 1;
}

.pa-sop-search input {
    width: 100%;
    height: 43px;

    padding: 0 15px 0 42px;

    border: 1px solid var(--pa-border) !important;
    border-radius: 10px !important;

    background: #f8faf9 !important;
    color: var(--pa-text) !important;

    font-size: 14px;
    outline: none;

    box-shadow: none !important;
}

.pa-sop-search input:focus {
    border-color: var(--pa-green) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(5,110,79,.08) !important;
}

/* TABLE */

.pa-sop-table-wrap {
    width: 100%;

    overflow: hidden;

    border: 1px solid var(--pa-border);
    border-radius: 17px;

    background: #fff;

    box-shadow: 0 8px 25px rgba(25,60,45,.07);
}

.pa-sop-table {
    width: 100%;
    margin: 0 !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;

    background: #fff !important;
    color: var(--pa-text) !important;

    table-layout: fixed;
}

.pa-sop-table th {
    padding: 17px 16px !important;

    background: var(--pa-green) !important;
    color: #fff !important;

    border: 0 !important;

    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;

    text-align: left;
}

.pa-sop-table th:first-child {
    border-radius: 0 !important;
}

.pa-sop-table th:last-child {
    text-align: center;
}

.pa-sop-table th.pa-sop-no {
    width: 75px;
    text-align: center;
}

.pa-sop-table th.pa-sop-document {
    width: 145px;
}

.pa-sop-table td {
    padding: 13px 16px !important;

    border: 0 !important;
    border-bottom: 1px solid var(--pa-border) !important;

    background: #fff !important;
    color: var(--pa-text) !important;

    font-size: 14px;
    line-height: 1.55;

    vertical-align: middle;
}

.pa-sop-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.pa-sop-table tbody tr {
    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.pa-sop-table tbody tr:hover td {
    background: #f4faf7 !important;
}

.pa-sop-table td.pa-sop-no {
    width: 75px;
    text-align: center;
}

.pa-sop-no span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 35px;
    height: 30px;
    padding: 0 8px;

    border-radius: 8px;

    background: var(--pa-green-light);
    color: var(--pa-green);

    font-size: 12px;
    font-weight: 800;
}

.pa-sop-table td:nth-child(2) {
    font-weight: 600;
}

.pa-sop-document {
    text-align: center !important;
}

/* BUTTON */

.pa-sop-download {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 88px;
    padding: 8px 13px !important;

    border-radius: 9px !important;

    background: var(--pa-green) !important;
    color: #fff !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    text-decoration: none !important;

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

.pa-sop-download:hover,
.pa-sop-download:focus {
    background: var(--pa-green-dark) !important;
    color: #fff !important;

    transform: translateY(-2px);

    box-shadow: 0 5px 12px rgba(5,110,79,.22);
    text-decoration: none !important;
}

.pa-sop-download:first-letter {
    font-size: 15px;
}

/* EMPTY */

.pa-sop-empty {
    display: none;

    padding: 60px 20px;
    text-align: center;

    color: var(--pa-muted);
}

.pa-sop-empty > div {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;

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

    border-radius: 14px;
    background: var(--pa-green-light);

    color: var(--pa-green);
    font-size: 26px;
}

.pa-sop-empty strong {
    display: block;

    color: var(--pa-text);
    font-size: 16px;
}

.pa-sop-empty p {
    margin: 5px 0 0;
    font-size: 13px;
}

/* FOOTER */

.pa-sop-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    padding: 18px;

    color: #8a9791;
    font-size: 12px;
    text-align: center;
}

/* RESPONSIVE TABLET */

@media (max-width: 768px) {

    .pa-sop-page {
        padding: 0 12px;
        margin: 15px auto;
    }

    .pa-sop-header {
        padding: 30px 18px 28px;
        border-radius: 16px;
    }

    .pa-sop-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .pa-sop-total {
        justify-content: center;
    }

    .pa-sop-search {
        width: 100%;
    }

    .pa-sop-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pa-sop-table {
        min-width: 680px;
    }
}

/* RESPONSIVE HP */

@media (max-width: 520px) {

    .pa-sop-page {
        padding: 0 8px;
    }

    .pa-sop-header {
        padding: 25px 14px;
        border-radius: 14px;
    }

    .pa-sop-icon {
        width: 50px;
        height: 50px;
        font-size: 23px;
        margin-bottom: 12px;
    }

    .pa-sop-header p {
        font-size: 12px;
    }

    .pa-sop-toolbar {
        padding: 12px;
        border-radius: 13px;
    }

    .pa-sop-table th,
    .pa-sop-table td {
        padding: 12px !important;
    }

    .pa-sop-table {
        min-width: 620px;
    }
}

/* =========================================================
   LAPORAN AKSES INFORMASI
   Prefix khusus: lai2026-
   Aman dari bentrok CSS Joomla / Template
   ========================================================= */

.lai2026-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 30px auto;
    padding: 0 15px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* Judul */
.lai2026-title {
    margin: 0 0 18px;
    text-align: center;
    color: #066640;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

/* Container tabel */
.lai2026-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

/* Tabel */
.lai2026-table {
    width: 100%;
    min-width: 500px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #d9e3de;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* Header */
.lai2026-table thead th {
    padding: 13px 15px;
    background: #066640;
    color: #ffffff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
}

/* Header rounded */
.lai2026-table thead th:first-child {
    border-top-left-radius: 11px;
}

.lai2026-table thead th:last-child {
    border-top-right-radius: 11px;
}

/* Isi tabel */
.lai2026-table tbody td {
    padding: 12px 15px;
    border-top: 1px solid #e6ece9;
    color: #333333;
    font-size: 13px;
    line-height: 1.5;
    vertical-align: middle;
    background: #ffffff;
}

/* Kolom nomor */
.lai2026-table .lai2026-no {
    width: 70px;
    text-align: center;
    font-weight: 600;
}

/* Kolom bulan */
.lai2026-table .lai2026-month {
    width: 35%;
    font-weight: 600;
}

/* Kolom aksi */
.lai2026-table .lai2026-action {
    width: 30%;
    text-align: center;
}

/* Hover baris */
.lai2026-table tbody tr {
    transition: background-color 0.2s ease,
                transform 0.2s ease;
}

.lai2026-table tbody tr:hover td {
    background: #f2f8f5;
}

/* Link dokumen */
.lai2026-table .lai2026-document {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 7px 15px;
    border-radius: 7px;

    background: #066640;
    color: #ffffff !important;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Icon kecil */
.lai2026-table .lai2026-document::before {
    content: "↗";
    font-size: 13px;
}

/* Hover tombol */
.lai2026-table .lai2026-document:hover {
    background: #044d30;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(6, 102, 64, 0.25);
}

/* Baris tanpa dokumen */
.lai2026-table .lai2026-empty {
    color: #999999;
    font-style: italic;
}

/* Baris terakhir */
.lai2026-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 11px;
}

.lai2026-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 11px;
}
/* =========================================================
   TAB SYSTEM
   ========================================================= */

/* Semua konten tab disembunyikan */
.lai2026-wrapper .lai2026-tab-content {
    display: none;
    animation: lai2026FadeIn 0.25s ease;
}

/* Hanya tab aktif yang ditampilkan */
.lai2026-wrapper .lai2026-tab-content.lai2026-tab-content-active {
    display: block;
}

/* Navigasi tab */
.lai2026-wrapper .lai2026-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

/* Tombol tab */
.lai2026-wrapper .lai2026-tab-button {
    border: 1px solid #d9e3de;
    background: #ffffff;
    color: #066640;
    padding: 10px 22px;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Hover tab */
.lai2026-wrapper .lai2026-tab-button:hover {
    background: #f2f8f5;
    transform: translateY(-1px);
}

/* Tab aktif */
.lai2026-wrapper .lai2026-tab-button.lai2026-tab-active {
    background: #066640;
    color: #ffffff;
    border-color: #066640;
    box-shadow: 0 4px 12px rgba(6, 102, 64, 0.20);
}

/* Fokus keyboard */
.lai2026-wrapper .lai2026-tab-button:focus {
    outline: 2px solid rgba(6, 102, 64, 0.25);
    outline-offset: 2px;
}

/* Animasi */
@keyframes lai2026FadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   PENGAWAS BIDANG 2026
   Prefix khusus: pab2026-
   Aman dari bentrok Joomla / Template
   ========================================================= */

.pab2026-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 35px auto;
    padding: 0 18px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: #26332d;
}


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

.pab2026-header {
    text-align: center;
    margin-bottom: 40px;
}

.pab2026-header-line {
    width: 55px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 10px;
    background: #066640;
}

.pab2026-eyebrow {
    margin-bottom: 8px;
    color: #066640;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.pab2026-main-title {
    margin: 0;
    color: #1f2d27;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
}

.pab2026-subtitle {
    margin: 8px 0 0;
    color: #7a8580;
    font-size: 14px;
}


/* =========================================================
   SECTION
   ========================================================= */

.pab2026-section {
    margin-bottom: 40px;
}

.pab2026-section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.pab2026-section-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 10px;

    background: #066640;
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
}

.pab2026-section-heading h2 {
    margin: 0;
    color: #26332d;
    font-size: 20px;
    font-weight: 700;
}

.pab2026-section-heading p {
    margin: 4px 0 0;
    color: #89938f;
    font-size: 13px;
}


/* =========================================================
   CARD
   ========================================================= */

.pab2026-card {
    background: #ffffff;
    border: 1px solid #e2ebe6;
    border-radius: 16px;

    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.pab2026-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   KOORDINATOR
   ========================================================= */

.pab2026-card-coordinator {
    display: flex;
    align-items: center;
    max-width: 780px;
    margin: 0 auto;
    padding: 25px;
}

.pab2026-card-coordinator .pab2026-photo-wrap {
    flex: 0 0 170px;
    margin-right: 28px;
}

.pab2026-photo-wrap {
    overflow: hidden;
    background: #edf4f0;
}

.pab2026-photo {
    display: block;
    width: 100%;
    height: 245px;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.35s ease;
}

.pab2026-card:hover .pab2026-photo {
    transform: scale(1.03);
}

.pab2026-photo-coordinator {
    height: 250px;
    border-radius: 12px;
}

.pab2026-card-content {
    padding: 22px;
}

.pab2026-card-coordinator .pab2026-card-content {
    padding: 10px 10px 10px 0;
}


/* =========================================================
   BADGE
   ========================================================= */

.pab2026-badge,
.pab2026-role {
    display: inline-block;

    margin-bottom: 10px;
    padding: 6px 10px;

    border-radius: 20px;

    background: #eaf5ef;
    color: #066640;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
}


/* =========================================================
   NAMA
   ========================================================= */

.pab2026-name {
    margin: 0 0 10px;

    color: #1f2d27;

    font-size: 21px;
    font-weight: 800;
    line-height: 1.35;
}

.pab2026-card-person .pab2026-name {
    font-size: 18px;
}

.pab2026-position {
    margin: 0;

    color: #68736e;

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   GRID PENGAWAS
   ========================================================= */

.pab2026-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.pab2026-card-person {
    text-align: center;
}

.pab2026-card-person .pab2026-photo-wrap {
    height: 280px;
}

.pab2026-card-person .pab2026-photo {
    height: 280px;
}

.pab2026-card-person .pab2026-card-content {
    padding: 20px 22px 24px;
}

.pab2026-divider {
    width: 40px;
    height: 3px;
    margin: 14px auto;

    border-radius: 10px;

    background: #066640;
}


/* =========================================================
   DOKUMEN SK
   ========================================================= */

.pab2026-document-section {
    display: flex;
    align-items: flex-start;
    gap: 20px;

    margin-top: 45px;
    padding: 25px;

    border: 1px solid #dce9e2;
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #f7fbf9 0%,
            #ffffff 100%
        );

    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.05);
}

.pab2026-document-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    flex-shrink: 0;

    border-radius: 12px;

    background: #066640;
    color: #ffffff;

    font-size: 23px;
}

.pab2026-document-content {
    flex: 1;
}

.pab2026-document-label {
    color: #066640;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.pab2026-document-content h2 {
    margin: 5px 0 8px;

    color: #26332d;

    font-size: 17px;
    line-height: 1.4;
}

.pab2026-document-content p {
    margin: 0 0 18px;

    color: #68736e;

    font-size: 13px;
    line-height: 1.7;
}

.pab2026-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px;

    border-radius: 8px;

    background: #066640;
    color: #ffffff !important;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.pab2026-download:hover {
    background: #044d30;
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(6, 102, 64, 0.25);
}

.pab2026-download span {
    font-size: 15px;
}

/* =========================================================
   LAPORAN REKAPITULASI PENGADUAN
   Prefix khusus: rkp2026-
   Aman dari bentrok CSS Joomla / Template
   ========================================================= */

.rkp2026-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 25px auto;
    padding: 0 15px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* Judul */
.rkp2026-title {
    margin: 0 0 18px;
    text-align: center;
    color: #066640;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

/* Deskripsi */
.rkp2026-description {
    margin: 0 auto 20px;
    max-width: 760px;
    text-align: center;
    color: #666;
    font-size: 13px;
    line-height: 1.6;
}

/* Container tabel */
.rkp2026-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

/* Tabel */
.rkp2026-table {
    width: 100%;
    min-width: 520px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;

    border: 1px solid #d9e3de;
    border-radius: 12px;

    background: #ffffff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
}

/* Header */
.rkp2026-table thead th {
    padding: 13px 15px;

    background: #066640;
    color: #ffffff;

    border: none;

    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;

    text-align: center;
    vertical-align: middle;
}

/* Header rounded */
.rkp2026-table thead th:first-child {
    border-top-left-radius: 11px;
}

.rkp2026-table thead th:last-child {
    border-top-right-radius: 11px;
}

/* Isi */
.rkp2026-table tbody td {
    padding: 12px 15px;

    border-top: 1px solid #e7eeeb;

    background: #ffffff;
    color: #333333;

    font-size: 13px;
    line-height: 1.5;
    vertical-align: middle;
}

/* Nomor */
.rkp2026-table .rkp2026-no {
    width: 60px;
    text-align: center;
    color: #777;
    font-weight: 600;
}

/* Bulan */
.rkp2026-table .rkp2026-month {
    width: 38%;
    font-weight: 600;
    color: #333;
}

/* Aksi */
.rkp2026-table .rkp2026-action {
    width: 35%;
    text-align: center;
}

/* Hover */
.rkp2026-table tbody tr {
    transition:
        background-color .2s ease,
        transform .2s ease;
}

.rkp2026-table tbody tr:hover td {
    background: #f3f8f5;
}

/* Nomor saat hover */
.rkp2026-table tbody tr:hover .rkp2026-no {
    color: #066640;
}

/* Tombol dokumen */
.rkp2026-document {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 105px;
    padding: 7px 15px;

    border-radius: 7px;

    background: #066640;
    color: #ffffff !important;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none !important;

    transition:
        background-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

/* Icon */
.rkp2026-document::before {
    content: "↗";
    font-size: 13px;
    font-weight: 700;
}

/* Hover tombol */
.rkp2026-document:hover {
    background: #044d30;
    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 4px 10px rgba(6, 102, 64, .25);
}

/* Status belum tersedia */
.rkp2026-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 12px;

    border-radius: 20px;

    background: #f1f3f2;
    color: #999999;

    font-size: 11px;
    font-style: italic;
}

/* Baris terakhir */
.rkp2026-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 11px;
}

.rkp2026-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 11px;
}

/* Responsive */
@media (max-width: 600px) {

    .rkp2026-wrapper {
        padding: 0 10px;
        margin: 20px auto;
    }

    .rkp2026-title {
        font-size: 18px;
    }

    .rkp2026-table {
        min-width: 480px;
    }

    .rkp2026-table thead th,
    .rkp2026-table tbody td {
        padding: 10px 11px;
    }

    .rkp2026-document {
        min-width: 90px;
        padding: 7px 11px;
    }
}

/* =========================================================
   TAB TAHUN
   ========================================================= */

.lai2026-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 25px;
    padding: 6px;
    width: fit-content;
    max-width: 100%;
    background: #f0f5f2;
    border: 1px solid #d9e3de;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.lai2026-tab {
    border: 0;
    background: transparent;
    color: #066640;
    padding: 10px 22px;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.lai2026-tab:hover {
    background: #dfeee7;
    transform: translateY(-1px);
}

.lai2026-tab.active {
    background: #066640;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(6, 102, 64, 0.25);
}

.lai2026-panel {
    animation: lai2026FadeIn 0.25s ease;
}

.lai2026-panel[hidden] {
    display: none !important;
}

@keyframes lai2026FadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tahun kosong */
.lai2026-empty-year {
    max-width: 600px;
    margin: 20px auto;
    padding: 35px 20px;
    text-align: center;
    border: 1px solid #d9e3de;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
}

.lai2026-empty-icon {
    font-size: 30px;
    margin-bottom: 10px;
}

.lai2026-empty-year strong {
    display: block;
    color: #066640;
    font-size: 15px;
    margin-bottom: 6px;
}

.lai2026-empty-year span {
    display: block;
    color: #888888;
    font-size: 13px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    .lai2026-tabs {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .lai2026-tab {
        flex: 0 0 auto;
        padding: 9px 18px;
    }

}