/*
Theme Name:  Yayasan Pro
Theme URI:   https://yoursite.com/yayasan-pro
Author:      Miqdad Dev Studio
Author URI:  https://yoursite.com
Description: Theme WordPress profesional untuk Yayasan, LSM, dan organisasi non-profit. Dilengkapi custom blocks, sistem donasi, dan drag & drop editor.
Version:     1.7.3
Requires at least: 6.0
Tested up to:     6.5
Requires PHP:     8.0
License:          GPL v2 or later
License URI:      http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:      yayasan-pro
Tags: non-profit, charity, foundation, donation, education, social, gutenberg, responsive, block-editor, rtl-language-support

Yayasan Pro WordPress Theme, Copyright 2024 Miqdad Dev Studio
Yayasan Pro is distributed under the terms of the GNU GPL
*/

/* =========================================
   RESET & BASE
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Brand Colors */
    --color-primary:       #1a6b4a;
    --color-primary-dark:  #124d35;
    --color-primary-light: #2d9b6f;
    --color-secondary:     #0e7bc1;
    --color-secondary-dark:#0a5d93;
    --color-accent:        #f59e0b;
    --color-accent-dark:   #d97706;

    /* Neutrals */
    --color-white:    #ffffff;
    --color-off-white:#f8faf9;
    --color-gray-50:  #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-dark:     #0d1117;

    /* Semantic */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger:  #ef4444;
    --color-info:    #3b82f6;

    /* Typography */
    --font-heading: 'Poppins', sans-serif;
    --font-body:    'Inter', sans-serif;

    /* Sizes */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Border Radius */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
    --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
    --shadow-lg:  0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
    --shadow-xl:  0 20px 25px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.04);
    --shadow-card: 0 2px 20px rgba(26,107,74,.08);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* Layout */
    --container-max: 1200px;
    --container-xl:  1440px;
    --header-height: 80px;
}

/* =========================================
   TYPOGRAPHY
   ========================================= */
html {
    font-size: 16px;
    scroll-padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-gray-700);
    background-color: var(--color-white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-gray-900);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-dark); }

strong, b { font-weight: 700; }
em, i { font-style: italic; }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: 0.25rem; }

/* =========================================
   LAYOUT UTILITIES
   ========================================= */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.container-xl {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.section-padding {
    padding: var(--space-20) 0;
}

.section-padding-sm {
    padding: var(--space-12) 0;
}

.grid { display: grid; }
.flex { display: flex; }
.hidden { display: none; }
.block { display: block; }

/* =========================================
   BUTTONS
   ========================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-base);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(26,107,74,.35);
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}
.btn-secondary:hover {
    background: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(14,123,193,.35);
}

.btn-accent {
    background: var(--color-accent);
    color: var(--color-gray-900);
    border-color: var(--color-accent);
}
.btn-accent:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-gray-900);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245,158,11,.35);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-outline-white {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255,255,255,0.7);
}
.btn-outline-white:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

/* =========================================
   BADGES
   ========================================= */
.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-primary { background: rgba(26,107,74,.1); color: var(--color-primary); }
.badge-secondary { background: rgba(14,123,193,.1); color: var(--color-secondary); }
.badge-accent { background: rgba(245,158,11,.15); color: #92400e; }

/* =========================================
   SECTION HEADERS
   ========================================= */
.section-header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.section-header .badge {
    margin-bottom: var(--space-4);
}

.section-header h2 {
    margin-bottom: var(--space-4);
}

.section-header p {
    max-width: 600px;
    margin: 0 auto;
    color: var(--color-gray-500);
    font-size: var(--text-lg);
}

.section-divider {
    width: 60px;
    height: 4px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    margin: var(--space-4) auto;
}

/* =========================================
   CARDS
   ========================================= */
.card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.card-body { padding: var(--space-6); }
.card-img { width: 100%; object-fit: cover; }

/* =========================================
   PROGRESS BAR
   ========================================= */
.progress-bar {
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    height: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--radius-full);
    transition: width 1.2s ease;
}

/* =========================================
   FORMS
   ========================================= */
.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-gray-800);
    background: var(--color-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26,107,74,.15);
}

.form-control::placeholder {
    color: var(--color-gray-400);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* =========================================
   HEADER
   ========================================= */
.site-header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
    height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--color-white);
    box-shadow: 0 1px 0 var(--color-gray-100);
    transition: box-shadow var(--transition-base), background var(--transition-base);
    overflow: visible;
    top: env(safe-area-inset-top, 0px);
}

main#main-content {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
}

body.admin-bar .site-header {
    top: calc(32px + env(safe-area-inset-top, 0px));
}

body.admin-bar main#main-content {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 32px);
}

@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: calc(46px + env(safe-area-inset-top, 0px));
    }
    body.admin-bar main#main-content {
        padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 46px);
    }
}

.site-header.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

.site-header.transparent {
    background: transparent;
    box-shadow: none;
}

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

.site-logo img {
    height: 48px;
    width: auto;
}

.site-logo .text-logo {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-primary);
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav a {
    padding: var(--space-2) var(--space-4);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.main-nav a:hover,
.main-nav .current-menu-item > a {
    color: var(--color-primary);
    background: rgba(26,107,74,.07);
}

.header-cta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Dropdown */
.main-nav .menu-item-has-children {
    position: relative;
}

.main-nav .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    min-width: 200px;
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-base);
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-gray-100);
}

.main-nav .menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav .sub-menu a {
    display: block;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

/* Mobile menu toggle — SVG hamburger */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #1a1a1a;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.menu-toggle:hover { background: var(--color-gray-100); }

.menu-toggle-icon {
    display: block;
    width: 22px;
    height: 22px;
    color: #1a1a1a;
    pointer-events: none;
    flex-shrink: 0;
}
.menu-toggle-icon--close { display: none; }

/* When menu is open — swap icons */
.menu-toggle.is-active .menu-toggle-icon--open  { display: none; }
.menu-toggle.is-active .menu-toggle-icon--close { display: block; }

/* ==========================================
   ICON BUTTON (Search, dll)
   ========================================== */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-600);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.icon-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-primary);
}

.icon-btn i {
    font-size: 1.25rem;
    line-height: 1;
    pointer-events: none;
}

/* ==========================================
   HEADER SEARCH DROPDOWN
   ========================================== */
.header-search {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-gray-100);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    padding: 1rem 0;
    z-index: 999;
}

.header-search[hidden] {
    display: none;
}

.search-wrap {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.search-wrap .form-control {
    flex: 1;
}

/* Logo tidak terpotong di mobile */
.site-logo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.site-logo .text-logo {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: clamp(0.875rem, 3.5vw, 1.25rem);
}

@media (max-width: 480px) {
    .site-logo .text-logo {
        font-size: 0.9rem;
    }
    .icon-btn {
        width: 36px;
        height: 36px;
    }
}

.menu-toggle.is-active-UNUSED { display: none; /* placeholder - kept for structure */ }

.mobile-nav {
    /* Default hidden — JS mengontrol via 'hidden' attr + class 'is-open' */
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    padding: 0;
    box-shadow: var(--shadow-xl);
    border-top: 2px solid var(--color-primary);
    z-index: 998;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Animasi slide dari atas */
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    pointer-events: none;
}

/* Saat mobile-nav aktif (class 'is-open' ditambahkan JS) */
.mobile-nav:not([hidden]).is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Fallback: kalau hidden attr, pastikan benar-benar tidak tampil */
.mobile-nav[hidden] {
    display: none !important;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav > ul,
.mobile-nav > div > ul {
    padding: var(--space-2) 0;
}

.mobile-nav li {
    border-bottom: 1px solid var(--color-gray-100);
}

.mobile-nav li:last-child {
    border-bottom: none;
}

.mobile-nav a {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-800);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

.mobile-nav a:hover,
.mobile-nav .current-menu-item > a {
    color: var(--color-primary);
    background: rgba(26,107,74,.05);
}

.mobile-nav .menu-item-has-children > a::after {
    content: '›';
    margin-left: auto;
    font-size: 1.2rem;
    opacity: 0.4;
}

/* Area bawah mobile nav — tombol CTA */
.mobile-nav-footer {
    padding: var(--space-5) var(--space-6);
    border-top: 2px solid var(--color-gray-100);
    background: var(--color-gray-50);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
    background: var(--color-dark);
    color: var(--color-gray-400);
    padding: var(--space-20) 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-12);
    padding-bottom: var(--space-16);
}

.footer-brand .footer-logo {
    margin-bottom: var(--space-4);
}

.footer-brand .text-logo {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-white);
}

.footer-desc {
    font-size: var(--text-sm);
    line-height: 1.8;
    margin-bottom: var(--space-6);
}

.footer-social {
    display: flex;
    gap: var(--space-3);
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.08);
    color: var(--color-gray-400);
    transition: all var(--transition-base);
}

.footer-social a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

.footer-widget h4 {
    color: var(--color-white);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-5);
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget ul li {
    margin-bottom: var(--space-3);
}

.footer-widget ul a {
    color: var(--color-gray-400);
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}

.footer-widget ul a:hover {
    color: var(--color-primary-light);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: var(--space-6) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer-bottom p {
    font-size: var(--text-sm);
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    gap: var(--space-6);
}

.footer-bottom-links a {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

.footer-bottom-links a:hover {
    color: var(--color-primary-light);
}

/* Footer Google Maps */
.footer-maps-wrap {
    margin-top: 1rem;
}

.footer-maps-wrap iframe {
    width: 100%;
    height: 180px;
    border: 0;
    border-radius: .75rem;
    display: block;
    filter: grayscale(15%) brightness(.9);
    transition: filter .3s ease;
}

.footer-maps-wrap iframe:hover {
    filter: grayscale(0%) brightness(1);
}

.footer-maps-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .6rem;
    font-size: .8rem;
    color: var(--color-primary-light) !important;
    text-decoration: none;
    transition: opacity .2s;
}

.footer-maps-link:hover {
    opacity: .8;
    text-decoration: underline;
}

/* =========================================
   HERO SECTION
   ========================================= */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-gradient-hero, linear-gradient(135deg, #0d2b1f 0%, #1a6b4a 50%, #0e7bc1 100%));
    padding-top: 0;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb,13,43,31),.95) 0%, rgba(var(--color-primary-rgb,26,107,74),.85) 60%, rgba(var(--color-secondary-rgb,14,123,193),.7) 100%);
}

.hero-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.05;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 40px 40px;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
}

/* Two-column hero layout (when bannerImage is set) */
.hero-inner {
    position: relative;
    z-index: 1;
}
.hero-inner--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}
.hero-inner--split .hero-content {
    max-width: 100%;
}
.hero-banner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-banner-img {
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--radius-2xl);
    display: block;
}
@media (max-width: 900px) {
    .hero-inner--split {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .hero-banner-wrap {
        order: 2;
        margin: var(--space-8) calc(-1 * var(--space-6));
        width: calc(100% + 2 * var(--space-6));
        overflow: hidden; /* cegah banner meluber */
    }
    .hero-banner-img {
        border-radius: 0;
        width: 100%;
        height: auto;        /* tampilkan penuh sesuai rasio asli */
        max-height: none;    /* hapus batasan tinggi yang memotong gambar */
        object-fit: contain; /* seluruh gambar tampil, tidak dipotong */
        display: block;
    }
}
@media (max-width: 480px) {
    .hero-banner-wrap {
        margin: var(--space-6) calc(-1 * var(--space-4));
        width: calc(100% + 2 * var(--space-4));
    }
    .hero-banner-img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: var(--color-white);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-6);
    backdrop-filter: blur(10px);
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: var(--space-6);
}

.hero-title .highlight {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc {
    font-size: var(--text-lg);
    color: rgba(255,255,255,.85);
    margin-bottom: var(--space-10);
    max-width: 580px;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}

.hero-stats {
    display: flex;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.hero-stat-item {
    text-align: center;
}

.hero-stat-num {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1;
}

.hero-stat-label {
    font-size: var(--text-xs);
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-1);
}

.hero-image-side {
    position: relative;
    z-index: 1;
}

.hero-image-side img {
    border-radius: var(--radius-2xl);
    box-shadow: 0 30px 80px rgba(0,0,0,.4);
}

.hero-floating-card {
    position: absolute;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.hero-floating-card.card-donate {
    bottom: -20px;
    left: -30px;
    animation: float 3s ease-in-out infinite;
}

.hero-floating-card.card-volunteer {
    top: 30px;
    right: -30px;
    animation: float 3s ease-in-out infinite 1.5s;
}

.hero-floating-card .card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.hero-floating-card .card-icon.green { background: rgba(var(--color-primary-rgb,26,107,74),.12); }
.hero-floating-card .card-icon.blue  { background: rgba(var(--color-secondary-rgb,14,123,193),.12); }

.hero-floating-card .card-text strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-gray-900);
}

.hero-floating-card .card-text span {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* =========================================
   ABOUT SECTION
   ========================================= */
.about-section { background: var(--color-white); }

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.about-image-wrap {
    position: relative;
}

.about-img-main {
    width: 100%;
    object-fit: cover;
    display: block;
}

.about-img-secondary {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 200px;
    border-radius: var(--radius-xl);
    border: 4px solid var(--color-white);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
}

.about-badge-floating {
    position: absolute;
    top: 20px;
    left: 16px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-3) var(--space-4);
    text-align: center;
    box-shadow: var(--shadow-lg);
    max-width: 140px;
}

.about-badge-floating .num {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1;
}

.about-badge-floating .label {
    font-size: 0.65rem;
    opacity: 0.85;
}

/* =========================================
   ABOUT — IMAGE SLIDER
   ========================================= */
.about-img-slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    line-height: 0;
}
.about-img-slider .asl-track {
    display: flex;
    transition: transform .4s ease;
}
.about-img-slider .asl-slide {
    flex: 0 0 100%;
    min-width: 100%;
}
.about-img-slider .asl-slide img {
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-2xl);
}
.about-img-slider .asl-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    line-height: 1;
}
.about-img-slider .asl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s;
}
.about-img-slider .asl-dot.active {
    background: var(--color-white);
}
.about-img-slider .asl-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transition: background .2s;
    z-index: 2;
}
.about-img-slider .asl-arrow:hover { background: var(--color-white); }
.about-img-slider .asl-prev { left: 10px; }
.about-img-slider .asl-next { right: 10px; }

.about-content .section-tag {
    display: inline-block;
    background: rgba(26,107,74,.1);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.about-content h2 { margin-bottom: var(--space-5); }
.about-content p { color: var(--color-gray-500); margin-bottom: var(--space-4); line-height: 1.85; }

.about-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

.about-value-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.about-value-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(26,107,74,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.about-value-text strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-gray-800);
    margin-bottom: 2px;
}

.about-value-text span {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

/* =========================================
   PROGRAMS SECTION
   ========================================= */
.programs-section { background: var(--color-off-white); }

.programs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.program-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
    border: 1px solid var(--color-gray-100);
}

.program-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary);
}

.program-card-img {
    height: 220px;
    overflow: hidden;
    position: relative;
}

.program-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

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

.program-card-cat {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
}

.program-card-body {
    padding: var(--space-6);
}

.program-card-body h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

.program-card-body p {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    line-height: 1.7;
    margin-bottom: var(--space-5);
}

.program-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
}

.program-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

/* =========================================
   DONATION SECTION
   ========================================= */
.donation-section {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    position: relative;
    overflow: hidden;
}

.donation-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(255,255,255,.03);
}

.donation-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
}

.donation-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-16);
    align-items: center;
    position: relative;
    z-index: 1;
}

.donation-content { color: var(--color-white); }
.donation-content h2 { color: var(--color-white); margin-bottom: var(--space-5); }
.donation-content p { color: rgba(255,255,255,.8); margin-bottom: var(--space-8); font-size: var(--text-lg); }

.donation-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.donation-stat {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    backdrop-filter: blur(10px);
}

.donation-stat .num {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-white);
}

.donation-stat .label {
    font-size: var(--text-xs);
    color: rgba(255,255,255,.7);
}

.donation-form-card {
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: 0 25px 60px rgba(0,0,0,.2);
}

.donation-form-card h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-6);
    text-align: center;
}

.amount-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.amount-btn {
    padding: var(--space-3) var(--space-2);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    background: var(--color-white);
    color: var(--color-gray-700);
    transition: all var(--transition-fast);
    text-align: center;
}

.amount-btn:hover,
.amount-btn.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.campaign-select {
    margin-bottom: var(--space-5);
}

.donation-type-tabs {
    display: flex;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    padding: 4px;
    margin-bottom: var(--space-5);
}

.donation-type-tab {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-gray-500);
}

.donation-type-tab.active {
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

/* =========================================
   TESTIMONIALS
   ========================================= */
.testimonials-section { background: var(--color-white); }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.testimonial-card {
    background: var(--color-off-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    position: relative;
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
}

.testimonial-card:hover {
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.testimonial-quote {
    font-size: 3rem;
    color: var(--color-primary);
    opacity: 0.3;
    line-height: 1;
    margin-bottom: var(--space-4);
    font-family: Georgia, serif;
}

.testimonial-text {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    line-height: 1.8;
    margin-bottom: var(--space-6);
    font-style: italic;
}

.testimonial-stars {
    color: #f59e0b;
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.testimonial-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-primary);
}

.testimonial-author-info strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-gray-900);
}

.testimonial-author-info span {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

/* =========================================
   GALLERY
   ========================================= */
.gallery-section { background: var(--color-off-white); }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: var(--space-4);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.gallery-item.featured {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 200px;
    transition: transform var(--transition-slow);
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-base);
    display: flex;
    align-items: flex-end;
    padding: var(--space-5);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay-text {
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* =========================================
   BLOG / BERITA
   ========================================= */
.blog-section { background: var(--color-white); }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.blog-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.blog-card-img {
    height: 200px;
    overflow: hidden;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

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

.blog-card-body { padding: var(--space-6); }

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.blog-card-meta .category {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-card-meta .date {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
}

.blog-card-body h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.blog-card-body h3 a {
    color: var(--color-gray-900);
}

.blog-card-body h3 a:hover {
    color: var(--color-primary);
}

.blog-card-body p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.blog-read-more {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* =========================================
   PARTNERS / SPONSOR
   ========================================= */
.partners-section {
    background: var(--color-off-white);
    padding: var(--space-16) 0;
}

.partners-label {
    text-align: center;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-400);
    margin-bottom: var(--space-8);
}

.partners-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-12);
}

.partner-logo {
    opacity: 0.5;
    filter: grayscale(100%);
    transition: all var(--transition-base);
    max-height: 40px;
    max-width: 140px;
    object-fit: contain;
}

.partner-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* =========================================
   VIDEO SECTION
   ========================================= */
.video-section {}

.video-block-wrap {
    max-width: 860px;
    margin: 0 auto;
}

/* 16:9 responsive iframe wrapper (YouTube embed) */
.video-embed-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.video-embed-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Uploaded video wrapper */
.video-upload-wrap {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
    background: #000;
}

.video-upload-wrap video {
    width: 100%;
    display: block;
    border-radius: var(--radius-xl);
}

/* Caption */
.video-caption {
    text-align: center;
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    font-style: italic;
    margin-top: var(--space-4);
    margin-bottom: 0;
}

/* Placeholder (no video set) */
.video-placeholder {
    max-width: 500px;
    margin: 0 auto;
    padding: 4rem 2rem;
    background: var(--color-off-white);
    border: 2px dashed var(--color-gray-200);
    border-radius: var(--radius-xl);
    text-align: center;
    color: var(--color-gray-400);
}
.video-placeholder p { margin: 1rem 0 0; }

/* =========================================
   CTA SECTION
   ========================================= */
/* =============================================
   PARTNER & SPONSOR SECTION
   ============================================= */
.partner-section { background: var(--color-white); }

.partner-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    align-items: center;
    margin-top: 2.5rem;
}

.partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-gray-100, #f3f4f6);
    border-radius: var(--radius-xl);
    transition: box-shadow .2s, transform .2s, border-color .2s;
    min-height: 90px;
    width: 160px;
    flex-shrink: 0;
}

.partner-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--color-primary-light, #a7d7c5);
}

.partner-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.partner-logo {
    max-width: 130px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(30%);
    opacity: .85;
    transition: filter .2s, opacity .2s;
    display: block;
    margin: 0 auto;
}

.partner-item:hover .partner-logo {
    filter: grayscale(0%);
    opacity: 1;
}

.partner-name-only {
    font-weight: 700;
    font-size: .9rem;
    color: var(--color-gray-700);
    text-align: center;
}

@media (max-width: 768px) {
    .partner-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 1rem;
    }
    .partner-item { min-height: 70px; padding: .875rem .75rem; }
    .partner-logo { max-width: 90px; max-height: 44px; }
}

/* =============================================
   CTA SECTION
   ============================================= */
.cta-section {
    background: linear-gradient(135deg, #0e7bc1 0%, #1a6b4a 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,.08) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(255,255,255,.06) 0%, transparent 50%);
}

.cta-inner {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: var(--space-20) 0;
}

.cta-inner h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--space-5);
}

.cta-inner p {
    color: rgba(255,255,255,.85);
    font-size: var(--text-lg);
    max-width: 560px;
    margin: 0 auto var(--space-10);
}

.cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* =========================================
   CAMPAIGN CARDS
   ========================================= */
.campaign-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
}

.campaign-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.campaign-img {
    height: 220px;
    overflow: hidden;
    position: relative;
}

.campaign-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

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

.campaign-status {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: var(--color-accent);
    color: var(--color-gray-900);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.campaign-body { padding: var(--space-6); }
.campaign-body h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.campaign-body p { font-size: var(--text-sm); color: var(--color-gray-500); margin-bottom: var(--space-4); }

.campaign-progress-wrap {
    margin-bottom: var(--space-5);
}

.campaign-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.campaign-progress-info .raised {
    font-weight: 700;
    color: var(--color-primary);
    font-size: var(--text-sm);
}

.campaign-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
}

.campaign-footer .days-left {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.campaign-footer .days-left strong {
    color: var(--color-gray-800);
    font-size: var(--text-sm);
}

/* =========================================
   PAGE HEADER
   ========================================= */
.page-header {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    padding: var(--space-16) 0 var(--space-16);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

.page-header-content {
    position: relative;
    z-index: 1;
}

.page-header h1 {
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.page-header p {
    color: rgba(255,255,255,.8);
    font-size: var(--text-lg);
    max-width: 600px;
    margin: 0 auto;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: rgba(255,255,255,.7);
}

.breadcrumb a { color: rgba(255,255,255,.7); }
.breadcrumb a:hover { color: var(--color-white); }
.breadcrumb .sep { color: rgba(255,255,255,.4); }
.breadcrumb .current { color: var(--color-white); }

/* =========================================
   SCROLL TO TOP
   ========================================= */
.scroll-top {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-base);
    border: none;
    z-index: 100;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    background: var(--color-primary-dark);
    transform: translateY(-4px);
}

/* =========================================
   ANIMATIONS
   ========================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

.animate-fade-up {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-500 { animation-delay: 0.5s; }

/* Reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    /* CSS fallback: jika JS gagal total, tampilkan setelah 3 detik */
    animation: reveal-fallback 0s 3s forwards;
}

@keyframes reveal-fallback {
    to { opacity: 1; transform: translateY(0); }
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}

/* =========================================
   GRID SYSTEM — CSS Custom Property based
   Grid menggunakan --cols agar media query
   bisa override inline style dari PHP
   ========================================= */

.programs-grid {
    grid-template-columns: repeat(var(--cols, 3), 1fr);
}
.testimonials-grid {
    grid-template-columns: repeat(var(--cols, 3), 1fr);
}
.blog-grid {
    grid-template-columns: repeat(var(--cols, 3), 1fr);
}

/* Team grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 2rem;
}

/* =========================================
   RESPONSIVE — Tablet (≤ 1024px)
   ========================================= */
@media (max-width: 1024px) {
    .footer-grid           { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
    .gallery-grid          { grid-template-columns: repeat(3, 1fr); }
    .donation-grid         { grid-template-columns: 1fr; }
    .about-grid            { grid-template-columns: 1fr; }
    .hero-image-side       { display: none; }

    /* Override --cols untuk grid 3-kolom → 2-kolom */
    .programs-grid,
    .testimonials-grid,
    .blog-grid             { --cols: 2; }

    .team-grid             { --cols: 2; }
}

/* ---- Clickable banner & about image links ---- */
.hero-banner-link {
    display: block;
    cursor: pointer;
}
.hero-banner-link:hover .hero-banner-img {
    opacity: 0.88;
    transform: scale(1.02);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.hero-banner-img {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.about-image-link {
    display: block;
    cursor: pointer;
}
.about-image-link:hover img {
    opacity: 0.88;
}
.about-image-link img {
    transition: opacity 0.25s ease;
}

/* Per-slide link in about slider */
.asl-slide-link {
    display: block;
    cursor: pointer;
    line-height: 0;
}
.asl-slide-link:hover img {
    opacity: 0.88;
    transition: opacity 0.25s ease;
}

/* =========================================
   RESPONSIVE — Mobile (≤ 768px)
   ========================================= */
@media (max-width: 768px) {
    :root { --header-height: 60px; }

    /* --- Navigation ----------------------------------------- */
    .main-nav              { display: none; }

    /* Tampilkan tombol donasi versi compact di mobile */
    .header-donate-btn {
        display: inline-flex !important;
        padding: 0.35rem 0.65rem !important;
        font-size: 0.72rem !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Tampilkan hamburger */
    .menu-toggle           { display: flex !important; }

    /* --- Semua grid utama → 1 kolom ------------------------- */
    .programs-grid,
    .testimonials-grid,
    .blog-grid             { --cols: 1; }

    .team-grid             { --cols: 2; }

    /* --- About ---------------------------------------------- */
    .about-grid            { grid-template-columns: 1fr; }
    .about-content         { order: 1; }
    .about-image-wrap      { order: 2; margin-bottom: 0; margin-top: var(--space-8); }
    .about-img-secondary   { display: none; }
    .about-badge-floating  { bottom: -16px; }
    .about-values          { grid-template-columns: 1fr 1fr; gap: var(--space-4); }

    /* --- Gallery -------------------------------------------- */
    .gallery-grid          { grid-template-columns: repeat(2, 1fr); }
    .gallery-item.featured { grid-column: span 2; }

    /* --- Donation ------------------------------------------- */
    .donation-grid         { grid-template-columns: 1fr; }
    .donation-stats        { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    .amount-presets        { grid-template-columns: repeat(2, 1fr); }

    /* --- Partners ------------------------------------------- */
    .partners-section      { padding: var(--space-8) 0; }
    .partners-row          { gap: var(--space-6); justify-content: center; flex-wrap: wrap; }
    .partner-logo          { max-height: 40px; max-width: 100px; }

    /* --- Hero ----------------------------------------------- */
    .hero-section          { min-height: 90vh; padding-top: var(--space-10); }
    .hero-content          { max-width: 100%; text-align: center; }
    .hero-badge            { margin-left: auto; margin-right: auto; }
    .hero-actions          { flex-direction: column; align-items: center; gap: var(--space-3); }
    .hero-actions .btn     { width: 100%; justify-content: center; text-align: center; }
    .hero-stats            { justify-content: center; gap: var(--space-6); flex-wrap: wrap; }
    .hero-stat-item        { min-width: 80px; }

    /* --- CTA ------------------------------------------------ */
    .cta-section .container { text-align: center; }
    .cta-actions           { flex-direction: column; align-items: center; gap: var(--space-3); }
    .cta-actions .btn      { width: 100%; max-width: 320px; justify-content: center; }

    /* --- Section padding ------------------------------------ */
    .section-padding       { padding: var(--space-14) 0; }
    .section-header        { margin-bottom: var(--space-10); }

    /* --- Footer --------------------------------------------- */
    .footer-grid           { grid-template-columns: 1fr; gap: var(--space-8); }
    .footer-bottom         { flex-direction: column; text-align: center; gap: var(--space-3); }
    .footer-bottom-links   { justify-content: center; flex-wrap: wrap; }

    /* --- Cards ---------------------------------------------- */
    .program-card-img      { height: 200px; }
    .blog-card-img         { height: 200px; }

    /* --- Testimonial ---------------------------------------- */
    .testimonial-card      { padding: var(--space-6); }

    /* --- Page header ---------------------------------------- */
    .page-header           { padding: var(--space-12) 0 var(--space-8); }
    .page-header h1        { font-size: clamp(1.75rem, 6vw, 2.5rem); }
}

/* =========================================
   RESPONSIVE — Small Mobile (≤ 480px)
   ========================================= */
@media (max-width: 480px) {
    .container             { padding: 0 var(--space-4); }

    /* --- Team → 1 kolom ------------------------------------- */
    .team-grid             { --cols: 1; }

    /* --- About values → 1 kolom ----------------------------- */
    .about-values          { grid-template-columns: 1fr; }

    /* --- Donation stats → 1 kolom --------------------------- */
    .donation-stats        { grid-template-columns: 1fr 1fr; }

    /* --- Gallery → 1 kolom ---------------------------------- */
    .gallery-grid          { grid-template-columns: 1fr; }
    .gallery-item.featured { grid-column: span 1; }

    /* --- Hero ---------------------------------------------- */
    .hero-section          { min-height: auto; padding: 4.5rem 0 var(--space-12); }
    .hero-stats            { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    .hero-stat-item        { text-align: center; }
    .hero-stat-num         { font-size: var(--text-2xl); }

    main#main-content {
        padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 1rem);
    }

    body.admin-bar main#main-content {
        padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 46px + 1rem);
    }

    .page-header {
        padding-top: calc(var(--space-12) + 1rem);
    }

    /* --- Misc ---------------------------------------------- */
    .scroll-top            { bottom: var(--space-4); right: var(--space-4); width: 40px; height: 40px; }
    .section-padding       { padding: var(--space-10) 0; }
    .badge                 { font-size: 11px; }

    /* --- Donation form ------------------------------------- */
    .amount-btn            { font-size: var(--text-sm); padding: var(--space-2) var(--space-2); }
    .amount-presets        { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
    .donation-type-tabs    { gap: var(--space-1); }

    /* --- Footer -------------------------------------------- */
    .footer-social         { justify-content: center; }
    .footer-bottom-links   { gap: var(--space-3); }

    /* --- Buttons ------------------------------------------- */
    .btn-lg                { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); }
}

/* =========================================
   RESPONSIVE — Extra Small (≤ 360px)
   ========================================= */
@media (max-width: 360px) {
    .hero-stats            { grid-template-columns: 1fr 1fr; }
    .donation-stats        { grid-template-columns: 1fr 1fr; }
    .amount-presets        { grid-template-columns: 1fr 1fr; }
    .team-grid             { --cols: 1; }
    .footer-bottom-links   { flex-direction: column; align-items: center; gap: var(--space-2); }
}

/* =============================================================
   Gutenberg Block Content — Full-Width Support
   ============================================================= */

/* Hapus padding/margin default WordPress di block content */
.entry-content--blocks {
    margin: 0;
    padding: 0;
}

/* Semua blok normal (non-full/wide) dapat padding & centering otomatis */
.entry-content--blocks > * {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

/* Full-width: keluar dari padding, full viewport */
.entry-content--blocks > .alignfull,
.entry-content--blocks > [data-align="full"],
.entry-content--blocks > .wp-block[data-align="full"] {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Wide: lebih lebar tapi tetap ada batas */
.entry-content--blocks > .alignwide,
.entry-content--blocks > [data-align="wide"],
.entry-content--blocks > .wp-block[data-align="wide"] {
    max-width: 1200px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: auto;
    margin-right: auto;
}

/* Custom yayasan blocks: full width tanpa padding */
.entry-content--blocks > .wp-block-yayasan-hero,
.entry-content--blocks > .wp-block-yayasan-about,
.entry-content--blocks > .wp-block-yayasan-program,
.entry-content--blocks > .wp-block-yayasan-donation,
.entry-content--blocks > .wp-block-yayasan-testimonial,
.entry-content--blocks > .wp-block-yayasan-gallery,
.entry-content--blocks > .wp-block-yayasan-blog-preview,
.entry-content--blocks > .wp-block-yayasan-cta,
.entry-content--blocks > .don-page-wrap,
.entry-content--blocks > section {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Semua section yayasan sudah mengatur padding sendiri */
.entry-content--blocks .wp-block-yayasan-hero,
.entry-content--blocks .wp-block-yayasan-about,
.entry-content--blocks .wp-block-yayasan-program,
.entry-content--blocks .wp-block-yayasan-donation,
.entry-content--blocks .wp-block-yayasan-testimonial,
.entry-content--blocks .wp-block-yayasan-gallery,
.entry-content--blocks .wp-block-yayasan-blog-preview,
.entry-content--blocks .wp-block-yayasan-cta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =============================================================
   MOBILE RESPONSIVE FIX — v1.1
   Semua layout 3-kolom/4-kolom desktop → 1-kolom di mobile
   ============================================================= */

/* ---- Touch targets minimum 44px ---- */
@media (max-width: 768px) {
    button, .btn, a.btn,
    input[type="submit"], input[type="button"] {
        min-height: 44px;
        touch-action: manipulation;
    }
    /* Exception: hamburger size is self-contained */
    .menu-toggle {
        min-height: 40px !important;
        height: 40px !important;
    }

    /* Input fields lebih mudah di-tap */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    select, textarea {
        min-height: 44px;
        font-size: 16px !important; /* Cegah auto-zoom iOS */
        padding: 10px 14px !important;
    }
}

/* ---- Header mobile: layout bersih ---- */
@media (max-width: 768px) {
    .site-header .container {
        padding: 0 1rem;
    }
    .header-inner {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        overflow: visible;   /* jangan clip — biarkan dropdown muncul */
    }
    /* Logo ambil sisa ruang, tapi tidak overflow ke kanan */
    .site-logo {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    .site-logo img,
    .site-logo .custom-logo {
        max-height: 40px;
        width: auto;
    }
    .site-logo .text-logo {
        font-size: 0.95rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    /* header-cta hanya muat: icon-search + hamburger */
    .header-cta {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex-shrink: 0;
    }
    /* Icon search lebih kecil supaya tidak makan tempat */
    .icon-btn {
        width: 38px;
        height: 38px;
    }
    /* Hamburger */
    .menu-toggle {
        display: flex;
        width: 40px;
        height: 40px;
        min-height: 40px !important;
        padding: 8px;
        flex-shrink: 0;
        color: #1a1a1a;
    }
    .menu-toggle-icon {
        width: 22px;
        height: 22px;
        color: #1a1a1a;
    }
    /* Search dropdown di mobile — full width, di bawah header */
    .header-search {
        padding: 0.75rem 1rem;
    }
    .search-wrap {
        gap: 0.5rem;
    }
    .search-wrap .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

/* ---- PROGRAMS GRID: 3 kolom → 1 kolom mobile ---- */
@media (max-width: 768px) {
    .programs-grid {
        grid-template-columns: 1fr !important;
        --cols: 1 !important;
        gap: var(--space-6);
    }
    .program-card {
        max-width: 100%;
    }
}

/* ---- TESTIMONIALS GRID: 3 kolom → 1 kolom mobile ---- */
@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        --cols: 1 !important;
        gap: var(--space-6);
    }
}

/* ---- BLOG GRID: 3 kolom → 1 kolom mobile ---- */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr !important;
        --cols: 1 !important;
        gap: var(--space-6);
    }
    .blog-card-img {
        height: 220px;
    }
}

/* ---- GALLERY GRID: 4 kolom → 1 kolom mobile ---- */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-3);
    }
    .gallery-item.featured {
        grid-column: span 2;
        grid-row: span 1;
    }
}
@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr !important;
    }
    .gallery-item.featured {
        grid-column: span 1;
    }
}

/* ---- TEAM GRID: 4 kolom → 1 kolom mobile ---- */
@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        --cols: 2 !important;
        gap: var(--space-5);
    }
}
@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr !important;
        --cols: 1 !important;
    }
}

/* ---- FOOTER GRID: 4 kolom → 1 kolom mobile ---- */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-8);
    }
}

/* ---- ABOUT GRID: 2 kolom → 1 kolom mobile ---- */
@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-8);
    }
    /* Hapus padding container khusus about-section agar gambar bisa full-bleed */
    .about-section .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Kembalikan padding ke bagian konten teks saja */
    .about-content {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
    .about-section .section-header {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
    .about-image-wrap {
        width: 100%;
        margin-bottom: var(--space-6);
    }
    .about-img-main {
        width: 100%;
        display: block;
    }
    .about-badge-floating {
        left: 16px !important;
        top: auto !important;
        bottom: -16px !important;
        right: auto !important;
        width: auto !important;
        max-width: 130px !important;
        padding: var(--space-2) var(--space-3) !important;
    }
    .about-badge-floating .num {
        font-size: var(--text-xl) !important;
    }
    .about-badge-floating .label {
        font-size: 0.6rem !important;
    }
    .about-values {
        grid-template-columns: 1fr !important;
        gap: var(--space-3);
    }
}

/* ---- DONATION GRID: 2 kolom → 1 kolom mobile ---- */
@media (max-width: 768px) {
    .donation-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-6);
    }
    .donation-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-3);
    }
    .amount-presets {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-2);
    }
    .donation-form-card {
        padding: var(--space-5);
    }
}

/* ---- HERO: full-width mobile ---- */
@media (max-width: 768px) {
    .hero-section {
        min-height: auto;
        /* Tambah padding ekstra agar badge tidak terpotong oleh fixed header */
        padding: 4rem 0 3rem;
        text-align: center;
    }
    .hero-content {
        max-width: 100%;
        text-align: center;
    }
    .hero-badge {
        margin: 0 auto var(--space-4);
    }
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
        justify-items: center;
        margin-top: var(--space-8);
    }
}

/* ---- SECTION PADDING: lebih kecil di mobile ---- */
@media (max-width: 768px) {
    .section-padding {
        padding: 3rem 0;
    }
    .section-padding-sm {
        padding: 2rem 0;
    }
    .section-header {
        margin-bottom: 2rem;
    }
    .section-header h2 {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }
}

/* ---- CONTAINER padding mobile ---- */
@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
}

/* ---- MOBILE NAV: sudah di-handle CSS utama di atas ---- */

/* ---- SINGLE/PAGE: sidebar mobile ---- */
@media (max-width: 768px) {
    .content-area,
    .single-content,
    .page-content {
        padding: 0 !important;
    }
    .sidebar {
        margin-top: var(--space-8);
    }
}

/* ---- IMAGE: pastikan tidak overflow ---- */
img, video, iframe, embed {
    max-width: 100%;
    height: auto;
}

/* ---- TABLE: scroll horizontal di mobile ---- */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ---- SCROLL TOP button: positioning mobile ---- */
@media (max-width: 480px) {
    .scroll-top {
        bottom: 1rem !important;
        right: 1rem !important;
        width: 40px !important;
        height: 40px !important;
    }
}

/* ---- CTA SECTION mobile ---- */
@media (max-width: 768px) {
    .cta-section .container {
        text-align: center;
    }
    .cta-actions {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }
    .cta-actions .btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

/* ---- PARTNERS mobile ---- */
@media (max-width: 768px) {
    .partners-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-5);
    }
    .partner-logo {
        max-height: 40px;
        max-width: 100px;
    }
}


/* =============================================================
   SAFE AREA — iPhone notch / Dynamic Island support
   ============================================================= */
.site-header {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.mobile-nav {
    padding-bottom: env(safe-area-inset-bottom, 1rem);
}

.scroll-top {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    right: calc(1rem + env(safe-area-inset-right, 0px));
}

/* Floating WhatsApp — lihat inc/whatsapp.php untuk style lengkap */
/* .floating-wa sudah diganti dengan .fwa-wrapper / .fwa-btn / .fwa-bubble */

/* =============================================================
   TEMA WARNA DINAMIS — override dari customizer CSS variables
   Pastikan semua elemen menggunakan var() yang bisa dikustomisasi
   ============================================================= */

/* Header menggunakan var(--color-navbar-bg) & var(--color-navbar-text) */
.site-header {
    background: var(--color-navbar-bg, var(--color-white)) !important;
}
.nav-menu > li > a,
.menu-item > a {
    color: var(--color-navbar-text, var(--color-gray-800));
}
.nav-menu > li > a:hover,
.menu-item > a:hover {
    color: var(--color-primary);
}

/* Footer menggunakan var(--color-footer-bg) & var(--color-footer-text) */
.site-footer {
    background: var(--color-footer-bg, var(--color-dark)) !important;
    color: var(--color-footer-text, var(--color-gray-400)) !important;
}
.site-footer p,
.site-footer li,
.site-footer span,
.footer-text,
.footer-desc,
.footer-link,
.copyright-text {
    color: var(--color-footer-text, var(--color-gray-400)) !important;
}
.site-footer a {
    color: var(--color-footer-text, var(--color-gray-400)) !important;
    opacity: .85;
}
.site-footer a:hover {
    color: var(--color-primary-light, var(--color-primary)) !important;
    opacity: 1;
}
.footer-heading,
.footer-title,
.footer-brand .text-logo {
    color: #fff !important;
    opacity: 1 !important;
}

/* Body background */
body {
    background-color: var(--color-white, #fff);
    color: var(--color-gray-800, #1f2937);
}

/* Section alternating background */
.section-alt,
.bg-alt,
.section-gray {
    background: var(--color-off-white, var(--color-gray-50, #f9fafb));
}

/* Tombol primer */
.btn-primary,
.btn.btn-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* Tombol sekunder */
.btn-secondary,
.btn.btn-secondary {
    background: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}
.btn-secondary:hover {
    background: var(--color-secondary-dark) !important;
}

/* Link */
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-gray-900, #111827);
}

/* Badge / tag primer */
.badge-primary,
.tag-primary,
.section-badge {
    background: rgba(var(--color-primary-rgb, 26,107,74), .1);
    color: var(--color-primary);
}

/* Card border accent */
.card-accent { border-top-color: var(--color-primary); }

/* Progress bar */
.progress-fill,
.campaign-progress-fill {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)) !important;
}

/* Donation amount selected */
.amount-btn.active,
.amount-btn:checked + label {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Form focus */
input:focus, select:focus, textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 26,107,74), .12) !important;
}

/* Scrollbar accent */
::-webkit-scrollbar-thumb {
    background: var(--color-primary-light, #2d9b6f);
    border-radius: 9999px;
}

/* =============================================================
   SIDEBAR WIDGETS — mobile-friendly
   ============================================================= */
.widget {
    background: var(--color-off-white, #f9fafb);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.widget-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--color-gray-900);
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}
.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget ul li {
    padding: .5rem 0;
    border-bottom: 1px solid var(--color-gray-100);
    font-size: .9rem;
}
.widget ul li:last-child { border-bottom: none; }
.widget ul li a {
    color: var(--color-gray-700);
    text-decoration: none;
}
.widget ul li a:hover { color: var(--color-primary); }

/* Search widget */
.widget_search .search-form {
    display: flex;
    gap: .5rem;
}
.widget_search .search-field {
    flex: 1;
    padding: .625rem .875rem;
    border: 1.5px solid var(--color-gray-200);
    border-radius: .5rem;
    font-size: .9rem;
    min-height: 44px;
}
.widget_search .search-submit {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding: 0 1rem;
    cursor: pointer;
    min-height: 44px;
    font-size: .875rem;
}
.widget_search .search-submit:hover {
    background: var(--color-primary-dark);
}

@media (max-width: 768px) {
    .widget { padding: 1.25rem; }
    .widget ul li { font-size: .875rem; padding: .4rem 0; }
}

/* =============================================================
   GLOBAL OVERFLOW FIX — cegah horizontal scroll di semua halaman
   ============================================================= */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }

/* Semua elemen tidak boleh lebih lebar dari layar */
img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto;
}

/* Container tidak overflow */
.container, .wrap, .section-padding, main, article, aside {
    min-width: 0;
    box-sizing: border-box;
}

/* Grid/flex children tidak overflow */
.sp-layout > * { min-width: 0; overflow: hidden; }

/* =============================================================
   FOOTER — Mobile Responsive Fix
   ============================================================= */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 2.5rem;
    font-size: .8rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom-links {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.footer-bottom-links a {
    color: rgba(255,255,255,.5) !important;
    text-decoration: none;
    font-size: .78rem;
}
.footer-bottom-links a:hover { color: rgba(255,255,255,.85) !important; }

@media (max-width: 480px) {
    .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
    .footer-social { flex-wrap: wrap; gap: .5rem; }
}

/* =============================================================
   PAGE HEADER — overflow fix
   ============================================================= */
.page-header { overflow: hidden; }
.page-header-content h1 {
    font-size: clamp(1.3rem, 5vw, 2.5rem);
    word-break: break-word;
    overflow-wrap: break-word;
}
.page-header-content p {
    font-size: clamp(.875rem, 3vw, 1.1rem);
    overflow-wrap: break-word;
}

/* =============================================================
   BREADCRUMB — tidak overflow
   ============================================================= */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    font-size: .8rem;
    overflow: hidden;
}
.breadcrumb a, .breadcrumb span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* =============================================================
   PAGINATION — mobile
   ============================================================= */
.pagination, .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    justify-content: center;
    padding: 1rem 0;
}
.pagination .page-numbers,
.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 .5rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 600;
    background: var(--color-off-white, #f9fafb);
    color: var(--color-gray-700);
    text-decoration: none;
    transition: all .2s;
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
    background: var(--color-primary);
    color: #fff;
}
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
    background: var(--color-primary);
    color: #fff;
}

/* =============================================================
   DYNAMIC COLOR OVERRIDES
   Pastikan semua elemen ikut warna tema dari customizer
   ============================================================= */

/* Hero section */
.hero-section,
[class*="hero-section"] {
    background: var(--color-gradient-hero, linear-gradient(135deg, #0e4d35, #1a6b4a, #0e7bc1)) !important;
}

/* About image placeholder */
.about-image-placeholder,
.about-img-placeholder {
    background: var(--color-gradient-card) !important;
}

/* CTA sections */
.cta-section,
[class*="cta-section"] {
    background: var(--color-gradient-cta, linear-gradient(135deg,#0e4d35,#1a6b4a 50%,#0a5d93)) !important;
}

/* Don hero specific */
.don-hero,
.don-form-section__bg,
.don-cta-section__bg {
    background: var(--color-gradient-hero) !important;
}
.don-hero__blob--2 {
    background: var(--color-secondary) !important;
}
.don-step__number,
.don-testi-avatar--placeholder {
    background: var(--color-gradient-card) !important;
}

/* Btn accent (gold/yellow) ikut warna aksen */
.btn-accent {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}
.btn-accent:hover {
    background: var(--color-accent-dark) !important;
    border-color: var(--color-accent-dark) !important;
}

/* Donation button text color on white bg */
.btn-don-primary {
    color: var(--color-primary) !important;
}

/* Team/testimonials avatar circles */
[style*="linear-gradient(135deg,#1a6b4a"],
[style*="linear-gradient(135deg, #1a6b4a"] {
    background: var(--color-gradient-card) !important;
}

/* Step numbers & badge gradients */
.step-number,
.stat-icon-bg {
    background: var(--color-gradient-card) !important;
}

/* Scroll top button */
.scroll-top {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Floating WA — style diatur di inc/whatsapp.php (injected via wp_footer) */
.fwa-btn { background: #25d366 !important; }

/* Active/selected states */
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-parent > a {
    color: var(--color-primary) !important;
}

/* Blog card hover border */
.blog-card:hover,
.program-card:hover {
    border-color: var(--color-primary) !important;
}

/* Don-testi stars — ikut aksen */
.don-testi-stars {
    color: var(--color-accent) !important;
}

/* =========================================
   PAGE & POST CONTENT — Layout & Spacing v2
   Desktop: teks lebih ke tengah dengan max-width
   Mobile: margin atas/bawah/samping yang nyaman
   ========================================= */

/* === DESKTOP: Page content (non-block) === */
.entry-content--classic {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
}

/* === DESKTOP: Single post content === */
.single-article .entry-content {
    max-width: 720px;
    margin: 0 auto;
}

/* === MOBILE ≤768px === */
@media (max-width: 768px) {

    /* Container semua halaman */
    .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Block content: padding samping untuk teks biasa */
    .entry-content--blocks > * {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Full/wide blocks: tetap tanpa padding samping */
    .entry-content--blocks > .alignfull,
    .entry-content--blocks > [data-align="full"],
    .entry-content--blocks > .wp-block[data-align="full"],
    .entry-content--blocks > .wp-block-yayasan-hero,
    .entry-content--blocks > .wp-block-yayasan-about,
    .entry-content--blocks > .wp-block-yayasan-program,
    .entry-content--blocks > .wp-block-yayasan-donation,
    .entry-content--blocks > .wp-block-yayasan-testimonial,
    .entry-content--blocks > .wp-block-yayasan-gallery,
    .entry-content--blocks > .wp-block-yayasan-blog-preview,
    .entry-content--blocks > .wp-block-yayasan-cta,
    .entry-content--blocks > .don-page-wrap,
    .entry-content--blocks > section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Classic page/post */
    .entry-content--classic {
        padding: 0 1.25rem !important;
        max-width: 100% !important;
    }

    /* Single post */
    .single-article .entry-content {
        font-size: 1rem !important;
        line-height: 1.8 !important;
    }

    /* Section padding atas/bawah lebih compact */
    .section-padding {
        padding: 2.5rem 0 !important;
    }

    /* Page header */
    .page-header {
        padding: 2rem 0 1.5rem !important;
    }

    /* Featured image */
    .sp-feat-img {
        border-radius: .625rem;
        margin-bottom: 1.5rem;
    }
}

/* === SMALL MOBILE ≤480px === */
@media (max-width: 480px) {

    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Block content: padding samping */
    .entry-content--blocks > * {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Full/wide blocks tetap tanpa padding samping */
    .entry-content--blocks > .alignfull,
    .entry-content--blocks > [data-align="full"],
    .entry-content--blocks > .wp-block[data-align="full"],
    .entry-content--blocks > .wp-block-yayasan-hero,
    .entry-content--blocks > .wp-block-yayasan-about,
    .entry-content--blocks > .wp-block-yayasan-program,
    .entry-content--blocks > .wp-block-yayasan-donation,
    .entry-content--blocks > .wp-block-yayasan-testimonial,
    .entry-content--blocks > .wp-block-yayasan-gallery,
    .entry-content--blocks > .wp-block-yayasan-blog-preview,
    .entry-content--blocks > .wp-block-yayasan-cta,
    .entry-content--blocks > .don-page-wrap,
    .entry-content--blocks > section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Classic page */
    .entry-content--classic {
        padding: 0 1rem !important;
        max-width: 100% !important;
    }

    .section-padding {
        padding: 2rem 0 !important;
    }

    .page-header {
        padding: 1.5rem 0 1.25rem !important;
    }

    /* Typography scale mobile */
    .entry-content--classic,
    .single-article .entry-content {
        font-size: .9375rem !important;
        line-height: 1.75 !important;
    }

    .entry-content h1 { font-size: 1.5rem !important; }
    .entry-content h2 { font-size: 1.25rem !important; }
    .entry-content h3 { font-size: 1.1rem !important; }

    .entry-content blockquote {
        margin: 1rem 0 !important;
        padding: .75rem 1rem !important;
        font-size: .9rem !important;
    }
}



/* ==============================================
   IMAGE BANNER SLIDER — yayasan/image-slider
   ============================================== */
.yayasan-image-slider-section {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.yayasan-image-slider-section .swiper {
    width: 100%;
}
.yis-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yis-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.yis-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 720px;
    padding: 2rem 1.5rem;
    margin: 0 auto;
}
.yis-heading {
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
    margin: 0 0 1rem;
    line-height: 1.2;
}
.yis-desc {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255,255,255,.88);
    text-shadow: 0 1px 6px rgba(0,0,0,.3);
    margin: 0 auto 1.75rem;
    max-width: 600px;
    line-height: 1.7;
}
.yis-btn {
    display: inline-block;
    padding: .85rem 2.25rem;
    background: var(--color-primary, #1a6b4a);
    color: #fff;
    border-radius: var(--radius-full, 9999px);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
}
.yis-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(0,0,0,.3);
    color: #fff;
}
.yis-arrow {
    color: #ffffff;
    --swiper-navigation-size: 28px;
}
.yis-arrow::after {
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* Natural (no-crop) image mode */
.yis-slide-natural {
    display: grid;
    min-height: 0 !important;
}
.yis-slide-natural > * {
    grid-area: 1 / 1;
}
.yis-bg-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: fill;
}
.yis-slide-natural .yis-overlay {
    position: relative;
    z-index: 1;
}
.yis-slide-natural .yis-content {
    align-self: center;
    justify-self: center;
}
/* Whole-slide clickable link */
.yis-slide-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    cursor: pointer;
}
.yis-slide .yis-btn {
    position: relative;
    z-index: 10;
}
.yis-pagination .swiper-pagination-bullet {
    background: rgba(255,255,255,.6);
    width: 10px;
    height: 10px;
    opacity: 1;
    transition: background .25s, width .25s;
}
.yis-pagination .swiper-pagination-bullet-active {
    background: #ffffff;
    width: 28px;
    border-radius: 5px;
}
@media (max-width: 640px) {
    .yis-content { padding: 1.5rem 1rem; }
    .yis-btn { padding: .7rem 1.75rem; font-size: .9rem; }
}


/* ==============================================
   VIDEO SLIDER — yayasan/video-slider
   ============================================== */
.yayasan-video-slider-section {
    overflow: hidden;
}
.yayasan-video-slider {
    overflow: visible;
    padding-bottom: 3.5rem;
}
.yvs-slide {
    height: auto;
}
.yvs-card {
    background: #1a1f2e;
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    transition: transform .3s, box-shadow .3s;
}
.yayasan-video-slider .swiper-slide-active .yvs-card,
.yayasan-video-slider .swiper-slide-duplicate-active .yvs-card {
    transform: scale(1);
    box-shadow: 0 28px 80px rgba(0,0,0,.5);
}
.yayasan-video-slider .swiper-slide:not(.swiper-slide-active) .yvs-card {
    transform: scale(0.94);
    opacity: .75;
}
.yvs-video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #0a0c14;
}
.yvs-video-wrap iframe,
.yvs-video-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.yvs-video-wrap.yvs-yt iframe {
    border-radius: 0;
}
.yvs-video-wrap.yvs-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
    min-height: 260px;
    background: linear-gradient(135deg, #1a6b4a22, #0e7bc122);
}
.yvs-info {
    padding: 1.25rem 1.5rem 1.5rem;
}
.yvs-title {
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 .4rem;
}
.yvs-caption {
    font-size: .875rem;
    color: rgba(255,255,255,.6);
    margin: 0;
    line-height: 1.5;
}
.yvs-arrow {
    color: #ffffff;
    --swiper-navigation-size: 24px;
}
.yvs-pagination .swiper-pagination-bullet {
    background: rgba(255,255,255,.4);
    opacity: 1;
    transition: background .25s, width .25s;
}
.yvs-pagination .swiper-pagination-bullet-active {
    background: var(--color-primary, #1a6b4a);
    width: 28px;
    border-radius: 5px;
}
@media (max-width: 767px) {
    .yayasan-video-slider .swiper-slide:not(.swiper-slide-active) .yvs-card {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================
   BODY LOCK — saat mobile menu terbuka
   Menggunakan position:fixed bukan overflow:hidden
   agar touch events tetap berfungsi di iOS Safari
   ========================================== */
body.menu-open {
    position: fixed;
    width: 100%;
    overflow-y: scroll; /* jaga layout tidak shift */
}

/* Pastikan tombol di mobile-nav selalu bisa diklik */
.mobile-nav-footer,
.mobile-nav-footer a,
.mobile-nav-footer button,
.mobile-nav a {
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    cursor: pointer;
}

/* =============================================================
   FIX: Tombol Donasi di Footer Mobile — tidak bisa diklik
   Root cause: .fwa-wrapper (floating WA) pointer-events tidak
   di-set, sehingga area transparan 300px-nya menutupi footer.
   Fix utama ada di inc/whatsapp.php (.fwa-wrapper pointer-events:none)
   CSS ini sebagai lapisan pengaman tambahan.
   ============================================================= */

/* Lapisan pengaman: tombol donasi di site-footer selalu bisa diklik */
.site-footer .btn,
.site-footer .btn-primary,
.site-footer a.btn {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(26,107,74,.2);
    cursor: pointer !important;
}

/* Mobile: tambah padding bawah di footer agar tombol donasi
   tidak tertutup oleh floating WA button (56px + margin) */
@media (max-width: 768px) {
    .footer-grid {
        padding-bottom: calc(var(--space-16) + 5rem);
    }
    
    /* Tombol donasi footer — pastikan full clickable di mobile */
    .footer-widget .btn.btn-primary {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(26,107,74,.2);
        cursor: pointer !important;
        position: relative;
        z-index: 10;
        /* Perluas area tap ke kiri agar tidak tercovit WA button */
        width: 100% !important;
    }
}

/* =========================================
   SINGLE CAMPAIGN — FORM DONASI CAMPAIGN
   v1.3.0
   ========================================= */

/* Breadcrumbs di page header */
.breadcrumbs { font-size: .8rem; color: rgba(255,255,255,.75); margin-bottom: .5rem; }
.breadcrumbs a { color: rgba(255,255,255,.85); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }

/* Badge campaign locked */
.scp-don-campaign-badge {
    display: flex; align-items: center; gap: .5rem;
    background: linear-gradient(135deg, var(--color-primary-dark, #0f4c2e), var(--color-primary, #1a6b4a));
    color: #fff; border-radius: .75rem; padding: .65rem 1rem;
    font-size: .82rem; font-weight: 600; margin-bottom: 1.25rem;
    line-height: 1.4;
}
.scp-don-campaign-badge .icon { font-size: 1rem; flex-shrink: 0; }
.scp-don-campaign-badge .lbl  { opacity: .8; font-size: .7rem; font-weight: 400; display: block; }
.scp-don-campaign-badge .name { display: block; font-size: .88rem; }

/* Card form donasi campaign */
.scp-don-card {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.12);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-gray-100, #f3f4f6);
}
.scp-don-card h3 {
    font-size: 1.1rem; font-weight: 700; text-align: center;
    margin: 0 0 1.25rem; color: var(--color-gray-900, #111827);
}

/* Type tabs campaign */
.scp-don-tabs {
    display: flex; background: var(--color-gray-100, #f3f4f6);
    border-radius: .5rem; padding: 3px; margin-bottom: 1.1rem;
}
.scp-don-tab {
    flex: 1; padding: .45rem .5rem; border-radius: .35rem;
    font-size: .82rem; font-weight: 600; border: none;
    background: transparent; cursor: pointer;
    transition: all .18s; color: var(--color-gray-500, #6b7280);
}
.scp-don-tab.active {
    background: #fff; color: var(--color-primary, #1a6b4a);
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* Preset nominal campaign */
.scp-don-presets {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .45rem; margin-bottom: .65rem;
}
.scp-don-preset {
    padding: .45rem .25rem; border: 2px solid var(--color-gray-200, #e5e7eb);
    border-radius: .5rem; font-size: .78rem; font-weight: 600;
    background: #fff; color: var(--color-gray-700, #374151);
    cursor: pointer; text-align: center; transition: all .15s;
}
.scp-don-preset:hover, .scp-don-preset.active {
    border-color: var(--color-primary, #1a6b4a);
    background: var(--color-primary, #1a6b4a);
    color: #fff;
}

/* Input campaign */
.scp-don-group { margin-bottom: .9rem; }
.scp-don-label {
    display: block; font-size: .78rem; font-weight: 600;
    color: var(--color-gray-600, #4b5563); margin-bottom: .3rem;
}
.scp-don-input {
    width: 100%; padding: .6rem .875rem;
    border: 1.5px solid var(--color-gray-200, #e5e7eb);
    border-radius: .625rem; font-size: .875rem;
    background: #fff; color: var(--color-gray-900, #111827);
    transition: border-color .15s; outline: none;
    box-sizing: border-box;
}
.scp-don-input:focus {
    border-color: var(--color-primary, #1a6b4a);
    box-shadow: 0 0 0 3px rgba(26,107,74,.1);
}

/* Checkbox anonim campaign */
.scp-don-anon {
    display: flex; align-items: center; gap: .5rem;
    font-size: .82rem; cursor: pointer; color: var(--color-gray-600, #4b5563);
    margin-bottom: 1rem;
}
.scp-don-anon input[type="checkbox"] {
    width: 15px; height: 15px; accent-color: var(--color-primary, #1a6b4a);
}

/* Submit campaign */
.scp-don-submit {
    width: 100%; padding: .85rem 1rem;
    background: linear-gradient(135deg, var(--color-primary-dark, #0f4c2e), var(--color-primary, #1a6b4a));
    color: #fff; border: none; border-radius: .875rem;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    transition: opacity .2s, transform .1s; display: block; margin-bottom: .75rem;
}
.scp-don-submit:hover   { opacity: .92; transform: translateY(-1px); }
.scp-don-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* WA campaign */
.scp-don-wa {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    background: #25d366; color: #fff; border-radius: .875rem;
    padding: .75rem; font-weight: 700; font-size: .85rem;
    text-decoration: none; margin-bottom: .75rem; transition: opacity .2s;
}
.scp-don-wa:hover { opacity: .9; color: #fff; }

/* Secure tag */
.scp-don-secure {
    text-align: center; font-size: .72rem;
    color: var(--color-gray-400, #9ca3af); margin: 0;
}

/* Bottom section header */
.scp-don-bottom-header {
    background: linear-gradient(135deg, var(--color-primary-dark, #0f4c2e), var(--color-primary, #1a6b4a));
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 1.5rem 1.75rem 1rem; color: #fff; text-align: center;
}
.scp-don-bottom-header h2 { color: #fff; font-size: 1.4rem; margin: 0 0 .35rem; }
.scp-don-bottom-header p  { color: rgba(255,255,255,.85); font-size: .875rem; margin: 0; }
.scp-don-bottom .scp-don-card {
    border-radius: 0 0 1.25rem 1.25rem;
    border-top: none; box-shadow: 0 12px 40px rgba(0,0,0,.1); margin-bottom: 0;
}

/* Progress bar single campaign */
.scp-progress-fill {
    height: 100%; border-radius: 9999px;
    background: linear-gradient(90deg, var(--color-primary-dark, #0f4c2e), var(--color-primary, #1a6b4a));
    transition: width .8s ease;
}


/* =============================================================
   FIX: Header overlap & page-header spacing — semua halaman
   Menggantikan aturan konflik dari blok-blok sebelumnya.
   Pastikan blok ini selalu ada di PALING BAWAH style.css.
   v2.1 — 2026-05
   ============================================================= */

/* ── 1. Tinggi header per breakpoint ── */
:root                    { --header-height: 80px; }
@media (max-width: 768px){ :root { --header-height: 60px; } }

/* ── 2. Main content — pastikan tidak tertutup header di SEMUA lebar layar ── */
main#main-content {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
}
body.admin-bar main#main-content {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 32px);
}
@media (max-width: 782px) {
    body.admin-bar main#main-content {
        padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 46px);
    }
}

/* ── 3. Page-header: padding internal yang proporsional ──
   Kita set min padding-top = 2.5rem agar judul tidak terlalu
   mepet ke atas hijau; !important diperlukan untuk menimpa
   override lama yang bertebaran di file ini.              */
.page-header {
    padding: 3rem 0 2.5rem !important;
}
@media (max-width: 768px) {
    .page-header {
        padding: 2.5rem 0 2rem !important;
    }
}
@media (max-width: 480px) {
    .page-header {
        padding: 2rem 0 1.75rem !important;
    }
}
@media (max-width: 360px) {
    .page-header {
        padding: 1.75rem 0 1.5rem !important;
    }
}

/* ── 4. scroll-padding agar anchor link tidak tertutup header ── */
html {
    scroll-padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 1rem);
}

/* ── 5. Breadcrumb — jangan potong teks, biarkan wrap ── */
.breadcrumb,
.breadcrumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: center;
    gap: .25rem .375rem;
    overflow: visible !important;
}
.breadcrumb a,
.breadcrumb span,
.breadcrumbs a,
.breadcrumbs span {
    max-width: none !important;          /* hapus potong 160px */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
}

/* ── 6. Page-header content — judul tidak overflow samping ── */
.page-header-content h1,
.page-header h1 {
    font-size: clamp(1.2rem, 5vw, 2.5rem) !important;
    word-break: break-word;
    overflow-wrap: break-word;
    padding: 0 .5rem;
    box-sizing: border-box;
}
.page-header-content p,
.page-header p {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── 7. Hero section tidak tertutup header di mobile ── */
.hero-section {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + var(--space-8));
}

/* ── 8. Template homepage — padding atas blok pertama ── */
body.page-template-template-homepage main#main-content,
body.home main#main-content {
    padding-top: 0; /* homepage pakai hero block yang sudah handle spacing */
}

/* ── 9. Sidebar sticky top saat desktop ── */
@media (min-width: 900px) {
    .sp-sidebar-inner {
        top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 1.5rem) !important;
    }
}

/* ── 10. Single campaign: badge tidak tertutup header ── */
@media (max-width: 768px) {
    .scp-don-campaign-badge {
        margin-top: 0;
    }
}

/* =============================================================
   END FIX: Header overlap
   ============================================================= */


/* =============================================================
   FIX: Logo & navigasi di tengah header (vertikal center)
   Container harus fill penuh header agar flexbox centering kerja
   v2.2 — 2026-05
   ============================================================= */

/* Container di dalam header harus setinggi header */
.site-header > .container {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Header-inner: isi penuh lebar & tengah vertikal */
.header-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Safe-area: geser konten ke bawah notch, bukan padding top header */
.site-header {
    top: 0;
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
}

/* Logo & teks selalu center di dalam header */
.site-logo,
.site-logo a,
.site-logo img {
    display: flex;
    align-items: center;
}

/* =============================================================
   END FIX: Logo & nav center
   ============================================================= */


/* =============================================================
   FIX: Desktop nav tidak overflow / terpotong di layar sempit
   + pastikan hamburger muncul sebelum item kepotong
   v2.3 — 2026-05
   ============================================================= */

/* Sembunyikan desktop nav di tablet & mobile */
@media (max-width: 900px) {
    .main-nav              { display: none !important; }
    .menu-toggle           { display: flex !important; }
}

/* Di antara 769–900px: compact header agar tidak overflow */
@media (min-width: 769px) and (max-width: 900px) {
    .header-donate-btn .donate-label { display: inline !important; }
}

/* Guard: kalau main-nav TERPAKSA tampil (fallback),
   biarkan wrap & tidak clip */
.main-nav ul {
    flex-wrap: wrap;
    overflow: visible;
}

/* Site-logo: tidak menyusut saat nav penuh */
.site-logo {
    flex-shrink: 0;
}

/* Header-inner: jangan overflow-hidden agar sub-menu muncul */
.site-header .container,
.header-inner {
    overflow: visible !important;
}

/* =============================================================
   END FIX: nav overflow
   ============================================================= */