.leader-modal{

    position:fixed;
    inset:0;

    z-index:99999;

    display:none;

    overflow-y:auto;

    padding:60px;

    background:
    linear-gradient(
        135deg,
        #030303 0%,
        #07140d 30%,
        #081018 70%,
        #030303 100%
    );

    position:fixed;
}
.leader-modal::before{

    content:"";

    position:fixed;

    width:800px;
    height:800px;

    top:-250px;
    left:50%;

    transform:translateX(-50%);

    background:
    radial-gradient(
        rgba(245,197,66,.20),
        transparent 70%
    );

    filter:blur(120px);

    pointer-events:none;

    animation:
    leaderGlow 8s ease infinite;
}

@keyframes leaderGlow{

    0%,100%{
        opacity:.5;
    }

    50%{
        opacity:1;
    }
}

.leader-modal.active{
    display:block;
}

.leader-modal.active {

    display: block;

}

.leader-header {

    text-align: center;

    margin-bottom: 50px;

}

.leader-header span {

    color: #f5c542;

}

.leader-header h2 {

    font-size: 50px;

}

.leader-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit,
            minmax(300px, 1fr));

    gap: 30px;

}

.leader-card {

    background: #1c1c1c;

    border-radius: 25px;

    overflow: hidden;

    cursor: pointer;

    transition: .4s;

    display: flex;

    flex-direction: column;

    height: 100%;

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

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .05),
            rgba(255, 255, 255, .02));
}

.leader-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, .4);
}

.leader-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    object-position:top center;

    background:#0f1720;
}

.leader-info{

    padding:25px;

    display:flex;

    flex-direction:column;

    flex:1;
}
.leader-person{

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

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

    border-radius:14px;

    padding:14px;

    margin-top:10px;

    transition:.3s;
}

.leader-person:hover{

    border-color:
    rgba(245,197,66,.3);

    background:
    rgba(245,197,66,.05);
}
.leader-info span {

    color: #f5c542;

}

.leader-info h3 {

    margin: 15px 0;

}

.close-leader {

    position: fixed;

    top: 20px;

    right: 20px;

    width: 60px;

    height: 60px;

    border-radius: 50%;

}

.leader-profile-modal {

    position: fixed;

    inset: 0;

    background: #000;

    display: none;

    z-index: 999999;

}

.leader-profile-modal.active {

    display: flex;

    justify-content: center;

    align-items: center;

}

.profile-container {

    width: 90%;

    max-width: 1400px;

    display: grid;

    grid-template-columns:
        500px 1fr;

    gap: 50px;

}

.profile-image img {

    width: 100%;

    border-radius: 20px;

}

.profile-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.profile-content span {

    color: #f5c542;

}

.profile-content h2 {

    font-size: 70px;

    margin: 20px 0;

}

.profile-content h3 {

    margin-bottom: 30px;

}

.profile-content p {

    line-height: 2;

    font-size: 22px;

}

.close-profile {

    position: absolute;

    top: 30px;

    right: 30px;

    width: 60px;

    height: 60px;

    border-radius: 50%;

}

/* =====================================
DETAIL MODAL
===================================== */

.leader-detail-modal {

    position: fixed;

    inset: 0;

    background: #081018;

    z-index: 999999;

    display: none;

}

.leader-detail-modal.active {

    display: flex;

    align-items: center;

    justify-content: center;

}

.leader-detail-content {

    width: 90%;

    max-width: 1300px;

    display: grid;

    grid-template-columns:
        450px 1fr;

    gap: 50px;

    align-items: center;

}

.detail-image img {

    width: 100%;

    border-radius: 20px;

}

.detail-info span {

    color: gold;

    letter-spacing: 2px;

}

.detail-info h2 {

    font-size: 52px;

    margin: 20px 0;

}

.detail-info h3 {

    font-size: 24px;

    margin-bottom: 20px;

}

.detail-info p {

    font-size: 20px;

    line-height: 1.8;

}

.detail-menu {

    margin-top: 40px;

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}

.detail-menu button {

    padding: 14px 30px;

    border: none;

    border-radius: 50px;

    cursor: pointer;

    font-weight: 600;

}

.close-detail {

    position: absolute;

    top: 30px;

    right: 30px;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    border: none;

    font-size: 24px;

    cursor: pointer;

}

.leader-detail-modal {

    position: fixed;

    inset: 0;

    background: #081018;

    z-index: 999999;

    display: none;

    overflow-y: auto;

    padding: 50px;

}

.leader-detail-modal.active {

    display: block;

}

.leader-detail-header {

    display: flex;

    gap: 40px;

    align-items: center;

    margin-bottom: 40px;

}

.leader-detail-header img {

    width: 300px;

    border-radius: 20px;

}

.leader-tabs {

    display: flex;

    gap: 15px;

    margin-bottom: 30px;

    flex-wrap: wrap;

}

.tab-btn {

    padding: 15px 25px;

    border: none;

    border-radius: 50px;

    cursor: pointer;

    font-size: 16px;

}

.tab-btn.active {

    background: #f5c542;

    color: black;

}

.tab-pane {

    display: none;

    animation: fadeTab .5s ease;

}

.tab-pane.active {

    display: block;

}

.leader-tab-content {

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

    padding: 30px;

    border-radius: 20px;

    line-height: 1.9;

}

.close-leader-detail {

    position: absolute;

    top: 20px;

    right: 20px;

    width: 60px;

    height: 60px;

    border: none;

    border-radius: 50%;

    font-size: 24px;

}

@keyframes fadeTab {

    from {

        opacity: 0;

        transform:
            translateY(15px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

.tab-pane {
    display: none;
    animation: fadeIn .5s ease;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.profile-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.profile-photo {
    width: 250px;
    border-radius: 15px;
}

.program-content ul {
    padding-left: 20px;
}

.program-content li {
    margin-bottom: 10px;
}

/* =====================================
   OFFICIAL GRID
===================================== */

.officials-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit,
            minmax(550px, 1fr));

    gap: 40px;

    margin-bottom: 50px;
}

/* =====================================
   OFFICIAL CARD
===================================== */

.official-card {

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .03));

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

    border-radius: 30px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    min-height: 500px;

    transition: .4s ease;

    backdrop-filter: blur(12px);

    overflow: hidden;

    position: relative;
}

/* Glow */

.official-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 180px;
    height: 3px;

    background: #f5c542;

    border-radius: 999px;

    box-shadow:
        0 0 20px #f5c542;
}

.official-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .45);
}

/* =====================================
   PHOTO
===================================== */

.official-card img {

    width: 240px;

    height: 320px;

    object-fit: cover;

    border-radius: 22px;

    border:
        3px solid rgba(245, 197, 66, .35);

    margin-bottom: 20px;

    transition: .4s;
}

.official-card:hover img {

    transform:
        scale(1.03);
}

/* =====================================
   POSITION
===================================== */

.official-role {

    display: inline-block;

    margin-bottom: 15px;

    padding: 8px 16px;

    border-radius: 999px;

    background:
        rgba(245, 197, 66, .15);

    color: #f5c542;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;
}

/* =====================================
   NAME
===================================== */

.official-card h3 {

    margin: 0;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.4;

    color: #fff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    width: 100%;
}

.leader-more{

    margin-top:auto;

    padding-top:18px;

    border-top:
    1px solid rgba(255,255,255,.08);

    color:#f5c542;

    font-size:13px;

    letter-spacing:1px;

    text-transform:uppercase;

    font-weight:600;
}

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

@media(max-width:768px) {

    .officials-grid {

        grid-template-columns: 1fr;

        gap: 25px;
    }

    .official-card {

        min-height: auto;

        padding: 25px;
    }

    .official-card img {

        width: 190px;

        height: 250px;
    }

    .official-card h3 {

        font-size: 18px;

        white-space: normal;
    }
}

.leader-dayak{

    position:fixed;

    inset:0;

    background:
    url("../images/dayak/batang-garing.png")
    center center no-repeat;

    background-size:700px;

    opacity:.04;

    animation:
    rotateLeader 180s linear infinite;

    pointer-events:none;
}

@keyframes rotateLeader{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}
.leader-pattern{

    position:fixed;
    inset:0;

    background:
    url("../images/dayak/batang-garing.png");

    background-size:450px;

    opacity:.025;

    pointer-events:none;

    animation:
    moveLeaderPattern 70s linear infinite;
}

@keyframes moveLeaderPattern{

    from{
        background-position:0 0;
    }

    to{
        background-position:
        1000px 1000px;
    }
}