*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    font-family:"DM Sans",sans-serif;
    color:#1f2925;
    background:#f8f7f2;
    line-height:1.7
}

a{
    text-decoration:none;
    color:inherit
}

.container{
    width:min(1180px,92%);
    margin:auto
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(248,247,242,.96);
    backdrop-filter:blur(14px);
    border-bottom:1px solid #e7e5dc
}

.nav-inner{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}



.logo-icon{
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.logo-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}


.brand-mark{
    width:42px;
    height:42px;
    border-radius:13px;
    background:#23483b;
    color:#fff;
    display:grid;
    place-items:center;
    font-family:"Playfair Display",serif;
    font-size:22px
}

.brand strong{
    display:block;
    font-size:15px
}

.brand small{
    display:block;
    color:#7a817c;
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase
}

nav{
    display:flex;
    gap:3px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end
}

nav a{
    padding:10px 8px;
    color:#5e6761;
    font-size:12px;
    font-weight:600
}

nav a:hover,
nav a.active{
    color:#23483b
}

.menu-toggle{
    display:none;
    border:0;
    background:none;
    color:#23483b;
    font-size:25px;
    cursor:pointer
}


/* =====================================================
   HERO
===================================================== */

.hero{
    min-height:650px;
    position:relative;

    background:
        linear-gradient(
            100deg,
            rgba(20,43,35,.92),
            rgba(20,43,35,.4)
        ),
        url("https://images.unsplash.com/photo-1539650116574-75c0c6d73f6e?auto=format&fit=crop&w=1800&q=85")
        center/cover
}

.hero-content{
    position:relative;
    z-index:1;
    padding:145px 0 100px;
    color:#fff;
    max-width:760px
}

.eyebrow{
    font-size:11px;
    letter-spacing:.18em;
    font-weight:700;
    color:#d4b56b
}

.eyebrow.dark{
    color:#9a7940
}

.hero h1,
.page-hero h1,
h2{
    font-family:"Playfair Display",serif;
    line-height:1.1
}

.hero h1{
    font-size:clamp(48px,7vw,86px);
    margin:15px 0 20px
}

.hero h1 em{
    color:#e0c98f;
    font-style:normal
}

.hero p{
    max-width:610px;
    color:#e7ece7;
    font-size:17px
}

.hero-actions{
    display:flex;
    gap:12px;
    margin-top:32px
}


/* =====================================================
   BUTTON
===================================================== */

.btn{
    display:inline-block;
    padding:12px 19px;
    border-radius:8px;
    font-size:13px;
    font-weight:700;
    transition:.2s
}

.btn:hover{
    transform:translateY(-2px)
}

.btn-primary{
    background:#d4b56b;
    color:#17271f
}

.btn-light{
    border:1px solid rgba(255,255,255,.5);
    color:#fff
}

.btn-dark{
    background:#23483b;
    color:#fff
}

.btn-outline-dark{
    display:inline-block;
    padding:11px 18px;
    border:1px solid #23483b;
    border-radius:8px;
    color:#23483b;
    font-size:13px;
    font-weight:700;
    transition:.2s
}

.btn-outline-dark:hover{
    background:#23483b;
    color:#fff
}


/* =====================================================
   STATISTIK
===================================================== */

.stats-section{
    background:#23483b;
    color:#fff
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:28px 0
}

.stat{
    border-right:1px solid rgba(255,255,255,.16);
    text-align:center
}

.stat:last-child{
    border-right:0
}

.stat strong{
    display:block;
    font:700 32px "Playfair Display",serif
}

.stat span{
    font-size:11px;
    color:#c8d0cb;
    text-transform:uppercase;
    letter-spacing:.08em
}


/* =====================================================
   SECTION
===================================================== */

.section{
    padding:85px 0
}

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:30px
}

.section h2{
    font-size:43px;
    margin:8px 0
}

.text-link,
.card-body a,
.category-heritage-content a{
    color:#8c6b35;
    font-size:13px;
    font-weight:700
}


/* =====================================================
   KARTU WARISAN
===================================================== */

.card-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}

.heritage-card{
    background:#fff;
    border:1px solid #e9e6dc;
    border-radius:14px;
    overflow:hidden;
    transition:.25s
}

.heritage-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 45px rgba(30,50,40,.09)
}

.card-image{
    height:240px;
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at center, #10382d 0%, #06231b 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
}

.card-image img{
    width:100%;
    height:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
    transition:transform .3s ease;
}

.heritage-card:hover .card-image img{
    transform:scale(1.04);
}

.image-fallback{
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}

.placeholder{
    background:linear-gradient(
        135deg,
        #d9ddd5,
        #aeb9ae
    );

    place-items:center;

    color:#fff;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase
}

.card-body{
    padding:22px
}

.tag{
    display:inline-block;
    background:#edf1e9;
    color:#4c6959;
    padding:5px 10px;
    border-radius:99px;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase
}

.card-body h3{
    font:700 25px "Playfair Display",serif;
    margin:10px 0 7px
}

.card-body p{
    font-size:13px;
    color:#6e756f;
    margin:0 0 15px
}


/* =====================================================
   PETA BERANDA
===================================================== */

.split-section{
    background:#ebe9df;
    padding:85px 0
}

.split{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:55px;
    align-items:center
}

.split h2{
    font-size:46px
}

.map-box{
    height:350px;
    border-radius:16px;
    overflow:hidden
}


/* =====================================================
   QUOTE
===================================================== */

.quote-section{
    background:#23483b;
    color:#fff;
    padding:80px 0
}

.quote{
    max-width:850px;
    text-align:center
}

.quote span{
    font:700 70px "Playfair Display",serif;
    color:#d4b56b
}

.quote p{
    font:28px "Playfair Display",serif;
    line-height:1.4
}


/* =====================================================
   PAGE HERO
===================================================== */

.page-hero{
    background:#23483b;
    color:#fff
}

.page-hero.small{
    padding:75px 0
}

.page-hero h1{
    font-size:58px;
    margin:10px 0
}

.page-hero p{
    color:#d3dbd5;
    max-width:750px;
    margin-bottom:0
}


/* =====================================================
   FILTER KATALOG
===================================================== */

.filter-bar{
    display:flex;
    gap:12px;
    margin-bottom:25px
}

.filter-bar input,
.filter-bar select{
    padding:13px 15px;
    border:1px solid #ddd9ce;
    border-radius:8px;
    background:#fff;
    font:inherit
}

.filter-bar input{
    flex:1
}


/* =====================================================
   DETAIL WARISAN
===================================================== */

.detail-cultural-layout{
    display:grid;
    grid-template-columns:minmax(400px,.95fr) minmax(0,1.2fr);
    gap:55px;
    align-items:start
}


/* FOTO SEBELAH KIRI */

.detail-cultural-left{
    min-width:0;
    position:sticky;
    top:95px;
}

.detail-cultural-photo{
    width:100%;
    min-height:360px;
    max-height:480px;
    height:460px;
    border-radius:18px;
    overflow:hidden;
    position:relative;
    background:radial-gradient(circle at center, #10382d 0%, #06231b 100%);
    border:1px solid rgba(229,195,109,.28);
    box-shadow:0 14px 40px rgba(5,38,29,.22);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    cursor:zoom-in;
    transition:box-shadow .25s ease;
}

.detail-cultural-photo:hover{
    box-shadow:0 18px 48px rgba(5,38,29,.32);
}

.detail-cultural-photo img{
    width:100%;
    height:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
    transition:transform .25s ease;
}

.detail-cultural-photo:hover img{
    transform:scale(1.02);
}

/* THUMBNAIL BAR DI BAWAH FOTO UTAMA DETAIL */
.detail-thumb-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
    justify-content:center;
}

.detail-thumb-item{
    width:58px;
    height:58px;
    border-radius:10px;
    overflow:hidden;
    border:2px solid transparent;
    cursor:pointer;
    background:#08261e;
    opacity:0.65;
    transition:all .2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2px;
}

.detail-thumb-item:hover{
    opacity:1;
    transform:scale(1.08);
}

.detail-thumb-item.active{
    border-color:#d4b56b;
    opacity:1;
    box-shadow:0 0 0 2px rgba(212,181,107,.45);
}

.detail-thumb-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:6px;
}

.detail-cultural-placeholder{
    width:100%;
    height:100%;

    place-items:center;

    padding:30px;

    text-align:center;

    background:linear-gradient(
        135deg,
        #d9ddd5,
        #aeb9ae
    );

    color:#fff;
    font-size:17px;
    font-weight:700;
    letter-spacing:.08em
}


/* INFORMASI SEBELAH KANAN */

.detail-cultural-right{
    min-width:0
}

.detail-cultural-title{
    font-family:"Playfair Display",serif;

    font-size:52px;
    line-height:1.08;

    margin:14px 0 28px;

    color:#1f2925
}


/* KOTAK INFORMASI */

.detail-cultural-item{
    display:flex;
    align-items:flex-start;

    gap:18px;

    padding:22px;

    margin-bottom:16px;

    background:#fff;

    border:1px solid #e7e3d9;
    border-radius:14px;

    transition:.25s
}

.detail-cultural-item:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 35px rgba(30,50,40,.07)
}

.location-item{
    background:#f4f5ef
}


/* NOMOR */

.detail-cultural-number{
    width:42px;
    min-width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:11px;

    background:#edf1e9;
    color:#8c6b35;

    font-family:"Playfair Display",serif;
    font-size:17px;
    font-weight:700
}


/* ICON LOKASI */

.detail-cultural-icon{
    width:42px;
    min-width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:11px;

    background:#edf1e9;

    font-size:18px
}


/* TEKS DETAIL */

.detail-cultural-text{
    flex:1;
    min-width:0
}

.detail-label{
    display:block;

    margin-bottom:7px;

    color:#9a7940;

    font-size:10px;
    font-weight:700;
    letter-spacing:.15em
}

.detail-cultural-text p{
    margin:0;

    color:#59635d;

    font-size:14px;
    line-height:1.8
}


/* LIST NILAI DAN ILMU PENGETAHUAN */

.detail-cultural-list{
    list-style:none;
    padding:0;
    margin:0
}

.detail-cultural-list li{
    display:flex;
    align-items:flex-start;

    gap:10px;

    padding:8px 0;

    border-bottom:1px solid #efede6;

    color:#59635d;

    font-size:13px;
    line-height:1.6
}

.detail-cultural-list li:last-child{
    border-bottom:0
}

.check-icon{
    width:21px;
    min-width:21px;
    height:21px;

    display:grid;
    place-items:center;

    margin-top:1px;

    border-radius:50%;

    background:#edf1e9;
    color:#4c6959;

    font-size:10px;
    font-weight:700
}


/* TOMBOL DETAIL */

.detail-cultural-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:25px
}


/* =====================================================
   KATEGORI
===================================================== */

.category-group{
    margin-bottom:70px
}

.category-group:last-child{
    margin-bottom:0
}

.category-group-head{
    display:flex;
    align-items:end;
    justify-content:space-between;

    gap:20px;

    padding-bottom:18px;
    margin-bottom:25px;

    border-bottom:1px solid #ddd9ce
}

.category-group-head h2{
    font-size:40px;
    margin:5px 0 0
}

.category-number{
    font:700 25px "Playfair Display",serif;
    color:#d0b06b
}

.category-count{
    display:inline-block;

    padding:7px 13px;

    background:#edf1e9;
    color:#4c6959;

    border-radius:99px;

    font-size:11px;
    font-weight:700;

    white-space:nowrap
}

.category-items-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}

.category-heritage-card{
    background:#fff;

    border:1px solid #e9e6dc;
    border-radius:14px;

    overflow:hidden;

    transition:.25s
}

.category-heritage-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 45px rgba(30,50,40,.09)
}

.category-heritage-image{
    height:220px;
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at center, #10382d 0%, #06231b 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
}

.category-heritage-image img{
    width:100%;
    height:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
    transition:transform .3s ease;
}

.category-heritage-card:hover .category-heritage-image img{
    transform:scale(1.04);
}

.category-heritage-content{
    padding:22px
}

.category-heritage-content h3{
    font:700 24px "Playfair Display",serif;
    margin:10px 0 7px
}

.category-heritage-content p{
    margin:0 0 13px;
    color:#6e756f;
    font-size:13px
}

.category-heritage-content .category-location{
    color:#8c6b35;
    font-size:12px;
    font-weight:600
}


/* =====================================================
   PETA
===================================================== */

.full-map{
    height:580px;

    border-radius:16px;

    overflow:hidden;

    border:1px solid #e4e0d6;

    box-shadow:0 10px 35px rgba(30,50,40,.06)
}

.map-note{
    margin-top:15px;

    padding:15px;

    background:#fff8e7;

    border-radius:10px;

    font-size:13px
}


/* INFO WARISAN TERPILIH */

.selected-map-info{
    background:#fff;

    border:1px solid #e7e3d9;

    border-radius:14px;

    padding:22px 25px;

    margin-bottom:20px
}

.selected-map-info h2{
    font-size:30px;
    margin:9px 0
}

.selected-map-info p{
    margin:0 0 10px;

    color:#8c6b35;

    font-size:13px;
    font-weight:600
}


/* POPUP PETA */

.map-popup{
    min-width:180px;
    line-height:1.5
}

.map-popup strong{
    color:#23483b;
    font-size:14px
}

.map-popup small{
    color:#8c6b35;
    font-weight:600
}


/* =====================================================
   GALERI BUDAYA & ARSIP
===================================================== */

.gallery-filter{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:34px;
    justify-content:center;
}

.gallery-filter-btn{
    border:1px solid #d9d5c8;
    background:#fff;
    color:#2b483c;
    padding:10px 20px;
    border-radius:24px;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    transition:all .2s ease;
    font-family:inherit;
    box-shadow:0 2px 8px rgba(0,0,0,.03);
}

.gallery-filter-btn:hover{
    background:#f4efe4;
    border-color:#b99e5a;
    color:#16382c;
    transform:translateY(-1px);
}

.gallery-filter-btn.active{
    background:#23483b;
    border-color:#23483b;
    color:#fff;
    box-shadow:0 6px 18px rgba(35,72,59,.25);
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    gap:26px;
}

.gallery-card{
    background:#fff;
    border:1px solid #e9e6dc;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(25,45,36,.06);
    transition:transform .25s ease, box-shadow .25s ease;
    cursor:pointer;
    display:flex;
    flex-direction:column;
}

.gallery-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(25,45,36,.14);
}

.gallery-img-wrap{
    height:250px;
    position:relative;
    background:radial-gradient(circle at center, #10382d 0%, #06231b 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
    overflow:hidden;
}

.gallery-img-wrap img{
    width:100%;
    height:100%;
    max-height:100%;
    object-fit:contain;
    transition:transform .3s ease;
    display:block;
}

.gallery-card:hover .gallery-img-wrap img{
    transform:scale(1.05);
}

.gallery-badge{
    position:absolute;
    top:12px;
    left:12px;
    background:rgba(8,38,30,.88);
    color:#d4b56b;
    font-size:11px;
    font-weight:700;
    padding:5px 12px;
    border-radius:20px;
    border:1px solid rgba(212,181,107,.35);
    backdrop-filter:blur(4px);
    letter-spacing:.04em;
    z-index:2;
}

.gallery-card-body{
    padding:22px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.gallery-card-body h3{
    font:700 20px "Playfair Display",serif;
    color:#1d382e;
    margin:0 0 10px;
    line-height:1.35;
}

.gallery-card-body p{
    color:#666e69;
    font-size:13px;
    line-height:1.6;
    margin:0 0 18px;
    flex:1;
}

.gallery-card-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:14px;
    border-top:1px solid #f0ece3;
    margin-top:auto;
}

.gallery-btn-zoom{
    font-size:12.5px;
    font-weight:600;
    color:#8c6b35;
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.gallery-btn-detail{
    font-size:12.5px;
    font-weight:700;
    color:#23483b;
    text-decoration:none;
    padding:6px 14px;
    border-radius:16px;
    background:#f1ede3;
    transition:all .2s ease;
}

.gallery-btn-detail:hover{
    background:#23483b;
    color:#fff;
}


/* =====================================================
   DOKUMENTASI FOTO PADA HALAMAN DETAIL WARISAN BUDAYA
===================================================== */

.detail-gallery-wrapper{
    margin-top:70px;
    padding-top:40px;
    border-top:1px solid #e7e3d9;
}

.detail-gallery-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:30px;
    flex-wrap:wrap;
}

.detail-gallery-head h3{
    font:700 30px "Playfair Display",serif;
    color:#1d382e;
    margin:6px 0 8px;
}

.detail-gallery-head p{
    color:#606863;
    max-width:680px;
    margin:0;
    font-size:14px;
    line-height:1.6;
}

.gallery-count-badge{
    background:#f4ede1;
    color:#7d5c21;
    border:1px solid #e5c36d;
    font-size:13px;
    font-weight:700;
    padding:8px 16px;
    border-radius:20px;
    white-space:nowrap;
}

.detail-gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:22px;
}

.detail-gallery-card{
    background:#fff;
    border:1px solid #e9e6dc;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(25,45,36,.06);
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease;
    display:flex;
    flex-direction:column;
}

.detail-gallery-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(25,45,36,.12);
}

.detail-gallery-img{
    height:210px;
    position:relative;
    background:radial-gradient(circle at center, #10382d 0%, #06231b 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    overflow:hidden;
}

.detail-gallery-img img{
    width:100%;
    height:100%;
    max-height:100%;
    object-fit:contain;
    transition:transform .3s ease;
    display:block;
}

.detail-gallery-card:hover .detail-gallery-img img{
    transform:scale(1.05);
}

.detail-gallery-zoom-overlay{
    position:absolute;
    inset:0;
    background:rgba(8,38,30,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity .2s ease;
    color:#f2e6cb;
    font-size:13px;
    font-weight:600;
    letter-spacing:.03em;
}

.detail-gallery-card:hover .detail-gallery-zoom-overlay{
    opacity:1;
}

.detail-gallery-info{
    padding:16px 18px 18px;
    flex:1;
    display:flex;
    flex-direction:column;
}

.detail-gallery-tag{
    color:#8c6b35;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:6px;
    display:inline-block;
}

.detail-gallery-info h4{
    font:700 17px "Playfair Display",serif;
    color:#1d382e;
    margin:0 0 6px;
    line-height:1.35;
}

.detail-gallery-info p{
    color:#666e69;
    font-size:12.5px;
    line-height:1.55;
    margin:0;
}


/* =====================================================
   LIGHTBOX MODAL FOTO LENGKAP
===================================================== */

.image-lightbox{
    display:none;
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(4,20,15,.92);
    backdrop-filter:blur(8px);
    padding:20px;
    align-items:center;
    justify-content:center;
    animation:lightboxFade .2s ease-out;
}

.image-lightbox.active{
    display:flex;
}

@keyframes lightboxFade{
    from{ opacity:0; }
    to{ opacity:1; }
}

.lightbox-content{
    position:relative;
    max-width:1050px;
    width:100%;
    max-height:92vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:#072118;
    border:1px solid rgba(212,181,107,.35);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.6);
    animation:lightboxScale .25s ease-out;
}

@keyframes lightboxScale{
    from{ transform:scale(0.95); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}

.lightbox-close{
    position:absolute;
    top:14px;
    right:14px;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(0,0,0,.5);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .2s ease;
}

.lightbox-close:hover{
    background:#e5c36d;
    color:#072118;
    transform:rotate(90deg);
}

.lightbox-img-box{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at center, #0f3529 0%, #051b14 100%);
    padding:20px;
    max-height:72vh;
    overflow:hidden;
}

.lightbox-img{
    max-width:100%;
    max-height:68vh;
    object-fit:contain;
    border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.lightbox-caption{
    width:100%;
    padding:18px 24px 22px;
    background:#09281e;
    border-top:1px solid rgba(212,181,107,.2);
    color:#e3e7e4;
    text-align:center;
}

.lightbox-caption h4{
    font:700 20px "Playfair Display",serif;
    color:#f2e6cb;
    margin:0 0 6px;
}

.lightbox-caption p{
    color:#a8b6b0;
    font-size:13.5px;
    line-height:1.55;
    margin:0;
    max-width:760px;
    margin:0 auto;
}


/* =====================================================
   VIDEO
===================================================== */

.video-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px
}

.video-card{
    background:#fff;

    padding:20px;

    border:1px solid #e7e3d9;
    border-radius:14px
}

.video-placeholder{
    height:280px;

    display:grid;
    place-items:center;

    border-radius:10px;

    background:#233d34;
    color:#d4b56b;

    font-size:55px
}

.video-card p{
    color:#70776f;
    font-size:12px
}


/* =====================================================
   TENTANG
===================================================== */

.about-grid{
    display:grid;
    grid-template-columns:1.4fr .8fr;
    gap:55px
}

.about-grid h2{
    font-size:45px
}

.about-grid li{
    margin:7px 0
}

.info-box{
    padding:18px;

    background:#eef0e9;

    border-left:4px solid #d4b56b;

    font-size:13px
}


/* =====================================================
   PENGEMBANG & NARASUMBER
===================================================== */

.profile-heading{
    max-width:760px;
    margin-bottom:38px
}

.profile-heading h2{
    font-family:"Playfair Display",serif;

    font-size:43px;

    margin:8px 0 12px
}

.profile-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:24px
}

.profile-card{
    overflow:hidden;

    background:#fff;

    border:1px solid #e9e6dc;
    border-radius:16px;

    box-shadow:0 4px 15px rgba(30,50,40,.03);

    transition:.25s
}

.profile-card:hover{
    transform:translateY(-5px);

    box-shadow:0 18px 45px rgba(30,50,40,.10)
}

.profile-photo{
    width:100%;
    height:320px;
    position:relative;
    overflow:hidden;
    background:#ebe8df;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}

.profile-photo img{
    width:auto;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
    border-radius:10px;
    box-shadow:0 6px 18px rgba(30,50,40,.09);
    transition:.25s ease;
}

.profile-card:hover .profile-photo img{
    transform:scale(1.02);
}

.profile-placeholder{
    position:absolute;
    inset:0;

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

    background:linear-gradient(
        135deg,
        #d9ddd5,
        #aeb9ae
    );

    color:#fff;

    font-size:70px
}

.profile-content{
    padding:24px
}

.profile-content h3{
    font:700 27px "Playfair Display",serif;

    line-height:1.2;

    margin:11px 0 7px
}

.profile-content p{
    margin:7px 0;

    color:#6e756f;

    font-size:13px;
    line-height:1.7
}

.profile-content .profile-institution,
.profile-content .location{
    color:#8c6b35;
    font-weight:700
}


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

.footer{
    background:#172c24;
    color:#cbd4cf;
    padding:40px 0
}

.footer-inner{
    display:flex;
    justify-content:space-between;
    gap:20px
}

.footer p{
    font-size:12px
}


/* =====================================================
   CHATBOT
===================================================== */

.chatbot-toggle{
    position:fixed;

    right:25px;
    bottom:25px;

    z-index:2000;

    width:58px;
    height:58px;

    border:0;
    border-radius:50%;

    background:#d4b56b;
    color:#1d3027;

    font-size:24px;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

    cursor:pointer
}

.chatbot{
    position:fixed;

    right:25px;
    bottom:95px;

    z-index:2000;

    width:350px;

    overflow:hidden;

    display:none;

    background:#fff;

    border:1px solid #ddd9ce;
    border-radius:16px;

    box-shadow:0 20px 60px rgba(0,0,0,.18)
}

.chatbot.open{
    display:block
}

.chat-head{
    display:flex;
    justify-content:space-between;

    padding:15px 17px;

    background:#23483b;
    color:#fff
}

.chat-head small{
    display:block;
    color:#c8d1cc;
    font-size:10px
}

.chat-head button{
    border:0;
    background:none;

    color:#fff;

    font-size:25px;

    cursor:pointer
}

.chat-body{
    height:260px;

    padding:15px;

    overflow:auto;

    background:#f6f5ef
}

.bot-msg,
.user-msg{
    max-width:85%;

    padding:10px 12px;

    margin-bottom:10px;

    border-radius:10px;

    font-size:12px
}

.bot-msg{
    background:#fff
}

.user-msg{
    margin-left:auto;
    background:#dbe8df
}

.chat-suggestions{
    display:flex;
    gap:5px;

    padding:9px;

    overflow:auto
}

.chat-suggestions button{
    padding:6px 9px;

    white-space:nowrap;

    border:1px solid #d9d7ce;
    border-radius:99px;

    background:#fff;

    font-size:10px;

    cursor:pointer
}

.chat-form{
    display:flex;
    border-top:1px solid #eee
}

.chat-form input{
    flex:1;

    border:0;

    padding:13px;

    outline:0
}

.chat-form button{
    width:48px;

    border:0;

    background:#23483b;
    color:#fff;

    cursor:pointer
}

.hidden{
    display:none!important
}


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

@media(max-width:1050px){

    nav a{
        padding:9px 6px;
        font-size:11px
    }

}


@media(max-width:900px){

    nav{
        position:absolute;

        top:78px;
        left:0;
        right:0;

        display:none;

        flex-direction:column;
        align-items:stretch;

        padding:15px;

        background:#f8f7f2;

        border-bottom:1px solid #e7e5dc;

        box-shadow:0 15px 30px rgba(0,0,0,.08)
    }

    nav.open{
        display:flex
    }

    nav a{
        padding:10px 12px;
        font-size:13px
    }

    .menu-toggle{
        display:block
    }

    .stats-grid,
    .card-grid,
    .gallery-grid,
    .profile-grid,
    .category-items-grid{
        grid-template-columns:1fr 1fr
    }

    .split,
    .about-grid,
    .video-grid{
        grid-template-columns:1fr
    }

    .detail-cultural-layout{
        grid-template-columns:1fr;
        gap:35px
    }

    .detail-cultural-left{
        position:static;
    }

    .detail-cultural-photo{
        position:relative;
        top:auto;
        height:420px;
        min-height:300px;
    }

    .detail-gallery-grid{
        grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    }

    .detail-cultural-title{
        font-size:43px
    }

    .hero{
        min-height:600px
    }

    .hero-content{
        padding-top:110px
    }

    .profile-photo{
        height:320px
    }

    .chatbot{
        right:15px;

        width:calc(100% - 30px)
    }

}


/* =====================================================
   RESPONSIVE HP
===================================================== */

@media(max-width:600px){

    .stats-grid,
    .card-grid,
    .gallery-grid,
    .profile-grid,
    .category-items-grid,
    .detail-gallery-grid{
        grid-template-columns:1fr
    }

    .section{
        padding:60px 0
    }

    .hero h1{
        font-size:50px
    }

    .hero-actions{
        flex-direction:column;
        align-items:flex-start
    }

    .page-hero.small{
        padding:60px 0
    }

    .page-hero h1{
        font-size:42px
    }

    .section-head{
        display:block
    }

    .filter-bar{
        flex-direction:column
    }

    .footer-inner{
        display:block
    }

    .full-map{
        height:450px
    }

    .selected-map-info{
        padding:18px
    }

    .selected-map-info h2{
        font-size:26px
    }

    .category-group-head{
        flex-direction:column;
        align-items:flex-start
    }

    .category-group-head h2{
        font-size:31px
    }

    .detail-cultural-photo{
        height:370px
    }

    .detail-cultural-title{
        font-size:37px
    }

    .detail-cultural-item{
        padding:18px;
        gap:13px
    }

    .detail-cultural-number,
    .detail-cultural-icon{
        width:37px;
        min-width:37px;
        height:37px
    }

    .detail-cultural-text p{
        font-size:13px
    }

    .detail-cultural-actions{
        flex-direction:column
    }

    .detail-cultural-actions .btn,
    .detail-cultural-actions .btn-outline-dark{
        width:100%;
        text-align:center
    }

    .profile-heading h2{
        font-size:35px
    }

    .profile-photo{
        height:320px
    }

    .profile-content{
        padding:22px
    }

}

/* =========================================================
   HERO SECTION - DIGITAL CULTURAL HERITAGE BANGKALAN
   ========================================================= */

.hero{
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at 82% 22%, rgba(22, 92, 73, 0.48) 0%, rgba(6, 45, 34, 0.98) 60%, #05261d 100%), #05261d;
    color:#fff;
    padding:85px 0 95px;
    border-bottom:1px solid rgba(255, 255, 255, 0.08);
}

/* Pola ambient gold halus pada latar belakang */
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 8% 18%, rgba(225, 189, 96, 0.09) 0%, transparent 40%),
        radial-gradient(circle at 92% 82%, rgba(225, 189, 96, 0.06) 0%, transparent 35%);
}

.hero-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:48px;
    align-items:center;
    position:relative;
    z-index:2;
}

.hero-container{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    min-height:500px;
}

.hero-text-side{
    max-width:620px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 14px;
    background:rgba(225, 189, 96, 0.12);
    border:1px solid rgba(225, 189, 96, 0.35);
    border-radius:99px;
    color:#e5c36d;
    font-size:11px;
    letter-spacing:.14em;
    font-weight:700;
    margin-bottom:20px;
}

.badge-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#e5c36d;
    box-shadow:0 0 8px #e5c36d;
}

.hero h1{
    font-family:"Playfair Display",serif;
    font-size:clamp(44px, 5.2vw, 72px);
    line-height:1.08;
    margin:0 0 20px 0;
    color:#ffffff;
}

.hero h1 em{
    color:#e5c36d;
    font-style:normal;
}

.hero-desc{
    color:#dbe4dd;
    font-size:16.5px;
    line-height:1.7;
    margin:0 0 32px 0;
}

.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:34px;
}

.hero .btn-primary{
    background:linear-gradient(135deg, #e5c36d, #cfa54b);
    color:#0c2b21;
    font-weight:700;
    padding:13px 26px;
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0, 0, 0, 0.24);
    transition:.25s ease;
}

.hero .btn-primary:hover{
    background:linear-gradient(135deg, #ecd189, #dcb35c);
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(0, 0, 0, 0.3);
}

.hero .btn-light{
    border:1px solid rgba(255, 255, 255, 0.32);
    background:rgba(255, 255, 255, 0.08);
    color:#fff;
    font-weight:600;
    padding:13px 26px;
    border-radius:10px;
    backdrop-filter:blur(8px);
    transition:.25s ease;
}

.hero .btn-light:hover{
    background:rgba(255, 255, 255, 0.18);
    border-color:rgba(255, 255, 255, 0.55);
    transform:translateY(-2px);
}

.hero-highlights{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    padding-top:22px;
    border-top:1px solid rgba(255, 255, 255, 0.1);
}

.highlight-item{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    color:#c7d4cc;
}

/* =========================================================
   HERO BACKGROUND PHOTO COLLAGE (SURAMADU, TOPENG, BATIK)
   Kolase foto atmosferik sebagai latar belakang hero banner
   ========================================================= */

.hero-bg-collage{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:62%;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 12%, black 38%);
    mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 12%, black 38%);
}

.hero-collage-grid{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1.15fr 0.85fr;
    gap:4px;
    background:rgba(5, 38, 29, 0.7);
}

.hero-collage-item{
    position:relative;
    overflow:hidden;
}

.collage-suramadu{
    grid-column:1 / 3;
    grid-row:1 / 2;
}

.collage-topeng{
    grid-column:1 / 2;
    grid-row:2 / 3;
}

.collage-batik{
    grid-column:2 / 3;
    grid-row:2 / 3;
}

.hero-collage-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:brightness(0.92) contrast(1.06) saturate(1.08);
}

.collage-suramadu img{
    object-position:center 45%;
}

.collage-topeng img{
    object-position:center 28%;
}

.collage-batik img{
    object-position:center center;
}

.hero-bg-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        linear-gradient(90deg, #05261d 0%, rgba(5, 38, 29, 0.94) 36%, rgba(5, 38, 29, 0.68) 64%, rgba(5, 38, 29, 0.42) 100%),
        linear-gradient(180deg, rgba(5, 38, 29, 0.7) 0%, transparent 22%, transparent 78%, #05261d 100%);
}

/* =========================================================
   HERO RESPONSIVE - TABLET & HP
   ========================================================= */

@media (max-width: 960px){
    .hero{
        padding:55px 0 70px;
    }

    .hero-container{
        min-height:auto;
        justify-content:center;
    }

    .hero-bg-collage{
        width:100%;
        -webkit-mask-image:none;
        mask-image:none;
        opacity:0.38;
    }

    .hero-bg-overlay{
        background:linear-gradient(180deg, 
            rgba(5, 38, 29, 0.85) 0%, 
            rgba(5, 38, 29, 0.92) 50%, 
            #05261d 100%);
    }

    .hero-text-side{
        max-width:100%;
        text-align:center;
    }

    .hero-badge{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-desc{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-highlights{
        justify-content:center;
    }
}

@media (max-width: 580px){
    .hero{
        padding:42px 0 60px;
    }

    .hero h1{
        font-size:38px;
    }

    .hero-desc{
        font-size:15px;
    }

    .hero-actions{
        flex-direction:column;
        width:100%;
    }

    .hero-actions .btn{
        width:100%;
        text-align:center;
        justify-content:center;
    }
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.logo-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.4;
}

.brand-text strong {
    display: block;
    font-size: 15px;
    white-space: nowrap;
}

.brand-text small {
    display: block;
    font-size: 10px;
}