/* ============================================================
   WEBSITE DESA
   PREMIUM GOVERNMENT PORTAL
   FINAL UNIFIED STYLE
   Untuk:
   - index.php
   - profil.php
   - informasi.php
   - dokumen.php

   Tidak mengubah struktur HTML / PHP
   Bubble animation DIHILANGKAN
   ============================================================ */


/* ============================================================
   01. DESIGN SYSTEM
   ============================================================ */

:root {

    /* Government Green */
    --primary: #176b2c;
    --primary-dark: #0d4f20;
    --primary-deep: #093b18;
    --primary-light: #2f8b48;

    /* Elegant Gold */
    --gold: #c99a3e;
    --gold-light: #e2bd67;
    --gold-soft: #f7eedc;

    /* Neutral */
    --white: #ffffff;
    --background: #f5f7f6;
    --background-soft: #eef3ef;

    --text: #1f2937;
    --text-dark: #17251b;
    --text-muted: #64748b;
    --text-light: #94a3b8;

    /* Border */
    --border: rgba(15, 23, 42, 0.08);
    --border-green: rgba(23, 107, 44, 0.16);

    /* Shadow */
    --shadow-xs:
        0 2px 8px rgba(15, 23, 42, 0.04);

    --shadow-sm:
        0 5px 18px rgba(15, 23, 42, 0.06);

    --shadow-md:
        0 10px 28px rgba(15, 23, 42, 0.09);

    --shadow-lg:
        0 18px 45px rgba(15, 23, 42, 0.12);

    /* Radius */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* Transition */
    --transition:
        all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   02. GLOBAL
   ============================================================ */

html {

    scroll-behavior: smooth;

    scroll-padding-top: 85px;
}


body {

    margin: 0;

    padding: 0;

    font-family:
        "Poppins",
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);

    line-height:
        1.7;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

    opacity:
        0;

    animation:
        bodyFadeIn 0.6s ease forwards;
}


@keyframes bodyFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* Selection */

::selection {

    background:
        var(--primary);

    color:
        var(--white);
}


/* Scrollbar */

::-webkit-scrollbar {

    width:
        8px;

    height:
        8px;
}


::-webkit-scrollbar-track {

    background:
        #edf1ee;
}


::-webkit-scrollbar-thumb {

    background:
        var(--primary);

    border-radius:
        50px;
}


::-webkit-scrollbar-thumb:hover {

    background:
        var(--primary-dark);
}


/* ============================================================
   03. TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family:
        "Poppins",
        sans-serif;

    color:
        var(--text-dark);

    font-weight:
        700;

    letter-spacing:
        -0.25px;

    line-height:
        1.3;
}


p {

    color:
        var(--text-muted);
}


a {

    text-decoration:
        none;

    transition:
        var(--transition);
}


/* ============================================================
   04. NAVBAR
   ============================================================ */

.navbar {

    position:
        sticky;

    top:
        0;

    z-index:
        1030;

    min-height:
        76px;

    padding-top:
        10px;

    padding-bottom:
        10px;

    background:
        rgba(255,255,255,0.97) !important;

    border-bottom:
        1px solid var(--border);

    box-shadow:
        0 3px 18px rgba(15,23,42,0.05);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    transition:
        var(--transition);
}


/* Support dokumen.php fixed-top */

.navbar.fixed-top {

    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;
}


/* Saat scroll */

.navbar.scrolled {

    background:
        rgba(255,255,255,0.94) !important;

    box-shadow:
        0 8px 28px rgba(15,23,42,0.10);

    backdrop-filter:
        blur(18px);
}


/* Logo */

.logo-kiri {

    height:
        45px;

    width:
        auto;

    margin-left:
        0;

    transform:
        none;

    object-fit:
        contain;

    transition:
        var(--transition);
}


.logo-kiri:hover {

    transform:
        scale(1.04);
}


/* Nama desa */

.navbar-brand.fw-bold {

    margin-left:
        5px;

    color:
        var(--primary) !important;

    font-size:
        1.45rem;

    font-weight:
        700 !important;

    letter-spacing:
        -0.4px;

    transition:
        var(--transition);
}


.navbar-brand.fw-bold:hover {

    color:
        var(--primary-dark) !important;
}


/* Navigation */

.navbar .nav-link {

    position:
        relative;

    margin:
        0 2px;

    padding:
        10px 14px !important;

    color:
        #334155 !important;

    font-size:
        14px;

    font-weight:
        600;

    border-radius:
        9px;

    transition:
        var(--transition);
}


/* Hover */

.navbar .nav-link:hover {

    color:
        var(--primary) !important;

    background:
        rgba(23,107,44,0.055);

    transform:
        translateY(-1px);
}


/* Active */

.navbar .nav-link.active {

    color:
        var(--primary) !important;

    background:
        rgba(23,107,44,0.07);

    font-weight:
        700;
}


/* Underline */

.navbar .nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        14px;

    right:
        14px;

    bottom:
        4px;

    height:
        2px;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--gold)
        );

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform 0.3s ease;
}


.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {

    transform:
        scaleX(1);
}


/* Mobile menu */

.navbar-toggler {

    border:
        1px solid var(--border-green);

    padding:
        8px 10px;

    border-radius:
        9px;

    background:
        rgba(23,107,44,0.05);
}


.navbar-toggler:focus {

    box-shadow:
        0 0 0 3px
        rgba(23,107,44,0.12);
}


/* ============================================================
   05. HERO
   ============================================================ */

.hero {

    position:
        relative;

    min-height:
        64vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    color:
        var(--white);

    overflow:
        hidden;

background:
    url("../corousel/c2.jpg")
    center center /
    cover no-repeat;

    box-shadow:
        0 12px 35px
        rgba(15,23,42,0.10);
}


/* Overlay */

/* Overlay Carousel - lebih gelap dan elegan */
.hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(3, 25, 10, 0.48) 0%,
            rgba(4, 30, 12, 0.58) 50%,
            rgba(3, 20, 8, 0.72) 100%
        );

    z-index:
        0;
}


/* Bottom fade */

/* Bottom fade */
.hero::after {
    display: none !important;
}


/* Hero content */

.hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        850px;

    padding:
        35px 45px;

    animation:
        heroAppear 0.9s ease both;
}


@keyframes heroAppear {

    from {

        opacity:
            0;

        transform:
            translateY(22px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* Hero title */

.hero h1 {

    margin:
        0 0 16px;

    font-size:
        clamp(2.2rem, 5vw, 3.7rem);

    line-height:
        1.15;

    font-weight:
        700;

    color:
        var(--white);

    text-shadow:
        0 3px 18px rgba(0,0,0,0.30);
}


/* Hero icon */

.hero h1 i {

    color:
        var(--gold-light);
}


/* Hero paragraph */

.hero p {

    max-width:
        720px;

    margin:
        0 auto;

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

    font-size:
        1.05rem;

    line-height:
        1.8;
}


/* ============================================================
   06. CONTAINER & SECTION SPACING
   ============================================================ */

.container.my-4,
.container.my-5 {

    margin-top:
        42px !important;

    margin-bottom:
        42px !important;
}


/* ============================================================
   07. SECTION TITLE
   ============================================================ */

.section-title {

    position:
        relative;

    display:
        inline-block;

    margin-bottom:
        30px;

    color:
        var(--text-dark);

    font-weight:
        700;

    letter-spacing:
        -0.3px;
}


.section-title i {

    color:
        var(--primary);
}


.section-title::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -10px;

    width:
        42px;

    height:
        3px;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--gold)
        );

    transform:
        translateX(-50%);
}


/* ============================================================
   08. STATISTIC CARDS
   ============================================================ */

.row.g-3 > div > .p-3 {

    position:
        relative;

    min-height:
        145px;

    padding:
        24px 18px !important;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-md) !important;

    background:
        var(--white) !important;

    box-shadow:
        var(--shadow-sm) !important;

    overflow:
        hidden;

    transition:
        var(--transition);
}


/* Top accent */

.row.g-3 > div > .p-3::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--gold)
        );
}


/* Hover */

.row.g-3 > div > .p-3:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-md) !important;

    border-color:
        rgba(23,107,44,0.13);
}


/* Icons */

.row.g-3 > div > .p-3 > i {

    margin-bottom:
        4px;

    font-size:
        1.8rem !important;
}


/* Title */

.row.g-3 > div > .p-3 h5 {

    margin:
        4px 0;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        600;
}


/* Number */

.row.g-3 > div > .p-3 p {

    margin:
        0;

    color:
        var(--primary);

    font-size:
        25px;

    font-weight:
        700;
}


/* ============================================================
   09. CONTENT SECTION
   ============================================================ */

.content-section {

    position:
        relative;

    padding:
        30px;

    margin-bottom:
        25px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    opacity:
        0;

    transform:
        translateY(22px);

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


.content-section.show {

    opacity:
        1;

    transform:
        translateY(0);
}


.content-section:hover {

    box-shadow:
        var(--shadow-md);
}


.content-section h3 {

    margin-bottom:
        14px;

    color:
        var(--primary);
}


.content-section h3 i {

    margin-right:
        5px;

    color:
        var(--gold);
}


/* ============================================================
   10. VISI & MISI
   ============================================================ */

.bg-success.content-section {

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        ) !important;

    border:
        none;

    color:
        var(--white);

    box-shadow:
        0 14px 35px
        rgba(23,107,44,0.18);
}


.bg-success.content-section h3,
.bg-success.content-section p {

    color:
        var(--white) !important;
}


.bg-success.content-section h3 i {

    color:
        var(--gold-light);
}


.bg-success.content-section hr {

    opacity:
        0.20;
}


/* ============================================================
   11. BERITA / KEGIATAN / GALERI
   ============================================================ */

.berita-item,
.kegiatan-item,
.galeri-item {

    position:
        relative;

    margin-bottom:
        20px;

    padding:
        18px !important;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    opacity:
        0;

    transform:
        translateY(22px);

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


.berita-item.show,
.kegiatan-item.show,
.galeri-item.show {

    opacity:
        1;

    transform:
        translateY(0);
}


.berita-item:hover,
.kegiatan-item:hover,
.galeri-item:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-md);
}


/* Images */

.berita-img,
.kegiatan-img,
.galeri-img {

    width:
        280px;

    height:
        215px;

    object-fit:
        cover;

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-xs);

    transition:
        transform 0.4s ease;
}


.berita-item:hover img,
.kegiatan-item:hover img,
.galeri-item:hover img {

    transform:
        scale(1.02);
}


/* Titles */

.berita-item h4,
.kegiatan-item h4,
.galeri-item h4 {

    color:
        var(--primary) !important;

    font-size:
        1.15rem;

    line-height:
        1.4;
}


/* Content */

.berita-item p,
.kegiatan-item p {

    margin-top:
        8px;

    color:
        var(--text-muted);

    font-size:
        0.92rem;

    line-height:
        1.65;
}


/* ============================================================
   12. BADGE
   ============================================================ */

.badge {

    padding:
        6px 10px;

    border-radius:
        7px;

    font-size:
        11px;

    font-weight:
        600;
}


/* ============================================================
   13. DOKUMEN & PERATURAN
   ============================================================ */

.table-container {

    position:
        relative;

    margin-bottom:
        30px;

    padding:
        24px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    overflow:
        hidden;

    transition:
        var(--transition);
}


.table-container:hover {

    box-shadow:
        var(--shadow-md);
}


/* Heading */

.table-container h4 {

    margin-bottom:
        20px !important;

    color:
        var(--primary) !important;

    font-size:
        1.15rem;

    font-weight:
        700;
}


/* Heading icon */

.table-container h4 i {

    margin-right:
        5px;

    color:
        var(--gold);
}


/* Table */

.data-table {

    margin:
        0;

    border-collapse:
        separate;

    border-spacing:
        0 5px;
}


/* Table header */

.data-table thead th {

    padding:
        13px 14px;

    border:
        none !important;

    background:
        #edf5ef;

    color:
        #24572d;

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.3px;
}


/* First header */

.data-table thead th:first-child {

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


/* Last header */

.data-table thead th:last-child {

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


/* Body */

.data-table tbody tr {

    background:
        var(--white);

    transition:
        var(--transition);
}


.data-table tbody tr:hover {

    background:
        #f4faf5 !important;

    transform:
        translateY(-1px);
}


/* Cells */

.data-table tbody td {

    padding:
        14px;

    border:
        none !important;

    color:
        #475569;

    font-size:
        13px;

    vertical-align:
        middle;
}


/* First cell */

.data-table tbody td:first-child {

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


/* Last cell */

.data-table tbody td:last-child {

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


/* File icons */

.data-table td i {

    color:
        var(--primary);
}


/* ============================================================
   14. SEARCH BOX
   ============================================================ */

.search-box {

    position:
        relative;

    width:
        100%;

    max-width:
        620px;

    margin:
        0 auto 30px;

    padding:
        4px;

    border:
        1px solid
        rgba(23,107,44,0.10);

    border-radius:
        50px;

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

    box-shadow:
        var(--shadow-sm);

    transition:
        var(--transition);
}


.search-box:hover {

    box-shadow:
        var(--shadow-md);
}


.search-box:focus-within {

    border-color:
        rgba(23,107,44,0.25);

    box-shadow:
        0 8px 30px
        rgba(23,107,44,0.12);
}


.search-box input {

    width:
        100%;

    height:
        50px;

    padding:
        0 20px 0 48px;

    border:
        none !important;

    outline:
        none !important;

    border-radius:
        50px;

    background:
        transparent !important;

    color:
        var(--text);

    font-size:
        14px;

    box-shadow:
        none !important;
}


.search-box input::placeholder {

    color:
        #94a3b8;
}


.search-box i {

    position:
        absolute;

    left:
        19px;

    top:
        50%;

    z-index:
        2;

    color:
        var(--primary);

    font-size:
        18px;

    transform:
        translateY(-50%);
}


/* ============================================================
   15. DOWNLOAD BUTTON
   ============================================================ */

.download-link {

    width:
        38px;

    height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(23,107,44,0.18);

    border-radius:
        9px;

    color:
        var(--primary);

    background:
        rgba(23,107,44,0.045);

    transition:
        var(--transition);
}


.download-link:hover {

    color:
        var(--white);

    background:
        var(--primary);

    border-color:
        var(--primary);

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 15px
        rgba(23,107,44,0.18);
}


/* ============================================================
   16. BUTTON
   ============================================================ */

.btn {

    border:
        none;

    border-radius:
        9px;

    font-weight:
        600;

    transition:
        var(--transition);
}


.btn:hover {

    transform:
        translateY(-2px);
}


/* Info */

.btn-info {

    color:
        var(--white) !important;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-light)
        );

    box-shadow:
        0 6px 18px
        rgba(23,107,44,0.16);
}


.btn-info:hover {

    color:
        var(--white) !important;

    box-shadow:
        0 10px 25px
        rgba(23,107,44,0.22);
}


/* Warning / gold */

.btn-warning {

    color:
        #2d2515 !important;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );

    border:
        none;
}


.btn-warning:hover {

    color:
        #2d2515 !important;

    box-shadow:
        0 8px 22px
        rgba(201,154,62,0.25);
}


/* ============================================================
   17. PAGINATION
   ============================================================ */

.pagination {

    gap:
        5px;
}


.pagination .page-link {

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        none;

    border-radius:
        50%;

    color:
        var(--primary);

    background:
        rgba(23,107,44,0.065);

    font-size:
        13px;

    transition:
        var(--transition);
}


.pagination .page-link:hover {

    color:
        var(--white);

    background:
        var(--primary);

    transform:
        translateY(-2px);
}


.pagination .page-item.active .page-link {

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-light)
        );

    box-shadow:
        0 6px 15px
        rgba(23,107,44,0.18);
}


/* ============================================================
   18. STRUKTUR ORGANISASI
   ============================================================ */

#struktur-organisasi img {

    display:
        block;

    width:
        85%;

    max-width:
        100%;

    height:
        auto;

    margin:
        0 auto;

    object-fit:
        contain;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--white);

    box-shadow:
        var(--shadow-md);

    transition:
        var(--transition);
}


#struktur-organisasi img:hover {

    box-shadow:
        var(--shadow-lg);
}


/* ============================================================
   19. POTENSI DESA
   ============================================================ */

.potensi-item {

    position:
        relative;

    margin-bottom:
        20px;

    padding:
        18px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    opacity:
        0;

    transform:
        translateY(20px);

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


.potensi-item.show {

    opacity:
        1;

    transform:
        translateY(0);
}


.potensi-item:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-md);
}


.potensi-img {

    width:
        280px;

    height:
        230px;

    object-fit:
        cover;

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-xs);
}


/* ============================================================
   20. ALERT
   ============================================================ */

.alert {

    padding:
        16px 20px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-xs);

    font-size:
        14px;
}


/* ============================================================
   21. NO RESULT
   ============================================================ */

.no-result {

    padding:
        20px;

    margin-top:
        15px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-md);

    color:
        var(--text-muted);

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

    font-style:
        italic;
}


/* ============================================================
   22. FOOTER
   ============================================================ */

footer {

    position:
        relative;

    z-index:
        2;

    margin-top:
        60px;

    padding-top:
        45px;

    background:
        linear-gradient(
            135deg,
            #0a2d15,
            #124d23
        );

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

    border-top:
        3px solid var(--gold);

    box-shadow:
        0 -8px 30px
        rgba(15,23,42,0.08);
}


footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {

    color:
        var(--white);
}


footer p {

    color:
        rgba(255,255,255,0.72);
}


footer a {

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

    transition:
        var(--transition);
}


footer a:hover {

    color:
        var(--gold-light);
}


/* ============================================================
   23. FAB PENGADUAN
   ============================================================ */

.fab-btn {

    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    z-index:
        1050;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        46px;

    padding:
        11px 20px;

    border:
        none;

    border-radius:
        50px;

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-light)
        );

    font-size:
        13px;

    font-weight:
        600;

    box-shadow:
        0 8px 25px
        rgba(23,107,44,0.25);

    transition:
        var(--transition);
}


.fab-btn:hover {

    color:
        var(--white);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(23,107,44,0.32);
}


/* ============================================================
   24. Z-INDEX
   ============================================================ */

.navbar,
.hero,
.container,
.content-section,
.table-container,
footer {

    position:
        relative;

    z-index:
        2;
}


/* ============================================================
   25. BUBBLE DIHILANGKAN
   ============================================================ */

/*
   Bubble sengaja tidak digunakan.

   Jika JavaScript lama masih membuat:
   .bubble-container

   CSS berikut memastikan bubble tidak terlihat
   dan tidak mengganggu website.
*/

.bubble-container {

    display:
        none !important;
}


/* ============================================================
   26. MOBILE TABLE
   ============================================================ */

.table-responsive {

    border-radius:
        10px;

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--primary)
        #edf1ee;
}


/* ============================================================
   27. TABLET
   ============================================================ */

@media (max-width: 992px) {

    .navbar .nav-link {

        padding:
            10px 11px !important;
    }


    .hero {

        min-height:
            60vh;
    }


    .hero-content {

        max-width:
            760px;
    }


    .berita-img,
    .kegiatan-img,
    .galeri-img {

        width:
            240px;

        height:
            200px;
    }
}


/* ============================================================
   28. MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .navbar {

        min-height:
            68px;
    }


    .navbar-collapse {

        margin-top:
            10px;

        padding:
            10px;

        border:
            1px solid var(--border);

        border-radius:
            12px;

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

        box-shadow:
            var(--shadow-sm);
    }


    .navbar .nav-link {

        margin:
            2px 0;

        padding:
            11px 12px !important;
    }


    .navbar .nav-link::after {

        display:
            none;
    }


    /* Hero */

    .hero {

        min-height:
            58vh;

        background-attachment:
            scroll;
    }


    .hero-content {

        width:
            calc(100% - 30px);

        padding:
            25px 18px;
    }


    .hero h1 {

        font-size:
            2rem;

        line-height:
            1.2;
    }


    .hero p {

        font-size:
            0.92rem;

        line-height:
            1.65;
    }


    /* Container */

    .container {

        padding-left:
            1rem;

        padding-right:
            1rem;
    }


    /* Sections */

    .content-section {

        padding:
            22px 18px;

        border-radius:
            16px;
    }


    /* News */

    .berita-item,
    .kegiatan-item,
    .galeri-item {

        padding:
            14px !important;
    }


    .berita-img,
    .kegiatan-img,
    .galeri-img {

        width:
            100%;

        height:
            200px;

        margin-right:
            0 !important;

        margin-bottom:
            15px !important;
    }


    /* Table */

    .table-container {

        padding:
            15px;

        border-radius:
            16px;
    }


    .data-table {

        min-width:
            620px;
    }


    /* Search */

    .search-box {

        max-width:
            100%;
    }


    /* Struktur */

    #struktur-organisasi img {

        width:
            100%;
    }


    /* Potensi */

    .potensi-img {

        width:
            100%;

        height:
            200px;
    }


    /* FAB */

    .fab-btn {

        right:
            15px;

        bottom:
            15px;

        padding:
            10px 16px;

        font-size:
            12px;
    }
}


/* ============================================================
   29. SMALL MOBILE
   ============================================================ */

@media (max-width: 576px) {

    body {

        font-size:
            14px;
    }


    /* Navbar */

    .navbar {

        padding-top:
            8px !important;

        padding-bottom:
            8px !important;
    }


    .logo-kiri {

        height:
            38px;
    }


    .navbar-brand.fw-bold {

        max-width:
            190px;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

        font-size:
            1.05rem !important;
    }


    /* Hero */

    .hero {

        min-height:
            55vh;
    }


    .hero-content {

        width:
            calc(100% - 24px);

        margin:
            12px;

        padding:
            22px 15px;
    }


    .hero h1 {

        font-size:
            1.65rem;
    }


    .hero p {

        font-size:
            0.88rem;
    }


    /* Section */

    .container.my-4,
    .container.my-5 {

        margin-top:
            30px !important;

        margin-bottom:
            30px !important;
    }


    /* Statistic */

    .row.g-3 > div > .p-3 {

        min-height:
            125px;

        padding:
            20px 14px !important;
    }


    .row.g-3 > div > .p-3 p {

        font-size:
            21px;
    }


    /* Content */

    .content-section h3 {

        font-size:
            1.15rem;
    }


    /* Table */

    .data-table {

        min-width:
            600px;
    }


    .data-table tbody td {

        padding:
            12px;

        font-size:
            12px;
    }


    /* Search */

    .search-box input {

        height:
            46px;

        font-size:
            13px;
    }


    /* Footer */

    footer {

        margin-top:
            40px;
    }
}


/* ============================================================
   30. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto !important;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}