@import url('https://fonts.googleapis.com/css2?family=Karma:wght@300;400;500;600;700&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');


* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    scroll-margin-top: 5rem;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(rgba(0, 39, 193, 0.19)) transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    background: var(--third-color); 
    font-family: 'Karma', serif;
}

/* Base typography for general text */
body, p, li, a, span, small, label, input, textarea, button, figcaption {
    font-family: 'Karma', serif;
}

/* Preserve display fonts for primary elements */
h1, h2, h3, h4, h5, h6,
.profil-title,
.data-desa-title,
.visi-title,
.misi-title,
.peta-title,
.struktur-title,
.profil-nav a,
.nav-atas .main-nav .menu-list a,
.nav-links a,
.nav-atas .logo-text .desa,
.nav-atas .logo-text .kabupaten {
    font-family: 'Playfair Display SC', serif;
}
:root {
    --fontXXL: 4rem;
    --fontXL: 2.3rem;
    --fontL: 2rem;
    --fontB: 1.5rem;
    --fontMM: 1.2rem;
    --fontM: 1rem;
    --fontS: 0.85rem;
    --primary-color: #133E87;
    --secondary-color: #608BC1;
    --third-color: #CBDCEB;
    --light-color: #F3F3E0;
    --white-color: #FFFFFF;
    --primary-transparent: #133e8782;
}


.profil-header {
    position: relative;
    width: 100%;
    margin-bottom: 0; 
}

.header-bg {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: var(--primary-color);
}

.header-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.profil-title {
    position: relative;
    z-index: 2;
    color: var(--light-color);
    font-size: var(--fontXXL);
    font-weight: bold;
    text-align: center;
    top: 180px; 
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
    font-family: 'Playfair Display SC', serif;
    display: block;      
    width: 100%;         
    animation: floaty 4s ease-in-out infinite, glowPop 3s ease-in-out infinite;
    will-change: transform, text-shadow, letter-spacing;
}
        /* Floaty title effect */

        @keyframes floaty {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-6px); }
        }
        @keyframes glowPop {
          0%, 100% {
            text-shadow:
              0 2px 0 rgba(0,0,0,0.18),
              0 12px 22px rgba(19,62,135,0.35),
              0 0 0 rgba(255,255,255,0);
            letter-spacing: 0.5px;
          }
          50% {
            text-shadow:
              0 4px 0 rgba(0,0,0,0.25),
              0 22px 40px rgba(96,139,193,0.55),
              0 0 14px rgba(255,255,255,0.15);
            letter-spacing: 1px;
          }
        }
        /* Respect users who prefer reduced motion */
        @media (prefers-reduced-motion: reduce) {
          .profil-title {
            animation: none;
            text-shadow: none;
          }
        }

.profil-nav {
    position: absolute;
    left: 50%;
    bottom: 0; 
    transform: translateX(-50%);
    z-index: 1000;
    background: linear-gradient(135deg, rgba(19,62,135,0.92) 0%, rgba(96,139,193,0.88) 100%);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50px;
    max-width: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    transition: top 0.6s ease, transform 0.6s ease, bottom 0.6s ease, box-shadow .25s ease, background .25s ease, filter .25s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden; 
}
.profil-nav::before {
    content: "";
    position: absolute;
    top: -60%; left: -30%;
    width: 160%; height: 220%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%);
    pointer-events: none;
}

.profil-nav.floating {
    position: fixed; 
    top: 12px !important;
    left: 50%;
    bottom: auto; 
    transform: translateX(-50%);
    width: min(1500px, 98vw);
    max-width: none;
}
body.profil-nav-floating .profil-main {
    padding-top: 0; 
}

.profil-nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 5px 28px;
    gap: 28px;
}

.profil-nav li { margin: 0; }

.profil-nav a {
    display: block;
   color: var(--white-color);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fontMM);
    transition: color .2s ease, opacity .2s ease, transform .2s ease;
    opacity: .95;
    white-space: nowrap; 
    padding: 8px 16px;
    border-radius: 20px;
}
.profil-nav a:hover { transform: translateY(-1px); }

.profil-nav a:hover {
     color: var(--white-color);
    transform: translateY(-2px);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

.profil-nav ul li a.active {
    color: var(--white-color);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Main Navigation */
.nav-atas {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    z-index: 10; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px 0 30px;
    background: transparent; 
}

.nav-atas .logo {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: 48px;
    position: relative;

}

/* Add divider after logo in nav-atas */
.nav-atas .logo::after {
    content: '';
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 70%;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 10%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(255, 255, 255, 0.3) 90%, 
        transparent 100%
    );
    opacity: 0.7;
}

.nav-atas .logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.nav-atas .logo-text .desa {
    font-family: 'Playfair Display SC', serif;
    font-size: var(--fontMM);
    color: #fff;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    letter-spacing: 1px;
}

.nav-atas .logo-text .kabupaten {
    font-family: 'Playfair Display SC', serif;
    font-size: var(--fontS);
    color: #fff;
    font-weight: 400;
    margin: 0;
    line-height: 1.1;
    letter-spacing: 0.5px;
}

 .main-nav {
    margin-left: auto;
    margin-right: 0;
 }

.nav-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 56px;
    gap: 32px;
    text-decoration: none;
}

.nav-links li {
    margin: 0;
    position: relative;
}
.has-submenu a {
    text-decoration: none;
    color: var(--white-color);
    font-size: 1.5rem;
}

/* Vertical dividers between menu items */
.nav-links li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255, 255, 255, 0.4) 10%, 
        rgba(255, 255, 255, 0.7) 50%, 
        rgba(255, 255, 255, 0.4) 90%, 
        transparent 100%
    );
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Enhanced divider on hover */
.nav-links li:not(:last-child):hover::after {
    opacity: 1;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(203, 220, 235, 0.6) 10%, 
        rgba(203, 220, 235, 0.9) 50%, 
        rgba(203, 220, 235, 0.6) 90%, 
        transparent 100%
    );
}

/* ===== NAV-WRAPPER VERTICAL DIVIDERS (Layanan.html & Informasi.html) ===== */
.nav-wrapper nav .main-nav .nav-links {
    gap: 32px;
}

.nav-wrapper nav .main-nav .nav-links li {
    position: relative;
}

/* Vertical dividers for nav-wrapper */
.nav-wrapper nav .main-nav .nav-links li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255, 255, 255, 0.4) 10%, 
        rgba(255, 255, 255, 0.7) 50%, 
        rgba(255, 255, 255, 0.4) 90%, 
        transparent 100%
    );
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.nav-wrapper nav .main-nav .nav-links li:not(:last-child):hover::after {
    opacity: 1;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(203, 220, 235, 0.6) 10%, 
        rgba(203, 220, 235, 0.9) 50%, 
        rgba(203, 220, 235, 0.6) 90%, 
        transparent 100%
    );
}

/* ===== PROFIL-NAV LAYOUT (Profil.html) — wrapped into 2 rows ===== */
.profil-nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 5px 28px;
    gap: 8px 32px; /* row-gap column-gap */
    flex-wrap: wrap; /* allow 2-row layout to avoid overlap */
}

.profil-nav ul li {
    position: relative;
    display: flex;
    justify-content: center;
    flex: 1 1 calc(25% - 32px); /* 4 items per row (8 total -> 2 rows) */
    min-width: 160px; /* prevents items from getting too small */
}

/* Vertical dividers disabled when wrapping into multiple rows */
.profil-nav ul li:not(:last-child)::after {
    display: none;
}

.profil-nav ul li:not(:last-child):hover::after {
    opacity: 1;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(203, 220, 235, 0.6) 10%, 
        rgba(203, 220, 235, 0.9) 50%, 
        rgba(203, 220, 235, 0.6) 90%, 
        transparent 100%
    );
}

/* ===== RESPONSIVE ADJUSTMENTS FOR ALL NAVBAR DIVIDERS ===== */


.nav-atas .main-nav a:hover {
    color: #CBDCEB;
}

/* Hamburger menu - hidden by default on desktop */
.hamburger {
    display: none;
}

.menu-list {
    padding: 10px 18px;
    gap: 10px;
    /* Base gradient background */
    background: linear-gradient(135deg, rgba(19,62,135,0.72) 0%, rgba(96,139,193,0.72) 100%);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden; 
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.nav-atas .main-nav .menu-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Left side dramatic glow */
        radial-gradient(ellipse 60px 100% at 0% 50%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.08) 35%, transparent 60%),
        /* Right side dramatic glow */
        radial-gradient(ellipse 60px 100% at 100% 50%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.08) 35%, transparent 60%);
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    pointer-events: none;
    z-index: 1;
}
.nav-atas .main-nav .menu-list a {
    color: var(--white-color);
    font-weight: 600;
    font-size: var(--fontMM);
    padding: 10px 14px;
    border-radius: 14px;
    line-height: 1;
    transition: color .25s ease, transform .25s ease, text-shadow .25s ease, background-color .25s ease, box-shadow .25s ease;
    white-space: nowrap;
    position: relative;
    z-index: 10;
}
.nav-atas .main-nav .menu-list a:hover {
    color: var(--white-color);
    background: rgba(255,255,255,0.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
    transform: translateY(-1px);
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.nav-atas .main-nav .menu-list a.active {
    color: var(--white-color);
    background: rgba(255,255,255,0.20);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}
.nav-atas .main-nav .menu-list a:focus-visible {
    outline: 2px solid rgba(255,255,255,0.8);
    outline-offset: 2px;
    border-radius: 16px;
}
/* reduce motion respect */
@media (prefers-reduced-motion: reduce) {
    .nav-atas .main-nav .menu-list a { transition: none; }
}

/* Menu icons + active highlight — Creative side glow effects */
.nav-atas .main-nav .menu-list {
    /* Base gradient background */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border: 1px solid rgba(255,255,255,0.32); 
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 
                0 10px 28px rgba(0,0,0,0.22),         
                0 2px 6px rgba(0,0,0,0.12);          
    gap: 20px;
    padding: 8px 14px;
    position: relative;
    overflow: visible;
    /* Enhanced multi-layer box-shadow for smooth side effects */
    box-shadow: 
        /* Main shadows */
        0 8px 24px rgba(0,0,0,0.18),
        /* Left side glow enhancement */
        inset 12px 0 18px -8px rgba(255, 255, 255, 0.16),
        inset 20px 0 30px -12px rgba(255, 255, 255, 0.06),
        /* Right side glow enhancement */
        inset -12px 0 18px -8px rgba(255, 255, 255, 0.16),
        inset -20px 0 30px -12px rgba(255, 255, 255, 0.06),
        /* Top/bottom subtle enhancement */
        inset 0 6px 12px -6px rgba(255, 255, 255, 0.08),
        inset 0 -6px 12px -6px rgba(255, 255, 255, 0.08);
}

/* Advanced Interactive Side Glow for Nav-Atas Menu */
.nav-atas .main-nav .menu-list::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: 
        /* Extended smooth side coverage */
        radial-gradient(ellipse 90px 105% at 0% 50%, 
            rgba(255,255,255,0.26) 0%, 
            rgba(255,255,255,0.16) 20%, 
            rgba(255,255,255,0.08) 40%, 
            rgba(255,255,255,0.04) 65%, 
            transparent 85%),
        radial-gradient(ellipse 90px 105% at 100% 50%, 
            rgba(255,255,255,0.26) 0%, 
            rgba(255,255,255,0.16) 20%, 
            rgba(255,255,255,0.08) 40%, 
            rgba(255,255,255,0.04) 65%, 
            transparent 85%),
        /* Ambient base glow */
        radial-gradient(ellipse 130px 100% at 50% 50%, 
            transparent 50%, 
            rgba(255,255,255,0.03) 75%, 
            rgba(255,255,255,0.05) 90%, 
            transparent 100%);
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    pointer-events: none;
    z-index: 1;
    animation: navAtasBreathing 4.5s ease-in-out infinite;
    opacity: 0.85;
}

/* Enhanced Interactive Edge System for Nav-Atas */
.nav-atas .main-nav .menu-list::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Progressive edge enhancement */
        linear-gradient(90deg, 
            rgba(255,255,255,0.28) 0%, 
            rgba(255,255,255,0.16) 3%, 
            rgba(255,255,255,0.08) 8%, 
            rgba(255,255,255,0.04) 18%, 
            transparent 35%),
        linear-gradient(270deg, 
            rgba(255,255,255,0.28) 0%, 
            rgba(255,255,255,0.16) 3%, 
            rgba(255,255,255,0.08) 8%, 
            rgba(255,255,255,0.04) 18%, 
            transparent 35%),
        /* Corner accent for rounded design */
        radial-gradient(circle at 0% 0%, rgba(255,255,255,0.10) 0%, transparent 35%),
        radial-gradient(circle at 0% 100%, rgba(255,255,255,0.10) 0%, transparent 35%),
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.08) 0%, transparent 25%),
        radial-gradient(circle at 100% 100%, rgba(255,255,255,0.08) 0%, transparent 25%);
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    pointer-events: none;
    z-index: 2;
    animation: navAtasShimmer 5s ease-in-out infinite;
}

/* Interactive hover effects for nav-atas */
.nav-atas .main-nav .menu-list:hover::before {
    animation-duration: 2.5s;
    opacity: 1.0;
    transform: scale(1.01);
}

.nav-atas .main-nav .menu-list:hover::after {
    animation-duration: 2.5s;
    opacity: 1.2;
}

/* Nav-Atas specific animations */
@keyframes navAtasBreathing {
    0%, 100% { 
        opacity: 0.85; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1.0; 
        transform: scale(1.008); 
    }
}

@keyframes navAtasShimmer {
    0%, 100% { 
        opacity: 0.7; 
        filter: brightness(1) saturate(1); 
    }
    33% { 
        opacity: 0.85; 
        filter: brightness(1.08) saturate(1.1); 
    }
    66% { 
        opacity: 0.95; 
        filter: brightness(1.12) saturate(1.15); 
    }
}

/* Additional Advanced Customization Variables for Nav-Atas */
.nav-atas {
    --nav-atas-glow-intensity: 0.9;
    --nav-atas-animation-speed: 1.1;
    --nav-atas-hover-scale: 1.01;
}



/* Performance optimizations for nav-atas */
@supports (transform: translate3d(0,0,0)) {
    .nav-atas .main-nav .menu-list::before,
    .nav-atas .main-nav .menu-list::after {
        transform: translate3d(0,0,0);
        will-change: transform, opacity, filter;
    }
}

/* Ensure general menu items also have proper z-index */
.menu-list a {
    position: relative;
    z-index: 10;
}
.nav-atas .main-nav .menu-list a::before {
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    background-color: currentColor; 
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
/* Icons per item: home, map pin, info, bell, user */
.nav-atas .main-nav .menu-list li:nth-child(1) a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 3 3 11h3v9h6v-6h3v6h6v-9h3L12 3z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 3 3 11h3v9h6v-6h3v6h6v-9h3L12 3z'/></svg>");
}
.nav-atas .main-nav .menu-list li:nth-child(2) a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 2a6 6 0 0 0-6 6c0 4.5 6 12 6 12s6-7.5 6-12a6 6 0 0 0-6-6zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 2a6 6 0 0 0-6 6c0 4.5 6 12 6 12s6-7.5 6-12a6 6 0 0 0-6-6zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/></svg>");
}
.nav-atas .main-nav .menu-list li:nth-child(3) a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 7h2v8h-2zm0-3h2v2h-2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 7h2v8h-2zm0-3h2v2h-2z'/></svg>");
}
.nav-atas .main-nav .menu-list li:nth-child(4) a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M11 4h2v2h-2zM7 12a5 5 0 0 1 10 0h3a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2h3zm-4 6h18v2H3z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M11 4h2v2h-2zM7 12a5 5 0 0 1 10 0h3a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2h3zm-4 6h18v2H3z'/></svg>");
}
.nav-atas .main-nav .menu-list li:nth-child(5) a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-9 3-9 7h18c0-4-4-7-9-7z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-9 3-9 7h18c0-4-4-7-9-7z'/></svg>");
}
/* Active: theme (no green) */
.nav-atas .main-nav .menu-list li.active a,
.nav-atas .main-nav .menu-list a.active {
    background: rgba(255,255,255,0.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.32);
    color: var(--white-color);
}

.nav-atas .main-nav .menu-list li {
    position: relative; 
}

.nav-atas .main-nav .menu-list li + li::before {
    content: "";
    position: absolute;
    left: -10px; 
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.72), rgba(255,255,255,0.36));
    opacity: 0.95;
    pointer-events: none;
}

/* faint shadow edge for depth on gradient background */
.nav-atas .main-nav .menu-list li + li::after {
    content: "";
    position: absolute;
    left: -9px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(0,0,0,0.08);
    pointer-events: none;
}

.nav-atas .logo img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 0;
    border: 2px solid #CBDCEB;
    /* move shadow and border to the image only */
}

.data-desa-section {
    position: relative;
    background: radial-gradient(1200px circle at 10% -10%, rgba(255,255,255,0.12), transparent 60%),
                linear-gradient(135deg, #0f2f66 0%, var(--primary-color) 35%, var(--secondary-color) 75%, #9cc0de 100%);
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    min-height: 400px;
    padding: 0 0 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
    margin-top: -80px; /* pull up to remove gap between profil-nav and data-desa-section */
    overflow: hidden; /* for shine overlay */
}

/* soft blend into next section */
.data-desa-section::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 260px; 
    background: linear-gradient(to bottom,
        rgba(29,63,122,0) 0%,         
        rgba(29,63,122,0.12) 35%,    
        rgba(29,63,122,0.28) 65%,   
        rgba(29,63,122,0.58) 100%    
    );
    pointer-events: none;
}
.data-desa-section::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 200%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.14) 50%, transparent 100%);
    transform: skewX(-15deg) translateX(-50%);
    animation: shine-slide 10s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes shine-slide {
    0%   { transform: skewX(-15deg) translateX(-60%); }
    100% { transform: skewX(-15deg) translateX(60%); }
}

.data-desa-title {
    text-align: center;
    font-size: var(--fontXL);
    font-family: 'Playfair Display SC', serif;
    font-weight: 600;
    color: #fff;
    margin-top: 60px;
    margin-bottom: 40px;
    letter-spacing: 2px;
    text-shadow: 0 3px 16px rgba(0,0,0,0.25);
}
.data-desa-title::after {
    content: "";
    display: block;
    width: 140px;
    height: 4px;
    border-radius: 4px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(203,220,235,1) 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.vmm-reveal { 
    opacity: 0;
    transform: translateY(20px) scale(.98) rotateX(6deg);
    transform-origin: top center;
    transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
    will-change: transform, opacity;
}
.vmm-reveal.show {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
}
/* slight stagger for the list items */
.misi-list.vmm-reveal li { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .5s ease; }
.misi-list.vmm-reveal.show li { opacity: 1; transform: translateX(0); }
.misi-list.vmm-reveal.show li:nth-child(1) { transition-delay: .05s; }
.misi-list.vmm-reveal.show li:nth-child(2) { transition-delay: .10s; }
.misi-list.vmm-reveal.show li:nth-child(3) { transition-delay: .15s; }
.misi-list.vmm-reveal.show li:nth-child(4) { transition-delay: .20s; }
.misi-list.vmm-reveal.show li:nth-child(5) { transition-delay: .25s; }

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .reveal, .vmm-reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
    .data-desa-section::after, .sejarah-section::after, .visi-misi-section::after { animation: none !important; }
}

.data-desa-grid {
    display: flex;
    gap: 60px;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
}

.data-desa-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
}

/* Reveal animation utility */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.reveal.show {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger per box */
.data-desa-col .data-desa-box.reveal:nth-child(1) { transition-delay: .05s; }
.data-desa-col .data-desa-box.reveal:nth-child(2) { transition-delay: .10s; }
.data-desa-col .data-desa-box.reveal:nth-child(3) { transition-delay: .15s; }
.data-desa-col .data-desa-box.reveal:nth-child(4) { transition-delay: .20s; }
.data-desa-col .data-desa-box.reveal:nth-child(5) { transition-delay: .25s; }
.data-desa-title.reveal { transition-delay: .05s; }

.data-desa-box {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(214,227,243,0.95) 100%);
    border-radius: 10px;
    min-height: 56px;
    margin-bottom: 0;
    padding: 10px 16px;
    font-size: 1.2rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Karma', serif;
    font-weight: 500;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.6);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; /* for sheen */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.data-desa-box:hover,
.data-desa-box:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.18), 0 0 0 1px rgba(19,62,135,0.08) inset;
}
.data-desa-box::before {
    content: "";
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
    transform: skewX(-20deg) translateX(-120%);
    transition: transform .6s ease;
    pointer-events: none;
}
.data-desa-box:hover::before,
.data-desa-box:focus-within::before {
    transform: skewX(-20deg) translateX(420%);
}
.data-desa-box strong,
.data-desa-box p,
.data-desa-box li { color: var(--primary-color); }
.data-desa-box ul { padding-left: 1.2rem; }

.awards-title{
    text-align: center !important;
    font-size: var(--fontXL);
    font-family: 'Playfair Display SC', serif !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-top: 60px !important;
    margin-bottom: 40px !important;
    letter-spacing: 2px !important;
    text-shadow: 0 3px 16px rgba(0,0,0,0.25) !important;
}
/* Sejarah Section */
.sejarah-section {
    position: relative;
    background: radial-gradient(1200px circle at 90% -20%, rgba(255,255,255,0.12), transparent 60%),
                linear-gradient(to bottom, var(--primary-color) 30%, rgba(29,63,122,0.5) 50%, #254a8a 80%, rgb(101, 131, 184) 100%);   
    color: #fff;
    border-radius: 0;
    margin-top: 0;
    padding: 60px 0 60px 0;
    width: 100%;
    overflow: hidden; /* for gloss */
}
/* soft blend from previous section */
.sejarah-section::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 260px; /* taller for smoother fade */
    pointer-events: none;
}
.sejarah-section::after {
    content: "";
    position: absolute;
    top: -60%; left: -30%;
    width: 160%; height: 220%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%);
    transform: skewX(-12deg) translateX(-60%);
    animation: shine-slide 12s linear infinite;
    pointer-events: none;
}

.sejarah-header h2 {
    text-align: center;
    font-size: var(--fontXL);
    font-family: 'Playfair Display SC', serif;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 50px;
    margin-top: 40px;
    color: #fff;
    text-shadow: 0 3px 16px rgba(0,0,0,0.25);
}
.sejarah-header h2::after {
    content: "";
    display: block;
    width: 140px;
    height: 4px;
    border-radius: 4px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(203,220,235,1) 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}

.timeline:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    z-index: 0;
}

.timeline-row {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    position: relative;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}

.timeline-row.left {
    justify-content: flex-start;
}

.timeline-row.right {
    justify-content: flex-end;
}

.timeline-content {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
    color: #fff;
    padding: 16px 24px;
    max-width: 420px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2;
    font-family: 'Karma', serif;
    font-size: 1.05rem;
    overflow: hidden; /* for sheen */
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.timeline-content::before {
    content: "";
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
    transform: skewX(-20deg) translateX(-120%);
    transition: transform .6s ease;
    pointer-events: none;
}
.timeline-row:hover .timeline-content,
.timeline-row.active .timeline-content {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.26);
}
.timeline-row:hover .timeline-content::before,
.timeline-row.active .timeline-content::before {
    transform: skewX(-20deg) translateX(420%);
}
.c-right{
  margin-right: -1rem !important;
}
.c-left{
  margin-left: -1rem !important;
}

.timeline-year {
    font-family: 'Playfair Display SC', serif;
    font-weight: 700;
    font-size: 1.15rem;
    display: inline-block;
    margin-bottom: 10px;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.timeline-row.left .timeline-content,
.timeline-row.right .timeline-content {
    text-align: left;
}

.timeline-row:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    border: 4px solid #254a8a;
    z-index: 1;
    transition: all 0.3s ease;
}

/* Make point ball tappable on touch devices */
.timeline-row {
    -webkit-tap-highlight-color: transparent;
}

.timeline-row.show {
    opacity: 1;
    transform: translateY(0);
}

.timeline-row.active .timeline-content {
    background: rgba(255,255,255,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    border-radius: 8px;
    transition: background 0.3s, box-shadow 0.3s;
}

.timeline-row.active:after {
    background: #7296cb;
    border-color: #7296cb;
    transform: translateX(-50%) scale(1.1);
}

/* Internal organization for timeline content paragraphs */
.timeline-content .timeline-year{
    display: block;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.28);
}
.timeline-content p {
    margin: 0; /* reset outer margins so borders align neatly */
    padding: 10px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 10px;
    line-height: 1.55;
}
.timeline-content p + p { margin-top: 10px; }



/* VISI & MISI Section */
.visi-misi-section {
    position: relative;
    background: radial-gradient(1100px circle at 85% -20%, rgba(255,255,255,0.18), transparent 60%),
                linear-gradient(to bottom,  rgb(101, 131, 184) 10%, var(--third-color) 80%);
    color: #254a8a;
    width: 100%;
    padding: 60px 0 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden; /* for gloss */
}
/* soft blend from Sejarah into Visi Misi */
.visi-misi-section::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 240px; /* smooth transition band */
    pointer-events: none;
}
/* subtle gloss sweep */
.visi-misi-section::after {
    content: "";
    position: absolute;
    top: -60%; left: -30%;
    width: 160%; height: 220%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%);
    transform: skewX(-12deg) translateX(-60%);
    animation: shine-slide 12s linear infinite;
    pointer-events: none;
}

.visi-title {
    text-align: center;
    font-size: var(--fontXL);
    font-family: 'Playfair Display SC', serif;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--white-color);
    letter-spacing: 1px;
    text-shadow: 0 3px 16px rgba(0,0,0,0.25);
}
.visi-title::after {
    content: "";
    display: block;
    width: 140px;
    height: 4px;
    border-radius: 4px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(203,220,235,1) 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.misi-title {
    text-align: center;
    font-size: var(--fontXL);
    font-family: 'Playfair Display SC', serif;
    font-weight: 800;
    margin: 26px 0 18px;
    color: var(--white-color);
    letter-spacing: 1px;
     text-shadow: 0 3px 16px rgba(0,0,0,0.25);
}
.misi-title::after {
    content: "";
    display: block;
    width: 120px;
    height: 3px;
    border-radius: 4px;
    margin: 12px auto 0;
    background: linear-gradient(90deg, rgba(37,74,138,1) 0%, rgba(156,198,230,1) 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.visi-desc {
    position: relative;
    text-align: center;
    font-size: var(--fontM);
    font-family: 'Karma', serif;
    margin: 8px auto 26px;
    color: #254a8a;
    max-width: 880px;
    line-height: 1.6;
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow: hidden;
}
.visi-desc::before {
    content: "";
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    transform: skewX(-20deg) translateX(-120%);
    transition: transform .7s ease;
    pointer-events: none;
    font-size: var(--fontM);
}
.visi-desc:hover::before { transform: skewX(-20deg) translateX(420%); }

.misi-list {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    font-family: 'Karma', serif;
    font-size: var(--fontM);
    color: #254a8a;
    padding: 16px 20px 16px 32px;
    background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow: hidden;
}
.misi-list::before {
    content: "";
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    transform: skewX(-20deg) translateX(-120%);
    transition: transform .7s ease;
    pointer-events: none;
}
.misi-list:hover::before { transform: skewX(-20deg) translateX(420%); }

.misi-list li {
    margin-bottom: 12px;
    line-height: 1.7;
    font-family: 'Karma', serif;
    font-size: var(--fontM);
}


/* Struktur Organisasi Section */
/* reveal animations for Struktur */
.str-reveal { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); will-change: opacity, transform; }
.str-reveal.show { opacity: 1; transform: translateY(0) scale(1); }

.str-reveal-stagger > * { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.str-reveal-stagger.show > * { opacity: 1; transform: translateY(0); }
.str-reveal-stagger.show > *:nth-child(1) { transition-delay: .05s; }
.str-reveal-stagger.show > *:nth-child(2) { transition-delay: .10s; }
.str-reveal-stagger.show > *:nth-child(3) { transition-delay: .15s; }
.str-reveal-stagger.show > *:nth-child(4) { transition-delay: .20s; }
.str-reveal-stagger.show > *:nth-child(5) { transition-delay: .25s; }

.struktur-section {
    position: relative;
    background: radial-gradient(1100px circle at 85% -20%, rgba(255,255,255,0.18), transparent 60%),
                linear-gradient(to bottom, var(--third-color) 0%, rgb(101, 131, 184) 80%);
    width: 100%;
    padding: 48px 0 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden; /* for reveal gloss */
}
/* soft split lines gloss */
.struktur-section::before,
.struktur-section::after {
    content: "";
    position: absolute;
    left: -10%; right: -10%;
    height: 120px;
    pointer-events: none;
}
.struktur-section::before { top: -1px; }
.struktur-section::after { bottom: -1px; }

.struktur-title {
    position: relative;
    text-align: center;
    font-size: 2.2rem;
    font-family: 'Playfair Display SC', serif;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 28px;
    letter-spacing: 2px;
    text-shadow: 0 3px 16px rgba(0,0,0,0.25);
}
.struktur-title::after {
    content: "";
    display: block;
    width: 140px;
    height: 4px;
    border-radius: 4px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, rgba(37,74,138,1) 0%, rgba(156,198,230,1) 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

.struktur-menu {
    position: relative;
    display: flex;
    gap: 18px;
    justify-content: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(114,150,203,0.18) 0%, rgba(255,255,255,0.50) 100%);
    border: 1px solid rgba(114,150,203,0.30);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden; /* for gloss */
}
.struktur-menu::before {
    content: "";
    position: absolute;
    top: -60%; left: -30%;
    width: 160%; height: 220%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
    transform: skewX(-12deg) translateX(-60%);
    animation: shine-slide 14s linear infinite;
    pointer-events: none;
}

.struktur-tab {
    position: relative;
    background: linear-gradient(135deg, #5f88c4 0%, #7296cb 40%, #9cc0de 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 1.05rem;
    font-family: 'Playfair Display SC', serif;
    font-weight: 600;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    overflow: hidden; /* for gloss */
}
.struktur-tab::before {
    content: "";
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
    transform: skewX(-20deg) translateX(-120%);
    transition: transform .5s ease;
    pointer-events: none;
}
.struktur-tab:hover::before,
.struktur-tab.active::before { transform: skewX(-20deg) translateX(420%); }

.struktur-tab:hover,
.struktur-tab.active {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
    filter: brightness(1.05);
}

.struktur-content {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(234,244,251,0.98) 100%);
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.06);
    padding: 36px 28px;
    min-height: 240px;
    overflow: hidden; /* for sheen */
}
.struktur-content::before {
    content: "";
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
    transform: skewX(-20deg) translateX(-120%);
    transition: transform .8s ease;
    pointer-events: none;
}
.struktur-content:hover::before { transform: skewX(-20deg) translateX(420%); }

.struktur-org-title {
    font-size: 1.3rem;
    font-family: 'Playfair Display SC', serif;
    font-weight: 700;
    color: var(--white-color);
    margin-bottom: 16px;
    text-align: center;
}

.struktur-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Karma', serif;
    font-size: 1.05rem;
    color: #254a8a;
}

.struktur-list li {
    margin-bottom: 12px;
    padding: 10px 12px;
    margin-left: 0;
    border-bottom: 1px solid #eaf4fb;
    border-radius: 10px;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.struktur-list li:hover {
    background: rgba(114,150,203,0.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.struktur-list-img .struktur-img {
    width: 90px;
    height: 100px;
    object-fit: cover;
    margin-right: 16px;
    vertical-align: middle;
    border: 2px solid #7296cb;
    background: #fff;
}
.struktur-list-img li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.struktur-menu-karang-taruna {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
    padding: 8px 0;
}

.struktur-tab-d {
    background: var(--secondary-color);
    color: var(--white-color);
    border: none;
    border-radius: 28px;
    padding: 12px 24px;
    font-size: 1rem;
    font-family: 'Playfair Display SC', serif;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    outline-offset: 4px;
}

.struktur-tab-d:hover,
.struktur-tab-d:focus {
    background: var(--primary-color);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    transform: scale(1.05);
    outline: none;
}

.struktur-tab-d:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}

.struktur-org-img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    cursor: pointer;
}

.struktur-org-img {
    max-width: 100%;
    width: 480px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    background: #fff;
}

/* Wave Container */
.cta-waves {
    position: relative;
    left: 0;
    width: 100%;
    height: 120px;
    overflow: hidden;
    line-height: 0;
    opacity: 1;
    transition: opacity 0.8s ease-out;
    transform: translateZ(0);
    will-change: opacity;
    z-index: 5;
}

.cta-waves.hide {
    opacity: 0;
}

/* Individual Wave Layers */
.cta-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(0); /* Hardware acceleration */
    will-change: transform;
}

.cta-wave svg {
    position: relative;
    display: block;
    width: 200%; /* exact 2x for seamless -50% loop */
    height: 120px; /* Match container height */
    border: none;
    outline: none;
    backface-visibility: hidden;
    transform: translateZ(0); /* Hardware acceleration */
    will-change: transform;
}

/* Wave Layer 1 - Front layer (darkest, fastest) */
.wave-layer-1 {
    z-index: 30;
}

.wave-layer-1 svg {
    color: #0a2a5c;
    animation: waveMove1 12s linear infinite;
}

/* Wave Layer 2 - Middle layer (medium opacity, medium speed) */
.wave-layer-2 {
    z-index: 20;
}


.wave-layer-2 svg {
    color: #133E87;
    animation: waveMove2 18s linear infinite reverse;
}

/* Wave Layer 3 - Back layer (lightest, slowest) */
.wave-layer-3 {
    z-index: 10;
}


.wave-layer-3 svg {
    color: #608BC1;
    animation: waveMove3 28s linear infinite;
}


@keyframes waveMove1 {
    0% { transform: translateX(0) translateZ(0); }
    100% { transform: translateX(-50%) translateZ(0); }
}
@keyframes waveMove2 {
    0% { transform: translateX(0) translateZ(0); }
    100% { transform: translateX(-50%) translateZ(0); }
}
@keyframes waveMove3 {
    0% { transform: translateX(0) translateZ(0); }
    100% { transform: translateX(-50%) translateZ(0); }
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .wave-layer-1 svg,
    .wave-layer-2 svg,
    .wave-layer-3 svg {
        animation: none;
        transform: translateX(-16.666%) translateZ(0); /* Static position showing partial wave */
    }
    
    .cta-waves {
        animation: none;
    }
}
/* Gallery centering override *
/* Footer */
.site-footer {
    background: linear-gradient(135deg, #103478 0%, var(--primary-color) 50%, #0a2555 100%);
    color: #E8E8E8;
    font-family: 'Cormorant Garamond', serif;
    padding: 60px 0 30px 0;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="footerGrain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.04)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.04)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.02)"/><circle cx="20" cy="80" r="0.5" fill="rgba(255,255,255,0.02)"/><circle cx="80" cy="30" r="0.5" fill="rgba(255,255,255,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23footerGrain)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 40px;
}

.footer-column h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #E8E8E8 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 12px;
}

.footer-column a {
    color: inherit;
    text-decoration: none;
    font-size: 1.25rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
    display: inline-block;
}

.footer-column a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, var(--third-color) 0%, var(--white-color) 100%);
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.footer-column a:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

.footer-column a:hover::after {
    width: 100%;
}

.footer-bottom {
    text-align: right;
    font-size: 1rem;
    color: #E8E8E8;
    opacity: 0.8;
    padding-top: 30px;
    border-top: 1px solid rgba(232, 232, 232, 0.15);
     text-align: center;
}

    .visi-desc, .misi-list {
        font-size: 1.4rem;
    }

.struktur-pdf-wrapper {
    margin: 24px 0 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
.struktur-pdf-wrapper iframe {
    max-width: 100%;
    min-height: 320px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.struktur-pdf-btn {
    display: block;
    margin: 18px auto 0 auto;
    padding: 12px 32px;
    background: #254a8a;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 1.1rem;
    font-family: 'Playfair Display SC', serif;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: background 0.2s, color 0.2s;
}
.struktur-pdf-btn:hover {
    background: #7296cb;
    color: #fff;
}

.img-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%; /* was 100vw; using 100% prevents horizontal gutter when vertical scrollbar is present */
    height: 100vh;
    overflow: auto;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}

.img-modal-content {
    display: block;
    margin: 60px auto;
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.25);
    background: #fff;
}

.img-modal-close {
    position: absolute;
    top: 32px;
    right: 48px;
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.2s;
}

.img-modal-close:hover {
    color: #7296cb;
}
.mobile-bottom-nav{
    display: none;
}

/* Map + Facilities side-by-side */
.map-section {
    background: radial-gradient(1100px circle at 85% -20%, rgba(255,255,255,0.18), transparent 60%),
                linear-gradient(to bottom, var(--primary-color) 0%, rgb(101, 131, 184) 80%);
}
.map-container {
    width: 100%;
    margin: 0;
    padding: 40px 40px;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); /* map much larger, facilities min width */
    gap: 24px;
    align-items: start;
}
.map-pane {
    display: flex;
}
.map-pane .map-image {
    width: 100%;
    min-height: 640px; /* taller for better presence */
    border-radius: 18px;
    /* Use provided photo as map background */
    background-color: #dfe8f5; /* fallback color */
    background-image: url('../../asset2/WhatsApp Image 2025-08-19 at 09.11.53_7046614d.jpg');
    background-size: cover; /* ensure full cover */
    background-position: center; /* center the image */
    background-repeat: no-repeat;
    box-shadow: 0 15px 40px rgba(0,0,0,0.14);
    border: 1px solid rgba(19,62,135,0.20);
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: -6px;
    position: relative;
}
/* Desktop only facilities-pane styling */
@media (min-width: 901px) {
    .facilities-pane {
        background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
        border: 1px solid rgba(19,62,135,0.20);
        border-radius: 16px;
        padding: 16px 16px 14px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        max-height: 640px; /* match map height */
        overflow: auto; /* prevent overflow collision */
        outline: 2px solid rgba(255,255,255,0.6);
        outline-offset: -6px;
    }
}

/* Base facilities-pane styling for all devices */
.facilities-pane {
    background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
    border: 1px solid rgba(19,62,135,0.20);
    border-radius: 16px;
    padding: 16px 16px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: -6px;
}
/* Reuse existing facility styles inside pane */
.facilities-pane .facility-grid {
    display: grid;
    grid-template-columns: 1fr; /* stack cards inside pane */
    gap: 16px;
}

.facilities-pane .facility-card { 
    padding: 16px; 
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(19, 62, 135, 0.15);
    transition: all 0.3s ease;
}

.facilities-pane .facility-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.9);
}

.facilities-pane .facility-title { 
    margin-bottom: 12px; 
    font-size: 1.1rem;
    color: var(--primary-color);
    position: relative;
    padding-bottom: 8px;
}

.facilities-pane .facility-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 3px;
}

.facilities-pane .facilities-header { 
    text-align: left; 
    margin-bottom: 16px; 
    position: sticky; 
    top: -16px; 
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.9) 0%, rgba(250, 252, 255, 0.8) 70%, rgba(250, 252, 255, 0) 100%); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10; 
    padding: 20px 16px 16px 16px; 
    margin-left: -16px;
    margin-right: -16px;
    margin-top: -16px;
    border-bottom: 1px solid rgba(19, 62, 135, 0.1);
}

.facilities-pane .facilities-header h2 { 
    font-family: 'Playfair Display SC', serif;
    font-size: 1.5rem; 
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 8px 0;
    position: relative;
    padding-bottom: 8px;
}
.facilities-pane .facilities-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 3px;
}

.facilities-pane .facilities-header p { 
    font-size: 0.95rem; 
    color: #555;
    line-height: 1.4;
}

/* Facility card type-specific styling */
.facility-card.facility-education { border-left: 4px solid #4CAF50; }
.facility-card.facility-worship { border-left: 4px solid #673AB7; }
.facility-card.facility-tourism { border-left: 4px solid #2196F3; }
.facility-card.facility-public { border-left: 4px solid #607D8B; }



/* Map Markers Styles */
.map-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-marker {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    transform: translate(-50%, -50%);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
    font-family: 'Inter', sans-serif;
}

.map-marker::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: var(--secondary-color) transparent transparent transparent;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.map-marker:hover {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    z-index: 20;
}

.marker-number {
    font-size: 16px;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.marker-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    background: white;
    color: var(--primary-color);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--primary-color);
}

.marker-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: white;
    color: var(--primary-color);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    z-index: 30;
}

.marker-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.map-marker:hover .marker-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* Marker types with different colors */
.map-marker[data-type="education"] {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
}

.map-marker[data-type="worship"] {
    background: linear-gradient(135deg, #673AB7 0%, #9C27B0 100%);
}

.map-marker[data-type="tourism"] {
    background: linear-gradient(135deg, #2196F3 0%, #03A9F4 100%);
}

.map-marker[data-type="government"] {
    background: linear-gradient(135deg, #F44336 0%, #E91E63 100%);
}

.map-marker[data-type="market"] {
    background: linear-gradient(135deg, #FF9800 0%, #FFC107 100%);
}

.map-marker[data-type="bank"] {
    background: linear-gradient(135deg, #795548 0%, #9E9E9E 100%);
}

.map-marker[data-type="public"] {
    background: linear-gradient(135deg, #607D8B 0%, #90A4AE 100%);
}

/* Mosque icon */
.mosque-icon {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    font-style: normal;
}

.mosque-icon::before {
    content: '☪';
    font-size: 10px;
}

/* Facility list items with markers */
.facility-list li {
    position: relative;
    transition: all 0.3s ease;
    padding: 8px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(19, 62, 135, 0.1);
}

.facility-list li:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Facility marker styling */
.facility-marker {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 10px;
    font-weight: bold;
    font-size: 12px;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.facility-name {
    flex-grow: 1;
    font-size: 0.95em;
}

.facility-list li:hover .facility-marker {
    transform: scale(1.2);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Marker colors based on type */
.facility-marker[data-type="education"] {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
}

.facility-marker[data-type="worship"] {
    background: linear-gradient(135deg, #673AB7 0%, #9C27B0 100%);
}

.facility-marker[data-type="tourism"] {
    background: linear-gradient(135deg, #2196F3 0%, #03A9F4 100%);
}

.facility-marker[data-type="government"] {
    background: linear-gradient(135deg, #F44336 0%, #E91E63 100%);
}

.facility-marker[data-type="market"] {
    background: linear-gradient(135deg, #FF9800 0%, #FFC107 100%);
}

.facility-marker[data-type="bank"] {
    background: linear-gradient(135deg, #795548 0%, #9E9E9E 100%);
}

.facility-marker[data-type="public"] {
    background: linear-gradient(135deg, #607D8B 0%, #90A4AE 100%);
}

/* Position markers on the map */
.map-marker[data-id="1"] { top: 84%; left: 75%; }
.map-marker[data-id="2"] { top: 35%; left: 45%; }
.map-marker[data-id="3"] { top: 32%; left: 50%; }
.map-marker[data-id="4"] { top: 40%; left: 55%; }
.map-marker[data-id="5"] { top: 60%; left: 30%; }
.map-marker[data-id="6"] { top: 65%; left: 35%; }
.map-marker[data-id="7"] { top: 75%; left: 25%; }
.map-marker[data-id="8"] { top: 45%; left: 60%; }
.map-marker[data-id="9"] { top: 50%; left: 45%; }
.map-marker[data-id="10"] { top: 25%; left: 65%; }
.map-marker[data-id="11"] { top: 20%; left: 30%; }
.map-marker[data-id="12"] { top: 70%; left: 40%; }
.map-marker[data-id="13"] { top: 15%; left: 45%; }
.map-marker[data-id="14"] { top: 25%; left: 25%; }
.map-marker[data-id="15"] { top: 35%; left: 70%; }
.map-marker[data-id="16"] { top: 55%; left: 65%; }
.map-marker[data-id="17"] { top: 65%; left: 70%; }
.map-marker[data-id="18"] { top: 75%; left: 60%; }
.map-marker[data-id="19"] { top: 85%; left: 75%; }
.map-marker[data-id="20"] { top: 15%; left: 80%; }

/* Marker animation */
@keyframes markerPulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.map-marker {
    animation: markerPulse 2s infinite;
    animation-delay: calc(var(--i, 0) * 0.1s);
}

/* Stagger animation for markers */
.map-marker:nth-child(1) { --i: 1; }
.map-marker:nth-child(2) { --i: 2; }
.map-marker:nth-child(3) { --i: 3; }
.map-marker:nth-child(4) { --i: 4; }
.map-marker:nth-child(5) { --i: 5; }
.map-marker:nth-child(6) { --i: 6; }
.map-marker:nth-child(7) { --i: 7; }
.map-marker:nth-child(8) { --i: 8; }
.map-marker:nth-child(9) { --i: 9; }
.map-marker:nth-child(10) { --i: 10; }
.map-marker:nth-child(11) { --i: 11; }
.map-marker:nth-child(12) { --i: 12; }
.map-marker:nth-child(13) { --i: 13; }
.map-marker:nth-child(14) { --i: 14; }
.map-marker:nth-child(15) { --i: 15; }
.map-marker:nth-child(16) { --i: 16; }
.map-marker:nth-child(17) { --i: 17; }
.map-marker:nth-child(18) { --i: 18; }
.map-marker:nth-child(19) { --i: 19; }
.map-marker:nth-child(20) { --i: 20; }


/* Features Section */
.features-section {
    background: linear-gradient(135deg, #D7E4F2 0%, #c5d6ef 50%, #D7E4F2 100%);
    position: relative;
    padding: 60px 0;
}

.features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="featuresGrain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(91,133,187,0.08)"/><circle cx="75" cy="75" r="1" fill="rgba(91,133,187,0.08)"/><circle cx="50" cy="10" r="0.5" fill="rgba(91,133,187,0.04)"/><circle cx="20" cy="80" r="0.5" fill="rgba(91,133,187,0.04)"/><circle cx="80" cy="30" r="0.5" fill="rgba(91,133,187,0.04)"/></pattern></defs><rect width="100" height="100" fill="url(%23featuresGrain)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

#wisata {
    position: relative;
    isolation: isolate;
}

#wisata .container {
    max-width: 1200px;
    padding: 80px 40px;
}

#wisata::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -100px;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(closest-side, rgba(19,62,135,0.25), transparent 70%);
    filter: blur(40px);
    opacity: 0.25;
    z-index: 0;
}

#wisata::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -120px;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(closest-side, rgba(255,255,255,0.18), transparent 70%);
    filter: blur(30px);
    opacity: 0.35;
    z-index: 0;
}

.top-bar, .bottom-bar {
    width: 100%;

    height: 12px;
    background: linear-gradient(90deg, #5B85BB 0%, var(--secondary-color) 50%, #5B85BB 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 80px 40px;
    position: relative;
    z-index: 2;
}

.feature-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-bottom: 120px;
    gap: 48px;
    position: relative;
    z-index: 1;
}

.feature-shape {
    width: 100%;
    height: 320px;
    background: linear-gradient(135deg, #5B85BB 0%, var(--secondary-color) 100%);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
}

.feature-shape::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s;
    z-index: 1;
}

.feature-shape:hover::before {
    transform: translateX(100%);
}

.feature-shape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.feature-shape:hover img {
    transform: scale(1.05);
}

.feature-shape::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(19,62,135,0.15), rgba(96,139,193,0.15));
    border-radius: 24px;
    pointer-events: none;
    z-index: 1;
}

.feature-text {
    max-width: 100%;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 24px 28px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.feature-text h2 {
    font-size: 2.8rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 15px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a4a9a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.feature-text h2::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 3px;
}

.feature-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--primary-color);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.feature-item:nth-child(odd) .feature-text {
    text-align: right;
}

.feature-item:nth-child(odd) .feature-shape {
    transform: rotate(-3deg);
}

.feature-item:nth-child(odd):hover .feature-shape {
    transform: rotate(-1deg) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.15);
}

.feature-item:nth-child(even) {
    grid-template-columns: 1fr 1fr;
}

.feature-item:nth-child(even) .feature-text {
    text-align: left;
}

.feature-item:nth-child(even) .feature-shape {
    transform: rotate(3deg);
}

.feature-item:nth-child(even):hover .feature-shape {
    transform: rotate(1deg) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.15);
}

.feature-item:last-child {
    margin-bottom: 0;
}
/* Peta section styles */
.peta-section{
    padding:50px 16px 36px;
     background: linear-gradient(to bottom, rgb(101, 131, 184) 0%, var(--primary-color) 80%);
}
.peta-title{ 
   position: relative;
    text-align: center;
    font-size: 2.2rem;
    font-family: 'Playfair Display SC', serif;
    font-weight: 800;
    color: var(--white-color);
    margin-bottom: 28px;
    letter-spacing: 2px;
}    
.peta-title::after {
    content: "";
    display: block;
    width: 140px;
    height: 4px;
    border-radius: 4px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(203,220,235,1) 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.peta-tabs{display:flex;gap:10px;justify-content:center;margin:10px 0 26px;}
.peta-tab-btn{appearance:none;border:1px solid rgba(255,255,255,.35);background:linear-gradient(135deg,#133E87,#608BC1);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.18);opacity:.75;transition:.25s; font-size: var(--fontMM);}
.peta-tab-btn.active{opacity:1;transform:translateY(-2px)}

.peta-wrapper{max-width:1100px;margin:0 auto;position:relative}
.peta-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:stretch;background:linear-gradient(180deg,rgba(255,255,255,.86) 0%, rgba(214,227,243,.95) 100%);border:1px solid rgba(255,255,255,.6);border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.12);padding:16px;}
.peta-panel[hidden]{display:none}

.peta-media{position:relative}
.peta-figure{position:relative;height:100%;border-radius:14px;overflow:hidden;box-shadow:0 14px 28px rgba(0,0,0,.18);background:#0b2657}
.peta-figure:before{content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.12);border-radius:14px;pointer-events:none}
.peta-img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform .5s ease;filter:saturate(1.05) contrast(1.03)}
.peta-figure:hover .peta-img{transform:scale(1.06)}
.peta-caption{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.45);color:#fff;padding:6px 10px;border-radius:999px;font-size:.85rem}
.peta-view-btn{position:absolute;right:12px;bottom:12px;appearance:none;border:none;border-radius:999px;padding:8px 14px;background:linear-gradient(135deg,#133E87,#608BC1);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.18)}

.peta-desc{color:#254a8a;display:flex;flex-direction:column;justify-content:center}
.peta-desc h3{margin:6px 0 8px;color:#133E87}
.peta-desc p{margin:0 0 12px;line-height:1.55; font-family:'Karma', serif; letter-spacing:-.02em;}
.peta-badges{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.badge{background:rgba(19,62,135,.1);border:1px solid rgba(19,62,135,.25);color:#133E87;font-weight:700;padding:6px 10px;border-radius:999px;font-size:.78rem}
.badge-warn{background:rgba(248,120,91,.1);border-color:rgba(248,120,91,.35);color:#e45c3a}

/* Modal */
.map-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:9999}
.map-modal.open{display:flex}
.map-modal-content{position:relative;width:min(94vw,1080px);height:min(84vh,720px);background:#0b2657;border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.5);overflow:hidden;border:1px solid rgba(255,255,255,.18)}    
.map-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0b2657}
.map-stage img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 12px 30px rgba(0,0,0,.35))}
.map-close,.map-prev,.map-next{position:absolute;top:12px;width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:#133E87;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:2}
.map-close{right:12px}
.map-prev{left:12px;top:calc(50% - 20px)}
.map-next{right:12px;top:calc(50% - 20px)}
.map-counter{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;color:#fff;background:rgba(0,0,0,.35);padding:6px 10px;border-radius:999px;font-size:.85rem}
.awards-counter{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;color:#fff;background:rgba(0,0,0,.35);padding:6px 10px;border-radius:999px;font-size:.85rem}

/* Reveal on scroll */
.peta-panel.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.peta-panel.reveal.in{opacity:1;transform:none}


/* =====================
   GALERI (Profil) — hero scroller + grid + popout
   Scoped with .galeri- prefix to avoid conflicts
===================== */
.galeri-section{
    padding:40px 40px;
    --g-radius:20px;
        --g-gap:18px;
        --g-bg:#eef3fb;
        --g-dark:#0b1c3a;
        --g-accent:#133E87;
        --g-shadow:0 12px 40px rgba(16,32,96,.18);
        --g-shadow-strong:0 22px 70px rgba(16,32,96,.28);
    background: linear-gradient(to bottom, rgb(101, 131, 184) 0%, var(--third-color) 80%);

}
/* Hero (atas) */
.galeri-hero{ 
    max-width:none; 
    margin:0 auto 20px; 
    text-align:center; 
    width:100%;
    box-sizing:border-box;
}
.title-galeri{ 
    text-align: center;
    font-size: 2.2rem;
    font-family: 'Playfair Display SC', serif;
    font-weight: 800;
    color: var(--white-color);
    margin-bottom: 28px;
    letter-spacing: 2px;
}
.title-galeri::after{
    content: "";
    display: block;
    width: 140px;
    height: 4px;
    border-radius: 4px;
    margin: 14px auto 0;
     background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(203,220,235,1) 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.galeri-title{ 
    font-size:2.2rem; 
    margin:0 0 6px; 
    letter-spacing:.5px; 
    font-family:'Playfair Display SC',serif;
    color: var(--white-color);
}
.galeri-subtitle{  color: var(--white-color); opacity:.9; margin:0 0 16px; font-family:'Karma', serif; }

.galeri-scroller {
            position: relative;
            max-width: 1800px;
            height: 600px;
            perspective: 1400px;
            display: flex;
            align-items: center;
            justify-content: center;
             background-color: var(--g-bg);
            border-radius: 20px ;
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: var(--g-shadow);
        }

        .galeri-scroll {
            position: relative;
            width: 400px;
            height: 300px;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            bottom: 100px;
            align-items: center;
            justify-content: center;
        }

        .gallery-slide {
            position: absolute;
            width: 320px;
            height: 440px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .gallery-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-thumbnail {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .video-thumbnail video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }

        .play-button:hover {
            background: rgba(0,0,0,0.9);
            transform: translate(-50%, -50%) scale(1.1);
        }

        .slide-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(3, 0, 36, 0.8), transparent);
            color: white;
            padding: 20px;
            box-sizing: border-box;
            transform: translateY(100%);
            transition: transform 0.6s ease;
            z-index: 2;
        }

        .gallery-slide:hover .slide-overlay {
            transform: translateY(0);
        }

        .slide-overlay h3 {
            margin: 0;
            font-size: 24px;
            text-align: center;
            font-weight: bold;
        }

        .slide-overlay p {
            margin: 10px 0 0 0;
            font-size: 16px;
            text-align: center;
            max-width: 90%;
            line-height: 1.4;
            font-size: 'Karma', serif;
        }

        /* Positioning untuk 5 slides */
        .gallery-slide:nth-child(1) {
            transform: translateX(-400px) translateZ(-200px) rotateY(25deg);
            opacity: 0.6;
            z-index: 1;
        }

        .gallery-slide:nth-child(2) {
            transform: translateX(-200px) translateZ(-100px) rotateY(15deg);
            opacity: 0.8;
            z-index: 2;
        }

        .gallery-slide:nth-child(3) {
            transform: translateX(0px) translateZ(0px) rotateY(0deg);
            opacity: 1;
            z-index: 3;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
        }

        .gallery-slide:nth-child(4) {
            transform: translateX(200px) translateZ(-100px) rotateY(-15deg);
            opacity: 0.8;
            z-index: 2;
        }

        .gallery-slide:nth-child(5) {
            transform: translateX(400px) translateZ(-200px) rotateY(-25deg);
            opacity: 0.6;
            z-index: 1;
        }

        /* Navigation buttons */
        .galeri-ctrl {
            position: absolute;
            bottom: 10px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #333;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            z-index: 10;
        }

        .galeri-ctrl:hover {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.1);
        }

        .galeri-ctrl:active {
            transform: scale(0.95);
        }

        .prev-gallery {
            left: 46%;
            transform: translateX(-20px);
            
        }

        .next-gallery {
            left: 50%;
            transform: translateX(20px);
        }

        /* Play button untuk video slide */
        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #333;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gallery-slide:hover .play-button {
            opacity: 1;
        }

        /* Responsive */
       


      
     
      
/* =====================
   MEDSOS (Profil)
===================== */
.medsos-section{ padding:60px 16px 80px; max-width:1200px; margin:0 auto;}
.medsos-title{ 
   text-align: center;
    font-size: 2.2rem;
    font-family: 'Playfair Display SC', serif;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 28px;
    letter-spacing: 2px;
}
.medsos-title::after{
    content: "";
    display: block;
    width: 140px;
    height: 4px;
    border-radius: 4px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, rgba(37,74,138,1) 0%, rgba(156,198,230,1) 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.medsos-subtitle{ text-align:center; color:#254a8a; opacity:.9; margin-bottom:28px; font-family:'Karma', serif;}

/* Smooth entrance */
.ms-animate{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease;}
.ms-animate.show{opacity:1; transform:none;}

.person-animate{opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease;}
.person-animate.show{opacity:1; transform:none;}

/* Grid (3 tiles on desktop) */
.medsos-grid{ display:grid; gap:22px; grid-template-columns: 1fr;}
/* Instagram tile default (light) */
.ms-tile{ position:relative; background:#eef4ff; }
.ms-tile__row{ display:flex; align-items:center; justify-content:space-between; }
.ms-tile__arrow{ display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:50%; background:#fff; color:#17315f; box-shadow:0 6px 14px rgba(0,0,0,.08); }
.ms-tile__watermark{ display:none; }
.ms-tile__handle{ color:#254a8a; opacity:.9; font-size:.95rem; }
.ms-tile{ position:relative; display:flex; flex-direction:column; gap:10px; padding:18px; background:#eef4ff; border-radius:18px; color:#17315f; text-decoration:none; box-shadow:0 10px 24px rgba(0,0,0,.1); min-height:200px; overflow:hidden; transition:all .35s ease; }
.ms-tile__icon{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.08); transition:all .35s ease; }
.ms-tile__text{ display:flex; flex-direction:column; }
.ms-tile__title{ font-weight:800; font-size:1.2rem; transition:font-size .35s ease; }
.ms-tile__desc{ font-family:'Karma', serif; opacity:.85; font-size:.95rem; }
.ms-tile:hover{ transform:translateY(-28px) scale(1.22); box-shadow:0 24px 64px rgba(0,0,0,.26); z-index:3; }
/* Pop-out upward using transform so layout tidak turun */
.ms-tile{ transition:transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease; transform-origin:center bottom; }
.ms-tile:hover{ transform:translateY(-14px) scale(1.08); min-height:300px;}

/* Hover states per brand */
.ms-tile--instagram:hover{ background:linear-gradient(160deg,#CF5DA3 0%, #C8578C 60%, #B44F84 100%); color:#fff; box-shadow:0 18px 44px rgba(0,0,0,.22); }
.ms-tile--instagram:hover .ms-tile__icon{ background:rgba(255,255,255,.14); color:#fff; }
.ms-tile--instagram:hover .ms-tile__arrow{ background:rgba(255,255,255,.14); color:#fff; }
.ms-tile--instagram:hover .ms-tile__title{ font-size:1.6rem; }
.ms-tile--instagram:hover .ms-tile__handle{ color:#fff; opacity:.95; }
.ms-tile--instagram:hover .ms-tile__watermark{ display:block; position:absolute; left:24px; bottom:18px; font-size:2.2rem; font-weight:800; color:rgba(255,255,255,.18); letter-spacing:1px; }


/* Facebook */
.ms-tile--facebook:hover{ background:linear-gradient(135deg, #1877F2, #3B82F6); color:#fff; box-shadow:0 18px 44px rgba(0,0,0,.22); }
.ms-tile--facebook:hover .ms-tile__icon, .ms-tile--facebook:hover .ms-tile__arrow{ background:rgba(255,255,255,.14); color:#fff; }
.ms-tile--facebook:hover .ms-tile__title{ font-size:1.6rem; }
.ms-tile--facebook:hover .ms-tile__watermark{ display:block; position:absolute; left:24px; bottom:18px; font-size:2.2rem; font-weight:800; color:rgba(255,255,255,.18); letter-spacing:1px; }

@media (prefers-reduced-motion: reduce){
  .ms-animate{ transition:none; }
  .person-animate{ transition:none; }
  .ms-tile{ transition:none; }
}

@media (prefers-reduced-motion: reduce){
  .ms-animate{ transition:none; }
  .person-animate{ transition:none; }
  .ms-card:hover, .ms-tile:hover{ transform:none; }
}

/* Person in Charge Section */
.person-in-charge-section {
    padding: 60px 16px 80px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.person-in-charge-title {
    color: var(--primary-color);
    font-size: 2.2rem;
    margin: 0 0 40px;
    letter-spacing: 0.5px;
    font-weight: 800;
}
.person-in-charge-title::after{
    content: "";
    display: block;
    width: 140px;
    height: 4px;
    border-radius: 4px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, rgba(37,74,138,1) 0%, rgba(156,198,230,1) 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);

}
.person-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(214,227,243,.95) 100%);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
    padding: 40px 20px;
    max-width: 400px;
    margin: 0 auto;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.person-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

.person-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    margin-bottom: 20px;
}

.person-info {
    text-align: center;
}

.person-name {
    color: #133E87;
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.person-phone {
    color: #254a8a;
    font-size: 1rem;
    margin: 0;
}

.person-phone strong {
    font-weight: 600;
}

/* Image Grid Gallery */
.image-grid-container {
    max-width: 1700px;
    margin: 45px auto;
    padding: 0 40px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-auto-rows: 200px;
    gap: 16px;
    margin-bottom: 30px;
}

.grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.grid-item:hover img {
    transform: scale(1.05);
}

.grid-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 20px;
    color: white;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.grid-item:hover .grid-item-overlay {
    opacity: 1;
    transform: translateY(0);
}

.grid-item-overlay h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.grid-item-overlay p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Grid item sizes */
.grid-item.large {
    grid-column: span 5;
    grid-row: span 2;
}

.grid-item.medium {
    grid-column: span 5;
    grid-row: span 1;
}

.grid-item.wide {
    grid-column: span 7;
    grid-row: span 1;
}
.grid-item.wide-a {
    grid-column: span 8;
    grid-row: span 1;
}

/* Grid Controls */
.grid-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.grid-btn {
    background: linear-gradient(135deg, #133E87, #608BC1);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(19, 62, 135, 0.3);
}

.grid-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(19, 62, 135, 0.4);
}

.grid-btn:active {
    transform: translateY(0);
}

/* Image Modal */
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
}

.image-modal.show {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 1;
}

.image-modal-content {
    position: relative;
    background-color: #fff;
    margin: 2% auto;
    width: 90%;
    max-width: 1000px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

.image-modal.show .image-modal-content {
    transform: scale(1);
}

.image-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.image-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.image-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.image-modal-body img {
    width: 100%;
    max-height: 60vh;
    object-fit: cover;
    flex-shrink: 0;
}

.image-modal-info {
    padding: 30px;
    background: #f8f9fa;
    flex: 1;
    overflow-y: auto;
}

.image-modal-info h3 {
    margin: 0 0 15px 0;
    color: #133E87;
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    font-family: 'Playfair Display SC', serif;
    font-weight: 600;
    line-height: 1.3;
}

.image-modal-info p {
    margin: 0;
    color: #555;
    line-height: 1.6;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
}

/* Mobile-specific styles for image modal */
@media (max-width: 900px) {
    .image-modal,
    .image-modal.show {
        padding: 15px;
        /* Account for mobile bottom navigation */
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 15px));
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .image-modal-content {
        width: 95%;
        margin: 0;
        max-height: calc(100vh - 110px - env(safe-area-inset-bottom, 0px));
        border-radius: 16px;
    }
    
    .image-modal-body img {
        max-height: 50vh;
    }
    
    .image-modal-info {
        padding: 20px;
    }
    
    .image-modal-info h3 {
        font-size: clamp(1.1rem, 5vw, 1.4rem);
        margin-bottom: 12px;
    }
    
    .image-modal-info p {
        font-size: clamp(0.85rem, 3.5vw, 0.95rem);
        line-height: 1.5;
    }
    
    .image-modal-close {
        width: 36px;
        height: 36px;
        font-size: 24px;
        top: 12px;
        right: 12px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .image-modal,
    .image-modal.show {
        padding: 10px;
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 10px));
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .image-modal-content {
        width: 98%;
        margin: 0;
        border-radius: 12px;
        max-height: calc(100vh - 120px - env(safe-area-inset-bottom, 0px));
    }
    
    .image-modal-body img {
        max-height: 45vh;
    }
    
    .image-modal-info {
        padding: 15px;
    }
    
    .image-modal-info h3 {
        font-size: clamp(1rem, 6vw, 1.25rem);
        margin-bottom: 10px;
    }
    
    .image-modal-info p {
        font-size: clamp(0.8rem, 4vw, 0.9rem);
        line-height: 1.4;
    }
    
    .image-modal-close {
        width: 32px;
        height: 32px;
        font-size: 20px;
        top: 10px;
        right: 10px;
    }
}

/* Landscape orientation on mobile devices */
@media (max-width: 900px) and (orientation: landscape) {
    .image-modal-body img {
        max-height: 40vh;
    }
    
    .image-modal-content {
        max-height: calc(100vh - 80px - env(safe-area-inset-bottom, 0px));
    }
}



/* Video Modal */
.video-modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:10000;}
.video-modal.open{display:flex;}
.video-modal-content{position:relative;width:min(95vw,1200px);height:min(85vh,800px);background:#1a1a2e;border-radius:16px;overflow:hidden;border:3px solid #16213e;box-shadow:0 20px 60px rgba(0,0,0,.6);margin:40px 40px 120px 40px;padding:20px;}
.video-modal-content video{width:100%;height:100%;object-fit:contain;display:block;margin:0 auto;}
.video-modal-content iframe{width:100%;height:100%;border:2px solid #0f172a;border-radius:12px;display:block;margin:0 auto;background:#000;}
.video-close{position:absolute;top:15px;right:15px;width:45px;height:45px;border:2px solid #16213e;border-radius:50%;background:rgba(22,33,62,.95);color:#ffffff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1000;transition:all 0.3s ease;}
.video-close:hover{background:#16213e;border-color:#1e3a8a;transform:scale(1.1);}

/* Video.js player styles in modal */
.video-modal-content .video-js {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

.video-modal-content .vjs-tech {
  object-fit: contain;
}

/* Ensure Video.js controls are visible */
.video-modal .vjs-control-bar {
  background: rgba(0, 0, 0, 0.7) !important;
}

.video-modal .vjs-big-play-button {
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
}

/* Ensure profil-nav is visible on desktop screens */
@media (min-width: 1024px) {
  .profil-nav {
    display: block !important;
  }
}

/* Enhanced Close Button Styles */
.close {
  transition: all 0.2s ease !important;
}

.close:hover {
  background: var(--secondary-color) !important;
  border-color: var(--white-color) !important;
  color: var(--white-color) !important;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(19, 62, 135, 0.4) !important;
}

.close:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(19, 62, 135, 0.3) !important;
}