/* =========================================================
   STATISTIK HERO - COMPACT
   DESA OLONG SIRON
========================================================= */

.statistik-hero {

    position: relative;

    min-height: 330px;
    height: 330px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #3e2518;
}


/* =========================================================
   BACKGROUND
========================================================= */

.statistik-hero-bg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   OVERLAY
========================================================= */

.statistik-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(57,34,20,.91) 0%,
            rgba(68,41,25,.82) 42%,
            rgba(74,45,27,.65) 72%,
            rgba(68,40,23,.50) 100%
        );

}


/* =========================================================
   DECORATIVE SHAPE
========================================================= */

.statistik-hero-shape {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    opacity: .09;
}


.statistik-shape-1 {

    width: 260px;
    height: 260px;

    right: -100px;
    top: -130px;

    border:
        30px solid #dca20a;
}


.statistik-shape-2 {

    width: 180px;
    height: 180px;

    right: 150px;
    bottom: -130px;

    border:
        20px solid #ffffff;
}


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

.statistik-hero-content {

    position: relative;

    z-index: 2;

    padding: 35px 0;
}


/* =========================================================
   LABEL
========================================================= */

.statistik-hero-label {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 8px;

    color: #efbf35;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}


.statistik-hero-label .label-line {

    width: 35px;
    height: 3px;

    border-radius: 10px;

    background: #dca20a;
}


.statistik-hero-label i {

    font-size: 11px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.statistik-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 10px;

    font-size: 9px;

    font-weight: 600;
}


.statistik-breadcrumb a {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: rgba(255,255,255,.75);

    text-decoration: none;

    transition: .2s ease;
}


.statistik-breadcrumb a:hover {

    color: #efbf35;
}


.statistik-breadcrumb span {

    color: rgba(255,255,255,.40);
}


.statistik-breadcrumb span:last-child {

    color: #efbf35;
}


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

.statistik-hero-content h1 {

    margin: 0 0 2px;

    color: #ffffff;

    font-size: 42px;

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -1px;
}


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

.statistik-hero-content h2 {

    margin: 0 0 8px;

    color: #efbf35;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.2;
}


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

.statistik-hero-description {

    max-width: 650px;

    margin: 0;

    color: rgba(255,255,255,.82);

    font-size: 11px;

    line-height: 1.65;
}


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

.statistik-hero-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 15px;
}


.statistik-meta-item {

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 155px;

    padding: 7px 10px;

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

    border-radius: 9px;

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

    backdrop-filter: blur(7px);
}


.statistik-meta-icon {

    width: 29px;
    height: 29px;

    min-width: 29px;

    display: flex;

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

    border-radius: 7px;

    background:
        rgba(220,162,10,.20);

    color: #efbf35;

    font-size: 11px;
}


.statistik-meta-item small {

    display: block;

    margin-bottom: 1px;

    color: rgba(255,255,255,.50);

    font-size: 7px;

    text-transform: uppercase;

    letter-spacing: .5px;
}


.statistik-meta-item strong {

    display: block;

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   DATA CARD
========================================================= */

.statistik-data-card {

    position: relative;

    z-index: 3;

    margin: 15px 0;

    padding: 20px;

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

    border-radius: 17px;

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

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);

    backdrop-filter: blur(10px);
}


/* =========================================================
   CARD HEADER
========================================================= */

.statistik-data-header {

    display: flex;

    align-items: center;

    gap: 10px;
}


.statistik-data-icon {

    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;

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

    border-radius: 10px;

    background: #f8edcf;

    color: #dca20a;

    font-size: 15px;
}


.statistik-data-header span {

    display: block;

    margin-bottom: 2px;

    color: #dca20a;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.statistik-data-header h3 {

    margin: 0;

    color: #5a3825;

    font-size: 16px;

    font-weight: 800;
}


/* =========================================================
   DIVIDER
========================================================= */

.statistik-data-divider {

    width: 100%;

    height: 2px;

    margin: 14px 0;

    background: #eee4d9;
}


.statistik-data-divider::before {

    content: "";

    display: block;

    width: 45px;

    height: 2px;

    border-radius: 10px;

    background: #dca20a;
}


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

.statistik-data-description {

    margin: 0;

    color: #76695f;

    font-size: 9px;

    line-height: 1.7;
}


/* =========================================================
   UPDATE BOX
========================================================= */

.statistik-update-box {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 14px;

    padding: 9px;

    border:
        1px solid #eee5db;

    border-radius: 9px;

    background: #fcfaf7;
}


.statistik-update-icon {

    width: 31px;
    height: 31px;

    min-width: 31px;

    display: flex;

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

    border-radius: 7px;

    background: #f8edcf;

    color: #dca20a;

    font-size: 11px;
}


.statistik-update-box small {

    display: block;

    margin-bottom: 2px;

    color: #9a8c81;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: .6px;
}


.statistik-update-box strong {

    display: block;

    color: #5a3825;

    font-size: 10px;

    font-weight: 800;
}


/* =========================================================
   FOOTER
========================================================= */

.statistik-data-footer {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 12px;

    padding-top: 10px;

    border-top:
        1px solid #eee5db;

    color: #97897e;

    font-size: 7px;
}


.statistik-data-footer i {

    color: #dca20a;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .statistik-hero {

        height: auto;

        min-height: 0;
    }


    .statistik-hero-content {

        padding: 40px 0 15px;
    }


    .statistik-data-card {

        margin: 10px 0 40px;
    }

}


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

@media (max-width: 767.98px) {

    .statistik-hero {

        height: auto;
    }


    .statistik-hero-content {

        padding: 35px 0 10px;
    }


    .statistik-hero-content h1 {

        font-size: 32px;
    }


    .statistik-hero-content h2 {

        font-size: 19px;
    }


    .statistik-hero-description {

        font-size: 10px;
    }


    .statistik-hero-meta {

        flex-direction: column;

        gap: 7px;
    }


    .statistik-meta-item {

        width: 100%;
    }


    .statistik-data-card {

        margin:
            10px 0 30px;

        padding:
            18px;
    }


    .statistik-shape-1 {

        width: 180px;
        height: 180px;

        right: -100px;
        top: -90px;
    }

}