/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow text selection for readable content */
p, h1, h2, h3, h4, h5, h6, span, a, li, td, th, label, input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Prevent image dragging */
img, canvas {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: auto;
}
h1, h3, h4, h5, h6, .section-subtitle {
    font-family: 'TRY Vesterbro', sans-serif !important;
}
a {
    color: inherit!important;
    text-decoration: none;
    transition: color 0.3s ease;
}
a:focus,
a:

html {
    overflow-x: hidden;
}

body {
    font-family: 'Lato', sans-serif !important;
    color: #202020;
    font-size: 16px;
    line-height: 1.6;
    padding-top: 0;
    overflow-x: hidden;
    background-color: transparent !important;
}
button {
    border-radius: 0!important;
}
a.btn,
button.btn {
    font-weight: 800!important;
    border-radius: 0!important;
    border-size: 2px!important;
    align-items: center;
    display: inline-flex;
    gap: 8px;
}
a.btn-primary,
button.btn-primary {
    border-color: #017e4d!important;
    color: #017e4d!important;
}
.text-green {color: #017e4d!important;}
a.btn:hover,
button.btn:hover {
    background: #F8EDD9;
    box-shadow: 4px 4px 12px 0 rgba(32, 32, 32, 0.15);
    color: #202020;
}
textarea, input[type="text"], input[type="search"], input[type="password"], .wpcf7 input[type=url], .wpcf7 input[type=email], .wpcf7 input[type=tel] {
    border: 1px solid #c5c5c5!important;
    padding: 8px 12px!important;
    font-size: 16px;
    color: #2c3338;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: transparent;
    border-radius: 2px!important;
}
input[type=file] {
    box-shadow: inherit!important;
    border: 0!important;
}
.btn.btn-submit {
    background: #fff;
    color: var(--primary-color);
    padding: 10px 30px;
    border-radius: 0;
    border: 1px solid var(--primary-color);
    font-weight: 700;
    transition: 300ms background, 300ms color;
}

/* ============================================
   Homepage Background Transition Layer
   ============================================ */
#homepage-bg-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background-color: #f2c744;
    transition: background-color 300ms ease;
}

/* Custom Bootstrap Overrides */
.container-fluid {
    padding: 0;
}

.row.no-gutters {
    margin-left: 0;
    margin-right: 0;
}

.row.no-gutters > [class*='col-'] {
    padding-left: 0;
    padding-right: 0;
}

/* Header Styles */
.header {
    padding: 24px 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background-color 400ms ease, color 400ms ease, filter 400ms ease;
    background-color: #f2c744;
    color: #202020;
    filter: none;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-menu-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-menu-btn svg path {
    fill: #ffffff;
    transition: fill 400ms ease;
}

.header-logo {
    display: block;
}

.header-logo .logo-img {
    height: 40px;
    width: 179px;
    object-fit: contain;
    /* filter: brightness(0) invert(1); */
    transition: filter 400ms ease;
    filter: none;
}

/* Fullscreen Menu Modal */
.menu-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #f2c744;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 24px 64px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s ease;
    outline: none;
}

.menu-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.menu-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    border-bottom: none;
    outline: none;
}

.menu-modal.active .menu-modal-header {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.05s;
}

.menu-modal-separator {
    width: 100%;
    height: 1px;
    background-color: rgba(32, 32, 32, 0.15);
    margin: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.menu-modal.active .menu-modal-separator {
    opacity: 1;
    transition-delay: 0.08s;
}

.menu-modal-logo .logo-img {
    height: 40px;
    width: 179px;
    object-fit: contain;
}

.menu-modal-right {
    display: flex;
    align-items: center;
    gap: 48px;
}

.language-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.lang-btn.lang-active,
.lang-active {
    background-color: #007e4c;
    color: white!important;
    padding: 4px 8px;
    text-decoration: none;
    display: inline-block;
}
#user-trigger,
.btn-login {
    background-color: transparent;
    border: 2px solid #202020;
    color: #202020;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 8px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.btn-login:hover,
#user-trigger:hover {
    background: #F8EDD9;
    box-shadow: 4px 4px 12px 0 rgba(32, 32, 32, 0.15);
}

.lang-btn.lang-option,
.lang-option {
    color: #202020;
    padding: 4px 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.lang-btn {
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-btn:hover {
    opacity: 0.8;
}

.menu-close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-close-btn img {
    width: 40px;
    height: 40px;
}

.menu-modal-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-top: none;
    outline: none;
}

.menu-modal hr {
    display: none;
}

.menu-modal.active .menu-modal-content {
    opacity: 1;
    transition-delay: 0.1s;
}

.menu-nav {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    justify-content: center;
}

.menu-item {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #202020;
    text-decoration: none;
    text-align: center;
    line-height: 1.3;
    transition: color 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(40px);
}

.menu-modal.active .menu-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.3s ease;
}

.menu-modal.active .menu-item:nth-child(1) { transition-delay: 0.1s; }
.menu-modal.active .menu-item:nth-child(2) { transition-delay: 0.15s; }
.menu-modal.active .menu-item:nth-child(3) { transition-delay: 0.2s; }
.menu-modal.active .menu-item:nth-child(4) { transition-delay: 0.25s; }
.menu-modal.active .menu-item:nth-child(5) { transition-delay: 0.3s; }

.menu-item:hover {
    color: #007e4c;
    transform: scale(1.05);
}

.menu-modal-footer {
    display: flex;
    justify-content: center;
    padding: 24px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.menu-modal.active .menu-modal-footer {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.contact-btn {
    background-color: #f8edd9;
    color: #fa744c;
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.88px;
    padding: 12px 24px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.contact-btn:hover {
    background-color: #fa744c;
    color: white;
}

/* Login Modal */
.login-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.login-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.login-modal-card {
    position: relative;
    width: 90%;
    max-width: 400px;
    background-color: #f2c744;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.login-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px;
}

.login-modal-title {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 20px;
    color: #202020;
    margin: 0;
}

.login-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #666;
    transition: color 0.3s ease;
}

.login-modal-close:hover {
    color: #202020;
}

.login-modal-body {
    padding: 0px 28px 28px;
}

.login-modal-logo {
    text-align: center;
    margin-bottom: 20px;
}

.login-modal-logo img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.login-modal-error {
    background: #fcf0f1;
    border-left: 4px solid #d63638;
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: 4px;
    color: #3c434a;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
}

.login-modal-form .login-field {
    margin-bottom: 16px;
}

.login-modal-form .login-field label {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}

.login-modal-form .login-field input[type="text"],
.login-modal-form .login-field input[type="password"] {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    font-size: 15px;
    border: 1px solid #8c8f94;
    box-sizing: border-box;
    color: #2c3338;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: transparent;
}

.login-modal-form .login-field input[type="text"]:focus,
.login-modal-form .login-field input[type="password"]:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

.login-modal-form .login-field--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.login-modal-form .login-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: #646970;
    cursor: pointer;
    font-weight: 400;
}

.login-modal-form .login-forgot {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: #2271b1;
    text-decoration: none;
}

.login-modal-form .login-forgot:hover {
    color: #0a4b78;
    text-decoration: underline;
}

.login-modal-form .login-register-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: #646970;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.login-modal-form .login-register {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: #007e4c;
    text-decoration: none;
    font-weight: 700;
}

.login-modal-form .login-register:hover {
    color: #005c39;
    text-decoration: underline;
}

.login-modal-form .login-submit {
    width: 100%;
    line-height: 42px;
    border:2px solid #007e4c;
    background: transparent;
    color: #007e4c;
    text-transform: uppercase;
    border-radius: 4px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}
.login-modal-form .login-submit:hover {
    background: #F8EDD9;
    box-shadow: 4px 4px 12px 0 rgba(32, 32, 32, 0.15);
}


.login-modal-form .login-submit:disabled {
    background: #aaa;
    cursor: not-allowed;
}

/* CAPTCHA widget container */
.login-captcha-wrap {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.login-captcha-error {
    color: #d63638;
    font-size: 13px;
    margin-top: 6px;
    text-align: center;
}

@media (max-width: 480px) {
    .login-modal-card {
        width: 95%;
    }

    .login-modal-body {
        padding: 20px;
    }

    .login-modal-title {
        font-size: 18px;
    }
}
    position: relative;
    display: inline-block;
}

.btn-user {
    background-color: transparent;
    border: 2px solid #202020;
    color: #202020;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-user:hover {
    background-color: #202020;
    color: #fff;
}

.user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 160px;
    z-index: 10001;
}

.user-dropdown.active {
    display: block;
}

.user-dropdown a {
    display: block;
    padding: 12px 16px;
    color: #202020;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.user-dropdown a:first-child {
    border-bottom: 1px solid #eee;
}

.user-dropdown a:hover {
    background-color: #f5f5f5;
}

@media (max-width: 480px) {
    .login-modal-card {
        width: 95%;
        max-height: 95vh;
    }

    .login-modal-body {
        height: calc(95vh - 60px);
    }

    .login-modal-title {
        font-size: 18px;
    }
}

/* Smooth Scroll Background Sections */
.scroll-section {
    position: relative;
    min-height: auto;
    background-color: transparent;
    z-index: 1;
}

.scroll-section .container-fluid,
.scroll-section .row {
    position: relative;
    z-index: 1;
}

/* Banner Section */
.banner-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 120px 64px 64px;
    background-color: #f2c744;
}

.banner-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

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

.banner-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.45);
}

.banner-title {
    font-size: 40px;
    font-weight: 900;
    line-height: 1.3;
    color: #ffffff;
    margin-bottom: 32px;
  }

.banner-cta {
    display: flex;
    align-items: center;
    gap: 24px;
}

.btn-join {
    background-color: #f2c744;
    border: 4px solid #ffffff;
    color: #202020;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    padding: 24px 32px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
    border-radius: 0;
}

.btn-join:hover {
    background-color: #e0b63d;
    color: #202020;
}

.cta-text {
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.56px;
    margin: 0;
    color: #ffffff;
}

.banner-image {
    display: flex;
    align-items: center;
}

.banner-image img {
    width: 100%;
    height: 360px;
    object-fit: contain;
    object-position: center;
}

/* Peta Section */
.peta-section {
    padding: var(--wp--preset--spacing--50, 50px) 64px 60px;
    min-height: auto;
    color: white;
    background-color: transparent;
}

.peta-title {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    margin-bottom: 32px;
    color: #ffffff;
}

.map-container {
    margin-bottom: 32px;
}

/* ═══════════════════════════════════════════════════════════
   Single Peta — Leaflet map hero (replaces background image)
═══════════════════════════════════════════════════════════ */
.single-peta-hero-map {
    position: relative;
    height: 480px;
    /* Override the flex layout from .single-post-hero so the
       absolutely-positioned map div fills the container */
    display: block !important;
    overflow: visible !important; /* allow Leaflet popups/controls to overflow */
    background: #e8e8e8;
}

/* The Leaflet map fills the entire hero area */
.peta-leaflet-map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Leaflet requires an explicit pixel height on the container it initialises on */
#peta-leaflet-map {
    height: 480px;
}

/* Title/meta overlay sits above the map */
.single-peta-hero-map .single-post-hero-overlay {
    position: absolute !important;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000; /* above Leaflet's z-index range (200–600) */
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    /* override the base .single-post-hero-overlay position:relative */
    width: 100%;
    padding: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%) !important;
}

.single-peta-hero-map .single-post-hero-content {
    padding-bottom: 32px;
    pointer-events: auto;
}

/* No-coords fallback message */
.peta-map-no-coords {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: #888;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    background: #f0f0f0;
}

/* Custom orange pin — remove default Leaflet shadow */
.peta-leaflet-pin {
    background: none !important;
    border: none !important;
}

/* Hide the old dotted-map section (no longer used on detail page) */
.single-peta-map-section {
    display: none;
}

@media (max-width: 768px) {
    .single-peta-hero-map,
    #peta-leaflet-map {
        height: 320px;
    }
}

/* Dotted Indonesia Map */
.dotted-map-wrapper {
    width: 100%;
    margin-bottom: 40px;
    position: relative;
    line-height: 0;
}

#indonesia-dotted-map {
    width: 100%;
    height: auto;
    display: block;
    cursor: default;
}

/* Zoom controls */
.dotmap-zoom-controls {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}

.dotmap-zoom-btn {
    width: 32px;
    height: 32px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    color: #202020;
    transition: background 0.15s, opacity 0.15s;
    padding: 0;
}

.dotmap-zoom-btn:hover {
    background: #f2c744;
}

.dotmap-zoom-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Cluster legend */
.dotmap-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 12px;
    color: #555;
}

.dotmap-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dotmap-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   DOTTED MAP POPUP — full override block
   Uses high specificity to beat global rules
   (a { color: inherit!important }, h4 font, etc.)
═══════════════════════════════════════════════ */

/* Popup card */
.dotmap-popup {
    position: absolute;
    z-index: 100;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    width: 312px;
    overflow: hidden;
    pointer-events: auto;
    transform: translateX(-50%);
    animation: dotmap-popup-in 0.18s ease;
}

@keyframes dotmap-popup-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Down-pointing triangle at bottom */
.dotmap-popup::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: calc(50% + var(--arrow-offset, 0px));
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #ffffff;
}

/* Close button */
.dotmap-popup-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent !important;
    border: none !important;
    color: #aaa !important;
    font-size: 18px;
    line-height: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.15s;
}
.dotmap-popup-close:hover { color: #333 !important; }

/* Body padding */
.dotmap-popup-body {
    padding: 22px 22px 20px;
}

/* ── Header: "Aktifitas Flora" ── */
.dotmap-popup .dotmap-popup-header-label {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #202020 !important;
    margin: 0 0 14px !important;
    line-height: 1.2 !important;
    padding-right: 24px;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.dotmap-popup-body { padding: 12px 14px 14px; }

.dotmap-popup-title {
    color: #007E4C;
    font-family: "TRY Vesterbro";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 20.8px */
}

.dotmap-popup-info { margin-bottom: 8px; }

.dotmap-popup-info-row {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    color: #202020;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 0.42px;
}
.dotmap-popup-info-row svg {
    width: 26px;
    height: auto;
    flex-shrink: 0;
}

.dotmap-popup-info-row:last-child { margin-bottom: 0; }

.dotmap-popup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.dotmap-popup .dotmap-popup-tag {
    display: inline-block !important;
    padding: 5px 14px !important;
    border-radius: 4px !important;
    background: #f2c744 !important;
    color: #202020 !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    line-height: 1.3 !important;
}

/* ── Title: bold green ── */
.dotmap-popup .dotmap-popup-title {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #007e4c !important;
    margin: 0 0 12px !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ── Excerpt ── */
.dotmap-popup .dotmap-popup-excerpt {
    font-family: 'Lato', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #333 !important;
    line-height: 1.7 !important;
    margin: 0 0 14px !important;
}

/* ── Location row ── */
.dotmap-popup .dotmap-popup-info {
    margin-bottom: 0;
    padding-top: 0;
    border-top: none;
}
.dotmap-popup .dotmap-popup-info-row {
    display: flex !important;
    align-items: top !important;
    gap: 7px !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #444 !important;
    letter-spacing: 0.8px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}
.dotmap-popup-pin-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}

/* ── Horizontal divider above CTA ── */
.dotmap-popup .dotmap-popup-divider {
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    margin: 16px 0;
}

/* ── Cluster nav ── */
.dotmap-popup .dotmap-popup-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0;
}
.dotmap-popup-nav-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    padding: 0;
    line-height: 1;
}
.dotmap-popup-nav-btn:hover { background: #f0f0f0; border-color: #bbb; }
.dotmap-popup-nav-count { font-size: 11px; color: #888; min-width: 30px; text-align: center; }

/* ── CTA: "LIHAT AKTIFITAS ↗" ── */
.dotmap-popup a.dotmap-popup-btn,
.dotmap-popup a.dotmap-popup-btn:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    background: none !important;
    color: #202020 !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    transition: color 0.2s !important;
    line-height: 1 !important;
}
.dotmap-popup a.dotmap-popup-btn:hover {
    color: #007e4c !important;
    background: none !important;
    text-decoration: none !important;
}

/* Arrow character — plain SVG, no box */
.dotmap-popup .dotmap-popup-btn-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
}
.dotmap-popup .dotmap-popup-btn-arrow svg {
    display: block !important;
    color: currentColor !important;
    width: 14px !important;
    height: 14px !important;
}

/* Marker Popup */
.marker-popup {
    min-width: 240px;
    max-width: 300px;
    padding: 0;
}
.marker-popup .mp-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 4px 4px 0 0;
}
.marker-popup .mp-image img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
    display: block;
}
.marker-popup .mp-top {
    margin-bottom: 12px;
}
.marker-popup .mp-title {
    font-size: 14px;
    font-weight: 700;
    color: #202020;
    margin: 0;
    line-height: 1.3;
    display: inline;
}
.marker-popup .mp-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background-color: #fff;
    color: #007e4c;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid #007e4c;
    margin-left: 8px;
    vertical-align: middle;
}
.marker-popup .mp-info {
    margin-bottom: 12px;
}
.marker-popup .mp-info-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #555;
    line-height: 1.4;
    margin-bottom: 5px;
}
.marker-popup .mp-info-row:last-child {
    margin-bottom: 0;
}
.marker-popup .mp-info-icon {
    flex-shrink: 0;
    line-height: 1.4;
}
.marker-popup .mp-info-value {
    color: #555;
}
.marker-popup .mp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.marker-popup .mp-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    background-color: #007e4c;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.marker-popup .mp-btn {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background-color: #007e4c;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
}
.marker-popup .mp-btn:hover {
    background-color: #006b40;
}

.stats-row.alignwide {
    display: flex;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto;
}

.peta-stat-col {
    text-align: center;
}

.peta-stat-number {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    font-style: normal;
    color: #ffffff;
}

.peta-stat-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.28px;
    margin: 0;
    font-style: normal;
    color: #ffffff;
}

/* Activitas Section */
.activitas-section {
    min-height: auto;
    padding: 0;
    border: 8px solid #ffffff;
}

/* Activity Column Layout */
.activity-col {
    border: 8px solid #ffffff;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    background-color: #f2c744;
    position: relative;
}

.activity-col:last-child {
    border-right: 8px solid #ffffff;
}

.activity-col:nth-child(2) {
    background-color: #F8EDD9;
}

.activity-col:nth-child(3) {
    background-color: #FA744C;
}

/* Activity Column Header */
.activity-col-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 64px 64px 0;
    min-height: 104px;
}

.activity-col-label {
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    color: #202020;
    margin: 0;
}

.activity-col-nav {
    display: flex;
    gap: 24px;
}

.activity-col-nav-btn {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.activity-col-nav-btn:hover {
    transform: scale(1.1);
}

.activity-col-nav-btn svg {
    width: 100%;
    height: 100%;
}

/* Card Meta (Location + Date) */
.activity-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.activity-card-location,
.activity-card-date {
    font-family: 'Lato', sans-serif;
    font-size: 1em;
    font-weight: 300;
    color: #202020;
    margin: 0;
    letter-spacing: 0.54px;
}

.activity-card-dot {
    width: 6px;
    height: 6px;
    background-color: #202020;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Activity Header Bar — removed, label is now inside each slide */
.activity-header-bar {
    display: none;
}

.activity-title-new {
    display: none;
}

/* Card Container */
.activity-card-container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.activity-card-track {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}

/* Each slide */
.activity-card-slide {
    width: 100%;
    min-width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 48px 64px 64px !important;
    box-sizing: border-box;
}

/* Category label inside slide */
.activity-cat-label {
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    color: #202020;
    margin: 0;
}

/* Image area */
.activity-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0;
    flex-shrink: 0;
}

.activity-img-wrap img,
.activity-img-wrap .wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    display: block;
}

/* Arrow button on image */
.card-arrow-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 45px;
    height: 45px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 5;
    transition: transform 0.2s;
}

.card-arrow-btn:hover {
    transform: scale(1.1);
}

.card-arrow-btn svg {
    width: 16px;
    height: 16px;
}

/* Card body */
.activity-card-body {
    padding: 24px 0 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-card-title {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    color: #202020;
    margin: 0;
    letter-spacing: 0;
}

.activity-card-title a {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.activity-card-title a:hover {
    opacity: 0.8;
}

/* Pagination dots */
.activity-pagination {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    padding: 16px 64px 24px;
}

.activity-pagination .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(32, 32, 32, 0.25);
    cursor: pointer;
    transition: background-color 0.3s;
    border: none;
    flex-shrink: 0;
}

.activity-pagination .dot.active {
    background-color: #202020;
}

/* Activity card prev/next navigation - moved to column header */
    /* align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #202020;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
} */

.activity-nav-btn:hover {
    background-color: #000;
    transform: scale(1.05);
}

.activity-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.activity-nav-btn svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

.activity-nav-btn:disabled svg {
    fill: rgba(255, 255, 255, 0.6);
}

.activity-pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Sosok Pagination */
.sosok-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 40px 0;
    flex-wrap: wrap;
}
.sosok-pagination-btn {
    background-color: #007e4c;
    color: #fff;
}
.sosok-pagination-btn:hover:not([style*="opacity"]) {
    background-color: #e0e0e0;
}

.sosok-pagination-page:hover {
    background-color: #e0e0e0;
}
.sosok-pagination-current {
    background-color: #202020!important;
    color: #fff!important;
}
.sosok-pagination-ellipsis {
    color: #999;
    padding: 8px 4px;
    font-size: 14px;
}


/* Hide old activity styles */
.activity-card,
.activity-content,
.activity-header,
.activity-title,
/* .nav-arrows, */
.activity-image,
.activity-image > img,
.arrow-overlay,
.activity-location,
.activity-subtitle,
.activity-slider-inner,
.activity-slide-item,
.bg-yellow,
.bg-beige,
.bg-orange {
    display: none;
}

.ed-slider-nav:hover {
    opacity: 0.7;
}

.arrow-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.arrow-btn:hover {
    opacity: 0.7;
}

.arrow-btn img {
    display: block;
}

/* Artikel Section */
.artikel-section {
    padding: 60px 64px 64px;
}
.tagchecklist.tagchecklist-post_tag {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tag-chips-container {
    gap: 8px;
}
.tagchecklist.tagchecklist-post_tag a {
    display: inline-flex;
    align-items: center;
    background-color: #6c757d!important;
    color: #fff!important;
    border-radius: 50rem;
    font-size: 0.8em;
    gap: 8px;
    text-decoration: inherit;
    font-weight: normal;
    height: 38px;
    padding: 0 1.5rem;
}
.tagchecklist.tagchecklist-post_tag a:before {
    height: 0.9em;
}

@media (max-width: 768px) {
    .artikel-section {
        padding: 40px 16px 48px;
    }
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;
}

.nav-arrows.d-flex {
    display: flex;
    align-items: center;
    gap: 24px;
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.section-title {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    color: #202020;
    margin: 0;
}

.btn-outline {
    background-color: transparent;
    border: 2px solid #007e4c;
    color: #007e4c!important;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    padding: 12px 24px;
}

.btn-outline:hover {
    background-color: #F8EDD9;
    box-shadow: 4px 4px 12px 0 rgba(32, 32, 32, 0.15);
}

.featured-article {
    position: relative;
}

.featured-article-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.featured-article-slider .featured-article {
    display: none;
    width: 100%;
    animation: fadeIn 0.5s ease;
}
.featured-article-slider .featured-article img {
    width: 100%;
    max-height: 544px;
    object-fit: cover;
}

.featured-article-slider .featured-article.active {
    display: block;
}

.article-stats {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #007e4c;
    color: white;
    padding: 4px 16px;
    display: flex;
    gap: 16px;
    font-size: 18px;
    font-weight: 300;
}

.article-meta {
    margin: 16px 0;
    font-size: 18px;
    font-weight: 300;
    color: #202020;
}

.article-meta p {
    display: flex;
    align-items: center;
    gap: 16px;
}

.article-title {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.4;
    color: #202020;
}

.opinion-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.opinion-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.opinion-item img {
    width: 140px;
    height: 160px;
    object-fit: cover;
}

.opinion-content {
    flex: 1;
}

.opinion-date {
    font-size: 18px;
    font-weight: 300;
    color: #202020;
    margin-bottom: 8px;
}

.opinion-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #202020;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.opinion-author {
    font-size: 16px;
    font-weight: 300;
    color: #202020;
}


/* Artikel Terkini Section */
.artikel-terkini-section {
    padding: 128px 64px;
}

.artikel-terkini-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 48px;
}

.artikel-terkini-header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.artikel-terkini-title {
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #202020;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    margin: 0;
}

.btn-lihat-semuagreen {
    background-color: transparent;
    border: 2px solid #007e4c;
    color: #007e4c!important;
    padding: 12px 24px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-lihat-semuagreen:hover {
    background-color: #F8EDD9 !important;
    box-shadow: 4px 4px 12px 0 rgba(32, 32, 32, 0.15);
}

.artikel-terkini-section .section-header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.artikel-terkini-row {
    display: flex;
    gap: 64px;
}

.artikel-terkini-row > .col-md-4 {
    flex: 1;
    display: flex;
}

.artikel-terkini-card {
    display: flex;
    flex-direction: column;
    height: 600px;
    width: 100%;
}

.artikel-image-wrapper {
    position: relative;
    height: 304px;
    flex-shrink: 0;
}

.artikel-image-wrapper img {
    width: 100%;
    height: 304px;
    object-fit: cover;
}

.artikel-stats {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #007e4c;
    color: white;
    padding: 4px 16px;
    display: flex;
    gap: 16px;
    font-size: 18px;
    font-weight: 300;
}

.artikel-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 16px;
    padding-top: 24px;
}

.artikel-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 300;
    color: #202020;
}

.artikel-divider {
    color: #202020;
}

.artikel-date {
    white-space: nowrap;
    font-weight: 300;
    letter-spacing: 0.54px;
    color: inherit;
}

.artikel-title {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.4;
    color: #202020;
    margin: 0;
}

.artikel-excerpt {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #666;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.artikel-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    padding: 0 30px 30px;
}

.artikel-card:hover {
    transform: translateY(-4px);
    /* box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); */
    transition: all 0.3s ease;
}
/* .artikel-card:hover .artikel-card-body {
    transition: all 0.3s ease;
    padding-left: 24px !important;
    padding-right: 24px !important;

}
.artikel-card:hover .btn-selengkapa {
    transition: all 0.3s ease;
    padding: 0 24px 24px;
} */

.artikel-card-menu {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.artikel-card:hover .artikel-card-menu {
    opacity: 1;
    visibility: visible;
}

.artikel-card-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(32, 32, 32, 0.85);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
}

.artikel-card-menu-btn:hover {
    background: rgba(0, 126, 76, 0.9);
}

.artikel-card-menu-btn svg {
    width: 18px;
    height: 18px;
}

.artikel-card-menu-btn svg path {
    fill: #ffffff;
}

.artikel-card-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.artikel-card-menu-btn:focus + .artikel-card-menu-dropdown,
.artikel-card-menu-dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.artikel-card-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #202020;
    text-decoration: none;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.artikel-card-menu-item:hover {
    background: #f5f5f5;
}

.artikel-card-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.artikel-card-menu-item svg path,
.artikel-card-menu-item svg {
    stroke: #666;
    fill: none;
}

.artikel-card-menu-item:hover svg path,
.artikel-card-menu-item:hover svg {
    stroke: #007e4c;
    fill: none;
}

.artikel-card-menu-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.artikel-card-menu {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.artikel-card:hover .artikel-card-menu {
    opacity: 1;
    visibility: visible;
}

.artikel-card-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(32, 32, 32, 0.85);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
}

.artikel-card-menu-btn:hover {
    background: rgba(0, 126, 76, 0.9);
}

.artikel-card-menu-btn svg {
    width: 18px;
    height: 18px;
}

.artikel-card-menu-btn svg path {
    fill: #ffffff;
}

.artikel-card-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.artikel-card-menu-btn:focus + .artikel-card-menu-dropdown,
.artikel-card-menu-dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.artikel-card-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #202020;
    text-decoration: none;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.artikel-card-menu-item:hover {
    background: #f5f5f5;
}

.artikel-card-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.artikel-card-menu-item svg path,
.artikel-card-menu-item svg {
    stroke: #666;
    fill: none;
}

.artikel-card-menu-item:hover svg path,
.artikel-card-menu-item:hover svg {
    stroke: #007e4c;
    fill: none;
}

.artikel-card-menu-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.artikel-card-body {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
}

/* Terkini Carousel Styles */
.terkini-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.terkini-track {
    display: inline-flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease-in-out;
    gap: 24px;
    white-space: nowrap;
    width: inherit!important;
}

.terkini-card-wrapper {
    flex: 0 0 calc(33.333333% - 16px);
    max-width: calc(33.333333% - 16px);
    min-width: calc(33.333333% - 16px);
    box-sizing: border-box;
}

/* Terkini Carousel Responsive */
@media (max-width: 1024px) and (min-width: 769px) {
    .terkini-card-wrapper {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
        min-width: calc(50% - 12px);
    }
}

@media (max-width: 768px) {
    .terkini-card-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 100%;
    }
}

.terkini-card-wrapper .artikel-card {
    width: 100%;
    height: 100%;
    padding: 0;
}

/* Hide old slides - using track sliding instead */
.terkini-slide {
    display: none !important;
}
button.like-button.button-login.button-like {
    display: none !important;
}

/* Foto Carousel */
.foto-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.foto-track {
    display: inline-flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease-in-out;
    gap: 24px;
    white-space: nowrap;
    width: inherit!important;
}

.foto-card-wrapper {
    flex: 0 0 calc(33.333333% - 16px);
    max-width: calc(33.333333% - 16px);
    min-width: calc(33.333333% - 16px);
    box-sizing: border-box;
}

.foto-card-wrapper .photo-card {
    width: 100%;
    height: 100%;
}

/* Foto Carousel Responsive */
@media (max-width: 1024px) and (min-width: 769px) {
    .foto-card-wrapper {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
        min-width: calc(50% - 12px);
    }
}

@media (max-width: 768px) {
    .foto-card-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 100%;
    }
}

/* Video Carousel */
.video-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.video-track {
    display: inline-flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease-in-out;
    gap: 24px;
    white-space: nowrap;
    width: inherit!important;
}
.video-track h4 a,
.foto-track h4 a,
.terkini-track h4 a {
    white-space: normal;
}

.video-card-wrapper {
    flex: 0 0 calc(33.333333% - 16px);
    max-width: calc(33.333333% - 16px);
    min-width: calc(33.333333% - 16px);
    box-sizing: border-box;
}

.video-card-wrapper .video-card {
    width: 100%;
    height: 100%;
}

/* Video Carousel Responsive */
@media (max-width: 1024px) and (min-width: 769px) {
    .video-card-wrapper {
        flex:0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
        min-width: calc(50% - 12px);
    }
}

@media (max-width: 768px) {
    .video-card-wrapper {
        flex:0 0 100%;
        max-width: 100%;
        min-width: 100%;
    }
}

.artikel-img-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.artikel-img-wrapper img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border: 1px solid #cccccc77;
}
.artikel-img-wrapper .artikel-stats-badge img {height: 24px;}

.artikel-card:hover .artikel-img-wrapper img {
    transform: scale(1.04);
}

.artikel-stats-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #007e4c;
    color: #ffffff;
    padding: 8px 16px;
    display: flex;
    gap: 16px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    /* font-weight: 600; */
    border-radius: 0;
}

.artikel-stats-badge img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.artikel-stats-badge .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.artikel-meta {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #666;
    margin-bottom: 12px;
}

.artikel-meta p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.artikel-meta .artikel-date {
    color: #666;
    font-weight: 400;
}

.artikel-meta .artikel-author {
    color: #666;
    font-weight: 400;
}

.artikel-meta strong {
    color: #202020;
    font-weight: 700;
}

.artikel-dot {
    color: #999;
    font-size: 8px;
    line-height: 1;
}

.artikel-title-card {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.4;
    color: #202020;
    margin: 0 0 12px 0;
}

.artikel-title-card a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.artikel-title-card a:hover {
    color: #007e4c;
}

.artikel-excerpt {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #666;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.btn-selengkapa {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 0;
    transition: gap 0.2s ease, color 0.2s ease;
}

.btn-selengkapa:hover {
    color: #005a38;
    gap: 12px;
}

.btn-selengkapa:hover img {
    transform: translate(2px, -2px);
}

.btn-selengkapa img {
    transition: transform 0.2s ease;
}

.btn-selengkapnya {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: #202020;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-selengkapnya:hover {
    text-decoration: underline;
}

.article-card {
    margin-bottom: 48px;
}

.article-card img {
    width: 100%;
    height: 304px;
    object-fit: cover;
    margin-bottom: 24px;
}

.article-excerpt {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    color: #202020;
    margin-bottom: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.btn-read-more {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: #202020;
    text-decoration: none;
}

.btn-read-more:hover {
    text-decoration: underline;
}

/* Foto Section */
.foto-section {
    padding: 64px;
}

@media (max-width: 768px) {
    .foto-section {
        padding: 32px 16px;
    }
}

.photo-card {
    margin-bottom: 48px;
    position: relative;
}

.photo-card img {
    width: 100%;
    height: 304px;
    object-fit: cover;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .photo-card img {
        height: 220px;
    }
}

.photo-stats img {
    margin-bottom: 0;
}

.photo-stats {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #007e4c;
    color: white;
    padding: 4px 16px;
    display: flex;
    gap: 16px;
    font-size: 18px;
    font-weight: 300;
}

.photo-title {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.4;
    color: #202020;
    margin-bottom: 16px;
}

.photo-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.photo-author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.photo-author p {
    font-size: 16px;
    font-weight: 300;
    color: #202020;
    margin: 0;
}

/* Video Section */
.video-section {
    padding: 64px;
}

.video-card {
    margin-bottom: 48px;
}

.video-thumbnail {
    position: relative;
    margin-bottom: 24px;
}

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

.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.play-button a svg,
.play-button-overlay svg {
    width: 48px;
    height: 48px;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.play-button img {
    width: 48px;
    height: 48px;
}

.video-stats {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #007e4c;
    color: white;
    padding: 4px 16px;
    display: flex;
    gap: 16px;
    font-size: 18px;
    font-weight: 300;
}

.video-title {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.4;
    color: #202020;
    margin-bottom: 16px;
}

.video-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-author p {
    font-size: 16px;
    font-weight: 300;
    color: #202020;
    margin: 0;
}

/* BW On Top Section - Combined */
.bw-ontop-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}

.bw-ontop-section .sosok-title {
    color: #202020;
}

.bw-ontop-section .sosok-description {
    color: #202020;
}

/* .bw-ontop-section .btn-lihat-semuagreen {
    background-color: transparent;
    border: 2px solid #202020;
    color: #202020;
    width: fit-content;
} */

.bw-ontop-section .btn-lihat-semuagreen:hover {
    background-color: #007e4c;
    color: #f2c744;
}

.bw-ontop-main {
    display: flex;
    width: 100%;
}

.bw-ontop-inner {
    /* max-width: 1200px; */
    margin: 0 auto;
    /* padding: 0 32px; */
    display: flex;
    width: 100%;
}

.bw-ontop-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px;
    gap: 24px;
}

.bw-ontop-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sosok-title {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.4;
    color: #202020;
    margin: 0;
}

.sosok-description {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.54px;
    color: #202020;
    margin: 0;
}

.btn-lihat-semuagreen {
    background-color: transparent;
    border: 2px solid #007e4c;
    color: #007e4c;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    padding: 12px 24px;
    cursor: pointer;
    width: fit-content;
}

.btn-lihat-semuagreen:hover {
    background-color: #007e4c;
    color: white;
}

.bw-ontop-right {
    flex: 0 0 703px;
    display: flex;
    align-items: center;
}

.sosok-featured {
    position: relative;
    width: 100%;
    height: 460px;
}

.sosok-featured img {
    width: 100%;
    height: 460px;
    object-fit: cover;
}

.sosok-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #202020, rgba(32, 32, 32, 0));
    padding: 32px 64px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: white;
}

.sosok-overlay-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sosok-overlay-title {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.4;
    color: white;
    margin: 0;
}

.sosok-overlay-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.54px;
    color: white;
}

.sosok-divider {
    color: white;
}

.sosok-arrow {
    width: 45px;
    height: 45px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sosok-arrow img {
    width: 32px;
    height: 32px;
}

/* BW Rankings Section */
.bw-rankings-section {
    color: white;
    width: 100%;
    background-color: #007e4c;
}

.rankings-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 32px;
}

.rankings-header {
    display: flex;
    gap: 40px;
    align-items: center;
    padding-bottom: 48px;
}

.rankings-header-left {
    flex: 0 0 33.33%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rankings-label {
    font-style: normal;
    font-weight: 700;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    font-size: 14px;
    color: white;
    margin: 0;
}

.rankings-heading {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.4;
    color: white;
    margin: 0;
}

.rankings-header-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rankings-description {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: white;
    margin: 0;
}

.rankings-description strong {
    font-weight: 700;
}

.btn-join-ranking {
    background-color: #007e4c;
    border: 2px solid #f2c744;
    color: #f2c744;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    padding: 12px 24px;
    cursor: pointer;
    width: fit-content;
}

.btn-join-ranking:hover {
    background-color: #f2c744;
    color: #202020;
}

.rankings-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    min-height: 280px;
}

.ranking-skeleton {
    background-color: #00a865;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: ranking-pulse 1.5s ease-in-out infinite;
}

.ranking-skeleton::before {
    content: '';
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
}

.ranking-skeleton::after {
    content: '';
    width: 80%;
    height: 12px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.2);
}

@keyframes ranking-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.ranking-card {
    background-color: #00a865;
    padding: 24px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.ranking-card:hover {
    background-color: #00995c;
}

.ranking-avatar {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
}

.ranking-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #007e4c;
    font-size: 36px;
    font-weight: 900;
    font-family: 'Lato', sans-serif;
    color: #fff;
    letter-spacing: -1px;
    margin-bottom: 24px;
}

.ranking-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.btn {border-radius: 0}

.ranking-name {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.3;
    color: white;
    margin: 0;
}

.ranking-org {
    font-size: 12px;
    font-weight: 300;
    color: white;
    margin: 0;
}

.ranking-points {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: 24px;
}
.ranking-view-profile {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.1px;
}
.ranking-link {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.1px;
}
.current-points {
    background-color: #f2c744;
    color: #202020;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.56px;
    padding: 6px 12px;
    display: inline-block;
    align-self: center;
}

.year-points {
    font-size: 13px;
    font-weight: 300;
    color: white;
    margin: 0;
}

/* Acara Section */
.acara-section {
    padding: 50px 64px;
    color: white;
}

.acara-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    margin-bottom: 40px;
}

.acara-title {
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    color: white;
    margin: 0;
}

.acara-header .btn-outline-white {
    background-color: transparent;
    border: 2px solid white;
    color: white;
    padding: 12px 24px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.acara-header .btn-outline-white:hover {
    background-color: white;
    color: #dd5c35;
}

.acara-content-row {
    margin-top: 0;
}

.acara-image-wrapper {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.acara-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acara-featured-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(221, 92, 53, 0.9);
    color: #fff;
    padding: 12px 16px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.acara-featured-date,
.acara-featured-time {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
}

.agenda-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.agenda-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.agenda-date {
    background-color: #f2c744;
    width: 100px;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--wp--preset--spacing--10, 10px) 0.5rem;
    flex-shrink: 0;
    color: #202020;
}

.date-day {
    font-size: var(--wp--preset--font-size--large, large);
    font-weight: 700;
    letter-spacing: 0;
    display: block;
    line-height: 1;
    font-style: normal;
}

.date-month {
    font-size: var(--wp--preset--font-size--small, small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-top: 0;
}

.agenda-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agenda-title {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    color: white;
    margin: 0;
}

.agenda-title a {
    color: white;
    text-decoration: none;
}

.agenda-title a:hover {
    text-decoration: underline;
}

.agenda-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Lato', sans-serif;
    font-size: var(--wp--preset--font-size--small, small);
    line-height: 1.6;
    flex-wrap: wrap;
}
.agenda-meta .ranking-link {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.1px;
}

.agenda-time {
    font-style: normal;
    color: white;
    font-weight: 300;
}

.agenda-location {
    font-weight: 500;
    font-style: normal;
    color: white;
}

.agenda-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: white;
    display: inline-block;
    flex-shrink: 0;
}

.btn-selengkapa-white {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.btn-selengkapa-white:hover {
    text-decoration: underline;
}

.agenda-content p {
    font-size: 18px;
    font-weight: 300;
    color: white;
    margin-bottom: 8px;
}

.agenda-content a {
    color: white;
    text-decoration: none;
}

.agenda-content a:hover {
    text-decoration: underline;
}

/* Sosmed/Instagram Section */
.sosmed-section {
    padding: 80px 0 100px;
    margin-top: -4px;
}

.sosmed-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.sosmed-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.sosmed-heading {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 56px;
    font-weight: 700;
    color: #202020;
    margin: 0 0 20px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.sosmed-description {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    color: #202020;
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
}

.sosmed-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}

.sosmed-profile-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sosmed-profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid #e0e0e0;
}

.sosmed-profile-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.sosmed-profile-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sosmed-username {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #202020;
}

.sosmed-verified-badge {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sosmed-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #202020;
    color: #ffffff!important;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 20px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: 0;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.sosmed-follow-btn:hover {
    background-color: #404040;
    color: #ffffff;
    text-decoration: none;
}

.sosmed-follow-btn svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Instagram Slider — custom carousel, 6 items per slide (2 rows × 3 cols) */
.sosmed-slider-wrapper {
    position: relative;
    width: 100%;
    padding-top: 32px;
}

/* Divider line above slider content */
.sosmed-slider-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(32, 32, 32, 0.12);
}

.sosmed-feed-container {
    overflow: hidden;
}

/* Track: flex container for slides */
.sosmed-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100% !important;
    transition: transform 0.4s ease;
}

/* Slide: one viewport-width per slide */
.sosmed-slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Each item */
.sosmed-item {
    display: block;
    overflow: hidden;
    position: relative;
}

.sosmed-item-media {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
}

.sosmed-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

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

/* Gradient overlay with like count */
.sosmed-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 10px 12px;
    pointer-events: none;
}

.sosmed-item-likes {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* No posts placeholder */
.sosmed-no-posts {
    text-align: center;
    color: #999;
    padding: 40px 0;
    font-size: 14px;
}

/* Navigation arrows - matching nav-arrows.d-flex style */
.sosmed-slider-arrow {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.sosmed-slider-arrow:hover {
    opacity: 0.7;
}

.sosmed-slider-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.sosmed-slider-arrow--prev {
    left: 0;
    border-radius: 0 4px 4px 0;
}

.sosmed-slider-arrow--next {
    right: 0;
    border-radius: 4px 0 0 4px;
}

/* Slider dots */
.sosmed-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
}

.sosmed-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(32, 32, 32, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.sosmed-slider-dot.active {
    background-color: #202020;
}

.sosmed-slider-dot:hover {
    background-color: rgba(32, 32, 32, 0.5);
}

/* Responsive */
@media (max-width: 992px) {
    .sosmed-heading {
        font-size: 42px;
    }

    .sosmed-inner {
        padding: 0 32px;
    }
}

@media (max-width: 768px) {
    .sosmed-section {
        padding: 60px 0 80px;
    }

    .sosmed-heading {
        font-size: 32px;
    }

    .sosmed-description {
        font-size: 14px;
    }

    .sosmed-profile-row {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        margin-bottom: 40px;
    }

    /* 2 items per slide on mobile */
    .sosmed-slide {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }


    .sosmed-inner {
        padding: 0 20px;
    }

    .sosmed-profile-avatar {
        width: 48px;
        height: 48px;
    }

    .sosmed-profile-icon {
        width: 100%;
        height: 100%;
    }

    .sosmed-slider-arrow {
        display: none;
    }
    .bw-ontop-inner {
        flex-direction: column;
    }
    .sosok-overlay,
    .bw-ontop-left {
        padding: 40px 30px;
    }
    .bw-ontop-right {
        align-items: inherit;
        display: inherit;
    }
    .rankings-grid {
        overflow-x: auto;
        margin-left: -40px;
        margin-right: -40px;
        padding: 0 40px;
    }
}

/* Footer Section */
.footer-section {
    background-color: #f2c744;
    padding:64px;
    margin-top: -8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 60px;
    min-height: calc(100vh - 88px);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
    min-height: 500px;
}

.footer-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
    justify-content: center;
    padding: 60px 0;
    width: 100%;
}

.footer-cta .footer-title {
    font-family: 'Lato', sans-serif;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.3;
    color: #202020;
    text-align: center;
    margin: 0;
}

.footer-cta-buttons {
    display: flex;
    justify-content: center;
}

.btn-join-large {
    background-color: #f2c744;
    border: 4px solid #202020;
    color: #202020;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    padding: 24px 32px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-join-large:hover {
    background-color: #e0b63d;
    color: #202020;
}

.footer-contact {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
    color: #202020;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-contact-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    flex: 1;
}

.footer-address {
    flex: 1;
}

.footer-contact-label {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1.25px;
    color: #202020;
    margin: 0 0 4px 0;
}

.footer-contact p {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 300;
    font-style: normal;
    color: #202020;
    line-height: 1.6;
    letter-spacing: 0.54px;
    margin: 0;
}
.lang-active:after {
    content: none!important;
}
#header-row {display: none;}

/* Responsive Styles */
@media (max-width: 768px) {
    /* Menu Modal Responsive */
    .menu-modal {
        padding: 16px 24px;
    }

    .menu-modal-right {
        gap: 16px;
    }

    .language-selector {
        font-size: 12px;
    }

    .menu-nav {
        flex-direction: column;
        gap: 24px;
    }

    .menu-item {
        font-size: 32px;
    }

    .contact-btn {
        font-size: 18px;
        padding: 10px 20px;
    }

    /* Footer Responsive */
    .footer-section {
        padding: 0 30px;
        gap: 48px;
    }

    .footer-cta .footer-title {
        font-size: 32px;
    }

    .footer-cta {
        gap: 40px;
    }

    .footer-contact {
        flex-direction: column;
        gap: 32px;
    }

    .footer-contact-item {
        flex-basis: 100% !important;
    }

    .footer-address {
        width: 100%;
    }

    .banner-section {
        padding: 60px 30px 100px;
        min-height: 100dvh;
    }

    .banner-title {
        font-size: 28px;
    }

    .banner-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .peta-section {
        padding: 30px;
        min-height: auto;
    }

    .stats-row {
        flex-direction: column;
        gap: 24px;
    }

    .activity-col {
        border-right: none;
        border-bottom: 5px solid #ffffff;
        min-height: 400px;
    }

    .activity-col:last-child {
        border-bottom: none;
    }

    .activity-col:nth-child(2) {
        background-color: #F8EDD9;
    }

    .activity-col:nth-child(3) {
        background-color: #FA744C;
    }

    .activity-col-header {
        padding: 24px;
    }

    .activity-col-label {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .activity-card-slide {
        padding: 0 24px 24px !important;
    }

    .activity-card-title {
        font-size: 16px;
    }

    .activity-card-location,
    .activity-card-date {
        font-size: 1em;
    }

    .card-arrow-btn {
        width: 36px;
        height: 36px;
        top: 12px;
        right: 12px;
    }

    .card-arrow-btn svg {
        width: 14px;
        height: 14px;
    }

    .peta-section {
        padding: 30px 30px 40px;
    }

    .artikel-section,
    .artikel-terkini-section,
    .foto-section,
    .video-section {
        padding: 40px 30px;
    }

    .artikel-terkini-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 32px;
    }

    .artikel-terkini-header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .opinion-item {
        flex-direction: column;
    }

    .opinion-item img {
        width: 100%;
        height: auto;
    }

    .rankings-row {
        flex-direction: column;
        gap: 24px;
    }
    .rankings-header {
        flex-direction: column;
    }
    .ranking-card {
        width: 50vw;
    }
    #warrior-hero-zone {
        padding-bottom: 100px;
    }

    .acara-section {
        padding: 30px;
    }

    .acara-content-row .col-md-5,
    .acara-content-row .col-md-7 {
        width: 100%;
    }

    .acara-image-wrapper {
        height: 300px;
    }

    .agenda-item {
        flex-direction: row;
    }

    .instagram-section {
        padding: 60px 30px;
    }

    .instagram-feed {
        flex-direction: column;
        gap: 24px;
    }

    .footer-section {
        padding: 0 30px 42px;
        gap: 48px;
    }

    .footer-cta .footer-title {
        font-size: 32px;
    }

    .footer-cta {
        gap: 40px;
    }

    .footer-contact {
        flex-direction: column;
        gap: 32px;
    }

    .footer-contact-item {
        flex-basis: 100% !important;
    }

}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-48 {
    margin-bottom: 48px;
}

.gap-8 {
    gap: 8px;
}

.gap-16 {
    gap: 16px;
}

.gap-24 {
    gap: 24px;
}

.gap-32 {
    gap: 32px;
}

.gap-48 {
    gap: 48px;
}

/* SVG Icon Styles */
.btn-read-more img,
.btn-profile img,
.agenda-content a img {
    margin-left: 6px;
    vertical-align: middle;
}

.nav-arrows img,
.nav-arrows button {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.nav-arrows img:hover,
.nav-arrows button:hover {
    opacity: 0.7;
}

.article-stats span img,
.video-stats span img,
.photo-stats span img {
    vertical-align: middle;
    margin-right: 4px;
    width: 16px;
    height: 16px;
}

.article-stats,
.video-stats,
.photo-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.article-stats span,
.video-stats span,
.photo-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Verified badge */
.verified img {
    vertical-align: middle;
}

/* Profile overlay arrow */
.arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .btn-read-more img,
    .btn-profile img,
    .agenda-content a img {
        width: 12px;
        height: 12px;
    }

    .nav-arrows img {
        width: 20px;
        height: 20px;
    }

    .play-button {
        width: 40px;
        height: 40px;
    }

    .play-button img {
        width: 20px;
        height: 20px;
    }

    /* Artikel Terkini Mobile */
    .terkini-card-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 100%;
    }

    .terkini-card-wrapper .artikel-card {
        margin-bottom: 24px;
    }

    .artikel-terkini-title {
        font-size: 20px;
    }

    .artikel-img-wrapper {
        height: 220px;
    }

    .artikel-img-wrapper img {
        height: 220px;
    }

    .artikel-title-card {
        font-size: 20px;
    }

    .artikel-excerpt {
        font-size: 15px;
        -webkit-line-clamp: 3;
    }
}

/* ============================================
   Single Post / Archive / Taxonomy Styles
   ============================================ */

/* --- Single Post Hero --- */
.single-post-hero {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
}
.single-post-hero-image {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
.single-post-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.single-post-hero-overlay {
    position: relative;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
    width: 100%;
    padding: 60px 0 40px;
}
.single-post-hero-content {
    padding: 0 15px;
}
.single-post-type-label {
    display: inline-block;
    background-color: #f2c744;
    color: #202020;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.single-post-title {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 36px;
    color: #fff;
    margin: 0 0 15px;
    line-height: 1.2;
}
.single-post-meta {
    color: #fff;
    font-size: 14px;
}
.single-post-meta .single-post-sep {
    margin: 0 8px;
}
.single-post-meta img {
    vertical-align: middle;
    margin-right: 4px;
}

/* --- Single Post Body --- */
.single-post-body {
    padding: 60px 0;
}

/* Meta bars */
.single-meta-bar,
.single-event-meta-bar,
.single-peta-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8edd9;
    border-radius: 8px;
}
.single-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 150px;
}
.single-meta-item .meta-icon {
    font-size: 20px;
    line-height: 1;
}
.single-meta-item .meta-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #666;
    margin: 0 0 2px;
    letter-spacing: 0.5px;
}
.single-meta-item .meta-value {
    font-size: 14px;
    font-weight: 700;
    color: #202020;
    margin: 0;
}

/* Single post content typography */
.single-post-content {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
}
.single-post-content p {
    margin-bottom: 20px;
}
.single-post-content h1,
.single-post-content h2,
.single-post-content h3,
.single-post-content h4,
.single-post-content h5,
.single-post-content h6 {
    font-family: 'TRY Vesterbro', sans-serif !important;
    margin: 30px 0 15px;
    color: #202020;
    line-height: 1.3;
}
.single-post-content h1 { font-size: 2em; }
.single-post-content h2 { font-size: 1.75em; }
.single-post-content h3 { font-size: 1.5em; }
.single-post-content h4 { font-size: 1.25em; }
.single-post-content ul,
.single-post-content ol {
    margin: 0 0 20px 20px;
    padding-left: 10px;
}
.single-post-content li {
    margin-bottom: 8px;
    line-height: 1.6;
}
.single-post-content ul {
    list-style-type: disc;
}
.single-post-content ol {
    list-style-type: decimal;
}
.single-post-content a {
    color: #0066cc !important;
    text-decoration: underline;
}
.single-post-content a:hover {
    color: #004499 !important;
}

/* Opini author box */
.single-opini-author-box {
    background-color: #f8edd9;
    padding: 15px 20px;
    border-left: 4px solid #f2c744;
    margin-bottom: 25px;
    border-radius: 0 8px 8px 0;
}
.opini-author-info {
    margin: 0;
    font-size: 15px;
}

/* Video/Foto credits */
.single-video-credit,
.single-foto-caption,
.single-foto-credit {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

/* Peta map */
.single-peta-map {
    margin: 30px 0;
    border-radius: 8px;
    overflow: hidden;
}

/* Share bar */
.share-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 40px 0;
    flex-wrap: wrap;
}
.share-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    margin-right: 5px;
}
.share-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.share-btn:hover { opacity: 0.85; color: #fff; }
.share-btn-fb { background-color: #3b5998; }
.share-btn-tw { background-color: #1da1f2; }
.share-btn-wa { background-color: #25d366; }

/* Article card body content */
.article-card-body {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
}
.article-card-body p {
    margin-bottom: 20px;
}
.article-card-body h2,
.article-card-body h3,
.article-card-body h4,
.article-card-body h5,
.article-card-body h6 {
    font-family: 'TRY Vesterbro', sans-serif !important;
    margin: 30px 0 15px;
    color: #202020;
    line-height: 1.3;
}
.article-card-body h1 {
    font-family: 'TRY Vesterbro', sans-serif !important;
    margin: 30px 0 15px;
    color: #202020;
    font-size: 2em;
    line-height: 1.3;
}
.article-card-body h2 { font-size: 1.75em; }
.article-card-body h3 { font-size: 1.5em; }
.article-card-body h4 { font-size: 1.25em; }
.article-card-body ul,
.article-card-body ol {
    margin: 0 0 20px 20px;
    padding-left: 10px;
}
.article-card-body li {
    margin-bottom: 8px;
    line-height: 1.6;
}
.article-card-body ul {
    list-style-type: disc;
}
.article-card-body ol {
    list-style-type: decimal;
}
.article-card-body a {
    color: #0066cc !important;
    text-decoration: underline;
}
.article-card-body a:hover {
    color: #004499 !important;
}

/* Custom image figure */
.custom-image-figure {
    margin: 30px 0;
}
.custom-image-figure img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Related posts */
/* .related-posts {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid #f2c744;
} */
.related-posts-title {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 22px;
    margin-bottom: 25px;
}
.related-posts-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.related-post-item {
    flex: 1;
    min-width: 200px;
    max-width: 33%;
}
.related-post-thumb {
    overflow: hidden;
    margin-bottom: 10px;
}
.related-post-thumb img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    transition: transform 0.3s;
}
.related-post-thumb:hover img { transform: scale(1.05); }
.related-post-info .related-post-date {
    font-size: 12px;
    color: #888;
    margin: 0 0 5px;
}
.related-post-info h4 {
    font-size: 15px;
    margin: 0;
    font-family: 'TRY Vesterbro', sans-serif !important;
}
.related-post-info h4 a {
    color: #202020;
    text-decoration: none;
}
.related-post-info h4 a:hover { color: #007e4c; }

/* --- Archive Page --- */
.archive-page {
    padding: 60px 0;
}
.archive-header {
    padding: 40px 0 30px;
    background-color: #f2c744;
    margin-bottom: 40px;
}
.archive-title {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 36px;
    color: #202020;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.archive-content {
    padding: 0 15px;
}
.archive-card-col {
    margin-bottom: 30px;
}
.archive-pagination {
    display: flex;
    justify-content: space-between;
    padding: 30px 15px;
    clear: both;
}
.archive-pagination a {
    padding: 8px 20px;
    background-color: #f2c744;
    color: #202020;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
}
.archive-no-results {
    text-align: center;
    font-size: 18px;
    color: #888;
    padding: 60px 0;
}

/* Peta card in archive */
.peta-card {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    height: 100%;
}
.peta-card-title {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 18px;
    margin: 0 0 8px;
}
.peta-card-title a { color: #202020; text-decoration: none; }
.peta-card-title a:hover { color: #007e4c; }
.peta-card-location {
    font-size: 13px;
    color: #666;
    margin: 0 0 10px;
}
.peta-card-excerpt {
    font-size: 14px;
    color: #555;
    margin: 0;
}

/* --- Taxonomy Page --- */
.taxonomy-page {
    padding: 0 0 60px;
}
.taxonomy-content>.row {
    margin: 0 -45px;
}
.taxonomy-content .single-post-content .banner-bg,
.taxonomy-content .single-post-content .footer-container {
    display: none;
}
.taxonomy-content .single-post-content .margin-auto {
    width: inherit!important;
}
.taxonomy-header {
    padding: 50px 0 35px;
    background-color: #007e4c;
    margin-bottom: 40px;
}
.taxonomy-label {
    font-size: 13px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin: 0 0 5px;
    letter-spacing: 1px;
}
.taxonomy-title {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 36px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}
.taxonomy-content {
    padding: 60px;
}
.taxonomy-no-results {
    text-align: center;
    font-size: 18px;
    color: #888;
    padding: 60px 0;
}

/* ============================================
   Sosok Hero Banner (matches Warrior Detail style)
   ============================================ */
.sosok-hero-banner {
    background-color: #f2c744;
    padding: 128px 64px 40px;
    margin: 0;
    width: 100%;
}

.sosok-hero-inner {
    display: flex;
    flex-direction: column;
    padding: 0;
    max-width: none;
}

.sosok-hero-label {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    color: rgba(32, 32, 32, 0.7);
    margin: 0 0 8px;
    letter-spacing: 1px;
}

.sosok-hero-title {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: #202020;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
}

/* ============================================
   Single Photo Hero (matches sosok-hero-banner)
   ============================================ */
.single-photo-hero {
    background-color: #f2c744;
    background-size: cover;
    background-position: center;
    padding: 128px 64px 40px;
    margin: 0;
    width: 100%;
}

.single-photo-hero-content {
    display: flex;
    flex-direction: column;
    max-width: none;
}

.single-photo-type-label {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    color: rgba(32, 32, 32, 0.7);
    margin: 0 0 8px;
    letter-spacing: 1px;
}

.single-photo-title {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: #202020;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
}

.single-photo-meta {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #202020;
}

.single-photo-meta a {
    color: #202020;
}

.single-photo-meta a:hover {
    text-decoration: underline;
}

.single-photo-date,
.single-photo-author {
    color: #202020;
}

.single-photo-sep {
    margin: 0 10px;
    color: #202020;
}

.single-photo-views {
    color: #202020;
}

.single-photo-like-btn {
    color: #202020 !important;
}

.single-photo-like-btn:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .single-photo-hero {
        padding: 100px 30px 30px;
    }
    .single-photo-title {
        font-size: 32px;
    }
}

.fep-menu-toggle .fep-button{
    background: transparent;
    color: #202020;
    font-weight: 300;
}
.fep-menu-toggle .fep-button-active {
    color: #fff!important;
    border-radius: 0;
}

/* --- FEP Message Table --- */
.fep-messagebox-search-form-div {
    margin-bottom: 16px;
}
.fep-messagebox-search-form-div #fep-messagebox-search-form {
    display: flex;
    max-width: 360px;
}
.fep-messagebox-search-form-field {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid #ddd;
    font-size: 14px;
    background: #fff;
    transition: 300ms border-color;
}
.fep-messagebox-search-form-field:focus {
    border-color: var(--primary-color);
    outline: none;
}
/* --- FEP Message Table Styling --- */
.fep-message-table.form {
}
.fep-action-table {
    margin-bottom: 20px;
}
.fep-action-table > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.fep-bulk-action select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    min-width: 160px;
}
.fep-action-table .fep-button {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: 300ms opacity;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.fep-action-table .fep-button::before {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-send' viewBox='0 0 16 16'%3E%3Cpath d='M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
.fep-action-table .fep-button:hover {
    opacity: 0.85;
}
.fep-menu-toggle .fep-button:hover {
    border-radius: 0!important;
    color: #fff!important;
    font-weight: normal!important;

}
.fep-cb-check-uncheck-all-div {
    margin-bottom: 12px;
    font-size: 14px;
}
.fep-cb-check-uncheck-all-div label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.fep-table.fep-odd-even {
    border: 1px solid #efefef;
    border-radius: 8px;
    overflow: hidden;
}
/* Table Row - Grid Layout */
.fep-table-row {
    display: grid!important;
    grid-template-columns: 40px 56px minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 300ms ease;
}
.fep-table-row:last-child {
    border-bottom: none;
}
.fep-table-row-unread {
    background: #f8fbff;
}
.fep-table-row:hover {
    background: #f5f9ff;
}
/* Column Styling */
.fep-column {
    min-width: 0;
    word-break: break-word;
}
.fep-column-fep-cb {
    display: flex;
    align-items: center;
    justify-content: center;
}
.fep-column-fep-cb input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}
.fep-column-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fep-column-avatar .fep-avatar-p-90,
.fep-column-avatar .fep-avatar-p-120 {
    width: 48px;
    height: 48px;
}
.fep-column-avatar img.avatar,
.fep-column-avatar .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.fep-column-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fep-message-author {
    font-weight: 600;
    font-size: 14px;
    color: #202020;
}
.fep-message-date {
    font-size: 12px;
    color: #888;
}
.fep-column-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fep-column-title a {
    color: #202020;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    display: block;
    word-break: break-word;
}
.fep-column-title a:hover {
    color: var(--primary-color);
}
.fep-strong a,
.fep-column-title a.fep-strong {
    font-weight: 700;
}
.fep-unread-classp {
    display: inline-block;
}
.fep-unread-class {
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.fep-message-excerpt {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fep-column .fep-message-hide {
    display: none !important;
}
select.fep-filter {
    padding: 8px 12px;
    border: 1px solid #ddd;
    font-size: 14px;
    background: #fff;
    min-width: 140px;
}
.fep-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}
.fep-pagination a,
.fep-pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 50% !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: #f5f5f5 !important;
    color: #777 !important;
    border: none !important;
    transition: all 300ms ease;
}
.fep-pagination a:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}
.fep-pagination > .active > a,
.fep-pagination > .active > span {
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* Tablet Responsive */
@media (max-width: 1024px) and (min-width: 769px) {
    .fep-message-table.form {
        padding: 20px;
        border-radius: 10px;
    }
    .fep-table-row {
        grid-template-columns: 36px 48px 1fr 1.5fr;
        gap: 12px;
        padding: 14px 18px;
    }
    .fep-message-author {
        font-size: 13px;
    }
    .fep-message-date {
        font-size: 11px;
    }
    .fep-column-title a {
        font-size: 14px;
    }
    .fep-message-excerpt {
        font-size: 12px;
    }
    .fep-bulk-action select,
    .fep-action-table .fep-button,
    select.fep-filter {
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .sosok-hero-banner { padding: 100px 30px 30px; }
    .sosok-hero-title { font-size: 32px; }
    .single-post-body {
        padding: 32px
    }
    .header {
        padding: 24px 30px;
    }
    .taxonomy-content {
        padding: 32px;
    }
    .fep-messagebox-search-form-div {
        margin-bottom: 16px;
    }
    .fep-messagebox-search-form-div #fep-messagebox-search-form {
        max-width: 100%;
    }
    .fep-messagebox-search-form-field {
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
    }
    .fep-message-table.form {
        padding: 0;
        border-radius: 10px;
        margin-top: 16px;
        border: none;
        background: transparent;
    }
    .fep-action-table {
        margin-bottom: 16px;
        background: #fff;
        padding: 16px;
        border-radius: 10px;
        border: 1px solid #efefef;
    }
    .fep-action-table > div {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .fep-bulk-action select,
    .fep-action-table .fep-button,
    select.fep-filter {
        width: 100%;
        min-width: 0;
        padding: 12px 14px;
        font-size: 14px;
        border-radius: 8px;
    }
    .fep-cb-check-uncheck-all-div {
        background: #fff;
        padding: 14px 16px;
        border-radius: 10px;
        margin-bottom: 12px;
        border: 1px solid #efefef;
    }
    /* Table Container */
    #fep-table,
    .fep-table.fep-odd-even {
        border: none;
        border-radius: 0;
        overflow: visible;
    }
    /* Message Row - Full Width Card */
    .fep-table-row {
        display: flex!important;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        padding-right: 48px;
        margin-bottom: 8px;
        background: #fff;
        border-radius: 10px;
        border: 1px solid #f0f0f0;
        position: relative;
        text-align: left;
    }
    .fep-table-row:last-child {
        border-bottom: 1px solid #f0f0f0;
    }
    .fep-table-row-unread {
        background: #fff;
        border-left: 4px solid var(--primary-color);
    }
    /* Checkbox - Absolute Position */
    .fep-column-fep-cb {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 2;
    }
    .fep-column-fep-cb input[type="checkbox"] {
        width: 20px;
        height: 20px;
        accent-color: var(--primary-color);
    }
    /* Avatar */
    .fep-column-avatar {
        display: none;
    }
    /* Author & Date - Horizontal Layout */
    .fep-column-author {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
    }
    .fep-message-author {
        font-size: 14px;
        font-weight: 700;
        color: #333;
    }
    .fep-message-date {
        font-size: 12px;
        color: #999;
    }
    .fep-message-date::before {
        content: "•";
        margin-right: 8px;
        color: #ddd;
    }
    /* Title & Excerpt */
    .fep-column-title {
        gap: 8px;
    }
    .fep-column-title a {
        font-size: 15px;
        font-weight: 600;
        color: #202020;
        line-height: 1.4;
        padding-right: 40px;
    }
    .fep-unread-classp {
        display: inline;
        margin-left: 8px;
    }
    .fep-unread-class {
        font-size: 10px;
        padding: 3px 8px;
    }
    .fep-message-excerpt {
        font-size: 13px;
        color: #666;
        line-height: 1.5;
        -webkit-line-clamp: 2;
    }
    /* Pagination */
    .fep-pagination {
        flex-wrap: wrap;
        gap: 6px;
        padding: 16px;
        background: #fff;
        border-radius: 10px;
        margin-top: 16px;
        border: 1px solid #efefef;
    }
    .fep-pagination a,
    .fep-pagination > li > span {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
        padding: 0 8px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .fep-message-table.form {
        border-radius: 0;
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
    }
    .fep-action-table,
    .fep-cb-check-uncheck-all-div {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .fep-table-row {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-bottom: 0;
    }
}

/* --- Event full width in archive --- */
.archive-event-full {
    margin-bottom: 15px;
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
    /* .terkini-card-wrapper {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
        padding: 0 10px;
    } */

    .artikel-img-wrapper {
        height: 240px;
    }

    .artikel-img-wrapper img {
        height: 240px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .single-post-title {
        font-size: 24px;
    }
    .single-post-hero {
        min-height: 280px;
    }
    .single-meta-bar,
    .single-event-meta-bar,
    .single-peta-meta-bar {
        flex-direction: column;
        gap: 15px;
    }
    .related-post-item {
        max-width: 100%;
    }
    .related-posts-grid {
        flex-direction: column;
    }
    .archive-title,
    .taxonomy-title {
        font-size: 24px;
    }
    .single-post-body {
        padding: 32px 15px;
    }
    .header {
        padding: 24px 32px;
    }
    .taxonomy-content {
        padding: 32px;
    }
}

/* ============================================
   BW List Modal (Stats Detail)
   ============================================ */
.bw-list-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.bw-list-modal.active {
    opacity: 1;
    visibility: visible;
}
.bw-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}
#bw-list-modal .bw-modal-card {
    position: relative;
    background: #f2c744;
    width: 800px;
    max-width: 90vw;
    max-height: 85vh;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
#bw-list-modal.active .bw-modal-card {
    transform: translateY(0);
}
#bw-list-modal .bw-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#bw-list-modal .bw-modal-title {
    margin: 0;
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #202020;
    line-height: 1.4;
}
#bw-list-modal .bw-modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #202020;
    transition: color 0.2s;
}
#bw-list-modal .bw-modal-close:hover { opacity: 0.7; }
#bw-list-modal .bw-list-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    flex: 1;
}
#bw-list-modal .bw-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#bw-warriors-list {
    margin-top: 12px;
    margin-left: 0;
}
.bw-list-content .bw-list {
    margin-left: 0;
    margin-top: 14px;
}
.bw-list-content .overflow-auto {
    margin: 14px 0;
}
.bw-list-content .bw-list-search-wrap input {
    background: transparent;
    padding: 8px;
    border: 1px solid #6e5f30;
}
#bw-list-modal .bw-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    border-bottom: none;
}
#bw-list-modal .bw-list-item:last-child { border-bottom: none; }
#bw-list-modal .bw-list-thumb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
#bw-list-modal .bw-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#bw-list-modal .bw-list-thumb img.wp-post-image {
    display: inherit;
}
#bw-list-modal .bw-list-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#bw-list-modal .bw-list-name {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #202020;
    letter-spacing: 0.32px;
    line-height: 1;
}
#bw-list-modal .bw-list-meta {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #000;
    letter-spacing: 0.16px;
    line-height: 1.6;
}

/* Modal Pagination */
.bw-list-pagination {
    margin-top: auto;
    padding-top: 16px;
}
.bw-modal-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}
.bw-modal-pagination-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bw-modal-pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bw-modal-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50rem !important;
    background: transparent;
    color: #202020;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    border: 0;
}
.bw-modal-pagination-btn:hover:not(.disabled) {
    background: #e8dca8;
}
.bw-modal-pagination-btn.disabled {
    opacity: 0.4;
    cursor: default;
}
.sosok-pagination span,
.sosok-pagination a,
.bw-modal-pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 50rem!important;
    background: transparent;
    color: #202020;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s;
}
.bw-modal-pagination-page:hover:not(.active) {
    background: #e8dca8;
}
.bw-modal-pagination-page.active {
    background: #202020;
    color: #fff;
}
.bw-modal-pagination-ellipsis {
    color: #6e5f30;
    padding: 0 4px;
    font-size: 14px;
}
.bw-list-pagination.loading .bw-modal-pagination-btn,
.bw-list-pagination.loading .bw-modal-pagination-page {
    pointer-events: none;
    opacity: 0.5;
}

/* Clickable stats */
.peta-stat-clickable {
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.2s;
}
.peta-stat-clickable:hover { opacity: 0.8; }

/* Hide bottom plugin bar (Load more, etc) */
[id^="sbi"] .sbi-load-more,
[id^="sbi"] .sbi_btn,
#sb_instagram .sbi_load_more,
.js_wpr_waypoints,
.wpr-hide-frontend,
.perfmatters-loading {
    display: none !important;
}

/* ================================================
   Warrior Profile Page — New Design (single-warrior.php)
   ================================================ */

/* Avatar/layout tokens — single source of truth for all
   overlap, spacing, and sizing calculations              */
:root {
    --warrior-avatar-size:    200px;
    --warrior-avatar-overlap: 60px;
    --warrior-header-h:       88px;
    --warrior-sidebar-w:      260px;
    --warrior-gap:            48px;
    --warrior-max-w:          1100px;
    --warrior-h-pad:          24px;
    /* Minimum hero content height so avatar top always clears the header.
       avatar-top-from-hero-bottom = avatar-size - avatar-overlap = 140px.
       We add 24px breathing room → hero padding-bottom = 164px.           */
    --warrior-hero-pb:        164px;
}

/* [wp-warrior-page] Root page wrapper */
.warrior-profile-page-new {
    background: #fff;
    padding-top: 0;
    padding-bottom: 0;
}

/* ---- Hero Zone ---- */

/* [wp-warrior-hero-zone] Relative container holding banner + overlapping avatar */
.warrior-hero-zone {
    position: relative;
    padding-bottom: var(--warrior-avatar-overlap);
}

/* [wp-warrior-hero-banner] Full-width yellow banner */
.warrior-hero-new {
    background: #f2c744;
    padding-top: 128px;
    /* Tall enough so the avatar's top edge clears the fixed header */
    padding-bottom: var(--warrior-hero-pb);
    width: 100%;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* [wp-warrior-hero-layout] Inner row: avatar-col spacer + name-col */
.warrior-hero-layout {
    max-width: var(--warrior-max-w);
    margin: 0 auto;
    padding: 0 var(--warrior-h-pad);
    display: flex;
    /* Align name to the top of the hero content area, matching the avatar top */
    align-items: flex-start;
    gap: var(--warrior-gap);
}

/* [wp-warrior-hero-avatar-col] Invisible spacer matching sidebar width
   so the name aligns with the right content column                    */
.warrior-hero-avatar-col {
    flex: 0 0 var(--warrior-sidebar-w);
    min-width: var(--warrior-sidebar-w);
}

/* [wp-warrior-hero-name-col] Name + badge column */
.warrior-hero-name-col {
    flex: 1;
    min-width: 0;
}

/* [wp-warrior-hero-name] Name heading */
.warrior-hero-name-new {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 44px;
    font-weight: 900;
    color: #202020;
    margin: 0;
    text-transform: inherit!important;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 14px;
    line-height: 1.1;
}

/* [wp-warrior-verified] Verified checkmark badge */
.warrior-verified-badge {
    flex-shrink: 0;
}

/* [wp-warrior-avatar-overlap] Avatar straddling the hero bottom edge */
.warrior-avatar-overlap {
    position: absolute;
    /* Align with the sidebar column inside the constrained max-width */
    left: calc((100% - min(var(--warrior-max-w), 100%)) / 2 + var(--warrior-h-pad));
    bottom: 0;
    width: var(--warrior-sidebar-w);
    display: flex;
    justify-content: center;
    z-index: 10;
}

/* [wp-warrior-avatar-wrap] Circular avatar container */
.warrior-sidebar-avatar-wrap-new {
    width: var(--warrior-avatar-size);
    height: var(--warrior-avatar-size);
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #fff;
    background: #e8e8e8;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    flex-shrink: 0;
}

/* [wp-warrior-avatar-img] Avatar photo */
.warrior-sidebar-avatar-new {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* [wp-warrior-avatar-initials] Initials fallback */
.warrior-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #afafaf;
    color: #fff;
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 64px;
    font-weight: 900;
    letter-spacing: 2px;
    user-select: none;
}

/* ---- 2-Column Body Grid ---- */

/* [wp-warrior-body] Main two-column grid */
.warrior-body-new {
    display: grid;
    grid-template-columns: var(--warrior-sidebar-w) 1fr;
    max-width: var(--warrior-max-w);
    margin: 0 auto;
    /* No bottom padding — footer sits flush with no white gap */
    padding: 0 var(--warrior-h-pad) 0;
    gap: var(--warrior-gap);
    align-items: start;
}

/* ---- Left Sidebar ---- */

/* [wp-warrior-sidebar] Sticky left sidebar */
.warrior-sidebar-new {
    position: sticky;
    top: calc(var(--warrior-header-h) + 16px);
}

/* [wp-warrior-sidebar-inner] Inner flex column */
.warrior-sidebar-inner-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}

/* [wp-warrior-avatar-spacer] Pushes sidebar content below the overlapping avatar */
.warrior-avatar-spacer {
    height: calc(var(--warrior-avatar-size) / 2 - var(--warrior-avatar-overlap) + 20px);
    width: 100%;
    flex-shrink: 0;
}

/* [wp-warrior-avatar-img] Avatar photo */
.warrior-sidebar-avatar-new {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* [wp-warrior-avatar-initials] Initials fallback when no avatar photo */
.warrior-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #007e4c;
    color: #fff;
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 56px;
    font-weight: 900;
    letter-spacing: 2px;
    user-select: none;
}

/* [wp-warrior-org] Organisation text */
.warrior-sidebar-org {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #555;
    margin-bottom: 16px;
    line-height: 1.4;
}

/* [wp-warrior-socials] Social icon row */
.warrior-sidebar-socials {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* [wp-warrior-social-link] Individual social icon button */
.warrior-social-link-new {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
    color: #fff!important;
    background-color: #017e4d!important;
}
.group-btn {
    display: flex;
    gap: 16px;
}
.group-btn .btn {
    width: 136px;
    display: inline-flex;
    justify-content: center;
}
.group-btn .btn:hover {
    background: #F8EDD9!important;
}

.warrior-social-link-new[data-social="facebook"]  { background: #1877f2; }
.warrior-social-link-new[data-social="twitter"]   { background: #000; }
.warrior-social-link-new[data-social="instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.warrior-social-link-new[data-social="youtube"]   { background: #ff0000; }

.warrior-social-link-new:hover {
    opacity: 0.85;
    transform: scale(1.08);
}

/* [wp-warrior-info-block] Poin + Nomor anggota info block */
.warrior-sidebar-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

/* [wp-warrior-info-item] Single info row (label + value) */
.warrior-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* [wp-warrior-info-label] Green label above value */
.warrior-info-item .warrior-info-label {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #555;
}

/* [wp-warrior-info-value] Bold value text */
.warrior-info-item .warrior-info-value {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 32px;
    font-weight: normal;
    color: #017e4d;
    padding: 14px 0;
    line-height: 1;
}
.warrior-info-value.warrior-email {
    font-size: 16px;
}

/* [wp-warrior-btn-message] Kirim pesan CTA button */
.warrior-btn-message {
    display: inline-block;
    padding: 8px 24px;
    border: 1px solid #555!important;
    background: transparent;
    color: #555!important;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0!important;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-transform: lowercase;
}

.warrior-btn-message:hover {
    background: #F8EDD9!important;
    box-shadow: 4px 4px 12px 0 rgba(32, 32, 32, 0.15);
}

/* ---- Right Content Column ---- */

/* [wp-warrior-content-col] Right content column */
.warrior-content-col-new {
    min-width: 0;
    /* Top padding matches the avatar bottom half that hangs below the hero */
    padding-top: calc(var(--warrior-avatar-size) / 2 - var(--warrior-avatar-overlap) + 20px);
}

/* ---- Stats Cards ---- */

/* [wp-warrior-stats-cards] Three-column stat card grid */
.warrior-stats-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
    border: 0!important;
    border-radius: 0!important;
    overflow: hidden;
}

/* [wp-warrior-stat-card] Individual stat card */
.warrior-stat-card-new {
    background: #007e4c;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-right: 1px solid rgba(255,255,255,0.25);
    text-align: center;
}

.warrior-stat-card-new:last-child {
    border-right: none;
}

/* [wp-warrior-stat-icon] SVG icon inside stat card */
.warrior-stat-card-new .stat-icon {
    flex-shrink: 0;
    opacity: 0.75;
}

/* [wp-warrior-stat-content] Text content inside stat card */
.warrior-stat-card-new .stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.btn.btn-create-new:hover {
    color: #007e4c!important;
    border-color: #007e4c!important;
}

/* [wp-warrior-stat-label] Category label in stat card */
.warrior-stat-card-new .stat-label {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}

/* [wp-warrior-stat-value] Large number in stat card */
.warrior-stat-card-new .stat-value {
    font-family: 'TRY Vesterbro', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

/* [wp-warrior-stat-sublabel] Small sublabel below number */
.warrior-stat-card-new .stat-sublabel {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    font-weight: 400;
}

/* ---- Content Sections ---- */

/* [wp-warrior-section] Generic content section wrapper */
.warrior-section-new {
    margin-bottom: 40px;
}

/* [wp-warrior-section-heading] Green section heading */
.warrior-section-heading-new {
    font-family: inherit!important;
    font-size: 22px;
    font-weight: 900;
    color: inherit!important;
    margin: 0 0 16px;
}

/* ---- Post List Rows ---- */

/* [wp-warrior-list-row] Single post row (title + date) */
.warrior-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #e8e8e8;
    gap: 16px;
}

.warrior-list-row:first-child {
    border-top: 1px solid #e8e8e8;
}

/* [wp-warrior-list-title] Post title link */
.warrior-list-title {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #202020;
    text-decoration: none;
    flex: 1;
    line-height: 1.4;
    transition: color 0.2s;
}

.warrior-list-title:hover {
    color: #007e4c;
}

/* [wp-warrior-list-date] Post date */
.warrior-list-date {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}

/* [wp-warrior-list-empty] Empty state message */
.warrior-list-empty {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #999;
    padding: 16px 0;
}

/* [wp-warrior-list-info] Left side: title + date */
.warrior-list-info {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

/* [wp-warrior-list-actions] Right side: View + Edit buttons */
.warrior-list-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* [wp-warrior-action-btn] Action button base */
.warrior-action-btn {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

/* View button */
.warrior-action-view {
    color: #555;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
}

.warrior-action-view:hover {
    background: #e0e0e0;
    color: #333;
}

/* Edit button */
.warrior-action-edit {
    color: #007e4c!important;
    border: 1px solid #007e4c;
}

.warrior-action-edit:hover {
    background:  #F8EDD9;
    box-shadow: 4px 4px 12px 0 rgba(32, 32, 32, 0.15);
}

/* ---- Pagination ---- */

/* [wp-warrior-pagination] Pagination row */
.warrior-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px!important;
    padding: 20px 0 8px;
    flex-wrap: wrap;
}

/* [wp-warrior-pagination-btn] Pagination button */
.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px!important;
    height: 24px!important;
    padding: 0 6px!important;
    border-radius: 50%!important;
    border: none;
    background: transparent!important;
    color: #202020;
    font-family: 'Lato', sans-serif;
    font-size: 16px!important;
    font-weight: 300!important;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.pagination-btn:hover {
    background: #ededed!important;
    color: #202020!important;
}
.pagination-btn.active {
    background: #202020!important;
    color: #fff!important;
}

/* [wp-warrior-pagination-next] Next-page arrow button */
.pagination-btn.pagination-next {
    color: #202020!important;
}

.pagination-btn.pagination-next:hover {
    background: #005a38;
}

.pagination-ellipsis {
    color: #6e5f30;
    padding: 0 4px;
    font-size: 14px;
}

/* ---- Yellow header override for warrior page ---- */

/* [wp-warrior-header-override] Forces yellow header on warrior profile page */
body.warrior-profile-body .header {
    background-color: #f2c744 !important;
    color: #202020 !important;
}

/* [wp-warrior-header-logo] Dark logo on yellow header */
body.warrior-profile-body .header .logo-img {
    filter: none !important;
}

/* [wp-warrior-header-menu-btn] Dark hamburger icon on yellow header */
body.warrior-profile-body .header .header-menu-btn svg path {
    fill: #202020 !important;
}

/* ---- Responsive ---- */

/* [wp-warrior-responsive-tablet] Tablet breakpoint */
@media (max-width: 900px) {
    :root {
        --warrior-avatar-size:    160px;
        --warrior-avatar-overlap: 48px;
        --warrior-sidebar-w:      200px;
        --warrior-gap:            32px;
        /* Recalculate: 160 - 48 + 24 = 136px */
        --warrior-hero-pb:        136px;
    }
    .warrior-hero-name-new {
        font-size: 32px;
    }
}

/* [wp-warrior-responsive-mobile] Mobile breakpoint */
@media (max-width: 640px) {
    :root {
        --warrior-avatar-size:    130px;
        --warrior-avatar-overlap: 40px;
        --warrior-sidebar-w:      100%;
        --warrior-gap:            24px;
        /* Recalculate: 130 - 40 + 24 = 114px */
        --warrior-hero-pb:        114px;
    }
    .warrior-body-new {
        grid-template-columns: 1fr;
    }
    .warrior-sidebar-new {
        position: static;
    }
    .warrior-avatar-overlap {
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }
    .warrior-hero-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .warrior-hero-avatar-col {
        display: none;
    }
    .warrior-hero-name-new {
        font-size: 26px;
    }
    .warrior-stats-cards {
        grid-template-columns: 1fr;
    }
    .warrior-stat-card-new {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.25);
    }
    .warrior-stat-card-new:last-child {
        border-bottom: none;
    }
}

/* ================================================
   Warrior Profile Page — Single Warrior View (legacy)
   ================================================ */

.warrior-profile-page {
    min-height: 100vh;
}

/* ---- Hero Section ---- */
.warrior-hero {
    position: relative;
    height: 380px;
    overflow: hidden;
}
.warrior-hero-bg {
    position: absolute;
    inset: 0;
}
.warrior-hero-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.warrior-hero-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #007e4c 0%, #004225 60%, #002818 100%);
}
.warrior-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 66, 37, 0.1) 0%,
        rgba(0, 40, 22, 0.65) 50%,
        rgba(0, 40, 22, 0.88) 100%
    );
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 32px;
}
.warrior-hero-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
.warrior-hero-avatar-wrap {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #fff;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    background: #005c39;
}
.warrior-hero-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.warrior-hero-name {
    font-size: var(--wp--preset--font-size--x-large, 28px);
    font-weight: 900;
    color: #fff;
    margin: 0;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.warrior-hero-role {
    font-size: var(--wp--preset--font-size--medium, 18px);
    color: rgba(255,255,255,0.85);
    margin: 0;
    font-weight: 500;
}
.warrior-hero-joined {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    margin: 0;
}
.warrior-hero-socials {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.warrior-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    transition: background 0.2s, transform 0.2s;
    text-decoration: none;
}
.warrior-social-link:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

/* ---- 2-Column Body Layout ---- */
.warrior-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 80px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}
.warrior-content-col {
    min-width: 0;
}

/* ---- Sections ---- */
.warrior-section {
    margin-bottom: 48px;
}
.warrior-section-heading {
    font-size: var(--wp--preset--font-size--x-large, 28px);
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--wp--preset--color--custom-dark, #202020);
}
.warrior-bio-text {
    font-size: var(--wp--preset--font-size--medium, 18px);
    line-height: 1.8;
    color: #444;
}

/* ---- Achievements / Badges ---- */
.warrior-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}
.warrior-badge-card {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.warrior-badge-card.earned {
    border-color: var(--wp--preset--color--custom-green, #007e4c);
    box-shadow: 0 4px 16px rgba(0,126,76,0.12);
}
.warrior-badge-card.locked {
    opacity: 0.5;
    filter: grayscale(100%);
}
.warrior-badge-card.earned:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,126,76,0.2);
}
.warrior-badge-icon { font-size: 32px; line-height: 1; }
.warrior-badge-label {
    font-size: var(--wp--preset--font-size--small, 13px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.warrior-badge-desc {
    font-size: var(--wp--preset--font-size--small, 13px);
    color: #666;
    line-height: 1.4;
}

/* ---- Separator ---- */
.warrior-separator {
    border: 0;
    border-top: 1px solid #e8e8e8;
    margin: 0 0 48px;
}

/* ---- Activities Grid ---- */
.warrior-activities-section {
    margin-bottom: 0;
}
.warrior-activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.warrior-activities-grid .artikel-card {
    height: 100%;
}

/* ---- Sidebar ---- */
.warrior-sidebar {
    position: sticky;
    top: 32px;
}
.warrior-sidebar-inner {
    background: #fff;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.warrior-sidebar-title {
    font-size: var(--wp--preset--font-size--large, 18px);
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--wp--preset--color--custom-dark, #202020);
}
.warrior-sidebar-avatar-wrap {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 16px;
    border: 3px solid var(--wp--preset--color--custom-green, #007e4c);
}
.warrior-sidebar-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.warrior-sidebar-name {
    font-size: var(--wp--preset--font-size--x-large, 28px);
    font-weight: 900;
    margin: 0 0 4px;
    color: var(--wp--preset--color--custom-dark, #202020);
}
.warrior-sidebar-role {
    font-size: 14px;
    color: var(--wp--preset--color--custom-green, #007e4c);
    font-weight: 600;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.warrior-sidebar-bio {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    margin: 0 0 24px;
    max-width: 260px;
}
.warrior-sidebar-stats {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.warrior-stat-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.warrior-stat-card:last-child { border-bottom: none; }
.warrior-stat-num {
    font-size: var(--wp--preset--font-size--large, 18px);
    font-weight: 900;
    color: var(--wp--preset--color--custom-dark, #202020);
}
.warrior-stat-lbl {
    font-size: 13px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .warrior-body {
        grid-template-columns: 1fr;
        padding: 32px 16px 60px;
    }
    .warrior-sidebar {
        position: static;
        order: -1;
    }
}
/* ---- Kontak Kami Page ---- */
.kontak-page {
    background-color: #f2c744;
    min-height: 100vh;
}

.kontak-main-section {
    background-color: #f2c744;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 64px 80px;
}

.kontak-inner {
    display: flex;
    align-items: center;
    gap: 80px;
    width: 100%;
    max-width: 1200px;
}

/* Left column */
.kontak-left {
    flex: 0 0 auto;
    min-width: 260px;
}

.kontak-title {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 56px;
    font-weight: 900;
    color: #202020;
    margin: 0 0 32px;
    line-height: 1.1;
}

.kontak-social-icons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.kontak-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.kontak-social-btn:hover {
    opacity: 0.85;
    transform: scale(1.08);
}

.kontak-social-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.kontak-social-facebook {
    background-color: #1877f2;
}

/* Right column */
.kontak-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 8px;
}

.kontak-info-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kontak-info-label {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 900;
    color: #202020;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kontak-info-value {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #202020;
    margin: 0;
    line-height: 1.6;
}

.kontak-info-value a {
    color: #202020;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.kontak-info-value a:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 900px) {
    .kontak-main-section {
        padding: 100px 40px 60px;
    }
    .kontak-inner {
        gap: 48px;
    }
    .kontak-title {
        font-size: 44px;
    }
}

@media (max-width: 640px) {
    .kontak-main-section {
        padding: 90px 24px 60px;
    }
    .kontak-inner {
        flex-direction: column;
        gap: 40px;
    }
    .kontak-left {
        min-width: unset;
    }
    .kontak-title {
        font-size: 36px;
        margin-bottom: 24px;
    }
    .kontak-right {
        gap: 28px;
        padding-top: 0;
    }
}

@media (max-width: 480px) {
    .warrior-hero {
        height: 320px;
    }
    .warrior-hero-avatar-wrap {
        width: 96px;
        height: 96px;
    }
}

/* ============================================
   Language switcher button states
   ============================================ */

/* ============================================
   Hide Google Translate toolbar
   We use our own ID/EN buttons instead
   ============================================ */
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.skiptranslate {
    display: none !important;
}
body {
    top: 0 !important;
}
#google_translate_element {
    display: none !important;
}

/* ============================================
   PDF Preview Modal for Infografik
   ============================================ */
.pdf-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-modal-content {
    position: relative;
    width: 90%;
    height: 90%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.pdf-modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    z-index: 10001;
    line-height: 1;
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.pdf-modal-close:hover {
    color: #f2c744;
}

#pdf-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Single Photo Display */
.single-photo-display {
    margin-bottom: 30px;
    padding: 0 15px;
}

.single-photo-figure {
    margin: 0;
}

.single-photo-img {
    width: 100%;
    height: auto;
    display: block;
    /* border-radius: 4px; */
}

.single-photo-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: #666;
    font-style: italic;
}

.single-photo-caption svg {
    flex-shrink: 0;
    color: #888;
}

@media (max-width: 768px) {
    .single-photo-display {
        padding: 0 10px;
    }
    .single-photo-caption {
        font-size: 12px;
    }
}

/* Single Video Display */
.single-video-display {
    margin-bottom: 30px;
}

.single-video-wrapper {
    width: 100%;
}

.single-video-player {
    width: 100%;
    height: auto;
    display: block;
    background-color: #000;
}

.video-embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-embed-container iframe,
.video-embed-container object,
.video-embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* YouTube Player */
.single-youtube-player {
    margin-bottom: 30px;
}

.single-youtube-player .video-embed-container {
    padding-bottom: 0;
    height: 500px;
}

/* FEP Button Icon */
button.fep-button {
    position: relative;
    padding-right: 40px;
}

.fep-attachment-field-div {
    display: flex;
}
#fep-attachment-field-add {
    font-size: 13px;
    text-align: center;
    padding: 1vmin 3vmin;
    border: 1px solid #202020;
}
a.fep-attachment-field-a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #dc3545;
    border: 1px solid #dc3545;
    border-radius: 4px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    text-indent: -100px;
}
a.fep-attachment-field-a::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-trash' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* ============================================
   Page Artikel List Styles
   ============================================ */

/* Hero subtitle */
.single-post-hero-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin: 12px 0 0;
}

/* Artikel Filter */
.artikel-filter {
    margin: 40px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.artikel-filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #202020;
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.artikel-filter-btn:hover {
    border-color: #007e4c;
    color: #007e4c;
    background: #f8fff9;
}

.artikel-filter-btn.active {
    background: #007e4c;
    border-color: #007e4c;
    color: #ffffff;
}

/* Artikel Card */
.artikel-card-wrapper {
    margin-bottom: 32px;
}

.artikel-card-thumb {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.artikel-card-thumb a {
    display: block;
    height: 100%;
}

.artikel-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.artikel-card:hover .artikel-card-thumb img {
    transform: scale(1.08);
}

.artikel-card-category {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 14px;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    background: #007e4c;
    border-radius: 20px;
}

.artikel-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.artikel-card-title {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 12px;
}

.artikel-card-title a {
    color: #202020;
    text-decoration: none;
    transition: color 0.2s ease;
}

.artikel-card-title a:hover {
    color: #007e4c;
}

.artikel-card-excerpt {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #666666;
    margin: 0 0 16px;
    flex: 1;
}

.artikel-card-meta {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: #999999;
    margin-top: auto;
}

.artikel-card-sep {
    margin: 0 8px;
}

/* Artikel Pagination */
.artikel-pagination {
    margin: 48px 0 32px;
}

.artikel-pagination .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.artikel-pagination .pagination a,
.artikel-pagination .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #202020;
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.artikel-pagination .pagination a:hover {
    border-color: #007e4c;
    color: #007e4c;
}

.artikel-pagination .pagination .current {
    background: #007e4c;
    border-color: #007e4c;
    color: #ffffff;
}

.artikel-pagination .pagination .dots {
    border: none;
    background: transparent;
    cursor: default;
}

.artikel-pagination .pagination .prev,
.artikel-pagination .pagination .next {
    padding: 0 16px;
}

/* Artikel Empty State */
.artikel-empty {
    padding: 60px 20px;
    text-align: center;
}

.artikel-empty p {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    color: #999999;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .artikel-filter {
        margin: 28px 0 20px;
        gap: 8px;
    }

    .artikel-filter-btn {
        padding: 8px 16px;
        font-size: 13px;
    }

    .artikel-card-wrapper {
        margin-bottom: 24px;
    }

    .artikel-card-thumb {
        height: 180px;
    }

    .artikel-card-body {
        padding: 16px;
    }

    .artikel-card-title {
        font-size: 16px;
    }

    .artikel-pagination {
        margin: 32px 0 24px;
    }

    .artikel-pagination .pagination a,
    .artikel-pagination .pagination span {
        min-width: 38px;
        height: 38px;
        font-size: 13px;
    }
}

/* ============================================
   EDIT ARTIKEL PAGE STYLES
   ============================================ */

/* --- Edit Artikel Hero --- */
.edit-artikel-hero {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-color: #f2c744;
}

.edit-artikel-hero-overlay {
    position: relative;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
    width: 100%;
    padding: 60px 0 40px;
}

.edit-artikel-hero-content {
    padding: 0 15px;
}

.edit-artikel-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #f2c744;
    color: #202020;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.edit-artikel-category svg {
    fill: #202020;
}

.edit-artikel-title {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 36px;
    color: #fff;
    margin: 0 0 15px;
    line-height: 1.2;
}

.edit-artikel-meta {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    flex-wrap: wrap;
}

.edit-artikel-date,
.edit-artikel-author,
.edit-artikel-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.edit-artikel-sep {
    margin: 0 8px;
}

/* --- Edit Artikel Body --- */
.edit-artikel-body {
    padding: 60px 0;
}

/* --- Edit Artikel Content Typography --- */
.edit-artikel-content {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
}

.edit-artikel-content p {
    margin-bottom: 20px;
}

.edit-artikel-content h1,
.edit-artikel-content h2,
.edit-artikel-content h3,
.edit-artikel-content h4,
.edit-artikel-content h5,
.edit-artikel-content h6 {
    font-family: 'TRY Vesterbro', sans-serif !important;
    margin: 30px 0 15px;
    color: #202020;
    line-height: 1.3;
}

.edit-artikel-content h1 { font-size: 2em; }
.edit-artikel-content h2 { font-size: 1.75em; }
.edit-artikel-content h3 { font-size: 1.5em; }
.edit-artikel-content h4 { font-size: 1.25em; }

.edit-artikel-content ul,
.edit-artikel-content ol {
    margin: 0 0 20px 20px;
    padding-left: 10px;
}

.edit-artikel-content li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.edit-artikel-content ul {
    list-style-type: disc;
}

.edit-artikel-content ol {
    list-style-type: decimal;
}

.edit-artikel-content a {
    color: #0066cc !important;
    text-decoration: underline;
}

.edit-artikel-content a:hover {
    color: #004499 !important;
}

/* --- Edit Artikel Share Bar --- */
.edit-artikel-share {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 40px 0;
    flex-wrap: wrap;
}

.edit-artikel-share-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    margin-right: 5px;
}

.edit-artikel-share-btn {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    transition: opacity 0.2s;
    color: #666;
}

.edit-artikel-share-btn:hover {
    opacity: 0.7;
    color: #007e4c;
}

.edit-artikel-share-btn svg {
    width: 24px;
    height: 24px;
}

/* --- Edit Artikel Related Posts --- */
.edit-artikel-related {
    margin-top: 60px;
}

.edit-artikel-related-title {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 24px;
    color: #202020;
    margin: 0 0 30px;
    text-align: center;
}

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

.edit-artikel-related-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.edit-artikel-related-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

.edit-artikel-related-thumb {
    height: 160px;
    overflow: hidden;
    background-color: #f8edd9;
}

.edit-artikel-related-thumb img,
.edit-artikel-related-thumb a {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-artikel-related-item-title {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 16px;
    margin: 0;
    padding: 16px;
    line-height: 1.4;
}

.edit-artikel-related-item-title a {
    color: #202020;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Edit Admin Link --- */
.edit-artikel-admin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 8px 16px;
    background-color: #007e4c;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.edit-artikel-admin-link:hover {
    background-color: #006640;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    color: #fff !important;
}

.edit-artikel-admin-link svg {
    width: 16px;
    height: 16px;
}

/* --- Responsive Edit Artikel --- */
@media (max-width: 768px) {
    .edit-artikel-hero {
        min-height: 300px;
    }

    .edit-artikel-hero-overlay {
        padding: 40px 0 30px;
    }

    .edit-artikel-title {
        font-size: 28px;
    }

    .edit-artikel-body {
        padding: 40px 0;
    }

    .edit-artikel-content {
        font-size: 16px;
    }

    .edit-artikel-related-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .edit-artikel-related-thumb {
        height: 200px;
    }
}

/* ============================================
   EDIT ARTIKEL EDITOR PAGE
   ============================================ */

/* --- Edit Artikel Header --- */
.edit-artikel-header {
    background-color: #202020;
    color: #fff;
    padding: 40px 0 30px;
}

.edit-artikel-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-artikel-header-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #f2c744;
    margin: 0 0 4px;
}

.edit-artikel-header-title {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 32px;
    margin: 0;
    color: #fff;
}

/* --- Edit Artikel Buttons --- */
.edit-artikel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.edit-artikel-btn-primary {
    background-color: #007e4c;
    color: #fff !important;
}

.edit-artikel-btn-primary:hover {
    background-color: #006640;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    color: #fff !important;
}

.edit-artikel-btn-secondary {
    background-color: #f8edd9;
    color: #202020 !important;
}

.edit-artikel-btn-secondary:hover {
    background-color: #f2c744;
    color: #202020 !important;
}

.edit-artikel-btn-small {
    padding: 6px 12px;
    font-size: 12px;
}

/* --- Edit Artikel Body --- */
.edit-artikel-body {
    padding: 40px 0 60px;
    background-color: #f8f8f8;
    min-height: calc(100vh - 200px);
}

.edit-artikel-section-title {
    font-family: 'TRY Vesterbro', sans-serif !important;
    font-size: 24px;
    color: #202020;
    margin: 0 0 24px;
}

/* --- Edit Artikel Table --- */
.edit-artikel-table-wrapper {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
}

.edit-artikel-table {
    width: 100%;
    border-collapse: collapse;
}

.edit-artikel-table th,
.edit-artikel-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.edit-artikel-table th {
    background-color: #f8f8f8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    font-weight: 700;
}

.edit-artikel-table td {
    font-size: 14px;
    color: #202020;
}

.edit-artikel-table tr:hover {
    background-color: #fafafa;
}

.edit-artikel-table a {
    color: #007e4c;
}

.edit-artikel-table a:hover {
    text-decoration: underline;
}

/* --- Status Badges --- */
.edit-artikel-status {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
}

.edit-artikel-status.status-publish {
    background-color: #d4edda;
    color: #155724;
}

.edit-artikel-status.status-draft {
    background-color: #fff3cd;
    color: #856404;
}

.edit-artikel-status.status-pending {
    background-color: #cce5ff;
    color: #004085;
}

/* --- Edit Form --- */
.edit-artikel-form-wrapper {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 32px;
}

.edit-artikel-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.edit-artikel-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
    text-decoration: none;
}

.edit-artikel-back-link:hover {
    color: #007e4c;
}
.reg-failed {
    font-size: 0.8em;
}

form .form-group label {
    color: var(--primary-color);
}
.checkbox-item label {
    color: #202020!important;
    font-weight: normal;
}
.kategori-checkbox-group {
    column-count: 3;
    gap: 24px;
}
.help-block {
    font-size: 0.8em;
}

.edit-artikel-form-group {
    margin-bottom: 24px;
}

.edit-artikel-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.edit-artikel-form-group-full {
    grid-column: 1 / -1;
}

.edit-artikel-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #202020;
    margin-bottom: 8px;
}

.edit-artikel-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border: 2px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

.edit-artikel-input:focus {
    outline: none;
    border-color: #007e4c;
}

.edit-artikel-textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-family: 'Lato', sans-serif;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.edit-artikel-textarea:focus {
    outline: none;
    border-color: #007e4c;
}

.edit-artikel-textarea-short {
    min-height: 100px;
}

.edit-artikel-cover-preview {
    margin-top: 12px;
}

.edit-artikel-cover-preview img {
    max-width: 300px;
    max-height: 200px;
    border-radius: 4px;
    object-fit: cover;
}

.edit-artikel-form-actions {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}

.edit-artikel-btn-large {
    padding: 14px 28px;
    font-size: 16px;
}

/* WordPress Editor Override */
.edit-artikel-form .wp-editor-container {
    border: 2px solid #ddd;
    border-radius: 4px;
}

.edit-artikel-form .wp-editor-container:focus-within {
    border-color: #007e4c;
}

/* --- Empty State --- */
.edit-artikel-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 8px;
}

.edit-artikel-empty h2 {
    font-family: 'TRY Vesterbro', sans-serif !important;
    color: #202020;
    margin: 0 0 12px;
}

.edit-artikel-empty p {
    color: #666;
    margin: 0 0 24px;
}

/* --- Alert --- */
.edit-artikel-notice {
    padding: 20px 0;
}

.edit-artikel-notice .alert {
    padding: 16px 20px;
    border-radius: 4px;
}

.edit-artikel-notice .alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* --- Responsive Edit Form --- */
@media (max-width: 768px) {
    .edit-artikel-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .edit-artikel-form-row {
        grid-template-columns: 1fr;
    }

    .edit-artikel-table {
        font-size: 13px;
    }

    .edit-artikel-table th,
    .edit-artikel-table td {
        padding: 12px 14px;
    }

    .edit-artikel-form-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .edit-artikel-form-wrapper {
        padding: 20px;
    }
}

/* ============================================
   Utility Classes for Inline Styles
   ============================================ */
.gap-4px { gap: 4px; }
.opacity-04 { opacity: 0.4; pointer-events: none; }
.disabled-pointer { pointer-events: none; opacity: 0.6; }
.h-260 { height: 260px; }
.color-inherit { color: inherit; }
.text-muted { color: #666; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.text-red { color: red; }
.fs-14 { font-size: 14px; }
.w-120 { width: 120px; }
.h-120 { height: 120px; }
.radius-50 { border-radius: 50%; }
.border-3 { border-width: 3px; }
.border-solid { border-style: solid; }
.border-light { border-color: #ddd; }
.object-cover { object-fit: cover; }
.h-38 { height: 38px; }
.mw-400 { max-width: 400px; }
.mh-300 { max-height: 300px; }
.rounded-1 { border-radius: 8px; }
.d-none { display: none !important; }
.min-vh-300 { min-height: 300px; }
.bg-light { background-color: #f8f9fa; }
.rounded { border-radius: 4px; }
.fs-6 { font-size: 16px; }
.ms-2 { margin-left: 8px; }
.w-400 { width: 400px; }