/* =========================================================
   PROFIL KESEKRETARIATAN
========================================================= */

.pa-kesekretariatan{
    max-width:100%;
    margin:0 auto;
}


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

.pa-kesekretariatan-tabs > input{
    display:none;
}

.pa-kesekretariatan-tab-nav{

    display:flex;
    gap:8px;

    margin-bottom:30px;
    padding:5px;

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

}

.pa-kesekretariatan-tab-nav label{

    flex:1;

    padding:13px 18px;

    text-align:center;

    color:#537060;

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

    line-height:1.4;

    border-radius:10px;

    cursor:pointer;

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

}


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

#sekretaris:checked
~ .pa-kesekretariatan-tab-nav
label[for="sekretaris"],

#kasubbag-ptip:checked
~ .pa-kesekretariatan-tab-nav
label[for="kasubbag-ptip"],

#kasubbag-umum-keuangan:checked
~ .pa-kesekretariatan-tab-nav
label[for="kasubbag-umum-keuangan"],

#kasubbag-kepegawaian:checked
~ .pa-kesekretariatan-tab-nav
label[for="kasubbag-kepegawaian"]{

    background:#0b7a3b;

    color:#fff;

    box-shadow:
        0 5px 14px rgba(11,122,59,.18);

}


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

.pa-kesekretariatan-tab-content{
    display:none;
}


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

#sekretaris:checked
~ .pa-kesekretariatan-tab-nav
~ #content-sekretaris{

    display:block;

}


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

#kasubbag-ptip:checked
~ .pa-kesekretariatan-tab-nav
~ #content-kasubbag-ptip{

    display:block;

}


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

#kasubbag-umum-keuangan:checked
~ .pa-kesekretariatan-tab-nav
~ #content-kasubbag-umum-keuangan{

    display:block;

}


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

#kasubbag-kepegawaian:checked
~ .pa-kesekretariatan-tab-nav
~ #content-kasubbag-kepegawaian{

    display:block;

}


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

.pa-kesekretariatan-profile{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:35px;

    align-items:center;

    padding:28px;

    margin-bottom:30px;

    background:#f7fbf8;

    border:1px solid #dcebe1;

    border-radius:20px;

}


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

.pa-kesekretariatan-photo{

    width:180px;

    overflow:hidden;

    border-radius:18px;

    background:#e8f2eb;

    box-shadow:
        0 8px 22px rgba(15,23,42,.08);

}

.pa-kesekretariatan-photo img{

    display:block;

    width:100%;

    aspect-ratio:4 / 5;

    object-fit:cover;

    transition:transform .45s ease;

}

.pa-kesekretariatan-photo:hover img{

    transform:scale(1.025);

}


/* =========================================================
   PROFILE INFO
========================================================= */

.pa-kesekretariatan-label{

    display:inline-block;

    margin-bottom:10px;

    padding:6px 11px;

    background:#e5f4eb;

    color:#08753a;

    border-radius:999px;

    font-size:11px;

    font-weight:800;

    letter-spacing:.08em;

}

.pa-kesekretariatan-profile-info h2{

    margin:0 0 8px;

    color:#123b28;

    font-size:clamp(16px,3vw,18px);

    line-height:1.2;

}

.pa-kesekretariatan-jabatan{

    margin:0 0 22px;

    color:#5b7181;

    font-size:15px;

}


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

.pa-kesekretariatan-meta{

    display:grid;

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

    gap:16px;

}

.pa-kesekretariatan-meta > div{

    padding:14px 16px;

    background:#fff;

    border:1px solid #e2ebe5;

    border-radius:12px;

}

.pa-kesekretariatan-meta span{

    display:block;

    margin-bottom:5px;

    color:#91a19a;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.pa-kesekretariatan-meta strong{

    display:block;

    color:#193c2b;

    font-size:13px;

    line-height:1.5;

}


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

.pa-kesekretariatan-section{

    margin-bottom:28px;

    padding:24px;

    background:#fff;

    border:1px solid #e5ece7;

    border-radius:16px;

    box-shadow:
        0 5px 18px rgba(15,23,42,.035);

}


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

.pa-kesekretariatan-section-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

    color:#163c29;

    font-size:17px;

    font-weight:800;

}

.pa-kesekretariatan-section-title > span{

    display:inline-flex;

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

    width:34px;
    height:34px;

    flex-shrink:0;

    background:#e7f4eb;

    color:#0b7a3b;

    border-radius:10px;

    font-size:11px;

}


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

.pa-kesekretariatan-list > div{

    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#506477;

    font-size:14px;

    line-height:1.7;

}

.pa-kesekretariatan-dot{

    width:7px;
    height:7px;

    margin-top:8px;

    flex-shrink:0;

    background:#0b7a3b;

    border-radius:50%;

}


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

.pa-kesekretariatan-timeline{

    position:relative;

    padding-left:25px;

}

.pa-kesekretariatan-timeline::before{

    content:"";

    position:absolute;

    left:5px;
    top:7px;
    bottom:7px;

    width:1px;

    background:#cfe0d5;

}

.pa-kesekretariatan-timeline > div{

    position:relative;

    padding:0 0 20px 20px;

}

.pa-kesekretariatan-timeline > div:last-child{

    padding-bottom:0;

}

.pa-kesekretariatan-timeline > div::before{

    content:"";

    position:absolute;

    left:-24px;
    top:5px;

    width:9px;
    height:9px;

    background:#0b7a3b;

    border:3px solid #e7f4eb;

    border-radius:50%;

}

.pa-kesekretariatan-timeline strong{

    display:block;

    color:#173d2a;

    font-size:14px;

    line-height:1.5;

}

.pa-kesekretariatan-timeline span{

    display:block;

    margin-top:4px;

    color:#8a9a94;

    font-size:12px;

}


/* =========================================================
   PENGHARGAAN
========================================================= */

.pa-kesekretariatan-awards{

    display:grid;

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

    gap:14px;

}

.pa-kesekretariatan-award{

    display:flex;

    align-items:flex-start;

    gap:12px;

    min-width:0;

    padding:14px;

    background:#f7fbf8;

    border:1px solid #e3ece6;

    border-radius:12px;

}

.pa-kesekretariatan-award > div:first-child{

    display:flex;

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

    width:38px;
    height:38px;

    flex:0 0 38px;

    background:#e5f4eb;

    color:#0b7a3b;

    border-radius:10px;

    font-size:11px;

    font-weight:800;

}

.pa-kesekretariatan-award > div:last-child{

    min-width:0;

}

.pa-kesekretariatan-award strong{

    display:block;

    color:#193c2b;

    font-size:13px;

    line-height:1.5;

}

.pa-kesekretariatan-award span{

    display:block;

    margin-top:4px;

    color:#8c9b95;

    font-size:11px;

}


/* =========================================================
   DOKUMEN
========================================================= */

.pa-kesekretariatan-documents{

    display:grid;

    gap:10px;

}

.pa-kesekretariatan-documents a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    text-decoration:none;

    background:#f7fbf8;

    border:1px solid #e1ebe4;

    border-radius:12px;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;

}

.pa-kesekretariatan-documents a:hover{

    transform:translateX(4px);

    background:#edf8f1;

    border-color:#b9dac5;

}

.pa-kesekretariatan-pdf{

    display:flex;

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

    width:42px;
    height:42px;

    flex:0 0 42px;

    background:#e8f2eb;

    color:#0b7a3b;

    border-radius:10px;

    font-size:10px;

    font-weight:800;

}

.pa-kesekretariatan-documents a > div:nth-child(2){

    flex:1;

    min-width:0;

}

.pa-kesekretariatan-documents strong{

    display:block;

    color:#193c2b;

    font-size:13px;

}

.pa-kesekretariatan-documents a div span{

    display:block;

    margin-top:3px;

    color:#8c9b95;

    font-size:11px;

}

.pa-kesekretariatan-documents b{

    flex:0 0 auto;

    color:#0b7a3b;

    font-size:20px;

}


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

@media(max-width:700px){

    .pa-kesekretariatan-tab-nav{

        overflow-x:auto;

        scrollbar-width:none;

    }

    .pa-kesekretariatan-tab-nav::-webkit-scrollbar{

        display:none;

    }

    .pa-kesekretariatan-tab-nav label{

        flex:0 0 auto;

        white-space:nowrap;

        font-size:12px;

        padding:11px 14px;

    }


    .pa-kesekretariatan-profile{

        grid-template-columns:1fr;

        gap:22px;

        padding:20px;

    }


    .pa-kesekretariatan-photo{

        width:65%;

        max-width:210px;

        margin:0 auto;

    }


    .pa-kesekretariatan-profile-info{

        text-align:center;

    }


    .pa-kesekretariatan-meta{

        grid-template-columns:1fr;

        text-align:left;

    }


    .pa-kesekretariatan-section{

        padding:19px;

    }


    .pa-kesekretariatan-section-title{

        font-size:15px;

    }


    .pa-kesekretariatan-awards{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:480px){

    .pa-kesekretariatan-tab-nav label{

        font-size:11px;

        padding:10px 12px;

    }


    .pa-kesekretariatan-profile{

        border-radius:16px;

    }


    .pa-kesekretariatan-section{

        border-radius:14px;

    }

}

/* =========================================================
   EMPTY PROFILE / DATA BELUM TERSEDIA
========================================================= */

.pa-kesekretariatan-empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:260px;

    padding:45px 30px;

    text-align:center;

    background:#f7fbf8;

    border:1px solid #dcebe1;

    border-radius:20px;

}


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

.pa-kesekretariatan-empty-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    margin-bottom:18px;

    background:#e7f4eb;

    color:#0b7a3b;

    border-radius:50%;

    font-size:20px;

    line-height:1;

}


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

.pa-kesekretariatan-empty-title{

    margin-bottom:8px;

    color:#193c2b;

    font-size:18px;

    line-height:1.4;

    font-weight:700;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.pa-kesekretariatan-empty-text{

    max-width:520px;

    color:#8a9a94;

    font-size:13px;

    line-height:1.7;

}


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

@media(max-width:700px){

    .pa-kesekretariatan-empty{

        min-height:220px;

        padding:35px 22px;

        border-radius:16px;

    }


    .pa-kesekretariatan-empty-title{

        font-size:17px;

    }


    .pa-kesekretariatan-empty-text{

        font-size:12px;

    }

}