.narrow {
    max-width: 850px
}

.compact {
    padding-bottom: 2.2rem
}

.news-card {
    height: 100%;
    border: 1px solid #e3ece9;
    border-radius: 14px;
    overflow: hidden;
    background: #fff
}

.news-visual,
.album-visual,
.article-cover,
.gallery-item {
    display: grid;
    place-items: center;
    min-height: 170px;
    color: #fff;
    font-size: 3rem;
    background: linear-gradient(135deg, #087064, #0b4b51)
}

.visual-b {
    background: linear-gradient(135deg, #1b6ca8, #103c64)
}

.visual-c {
    background: linear-gradient(135deg, #d97b25, #99401e)
}

.visual-d {
    background: linear-gradient(135deg, #6a4a91, #332557)
}

.visual-e {
    background: linear-gradient(135deg, #277956, #104a38)
}

.visual-f {
    background: linear-gradient(135deg, #b68a11, #694f00)
}

.news-card-body {
    padding: 1.25rem
}

.news-card-body>span,
.news-slider article>span,
.album-card span {
    font-size: .67rem;
    color: var(--teal);
    font-weight: 700;
    letter-spacing: .08em
}

.news-card h3 {
    font-size: 1.08rem;
    line-height: 1.4;
    margin: .5rem 0
}

.news-card h3 a,
.news-slider h3 a {
    color: var(--ink);
    text-decoration: none
}

.news-card h3 a:hover,
.news-slider h3 a:hover {
    color: var(--teal)
}

.news-card p {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.6
}

.read-more {
    font-size: .78rem;
    font-weight: 700;
    color: var(--teal);
    text-decoration: none
}

.article-hero {
    padding: 9rem 0 3rem;
    background: #f6faf8
}

.article-hero .breadcrumb {
    font-size: .75rem
}

.article-hero .breadcrumb a {
    color: var(--teal);
    text-decoration: none
}

.article-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 5vw, 3.7rem);
    line-height: 1.15;
    margin: .7rem 0
}

.article-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--muted)
}

.article-content {
    padding: 3rem 0 5rem;
    font-size: 1rem;
    line-height: 1.85;
    color: #40545a
}

.article-cover {
    min-height: 310px;
    border-radius: 15px;
    margin-bottom: 2rem;
    font-size: 5rem
}

.article-content blockquote {
    border-left: 4px solid var(--orange);
    padding: .5rem 1.2rem;
    margin: 2rem 0;
    font-size: 1.2rem;
    font-family: 'Playfair Display', serif;
    color: var(--ink)
}

.album-card {
    display: block;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid #e3ece9;
    border-radius: 14px;
    overflow: hidden
}

.album-card:hover {
    color: var(--teal);
    box-shadow: 0 8px 22px #163c3516
}

.album-card>div:last-child {
    padding: 1.1rem
}

.album-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: .35rem 0
}

.album-card p {
    font-size: .75rem;
    color: var(--muted);
    margin: 0
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

.gallery-item {
    min-height: 210px;
    border-radius: 13px
}

.gallery-item:nth-child(1) {
    grid-column: span 2;
    min-height: 300px
}

.indicator-card {
    height: 100%;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e2ece8;
    border-radius: 13px
}

.indicator-card i {
    display: block;
    color: var(--teal);
    font-size: 1.3rem;
    margin-bottom: 1rem
}

.indicator-card small {
    display: block;
    color: var(--muted);
    font-size: .75rem
}

.indicator-card strong {
    font-size: 1.6rem;
    display: inline-block;
    margin-top: .3rem
}

.indicator-card span {
    font-size: .7rem;
    color: var(--muted);
    margin-left: .25rem
}

.section-note {
    font-size: .7rem;
    color: var(--muted)
}

.content-heading {
    font-size: 1.8rem;
    font-weight: 700;
    margin: .5rem 0 1.2rem
}

.priority-list>div {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e5eeea
}

.priority-list b {
    font-family: 'Playfair Display', serif;
    color: var(--orange);
    font-size: 1.4rem
}

.priority-list strong {
    display: block;
    font-size: .9rem
}

.priority-list small {
    color: var(--muted);
    font-size: .76rem
}

.adat-map,
.adat-map-large {
    display: block;
    position: relative;
    min-height: 320px;
    border-radius: 18px;
    overflow: hidden;
    background: radial-gradient(ellipse at 40% 50%, #a9d7c7 0 16%, transparent 16.5%), radial-gradient(ellipse at 64% 36%, #7fbda9 0 13%, transparent 13.5%), linear-gradient(135deg, #e8f5f1, #cae4dc)
}

.adat-map>span {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: #fff;
    color: var(--teal);
    font-size: .75rem;
    font-weight: 700;
    padding: .5rem .7rem;
    border-radius: 6px
}

.adat-node {
    position: absolute;
    background: var(--teal);
    color: #fff;
    font-size: .7rem;
    padding: .35rem .5rem;
    border-radius: 99px;
    box-shadow: 0 3px 8px #1234
}

.n1 {
    top: 24%;
    left: 38%
}

.n2 {
    top: 16%;
    left: 61%
}

.n3 {
    top: 54%;
    left: 34%
}

.n4 {
    top: 43%;
    left: 52%
}

.n5 {
    top: 65%;
    left: 69%
}

.n6 {
    top: 38%;
    left: 14%
}

.adat-map-large {
    min-height: 390px
}

.adat-info {
    height: 100%;
    padding: 1.1rem;
    border: 1px solid #e2ece8;
    border-radius: 10px
}

.adat-info h3 {
    font-size: 1rem;
    font-weight: 700
}

.adat-info p {
    font-size: .8rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.6
}

.news-slider,
.related-slider {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scroll-snap-type: x mandatory
}

.news-slider article {
    min-width: 285px;
    max-width: 285px;
    scroll-snap-align: start
}

.news-slider .news-visual {
    min-height: 135px;
    border-radius: 12px;
    margin-bottom: .8rem
}

.news-slider h3 {
    font-size: .96rem;
    line-height: 1.45;
    margin: .4rem 0
}

.related-slider a {
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--ink);
    text-decoration: none;
    padding: 1rem;
    border: 1px solid #e1ece8;
    border-radius: 11px;
    font-size: .8rem;
    font-weight: 700
}

.related-slider a:hover {
    border-color: var(--teal);
    color: var(--teal)
}

.related-slider i {
    font-size: 1.35rem;
    color: var(--teal)
}

@media(max-width:575px) {
    .gallery-grid {
        grid-template-columns: 1fr 1fr
    }

    .gallery-item {
        min-height: 135px
    }

    .gallery-item:nth-child(1) {
        min-height: 200px
    }

    .article-content {
        padding: 2rem 1rem 3rem
    }

    .adat-map {
        min-height: 280px
    }
}

:root,
:root[data-theme="teal"] {
    --ink: #18354c;
    --teal: #3c8dbc;
    --teal-dark: #2d6f99;
    --aqua: #e7f2f9;
    --cream: #f4f8fb
}

.portal-nav {
    background: linear-gradient(180deg, rgba(39, 105, 148, .75), transparent)
}

.portal-nav.scrolled {
    background: rgba(44, 103, 145, .97)
}

.landing-hero,
.inner-hero {
    background: radial-gradient(circle at 76% 36%, #61a9d0 0, #3c8dbc 35%, #2d6f99 75%, #204e70 100%)
    background-image: url('../images/bg-1.png');
    /*background-size: cover;*/
    background-position: left;
}

.site-footer {
    background: #245f88
}

.brand-logo {
    background: #fff;
    padding: 2px;
    overflow: hidden
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.stat-slider-section {
    /*background: #2d6f99;*/
    background-image: url('../images/bg-1.png');
    /*background-size: cover;*/
    background-position: left;
}

.stat-slider-section .carousel-item {
    height: 520px;
    position: relative;
    overflow: hidden
}

.slide-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, #204e70, #3c8dbc);
    overflow: hidden
}

.slide-caption {
    position: absolute;
    z-index: 2;
    color: #fff;
    padding-top: 150px;
    left: 10%;
    max-width: 50%;
}

.slide-caption h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 1.05;
    margin: .7rem 0
}

.slide-caption h1 em {
    color: #ffd074
}

.slide-caption p {
    max-width: 580px;
    font-size: 1.05rem;
    color: #e5f3fb
}

.slide-leaders {
    background: linear-gradient(110deg, #1e4e73, #3c8dbc)
}

.leader-portrait {
    position: absolute;
    bottom: 10%;
    width: 20%;
    height: 70%;
    background-size: cover;
    background-position: center top;
    filter: saturate(.85)
}

.leader-one {
    right: 28%;
    background-image: linear-gradient(transparent, #143b58a8), url('../images/kepala-daerah.png')
}

.leader-two {
    right: 6%;
    /*height: 76%;*/
    background-image: linear-gradient(transparent, #143b58a8), url('../images/wakil-kepala-daerah.png')
}

.slide-papua-map {
    background: radial-gradient(ellipse at 63% 42%, #80bde0 0 18%, transparent 18.5%), linear-gradient(120deg, #204e70, #3c8dbc)
}

.papua-silhouette {
    position: absolute;
    right: 11%;
    top: 31%;
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 700;
    letter-spacing: .25em;
    color: #ffffff2e;
    transform: rotate(-10deg)
}

.slide-adat-map {
    left: 0% !important;
    background: radial-gradient(ellipse at 64% 42%, #8ec7e5 0 14%, transparent 14.5%), radial-gradient(ellipse at 45% 61%, #65a9d1 0 19%, transparent 19.5%), linear-gradient(120deg, #204e70, #3c8dbc)
}

.slide-adat-map .adat-node {
    background: #fff;
    color: #2d6f99
}

.inner-hero-search {
    padding: 4rem 0 4.5rem
}

.inner-hero-search h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin: .6rem 0
}

@media(max-width:991px) {
    .stat-slider-section .carousel-item {
        height: 470px
    }

    .slide-caption {
        padding-top: 130px
    }

    .leader-portrait {
        opacity: .55
    }

    .inner-hero-search {
        padding: 3.5rem 0
    }
}

.gallery-item {
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s
}

.gallery-item:hover {
    transform: scale(1.015);
    box-shadow: 0 10px 25px #173c542b
}

.gallery-lightbox .modal-content {
    border: 0;
    border-radius: 0;
    background: #071c2b
}

.lightbox-close {
    position: absolute;
    z-index: 3;
    right: 1.5rem;
    top: 1.3rem;
    border: 1px solid #ffffff5e;
    background: #ffffff1c;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.1rem
}

.lightbox-slide {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: clamp(5rem, 18vw, 12rem)
}

.lightbox-slide p {
    font-size: .9rem;
    margin: 1.2rem 0 0;
    letter-spacing: .04em
}

.gallery-lightbox .carousel-control-prev,
.gallery-lightbox .carousel-control-next {
    width: 12%
}

.lightbox-counter {
    position: absolute;
    z-index: 2;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: .82rem;
    background: #0007;
    padding: .4rem .75rem;
    border-radius: 99px
}