:root{
 --navy:#0d2340;
 --navy2:#163e6d;
 --blue:#2d72b8;
 --white:#fff;
 --soft:#f4f8fc;
 --text:#142033;
 --muted:#667085;
 --gold:#d7b45b;
 --line:#dce6f0;
 --shadow:0 18px 50px rgba(13,35,64,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    background:#fff;
    color:var(--text)}
    a{text-decoration:none;
        color:inherit}
        img{max-width:100%;
            display:block}
                .container{width:min(1180px,92%);
                    margin:auto}
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:linear-gradient(90deg,#081a30,#123c69);
    color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.15)
}
.nav-wrap{
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.brand{
    display:flex;
    align-items:center;
    gap:12px
}
    .brand img{
        width:48px;
        height:48px
    }
    .brand span{
        display:flex;
        flex-direction:column
    }
    .brand strong{
        font-size:18px;
        letter-spacing:.3px
    }
    .brand small{
        font-size:12px;
        opacity:.75
    }
    .main-nav{
        display:flex;
        align-items:center;
        gap:25px;
        font-size:14px;
        font-weight:700}
        .main-nav a{opacity:.9}
        .main-nav a:hover{color:#bcdcff}
        .nav-cta{
            background:linear-gradient(135deg,var(--gold),#f5d67e);
            color:#172235!important;
            padding:12px 18px;
            border-radius:999px
        }
        .nav-toggle{
            display:none;
            background:none;
            border:0;
            color:#fff;
            font-size:26px
        }
.hero{
    min-height:650px;
    display:flex;
    align-items:center;
    color:#fff;
    background:linear-gradient(90deg,rgba(5,19,36,.92),rgba(10,35,65,.48)),url('../img/kantorwali.jpeg') center/cover}
.hero-content{
    max-width:720px;
    padding:90px 0}
    .eyebrow{
        display:inline-block;
        color:#f5d67e;
        font-weight:800;
        letter-spacing:2px;
        font-size:12px;
        text-transform:uppercase;
        margin-bottom:15px
    }
    .hero h1{
        font-size:clamp(42px,6vw,76px);
        line-height:.98;
        margin:0 0 22px
    }
    .hero p{
        font-size:18px;
        line-height:1.7;
        color:#dce8f4;
        max-width:650px
    }
    .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:14px 22px;
        border-radius:10px;
        font-weight:800;
        border:1px solid transparent;
        transition:.2s}
        .btn-primary{
            background:linear-gradient(135deg,#2b72b8,#174d85);
            color:#fff;
            box-shadow:0 12px 28px rgba(24,83,143,.3)}
        .btn-outline{
            border-color:rgba(255,255,255,.55);
            color:#fff;
            margin-left:10px}
        .btn:hover{
            transform:translateY(-2px)}
.section{
    padding:80px 0}
    .section-soft{
        background:linear-gradient(180deg,#f8fbff,#eef5fb)}
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            margin-bottom:28px}
            .section-head h2{
                font-size:32px;
                margin:0;
                color:var(--navy)}
                .section-head p{
                    color:var(--muted);
                    margin:8px 0 0}
.welcome-grid{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:55px;
    align-items:center
}
    .portrait{
        background:linear-gradient(145deg,#eaf2f9,#fff);
        border-radius:28px;
        padding:18px;
        box-shadow:var(--shadow)}
    .welcome-card{padding:20px}
    .welcome-card h2{
        font-size:38px;
        margin:8px 0 18px;
        color:var(--navy)}
        .welcome-card p{
            color:#4e5d70;
            line-height:1.8
        }
        .signature{
            margin-top:24px;
            color:var(--navy)}
        .signature strong{
            display:block;
            font-size:18px
        }
.stats{
    margin-top:-45px;
    position:relative;
    z-index:3}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:linear-gradient(135deg,#0b2442,#1d578e);
    border-radius:22px;
    box-shadow:var(--shadow);
    overflow:hidden}
.stat{padding:26px;
    color:#fff;
    text-align:center;
    border-right:1px solid rgba(255,255,255,.13)}
    .stat:last-child{border:0}
    .stat b{
        display:block;
        font-size:32px}
    .stat span{
        font-size:13px;
        color:#caddf0
    }
.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px}
    .card{background:#fff;
        border:1px solid var(--line);
        border-radius:18px;
        overflow:hidden;
        box-shadow:0 10px 30px rgba(13,35,64,.07);
        transition:.2s}
        .card:hover{
            transform:translateY(-5px);
            box-shadow:var(--shadow)}
            .card-media{
                height:210px;
                background:linear-gradient(135deg,#173a63,#6ea2d2);
                display:flex;
                align-items:center;
                justify-content:center;
                color:#fff;
                font-size:52px
            }
            .card-body{padding:20px}
            .card-body h3{margin:5px 0 10px;
                font-size:20px}
            .card-body p{color:var(--muted);
                line-height:1.6}
                .meta{font-size:12px;
                    color:#7b8794}
            .tag{
                display:inline-block;
                background:#eaf3fc;
                color:#1e5d99;
                padding:6px 10px;
                border-radius:999px;
                font-size:12px;
                font-weight:700
            }
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px}
    .gallery-item{
        aspect-ratio:1.25;
        border-radius:16px;
        background:linear-gradient(135deg,#1a416d,#83afd6);
        display:flex;
        align-items:end;
        padding:16px;
        color:#fff;
        font-weight:800;
        box-shadow:0 8px 24px rgba(13,35,64,.12)
    }
.page-hero{
    padding:85px 0;
    background:linear-gradient(120deg,#0b213c,#245f98);
    color:#fff}
.page-hero h1{
    font-size:48px;
    margin:0 0 12px}
    .page-hero p{color:#d7e6f5}
    .content-card{
        background:#fff;
        border:1px solid var(--line);
        border-radius:20px;
        padding:30px;
        box-shadow:var(--shadow)}
        .prose{line-height:1.85;
            color:#445267}
            .prose h2,
            .prose h3{color:var(--navy)}
            .team-grid{
                display:grid;
                grid-template-columns:repeat(3,1fr);
                gap:22px}
            .person{
                text-align:center;
                padding:24px}
            .avatar{
                width:120px;
                height:120px;
                margin:auto;
                border-radius:50%;
                background:linear-gradient(135deg,#dfeaf5,#8ab1d6);
                display:grid;
                place-items:center;
                font-size:44px;
                color:#fff}
            .form-grid{
                display:grid;
                grid-template-columns:1fr 1fr;
                gap:18px}
            .field{
                display:flex;
                flex-direction:column;
                gap:8px}
            .field.full{grid-column:1/-1}
            .field label{font-weight:700}
            .field input,.field textarea,.field select{
                padding:13px 14px;
                border:1px solid #ced9e5;
                border-radius:10px;
                font:inherit}
                .footer{background:linear-gradient(135deg,#081a30,#123c69);
                    color:#fff;
                    padding-top:55px}
                .footer-grid{
                    display:grid;
                    grid-template-columns:2fr 1fr 1.4fr;
                    gap:40px}
                .footer p,.footer a{
                    display:block;
                    color:#c8d7e7;
                    line-height:1.7;
                    margin:5px 0}
                .footer h4{color:#f5d67e}
                .footer-bottom{
                    text-align:center;
                    padding:22px;
                    border-top:1px solid rgba(255,255,255,.12);
                    margin-top:35px;
                    color:#b8c9da;
                    font-size:13px}
                .footer-brand{margin-bottom:15px}
.empty{
    padding:40px;
    text-align:center;
    color:var(--muted)
}
@media(max-width:900px){
    .main-nav{
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:76px;
        background:#0b213c;
        padding:20px;
        flex-direction:column;
        align-items:flex-start
    }
    .main-nav.open{display:flex}
    .nav-toggle{display:block}
    .welcome-grid{grid-template-columns:1fr}
    .portrait{
        max-width:380px;
        margin:auto}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .cards{grid-template-columns:1fr 1fr}
    .gallery-grid{grid-template-columns:1fr 1fr}
    .team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){
    .hero{min-height:560px}
    .hero-content{padding:70px 0}
    .hero h1{font-size:46px}
    .btn{
        width:100%;
        margin:6px 0
    }.stats-grid,.cards,.gallery-grid,.team-grid,.footer-grid,.form-grid{grid-template-columns:1fr}
    .stat{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.12)}
        .page-hero h1{font-size:38px}
        .section{padding:58px 0}}
.avatar-photo {
    width: 130px;
    height: 130px;
    margin: 0 auto 18px;
    display: block;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    border: 5px solid #ffffff;
    box-shadow: 0 10px 28px rgba(13, 35, 64, 0.18);
    background: #e8eef5;
}

.person {
    text-align: center;
}

.person h3 {
    margin-top: 14px;
    margin-bottom: 6px;
    color: #0d2340;
}

.person p {
    margin: 0;
    color: #667085;
}

/* Sinkronisasi media dari halaman admin ke halaman pengunjung */
.card-media{overflow:hidden}
.card-media img,.card-media iframe{width:100%;height:100%;object-fit:cover;border:0}
.gallery-item{background-size:cover;background-position:center;position:relative}
.gallery-item span{position:relative;z-index:2}
.admin-thumb{width:72px;height:58px;object-fit:cover;border-radius:9px;border:1px solid #dce5ef}

/* Slider aparatur seperti contoh video */
.structure-slider{position:relative;padding:0 48px}
.structure-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 2px 18px;scrollbar-width:none}
.structure-track::-webkit-scrollbar{display:none}
.structure-card{flex:0 0 245px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.structure-card img,.structure-placeholder{width:100%;height:300px;object-fit:cover;background:linear-gradient(135deg,#dfeaf5,#8ab1d6);display:grid;place-items:center;font-size:60px}
.structure-info{padding:18px;text-align:center}
.structure-info h3{margin:0 0 7px;color:var(--navy)}
.structure-info p{margin:0;color:var(--muted)}
.slider-arrow{position:absolute;top:46%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border:0;border-radius:50%;background:var(--navy);color:#fff;font-size:28px;cursor:pointer;box-shadow:0 8px 20px rgba(13,35,64,.25)}
.slider-arrow.prev{left:0}.slider-arrow.next{right:0}

.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.video-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.video-frame{aspect-ratio:16/9;background:#0d2340}
.video-frame iframe{width:100%;height:100%;border:0}

@media(max-width:700px){
 .structure-slider{padding:0 38px}
 .structure-card{flex-basis:210px}
 .structure-card img,.structure-placeholder{height:260px}
 .video-grid{grid-template-columns:1fr}
}
/* =========================
   SLIDER APARATUR
========================= */

.aparatur-slider{
    position: relative;
    overflow: hidden;
    margin-top: 30px;
}

.aparatur-track{
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.aparatur-track::-webkit-scrollbar{
    display: none;
}

.aparatur-card{
    min-width: 270px;
    max-width: 270px;

    background: #fff;
    border-radius: 18px;
    overflow: hidden;

    box-shadow: 0 10px 25px rgba(0,0,0,.12);

    transition: .35s;
}

.aparatur-card:hover{
    transform: translateY(-8px);
}

.aparatur-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    object-position:top;

}

.aparatur-info{

    padding:20px;

    text-align:center;

}

.aparatur-info h3{

    margin-bottom:8px;

    font-size:24px;

    color:#0b2345;

}

.aparatur-info p{

    color:#777;

}
.aparatur-slider {
    position: relative;
    padding: 0 55px;
}

.aparatur-arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    z-index: 10;

    width: 46px;
    height: 46px;

    border: none;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #0d2340,
        #1d578e
    );

    color: #ffffff;
    font-size: 24px;
    font-weight: bold;

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

    cursor: pointer;

    box-shadow: 0 8px 20px rgba(13, 35, 64, 0.3);

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

.aparatur-prev {
    left: 0;
}

.aparatur-next {
    right: 0;
}

.aparatur-arrow:hover {
    transform:
        translateY(-50%)
        scale(1.1);

    background: linear-gradient(
        135deg,
        #1d578e,
        #2d72b8
    );

    box-shadow: 0 12px 28px rgba(13, 35, 64, 0.4);
}

.aparatur-arrow:active {
    transform:
        translateY(-50%)
        scale(0.95);
}

.aparatur-card {
    opacity: 0.92;

    transition:
        transform 0.4s ease,
        opacity 0.4s ease,
        box-shadow 0.4s ease;
}

.aparatur-card:hover {
    transform:
        translateY(-8px)
        scale(1.02);

    opacity: 1;

    box-shadow: 0 18px 40px rgba(13, 35, 64, 0.18);
}
@media (max-width: 700px) {
    .aparatur-slider {
        padding: 0 42px;
    }

    .aparatur-card {
        min-width: 220px;
        max-width: 220px;
    }

    .aparatur-card img {
        height: 270px;
    }

    .aparatur-arrow {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }
}
.media-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:55px;color:#fff}
.gallery-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.gallery-card {
    background: #ffffff;
    border: 1px solid #dce6f0;
    border-radius: 18px;
    overflow: hidden;

    box-shadow:
        0 12px 30px
        rgba(13, 35, 64, 0.1);

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

.gallery-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 42px
        rgba(13, 35, 64, 0.16);
}

.gallery-card-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: #e8eef5;
}

.gallery-card-image img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;
}

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

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

    color: #667085;
}

.gallery-card-body {
    padding: 22px;
}

.gallery-card-body h3 {
    margin: 14px 0 10px;

    color: #0d2340;
    font-size: 22px;
}

.gallery-card-body p {
    margin: 0;

    color: #667085;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .gallery-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .gallery-card-grid {
        grid-template-columns: 1fr;
    }
}
.clickable-card {
    display: block;
    color: inherit;
}

.detail-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(320px, 0.7fr);
    gap: 28px;
    align-items: start;
}

.detail-slider {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: #0d2340;
    box-shadow: var(--shadow);
}

.detail-track {
    position: relative;
    aspect-ratio: 16 / 10;
}

.detail-slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    transform: translateX(35px);

    transition:
        opacity 0.5s ease,
        transform 0.55s ease;

    pointer-events: none;
}

.detail-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.detail-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 46px;
    height: 46px;

    border: none;
    border-radius: 50%;

    background: rgba(13, 35, 64, 0.9);
    color: #ffffff;

    font-size: 28px;
    cursor: pointer;
    z-index: 4;
}

.detail-prev {
    left: 16px;
}

.detail-next {
    right: 16px;
}

.detail-dots {
    position: absolute;
    left: 50%;
    bottom: 16px;

    transform: translateX(-50%);

    display: flex;
    gap: 8px;

    z-index: 4;
}

.detail-dots button {
    width: 10px;
    height: 10px;

    padding: 0;
    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.detail-dots button.active {
    width: 28px;
    border-radius: 999px;
    background: #ffffff;
}

@media (max-width: 900px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }
}
.clickable-card {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.clickable-card:hover {
    transform: translateY(-6px);
}

.detail-link {
    display: inline-block;
    margin-top: 12px;
    color: #0d2340;
    font-weight: 700;
}
.detail-slide video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000000;
}
.video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.video-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dce6f0;
    border-radius: 20px;
    box-shadow: 0 14px 35px rgba(13, 35, 64, 0.12);
}

.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #081a30;
}

.video-frame video,
.video-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    object-fit: contain;
    background: #000000;
}

.video-card .card-body {
    padding: 22px;
}

.video-card .card-body h3 {
    margin: 0 0 10px;
    color: #0d2340;
    font-size: 22px;
}

.video-card .card-body p {
    margin: 0;
    color: #667085;
    line-height: 1.7;
}

.video-link-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d2340;
}

@media (max-width: 750px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   SLIDER FOTO GALERI
========================= */

.gallery-mini-slider {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #e8eef5;
}

.gallery-mini-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-mini-slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    transform: translateX(30px);

    transition:
        opacity 0.45s ease,
        transform 0.5s ease;

    pointer-events: none;
}

.gallery-mini-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.gallery-mini-slide img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
    object-position: center;
}

.gallery-mini-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    background: rgba(13, 35, 64, 0.88);
    color: #ffffff;

    font-size: 25px;
    cursor: pointer;

    transform: translateY(-50%);
}

.gallery-mini-prev {
    left: 12px;
}

.gallery-mini-next {
    right: 12px;
}

.gallery-mini-arrow:hover {
    background: #2d72b8;
}

.gallery-mini-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 5;

    display: flex;
    gap: 7px;

    transform: translateX(-50%);
}

.gallery-mini-dots button {
    width: 9px;
    height: 9px;

    padding: 0;
    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

.gallery-mini-dots button.active {
    width: 24px;
    border-radius: 999px;
    background: #ffffff;
}
/* =========================
   GALERI SLIDER BERANDA
========================= */

.homepage-gallery-slider {
    position: relative;
    padding: 0 52px;
}

.homepage-gallery-track {
    display: flex;
    gap: 18px;

    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    padding: 8px 2px 18px;

    scrollbar-width: none;
}

.homepage-gallery-track::-webkit-scrollbar {
    display: none;
}

.homepage-gallery-card {
    position: relative;

    flex: 0 0 300px;
    height: 220px;

    overflow: hidden;
    border-radius: 18px;

    scroll-snap-align: start;

    box-shadow:
        0 12px 30px
        rgba(13, 35, 64, 0.14);
}

.homepage-gallery-card img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    transition: transform 0.35s ease;
}

.homepage-gallery-card:hover img {
    transform: scale(1.06);
}

.homepage-gallery-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    padding: 35px 16px 15px;

    color: #ffffff;
    font-weight: 700;

    background:
        linear-gradient(
            transparent,
            rgba(5, 19, 36, 0.9)
        );
}

.homepage-gallery-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: #0d2340;
    color: #ffffff;

    font-size: 28px;
    cursor: pointer;

    transform: translateY(-50%);
}

.homepage-gallery-prev {
    left: 0;
}

.homepage-gallery-next {
    right: 0;
}

.homepage-gallery-arrow:hover {
    background: #2d72b8;
}

@media (max-width: 700px) {
    .homepage-gallery-slider {
        padding: 0 40px;
    }

    .homepage-gallery-card {
        flex-basis: 240px;
        height: 185px;
    }
}
/* Berita dengan tautan eksternal */

.berita-link-cover {
    height: 190px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: #ffffff;
    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            #0d2340,
            #2d72b8
        );
}

.berita-link-icon {
    font-size: 46px;
}

.berita-external-link {
    display: inline-flex;
    align-items: center;

    margin-top: 12px;

    color: #1d5d98;
    font-weight: 800;
}

.berita-external-link:hover {
    color: #0d2340;
    text-decoration: underline;
}