footer#uc-footer {
    --bs-gray-900-rgb: 191, 26, 8 !important;
    --bs-bg-opacity: 1 !important;
}

.uc-bottom-navbar {
    background-color: rgb(191, 26, 8) !important;
    color: white !important;
}

.uc-navbar-right {
    /* margin-left: 50px !important; */
}

/* ========== STYLES ASAL ========== */

.login-btn {
    background-color: rgb(191, 26, 8);
    color: white !important;
    border-radius: 10px;
    padding: 0px 40px;
    font-weight: bold;
    border: none;
    text-decoration: none;
    height: 40px;
    line-height: 40px;
    white-space: nowrap;
}

.login-btn:hover {
    background-color: #a50c0c;
    color: white;
}

.with-user .polri-search {
    display: flex;
    align-items: center;
    border: 2px solid rgb(191, 26, 8);
    border-radius: 13px;
    overflow: hidden;
    height: 40px;
    background-color: white;
    flex-grow: 1;
    /* ambil ruang sisa */
    flex-shrink: 1;
    flex-basis: 0;
    /* <-- penting biar dia gak fix width */
    min-width: 410px;
    /* ← atur panjang minimal */
    max-width: calc(100% - 220px);
    /* ruang sisa dari dropdown */
}

.no-user .polri-search {
    display: flex;
    align-items: center;
    border: 2px solid rgb(191, 26, 8);
    border-radius: 13px;
    overflow: hidden;
    height: 40px;
    background-color: white;
    flex-grow: 1;
    /* ambil ruang sisa */
    flex-shrink: 1;
    flex-basis: 0;
    /* <-- penting biar dia gak fix width */
    min-width: 580px;
    /* ruang sisa dari dropdown */
}

.polri-input {
    text-align: center;
    flex: 1;
    padding: 0 12px;
    border: none;
    outline: none;
    font-size: 14px;
}

.polri-button {
    background-color: transparent;
    border: none;
    color: rgb(191, 26, 8);
    padding: 16px 16px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.polri-button:hover {
    background-color: rgba(191, 26, 8, 0.1);
}

.custom-gap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /* justify-content: flex-end; */
    gap: 1.5rem;
}



@media (max-width: 1400px) {
    .polri-input {
        text-align: left;
        font-size: 14px;
        width: 100%;
    }
}

/* ========== RESPONSIVE (Tablet ke bawah) ========== */
@media (max-width: 768px) {
    .custom-gap {
        flex-direction: column;
        align-items: stretch;
    }

    .polri-search,
    .login-btn {
        width: 100%;
    }

    .polri-input {
        text-align: left;
        font-size: 14px;
        width: 100%;
    }

    .polri-button {
        padding: 12px 16px;
        font-size: 16px;
    }
}

/* Kepala JABATAN */

/* Kartu: foto di kiri, informasi di kanan — tinggi dibatasi agar muat satu layar */
.kepala-divisi-section .kepala-card {
    display: flex;
    height: clamp(360px, 62vh, 500px);
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.kepala-divisi-section .main-image-wrapper {
    flex: 0 0 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #3a2a20, #15100c);
    overflow: hidden;
}

#mainImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.kepala-divisi-section .kepala-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.25rem;
    border-left: 5px solid rgb(191, 26, 8);
    min-width: 0;
    overflow-y: auto;
}

.kepala-divisi-section .kepala-eyebrow {
    color: rgb(191, 26, 8);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.kepala-divisi-section .kepala-nama {
    color: #181c32;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.kepala-divisi-section .kepala-deskripsi {
    color: #5e6278;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}

.kepala-divisi-section .kepala-masa {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-top: 1.25rem;
    border-top: 1px dashed #d8d8e0;
}

.kepala-divisi-section .kepala-masa-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.kepala-divisi-section .kepala-masa-icon {
    flex: 0 0 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: rgba(191, 26, 8, 0.08);
    color: rgb(191, 26, 8);
    font-size: 1.1rem;
}

.kepala-divisi-section .kepala-masa-label {
    display: block;
    color: #7e8299;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kepala-divisi-section .kepala-masa-value {
    display: block;
    color: #181c32;
    font-size: 1.1rem;
    font-weight: 700;
}

/* "Petahana" ditampilkan sebagai badge */
.kepala-divisi-section .kepala-masa-value.petahana {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0.2rem 0.75rem;
    border-radius: 9999px;
    background: rgb(191, 26, 8);
    color: #fff;
    font-size: 0.9rem;
}

.thumb-img {
    /* rasio potret agar foto kepala (kepala + topi) tidak terpotong */
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    cursor: pointer;
    border-radius: 0.6rem;
    transition: border 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.thumb-img:hover {
    transform: translateY(-3px);
}

.thumb-img.active {
    border: 3px solid rgb(191, 26, 8);
}

/* Di layar kecil kartu ditumpuk: foto di atas, informasi di bawah */
@media (max-width: 767px) {
    .kepala-divisi-section .kepala-card {
        flex-direction: column;
        height: auto;
    }

    .kepala-divisi-section .main-image-wrapper {
        flex: 0 0 auto;
        height: 340px;
    }

    .kepala-divisi-section .kepala-info {
        border-left: 0;
        border-top: 5px solid rgb(191, 26, 8);
        padding: 1.5rem;
    }

    .kepala-divisi-section .kepala-nama {
        font-size: 1.3rem;
    }
}

.btn-daftar-kepala {
    width: fit-content;
    max-width: 100%;
    padding: 0.6rem 1.2rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    white-space: normal;
    /* Ini bikin tulisan bisa turun baris */
    word-break: break-word;
    /* Ini penting buat hp kecil */
    text-align: center;
    line-height: 1.2;
}

/* Mobile horizontal scroll for thumbnails */
@media (max-width: 991px) {


    .thumbnail-image-wrapper {
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        cursor: grab;
    }

    .thumbnail-image-wrapper.dragging {
        cursor: grabbing;
        user-select: none;
    }

    .thumbnail-image-wrapper .col {
        flex: 0 0 auto;
        width: 45%;
        margin-right: 10px;
    }


    .thumbnail-image-wrapper {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .thumb-img {
        scroll-snap-align: start;
    }

    .btn-daftar-kepala {
        width: 100%;
        /* biar full di mobile */
        font-size: 1rem;
        text-align: center;
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
}

.uc-logo a {
    display: flex;
    align-items: center;
    /* Vertikal tengah */
    gap: 12px;
    /* Jarak logo ↔ teks */
    text-decoration: none;
    /* Hilangin underline */
}

.uc-logo img {
    width: 90px !important;
    height: auto;
}

.uc-logo span {
    font-weight: bold;
    font-size: 18px;
    color: black;
    /* Atur warna teks */
}

.logo-text {
    display: flex;
    flex-direction: column;
    /* Biar teks ke bawah */
    font-weight: bold;
    font-size: 22px;
    line-height: 1.2;
    color: black;
    /* Bisa diganti putih kalau background gelap */
}


.tombol-selengkapnya {
    /* margin-top: 2.5rem; */
    display: flex;
    justify-content: center;
}

.btn-lihat {
    margin-top: 2.5rem;
    /* mt-10 juga */
    padding: 0.75rem 1.5rem;
    background-color: rgb(191, 26, 8);
    /* warna btn-primary */
    color: white;
    text-decoration: none;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn-lihat:hover {
    background-color: #a50c0c;
    /* warna hover dari btn-primary */
    color: white;
}

.berita-mini-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.berita-mini {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.berita-mini img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    flex-shrink: 0;
}

.berita-mini-info {
    flex-grow: 1;
}

.berita-mini .list-kategori {
    font-size: 0.75rem;
    font-weight: 600;
    color: #dc3545;
    /* merah */
}

.kategori {
    text-decoration: none;
    transition: all 0.3s ease;
}

.kategori:hover {
    /* transform: scale(1.1); */
    color: rgb(191, 26, 8);
    background-color: white !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.berita-mini .list-kategori .waktu {
    color: #888;
    font-weight: normal;
}

.berita-mini h4 {
    font-size: 0.95rem;
    margin: 0.25rem 0 0 0;
    line-height: 1.3;
}

.berita-mini h4 a {
    text-decoration: none;
    color: #000;
    transition: color 0.2s ease;
}

.berita-mini h4 a:hover {
    color: rgb(191, 26, 8);
    /* hover biru */
}

.lihat-semua {
    margin-top: 1.5rem;
    text-align: center;
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid rgb(191, 26, 8);
    border-radius: 6px;
    color: rgb(191, 26, 8);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
}

.lihat-semua:hover {
    background-color: rgb(191, 26, 8);
    color: #fff;
}

.berita-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    /* biar mobile tetap rapi */
}

.berita-row>.col {
    flex: 1;
    min-width: 300px;
}

/* Buat kiri lebih besar */
.berita-row>.col:first-child {
    flex: 2;
}

/* Kanan tetap 1 */
.berita-row>.col:last-child {
    flex: 1;
}

@media (max-width: 768px) {
    .berita-row {
        flex-direction: column;
    }

    .berita-row>.col {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .berita-mini {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .berita-mini img {
        width: 100%;
        height: auto;
    }

    .berita-mini-info {
        padding-top: 0.5rem;
    }

    .berita-mini h4 {
        font-size: 1rem;
    }
}

/* === Untuk gambar slider === */
.featured-image-slider {
    position: relative;
    width: 100%;
    max-height: auto;
}

.featured-image-slider img.image {
    width: 100%;
    height: 700px;
    display: block;
    position: relative;
    z-index: 1;
    object-fit: fill;
}

/* === Biar canvas gak maksa tinggi gede banget di HP === */
.featured-image-slider canvas.my-slider-canvas {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    /* Di belakang gambar */
}

/* === Atur tinggi slider biar fleksibel === */
.swiper-main {
    width: 100%;
    height: auto;
}

.swiper-slide {
    width: 100%;

}

.swiper-slide,
.swiper-main {
    height: auto !important;
}

/* === Tambahan untuk responsif kecil === */
@media (max-width: 768px) {
    .slider-thumbs-wrap {
        display: none !important;
    }

    .swiper-main {
        height: 300px;
        /* Sesuaikan tinggi di HP */
    }

    .featured-image-slider {
        max-height: 300px;
    }

    .featured-image-slider img.image {
        height: 100%;
        object-fit: fill;
    }
}




.peraturan-container {
    /* border: 1px solid #b30000; */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    padding: 2rem;
    background-color: #ffffff;
    max-width: 100%;
    overflow: hidden;
}

.judul {
    text-align: center;
    /* font-weight: bold; */
    margin-bottom: 1.5rem;
}

.peraturan-tab {
    display: flex;
    justify-content: flex-start;
    border: 1px solid #b30000;
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.peraturan-tab .tab {
    flex: 1;
    padding: 0.6rem 1.2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: #b30000;
    transition: all 0.3s ease;
    border-radius: 9999px;
}

.peraturan-tab .tab:first-child {
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
}

.peraturan-tab .tab:last-child {
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
}

.peraturan-tab .tab.active {
    background-color: rgb(191, 26, 8);
    color: #fff;
}

.table-container {
    overflow-x: auto;
    position: relative;
}

.peraturan-table {
    width: 100%;
    table-layout: fixed;
    /* Ini wajib biar kolom ngikutin lebar yang ditentukan */
    width: 100%;
}

.peraturan-table th,
.peraturan-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; Biar teks-nya gak turun, tapi jadi "..." */
}

.peraturan-table th {
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

.btn-unduh {
    background-color: rgb(191, 26, 8);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    font-size: 0.875rem;
    margin: 0.2rem 0;
    width: 9rem;
}

.btn-unduh:hover {
    background-color: #a50c0c;
    /* versi hover */
    color: white;
}

.lihat-lebih {
    text-align: right;
    margin-top: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.lihat-lebih a {
    color: #b30000;
    font-weight: bold;
    text-decoration: none;
}

/* Supaya kolom judul gak bikin kolom lain kesempitan */
.peraturan-table td:nth-child(3) {
    max-width: 400px;
    /* bisa kamu atur sesuai kebutuhan */
}

.peraturan-table th:nth-child(1),
.peraturan-table td:nth-child(1) {
    width: 5%;
    text-align: center;
}

.peraturan-table th:nth-child(2),
.peraturan-table td:nth-child(2) {
    width: 40%;
    text-align: center;
}

.peraturan-table th:nth-child(3),
.peraturan-table td:nth-child(3) {
    width: 60%;
    /* kolom Judul */
}

.peraturan-table th:nth-child(4),
.peraturan-table td:nth-child(4) {
    width: 20%;
    text-align: center;
}

.peraturan-table td {
    padding: 0.3rem;
}

.peraturan-table td[title] {
    cursor: help;
}

.scroll-hint {
    font-size: 0.75rem;
    color: #b30000;
    margin-top: 0.3rem;
    display: none;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    animation: fadeInSlide 1s ease forwards;
}

@keyframes fadeInSlide {
    0% {
        opacity: 0;
        transform: translateX(10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .scroll-hint {
        display: inline-block;
    }

    .peraturan-container {
        padding: 1rem;
    }

    .peraturan-tab {
        flex-direction: column;
        gap: 0.5rem;
        border-radius: 1rem;
    }

    .peraturan-tab .tab {
        border-radius: 1rem !important;
        text-align: center;
    }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll di iOS */
    }

    .peraturan-table {
        min-width: 600px;
        /* Tabel gak dipaksa ngecil sampe jelek */
    }

    .peraturan-table td:nth-child(3) {
        max-width: 300px;
        /* Biar nggak terlalu mepet */
    }

    .btn-unduh {
        width: auto;
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }

    .peraturan-table td,
    .peraturan-table th {
        font-size: 0.85rem;
    }
}


.uc-sticky-below {
    top: 0 !important;
    transform: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    box-shadow: none !important;
    /* kalau ada efek shadow */
}

.slick-product .slick-slide {
    width: 500px !important;
}


.bg-danger {
    background-color: rgb(191, 26, 8) !important;
}

@media(max-width: 1175px) {
    .nav-x {
        display: none !important;
    }

    .burger {
        display: block !important;
    }

    .custom-gap {
        display: none !important;
    }
}

@media(max-width: 1265px) {
    .nav-x {
        gap: 0 !important;
    }
}

.waktu {
    font-size: 0.75rem;
    /* atau coba 0.65rem kalo mau makin kecil */
    margin-top: 2px;
}

html {
    scroll-behavior: smooth;
}

.swiper-slide .featured-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* pick a ratio that suits most of your logos — 1/1 or 4/3 also common for logo grids */
    overflow: hidden;
}

.swiper-slide .featured-image img.satwil-logo {
    width: 100%;
    height: 100%;
    /* object-fit: contain; */
}

.satwil-slide {
    height: clamp(100px, 15vw, 220px);
}