/*
Theme Name: 
   ========================================================================== */

:root {
  /* Palette Nuansa Pedesaan Adem & Sejuk */
  --primary: #1b4931;           /* Hijau Hutan Rindang Pedesaan */
  --primary-hover: #123322;
  --primary-light: #2d6a4f;     /* Hijau Daun Segar */
  --primary-leaf: #40916c;      /* Daun Tropis Sejuk */
  --primary-subtle: #edf6f0;    /* Kabut Pagi Pedesaan Lembut */
  --primary-tint: #f4f8f5;      /* Nuansa Hijau Adem Latar */
  
  --accent-gold: #c68a4c;       /* Bulir Padi Keemasan & Bambu */
  --accent-gold-hover: #ab7235;
  --accent-gold-light: #fef7ed;
  --accent-earth: #8c603e;      /* Kayu Alam Hangat */
  --accent-red: #d9433b;        /* Tanda Bahaya Riba / Keresahan */
  
  --bg-main: #ffffff;
  --bg-light: #f6f9f6;          /* Suasana Pagi Kampung Sejuk */
  --bg-sage: #eaf1eb;
  --bg-card: #ffffff;
  
  --text-main: #14281d;         /* Teks Arang Alami Kontras Tinggi */
  --text-muted: #4e6557;        /* Hijau Abu-abu Daun Rimbun */
  --text-light: #768c7e;
  --text-white: #ffffff;
  
  --border-color: #d8e5dc;      /* Garis Batas Natural Lembut */
  --border-focus: #2d6a4f;
  
  --shadow-sm: 0 2px 6px rgba(27, 73, 49, 0.05);
  --shadow-md: 0 8px 24px rgba(27, 73, 49, 0.08);
  --shadow-lg: 0 16px 40px rgba(27, 73, 49, 0.12);
  --shadow-glow: 0 0 20px rgba(198, 138, 76, 0.25);
  
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Outfit', sans-serif;
  --font-quran: 'Amiri', serif;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: clip;
}

section[id], div[id] {
  scroll-margin-top: 85px;
}

body {
  font-family: var(--font-body);
  color: var(--text-main);
  background-color: var(--bg-main);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

ul {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.25;
}

/* ------------------- CONTAINER & LAYOUT (ANTI-OVERFLOW) ------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.section {
  padding: 75px 0;
  position: relative;
}

.text-center { text-align: center; }
.text-success { color: #15803d !important; }
.text-danger { color: #b91c1c !important; }
.text-muted { color: var(--text-muted) !important; }
.small { font-size: 0.875rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2.5rem; }
.d-block { display: block; }

.bg-gradient-light {
  background: linear-gradient(180deg, #f6f9f6 0%, #ebf3ec 100%);
}

.bg-sage-soft {
  background-color: var(--bg-light);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.badge-sub {
  background-color: var(--primary-subtle);
  color: #103020 !important;
  border: 1px solid #cce3d2;
  margin-bottom: 12px;
}

.badge-accent {
  background-color: var(--accent-gold-light);
  color: #92541a;
  border: 1px solid #f9d8b1;
  margin-bottom: 12px;
}

.badge-danger {
  background-color: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  margin-bottom: 12px;
}

/* Section Header */
.section-header {
  max-width: 760px;
  margin: 0 auto 40px auto;
}

.section-title {
  font-size: 2.15rem;
  color: var(--primary);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.section-line {
  width: 54px;
  height: 4px;
  background: var(--accent-gold);
  margin: 0 auto 14px auto;
  border-radius: var(--radius-full);
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ------------------- BUTTONS ------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.925rem;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--text-white);
  box-shadow: 0 4px 14px rgba(27, 73, 49, 0.25);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(27, 73, 49, 0.35);
  color: var(--text-white);
}

.btn-accent {
  background-color: var(--accent-gold);
  color: var(--text-white);
  box-shadow: 0 4px 14px rgba(198, 138, 76, 0.35);
}

.btn-accent:hover {
  background-color: var(--accent-gold-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  color: var(--text-white);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--text-white);
}

.btn-glass {
  background-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--text-white);
}

.btn-glass:hover {
  background-color: rgba(255, 255, 255, 0.28);
  color: var(--text-white);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background-color: #25d366;
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.28);
}

.btn-whatsapp:hover {
  background-color: #1eb857;
  color: var(--text-white);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
}

.btn-lg {
  padding: 12px 24px;
  font-size: 1.02rem;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.825rem;
}

.btn-block {
  width: 100%;
}

.pulse-btn {
  animation: subtlePulse 3s infinite;
}

@keyframes subtlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

/* ------------------- TOP BAR RESMI ------------------- */
.top-bar {
  background-color: #103020 !important;
  background: #103020 !important;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
}

.top-bar-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 6px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.top-bar-left, .top-bar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.top-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.76rem;
  transition: color 0.2s ease;
}

.top-bar-item:hover {
  color: #fef08a;
}

.top-bar-item i {
  color: var(--accent-gold);
  font-size: 0.82rem;
}

.top-bar-social {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-bar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.72rem;
  transition: var(--transition);
}

.top-bar-social a:hover {
  background: var(--accent-gold);
  color: #ffffff;
  transform: translateY(-1px);
}

/* ------------------- HEADER (1 BARIS ELEGAN, ANTI-CUTOFF) ------------------- */
.main-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  width: 100%;
  transition: all 0.25s ease;
}

.main-header.is-scrolled {
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 14px;
}

/* Brand Logo Lockup */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-icon {
  height: 42px;
  width: 42px;
  object-fit: contain;
}

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

.brand-title, .brand-name {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand-sub {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 2px;
}

/* Desktop Nav Menu with Structured Dropdowns */
.nav-menu {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: var(--transition);
}

.nav-link .dropdown-caret {
  font-size: 0.65rem;
  transition: transform 0.25s ease;
  color: var(--text-muted);
}

.nav-item:hover .nav-link .dropdown-caret {
  transform: rotate(180deg);
  color: var(--primary);
}

.nav-link:hover, .nav-link.active {
  color: var(--primary);
  background-color: var(--primary-subtle);
}

/* Dropdown Menu Container */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  margin-top: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1050;
}

.nav-item:hover .nav-dropdown-menu,
.nav-item:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-main);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.nav-dropdown-item i {
  color: var(--primary-leaf);
  font-size: 0.8rem;
  width: 16px;
  text-align: center;
}

.nav-dropdown-item:hover {
  background-color: var(--primary-subtle);
  color: var(--primary);
  padding-left: 22px;
}

.nav-dropdown-item:hover i {
  color: var(--accent-gold);
}

.nav-cta-mobile,
.mobile-drawer-cta-wrap,
.drawer-donate-btn-primary {
  display: none !important;
}

/* Mobile Drawer Footer - Strictly Hidden on Desktop View */
.nav-drawer-footer {
  display: none !important;
}

/* Header Action Right */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-wa-pill, .header-wa-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: var(--transition);
}

.header-wa-pill:hover, .header-wa-compact:hover {
  background-color: #dcfce7;
  transform: translateY(-1px);
}

.header-wa-pill i, .header-wa-compact i {
  color: #22c55e;
  font-size: 0.95rem;
}

.btn-header {
  padding: 7px 15px;
  font-size: 0.84rem;
  white-space: nowrap;
}

.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.hamburger-btn span {
  display: block;
  width: 24px;
  height: 2.5px;
  background-color: var(--primary);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.hamburger-btn.active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger-btn.active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ------------------- HERO SECTION (ADEM, SEJUK PEDESAAN) ------------------- */
.hero-section {
  position: relative;
  background: linear-gradient(135deg, #061c11 0%, #0d3822 45%, #144d30 100%) !important;
  color: var(--text-white);
  padding: 75px 0 95px 0;
  overflow: hidden;
}

.hero-container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 960px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 0.825rem;
  font-weight: 600;
  color: #fef3c7;
  margin-bottom: 18px;
}

.hero-quran {
  font-family: var(--font-quran);
  font-size: 1.25rem;
  color: #fef08a;
  margin-bottom: 8px;
  line-height: 1.6;
}

.hero-quran-trans {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  max-width: 760px;
  margin: 0 auto 20px auto;
  line-height: 1.5;
}

.hero-title {
  font-size: 2.85rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-white);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.highlight-text {
  background: linear-gradient(120deg, #fef08a 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 800px;
  margin: 0 auto 30px auto;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.hero-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 45px;
}

.hero-trust .trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-trust i {
  color: #4ade80;
}

/* Stats Counter Grid */
.stats-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 15px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: var(--transition);
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

.stat-icon {
  width: 40px;
  height: 40px;
  background: rgba(245, 158, 11, 0.24);
  color: #fbbf24;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.stat-number-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-white);
}

.stat-plus {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fbbf24;
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 4px;
}

/* ------------------- SECTION: POTRET KERESAHAN KEMISKINAN ------------------- */
.infographic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.infographic-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.infographic-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #cbd5e1;
}

.infographic-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--accent-red);
}

.infographic-stat {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  color: #b91c1c;
  line-height: 1.1;
  margin: 10px 0 6px 0;
}

.infographic-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.infographic-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 8px;
}

/* 4 Realitas Keresahan */
.realities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.reality-box {
  background: #fdf2f2;
  border: 1px solid #fee2e2;
  border-radius: var(--radius-sm);
  padding: 18px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.reality-icon {
  font-size: 1.35rem;
  color: #dc2626;
  flex-shrink: 0;
  margin-top: 2px;
}

.reality-text h4 {
  font-size: 0.95rem;
  color: #991b1b;
  margin-bottom: 4px;
}

.reality-text p {
  font-size: 0.8rem;
  color: #7f1d1d;
  line-height: 1.45;
}

/* 5 Stakeholder Sinergi */
.stakeholder-bar {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
}

.stakeholder-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
}

.stakeholder-chain {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.stakeholder-node {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

.stakeholder-node i {
  color: var(--primary);
}

.stakeholder-arrow {
  color: var(--accent-gold);
  font-size: 1rem;
}

/* ------------------- SECTION: DOKUMENTER & LIPUTAN RESMI TVONE ------------------- */
.video-showcase-wrapper {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.video-facade-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b1a12;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(10, 36, 21, 0.16);
  border: 2px solid #d8e5dc;
  cursor: pointer;
  outline: none;
}

.video-facade-container:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(27, 73, 49, 0.3);
}

.video-facade-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-facade-container:hover .video-facade-thumb {
  transform: scale(1.03);
}

.video-facade-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.3) 40%, rgba(5,26,15,0.92) 100%);
  display: block;
  transition: background 0.3s ease;
}

.video-facade-container:hover .video-facade-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.2) 35%, rgba(5,26,15,0.94) 100%);
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #dc2626;
  color: #ffffff;
  border: none;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  animation: playPulse 2s infinite;
  transition: transform 0.25s ease, background-color 0.25s ease;
  z-index: 2;
}

@keyframes playPulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.video-facade-container:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
  background: #b91c1c;
}

.video-facade-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 26px;
  background: linear-gradient(to top, rgba(5, 26, 15, 0.98) 0%, rgba(5, 26, 15, 0.88) 70%, transparent 100%);
  z-index: 1;
}

.video-source-badge {
  display: inline-block;
  background: rgba(220, 38, 38, 0.92);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.video-facade-title {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  text-shadow: 0 2px 5px rgba(0,0,0,0.7);
  line-height: 1.3;
}

.video-facade-hint {
  color: #fef08a;
  font-size: 0.85rem;
  margin: 0;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.video-facade-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video Tabs */
.video-tabs-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.video-tab-btn {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.video-tab-btn i {
  font-size: 1.5rem;
  color: #64748b;
  transition: color 0.2s ease;
}

.video-tab-btn.active {
  background: #edf6f0;
  border-color: #1b4931;
  box-shadow: 0 4px 12px rgba(27,73,49,0.08);
}

.video-tab-btn.active i {
  color: #dc2626;
}

.video-tab-text strong {
  display: block;
  font-size: 0.9rem;
  color: var(--primary);
  line-height: 1.3;
}

.video-tab-text small {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Video Highlights */
.video-highlights-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.v-highlight-item {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}

.v-highlight-item i {
  font-size: 1.3rem;
  color: var(--primary);
  background: var(--primary-subtle);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.v-highlight-item strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.3;
}

.v-highlight-item span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ------------------- SECTION: PERCONTOHAN CIRACAS ------------------- */
.ciracas-highlight-box {
  background: linear-gradient(135deg, rgba(27, 73, 49, 0.96) 0%, rgba(16, 48, 32, 0.94) 100%),
              url('images/kegiatan_leadership_camp.png') center/cover no-repeat;
  color: var(--text-white);
  border-radius: var(--radius-lg);
  padding: 45px 40px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 40px;
}

.ciracas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}

.ciracas-info h3 {
  color: var(--text-white);
  font-size: 1.9rem;
  margin-bottom: 14px;
}

.ciracas-info p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.975rem;
  line-height: 1.65;
  margin-bottom: 20px;
}

.ciracas-stats-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.c-stat-item {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}

.c-stat-item strong {
  display: block;
  font-size: 1.45rem;
  font-family: var(--font-heading);
  color: #fef08a;
}

.c-stat-item span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
}

.ciracas-media img {
  border-radius: var(--radius-md);
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-md);
}

/* ------------------- SECTION: PROGRAM BERJALAN & EKONOMI SIRKULAR ------------------- */
.program-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.program-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.program-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: #cbd5e1;
}

.program-img-wrap {
  position: relative;
  height: 190px;
  overflow: hidden;
}

.program-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

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

.program-tag-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(16, 48, 32, 0.85);
  backdrop-filter: blur(6px);
  color: #fef08a;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.program-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.program-body h3 {
  font-size: 1.22rem;
  color: var(--primary);
  margin-bottom: 8px;
}

.program-body p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}

.program-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f1f5f9;
  padding-top: 14px;
}

.program-impact {
  font-size: 0.775rem;
  font-weight: 700;
  color: #15803d;
}

/* ------------------- SECTION: PETA SEBARAN TITIK INDONESIA ------------------- */
.coverage-box {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.indonesia-map-wrapper {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin: 24px 0 20px;
  position: relative;
}

.map-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #bbf7d0;
}

.map-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.legend-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.legend-badge.legend-hq {
  color: #b45309;
}

.legend-badge.legend-active {
  color: #15803d;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.hq-dot {
  background: #d97706;
  box-shadow: 0 0 6px #f59e0b;
}

.legend-dot.active-dot {
  background: #16a34a;
  box-shadow: 0 0 5px rgba(22, 163, 74, 0.6);
}

.map-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ------------------- REAL GEOGRAPHIC INDONESIA MAP (100% OFFLINE, ZERO API, ZOOM & PAN) ------------------- */
.real-map-stage {
  position: relative;
  width: 100%;
  height: 480px;
  min-height: 480px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid #bbf7d0;
  box-shadow: 0 4px 20px rgba(27, 73, 49, 0.08);
  background: radial-gradient(ellipse at center, #edf7f1 0%, #e2efe7 100%);
  user-select: none;
  cursor: grab;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991px) {
  .real-map-stage {
    height: 400px;
    min-height: 400px;
  }
}

@media (max-width: 576px) {
  .real-map-stage {
    height: 330px;
    min-height: 330px;
  }
}

.real-map-stage.is-panning {
  cursor: grabbing;
}

.real-map-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 2020 / 921;
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1);
  display: block;
  flex-shrink: 0;
}

.real-map-stage.is-panning .real-map-canvas {
  transition: none; /* No lag while dragging */
}

.real-map-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Floating Zoom & Reset Toolbar */
.map-zoom-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  padding: 4px 8px;
  border-radius: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(0, 0, 0, 0.08);
  user-select: none;
}

.map-zoom-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.82rem;
  padding: 0;
  flex-shrink: 0;
}

.map-zoom-btn:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  transform: scale(1.08);
}

.map-zoom-btn:active {
  transform: scale(0.95);
}

.map-zoom-level-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  padding: 0 4px;
  min-width: 40px;
  text-align: center;
  letter-spacing: 0.02em;
  user-select: none;
  font-family: monospace;
}

.map-drag-hint {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 70;
  background: rgba(15, 36, 25, 0.85);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Interactive Geographic Pins with Permanent Non-Overlapping Labels */
.geo-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 15;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0.2s;
}

.geo-pin:hover {
  transform: translate(-50%, -50%) scale(1.22);
  z-index: 60;
}

.geo-pin.active {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 55;
}

.geo-pin-core {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #15803d;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 2;
  transition: all 0.25s ease;
}

.geo-pin-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  margin-left: -14px;
  border-radius: 50%;
  border: 2px solid rgba(22, 163, 74, 0.85);
  animation: geoPinRipple 2.2s infinite ease-out;
  pointer-events: none;
  z-index: 1;
}

@keyframes geoPinRipple {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(2.0); opacity: 0; }
}

/* Permanent Clean Map City Labels */
.geo-pin-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 36, 25, 0.92);
  backdrop-filter: blur(5px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  letter-spacing: 0.15px;
  pointer-events: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  user-select: none;
}

/* Strategic Directions to Prevent Overlapping Across Java & Sumatra */
.geo-pin-label.label-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 7px;
}

.geo-pin-label.label-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 7px;
}

.geo-pin-label.label-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
}

.geo-pin-label.label-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
}

/* Active & Hover Pin Highlight */
.geo-pin:hover .geo-pin-label,
.geo-pin.active .geo-pin-label {
  background: #15803d;
  border-color: #fef08a;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6), 0 4px 10px rgba(0, 0, 0, 0.45);
}

.geo-pin.active .geo-pin-core {
  background: #22c55e;
  border-color: #fef08a;
  transform: scale(1.3);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.9), 0 3px 8px rgba(0, 0, 0, 0.5);
}

/* Ciracas JaBoDeTaBek Flagship Center Pin (HQ Emas) */
.geo-pin.hq-pin .geo-pin-core {
  width: 22px;
  height: 22px;
  background: #d97706;
  border: 2.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.62rem;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.95), 0 3px 8px rgba(0,0,0,0.5);
}

.geo-pin.hq-pin .geo-pin-pulse {
  border-color: #f59e0b;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  margin-left: -21px;
  animation-duration: 1.6s;
}

.geo-pin.hq-pin .geo-pin-label {
  background: linear-gradient(135deg, #92400e 0%, #b45309 100%);
  border-color: #fcd34d;
  color: #fef3c7;
  font-size: 0.74rem;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6), 0 3px 8px rgba(0,0,0,0.35);
}

/* Detail Card Box Under Map */
.map-detail-card {
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-left: 5px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  text-align: left;
  transition: var(--transition);
}

.map-detail-info h4 {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  color: var(--primary);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.map-detail-info p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.coverage-tags-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
  width: 100% !important;
}

.coverage-tags-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.coverage-pill {
  background: #ffffff !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  padding: 8px 18px !important;
  border-radius: var(--radius-full, 999px) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--primary, #047857) !important;
  -webkit-text-fill-color: var(--primary, #047857) !important;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.04)) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: var(--transition, all 0.2s ease) !important;
  font-family: inherit !important;
  white-space: nowrap !important;
}

.coverage-pill:hover {
  background: #f0fdf4 !important;
  color: var(--primary, #047857) !important;
  -webkit-text-fill-color: var(--primary, #047857) !important;
  border-color: #86efac !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(4, 120, 87, 0.12) !important;
}

.coverage-pill.active {
  background: var(--primary, #047857) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: var(--primary, #047857) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.28) !important;
  font-weight: 700 !important;
}

.coverage-pill.active i, .coverage-pill:hover i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.coverage-pill i {
  color: var(--accent-gold);
  transition: color 0.2s;
}

/* ------------------- SECTION: STRATEGIC CSR PILLARS (4 PILAR BERSIH & ELEGAN) ------------------- */
.csr-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
  align-items: stretch;
}

.csr-pillar-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.csr-pillar-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent-gold) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.csr-pillar-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: #cbd5e1;
}

.csr-pillar-card:hover::before {
  opacity: 1;
}

.csr-pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--primary-subtle);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
  transition: var(--transition);
}

.csr-pillar-card:hover .csr-pillar-icon {
  background: var(--primary);
  color: #ffffff;
  transform: scale(1.08);
}

.csr-pillar-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  color: #92541a;
  background: var(--accent-gold-light);
  border: 1px solid #f9d8b1;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.csr-pillar-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
  line-height: 1.35;
}

.csr-pillar-desc {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.55;
  flex-grow: 1;
  margin-bottom: 16px;
}

.csr-pillar-points {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.csr-pillar-point {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
}

.csr-pillar-point i {
  color: #16a34a;
  font-size: 0.75rem;
}

/* ------------------- SECTION: SUPERVISI & PENDAMPINGAN RUTIN ------------------- */
.supervision-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.supervision-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.supervision-item i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 12px;
}

.supervision-item h4 {
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: 6px;
}

.supervision-item p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ------------------- SECTION: DONASI KILAT & REKENING (BSI GIRO RESMI) ------------------- */
.donation-card-wrap {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 35px;
  max-width: 880px;
  margin: 0 auto;
}

.donation-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}

.don-tab {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
}

.don-tab.active, .don-tab:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.preset-nominal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.preset-btn {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 11px 10px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

.preset-btn:hover, .preset-btn.active {
  border-color: var(--accent-gold);
  background-color: #fffbeb;
  color: #92541a;
}

.custom-input-box {
  margin-bottom: 24px;
}

.custom-input-box label {
  display: block;
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.currency-input-wrap {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 4px 14px;
  transition: var(--transition);
}

.currency-input-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(27, 73, 49, 0.12);
}

.currency-prefix {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--primary);
  font-size: 1.15rem;
  margin-right: 8px;
}

.currency-input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  outline: none;
}

/* Payment Methods Grid */
.payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}

.method-card {
  background: #f8fafc;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}

.method-card:hover, .method-card.active {
  background-color: #ffffff;
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.method-title {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
}

.method-subtitle {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 3px;
}

.method-content-panel {
  display: none;
  animation: fadeIn 0.3s ease;
}

.method-content-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.qris-display-card {
  background: #f8fafc;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
}

.qris-card-wrapper {
  max-width: 320px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border-color);
  background: #ffffff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.qris-card-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.qris-card-img {
  width: 100%;
  height: auto;
  display: block;
}

.qris-instruction {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto;
}

/* Bank Accounts */
.bank-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bank-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
}

.bank-logo-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bank-badge {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 4px;
  color: #ffffff;
}

.bank-badge.bsi { background-color: #00a39d; }

.bank-owner {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.account-copy-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acc-num {
  font-family: monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.05em;
}

.copy-btn {
  background: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: var(--transition);
}

.copy-btn:hover {
  background-color: var(--primary);
  color: #ffffff;
}

/* Dynamic Donation Impact Card (Benchmarking Dompet Dhuafa & Charity: Water) */
.donation-impact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 18px 0 22px 0;
  box-shadow: 0 4px 12px rgba(22, 101, 52, 0.06);
  transition: all 0.25s ease;
}

.impact-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #166534;
  color: #86efac;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.impact-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.impact-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.impact-desc {
  font-size: 0.92rem;
  color: #1e293b;
  margin: 0;
  line-height: 1.45;
}

.impact-desc strong {
  color: #166534;
}

/* Donor Prayers Wall (Benchmarking Kitabisa.com & Dompet Dhuafa) */
.donor-prayers-wrap {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px dashed #d1e2d7;
}

.prayers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.prayers-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.prayers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  text-align: left;
}

.prayer-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.prayer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.prayer-quote {
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.5;
  font-style: italic;
  margin: 0;
}

.prayer-author {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.prayer-author small {
  color: var(--text-muted);
  font-weight: 500;
}

/* Circular vs Conventional Charity Comparison (Benchmarking KMP & Charity: Water) */
.circular-comparison-box {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-top: 35px;
  box-shadow: var(--shadow-sm);
}

.comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 18px;
}

.comp-col {
  padding: 20px;
  border-radius: 12px;
}

.comp-col.conventional {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.comp-col.ks-model {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
}

.comp-col-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comp-col.conventional .comp-col-title { color: #991b1b; }
.comp-col.ks-model .comp-col-title { color: #166534; }

.comp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.comp-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.comp-col.conventional .comp-list li i { color: #dc2626; margin-top: 3px; }
.comp-col.ks-model .comp-list li i { color: #16a34a; margin-top: 3px; }

@media (max-width: 768px) {
  .prayers-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .comp-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .donation-impact-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }
}

/* ------------------- SECTION: RELAWAN & FORMULIR ------------------- */
.volunteer-card-wrap {
  position: relative;
  background: linear-gradient(140deg, #052615 0%, #0d4227 50%, #155e38 100%);
  color: var(--text-white);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  box-shadow: 0 20px 50px rgba(5, 38, 21, 0.22);
  align-items: center;
  border: 1px solid rgba(74, 222, 128, 0.25);
  overflow: hidden;
}

.volunteer-card-wrap::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.volunteer-desc-col {
  position: relative;
  z-index: 2;
}

.volunteer-desc-col h3 {
  color: var(--text-white);
  font-size: 1.95rem;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.25;
}

.volunteer-desc-col p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.volunteer-roles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.volunteer-role-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 13px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.25s ease;
}

.volunteer-role-card:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
  transform: translateY(-2px);
}

.v-role-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.22);
  color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.v-role-content strong {
  display: block;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.v-role-content span {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.76rem;
  line-height: 1.35;
}

.volunteer-form-col {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 30px 28px;
  color: var(--text-main);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 2;
}

/* ------------------- LEGALITAS & AKUNTABILITAS RESMI SECTION ------------------- */
.section-legalitas {
  background: #f8fafc;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 70px 0;
}

.legalitas-executive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 36px;
  align-items: stretch;
}

.legalitas-exec-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.legalitas-exec-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent-gold) 100%);
  opacity: 0.8;
}

.legalitas-exec-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: #cbd5e1;
}

.legal-card-top {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.legalitas-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--primary-subtle);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 16px;
  transition: var(--transition);
}

.legalitas-exec-card:hover .legalitas-card-icon {
  background: var(--primary);
  color: #ffffff;
  transform: scale(1.08);
}

.legal-card-top h4 {
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.legal-card-top p {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 18px;
}

.legal-card-bottom {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border-color);
}

.legal-trust-pill {
  font-size: 0.8rem;
  font-weight: 700;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 8px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.legal-trust-pill i {
  color: #16a34a;
}

.legal-acc-box {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
}

.legal-acc-box strong {
  display: block;
  font-size: 0.95rem;
  color: #92400e;
  letter-spacing: 0.03em;
}

.legal-acc-box small {
  display: block;
  font-size: 0.74rem;
  color: #b45309;
}

.legal-loc-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.legal-loc-box i {
  color: #dc2626;
}

/* Institutional CSR Verification Banner */
.legalitas-csr-banner {
  background: linear-gradient(135deg, #052615 0%, #0d4227 50%, #155e38 100%);
  border-radius: 16px;
  padding: 28px 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  box-shadow: 0 10px 30px rgba(5, 38, 21, 0.16);
  border: 1px solid rgba(74, 222, 128, 0.25);
  color: #ffffff;
}

.legalitas-csr-text {
  max-width: 680px;
}

.legalitas-csr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(250, 204, 21, 0.18);
  color: #fde047;
  border: 1px solid rgba(250, 204, 21, 0.4);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.legalitas-csr-text h4 {
  font-size: 1.25rem !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  margin-bottom: 8px !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

.legalitas-csr-text p {
  font-size: 0.95rem !important;
  color: #ffffff !important;
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.65 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

@media (max-width: 991px) {
  .legalitas-executive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .legalitas-executive-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .legalitas-csr-banner {
    padding: 22px 20px;
  }
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-main);
  background-color: #f8fafc;
  outline: none;
  transition: var(--transition);
}

.form-control:focus {
  border-color: var(--primary);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(27, 73, 49, 0.12);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ------------------- SECTION: 22 FAQ ACCORDION ------------------- */
.faq-accordion-wrap {
  max-width: 860px;
  margin: 0 auto;
}

.faq-category-block {
  margin-bottom: 32px;
}

.faq-category-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-subtle);
}

.faq-category-title i {
  color: var(--accent-gold);
}

.faq-item {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.faq-item:hover {
  border-color: #cbd5e1;
}

.faq-question {
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
}

.faq-question:hover {
  color: var(--primary);
}

.faq-question i {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

.faq-item.active {
  border-color: var(--primary-light);
  box-shadow: 0 4px 14px rgba(27, 73, 49, 0.08);
}

.faq-item.active .faq-question {
  color: var(--primary);
  background-color: #f8fafc;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
  color: var(--primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.3s ease;
  padding: 0 20px;
  color: var(--text-muted);
  font-size: 0.925rem;
  line-height: 1.65;
}

.faq-item.active .faq-answer {
  max-height: 800px;
  padding: 0 20px 18px 20px;
}

/* ------------------- SECTION: TESTIMONIAL ------------------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.testi-card.featured {
  border-color: var(--primary-light);
  background: #fdfefe;
}

.stars {
  color: #f59e0b;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.testi-quote {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
}

.author-avatar {
  width: 38px;
  height: 38px;
  background-color: var(--primary-subtle);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.author-info strong {
  display: block;
  font-size: 0.9rem;
  color: var(--primary);
}

.author-info span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ------------------- SUBPAGE HERO & SHARED TYPOGRAPHY ------------------- */
.subpage-hero {
  position: relative;
  background: linear-gradient(135deg, rgba(16, 48, 32, 0.95) 0%, rgba(27, 73, 49, 0.92) 100%);
  padding: 60px 0 70px 0;
  color: #ffffff;
  text-align: center;
}

.subpage-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffffff;
  margin: 14px 0;
  line-height: 1.25;
}

.subpage-desc {
  color: rgba(255, 255, 255, 0.92);
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.6;
}

.subpage-cta-title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.3;
}

.subpage-cta-desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 30px;
}

/* ------------------- FEATURED POST CARD (RESPONSIVE 2-COL TO 1-COL) ------------------- */
.featured-post-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  margin-bottom: 36px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.featured-post-card.reverse {
  grid-template-columns: 1fr 1.2fr;
}

.featured-post-thumb {
  position: relative;
  min-height: 320px;
  background: #f1f5f9;
  overflow: hidden;
}

.featured-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.featured-post-card:hover .featured-post-thumb img {
  transform: scale(1.04);
}

.featured-post-body {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-post-title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 12px;
  line-height: 1.35;
}

.featured-post-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 22px;
}

.featured-post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

/* ------------------- PROGRAM & ARTICLE CARDS (SPACIOUS & ELEGANT) ------------------- */
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card-thumb {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: #f1f5f9;
}

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

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

.card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(16, 48, 32, 0.9);
  backdrop-filter: blur(6px);
  color: #fef08a;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #ffffff;
}

.card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 8px;
}

.card-body h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
  line-height: 1.4;
}

.card-body p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.card-cta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

/* ------------------- MITRA GRID & MITRA CARDS ------------------- */
.mitra-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.mitra-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  gap: 20px;
  align-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mitra-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #bbf7d0;
}

.mitra-card-logo {
  width: 90px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
  flex-shrink: 0;
  padding: 8px;
}

.mitra-card-logo img {
  max-height: 44px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.mitra-card-body h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  line-height: 1.35;
}

.mitra-card-body p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ------------------- CTA FINAL ------------------- */
.cta-final-section {
  position: relative;
  background: linear-gradient(135deg, #061c11 0%, #0d3822 45%, #144d30 100%) !important;
  color: var(--text-white);
  padding: 80px 0;
}

.cta-title {
  color: var(--text-white);
  font-size: 2.35rem;
  margin-bottom: 14px;
}

.cta-desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.08rem;
  max-width: 860px;
  margin: 0 auto 30px auto;
  line-height: 1.65;
  text-wrap: balance;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* ------------------- FOOTER ------------------- */
.main-footer {
  background-color: #0f2419;
  color: #cbd5e1;
  padding: 65px 0 25px 0;
  border-top: 4px solid var(--accent-gold);
}

.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 36px;
  margin-bottom: 45px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-logo-img {
  height: 44px;
  width: auto;
}

.footer-brand-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
}

.footer-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #94a3b8;
  margin-bottom: 20px;
}

.footer-social-links {
  display: flex;
  gap: 12px;
}

.footer-social-links a {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1rem;
  transition: var(--transition);
}

.footer-social-links a:hover {
  background-color: var(--accent-gold);
  transform: translateY(-2px);
}

.footer-heading {
  color: #ffffff;
  font-size: 1.05rem;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 8px;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--accent-gold);
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  font-size: 0.875rem;
  color: #94a3b8;
  transition: var(--transition);
}

.footer-links a:hover {
  color: #fef08a;
  padding-left: 4px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: #94a3b8;
}

.footer-contact-item i {
  color: #4ade80;
  margin-top: 3px;
  flex-shrink: 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 22px;
  font-size: 0.825rem;
  color: #64748b;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Floating WA & Toast Notification */
.floating-wa-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  background-color: #25d366;
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  z-index: 9999;
  transition: var(--transition);
  text-decoration: none;
  overflow: hidden;
  user-select: none;
}

.floating-wa-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.6);
  color: #ffffff !important;
}

.floating-wa-btn i {
  color: #ffffff !important;
  font-size: 1.85rem;
  line-height: 1;
}

.floating-wa-btn .wa-tooltip,
.floating-wa-btn .wa-pulse,
.floating-whatsapp-wrap .wa-tooltip,
.floating-whatsapp-wrap .wa-pulse {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ------------------- STRICT 3-ROW STAT CARDS ARCHITECTURE ------------------- */
.stat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 22px 16px !important;
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.stat-icon {
  margin-bottom: 10px !important;
}

.stat-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.stat-number-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  margin-bottom: 6px;
  line-height: 1.1;
  width: 100%;
}

.stat-number-line .stat-number {
  font-family: var(--font-heading);
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1;
}

.stat-number-line .stat-suffix,
.stat-number-line .stat-plus {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
}

.stat-label {
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
}

/* ------------------- PROFESSIONAL GALLERY CARDS ------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.gallery-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #bbf7d0;
}

.gallery-thumb {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: #f1f5f9;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

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

.gallery-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(15, 36, 25, 0.85);
  backdrop-filter: blur(4px);
  color: #fef3c7;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.gallery-badge i {
  color: #f59e0b;
}

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

.gallery-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
  line-height: 1.35;
}

.gallery-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

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

.gallery-title a:hover {
  color: #10b981 !important;
}

.gallery-readmore-btn:hover {
  background: #1b4931 !important;
  color: #ffffff !important;
  border-color: #1b4931 !important;
}

.gallery-readmore-btn:hover i {
  color: #fef08a !important;
}

.gallery-readmore-btn:hover .fa-arrow-right {
  transform: translateX(4px);
}

@media (max-width: 991px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.toast-notify {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: #14281d;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-notify.show {
  transform: translateX(-50%) translateY(0);
}

/* ------------------- RESPONSIVE BREAKPOINTS (ANTI-CLIPPING 100% ZOOM) ------------------- */
@media (max-width: 1140px) {
  .header-wa-pill, .header-wa-compact {
    display: none; /* Hide phone number to protect 1-row layout */
  }
  .nav-list {
    gap: 4px;
  }
  .nav-link {
    font-size: 0.83rem;
    padding: 6px 8px;
  }
}

@media (max-width: 1024px) {
  .top-bar-item.hide-tablet {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }
  
  .nav-menu {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    flex-direction: column;
    padding: 0 20px;
    box-shadow: none;
    border-top: none;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 0.35s ease-in-out, opacity 0.25s ease, padding 0.35s ease, visibility 0.35s ease;
    z-index: 999;
  }

  .nav-menu.open {
    max-height: 85vh;
    padding: 16px 20px 22px 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    border-top: 1px solid var(--border-color);
    border-bottom: 2px solid var(--primary-leaf);
    /* overflow-y */
    -webkit-overflow-scrolling: touch;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-list {
    flex-direction: column;
    width: 100%;
    gap: 4px;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 16px;
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--text-main);
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  .nav-link:hover,
  .nav-link:active,
  .nav-link.active {
    background-color: #edf6f0;
    color: var(--primary);
  }

  /* Chevron rotation on mobile */
  .dropdown-caret {
    transition: transform 0.25s ease;
    font-size: 0.8rem;
    color: #64748b;
  }

  .nav-item.open-mobile > .nav-link .dropdown-caret {
    transform: rotate(180deg);
    color: var(--primary);
  }

  .nav-item.open-mobile > .nav-link {
    background-color: #edf6f0;
    color: var(--primary);
  }

  /* Dropdown accordion on mobile */
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 1px solid #e1eee5;
    background-color: #f7faf8;
    border-radius: 10px;
    padding: 6px 8px;
    margin: 4px 0 8px 0;
    display: none;
  }

  .nav-item.open-mobile > .nav-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #334155;
    border-radius: 6px;
    transition: all 0.15s ease;
  }

  .nav-dropdown-item:hover,
  .nav-dropdown-item:active {
    background-color: #e5f2eb;
    color: var(--primary);
    padding-left: 18px;
  }

  .nav-dropdown-item i {
    color: var(--primary-leaf);
    font-size: 0.82rem;
    width: 18px;
    text-align: center;
  }

  .nav-cta-mobile {
    display: none !important;
  }

  /* Humanized Drawer Footer */
  .nav-drawer-footer {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #d1e2d7;
    width: 100%;
  }

  .drawer-contact-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 30px;
    padding: 8px 18px;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
  }

  .drawer-contact-pill:hover,
  .drawer-contact-pill:active {
    background-color: #25d366;
    color: #ffffff;
    border-color: #25d366;
  }

  .drawer-loc-text {
    font-size: 0.74rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .hero-title { font-size: 2.2rem; }
  .stats-card-grid { grid-template-columns: repeat(2, 1fr); }
  .infographic-grid { grid-template-columns: 1fr; }
  .realities-grid { grid-template-columns: repeat(2, 1fr); }
  .ciracas-grid { grid-template-columns: 1fr; }
  .program-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .csr-pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .supervision-grid { grid-template-columns: repeat(2, 1fr); }
  .volunteer-card-wrap { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; }
  .volunteer-roles-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .footer-container { grid-template-columns: repeat(2, 1fr); }

  /* Subpages 2-col to 1-col on Tablet & Mobile */
  .featured-post-card,
  .featured-post-card.reverse {
    grid-template-columns: 1fr !important;
  }
  .featured-post-thumb {
    height: 240px;
    min-height: 240px;
  }
  .featured-post-body {
    padding: 26px 20px !important;
  }
}

@media (max-width: 768px) {
  .top-bar {
    display: none; /* Hide on mobile for sleek viewport height */
  }

  .subpage-hero {
    padding: 45px 0 50px 0;
  }
  .subpage-title {
    font-size: 1.85rem;
  }
  .subpage-cta-title {
    font-size: 1.65rem;
  }

  .mitra-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .program-grid {
    grid-template-columns: 1fr !important;
    gap: 22px;
  }

  /* Safe clearance so floating WA button never overlaps content or buttons */
  .section-articles,
  .section-mitra,
  .subpage-cta-section,
  #relawan,
  .bg-sage-soft {
    padding-bottom: 95px !important;
  }

  .floating-wa-btn {
    bottom: 18px;
    right: 18px;
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
  }
}

@media (max-width: 640px) {
  .hero-title { font-size: 1.85rem; }
  .hero-desc { font-size: 0.95rem; }
  .subpage-title { font-size: 1.6rem; }
  .subpage-cta-title { font-size: 1.45rem; }
  .stats-card-grid { grid-template-columns: 1fr; }
  .realities-grid { grid-template-columns: 1fr; }
  .program-cards-grid { grid-template-columns: 1fr; }
  .csr-pillars-grid { grid-template-columns: 1fr; }
  .supervision-grid { grid-template-columns: 1fr; }
  .ciracas-stats-mini { grid-template-columns: 1fr; }
  .donation-tabs { grid-template-columns: repeat(2, 1fr); }
  .preset-nominal-grid { grid-template-columns: repeat(2, 1fr); }
  .payment-methods { grid-template-columns: 1fr; }
  .bank-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .account-copy-box { width: 100%; justify-content: space-between; }
  .footer-container { grid-template-columns: 1fr; }
  .footer-bottom-content { flex-direction: column; text-align: center; }

  .mitra-card {
    padding: 18px 16px;
  }
  .mitra-card-logo {
    width: 76px;
    height: 60px;
  }

  /* Video showcase mobile */
  .video-play-btn {
    width: 52px;
    height: 52px;
    font-size: 1.15rem;
    padding-left: 3px;
  }
  .video-facade-meta {
    padding: 14px 16px 12px 16px;
    background: linear-gradient(to top, rgba(5, 26, 15, 0.98) 0%, rgba(5, 26, 15, 0.96) 82%, rgba(5, 26, 15, 0.7) 94%, transparent 100%);
  }
  .video-source-badge {
    font-size: 0.66rem;
    padding: 2px 8px;
    margin-bottom: 3px;
  }
  .video-facade-title {
    font-size: 0.92rem;
    line-height: 1.25;
    margin: 0 0 2px 0;
  }
  .video-facade-hint {
    font-size: 0.72rem;
  }
  .video-tabs-bar {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
  }
  .video-tab-btn {
    padding: 10px 14px;
    font-size: 0.88rem;
  }
  .video-highlights-row {
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-top: 14px;
  }
  .v-highlight-item {
    padding: 12px 14px;
    width: 100%;
  }
  .v-highlight-item i {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    border-radius: 8px;
  }
  .v-highlight-item strong {
    font-size: 0.9rem;
    display: block;
    margin-bottom: 2px;
  }
  .v-highlight-item span {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted);
  }

  /* Map mobile adjustments */
  .indonesia-map-wrapper { padding: 12px; }
  .map-toolbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .map-detail-card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .map-detail-card a { width: 100%; text-align: center; }
  .map-zoom-controls { top: 8px; right: 8px; padding: 3px 6px; gap: 4px; }
  .map-zoom-btn { width: 28px; height: 28px; font-size: 0.75rem; }
  .map-zoom-level-badge { font-size: 0.68rem; min-width: 36px; padding: 0 2px; }
  .map-drag-hint { bottom: 8px; left: 8px; font-size: 0.65rem; padding: 3px 8px; }
  .geo-pin-core { width: 12px; height: 12px; }
  .geo-pin.hq-pin .geo-pin-core { width: 18px; height: 18px; }
}

@media (max-width: 420px) {
  .brand-sub { display: none; }
  .brand-title { font-size: 0.95rem; }
  .btn-header { padding: 6px 11px; font-size: 0.78rem; }
  .hero-title { font-size: 1.65rem; }
  .hero-quran { font-size: 1.25rem; }
  .coverage-pill { font-size: 0.78rem; padding: 6px 10px; }
}

/*
Theme Name: 
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pinBounce {
  0%   { transform: translate(-50%, -50%) scale(1); }
  40%  { transform: translate(-50%, -62%) scale(1.35); }
  75%  { transform: translate(-50%, -46%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1.15); }
}

/* Subtle continuous pulse for floating WhatsApp */
@keyframes waFloatingGlow {
  0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45); }
  50%      { box-shadow: 0 12px 32px rgba(37, 211, 102, 0.75); }
}

.floating-wa-btn {
  animation: waFloatingGlow 3s infinite ease-in-out;
}

/*
Theme Name: 
  gap: 6px;
  color: #ffffff;
  font-size: 0.76rem;
  background: rgba(255, 255, 255, 0.12);
  padding: 3px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.25s ease;
  text-decoration: none;
}

.top-bar-join-cta:hover {
  background: rgba(250, 204, 21, 0.25);
  border-color: #fde047;
  color: #fef08a;
  transform: translateY(-1px);
}

.btn-header-join {
  padding: 6px 14px;
  font-size: 0.82rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  background: transparent;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-header-join:hover {
  background: var(--primary);
  color: #ffffff;
}

@media (max-width: 480px) {
  .btn-header-join span {
    display: none;
  }
  .btn-header-join {
    padding: 6px 9px;
  }
}

/*
Theme Name: 
  gap: 20px;
  margin-top: 36px;
  margin-bottom: 30px;
}

.daily-ks-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 24px 20px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.daily-ks-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(27, 73, 49, 0.12);
}

.daily-ks-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary);
}

.daily-ks-card.d-card-2::before { background: #00a39d; }
.daily-ks-card.d-card-3::before { background: #d97706; }
.daily-ks-card.d-card-4::before { background: #16a34a; }

.daily-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
  background: #dcfce7;
  color: var(--primary);
}

.d-card-2 .daily-card-icon { background: #ccfbf1; color: #0f766e; }
.d-card-3 .daily-card-icon { background: #fef3c7; color: #b45309; }
.d-card-4 .daily-card-icon { background: #f0fdf4; color: #166534; }

.daily-ks-card .d-time {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.daily-ks-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  line-height: 1.35;
}

.daily-ks-card p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.founder-spotlight-box {
  background: linear-gradient(135deg, #052615 0%, #0d4227 60%, #155e38 100%);
  border-radius: 16px;
  padding: 30px 36px;
  color: #ffffff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  border: 1px solid rgba(74, 222, 128, 0.25);
  box-shadow: 0 12px 30px rgba(5, 38, 21, 0.16);
  margin-top: 25px;
}

.founder-quote-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.founder-quote-text {
  font-size: 0.92rem;
  line-height: 1.6;
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 14px;
}

.founder-quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.founder-avatar-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid #86efac;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #86efac;
  flex-shrink: 0;
}

.founder-author-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.founder-author-role {
  font-size: 0.76rem;
  color: #86efac;
  margin: 0;
}

/*
Theme Name: 
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.join-pathways-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 36px;
  align-items: stretch;
}

.join-pathway-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
}

.join-pathway-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: #cbd5e1;
}

.pathway-card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pathway-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: var(--primary-subtle);
  color: var(--primary);
  margin-bottom: 16px;
  transition: var(--transition);
}

.join-pathway-card:hover .pathway-icon {
  background: var(--primary);
  color: #ffffff;
  transform: scale(1.08);
}

.pathway-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  line-height: 1.35;
}

.pathway-target-tag {
  font-size: 0.78rem;
  font-weight: 600;
  color: #166534;
  margin-bottom: 14px;
  display: inline-block;
  background: #f0fdf4;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid #dcfce7;
  width: fit-content;
}

.pathway-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.pathway-features li {
  font-size: 0.84rem;
  color: var(--text-main);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.pathway-features li i {
  color: #16a34a;
  font-size: 0.85rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.pathway-card-action {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border-color);
}

@media (max-width: 991px) {
  .daily-ks-grid,
  .join-pathways-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .founder-spotlight-box {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }
}

@media (max-width: 600px) {
  .daily-ks-grid,
  .join-pathways-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ==================== FAQ SEARCH & FILTER STYLES ==================== */
.faq-search-wrapper {
  max-width: 860px;
  margin: 0 auto 24px;
}

.faq-search-input-group {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 6px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: var(--transition);
}

.faq-search-input-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(27, 73, 49, 0.12);
}

.faq-search-input-group .search-icon {
  font-size: 1.15rem;
  color: var(--primary);
  margin-right: 12px;
}

.faq-search-input-group input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--text-main);
  padding: 10px 0;
  background: transparent;
}

.faq-search-clear-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  font-size: 1rem;
  transition: var(--transition);
}

.faq-search-clear-btn:hover {
  color: #dc2626;
}

.faq-search-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.faq-counter-badge {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 4px 12px;
  border-radius: 999px;
}

.faq-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 860px;
  margin: 0 auto 36px;
}

.faq-pill {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: var(--text-main);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-heading);
}

.faq-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #f8fafc;
}

.faq-pill.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(27, 73, 49, 0.2);
}

.faq-empty-state {
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
  padding: 40px 24px;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px dashed #cbd5e1;
}

.faq-empty-state .empty-icon {
  font-size: 3rem;
  color: var(--accent-gold);
  margin-bottom: 16px;
}

.faq-empty-state h3 {
  font-size: 1.25rem;
  color: var(--primary);
  margin-bottom: 8px;
}

.faq-empty-state p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.faq-help-card {
  max-width: 860px;
  margin: 48px auto 0;
  background: linear-gradient(135deg, #1b4931 0%, #153a27 100%);
  border-radius: var(--radius-md);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

.faq-help-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(217, 119, 6, 0.2);
  border: 2px solid var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--accent-gold);
  flex-shrink: 0;
}

.faq-help-content {
  flex: 1;
}

.faq-help-content h3 {
  font-size: 1.25rem;
  color: #ffffff;
  margin-bottom: 8px;
  font-family: var(--font-heading);
}

.faq-help-content p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin: 0;
}

.faq-help-action {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .faq-help-card {
    flex-direction: column;
    text-align: center;
    padding: 24px;
    gap: 18px;
  }
  .faq-help-action {
    width: 100%;
  }
  .faq-help-action .btn {
    width: 100%;
  }
}

/* ==================== FAQ HUB CTA BANNER (BERANDA) ==================== */
.faq-hub-cta {
  max-width: 860px;
  margin: 32px auto 0;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.faq-hub-cta:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.faq-hub-cta-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.faq-hub-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ecfdf5;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.faq-hub-text {
  flex: 1;
}

.faq-hub-text h3 {
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 6px;
  font-family: var(--font-heading);
}

.faq-hub-text p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.faq-hub-btn-wrap {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .faq-hub-cta-inner {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .faq-hub-btn-wrap {
    width: 100%;
  }
  .faq-hub-btn-wrap .btn {
    width: 100%;
  }
}


/*
Theme Name: 
  border: 2px solid #86efac;
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(22, 101, 52, 0.08);
}

.campaign-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.campaign-badge {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(21, 128, 61, 0.25);
}

.campaign-period {
  font-size: 0.8rem;
  color: #166534;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.campaign-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #14532d;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.campaign-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat-item {
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.stat-item .stat-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #15803d;
  margin-bottom: 4px;
}

.stat-val {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}

.stat-val-collected {
  color: #15803d;
}

.stat-val-pct {
  color: #d97706;
}

.progress-track-wrap {
  margin-bottom: 14px;
}

.progress-track {
  background: #dcfce7;
  border-radius: 20px;
  height: 16px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  position: relative;
}

.progress-bar-fill {
  background: linear-gradient(90deg, #10b981 0%, #059669 50%, #047857 100%);
  height: 100%;
  border-radius: 20px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.25) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.25) 75%,
    transparent 75%,
    transparent
  );
  background-size: 24px 24px;
  animation: progressStripes 2s linear infinite;
}

@keyframes progressStripes {
  0% { background-position: 0 0; }
  100% { background-position: 24px 0; }
}

.campaign-guarantee {
  font-size: 0.82rem;
  color: #166534;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.campaign-guarantee i {
  color: #10b981;
  font-size: 1rem;
}

/* Smart Donor Form Fields */
.donor-form-fields {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-top: 20px;
  margin-bottom: 22px;
}

.donor-form-header {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.donor-anon-toggle {
  margin-bottom: 16px;
}

.anon-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
  color: #334155;
}

.anon-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #15803d;
  cursor: pointer;
}

.donor-inputs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.donor-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.donor-field-group.full-width {
  grid-column: 1 / -1;
}

.donor-field-group label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}

.donor-field-group label i {
  color: var(--primary);
}

.donor-text-input,
.donor-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  color: #0f172a;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.donor-text-input:focus,
.donor-textarea:focus {
  outline: none;
  border-color: #15803d;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
}

.donor-textarea {
  resize: vertical;
  min-height: 64px;
}

.btn-submit-donation {
  box-shadow: 0 6px 20px rgba(224, 159, 62, 0.35);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Interactive Aamiin Button on Prayer Cards */
.prayer-card {
  position: relative;
  overflow: hidden;
}

.prayer-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.prayer-nominal-badge {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  letter-spacing: 0.02em;
}

.prayer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.prayer-time {
  font-size: 0.74rem;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-aamiin {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-aamiin:hover {
  background: #fef2f2;
  border-color: #f87171;
  color: #dc2626;
}

.btn-aamiin.active {
  background: #fef2f2;
  border-color: #ef4444;
  color: #dc2626;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.btn-aamiin.active i {
  animation: aamiinPulse 0.4s ease;
}

@keyframes aamiinPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}


/*
Theme Name: 
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(5px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.receipt-modal-backdrop.active {
  display: flex;
  animation: modalFadeIn 0.25s ease-out;
}

.receipt-modal-card {
  background: #ffffff;
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow-y: auto;
  max-height: calc(100vh - 40px);
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  margin: auto;
}

.receipt-close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.receipt-close-btn:hover {
  background: #ef4444;
  color: #ffffff;
}

.receipt-header {
  padding: 18px 20px 12px;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}

.receipt-check-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(22, 101, 52, 0.15);
}

.receipt-title {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 800;
  color: #14532d;
  margin: 0 0 3px 0;
}

.receipt-subtitle {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}

.receipt-paper {
  padding: 12px 16px;
  background: #fafaf9;
  border: 1.5px dashed #cbd5e1;
  margin: 10px 16px;
  border-radius: 12px;
  position: relative;
}

.receipt-paper-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.receipt-paper-logo {
  border-radius: 6px;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.receipt-org-name {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 2px 0;
  letter-spacing: 0.02em;
}

.receipt-legal-note {
  font-size: 0.68rem;
  color: #64748b;
  display: block;
}

.receipt-divider {
  border-top: 1px dashed #cbd5e1;
  margin: 8px 0;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 0.82rem;
}

.r-label {
  color: #64748b;
  font-weight: 600;
}

.r-val {
  font-weight: 700;
  color: #1e293b;
  text-align: right;
}

.r-val-highlight {
  color: #15803d;
  font-size: 1rem;
  font-weight: 900;
}

.r-badge-status {
  background: #fef3c7;
  color: #92400e;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.receipt-prayer-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
}

.r-prayer-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--primary);
  display: block;
  margin-bottom: 3px;
}

.r-prayer-quote {
  font-size: 0.8rem;
  color: #334155;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}

.receipt-stamp-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.receipt-stamp {
  border: 1.5px solid #16a34a;
  border-radius: 6px;
  padding: 3px 8px;
  text-align: center;
  color: #16a34a;
  font-family: var(--font-heading);
  transform: rotate(-2deg);
  opacity: 0.95;
}

.receipt-stamp span {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.receipt-stamp small {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
}

.receipt-actions-box {
  padding: 0 16px 18px;
}

.receipt-instructions {
  font-size: 0.78rem;
  color: #475569;
  margin: 0 0 8px 0;
  line-height: 1.4;
  text-align: center;
}

.receipt-bsi-pill {
  background: #f0fdfa;
  border: 1.5px solid #99f6e4;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.r-bsi-info {
  display: flex;
  flex-direction: column;
}

.r-bsi-label {
  font-size: 0.68rem;
  color: #0f766e;
  font-weight: 700;
  text-transform: uppercase;
}

.r-bsi-number {
  font-family: monospace;
  font-size: 1.2rem;
  font-weight: 900;
  color: #0f766e;
  letter-spacing: 1px;
}

.r-bsi-owner {
  font-size: 0.7rem;
  color: #64748b;
}

.receipt-btn-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.receipt-btn-group .btn {
  padding: 10px 16px;
  font-size: 0.88rem;
}

/*
Theme Name: 
  margin: 0 auto;
}

/* Program Selector Tabs (Top Pill Bar) - Centered & Never Cut Off */
.kb-program-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 12px;
  margin-bottom: 24px;
}

.kb-prog-tab {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 30px;
  padding: 10px 20px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.kb-prog-tab:hover {
  border-color: #15803d;
  color: #15803d;
  background: #f0fdf4;
}

.kb-prog-tab.active {
  background: linear-gradient(135deg, #1b4931 0%, #15803d 100%);
  border-color: #15803d;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.3);
}

.kb-prog-tab.active i {
  color: #e09f3e;
}

@media (max-width: 768px) {
  .kb-program-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .kb-program-tabs::-webkit-scrollbar {
    display: none;
  }
  .kb-prog-tab {
    padding: 8px 16px;
    font-size: 0.82rem;
  }
}

/* Two-Column Campaign Layout */
.kb-campaign-grid {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 28px;
  align-items: start;
}

/* Left Column: Visual, Story, Updates & Prayers */
.kb-card-main {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.kb-cover-wrap {
  position: relative;
  width: 100%;
  height: 330px;
  background: #0f172a;
  overflow: hidden;
}

.kb-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.kb-cover-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.kb-cover-badge i {
  color: #e09f3e;
}

.kb-content-body {
  padding: 26px 28px;
}

.kb-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin: 0 0 18px 0;
  transition: color 0.3s ease;
}

/* Organizer Row */
.kb-organizer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 20px;
}

.kb-org-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  object-fit: contain;
  background: #ffffff;
  padding: 2px;
}

.kb-org-info h4 {
  font-family: var(--font-heading);
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kb-verified-badge {
  color: #0284c7;
  font-size: 0.9rem;
}

.kb-org-info span {
  font-size: 0.76rem;
  color: #64748b;
  display: block;
}

/* Inner Tabs (Cerita | Kabar Terbaru | Doa) */
.kb-inner-tabs {
  display: flex;
  border-bottom: 2px solid #f1f5f9;
  margin-bottom: 22px;
  gap: 20px;
}

.kb-tab-btn {
  background: none;
  border: none;
  padding: 12px 4px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

.kb-tab-btn:hover {
  color: var(--primary);
}

.kb-tab-btn.active {
  color: var(--primary);
  font-weight: 800;
}

.kb-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
}

.kb-tab-badge {
  background: #ecfdf5;
  color: #047857;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 4px;
}

/* Tab Panes */
.kb-tab-pane {
  display: none;
}

.kb-tab-pane.active {
  display: block;
  animation: fadeInPane 0.25s ease-out;
}

@keyframes fadeInPane {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.kb-story-text {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.7;
}

.kb-story-text p {
  margin-bottom: 14px;
}

.kb-impact-callout {
  background: #f0fdf4;
  border-left: 4px solid #16a34a;
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
  margin: 18px 0;
  font-size: 0.92rem;
  color: #14532d;
  line-height: 1.5;
}

/* Updates Feed (Kabar Penyaluran) */
.kb-updates-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kb-update-item {
  border-left: 2px solid #86efac;
  padding-left: 18px;
  position: relative;
}

.kb-update-item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px #dcfce7;
}

.kb-update-date {
  font-size: 0.76rem;
  font-weight: 700;
  color: #15803d;
  display: block;
  margin-bottom: 4px;
}

.kb-update-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.kb-update-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

/* Right Column: Sticky Action Card (Ala Kitabisa) */
.kb-card-action {
  background: #ffffff;
  border: 1.5px solid #bbf7d0;
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 12px 36px rgba(22, 101, 52, 0.08);
  position: sticky;
  top: 90px;
}

.kb-amount-box {
  margin-bottom: 16px;
}

.kb-amount-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}

.kb-amount-num {
  font-family: var(--font-heading);
  font-size: 2.15rem;
  font-weight: 900;
  color: #15803d;
  display: block;
  line-height: 1.1;
  margin-bottom: 6px;
}

.kb-amount-target {
  font-size: 0.88rem;
  color: #64748b;
}

.kb-amount-target strong {
  color: #1e293b;
}

/* Progress Bar (Kitabisa-style) */
.kb-progress-track {
  background: #e2e8f0;
  height: 12px;
  border-radius: 12px;
  overflow: hidden;
  margin: 14px 0 16px;
  position: relative;
}

.kb-progress-fill {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  height: 100%;
  border-radius: 12px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stats Triple Capsule */
.kb-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 18px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 20px;
}

.kb-stat-col {
  text-align: center;
  flex: 1;
}

.kb-stat-col:not(:last-child) {
  border-right: 1px solid #f1f5f9;
}

.kb-stat-val {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
}

.kb-stat-name {
  font-size: 0.74rem;
  color: #64748b;
  display: block;
}

/* Main CTA Button */
.btn-kb-donate {
  background: linear-gradient(135deg, #e09f3e 0%, #d97706 100%);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 16px 24px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.35);
  transition: all 0.25s ease;
  margin-bottom: 14px;
}

.btn-kb-donate:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.45);
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.btn-kb-donate:active {
  transform: translateY(1px);
}

.btn-kb-share {
  background: #f8fafc;
  color: #334155;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 10px 18px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  margin-bottom: 20px;
}

.btn-kb-share:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* Guarantee / Trust Box */
.kb-trust-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.kb-trust-card i {
  color: #16a34a;
  font-size: 1.3rem;
  margin-top: 2px;
}

.kb-trust-text {
  font-size: 0.78rem;
  color: #14532d;
  line-height: 1.45;
}

.kb-trust-text strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.82rem;
}

/* Donation Drawer / Modal Form (Kitabisa-Style) */
.kb-modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(5px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.kb-modal-backdrop.active {
  display: flex;
  animation: modalFadeIn 0.25s ease-out;
}

.kb-modal-sheet {
  background: #ffffff;
  border-radius: 20px;
  max-width: 550px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow-y: auto;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  margin: auto;
  -webkit-overflow-scrolling: touch;
}

.kb-modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 5;
}

.kb-modal-header h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kb-modal-header h3 i {
  color: #16a34a;
}

.kb-close-x {
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.kb-close-x:hover {
  background: #ef4444;
  color: #ffffff;
}

.kb-modal-scroll {
  padding: 20px 22px;
}

/* Steps in Modal */
.kb-step-label {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kb-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

/* Nominal Quick Grid */
.kb-nominal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.kb-nominal-btn {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 10px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.kb-nominal-btn:hover {
  border-color: #15803d;
  color: #15803d;
  background: #f0fdf4;
}

.kb-nominal-btn.active {
  border-color: #15803d;
  background: #ecfdf5;
  color: #15803d;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
}

.kb-custom-input-wrap {
  position: relative;
  display: flex !important;
  align-items: center !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 6px 14px !important;
  background: #ffffff !important;
  margin-bottom: 16px;
}

.kb-custom-prefix {
  position: static !important;
  transform: none !important;
  font-family: var(--font-heading);
  font-weight: 800;
  color: #14281d !important;
  font-size: 1.15rem;
  margin-right: 10px;
  flex-shrink: 0;
  display: inline-block;
  line-height: 1;
}

.kb-custom-input {
  border: none !important;
  outline: none !important;
  width: 100%;
  padding: 6px 0 !important;
  background: transparent !important;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #16a34a !important;
  transition: all 0.2s ease;
}

.kb-custom-input:focus {
  outline: none;
  border-color: #15803d;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
}

/* Payment Selector Pill */
.kb-pay-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.kb-pay-card {
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  background: #ffffff;
}

.kb-pay-card:hover {
  border-color: #15803d;
}

.kb-pay-card.active {
  border-color: #15803d;
  background: #ecfdf5;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);
}

.kb-pay-card i {
  font-size: 1.3rem;
  color: #15803d;
}

.kb-pay-info strong {
  display: block;
  font-size: 0.86rem;
  color: #0f172a;
}

.kb-pay-info small {
  font-size: 0.72rem;
  color: #64748b;
}

/*
Theme Name: 
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 16px;
  margin-bottom: 20px;
}

.kb-qris-card-frame {
  background: #ffffff;
  border: 2px solid #00a39d;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(0, 163, 157, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 270px;
  width: 100%;
  margin: 0 auto 12px auto;
}

.kb-qris-header-badge {
  background: #00a39d;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kb-qris-img {
  max-width: 200px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

.kb-qris-nmid-text {
  font-size: 0.72rem;
  color: #475569;
  display: block;
  margin-top: 8px;
}

.kb-qris-owner-text {
  font-size: 0.76rem;
  color: #0f766e;
  display: block;
  margin-top: 2px;
}

.kb-qris-action-wrap {
  margin-top: 6px;
  display: flex;
  justify-content: center;
}

.kb-qris-guide-text {
  font-size: 0.75rem;
  color: #64748b;
  margin: 10px auto 0 auto;
  line-height: 1.45;
  text-align: center;
  max-width: 440px;
}

/* Donor Inputs */
.kb-form-group {
  margin-bottom: 14px;
}

.kb-form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.kb-input-text, .kb-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  color: #0f172a;
  transition: all 0.2s ease;
}

.kb-input-text:focus, .kb-textarea:focus {
  outline: none;
  border-color: #15803d;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
}

.kb-textarea {
  resize: vertical;
  min-height: 60px;
}

.kb-anon-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 0.86rem;
  color: #334155;
  user-select: none;
}

.kb-anon-check input {
  width: 17px;
  height: 17px;
  accent-color: #15803d;
  cursor: pointer;
}

/* Submit in Modal */
.btn-kb-submit-final {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 14px 24px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.3);
  transition: all 0.2s ease;
}

.btn-kb-submit-final:hover {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%);
}

/* Kitabisa Donor Prayer Cards (Inside Doa Orang Baik Tab) */
.kb-prayers-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.kb-prayer-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: fadeInPane 0.3s ease-out;
}

.kb-prayer-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e1;
}

.kb-prayer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.kb-prayer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1b4931 0%, #15803d 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.2);
}

.kb-prayer-meta {
  flex: 1;
}

.kb-prayer-author {
  font-family: var(--font-heading);
  font-size: 0.94rem;
  font-weight: 800;
  color: #0f172a;
  display: block;
}

.kb-prayer-nominal {
  font-size: 0.78rem;
  color: #64748b;
  display: block;
}

.kb-prayer-nominal strong {
  color: #15803d;
  font-weight: 700;
}

.kb-prayer-time {
  color: #94a3b8;
}

.kb-prayer-text {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.55;
  font-style: italic;
  margin: 0 0 12px 0;
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 10px;
  border-left: 3px solid #e09f3e;
}

.kb-prayer-footer {
  display: flex;
  justify-content: flex-end;
}

.kb-aamiin-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.kb-aamiin-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fef2f2;
}

.kb-aamiin-btn.active {
  background: #fee2e2;
  border-color: #ef4444;
  color: #dc2626;
  font-weight: 800;
}

.kb-aamiin-btn.active i {
  color: #ef4444;
  animation: heartPulse 0.4s ease-out;
}

@keyframes heartPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Tab Switching Fade Animation */
.kb-fade-transition {
  animation: kbFadeEffect 0.35s ease-out;
}

@keyframes kbFadeEffect {
  from { opacity: 0.3; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sticky Bottom Mobile Bar (Ala Kitabisa Mobile App) */
.kb-sticky-mobile-cta {
  display: none;
}

@media (max-width: 900px) {
  .kb-campaign-grid {
    grid-template-columns: 1fr;
  }
  .kb-card-action {
    position: static;
    margin-top: 20px;
  }
  .kb-sticky-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    padding: 12px 18px;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    transition: transform 0.3s ease;
  }
  .kb-mobile-cta-info {
    display: flex;
    flex-direction: column;
  }
  .kb-mobile-cta-label {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
  }
  .kb-mobile-cta-amount {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 900;
    color: #15803d;
  }
  .btn-kb-donate-mobile {
    background: linear-gradient(135deg, #e09f3e 0%, #d97706 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 10px 22px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
  }
}

@media (max-width: 600px) {
  .kb-nominal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kb-cover-wrap {
    height: 220px;
  }
  .kb-title {
    font-size: 1.25rem;
  }
}



/*
Theme Name: 
  gap: 8px;
  width: 100%;
  margin: 0 auto 24px auto;
}

.kb-prog-tab {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 30px;
  padding: 10px 6px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-prog-tab:hover {
  border-color: #15803d;
  color: #15803d;
  background: #f0fdf4;
}

.kb-prog-tab.active {
  background: linear-gradient(135deg, #1b4931 0%, #15803d 100%);
  border-color: #15803d;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.3);
}

.kb-prog-tab.active i {
  color: #e09f3e;
}

@media (max-width: 992px) {
  .kb-program-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .kb-program-tabs::-webkit-scrollbar {
    display: none;
  }
  .kb-prog-tab {
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 0.82rem;
  }
}

/*
Theme Name: 
  justify-content: center;
  gap: 8px;
  margin-bottom: 34px;
}

.art-filter-pill {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 24px;
  padding: 8px 18px;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.art-filter-pill:hover {
  border-color: #15803d;
  color: #15803d;
  background: #f0fdf4;
}

.art-filter-pill.active {
  background: #15803d;
  border-color: #15803d;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.25);
}

.articles-magazine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 45px;
}

@media (max-width: 1024px) {
  .articles-magazine-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .articles-magazine-grid {
    grid-template-columns: 1fr;
  }
}

.art-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.art-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
  border-color: #bbf7d0;
}

.art-card-thumb-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background: #0f172a;
  overflow: hidden;
}

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

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

.art-card-cat-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

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

.art-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  color: #64748b;
  margin-bottom: 10px;
}

.art-card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.4;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.art-card-desc {
  font-size: 0.86rem;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 14px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Interconnected Program Tag */
.art-connected-tag {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.74rem;
  color: #15803d;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.art-read-btn {
  background: #f8fafc;
  color: var(--primary);
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 9px 16px;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  width: 100%;
}

.art-card:hover .art-read-btn {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

/*
Theme Name: 
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(5px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.article-reader-modal-backdrop.active {
  display: flex;
  animation: modalFadeIn 0.25s ease-out;
}

.article-reader-sheet {
  background: #ffffff;
  border-radius: 20px;
  max-width: 760px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  position: relative;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  margin: auto;
  -webkit-overflow-scrolling: touch;
}

.article-reader-header {
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 5;
}

.article-reader-body {
  padding: 24px 28px;
}

.reader-cover-wrap {
  width: 100%;
  height: 320px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #0f172a;
}

.reader-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reader-title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin: 0 0 12px 0;
}

.reader-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 0.8rem;
  color: #64748b;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 20px;
}

.reader-content-text {
  font-size: 0.98rem;
  color: #334155;
  line-height: 1.75;
}

.reader-content-text p {
  margin-bottom: 16px;
}

.reader-content-text blockquote {
  background: #f0fdf4;
  border-left: 4px solid #16a34a;
  padding: 14px 18px;
  margin: 18px 0;
  font-style: italic;
  color: #14532d;
  border-radius: 0 10px 10px 0;
}

/* Reader Connected Program Action Box */
.reader-program-box {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1.5px solid #a7f3d0;
  border-radius: 14px;
  padding: 18px 22px;
  margin: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.reader-program-info h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #065f46;
  margin: 0 0 4px 0;
}

.reader-program-info p {
  font-size: 0.84rem;
  color: #047857;
  margin: 0;
}

/* Related Articles List in Reader */
.reader-related-wrap {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}

.reader-related-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reader-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 600px) {
  .reader-related-grid {
    grid-template-columns: 1fr;
  }
}

.reader-rel-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.reader-rel-card:hover {
  background: #ffffff;
  border-color: #15803d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.reader-rel-thumb {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.reader-rel-info h5 {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  line-height: 1.35;
}

.reader-rel-info span {
  font-size: 0.72rem;
  color: #64748b;
}

/* Article Category Dropdown for Mobile / More than 5 items */
.article-category-dropdown-wrap {
  display: none;
  max-width: 360px !important;
  margin: 0 auto 24px auto !important;
  position: relative !important;
}

.article-category-select {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  line-height: normal !important;
  padding: 10px 48px 10px 18px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2316a34a' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 18px !important;
  border: 2px solid #16a34a !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.12) !important;
  outline: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.article-category-dropdown-wrap::after {
  display: none !important;
}

@media (max-width: 768px) {
  .article-category-filters {
    display: none;
  }
  .article-category-dropdown-wrap {
    display: block;
  }
}

/*
Theme Name: 
  gap: 22px;
  margin-top: 32px;
}

@media (max-width: 992px) {
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .solutions-grid {
    grid-template-columns: 1fr;
  }
}

.solution-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}

.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: #86efac;
}

.solution-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 16px;
}

.solution-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px 0;
  line-height: 1.35;
}

.solution-card p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/*
Theme Name: 
  margin: 0 auto 22px auto;
  padding: 0 12px;
}

.kb-program-mobile-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 800;
  color: #065f46;
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 0.02em;
}

.kb-program-select-inner {
  position: relative;
  width: 100%;
}

.kb-program-mobile-select {
  width: 100%;
  padding: 13px 44px 13px 18px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #065f46;
  background: #ffffff;
  border: 2px solid #16a34a;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.14);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.kb-program-select-inner::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #16a34a;
  pointer-events: none;
  font-size: 0.88rem;
}

@media (max-width: 768px) {
  .kb-program-tabs {
    display: none !important;
  }
  .kb-program-mobile-wrap {
    display: block;
  }
}

/*
Theme Name: 

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.86rem;
  color: #cbd5e1;
  line-height: 1.5;
}

.footer-contact-item i {
  color: #34d399;
  font-size: 1rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.footer-rekening-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
}

.footer-links a i {
  font-size: 0.72rem;
  margin-right: 6px;
  color: #34d399;
  opacity: 0.85;
}

/*
Theme Name: 
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 100000;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.article-full-reader-overlay.active {
  display: block;
  animation: readerFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes readerFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.reader-top-sticky-bar {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e8f0;
  z-index: 50;
  padding: 12px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.reader-top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.btn-reader-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reader-back:hover {
  background: #0d5c3a;
  color: #ffffff;
  border-color: #0d5c3a;
}

.reader-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-reader-cat {
  background: #dcfce7;
  color: #15803d;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 50px;
}

.btn-share-wa-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25d366;
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  text-decoration: none;
}

.btn-share-wa-top:hover { opacity: 0.9; }

.btn-close-reader-icon {
  background: #f1f5f9;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.2s;
}

.btn-close-reader-icon:hover {
  background: #fee2e2;
  color: #b91c1c;
}

/* Article Canvas */
.reader-article-canvas {
  padding: 30px 0 80px 0;
  background: #ffffff;
}

.reader-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

.reader-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.reader-breadcrumbs a {
  color: #0d5c3a;
  text-decoration: none;
  font-weight: 600;
}

.reader-breadcrumbs a:hover {
  text-decoration: underline;
}

.reader-breadcrumbs i {
  font-size: 0.65rem;
  color: #94a3b8;
}

.breadcrumb-current {
  color: #334155;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.reader-headline-title {
  font-family: var(--font-heading);
  font-size: 2.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.32;
  margin-bottom: 20px;
}

.reader-author-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 26px;
  flex-wrap: wrap;
  gap: 16px;
}

.author-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d5c3a, #10b981);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #0f172a;
}

.author-role {
  font-size: 0.78rem;
  color: #64748b;
}

.reader-meta-pills {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.82rem;
  color: #64748b;
  flex-wrap: wrap;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.reader-featured-figure {
  margin: 0 0 28px 0;
}

.reader-featured-img-wrap {
  width: 100%;
  max-height: 460px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  background: #0f172a;
}

.reader-featured-img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  display: block;
}

.reader-featured-caption {
  font-size: 0.8rem;
  color: #64748b;
  font-style: italic;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Takeaways Snippet Box */
.reader-takeaways-box {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 32px;
}

.takeaways-header {
  font-size: 0.96rem;
  font-weight: 800;
  color: #14532d;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.takeaways-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.takeaways-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  color: #166534;
  line-height: 1.6;
}

.takeaways-list li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: #16a34a;
}

/* Editorial Body Typography */
.reader-editorial-body {
  font-size: 1.08rem;
  line-height: 1.85;
  color: #1e293b;
}

.reader-editorial-body p {
  margin-bottom: 22px;
}

.reader-editorial-body h2 {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  margin: 40px 0 16px 0;
  position: relative;
  padding-left: 14px;
  border-left: 4px solid #10b981;
  line-height: 1.35;
}

.reader-editorial-body h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin: 28px 0 12px 0;
}

.reader-editorial-body blockquote {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-left: 4px solid #10b981;
  padding: 20px 24px;
  margin: 30px 0;
  border-radius: 0 14px 14px 0;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #14532d;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
}

.reader-editorial-body ul, .reader-editorial-body ol {
  margin: 0 0 24px 20px;
  line-height: 1.8;
}

.reader-editorial-body strong {
  color: #0f172a;
}

.reader-editorial-body a {
  color: #0d5c3a;
  font-weight: 700;
  text-decoration: underline;
}

.reader-editorial-body a:hover {
  color: #10b981;
}

/* Metric Callout Card */
.editorial-stat-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 22px;
  margin: 28px 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.editorial-stat-box i {
  font-size: 2.2rem;
  color: #0d5c3a;
}

.editorial-stat-box strong {
  display: block;
  font-size: 1.35rem;
  color: #0f172a;
}

.editorial-stat-box span {
  font-size: 0.85rem;
  color: #64748b;
}

/* Program Donation Action Card */
.reader-program-cta-card {
  background: linear-gradient(135deg, #0d5c3a 0%, #064e3b 100%);
  color: #ffffff;
  border-radius: 16px;
  padding: 28px 32px;
  margin: 40px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  box-shadow: 0 12px 30px rgba(13, 92, 58, 0.25);
  flex-wrap: wrap;
}

.reader-program-cta-card h4 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.reader-program-cta-card p {
  font-size: 0.92rem;
  color: #e2e8f0;
  margin: 0;
  max-width: 520px;
}

/* Share Bar */
.reader-share-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  margin: 35px 0;
  flex-wrap: wrap;
  gap: 14px;
}

.share-label {
  font-weight: 700;
  font-size: 0.92rem;
  color: #334155;
}

.share-buttons-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.2s;
}

.share-btn:hover { transform: translateY(-1px); }

.share-wa { background: #25d366; color: #fff; }
.share-fb { background: #1877f2; color: #fff; }
.share-x { background: #000000; color: #fff; }
.share-copy { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }

/* Related Stories Section */
.reader-related-section {
  margin-top: 45px;
}

.related-header {
  margin-bottom: 22px;
}

.related-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.related-sub {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
}

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

@media (max-width: 768px) {
  .reader-related-grid {
    grid-template-columns: 1fr;
  }
  .reader-headline-title {
    font-size: 1.6rem;
  }
  .reader-container {
    padding: 0 16px;
  }
  .reader-program-cta-card {
    padding: 20px;
  }
}

.reader-rel-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.reader-rel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border-color: #10b981;
}

.reader-rel-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.reader-rel-info {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.reader-rel-info h5 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reader-rel-info span {
  font-size: 0.76rem;
  color: #64748b;
  margin-top: auto;
}

/* Bottom Nav */
.reader-bottom-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
  flex-wrap: wrap;
}

/*
Theme Name: 
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 30px !important;
}

.hero-trust .trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  background: rgba(0, 0, 0, 0.38) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.hero-trust .trust-item i {
  color: #fde047 !important;
  font-size: 1rem !important;
}

.stat-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px 16px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.stat-card:hover {
  background: #ffffff !important;
  border-color: #047857 !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 32px rgba(4, 120, 87, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.stat-card .stat-icon {
  background: #f0fdf4 !important;
  color: #047857 !important;
  border: 1px solid #bbf7d0 !important;
  box-shadow: 0 2px 6px rgba(4, 120, 87, 0.08) !important;
}

.stat-card .stat-number {
  color: #047857 !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

.stat-card .stat-suffix,
.stat-card .stat-plus {
  color: #d97706 !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

.stat-card .stat-label,
.stats-card-grid .stat-label,
.stat-label {
  color: #334155 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  margin-top: 6px !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
}

/* Specific override for white-box donation stat item */
.stat-item .stat-label {
  color: #15803d !important;
  text-shadow: none !important;
}

/*
Theme Name: 
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #1b4931;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-right: 4px;
}

.header-search-btn:hover {
  background-color: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.28);
}

.search-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 30, 20, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: none !important;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px 30px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.search-modal-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.search-modal-box {
  background: #ffffff;
  width: 100%;
  max-width: 680px;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(22, 163, 74, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 100px);
  transform: translateY(-20px) scale(0.98);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-modal-overlay.active .search-modal-box {
  transform: translateY(0) scale(1);
}

.search-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 14px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.search-input-wrap:focus-within {
  background: #ffffff;
  border-color: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

.search-input-wrap .search-input-icon {
  color: #16a34a;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.search-modal-form {
  flex: 1;
  display: flex;
  margin: 0;
}

.search-input-field {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 1rem;
  color: #0f172a;
  font-family: inherit;
  font-weight: 500;
}

.search-input-field::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.search-clear-btn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.2s, background-color 0.2s;
}

.search-clear-btn:hover {
  color: #ef4444;
  background-color: #fee2e2;
}

.search-modal-close {
  background: #f1f5f9;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s;
  flex-shrink: 0;
}

.search-modal-close:hover {
  background: #fee2e2;
  color: #ef4444;
}

.search-quick-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #fafaf9;
  border-bottom: 1px solid #f1f5f9;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.search-quick-tags::-webkit-scrollbar {
  display: none;
}

.quick-tag-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #78716c;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.quick-tag-label i {
  color: #ea580c;
}

.search-tag-pill {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  color: #44403c;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.search-tag-pill:hover {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
  transform: translateY(-1px);
}

.search-results-container {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 180px;
  max-height: 52vh;
}

.search-empty-state {
  text-align: center;
  padding: 36px 16px;
  color: #94a3b8;
}

.search-empty-state i {
  font-size: 2.2rem;
  color: #cbd5e1;
  margin-bottom: 10px;
  display: block;
}

.search-empty-state p {
  font-size: 0.9rem;
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.6;
  color: #64748b;
}

.search-result-group {
  margin-bottom: 16px;
}

.search-result-group:last-child {
  margin-bottom: 0;
}

.search-result-group-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: #166534;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-result-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.18s, transform 0.12s;
  cursor: pointer;
}

.search-result-item:hover {
  background-color: #f0fdf4;
  transform: translateX(4px);
}

.search-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.search-result-body {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
  line-height: 1.35;
}

.search-result-title mark {
  background-color: #fef08a;
  color: #854d0e;
  padding: 1px 3px;
  border-radius: 2px;
}

.search-result-desc {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-meta {
  font-size: 0.72rem;
  color: #16a34a;
  font-weight: 600;
  margin-top: 4px;
}

.search-modal-footer {
  padding: 10px 20px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  color: #94a3b8;
}

.search-modal-footer kbd {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 0.7rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  font-family: inherit;
}

/* In-Page Article Search Toolbar (Kabar Kegiatan Page) */
.article-search-toolbar {
  max-width: 600px;
  margin: 0 auto 24px auto;
  position: relative;
}

.article-search-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 50px;
  padding: 6px 8px 6px 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

.article-search-box:focus-within {
  border-color: #16a34a;
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.15);
}

.article-search-box .search-icon {
  color: #16a34a;
  font-size: 1rem;
  margin-right: 10px;
  flex-shrink: 0;
}

.article-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.95rem;
  color: #1e293b;
  font-family: inherit;
  background: transparent;
}

.article-search-input::placeholder {
  color: #94a3b8;
}

.article-search-clear {
  background: #f1f5f9;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin-right: 6px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.article-search-clear:hover {
  background: #fee2e2;
  color: #ef4444;
}

.article-search-submit {
  background: #16a34a;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.article-search-submit:hover {
  background: #15803d;
  transform: translateY(-1px);
}

.article-no-results {
  text-align: center;
  padding: 40px 20px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px dashed #cbd5e1;
  margin: 20px 0;
}

.article-no-results i {
  font-size: 2.2rem;
  color: #94a3b8;
  margin-bottom: 12px;
  display: block;
}

.article-no-results h4 {
  font-size: 1.1rem;
  color: #1e293b;
  margin-bottom: 6px;
  font-weight: 700;
}

.article-no-results p {
  color: #64748b;
  font-size: 0.9rem;
  margin: 0;
}

/* Mobile Nav Drawer Search Pill */
.mobile-nav-search {
  display: none;
  margin-bottom: 14px;
}

@media (max-width: 1024px) {
  .mobile-nav-search {
    display: block;
  }
  .mobile-search-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all 0.2s;
  }
  .mobile-search-trigger i {
    color: #16a34a;
    font-size: 0.95rem;
  }
  .mobile-search-trigger:hover,
  .mobile-search-trigger:active {
    background: #e2e8f0;
    color: #1e293b;
  }
}

/*
Theme Name: 
    padding: 0 14px !important;
    gap: 8px !important;
    justify-content: space-between !important;
    overflow: visible !important;
  }

  .brand-logo {
    gap: 8px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .brand-sub {
    display: none !important;
  }

  .brand-title {
    font-size: 1.02rem !important;
    white-space: nowrap !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .header-search-btn {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 0.88rem !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }

  .btn-header {
    padding: 7px 12px !important;
    font-size: 0.82rem !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  .hamburger-btn {
    display: flex !important;
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    padding: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 4px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    margin-left: 2px !important;
    z-index: 1002 !important;
  }

  .hamburger-btn span {
    display: block !important;
    width: 20px !important;
    height: 2.5px !important;
    background-color: var(--primary) !important;
    border-radius: 2px !important;
    transition: all 0.25s ease !important;
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: 0 10px !important;
    gap: 6px !important;
    height: 64px !important;
  }

  .logo-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .brand-title {
    font-size: 0.92rem !important;
  }

  .header-actions {
    gap: 4px !important;
  }

  .header-search-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.82rem !important;
  }

  .btn-header {
    padding: 6px 9px !important;
    font-size: 0.76rem !important;
    border-radius: 25px !important;
  }

  .hamburger-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 5px !important;
  }

  .hamburger-btn span {
    width: 18px !important;
    height: 2px !important;
  }
}

@media (max-width: 370px) {
  .brand-title {
    font-size: 0.85rem !important;
  }

  .btn-header span {
    display: none !important;
  }

  .btn-header {
    padding: 6px 9px !important;
    width: 34px !important;
    height: 34px !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
}

/* Ensure Mobile Header Actions Fit Perfectly (< 768px) */
@media (max-width: 768px) {
  .brand-sub {
    display: none !important;
  }
  .header-container {
    padding: 0 6px !important;
    gap: 4px !important;
  }
  .brand-logo {
    gap: 5px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .brand-title {
    font-size: 0.78rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
  }
  .logo-icon {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }
  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }
  .header-search-btn {
    display: inline-flex !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    font-size: 0.76rem !important;
  }
  .btn-header {
    display: inline-flex !important;
    width: auto !important;
    height: 30px !important;
    padding: 4px 8px !important;
    border-radius: 20px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    background: #16a34a !important;
    color: #ffffff !important;
  }
  .btn-header span {
    display: inline !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
  .btn-header i {
    font-size: 0.75rem !important;
    margin: 0 !important;
  }
  .hamburger-btn {
    display: flex !important;
    flex-shrink: 0 !important;
    width: 30px !important;
    height: 30px !important;
    padding: 4.5px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 3px !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    z-index: 1002 !important;
    margin-left: 1px !important;
  }
  .hamburger-btn span {
    display: block !important;
    width: 17px !important;
    height: 2px !important;
    background-color: var(--primary) !important;
    border-radius: 2px !important;
    transition: all 0.25s ease !important;
  }
}

/* STRICT GLOBAL ANTI-OVERFLOW FOR MOBILE */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

/* RESPONSIVE BUTTONS: PREVENT HORIZONTAL OVERFLOW ON MOBILE */
@media (max-width: 768px) {
  .btn:not(.btn-header) {
    white-space: normal !important;
    text-align: center !important;
    max-width: 100% !important;
    word-break: break-word !important;
  }
}


/*
Theme Name: 
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  width: 100% !important;
}

.header-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 72px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  gap: 16px !important;
}

.brand-logo {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.logo-icon {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
}

.brand-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #1b4931 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

.brand-sub {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  margin-top: 2px !important;
}

.nav-menu {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 1 !important;
}

.nav-list {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.nav-link:hover, .nav-link.active {
  color: #16a34a !important;
  background-color: #f0fdf4 !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
}

.header-search-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #1b4931 !important;
  font-size: 0.92rem !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
}

.header-search-btn:hover {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
}

.btn-donate-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  border-radius: 30px !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.btn-donate-pill:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35) !important;
}

/* 2. Responsive Mobile Navbar */
@media (max-width: 1024px) {
  .nav-menu {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    flex-direction: column !important;
    padding: 0 20px !important;
    z-index: 999 !important;
  }
}

@media (max-width: 768px) {
  .header-container {
    height: 64px !important;
    padding: 0 16px !important;
    gap: 10px !important;
  }

  .brand-sub {
    display: none !important;
  }

  .logo-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .brand-title {
    font-size: 1.02rem !important;
  }

  /* On mobile header, hide search button to prevent crowding (available in mobile drawer) */
  .header-search-btn {
    display: none !important;
  }

  .header-actions {
    gap: 10px !important;
    margin-left: auto !important;
  }

  .btn-donate-pill {
    padding: 7px 13px !important;
    font-size: 0.8rem !important;
    gap: 5px !important;
  }

  .hamburger-btn {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    padding: 6px !important;
    margin-left: 2px !important;
  }
}

/* 3. Global Section Breathing Room (Bebas Mepet) */
.elementor-section-wrap > .elementor-section,
.elementor > .elementor-section,
.section {
  padding-top: 75px !important;
  padding-bottom: 75px !important;
  width: 100% !important;
}

/* First section after header */
.elementor-section-wrap > .elementor-section:first-child,
.elementor > .elementor-section:first-child,
.section:first-of-type,
.hero-section,
.section-featured-article {
  padding-top: 85px !important;
  padding-bottom: 85px !important;
}

/* Last section before footer */
.elementor-section-wrap > .elementor-section:last-child,
.elementor > .elementor-section:last-child,
.section-cta-bottom {
  padding-top: 80px !important;
  padding-bottom: 95px !important;
}

/* Section Header Margins */
.section-header {
  margin-bottom: 38px !important;
  text-align: center !important;
}

.section-title {
  margin-bottom: 12px !important;
}

.section-subtitle {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* Card Grids & Container Gaps */
.container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.program-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  margin-top: 32px !important;
}

.ciracas-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px !important;
  align-items: stretch !important;
  margin-top: 32px !important;
}

.infographic-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  margin-top: 32px !important;
}

.testimonial-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 26px !important;
  margin-top: 32px !important;
}

/* 4. Article Magazine Grid & Cards */
.articles-magazine-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin-top: 32px !important;
}

.art-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.art-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1) !important;
  border-color: #86efac !important;
}

.art-card-thumb-wrap {
  position: relative !important;
  width: 100% !important;
  height: 210px !important;
  overflow: hidden !important;
  background-color: #0f172a !important;
}

.art-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.art-card:hover .art-card-img {
  transform: scale(1.05) !important;
}

.art-card-cat-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(4px) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.03em !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  z-index: 2 !important;
}

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

.art-meta-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  font-size: 0.76rem !important;
  color: #64748b !important;
  margin-bottom: 12px !important;
}

.art-meta-row span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.art-meta-row .art-meta-date {
  font-weight: 600 !important;
  color: #334155 !important;
}

.art-meta-row .art-meta-loc {
  font-weight: 700 !important;
  color: #047857 !important;
}

.art-card-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
  margin: 0 0 10px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.art-card-desc {
  font-size: 0.88rem !important;
  color: #475569 !important;
  line-height: 1.55 !important;
  margin: 0 0 16px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: 1 !important;
}

.art-connected-tag {
  font-size: 0.75rem !important;
  color: #15803d !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  margin-bottom: 14px !important;
  font-weight: 600 !important;
}

.art-read-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  background: #f0fdf4 !important;
  color: #166534 !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  border: 1px solid #bbf7d0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.art-read-btn:hover {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}

/* Featured Article Box Spacing */
.featured-post-card {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 32px !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e2e8f0 !important;
  margin-top: 24px !important;
}

.featured-thumb-wrap {
  position: relative !important;
  min-height: 340px !important;
  overflow: hidden !important;
}

.featured-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.featured-body {
  padding: 32px 32px 32px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* 5. Responsive Breakpoints for Grids & Sections */
@media (max-width: 1024px) {
  .elementor-section-wrap > .elementor-section,
  .elementor > .elementor-section,
  .section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .elementor-section-wrap > .elementor-section:first-child,
  .elementor > .elementor-section:first-child,
  .section:first-of-type,
  .hero-section,
  .section-featured-article {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  .program-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
  }

  .ciracas-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
  }

  .infographic-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
  }

  .articles-magazine-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
  }

  .featured-post-card {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .featured-body {
    padding: 24px !important;
  }

  .featured-thumb-wrap {
    min-height: 260px !important;
  }
}

@media (max-width: 768px) {
  .elementor-section-wrap > .elementor-section,
  .elementor > .elementor-section,
  .section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .elementor-section-wrap > .elementor-section:first-child,
  .elementor > .elementor-section:first-child,
  .section:first-of-type,
  .hero-section,
  .section-featured-article {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  .elementor-section-wrap > .elementor-section:last-child,
  .elementor > .elementor-section:last-child,
  .section-cta-bottom {
    padding-top: 50px !important;
    padding-bottom: 65px !important;
  }

  .section-header {
    margin-bottom: 24px !important;
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .program-cards-grid,
  .ciracas-grid,
  .infographic-grid,
  .testimonial-grid,
  .articles-magazine-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-top: 24px !important;
  }
}


/* Filter hiding rule */
.art-card.is-hidden {
  display: none !important;
}


/*
Theme Name: 
  grid-template-columns: 1fr 1fr !important;
  gap: 32px !important;
  align-items: stretch !important;
  margin-top: 32px !important;
}

@media (max-width: 768px) {
  .ciracas-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* 2. Coverage Grid System for Tata Kelola & Evaluasi (4 Kolom Rapi) */
.coverage-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  margin-top: 32px !important;
  align-items: stretch !important;
}

@media (max-width: 992px) {
  .coverage-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 576px) {
  .coverage-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

.coverage-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 28px 22px !important;
  text-align: center !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.coverage-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.cov-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background: #f0fdf4 !important;
  color: #10b981 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  margin-bottom: 16px !important;
}

.coverage-box h4 {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  color: #1b4931 !important;
  margin-bottom: 10px !important;
}

.coverage-box p {
  font-size: 0.90rem !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* 3. Anti-Cutoff Anchor System - Bebas Terpotong Header Sticky */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 115px !important;
}

section[id], div[id], article[id] {
  scroll-margin-top: 115px !important;
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 90px !important;
  }
  section[id], div[id], article[id] {
    scroll-margin-top: 90px !important;
  }
}

/* 4. Section Title & Subtitle Bebas Terpotong */
.section-header {
  overflow: visible !important;
  padding: 0 12px !important;
}

.section-title {
  overflow: visible !important;
  line-height: 1.32 !important;
}

.section-subtitle {
  overflow: visible !important;
  line-height: 1.68 !important;
}

/* 5. Visi & Misi Card Styling Rapi & Mewah */
.visi-misi-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 35px 30px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.visi-misi-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

/* Mobile Drawer Active & Open Synced */
.nav-menu.open, .nav-menu.active {
  max-height: 88vh !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex !important;
}


/*
Theme Name: 
.bg-gradient-light,
.bg-light-tint,
.subpage-zebra-soft,
.section-zebra-soft,
.elementor-section.bg-sage-soft,
.elementor-section.bg-gradient-light,
.elementor-section.bg-light-tint,
section.section.bg-sage-soft,
section.section.bg-gradient-light,
section.section.bg-light-tint,
section.section.subpage-zebra-soft {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Seksi Warna Putih Bersih */
.bg-white,
.section-zebra-white,
.elementor-section.bg-white,
section.section.bg-white {
  background-color: #ffffff !important;
}

/* Card Box di atas seksi abu-abu muda memiliki kontras putih tajam & soft shadow */
.bg-sage-soft .card,
.bg-sage-soft .coverage-box,
.bg-sage-soft .daily-ks-card,
.bg-sage-soft .gallery-card,
.bg-sage-soft .mitra-card,
.bg-sage-soft .faq-item,
.bg-gradient-light .card,
.bg-gradient-light .coverage-box,
.bg-gradient-light .daily-ks-card,
.bg-gradient-light .gallery-card,
.bg-gradient-light .mitra-card,
.bg-gradient-light .faq-item,
.subpage-zebra-soft .card,
.subpage-zebra-soft .gallery-card,
.subpage-zebra-soft .legalitas-exec-card,
.subpage-zebra-soft .kb-stat-box {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
}

/* Galeri Foto Styling Presisi */
.gallery-thumb {
  background-color: #e2e8f0 !important;
}
.gallery-thumb img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
}



/*
Theme Name: 

/* 1. Seksi Warna Abu-Abu Muda Sangat Lembut (#f8fafc) */
#fakta-kemiskinan,
#solusi-wilayah,
#potret-kampung,
#sebaran-wilayah,
#legalitas,
#relawan,
#faq,
#sejarah-founder,
#model-solusi,
#tata-kelola,
#donasi-faq,
.bg-sage-soft,
.bg-gradient-light,
.bg-light-tint,
.subpage-zebra-soft,
.section-zebra-soft,
.elementor-section.bg-sage-soft,
.elementor-section.bg-gradient-light,
.elementor-section.bg-light-tint,
section.section.bg-sage-soft,
section.section.bg-gradient-light,
section.section.bg-light-tint,
section.section.subpage-zebra-soft,
section.section.section-zebra-soft {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* 2. Seksi Warna Putih Bersih (#ffffff) */
#video-gerakan,
#percontohan-ciracas,
#program-unggulan,
#pendampingan,
#csr-sdgs,
#cara-bergabung,
#testimoni,
#section-15,
#visi-misi,
#flagship-ciracas,
#potret-warga,
.bg-white,
.section-zebra-white,
.elementor-section.bg-white,
section.section.bg-white,
section.section.section-zebra-white {
  background-color: #ffffff !important;
}

/* 3. Card Box di atas Seksi Abu-Abu Muda (#f8fafc) */
#fakta-kemiskinan .card,
#fakta-kemiskinan .stat-card,
#fakta-kemiskinan .reality-box,
#solusi-wilayah .card,
#solusi-wilayah .reality-box,
#potret-kampung .card,
#potret-kampung .gallery-card,
#sebaran-wilayah .card,
#sebaran-wilayah .coverage-box,
#legalitas .card,
#relawan .card,
#relawan .daily-ks-card,
#faq .card,
#faq .faq-item,
.bg-sage-soft .card,
.bg-sage-soft .stat-card,
.bg-sage-soft .program-card,
.bg-sage-soft .mitra-card,
.bg-sage-soft .pilar-card,
.bg-sage-soft .reality-box,
.bg-sage-soft .faq-item,
.subpage-zebra-soft .card,
.subpage-zebra-soft .stat-card,
.subpage-zebra-soft .program-card,
.subpage-zebra-soft .mitra-card,
.subpage-zebra-soft .pilar-card,
.subpage-zebra-soft .reality-box,
.subpage-zebra-soft .faq-item {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  border-radius: 16px !important;
}

/* 4. Pastikan Konten Selalu 100% Solid & Terlihat (Anti-Blank) */
.reveal-on-scroll,
.reveal-on-scroll.is-revealed {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}


/*
Theme Name: 
   5. Portal CTA Sedekah kontras tinggi (latar hijau tua, teks putih tajam)
   6. Animasi berjalan mulus di bawah 3 detik (0.65s + fail-safe 2.2s)
   ========================================================================== */

/* 1. HERO SECTION: LEGA, TIDAK SESAK & ELEGAN */
.hero-section {
  padding: 85px 0 75px 0 !important;
}

.hero-container {
  max-width: 980px !important;
  margin: 0 auto !important;
}

.hero-ayat-box {
  background: rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  padding: 12px 28px !important;
  max-width: 780px !important;
  margin: 0 auto 22px auto !important;
}

.hero-title {
  font-size: clamp(2.2rem, 4.2vw, 3.2rem) !important;
  line-height: 1.25 !important;
  margin-bottom: 18px !important;
}

.hero-subtitle {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  margin-bottom: 26px !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.hero-cta-group {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
}

.hero-trust-badges {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  font-size: 0.88rem !important;
  margin-bottom: 35px !important;
}

.stats-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  margin-top: 30px !important;
}

.stat-card {
  background: rgba(16, 76, 46, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 16px !important;
  padding: 22px 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

/* 2. BANK DUNIA, LEMBAGA SMERU, URUTAN 73 (TARO TENGAH PRESISI) */
.infographic-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 1080px !important;
  margin: 0 auto 40px auto !important;
  justify-content: center !important;
}

.infographic-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 32px 24px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.infographic-card .infographic-tag,
.infographic-card .infographic-stat,
.infographic-card .infographic-desc {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.infographic-stat {
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  color: #b91c1c !important;
  text-align: center !important;
  margin: 10px 0 !important;
}

.infographic-desc {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  max-width: 280px !important;
  text-align: center !important;
}

/* 3. GAMBAR TEBUS SEMBAKO MURAH (SEIMBANG KIRI & KANAN) */
#solusi-wilayah {
  padding: 85px 0 !important;
}

#solusi-wilayah .ciracas-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: center !important;
}

#solusi-wilayah .ciracas-grid img {
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important;
  border: 3px solid #ffffff !important;
  width: 100% !important;
  height: 380px !important;
  max-height: 380px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* 4 & 5. KUMPULAN FOTO PROGRAM SERAGAM & PROPORSIONAL (FOTO PANGGUNG PAS) */
.program-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.program-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.program-img-wrap {
  width: 100% !important;
  height: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #f1f5f9 !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}

.program-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  min-height: 200px !important;
  max-height: 200px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Khusus Foto Panggung / Leadership Camp (Agar Tulisan Panggung Terbaca Sempurna) */
.program-card:nth-child(4) .program-img-wrap img,
.program-card img[src*="pelatihan"],
.program-card img[src*="leadership"] {
  object-position: center 22% !important;
}

.program-card .program-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 22px !important;
}

.program-card .program-body h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  min-height: 52px !important;
  margin-bottom: 12px !important;
}

.program-card .program-body p {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  flex: 1 1 auto !important;
  margin-bottom: 18px !important;
}

.program-card .program-cta {
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 6. PORTAL AJAKAN SEDEKAH (BEBAS WHITE-ON-WHITE / TEKS 100% TERBACA) */
.kb-portal-cta-section,
section.section.kb-portal-cta-section {
  background: linear-gradient(135deg, #0d5c3a 0%, #064e3b 100%) !important;
  color: #ffffff !important;
  padding: 85px 0 !important;
}

.kb-portal-cta-section h2,
.kb-portal-cta-section h2.section-title {
  color: #ffffff !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
}

.kb-portal-cta-section p,
.kb-portal-cta-section .section-subtitle {
  color: #e2e8f0 !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

.kb-portal-cta-section .badge-accent {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fef08a !important;
  border: 1px solid rgba(254, 240, 138, 0.4) !important;
  margin-bottom: 16px !important;
}

/* Removed blanket span white rule that broke action card text */

/* 7. ANIMASI ELEGAN & MULUS DI BAWAH 3 DETIK (0.65s + FAILSAFE 2.2s) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

.pulse-btn,
.btn-primary.pulse-btn {
  animation: ksPulseGlow 2.4s infinite ease-in-out !important;
}

@keyframes ksPulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    transform: scale(1);
  }
}


/*
Theme Name: 
   - Infographic grid: Desktop 3 kol | Tablet 3 kol | Mobile 1 kol center
   - Program cards grid: Desktop 3 kol | Tablet 2 kol | Mobile 1 kol
   - Ciracas grid (Tebus Murah): Desktop 2 kol | Mobile 1 kol
   - Portal Donasi & CTA: responsif, tombol nyaman ditekan jempol
   ========================================================================== */

/* Universal Anti-Overflow Rule */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

/*
Theme Name: 
    padding-right: 24px !important;
  }

  .header-container {
    padding: 0 20px !important;
  }

  /* Stats grid: 2 baris x 2 kolom */
  .stats-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Program cards: 2 kolom */
  .program-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* Realities: 2 kolom */
  .realities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Sebaran & Peta: 1 kolom */
  .sebaran-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Footer: 2 kolom */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
}

/*
Theme Name: 
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .section {
    padding: 55px 0 !important;
  }

  .section-title {
    font-size: 1.65rem !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  .section-subtitle {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
  }

  /* 2. HEADER & NAVBAR PAS DI LAYAR HP (ZERO CLIPPING) */
  .site-header {
    height: 62px !important;
  }

  .header-container {
    height: 62px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }

  .brand-logo {
    gap: 8px !important;
    max-width: calc(100% - 145px) !important;
  }

  .brand-logo .logo-icon {
    height: 34px !important;
    width: 34px !important;
    flex-shrink: 0 !important;
  }

  .brand-logo .brand-name {
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .header-actions {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .header-actions .btn-header-cta,
  .header-actions .btn-primary,
  .header-actions .btn {
    padding: 7px 11px !important;
    font-size: 0.78rem !important;
    border-radius: 50px !important;
    gap: 4px !important;
  }

  .hamburger-btn,
  .mobile-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 6px !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  /* 3. HERO SECTION DI HP (LEGA, MEWAH & TIDAK SESAK) */
  .hero-section {
    padding: 35px 0 50px 0 !important;
  }

  .hero-badge {
    font-size: 0.72rem !important;
    padding: 6px 12px !important;
    margin-bottom: 14px !important;
  }

  .hero-ayat-box {
    padding: 10px 14px !important;
    margin-bottom: 18px !important;
    font-size: 0.8rem !important;
  }

  .hero-ayat-box p {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }

  .hero-title {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
  }

  .hero-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin-bottom: 22px !important;
  }

  .hero-cta-group {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 22px auto !important;
  }

  .hero-cta-group .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    font-size: 0.92rem !important;
  }

  .hero-trust-badges {
    flex-direction: column !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
    margin-bottom: 25px !important;
  }

  /* Stats grid di HP: 2 kolom rapi */
  .stats-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .stat-card {
    padding: 14px 10px !important;
    border-radius: 12px !important;
  }

  .stat-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    margin-bottom: 6px !important;
  }

  .stat-number {
    font-size: 1.45rem !important;
  }

  .stat-label {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }

  /* 4. 3 KARTU KERESAHAN (BANK DUNIA, SMERU, URUTAN 73) DI HP: 1 KOLOM CENTER */
  .infographic-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 340px !important;
    margin: 0 auto 30px auto !important;
  }

  .infographic-card {
    padding: 24px 18px !important;
  }

  .infographic-stat {
    font-size: 2.2rem !important;
  }

  /* 4 Realitas Keresahan */
  .realities-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .reality-box {
    padding: 16px 14px !important;
  }

  /* 5. SOLUSI WILAYAH (TEBUS SEMBAKO MURAH) DI HP: 1 KOLOM */
  #solusi-wilayah .ciracas-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #solusi-wilayah .ciracas-grid img {
    height: 250px !important;
    max-height: 250px !important;
  }

  /* 6. PROGRAM UNGGULAN DI HP: 1 KOLOM */
  .program-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .program-img-wrap {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
  }

  .program-card .program-body {
    padding: 18px !important;
  }

  .program-card .program-body h3 {
    min-height: auto !important;
    font-size: 1.1rem !important;
  }

  /* 7. SEBARAN WILAYAH (PETA 6 PROVINSI) */
  .sebaran-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* 8. CSR PILLARS, CARA BERGABUNG, RELAWAN, TESTIMONI */
  .csr-pillars-grid,
  .join-pathways-grid,
  .daily-ks-grid,
  .testi-slider {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 9. PORTAL AJAKAN SEDEKAH (#donasi-section) */
  #donasi-section,
  .kb-portal-cta-section {
    padding: 55px 0 !important;
  }

  #donasi-section h2,
  .kb-portal-cta-section h2 {
    font-size: 1.55rem !important;
  }

  #donasi-section .section-subtitle,
  .kb-portal-cta-section .section-subtitle {
    font-size: 0.9rem !important;
  }

  #donasi-section .btn,
  .kb-portal-cta-section .btn {
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
  }

  /* 10. FOOTER DI HP */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
  }
}

/*
Theme Name: 
  }

  .header-actions .btn-header-cta span {
    display: none !important;
  }
}


/*
Theme Name: 
   - Kalkulator ZISWAF responsive 2-col to 1-col layout
   - Hardware-accelerated scroll animations (< 0.6s)
   ========================================================================== */

/* 1. TOP BAR SOCIAL LINKS & RENGGANG */
.top-bar-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 24px !important;
}

.top-bar-right {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.top-bar-social,
.social-links-mini {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: 10px !important;
}

.top-bar-social a,
.social-links-mini a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.top-bar-social a:hover,
.social-links-mini a:hover {
  background: #f59e0b !important;
  color: #103020 !important;
  transform: translateY(-2px) scale(1.08) !important;
}

/* 2. TEXTURED OVERLAYS FOR GREEN SECTIONS (KAYA FOTO KEGIATAN & BERDIMENSI LEMBUT) */
.hero-section,
.hero-ks,
#hero {
  position: relative !important;
  background: linear-gradient(135deg, #061c11 0%, #0d3822 45%, #144d30 100%) !important;
  color: #ffffff !important;
}

.ciracas-highlight-box {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(8, 38, 24, 0.84) 0%, rgba(16, 60, 39, 0.80) 100%),
              url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/kegiatan_leadership_camp_ciracas_resmi.jpg') center/cover no-repeat !important;
  color: var(--text-white) !important;
  border-radius: 16px !important;
  padding: 45px 40px !important;
  box-shadow: 0 16px 36px rgba(16, 48, 32, 0.25) !important;
  margin-bottom: 40px !important;
}

.legal-notice-box,
#legalitas .legal-notice-box,
.section-legalitas-bar .legal-notice-box {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(16, 48, 32, 0.94) 0%, rgba(27, 73, 49, 0.92) 100%),
              url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/raker_ks.jpg') center/cover no-repeat !important;
  border-radius: 16px !important;
  padding: 42px 36px !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(16, 48, 32, 0.2) !important;
}

/* ==================== HALAMAN DONASI / CROWDFUNDING ALA KITABISA (BERSIH NETRAL 100%) ==================== */
#donasi-section {
  position: relative !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  padding: 40px 0 80px 0 !important;
}

.kb-portal-cta-section,
section.section.kb-portal-cta-section {
  position: relative !important;
  background: linear-gradient(135deg, rgba(13, 92, 58, 0.94) 0%, rgba(6, 78, 59, 0.94) 100%),
              url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/sarapan_pagi.jpg') center/cover no-repeat !important;
  color: #ffffff !important;
  padding: 85px 0 !important;
}

/* 3. SUBPAGE HEROES BREATHING ROOM (PADDING-TOP 135px FOR FIXED NAVBAR) */
.page-hero,
.page-banner-section,
.subpage-hero {
  position: relative !important;
  background: linear-gradient(135deg, rgba(16, 48, 32, 0.94) 0%, rgba(27, 73, 49, 0.90) 100%),
              url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/sarapan_pagi.jpg') center/cover no-repeat !important;
  padding: 135px 20px 65px 20px !important;
  color: #ffffff !important;
  text-align: center !important;
  box-shadow: inset 0 -20px 30px rgba(0, 0, 0, 0.15) !important;
}

.page-hero-title,
.page-banner-title,
.subpage-title {
  font-family: var(--font-heading) !important;
  font-size: 2.35rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 14px 0 16px 0 !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

.page-hero-desc,
.page-banner-desc,
.subpage-desc {
  color: rgba(255, 255, 255, 0.92) !important;
  max-width: 740px !important;
  margin: 0 auto !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

/* 4. FAQ CATEGORY PILLS IN 1 SINGLE ROW (ANTI-BERANTAKAN) */
.faq-filter-pills,
#faqFilterPills {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 12px !important;
  justify-content: center !important;
  max-width: 100% !important;
  margin: 0 auto 36px !important;
  padding: 8px 16px 16px 16px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.faq-filter-pills::-webkit-scrollbar,
#faqFilterPills::-webkit-scrollbar {
  display: none !important;
}

.faq-pill {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 10px 22px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.faq-pill:hover {
  border-color: #047857 !important;
  color: #047857 !important;
  background: #f0fdf4 !important;
}

.faq-pill.active {
  background: #047857 !important;
  color: #ffffff !important;
  border-color: #047857 !important;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.25) !important;
}

@media (max-width: 768px) {
  .faq-filter-pills,
  #faqFilterPills {
    justify-content: flex-start !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* 5. KALKULATOR ZISWAF RESPONSIVE ENGINE */
.calc-page-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 36px;
  align-items: start;
}

@media (max-width: 900px) {
  .calc-page-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* 6. HARDWARE-ACCELERATED SCROLL REVEAL ANIMATIONS (< 0.6s) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.program-card,
.visi-misi-card,
.supervision-item,
.founder-quote-item {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.program-card:hover,
.visi-misi-card:hover,
.supervision-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08) !important;
}


/*
Theme Name: 
}

.main-header .header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.nav-menu ul,
.nav-menu li,
.nav-list,
.nav-item {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-list {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.nav-dropdown-menu {
  list-style: none !important;
  list-style-type: none !important;
}


/*
Theme Name: 

/* 1. FLUID & COMPASSIONATE TYPOGRAPHY */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #1e293b !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.brand-title,
.section-title,
.page-hero-title,
.subpage-title {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.02em !important;
}

h1, .hero-title, .page-hero-title {
  font-size: clamp(1.85rem, 4vw, 2.75rem) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

h2, .section-title {
  font-size: clamp(1.45rem, 3vw, 2.15rem) !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  color: #103020 !important;
}

.section-subtitle {
  font-size: clamp(0.92rem, 1.6vw, 1.05rem) !important;
  color: #64748b !important;
  max-width: 720px !important;
  margin: 0 auto 36px !important;
  line-height: 1.65 !important;
}

/* 2. CARD-FIRST BOX ARCHITECTURE (LUXURY SOFT SHADOWS) */
.program-card,
.visi-misi-card,
.testi-card,
.supervision-item,
.reality-card,
.founder-quote-item,
.c-stat-item,
.stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.program-card:hover,
.visi-misi-card:hover,
.testi-card:hover,
.supervision-item:hover,
.reality-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 32px rgba(16, 48, 32, 0.09), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

/* 3. PROGRAM CARDS HARMONIZATION (UNIFORM BUTTON BASELINE) */
.program-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 26px !important;
  align-items: stretch !important;
}

.program-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.program-card-img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}

.program-card-body {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.program-card-body h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #103020 !important;
  margin-bottom: 10px !important;
}

.program-card-body p {
  color: #64748b !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

.program-card-body .btn,
.program-card-body a.btn-primary {
  margin-top: auto !important;
  width: 100% !important;
  text-align: center !important;
}

/* 4. HUMAN PHILANTHROPY BUTTONS (COMFORTABLE THUMB TARGETS) */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  min-height: 46px !important;
}

.btn-primary {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.25) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(4, 120, 87, 0.35) !important;
}

.btn-secondary {
  background: #ffffff !important;
  color: #103020 !important;
  border: 1px solid #cbd5e1 !important;
}

.btn-secondary:hover {
  background: #f8fafc !important;
  border-color: #047857 !important;
  color: #047857 !important;
  transform: translateY(-2px) !important;
}

.btn-accent,
.btn-header {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #103020 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3) !important;
}

.btn-accent:hover,
.btn-header:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.4) !important;
}

/* 5. HERO AYAT & GLASSMORPHISM WARMTH */
.hero-quran-box {
  background: rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  padding: 18px 24px !important;
  max-width: 820px !important;
  margin: 0 auto 30px !important;
  color: #ffffff !important;
}

.hero-quran-arabic {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #fef08a !important;
  margin-bottom: 6px !important;
  line-height: 1.5 !important;
}

.hero-quran-translation {
  font-size: 0.88rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-style: italic !important;
  line-height: 1.6 !important;
}

/* 6. RESPONSIVE BREAKPOINTS (TABLET & MOBILE) */
@media (max-width: 1024px) {
  .program-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ciracas-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 640px) {
  .program-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
  }
  .stats-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .stat-card strong {
    font-size: 1.5rem !important;
  }
  .stat-card span {
    font-size: 0.78rem !important;
  }
}


@media (max-width: 640px) {
  .header-container {
    padding: 0 12px !important;
  }
  .header-actions {
    gap: 8px !important;
  }
  .header-actions .btn-donate-pill {
    padding: 8px 14px !important;
    font-size: 0.82rem !important;
  }
  .header-actions .search-trigger-btn {
    width: 34px !important;
    height: 34px !important;
  }
}


/*
Theme Name: 
   4. Language Switcher (ID/EN) di Top Bar terintegrasi rapi.
   5. Animasi halus profesional selesai < 1.2 detik (Garansi < 3 detik).
   ========================================================================== */

/* 1. HERO ATMOSPHERIC BACKGROUND DENGAN FOTO KEGIATAN NYATA */
.hero-section {
  position: relative !important;
  background: linear-gradient(135deg, rgba(6, 36, 23, 0.92) 0%, rgba(15, 61, 38, 0.88) 50%, rgba(6, 30, 19, 0.94) 100%),
              url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/kegiatan_leadership_camp_ciracas_resmi.jpg') center/cover no-repeat !important;
  color: #ffffff !important;
  padding: 85px 0 100px 0 !important;
  overflow: hidden !important;
}

.subpage-hero {
  position: relative !important;
  background: linear-gradient(135deg, rgba(8, 38, 24, 0.86) 0%, rgba(15, 61, 38, 0.80) 50%, rgba(8, 32, 20, 0.88) 100%),
              url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/warung_tetangga.jpg') center/cover no-repeat !important;
  color: #ffffff !important;
  padding: 75px 0 85px 0 !important;
}

/* 2. TIPOGRAFI EMAS GRADASI "MASJID KAYA" RESMI (PILIHAN MAS ANWAR) */
.highlight-text,
.highlight-gold,
.text-gradient-gold,
.gold-emphasis {
  background: linear-gradient(135deg, #fef08a 0%, #f59e0b 50%, #d97706 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 800 !important;
  display: inline-block !important;
  filter: drop-shadow(0 2px 10px rgba(245, 158, 11, 0.25)) !important;
  text-shadow: none !important;
}

.highlight-text::after,
.highlight-gold::after {
  display: none !important;
  content: none !important;
}

/* 3. HARMONISASI TOMBOL KELAS DUNIA (TIDAK TABRAKAN WARNA) */
.btn-accent,
.btn-header {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(254, 240, 138, 0.25) !important;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.3) !important;
}

.btn-accent:hover,
.btn-header:hover {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.4) !important;
}

.btn-glass {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
}

.btn-whatsapp {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25) !important;
}

.btn-whatsapp:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.35) !important;
}

/* 4. LANGUAGE SWITCHER TOP BAR */
.top-bar-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.lang-pills-fallback {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
}

.lang-pill {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.lang-pill:hover,
.lang-pill.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
}

.lang-divider {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7rem;
}

/* GTranslate Widget Overrides */
.gtranslate_wrapper {
  display: inline-flex;
  align-items: center;
}

/* 5. HARDWARE-ACCELERATED HERO ENTRANCE ANIMATIONS (< 1s) */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeDown {
  0% {
    opacity: 0;
    transform: translateY(-16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-badge {
  animation: heroFadeDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-quran,
.hero-quran-trans {
  animation: heroFadeDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero-title {
  animation: heroFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.hero-desc {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.hero-actions {
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

.hero-trust {
  animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

.stats-card-grid {
  animation: heroFadeUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

/* 6. RESPONSIVE REFINEMENTS UNTUK MOBILE & TABLET */
@media (max-width: 768px) {
  .hero-section {
    padding: 65px 0 75px 0 !important;
  }
  .hero-title {
    font-size: 1.85rem !important;
  }
  .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
  }
  .donation-card-body {
    padding: 20px 16px !important;
  }
  .top-bar-right {
    gap: 8px !important;
  }
  .top-bar-hotline span {
    display: none !important;
  }
}


/* 7. CLEAN GOOGLE TRANSLATE BANNER SUPPRESSION & ID/EN PILLS */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-spinner-pos {
  display: none !important;
  visibility: hidden !important;
}
body {
  top: 0px !important;
  position: static !important;
}
.lang-pills-clean {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
}
.lang-pills-clean .lang-pill {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
.lang-pills-clean .lang-pill:hover,
.lang-pills-clean .lang-pill.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
}


/*
Theme Name: 
   5. Fix Program Stat Cards: Uniform Crisp Contrast
   ========================================================================== */

::selection {
  background: #047857 !important;
  color: #ffffff !important;
}
::-moz-selection {
  background: #047857 !important;
  color: #ffffff !important;
}

/* Stat Cards (Hero & Across All Pages) */
.stat-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  padding: 24px 16px !important;
  text-align: center !important;
}

.stat-card .stat-icon {
  background: #f0fdf4 !important;
  color: #047857 !important;
  border: 1px solid #bbf7d0 !important;
  box-shadow: 0 2px 6px rgba(4, 120, 87, 0.08) !important;
  margin: 0 auto 12px auto !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
}

.stat-card .stat-number,
.stat-number {
  color: #047857 !important;
  text-shadow: none !important;
  font-weight: 800 !important;
  font-family: var(--font-heading) !important;
  font-size: 2rem !important;
  line-height: 1.1 !important;
}

.stat-card .stat-plus,
.stat-card .stat-suffix,
.stat-plus {
  color: #d97706 !important;
  text-shadow: none !important;
  font-weight: 800 !important;
  font-size: 1.35rem !important;
}

.stat-card .stat-label,
.stats-card-grid .stat-label,
.stat-label {
  color: #475569 !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  margin-top: 6px !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
}

/* Ciracas Case Study Stats (98%, 160jt-486jt, 42 Juta) */
.c-stat-item {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 14px !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.c-stat-item strong {
  display: block !important;
  font-size: 1.65rem !important;
  font-family: var(--font-heading) !important;
  color: #047857 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  line-height: 1.2 !important;
}

.c-stat-item span {
  display: block !important;
  font-size: 0.8rem !important;
  color: #475569 !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  text-shadow: none !important;
  line-height: 1.35 !important;
}

/* Hero Frosted Glass Badges (Clean, Professional, No Black Pill) */
.hero-trust {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 28px 0 34px 0 !important;
}

.hero-trust .trust-item {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.hero-trust .trust-item i {
  color: #fbbf24 !important;
}

/* Article Reader Modal Headline (Clear Dark Slate, Perfect Contrast) */
.reader-headline-title {
  color: #0f172a !important;
  background: transparent !important;
  font-size: clamp(1.65rem, 3.5vw, 2.35rem) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 16px 0 20px 0 !important;
}

/* Kitabisa Donasi Container & Tabs Perfection */
.kb-crowdfunding-container {
  max-width: 1040px;
  margin: 0 auto;
}

.kb-program-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 2px solid #f1f5f9;
}

.kb-prog-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.kb-prog-tab:hover,
.kb-prog-tab.active {
  background: #047857 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(4, 120, 87, 0.25) !important;
}

.kb-campaign-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 900px) {
  .kb-campaign-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   PERBAIKAN WA HOTLINE, BAHASA DI POJOK KANAN & MOTION EFFECTS (MAS ANWAR)
   ========================================================================== */

/* 1. HOTLINE WHATSAPP: TEKS PUTIH MUTLAK (ANTI-WARNA BIRU) & IKON HIJAU WA */
.top-bar-hotline,
a.top-bar-hotline,
a.top-bar-hotline:visited,
.top-bar a.top-bar-hotline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  text-decoration: none !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  transition: all 0.2s ease !important;
}

.top-bar-hotline i,
a.top-bar-hotline i {
  color: #4ade80 !important; /* Hijau Terang WhatsApp */
  font-size: 0.98rem !important;
}

.top-bar-hotline span,
.top-bar-hotline .hotline-text,
a.top-bar-hotline span {
  color: #ffffff !important; /* Putih Terang Jelas, Anti Biru */
  font-weight: 700 !important;
}

.top-bar-hotline:hover,
a.top-bar-hotline:hover {
  background: rgba(34, 197, 94, 0.25) !important;
  border-color: #22c55e !important;
}

.top-bar-hotline:hover span,
a.top-bar-hotline:hover span {
  color: #fef08a !important; /* Aksen Gold Saat Disorot */
}

/* 2. BAHASA DI POJOK PALING KANAN (DESKTOP & HP) */
.top-bar-lang {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-left: 8px !important;
  padding-right: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-right: none !important;
  order: 99 !important; /* Menjamin posisi di pojok paling kanan */
}

.lang-pills-clean {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.lang-pills-clean .lang-pill {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.2s ease !important;
}

.lang-pills-clean .lang-pill:hover,
.lang-pills-clean .lang-pill.active {
  color: #ffffff !important;
  background: #047857 !important;
  border-color: #10b981 !important;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.35) !important;
}

.lang-pills-clean .lang-divider {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.75rem !important;
}

/* 3. TAMPILAN HP (MOBILE VIEWPORT): TOP BAR AKTIF & BAHASA POJOK KANAN */
@media (max-width: 768px) {
  .top-bar {
    display: block !important;
    padding: 5px 12px !important;
    background: #0f2e1e !important; /* Latar Emerald Pekat Elegan */
  }

  .top-bar-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
  }

  .top-bar-left {
    display: inline-flex !important;
    align-items: center !important;
  }

  .top-bar-left .top-bar-loc-link {
    color: #ffffff !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .top-bar-left .top-bar-loc-link i {
    color: #4ade80 !important;
  }

  .top-bar-left .d-none-sm {
    display: none !important;
  }

  .top-bar-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
  }

  .top-bar-social {
    display: none !important; /* Sembunyikan medsos di top bar HP agar tidak padat */
  }

  .top-bar-hotline {
    display: inline-flex !important;
    padding: 3px 8px !important;
    font-size: 0.75rem !important;
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
  }

  .top-bar-hotline .hotline-text,
  .top-bar-hotline span {
    display: none !important; /* Tampilkan ikon WA saja di HP */
  }

  .top-bar-lang {
    display: inline-flex !important;
    order: 99 !important;
    margin-left: 4px !important;
    padding-left: 6px !important;
  }

  .lang-pills-clean .lang-pill {
    padding: 2px 6px !important;
    font-size: 0.72rem !important;
  }
}

/* 4. ASTRA PRO & ELEMENTOR PRO SIGNATURE MOTION EFFECTS & ANIMATIONS */
@keyframes ctaPulseGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 18px rgba(234, 88, 12, 0.35);
  }
  50% {
    transform: scale(1.025);
    box-shadow: 0 8px 28px rgba(234, 88, 12, 0.65);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 18px rgba(234, 88, 12, 0.35);
  }
}

.btn-kb-donate,
.btn-donate-pill {
  animation: ctaPulseGlow 3s infinite ease-in-out !important;
}

@keyframes waFloatingPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.floating-wa,
.floating-wa-btn {
  animation: waFloatingPulse 2.4s infinite !important;
}

/* Micro-Interactions: Elevasi Lembut Saat Kartu Disorot (Hover Elevation) */
.kb-card-main,
.kb-card-action,
.stat-card,
.program-card,
.media-card,
.solution-card,
.calc-card {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease !important;
}

.stat-card:hover,
.media-card:hover,
.solution-card:hover,
.program-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 30px rgba(4, 120, 87, 0.12) !important;
}

/* Animasi Halus Progres Bar Donasi */
.kb-progress-fill {
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ==========================================================================
   KAMPUNG SEDEKAH MASTERCLASS LANDING PAGE (HIGH CONVERSION STYLING)
   ========================================================================== */
.masterclass-page-wrapper {
  background: #f8fafc;
  color: #1e293b;
}

/* Hero Section */
.mc-hero-section {
  background: linear-gradient(135deg, #092617 0%, #103020 40%, #1b4931 100%);
  padding: 130px 20px 80px 20px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.mc-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 80% 20%, rgba(34, 197, 94, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.mc-hero-container {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.mc-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(254, 240, 138, 0.15);
  color: #fef08a;
  border: 1px solid rgba(254, 240, 138, 0.35);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.mc-eyebrow-tag {
  margin-bottom: 10px;
}

.mc-eyebrow-tag span {
  display: inline-block;
  background: #ea580c;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mc-main-title {
  font-size: 2.85rem;
  font-weight: 900;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 20px;
}

.mc-main-title .highlight-gold {
  color: #fde047;
  text-shadow: 0 0 20px rgba(253, 224, 71, 0.3);
}

.mc-hero-desc {
  font-size: 1.12rem;
  line-height: 1.65;
  color: #e2e8f0;
  margin-bottom: 28px;
  max-width: 620px;
}

.mc-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 30px;
}

.mc-meta-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 12px 16px;
}

.mc-meta-card i {
  font-size: 1.6rem;
  color: #4ade80;
}

.mc-meta-card strong {
  display: block;
  font-size: 0.95rem;
  color: #ffffff;
}

.mc-meta-card span {
  font-size: 0.78rem;
  color: #cbd5e1;
}

.mc-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}

.btn-mc-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ea580c;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.4);
  transition: all 0.25s ease;
  animation: ctaPulseGlow 3s infinite ease-in-out;
}

.btn-mc-primary:hover {
  background: #c2410c;
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-mc-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-mc-secondary i {
  color: #4ade80;
  font-size: 1.15rem;
}

.btn-mc-secondary:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: #22c55e;
  color: #ffffff;
}

.mc-trust-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #cbd5e1;
}

.mc-trust-footer i {
  color: #4ade80;
}

/* Poster Card */
.mc-poster-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
  text-align: center;
}

.mc-poster-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #047857;
  color: #fef08a;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.mc-poster-img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

.mc-poster-action {
  margin-top: 14px;
}

.btn-poster-download {
  color: #047857;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-poster-download:hover {
  text-decoration: underline;
}

/* Highlight Strip */
.mc-highlight-strip {
  background: #047857;
  padding: 40px 20px;
  color: #ffffff;
}

.mc-highlight-box {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;
}

.mc-highlight-icon i {
  font-size: 3rem;
  color: #fde047;
}

.mc-highlight-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fde047;
  display: block;
  margin-bottom: 6px;
}

.mc-highlight-quote {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.35;
  color: #ffffff;
  margin-bottom: 6px;
}

.mc-highlight-sub {
  color: #d1fae5;
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Problem Grid */
.mc-problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
  margin-bottom: 36px;
}

.mc-problem-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease;
}

.mc-problem-card:hover {
  transform: translateY(-5px);
  border-color: #cbd5e1;
}

.mc-problem-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fef2f2;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.mc-problem-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
}

.mc-problem-card p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 0;
}

.mc-solution-banner {
  background: #f0fdf4;
  border: 2px solid #86efac;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.mc-solution-badge {
  display: inline-block;
  background: #047857;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.mc-solution-banner h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #064e3b;
  margin-bottom: 10px;
}

.mc-solution-banner p {
  color: #1e3a2b;
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Speaker Section */
.mc-speaker-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 40px;
}

.mc-speaker-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: center;
}

.mc-speaker-photo-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid #f1f5f9;
}

.mc-speaker-img {
  width: 240px !important;
  height: 240px !important;
  max-width: 240px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 20px !important;
  border: 3px solid rgba(251, 191, 36, 0.6) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35) !important;
  margin: 0 auto 16px auto !important;
  display: block !important;
}

.mc-speaker-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(16, 48, 32, 0.9);
  color: #fef08a;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  border: 1px solid rgba(254, 240, 138, 0.3);
}

.mc-bio-role {
  color: #ea580c;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.mc-bio-name {
  font-size: 2.2rem;
  font-weight: 900;
  color: #092617;
  margin-bottom: 8px;
}

.mc-bio-lead {
  font-size: 1rem;
  color: #047857;
  margin-bottom: 18px;
}

.mc-bio-paragraphs p {
  font-size: 0.96rem;
  line-height: 1.65;
  color: #334155;
  margin-bottom: 12px;
}

.mc-speaker-stats {
  display: flex;
  gap: 24px;
  margin: 22px 0;
  padding: 16px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.mc-s-stat strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 900;
  color: #047857;
}

.mc-s-stat span {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
}

.mc-speaker-quote-box {
  background: #f8fafc;
  border-left: 4px solid #ea580c;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-style: italic;
  color: #475569;
}

/* Curriculum Grid */
.mc-curriculum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px;
}

.mc-module-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease;
}

.mc-module-card:hover {
  transform: translateY(-5px);
  border-color: #047857;
}

.mc-module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.mc-mod-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: #047857;
  font-family: var(--font-heading);
}

.mc-mod-badge {
  background: #ecfdf5;
  color: #047857;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #a7f3d0;
}

.mc-module-card h3 {
  font-size: 1.12rem;
  font-weight: 800;
  color: #092617;
  margin-bottom: 10px;
  line-height: 1.35;
}

.mc-module-card p {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 0;
}

.mc-module-bonus {
  background: #fffbeb;
  border-color: #fde68a;
}

.mc-module-bonus .mc-mod-num {
  color: #b45309;
  font-size: 1.1rem;
}

/* Audience Grid */
.mc-audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.mc-checklist {
  list-style: none;
  padding: 0;
  margin-top: 24px;
}

.mc-checklist li {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}

.mc-checklist li i {
  color: #047857;
  font-size: 1.25rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.mc-checklist li strong {
  display: block;
  font-size: 1rem;
  color: #0f172a;
}

.mc-checklist li span {
  font-size: 0.88rem;
  color: #64748b;
}

.mc-benefit-card {
  background: linear-gradient(135deg, #092617 0%, #1b4931 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 36px 30px;
  box-shadow: 0 16px 36px rgba(9, 38, 23, 0.25);
}

.mc-benefit-badge {
  display: inline-block;
  background: rgba(254, 240, 138, 0.2);
  color: #fef08a;
  border: 1px solid rgba(254, 240, 138, 0.35);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.mc-benefit-card h3 {
  font-size: 1.45rem;
  color: #ffffff;
  margin-bottom: 20px;
}

.mc-benefit-list {
  list-style: none;
  padding: 0;
  margin-bottom: 26px;
}

.mc-benefit-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: #e2e8f0;
}

.mc-benefit-list li i {
  color: #4ade80;
}

.mc-invest-box {
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px dashed rgba(254, 240, 138, 0.5);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}

.mc-invest-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #cbd5e1;
  letter-spacing: 1px;
}

.mc-invest-price {
  font-size: 1.85rem;
  font-weight: 900;
  color: #fef08a;
  margin: 4px 0;
}

.mc-invest-note {
  font-size: 0.78rem;
  color: #cbd5e1;
  display: block;
}

/* Registration Form */
.mc-registration-section {
  background: linear-gradient(135deg, #061c11 0%, #103020 100%);
  color: #ffffff;
  padding: 80px 20px;
}

.mc-form-container {
  max-width: 820px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 40px 36px;
  color: #1e293b;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.mc-form-header {
  margin-bottom: 30px;
}

.mc-form-title {
  font-size: 2rem;
  font-weight: 900;
  color: #092617;
  margin: 12px 0 8px;
}

.mc-form-desc {
  font-size: 0.96rem;
  color: #475569;
}

.mc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.mc-form-grid .full-width {
  grid-column: 1 / -1;
}

.mc-form-body label {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f172a;
  margin-bottom: 6px;
}

.mc-form-body .req {
  color: #dc2626;
}

.mc-form-body .form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #0f172a;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.mc-form-body .form-control:focus {
  outline: none;
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.15);
}

.form-hint {
  font-size: 0.76rem;
  color: #64748b;
  margin-top: 4px;
  display: block;
}

.mc-form-submit-wrap {
  margin-top: 28px;
}

.btn-mc-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ea580c;
  color: #ffffff;
  border: none;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 16px 36px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(234, 88, 12, 0.4);
  transition: all 0.25s ease;
  width: 100%;
  animation: ctaPulseGlow 3s infinite ease-in-out;
}

.btn-mc-submit:hover {
  background: #c2410c;
  transform: translateY(-2px);
}

.mc-submit-guarantee {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 12px;
  margin-bottom: 0;
}

/* FAQ Masterclass */
.mc-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 36px;
}

.mc-faq-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.mc-faq-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #092617;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.mc-faq-card h4 i {
  color: #047857;
  margin-top: 3px;
}

.mc-faq-card p {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Responsiveness */
@media (max-width: 1024px) {
  .mc-hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .mc-hero-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .mc-cta-group {
    justify-content: center;
  }
  .mc-trust-footer {
    justify-content: center;
  }
  .mc-speaker-grid {
    grid-template-columns: 1fr;
  }
  .mc-speaker-photo-wrap {
    max-width: 380px;
    margin: 0 auto;
  }
  .mc-curriculum-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mc-problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mc-audience-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .mc-main-title {
    font-size: 2.1rem;
  }
  .mc-meta-grid {
    grid-template-columns: 1fr;
  }
  .mc-curriculum-grid,
  .mc-problem-grid,
  .mc-faq-grid,
  .mc-form-grid {
    grid-template-columns: 1fr;
  }
  .mc-form-container {
    padding: 24px 18px;
  }
  .btn-mc-submit {
    font-size: 0.95rem;
    padding: 14px 20px;
  }
  .mc-highlight-box {
    flex-direction: column;
    text-align: center;
  }
}




/* ==========================================================================
   MASTER EXECUTIVE POLISH - SESUAI INSTRUKSI HARGA MATI MAS ANWAR
   1. TOP BAR: HP & Tablet HANYA Tampilkan ID | EN di Pojok Kanan Atas
   2. NAVBAR: Dropdown Tipografi Bersih Tanpa Ikon AI Menumpuk
   3. HERO: Gradasi Zamrud Bersih Mewah Tanpa Bocoran Teks Flyer
   4. STAT CARDS: Putih Elegan Seragam Bebas Efek Neon Hijau
   5. MASTERCLASS: Desain Eksekutif Islami Benchmark daurahwakaf.simah.id
   ========================================================================== */

/* 1. TOP BAR DESKTOP: TEKS PUTIH MUTLAK (ANTI-WARNA BIRU) & IKON HIJAU WA */
.top-bar-hotline,
a.top-bar-hotline,
a.top-bar-hotline:visited,
.top-bar a.top-bar-hotline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  transition: all 0.2s ease !important;
}
.top-bar-hotline span,
.top-bar-hotline .hotline-text,
a.top-bar-hotline span,
a.top-bar-hotline .hotline-text {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.top-bar-hotline i,
a.top-bar-hotline i {
  color: #4ade80 !important;
  font-size: 0.95rem !important;
}
.top-bar-hotline:hover,
a.top-bar-hotline:hover {
  background: rgba(34, 197, 94, 0.28) !important;
  border-color: #22c55e !important;
}
.top-bar-hotline:hover span,
a.top-bar-hotline:hover span {
  color: #fef08a !important;
}

/* 2. TOP BAR MOBILE & TABLET (<= 1024px): SEMBUNYIKAN ALAMAT & WA, TAMPILKAN HANYA ID | EN DI KANAN */
@media (max-width: 1024px) {
  .top-bar-left,
  .top-bar-hotline,
  .top-bar-social {
    display: none !important;
  }
  .top-bar {
    display: block !important;
    padding: 6px 16px !important;
    background: #092617 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .top-bar-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .top-bar-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    margin-left: auto !important;
  }
  .top-bar-lang {
    display: inline-flex !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    border-left: none !important;
    padding-left: 0 !important;
  }
}

/* 3. NAVBAR DROPDOWN: TIPOGRAFI BERSIH TANPA IKON (ANTI-KESAN BUATAN AI) */
.nav-dropdown-menu {
  min-width: 260px !important;
  padding: 10px 0 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.04) !important;
}
.nav-dropdown-item {
  display: block !important;
  padding: 11px 22px !important;
  color: #334155 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border-left: 3px solid transparent !important;
}
.nav-dropdown-item:hover {
  background: #f0fdf4 !important;
  color: #047857 !important;
  padding-left: 26px !important;
  border-left-color: #047857 !important;
}
.nav-badge-new {
  display: inline-block;
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-left: 6px;
  letter-spacing: 0.5px;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3);
}

/* [Cleaned Up Old Stat Card Override] */

/* ==========================================================================
   MASTERCLASS ELITE DESIGN SYSTEM (BENCHMARK: daurahwakaf.simah.id)
   ========================================================================== */
.mc-hero-section {
  position: relative !important;
  background: linear-gradient(135deg, rgba(8, 38, 24, 0.90) 0%, rgba(15, 61, 38, 0.85) 50%, rgba(8, 32, 20, 0.92) 100%),
              url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/warung_tetangga.jpg') center/cover no-repeat !important;
  padding: 120px 20px 80px 20px !important;
  color: #ffffff !important;
  overflow: hidden !important;
}
.mc-hero-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 80% 20%, rgba(34, 197, 94, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.mc-hero-container {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 50px !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}
.mc-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(251, 191, 36, 0.12) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  margin-bottom: 16px !important;
}
.mc-eyebrow-tag {
  color: #fbbf24 !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
.mc-main-title {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(2.2rem, 4vw, 3.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
}
.mc-main-title .highlight-gold {
  background: linear-gradient(135deg, #fef08a 0%, #f59e0b 50%, #d97706 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.mc-hero-desc {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: #cbd5e1 !important;
  max-width: 620px !important;
  margin-bottom: 28px !important;
}
.mc-meta-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 32px !important;
}
.mc-meta-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.mc-meta-card i {
  font-size: 1.35rem !important;
  color: #fbbf24 !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(251, 191, 36, 0.12) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.mc-meta-card strong {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: block !important;
}
.mc-meta-card span {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  display: block !important;
}
.mc-cta-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 24px !important;
}
.btn-mc-primary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: 16px 32px !important;
  border-radius: 50px !important;
  box-shadow: 0 10px 25px rgba(217, 119, 6, 0.4) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.25s ease !important;
}
.btn-mc-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(217, 119, 6, 0.55) !important;
  color: #ffffff !important;
}
.btn-mc-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 15px 26px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.25s ease !important;
}
.btn-mc-secondary:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}
.mc-trust-footer {
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.mc-trust-footer i {
  color: #22c55e !important;
}

/* Poster Card Frame (Mewah & Berwibawa) */
.mc-hero-poster-wrap {
  position: relative !important;
}
.mc-poster-card {
  background: #ffffff !important;
  padding: 12px !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 35px rgba(217, 119, 6, 0.25) !important;
  border: 2px solid rgba(251, 191, 36, 0.5) !important;
  text-align: center !important;
}
.mc-poster-badge {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #047857 0%, #064e3b 100%) !important;
  color: #fef08a !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 12px rgba(4, 120, 87, 0.25) !important;
}
.mc-poster-img {
  width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  display: block !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}
.mc-poster-action {
  padding: 10px 0 4px 0 !important;
}
.btn-poster-download {
  color: #047857 !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.btn-poster-download:hover {
  color: #065f46 !important;
  text-decoration: underline !important;
}

/* Callout Strip (Highlight) */
.mc-highlight-strip {
  background: #fdfbf7 !important;
  border-top: 1px solid #fed7aa !important;
  border-bottom: 1px solid #fed7aa !important;
  padding: 45px 20px !important;
}
.mc-highlight-box {
  max-width: 900px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.mc-highlight-label {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #d97706 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 10px !important;
}
.mc-highlight-quote {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(1.35rem, 2.8vw, 1.95rem) !important;
  font-weight: 800 !important;
  color: #064e3b !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
}
.mc-highlight-sub {
  font-size: 1rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
}

/* Problem Grid (4 Keresahan DKM) */
.mc-problem-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-top: 36px !important;
}
.mc-problem-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 26px 20px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
}
.mc-problem-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
  border-color: #cbd5e1 !important;
}
.mc-problem-icon {
  width: 50px !important;
  height: 50px !important;
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  margin-bottom: 16px !important;
}
.mc-problem-card h3 {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 10px !important;
}
.mc-problem-card p {
  font-size: 0.88rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
}

/* Solution Banner */
.mc-solution-banner {
  background: linear-gradient(135deg, #047857 0%, #064e3b 100%) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  margin-top: 40px !important;
  text-align: center !important;
  box-shadow: 0 14px 35px rgba(4, 120, 87, 0.25) !important;
}
.mc-solution-badge {
  display: inline-block !important;
  background: rgba(251, 191, 36, 0.2) !important;
  color: #fef08a !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
}
.mc-solution-banner h3 {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
}
.mc-solution-banner p {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #d1fae5 !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

/* Kang Taufik Ary Speaker Card */
.mc-speaker-card {
  background: linear-gradient(135deg, #092617 0%, #103824 100%) !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(251, 191, 36, 0.3) !important;
  padding: 48px 40px !important;
  color: #ffffff !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;
}
.mc-speaker-grid {
  display: grid !important;
  grid-template-columns: 0.75fr 1.25fr !important;
  gap: 40px !important;
  align-items: center !important;
}
.mc-speaker-photo-wrap {
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mc-speaker-img {
  width: 260px !important;
  height: 260px !important;
  max-width: 260px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 20px !important;
  border: 3px solid rgba(251, 191, 36, 0.7) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important;
  margin: 0 auto 14px auto !important;
  display: block !important;
}
.mc-speaker-tag {
  display: inline-block !important;
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  margin-top: 14px !important;
}
.mc-bio-role {
  color: #fbbf24 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
}
.mc-bio-name {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 6px 0 12px 0 !important;
}
.mc-bio-lead {
  font-size: 1.05rem !important;
  color: #fef08a !important;
  margin-bottom: 16px !important;
  line-height: 1.5 !important;
}
.mc-bio-paragraphs p {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: #cbd5e1 !important;
  margin-bottom: 14px !important;
}
.mc-speaker-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-top: 24px !important;
}
.mc-s-stat {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  text-align: center !important;
}
.mc-s-stat strong {
  display: block !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
}
.mc-s-stat span {
  display: block !important;
  font-size: 0.75rem !important;
  color: #cbd5e1 !important;
}

/* 4 Pillars Curriculum Grid */
.mc-pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  margin-top: 36px !important;
}
.mc-pillar-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 32px 28px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
  transition: all 0.25s ease !important;
}
.mc-pillar-card:hover {
  transform: translateY(-4px) !important;
  border-color: #047857 !important;
  box-shadow: 0 14px 32px rgba(4, 120, 87, 0.12) !important;
}
.mc-pillar-num {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #d97706 !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  font-family: 'Outfit', sans-serif !important;
}
.mc-pillar-card h3 {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 12px !important;
}
.mc-pillar-card p {
  font-size: 0.92rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
}
.mc-pillar-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mc-pillar-list li {
  font-size: 0.88rem !important;
  color: #334155 !important;
  padding: 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.mc-pillar-list li i {
  color: #047857 !important;
  font-size: 0.85rem !important;
}

/* Registration Form Card */
.mc-form-section {
  background: #f8fafc !important;
  padding: 80px 20px !important;
}
.mc-form-card {
  max-width: 680px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 40px 36px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
}
.mc-form-group {
  margin-bottom: 20px !important;
}
.mc-form-group label {
  display: block !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 6px !important;
}
.mc-form-input {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  line-height: normal !important;
  padding: 12px 16px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  background: #f8fafc !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}
.mc-form-select {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  line-height: normal !important;
  padding: 10px 42px 10px 16px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  background-color: #f8fafc !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.mc-form-input:focus,
.mc-form-select:focus {
  outline: none !important;
  border-color: #047857 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.15) !important;
}
.btn-mc-submit {
  width: 100% !important;
  background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  padding: 16px 24px !important;
  border-radius: 50px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 10px 25px rgba(4, 120, 87, 0.35) !important;
  transition: all 0.25s ease !important;
}
.btn-mc-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(4, 120, 87, 0.45) !important;
}

/* Masterclass Responsive */
@media (max-width: 992px) {
  .mc-hero-container {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .mc-problem-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mc-speaker-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .mc-speaker-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mc-pillars-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  .mc-meta-grid {
    grid-template-columns: 1fr !important;
  }
  .mc-problem-grid {
    grid-template-columns: 1fr !important;
  }
  .mc-form-card {
    padding: 28px 20px !important;
  }
}


/* ==========================================================================
   FINAL VISUAL PERFECTION - SESUAI INSPEKSI KAMERA
   ========================================================================== */

/* 1. Mobile & Tablet Top Bar (< 1024px): 100% SEJAJAR TEGAK LURUS DENGAN BURGER (STANDAR HARGA MATI MAS ANWAR) */
@media (max-width: 1024px) {
  .top-bar-left,
  .top-bar-hotline,
  a.top-bar-hotline,
  .top-bar a.top-bar-hotline,
  .top-bar a.top-bar-hotline:visited,
  .top-bar-social {
    display: none !important;
  }
  .top-bar {
    display: block !important;
    padding: 6px 0 !important; /* 0 HORIZONTAL PADDING AGAR KONTROL JARAK FULL DI CONTAINER */
    background: #092617 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .top-bar-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important; /* MATCH EXACT HEADER CONTAINER PADDING */
    box-sizing: border-box !important;
  }
  .top-bar-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  .top-bar-lang {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    border-left: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .lang-pills-clean {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 0 !important;
  }
}

/* Responsif Sinkron Top Bar & Header Container: Selalu Sejajar Rapi di Seluruh Resolusi */
@media (max-width: 768px) {
  .top-bar-container,
  .main-header .header-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 480px) {
  .top-bar-container,
  .main-header .header-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* 2. Highlight Quote Box: Block Layout (Mencegah Teks Kolom Vertikal) */
.mc-highlight-box {
  display: block !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.mc-highlight-label {
  display: inline-block !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #d97706 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}
.mc-highlight-quote {
  display: block !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(1.35rem, 2.8vw, 1.95rem) !important;
  font-weight: 800 !important;
  color: #064e3b !important;
  line-height: 1.4 !important;
  margin-bottom: 14px !important;
}
.mc-highlight-sub {
  display: block !important;
  font-size: 1rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  max-width: 780px !important;
  margin: 0 auto !important;
}

/* 3. Speaker Headshot Portrait (Fokus ke Wajah Berwibawa Kang Taufik Ary) */
.mc-speaker-photo-wrap {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mc-speaker-img {
  width: 260px !important;
  height: 260px !important;
  max-width: 260px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 20px !important;
  border: 3px solid rgba(251, 191, 36, 0.7) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important;
  margin: 0 auto 14px auto !important;
  display: block !important;
}

/* 4. Navbar Clean Tipografi (Anti-AI Clutter) */
.nav-dropdown-item i {
  display: none !important; /* Pastikan TIDAK ADA ikon FontAwesome di dropdown apa pun */
}


/* ==========================================================================
   MASTER PERFECTION (HARGA MATI MAS ANWAR - 29 OKTOBER 2026)
   1. Desktop Navbar Zero-Overlap (100% Lega di Semua Resolusi Layar)
   2. Mobile Drawer Zero-Cutoff (Padding Bawah Aman & Anti-Tertutup Widget WA)
   3. Hero Beranda & 4 Stat Card Hijau Mewah 100% Persis Preview index.html
   4. Mitra & CSR Logo DMI Besar & Seluruh 8 Mitra Tautan Resmi Aktif
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESKTOP NAVBAR: ANTI-NABRAK & TIPOGRAFI PRESISI
   -------------------------------------------------------------------------- */
.main-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  width: 100% !important;
}

.main-header .header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  height: 70px !important;
  gap: 8px !important;
}

.main-header .brand-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

@media (min-width: 1025px) {
  .main-header .nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    position: static !important;
    width: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .main-header .nav-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(4px, 0.7vw, 10px) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .main-header .nav-item {
    position: relative !important;
  }

  .main-header .nav-link {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(0.77rem, 0.84vw, 0.86rem) !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    padding: 6px clamp(5px, 0.6vw, 9px) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
  }

  .main-header .nav-link:hover,
  .main-header .nav-link.active {
    color: #047857 !important;
    background-color: #f0fdf4 !important;
  }

  .main-header .nav-badge-new {
    display: inline-block !important;
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    color: #ffffff !important;
    font-size: 0.60rem !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    vertical-align: middle !important;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3) !important;
  }
}

@media (max-width: 1024px) {
  .main-header .nav-menu:not(.open):not(.active) {
    display: none !important;
  }
}

.main-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.main-header .header-search-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.main-header .header-search-btn:hover {
  background: #e2e8f0 !important;
  color: #047857 !important;
}

.main-header .btn-donate-pill {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important;
  transition: all 0.2s ease !important;
}

.main-header .btn-donate-pill:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.45) !important;
}

/* Guard Resolusi Laptop Kompak (1025px - 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
  .main-header .header-container {
    padding: 0 10px !important;
    gap: 6px !important;
  }
  .main-header .brand-sub {
    display: none !important; /* Hilangkan teks kecil untuk menghemat 85px */
  }
  .main-header .brand-title {
    font-size: 0.95rem !important;
  }
  .main-header .nav-list {
    gap: 2px !important;
  }
  .main-header .nav-link {
    padding: 5px 6px !important;
    font-size: 0.77rem !important;
  }
  .main-header .nav-badge-new {
    font-size: 0.58rem !important;
    padding: 1px 5px !important;
  }
  .main-header .btn-donate-pill {
    padding: 7px 12px !important;
    font-size: 0.80rem !important;
  }
  .main-header .header-search-btn {
    width: 32px !important;
    height: 32px !important;
  }
}

/* --------------------------------------------------------------------------
   2. MOBILE DRAWER: ZERO-CUTOFF & HIDE FLOATING WA SAAT DRAWER TERBUKA
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav-menu.open,
  .nav-menu.active {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
    z-index: 100000 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 16px 20px 140px 20px !important;
    box-sizing: border-box !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
  }

  .nav-drawer-footer {
    margin-top: 24px !important;
    padding-bottom: 50px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Saat menu hamburger terbuka, sembunyikan semua floating WA agar tidak menutupi footer */
  body.menu-open {
    overflow: hidden !important;
  }
  body.menu-open .wa-floating-btn,
  body.menu-open #waFloatingBtn,
  body.menu-open .floating-wa-btn,
  body.menu-open [class*="whatsapp-float"],
  body.menu-open [id*="whatsapp-float"],
  body.menu-open [id*="waFloating"],
  body.menu-open [class*="joinchat"],
  body.menu-open [id*="joinchat"],
  body.menu-open .elfsight-app {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}

/* --------------------------------------------------------------------------
   3. HERO BERANDA & 4 STAT CARDS: 100% PERSIS PREVIEW index.html
   -------------------------------------------------------------------------- */
.hero-section,
.hero-ks,
#hero {
  position: relative !important;
  background: linear-gradient(135deg, rgba(16, 48, 32, 0.94) 0%, rgba(27, 73, 49, 0.91) 50%, rgba(18, 56, 37, 0.95) 100%),
              url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/tebus_murah.jpg') center/cover no-repeat !important;
  color: #ffffff !important;
  padding: 85px 0 100px 0 !important;
  overflow: hidden !important;
}

/* Keempat Kartu Capaian Hero: 100% HIJAU MEWAH SERAGAM */
.stats-card-grid .stat-card,
.stat-card {
  background: linear-gradient(145deg, #166534 0%, #15803d 50%, #16a34a 100%) !important;
  border: 1.5px solid rgba(134, 239, 172, 0.45) !important;
  border-radius: 16px !important;
  padding: 24px 16px !important;
  box-shadow: 0 12px 30px rgba(22, 101, 52, 0.28), 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  text-align: center !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, background 0.25s ease !important;
}

.stats-card-grid .stat-card:hover,
.stat-card:hover {
  background: linear-gradient(145deg, #15803d 0%, #16a34a 50%, #22c55e 100%) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 40px rgba(22, 101, 52, 0.4) !important;
}

.stats-card-grid .stat-card .stat-icon,
.stat-card .stat-icon {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fef08a !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  margin: 0 auto 12px auto !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
}

.stats-card-grid .stat-card .stat-number,
.stat-card .stat-number {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  font-weight: 800 !important;
  font-size: 1.75rem !important;
}

.stats-card-grid .stat-card .stat-plus,
.stat-card .stat-plus,
.stats-card-grid .stat-card .stat-suffix,
.stat-card .stat-suffix {
  color: #fef08a !important;
  text-shadow: 0 0 10px rgba(254, 240, 138, 0.7) !important;
  font-weight: 800 !important;
  font-size: 1.35rem !important;
}

.stats-card-grid .stat-card .stat-label,
.stat-card .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
}

/* --------------------------------------------------------------------------
   4. MITRA & CSR: LOGO DMI BESAR & TAUTAN RESMI ELEGAN
   -------------------------------------------------------------------------- */
.mitra-card-logo {
  width: 110px !important;
  height: 85px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  padding: 8px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 14px !important;
}

/* ==================== KARTU MITRA 100% PERSIS DRAF ASLI MITRA.HTML ==================== */
.mitra-card,
a.mitra-card {
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  cursor: pointer !important;
}

.mitra-card:hover,
a.mitra-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
  border-color: #bbf7d0 !important;
}

.mitra-card-logo {
  width: 90px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  border-radius: 10px !important;
  border: 1px solid #f1f5f9 !important;
  flex-shrink: 0 !important;
  padding: 8px !important;
  margin-bottom: 0 !important;
}

.mitra-card-logo img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform 0.25s ease !important;
}

.mitra-card:hover .mitra-card-logo img,
a.mitra-card:hover .mitra-card-logo img {
  transform: scale(1.06) !important;
}

.mitra-card-body {
  flex: 1 !important;
  text-align: left !important;
}

.mitra-card-body h4 {
  font-family: var(--font-heading, 'Outfit', sans-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
  display: block !important;
}

.mitra-card-body p {
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 0.88rem !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.mitra-external-icon,
.mitra-visit-link {
  display: none !important;
}


/* ==========================================================================
   SURGICAL DESKTOP COMPACT SCREEN GUARD (1025px - 1280px)
   Guarantees 200px+ Breathing Room & ZERO Truncation of "KAMPUNG SEDEKAH"
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1280px) {
  .main-header .header-container {
    padding: 0 12px !important;
    gap: 6px !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .main-header .brand-logo {
    flex-shrink: 0 !important;
    min-width: max-content !important;
    gap: 8px !important;
  }
  .main-header .brand-title {
    font-size: 0.92rem !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
  }
  .main-header .brand-sub {
    display: none !important;
  }
  .main-header .nav-menu {
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  .main-header .nav-list {
    gap: 2px !important;
    justify-content: center !important;
  }
  .main-header .nav-link {
    font-size: 0.75rem !important;
    padding: 5px 5px !important;
    letter-spacing: -0.2px !important;
  }
  .main-header .nav-badge-new {
    display: none !important;
  }
  .main-header .header-actions {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .main-header .header-search-btn {
    width: 32px !important;
    height: 32px !important;
  }
  .main-header .btn-donate-pill {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
    gap: 4px !important;
  }
}

/* ==========================================================================
   MOBILE HEADER FIT (SCREEN WIDTH <= 768px / 390px iPhone & Android)
   Clean, Elegant, Uncluttered: Logo + Search + Hamburger (Zero Overlap)
   ========================================================================== */
@media (max-width: 768px) {
  .header-actions .btn-donate-pill,
  .btn-donate-pill,
  .main-header .btn-donate-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    color: #ffffff !important;
    padding: 6px 10px !important;
    border-radius: 20px !important;
    font-weight: 800 !important;
    font-size: 0.74rem !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3) !important;
    white-space: nowrap !important;
    border: none !important;
  }
  .main-header .header-container {
    padding: 0 12px !important;
    gap: 8px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .main-header .brand-logo {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .main-header .brand-logo img {
    width: 32px !important;
    height: 32px !important;
  }
  .main-header .brand-title {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
  }
  .main-header .brand-sub {
    display: none !important;
  }
  .main-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  .main-header .header-search-btn {
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
  }
  .main-header .hamburger-btn,
  .main-header .mobile-toggle,
  .hamburger-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 6px !important;
    margin-left: 0 !important;
    background: #f1f5f9 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
  }
  .main-header .hamburger-btn span,
  .hamburger-btn span {
    display: block !important;
    width: 20px !important;
    height: 2.5px !important;
    background-color: #0f172a !important;
    border-radius: 2px !important;
  }
}

/* ==========================================================================
   HUMAN-CENTRIC & FRIENDLY POLISH (WARM, INVITING, 100% INDONESIAN)
   ========================================================================== */
.hero-badge {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fef3c7 !important;
  border: 1px solid rgba(254, 243, 199, 0.35) !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

.hero-actions .btn-accent {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 25px rgba(234, 88, 12, 0.38) !important;
  border: none !important;
}

.hero-actions .btn-glass {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1.8px solid rgba(255, 255, 255, 0.8) !important;
  font-weight: 700 !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
}

.hero-actions .btn-glass:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: #ffffff !important;
}

.hero-actions .btn-whatsapp {
  background: #25d366 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35) !important;
}

.hero-trust .trust-item {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  color: #ffffff !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.hero-trust .trust-item i {
  color: #4ade80 !important;
}

/* Override Social Chat PRO English Text -> Warm Indonesian */
.qlwapp__text {
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-block !important;
}
.qlwapp__text::after {
  content: "Tanya Relawan Kami" !important;
  font-size: 0.90rem !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  display: inline-block !important;
  color: #ffffff !important;
  letter-spacing: 0.2px !important;
}
.qlwapp__button {
  background-color: #25d366 !important;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35) !important;
}


/* ==========================================================================
   MAS ANWAR DIRECTIVE: PERBAIKAN HUMANIS, VISUAL & ANIMASI ELEGAN
   1. Hero Background Gambar Otentik + Atmospheric Gradient
   2. Seksi Kecamatan Ciracas Bersih (Tanpa Watermark) & Foto Kanan Estetik
   3. Kontras Mutlak Seksi Keseharian (Founder Cards Dark Text di Latar Putih)
   4. Banner Legalitas Kanan: Kartu Sertifikat / Emblem Kemenkumham Elegan
   5. Tombol Play Video Mobile 100% Presisi Center
   6. Micro-Animasi Halus, Ringan, 60FPS CSS di Seluruh Item
   ========================================================================== */

/* 1. HERO BACKGROUND GAMBAR OTENTIK + ATMOSPHERIC OVERLAY */
.hero-section,
.hero-ks,
#hero {
  position: relative !important;
  background: linear-gradient(135deg, rgba(6, 32, 19, 0.82) 0%, rgba(13, 58, 35, 0.76) 50%, rgba(6, 28, 17, 0.85) 100%),
              url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/sarapan_pagi.jpg') center/cover no-repeat !important;
  color: #ffffff !important;
  padding: 85px 0 100px 0 !important;
  overflow: hidden !important;
}

/* 2. SEKSI KECAMATAN CIRACAS: BACKGROUND BERSIH + FOTO KANAN ELEGAN */
.ciracas-highlight-box {
  background: linear-gradient(135deg, #09331e 0%, #0d4629 50%, #155d37 100%) !important;
  border: 1px solid rgba(74, 222, 128, 0.25) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(5, 38, 21, 0.18) !important;
  padding: 42px 40px !important;
  margin-bottom: 40px !important;
  position: relative !important;
  overflow: hidden !important;
}

.ciracas-photo-frame {
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  background: #061f12 !important;
}

.ciracas-photo-frame img {
  width: 100% !important;
  height: 320px !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.ciracas-photo-frame:hover img {
  transform: scale(1.04) !important;
}

.ciracas-photo-caption {
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  right: 12px !important;
  background: rgba(5, 26, 15, 0.90) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(134, 239, 172, 0.35) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  color: #fef08a !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* 3. KONTRAS TEKS SEKSI KESEHARIAN / FOUNDER SPOTLIGHT CARDS */
.founder-spotlight-box {
  background: linear-gradient(135deg, #052615 0%, #0d4227 60%, #155e38 100%) !important;
  border-radius: 18px !important;
  padding: 32px 34px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  border: 1px solid rgba(74, 222, 128, 0.25) !important;
  box-shadow: 0 12px 30px rgba(5, 38, 21, 0.16) !important;
  margin-top: 30px !important;
}

.founder-quote-item {
  background: #ffffff !important;
  border: 1.5px solid #dcfce7 !important;
  border-radius: 16px !important;
  padding: 24px 26px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.founder-quote-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important;
  border-color: #86efac !important;
}

.founder-quote-text,
.founder-quote-item .founder-quote-text {
  color: #334155 !important;
  font-size: 0.94rem !important;
  line-height: 1.65 !important;
  font-style: italic !important;
  margin-bottom: 18px !important;
  font-weight: 500 !important;
}

.founder-quote-author,
.founder-quote-item .founder-quote-author {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
  padding-top: 14px !important;
}

.founder-avatar-icon,
.founder-quote-item .founder-avatar-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #f0fdf4 !important;
  border: 2px solid #22c55e !important;
  color: #15803d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
}

.founder-author-name,
.founder-quote-item .founder-author-name {
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  font-family: var(--font-heading, 'Outfit', sans-serif) !important;
}

.founder-author-role,
.founder-quote-item .founder-author-role {
  font-size: 0.80rem !important;
  color: #15803d !important;
  font-weight: 700 !important;
  margin: 2px 0 0 0 !important;
}

/* 4. BANNER LEGALITAS RESMI & KARTU SERTIFIKAT KANAN */
.legalitas-csr-banner {
  background: linear-gradient(135deg, #052615 0%, #0d4227 50%, #155e38 100%) !important;
  border-radius: 20px !important;
  padding: 38px 42px !important;
  display: grid !important;
  grid-template-columns: 1.22fr 0.78fr !important;
  align-items: center !important;
  gap: 36px !important;
  box-shadow: 0 16px 36px rgba(5, 38, 21, 0.2) !important;
  border: 1px solid rgba(74, 222, 128, 0.25) !important;
  color: #ffffff !important;
}

.legalitas-left-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.legalitas-badge-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.badge-legal-gold {
  background: rgba(250, 204, 21, 0.2) !important;
  color: #fde047 !important;
  font-weight: 800 !important;
  font-size: 0.76rem !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(250, 204, 21, 0.4) !important;
  letter-spacing: 0.03em !important;
}

.legalitas-badge-sub {
  font-size: 0.84rem !important;
  color: #86efac !important;
  font-weight: 700 !important;
}

.legalitas-title {
  font-family: var(--font-heading, 'Outfit', sans-serif) !important;
  font-size: 1.55rem !important;
  color: #ffffff !important;
  margin: 0 !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.legalitas-desc {
  font-size: 0.92rem !important;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.65 !important;
  margin: 0 0 6px 0 !important;
}

.legalitas-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
}

.btn-legal-wa {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  backdrop-filter: blur(6px) !important;
}

.btn-legal-wa:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Right Certificate Seal Card */
.legalitas-right-card {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.legal-seal-frame {
  width: 100% !important;
  max-width: 370px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(250, 204, 21, 0.5) !important;
  border-radius: 18px !important;
  padding: 24px 22px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  text-align: center !important;
  position: relative !important;
}

.legal-seal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-bottom: 10px !important;
}

.legal-seal-tag {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #fde047 !important;
  letter-spacing: 0.05em !important;
}

.legal-seal-status {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #4ade80 !important;
}

.legal-seal-emblem {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.25) 0%, rgba(202, 138, 4, 0.35) 100%) !important;
  border: 2px solid #fde047 !important;
  color: #fde047 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  margin: 0 auto 12px auto !important;
  box-shadow: 0 4px 15px rgba(250, 204, 21, 0.2) !important;
}

.legal-seal-org {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 4px !important;
}

.legal-seal-number {
  font-family: monospace !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #fde047 !important;
  background: rgba(0, 0, 0, 0.25) !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  border: 1px solid rgba(250, 204, 21, 0.3) !important;
  margin-bottom: 6px !important;
}

.legal-seal-npwp {
  font-size: 0.76rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.legal-seal-footer-strip {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.seal-foot-pill {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 991px) {
  .legalitas-csr-banner {
    grid-template-columns: 1fr !important;
    padding: 30px 24px !important;
    gap: 26px !important;
  }
}

/* 5. TOMBOL PLAY VIDEO MOBILE 100% CENTER */
@media (max-width: 768px) {
  .video-facade-container {
    aspect-ratio: 16 / 9 !important;
    position: relative !important;
  }
  .video-play-btn {
    position: absolute !important;
    top: 45% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 1.3rem !important;
    margin: 0 !important;
    z-index: 3 !important;
  }
  .video-facade-meta {
    padding: 10px 14px !important;
    background: linear-gradient(to top, rgba(5, 26, 15, 0.96) 0%, rgba(5, 26, 15, 0.82) 65%, transparent 100%) !important;
    z-index: 2 !important;
  }
  .video-facade-title {
    font-size: 0.88rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }
  .video-source-badge {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    margin-bottom: 2px !important;
  }
  .video-facade-hint {
    display: none !important;
  }
}

/* 6. MICRO-ANIMASI HALUS, RINGAN & ELEGAN (60FPS CSS HARDWARE ACCELERATED) */
@keyframes softPulseGlow {
  0%, 100% {
    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.38);
  }
  50% {
    box-shadow: 0 14px 32px rgba(234, 88, 12, 0.55);
  }
}

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

.hero-badge {
  animation: gentleBadgeFloat 4s ease-in-out infinite !important;
}

.btn-accent {
  animation: softPulseGlow 3.5s ease-in-out infinite !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important;
}

.btn-accent:hover {
  transform: translateY(-2px) scale(1.02) !important;
}

.btn-whatsapp:hover,
.btn-glass:hover,
.btn-secondary:hover {
  transform: translateY(-2px) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important;
}

/* Card smooth hover lifts */
.stat-card,
.infographic-card,
.daily-ks-card,
.program-card,
.mitra-card,
.faq-item,
.c-stat-item,
.comp-col,
.founder-quote-item,
.legal-seal-frame {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.infographic-card:hover,
.daily-ks-card:hover,
.program-card:hover,
.c-stat-item:hover,
.comp-col:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08) !important;
}

.faq-question {
  transition: background-color 0.2s ease, color 0.2s ease !important;
}


/* ==========================================================================
   MASTER REFINEMENTS V3 (HARGA MATI MAS ANWAR - 29 OKTOBER 2026)
   1. Penyelarasan Top Bar (Ciracas & 2 Bahasa) Sejajar Presisi dgn Header
   2. Masterclass FAQ: Elegan, Bebas Tombol Biru Astra, Accordion Mulus
   3. Seksi Ciracas 1:1 Proporsional, Bersih Bebas Watermark Merah
   4. HAPUS TOTAL Seksi Legalitas di Beranda (Display None & Zero Impact)
   5. Seksi Donasi / Titip Sedekah: Kontras Tajam 100% Terbaca
   6. Footer & Navigasi Bawah Mewah, Modern, dan Human-Centric
   ========================================================================== */

/* 1. PENYELARASAN TOP BAR DENGAN MAIN HEADER (LURUS VERTIKAL 1200px) */
.top-bar-container,
.main-header .header-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .top-bar-container,
  .main-header .header-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* 2. MASTERCLASS FAQ: ELEGAN & BEBAS WARNA BIRU ASTRA */
#mcFaqAccordion,
.mc-faq-section .faq-accordion-wrap {
  max-width: 860px !important;
  margin: 0 auto !important;
}

#mcFaqAccordion .faq-item,
.mc-faq-section .accordion-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s ease !important;
}

#mcFaqAccordion .faq-item:hover,
.mc-faq-section .accordion-item:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

#mcFaqAccordion .faq-item.active,
.mc-faq-section .accordion-item.active {
  border-color: #22c55e !important;
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.08) !important;
}

#mcFaqAccordion .faq-question,
.mc-faq-section .accordion-header,
.mc-faq-section button.accordion-header {
  width: 100% !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: none !important;
  padding: 18px 22px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: left !important;
  font-family: var(--font-heading) !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  outline: none !important;
  box-shadow: none !important;
}

#mcFaqAccordion .faq-question:hover,
.mc-faq-section .accordion-header:hover {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #047857 !important;
}

#mcFaqAccordion .faq-question i,
.mc-faq-section .accordion-header i {
  color: #047857 !important;
  font-size: 0.9rem !important;
  transition: transform 0.3s ease !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
}

#mcFaqAccordion .faq-item.active .faq-question i,
.mc-faq-section .accordion-item.active .accordion-header i {
  transform: rotate(180deg) !important;
  color: #16a34a !important;
}

#mcFaqAccordion .faq-item {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}
#mcFaqAccordion .faq-item:hover {
  border-color: #cbd5e1 !important;
}
#mcFaqAccordion .faq-item.active {
  border-color: #047857 !important;
  box-shadow: 0 4px 16px rgba(4, 120, 87, 0.08) !important;
}
#mcFaqAccordion .faq-question {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 18px 22px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-align: left !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  gap: 16px !important;
}
#mcFaqAccordion .faq-question:hover {
  color: #047857 !important;
}
#mcFaqAccordion .faq-item.active .faq-question {
  color: #047857 !important;
}
#mcFaqAccordion .faq-question i {
  color: #94a3b8 !important;
  font-size: 0.88rem !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
  flex-shrink: 0 !important;
}
#mcFaqAccordion .faq-item.active .faq-question i {
  transform: rotate(180deg) !important;
  color: #047857 !important;
}
#mcFaqAccordion .faq-answer,
.mc-faq-section .accordion-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  color: #475569 !important;
  font-size: 0.94rem !important;
  line-height: 1.7 !important;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease !important;
  background: #ffffff !important;
}
#mcFaqAccordion .faq-item.active .faq-answer,
.mc-faq-section .accordion-item.active .accordion-body {
  max-height: 1200px !important;
  padding: 0 22px 22px 22px !important;
}

/* 3. SEKSI CIRACAS: 1:1 RASIO, ELEGAN, BEBAS WATERMARK MERAH */
.ciracas-highlight-box {
  background: #113f27 !important;
  border-radius: 20px !important;
  padding: 36px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
}

.ciracas-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 36px !important;
  align-items: stretch !important;
}

.ciracas-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.ciracas-media {
  display: flex !important;
  height: 100% !important;
  min-height: 380px !important;
}

.ciracas-photo-frame {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.ciracas-photo-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.ciracas-photo-caption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(to top, rgba(10, 46, 29, 0.94) 0%, rgba(10, 46, 29, 0.6) 60%, transparent 100%) !important;
  color: #ffffff !important;
  padding: 24px 18px 14px 18px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

@media (max-width: 900px) {
  .ciracas-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ciracas-media {
    min-height: 280px !important;
  }
}

/* 4. HAPUS TOTAL SEKSI LEGALITAS DARI BERANDA (HANYA BERANDA/HOME, TETAP TAMPIL DI HALAMAN MITRA) */
body.home #legalitas,
body.home .section-legalitas-bar,
body.home [data-id="c0373b7"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.page-template-page-mitra #legalitas,
.page-template-page-mitra .legalitas-csr-banner,
body:not(.home) #legalitas,
body:not(.home) .legalitas-csr-banner {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 5. SEKSI TITIP SEDEKAH / CTA DONASI: KONTRAS TAJAM 100% TERBACA */
#donasi-section,
.kb-portal-cta-section {
  background: #f8fafc !important;
  color: #1e293b !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 75px 0 !important;
}

#donasi-section .section-title,
.kb-portal-cta-section .section-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

#donasi-section .section-subtitle,
.kb-portal-cta-section .section-subtitle {
  color: #475569 !important;
}

#donasi-section a.btn-outline,
.kb-portal-cta-section a.btn-outline {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 2px solid #22c55e !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
}

#donasi-section a.btn-outline:hover,
.kb-portal-cta-section a.btn-outline:hover {
  background: #dcfce7 !important;
  color: #14532d !important;
  border-color: #16a34a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.2) !important;
}

/* Removed blunt span override that broke dark badges */

/* 6. FOOTER & NAVIGASI BAWAH MEWAH */
.main-footer {
  background-color: #0c1e14 !important;
  border-top: 4px solid var(--accent-gold) !important;
  padding: 70px 0 28px 0 !important;
}

.footer-heading {
  font-family: var(--font-heading) !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
  letter-spacing: 0.02em !important;
}

.footer-links li {
  margin-bottom: 11px !important;
}

.footer-links a {
  color: #cbd5e1 !important;
  font-size: 0.88rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.footer-links a i {
  font-size: 0.78rem !important;
  color: #22c55e !important;
  transition: transform 0.25s ease !important;
}

.footer-links a:hover {
  color: #4ade80 !important;
  transform: translateX(4px) !important;
}

.footer-links a:hover i {
  transform: translateX(2px) !important;
}

.footer-btn-sedekah {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1.5px solid #22c55e !important;
  color: #4ade80 !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.footer-btn-sedekah:hover {
  background: #22c55e !important;
  color: #064e3b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35) !important;
}

.footer-badge-pulse {
  display: inline-block !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  background: #ea580c !important;
  color: #ffffff !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  margin-left: 6px !important;
  letter-spacing: 0.04em !important;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 24px !important;
  margin-top: 40px !important;
  font-size: 0.84rem !important;
  color: #94a3b8 !important;
}


/* ==========================================================================
   MASTER REFINEMENTS V4 (HARGA MATI MAS ANWAR - TAHAP 1 EKSEKUSI PENUH)
   1. Header & Top Bar: Lega, Elegan, Bebas Sesak (Max-Width 1280px)
   2. Video Mobile: Play Button 100% Dead Center (50% x 50%)
   3. Seksi Ciracas Mobile: Gambar Warga di Atas, Badge Ramping Fit-Content
   4. Founder & Tokoh Testimonial Mobile: Single Column 100% Lega, Bebas Terhimpit
   5. Peta Indonesia Mobile: Bersih, Rapi, Label Pas Layar HP
   6. Footer: 1 Kalimat 1 Baris, Kolom Proporsional, Tombol Sedekah Elegan
   7. Single Official Floating WhatsApp: Brand "Tanya Admin KS", Nol Tombol Ganda
   ========================================================================== */

/* --- 1. HEADER & TOP BAR: LEGA & ELEGAN (MAX-WIDTH 1280px) --- */
.top-bar-container,
.main-header .header-container {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 1025px) {
  .main-header .header-container {
    height: 74px !important;
    gap: 16px !important;
  }
  .main-header .nav-list {
    gap: 6px !important;
  }
  .main-header .nav-item {
    margin: 0 !important;
  }
  .main-header .nav-link {
    font-size: 0.86rem !important;
    padding: 6px 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
  }
  .main-header .btn-donate-pill {
    padding: 9px 18px !important;
    font-size: 0.86rem !important;
    letter-spacing: 0.02em !important;
  }
  .main-header .hamburger-btn,
  .main-header .mobile-toggle,
  .hamburger-btn,
  .mobile-toggle {
    display: none !important;
  }
}

/* --- 2. VIDEO MOBILE PLAY BUTTON: 100% DEAD CENTER --- */
@media (max-width: 768px) {
  .video-facade-container {
    aspect-ratio: 16 / 9 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .video-play-btn {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: #dc2626 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0 0 4px !important;
    margin: 0 !important;
    z-index: 10 !important;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7) !important;
    animation: playPulse 2s infinite !important;
  }
}

/* --- 3. SEKSI CIRACAS: GAMBAR DI ATAS PADA HP, BADGE FIT-CONTENT --- */
.ciracas-info .badge-accent,
.ciracas-info .badge {
  display: inline-block !important;
  width: fit-content !important;
  max-width: fit-content !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 12px !important;
}

@media (max-width: 768px) {
  .ciracas-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .ciracas-media {
    order: -1 !important;
    min-height: 240px !important;
    margin-bottom: 8px !important;
  }
  .ciracas-photo-frame {
    min-height: 240px !important;
    border-radius: 14px !important;
  }
  .ciracas-info {
    order: 2 !important;
  }
  .ciracas-stats-mini {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }
  .c-stat-item {
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
  }
  .c-stat-item strong {
    font-size: 1.35rem !important;
    margin-bottom: 0 !important;
  }
  .c-stat-item span {
    font-size: 0.82rem !important;
    margin-top: 0 !important;
    text-align: right !important;
  }
}

/* --- 4. FOUNDER & TOKOH TESTIMONIALS: 100% LEGA PADA MOBILE --- */
@media (max-width: 768px) {
  .founder-spotlight-box {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }
  .founder-quote-item {
    padding: 20px 18px !important;
    border-radius: 14px !important;
  }
  .founder-quote-text {
    font-size: 0.90rem !important;
    line-height: 1.6 !important;
    margin-bottom: 14px !important;
  }
  .founder-author-name {
    font-size: 0.96rem !important;
  }
  .founder-author-role {
    font-size: 0.76rem !important;
  }
}

/* --- 5. PETA SEBARAN NASIONAL: PAS DI TAMPILAN HP --- */
@media (max-width: 640px) {
  .real-map-stage {
    height: 310px !important;
    min-height: 310px !important;
    border-radius: 12px !important;
  }
  /* On mobile, keep Indonesia map pristine: show gold badge for Ciracas HQ, active city pin, while other pins pulse cleanly */
  .geo-pin-label {
    display: none !important;
  }
  .geo-pin.hq-pin .geo-pin-label {
    display: inline-flex !important;
    font-size: 0.62rem !important;
    padding: 2px 6px !important;
    letter-spacing: 0 !important;
  }
  .geo-pin.active .geo-pin-label {
    display: inline-flex !important;
    font-size: 0.62rem !important;
    padding: 2px 6px !important;
    z-index: 20 !important;
  }
  .coverage-tags-wrap {
    gap: 6px !important;
    padding: 6px 0 !important;
  }
  .coverage-pill {
    font-size: 0.74rem !important;
    padding: 5px 10px !important;
  }
}

/* --- 6. FOOTER: 1 KALIMAT 1 BARIS, BEBAS SESAK & KACAU --- */
.main-footer .footer-container {
  max-width: 1280px !important;
  grid-template-columns: 1.4fr 1.15fr 1.15fr 1.3fr !important;
  gap: 32px !important;
}

.main-footer .footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.main-footer .footer-links li {
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}

.main-footer .footer-links a {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  font-size: 0.88rem !important;
  color: #cbd5e1 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.main-footer .footer-links a:hover {
  color: #4ade80 !important;
  transform: translateX(4px) !important;
}

.main-footer .footer-btn-sedekah {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  width: auto !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
}

@media (max-width: 991px) {
  .main-footer .footer-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 640px) {
  .main-footer .footer-container {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* --- 7. TUNGGALKAN FLOATING WHATSAPP & BRANDING RESMI: TANYA ADMIN KS --- */
/* Hide any third-party or duplicate floating buttons */
.qlwapp,
.floating-wa-btn,
.qlwapp__button,
#qlwapp {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Single Unified High-Class Floating WA Widget */
.yksi-floating-wa {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.yksi-floating-wa:hover {
  transform: translateY(-3px) scale(1.02) !important;
}

.yksi-wa-btn {
  width: 56px !important;
  height: 56px !important;
  background-color: #25D366 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45) !important;
  animation: singlePulse 2.5s infinite !important;
}

.yksi-wa-btn svg {
  width: 30px !important;
  height: 30px !important;
  fill: #ffffff !important;
}

.yksi-wa-label {
  background: #ffffff !important;
  color: #1e293b !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
  white-space: nowrap !important;
  border: 1.5px solid #e2e8f0 !important;
  display: inline-block !important;
  letter-spacing: 0.01em !important;
}

@keyframes singlePulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (max-width: 640px) {
  .yksi-floating-wa {
    bottom: 18px !important;
    right: 16px !important;
  }
  .yksi-wa-btn {
    width: 50px !important;
    height: 50px !important;
  }
  .yksi-wa-btn svg {
    width: 26px !important;
    height: 26px !important;
  }
  .yksi-wa-label {
    display: none !important;
  }
}


/* Absolute suppression of AI-style icons on volunteer form labels */
#volunteerForm label i,
.volunteer-form-col label i,
.volunteer-form-col .badge i,
#volunteerForm form > div:last-child i {
  display: none !important;
}


/* ==========================================================================
   MAS ANWAR DIRECTIVE (BATCH 3): REFINEMENTS SESUAI 5 SCREENSHOTS
   1. Supervision Grid (Leadership Camp dll): 2x2 rapi di layar ponsel
   2. 4 Pilar CSR: Kotak konten teks & ikon ditaruh di tengah (centered)
   3. Srikandi KS: Strict 1 baris (tidak patah ke baris baru)
   4. FAQ Halaman: Judul kategori Bold, pertanyaan Regular/Medium (hierarki ideal)
   5. Footer Mobile: Kompak, eliminasi kelebihan white space & bullet liar
   ========================================================================== */

/* 1. SUPERVISION GRID: 2 BARIS x 2 KARTU DI HP */
@media (max-width: 768px) {
  .supervision-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .supervision-item {
    padding: 18px 12px !important;
    text-align: center !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .supervision-item i {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
  }
  .supervision-item h4 {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
  }
  .supervision-item p {
    font-size: 0.78rem !important;
    line-height: 1.38 !important;
    margin: 0 !important;
  }
}

/* 2. 4 PILAR CSR: KONTEN KARTU RATA TENGAH (CENTERED) */
.csr-pillar-card {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.csr-pillar-icon {
  margin: 0 auto 16px !important;
}
.csr-pillar-badge {
  margin: 0 auto 12px !important;
  display: inline-flex !important;
}
.csr-pillar-title {
  text-align: center !important;
}
.csr-pillar-desc {
  text-align: center !important;
}
.csr-pillar-card ul,
.csr-pillar-features,
.csr-features-list {
  text-align: left !important;
  width: 100% !important;
  margin-top: 14px !important;
}

/* 3. SRIKANDI KS: STRICT 1 BARIS (NO WRAPPING) */
.volunteer-role-card .v-role-content strong,
.v-role-content strong {
  display: block !important;
  font-size: 0.95rem !important;
  white-space: nowrap !important;
}
.volunteer-role-card .v-role-content strong span,
.v-role-content strong span {
  display: inline !important;
  white-space: nowrap !important;
}

/* 4. FAQ TYPOGRAPHY: JUDUL BOLD & TEKS PERTANYAAN MEDIUM/REGULAR */
.faq-category-title {
  font-weight: 800 !important;
  font-size: 1.18rem !important;
  color: #0F4C28 !important;
  margin-bottom: 16px !important;
}
.faq-question,
.faq-question span {
  font-weight: 500 !important;
  font-size: 0.96rem !important;
  color: #1e293b !important;
  line-height: 1.45 !important;
}
.faq-item.active .faq-question,
.faq-item.active .faq-question span {
  font-weight: 600 !important;
  color: #0F4C28 !important;
}

/* 5. FOOTER MOBILE: KOMPAK, BEBAS KELEBIHAN WHITE SPACE */
@media (max-width: 768px) {
  .main-footer {
    padding: 36px 0 20px !important;
  }
  .main-footer .footer-container {
    gap: 18px !important;
  }
  .main-footer .footer-logo {
    margin-bottom: 8px !important;
  }
  .main-footer .footer-desc {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }
  .main-footer .footer-social-links {
    margin-bottom: 6px !important;
  }
  .main-footer .footer-heading {
    font-size: 1.02rem !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
  }
  .main-footer .footer-links {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }
  .main-footer .footer-links li {
    list-style: none !important;
    margin-bottom: 6px !important;
    line-height: 1.35 !important;
  }
  .main-footer .footer-links li a {
    font-size: 0.84rem !important;
  }
  .footer-contact-item {
    margin-bottom: 8px !important;
    font-size: 0.82rem !important;
  }
  .footer-rekening-box {
    margin-top: 10px !important;
    padding: 8px 12px !important;
  }
}


/* ==========================================================================
   MAS ANWAR DIRECTIVE (BATCH 4): REFINEMENTS SESUAI 5 SCREENSHOTS TERBARU
   1. Footer Mobile: Teks lega, padding 0 24px (tidak mepet kiri & kanan)
   2. Navigasi Dropdown: Bebas redundansi ("Beranda Utama" dihapus)
   3. Subpage Hero: Pangkas kelebihan white space di mobile (padding ringkas)
   4. Quran Ayat Card: Pangkas padding & margin kosong berlebih di mobile
   5. Tokoh & Dewan Pembina: Desain editorial mewah, bebas kotak kaku, rapi di HP
   ========================================================================== */

/* 1. FOOTER: TIDAK MEPET KIRI & KANAN DI MOBILE */
@media (max-width: 768px) {
  .main-footer .footer-container {
    padding: 0 24px !important;
    max-width: 100% !important;
  }
  .main-footer .footer-col {
    padding: 0 !important;
  }
  .main-footer .footer-desc {
    padding: 0 !important;
    line-height: 1.55 !important;
  }
}

/* 3. SUBPAGE HERO: PANGKAS WHITE SPACE DI MOBILE */
@media (max-width: 768px) {
  .page-hero,
  .page-banner-section {
    padding: 85px 18px 28px 18px !important;
  }
  .page-hero-title,
  .page-banner-title {
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }
  .page-hero-desc,
  .page-banner-desc {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }
  .page-hero .badge,
  .page-banner-section .banner-badge {
    margin-bottom: 8px !important;
  }
}

/* 4. QURAN AYAT CARD: INTIMATE, CLEAN & BEBAS EXCESSIVE WHITE SPACE */
.quran-ayat-card {
  background: var(--primary-tint) !important;
  border: 1px solid var(--primary-light) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px 20px !important;
  text-align: center !important;
  max-width: 860px !important;
  margin: 0 auto 28px !important;
  box-shadow: var(--shadow-sm) !important;
}

@media (max-width: 768px) {
  #visi-misi {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  #visi-misi .section-header {
    margin-bottom: 18px !important;
  }
  .quran-ayat-card {
    padding: 16px 14px !important;
    margin: 0 auto 20px !important;
    border-radius: 14px !important;
  }
  .quran-ayat-card .hero-quran {
    font-size: 1.35rem !important;
    line-height: 1.55 !important;
    margin-bottom: 8px !important;
  }
  .quran-ayat-card p {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
  }
}

/* 5. TOKOH & DEWAN PEMBINA (FOUNDER QUOTES): EDITORIAL MEWAH & BERKELAS */
.founder-spotlight-box {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}

.founder-quote-item {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 32px 30px !important;
  box-shadow: 0 4px 20px rgba(15, 76, 40, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.founder-quote-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(15, 76, 40, 0.12) !important;
  border-color: #cbd5e1 !important;
}

.founder-quote-text {
  font-style: normal !important;
  font-size: 0.95rem !important;
  line-height: 1.68 !important;
  color: #334155 !important;
  margin-bottom: 20px !important;
}

.founder-quote-author,
.founder-meta {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
  padding-top: 16px !important;
  margin-top: auto !important;
}

.founder-avatar-icon,
.founder-avatar-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  color: #166534 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
}

.founder-author-name,
.founder-name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.25 !important;
}

.founder-author-role,
.founder-role {
  font-size: 0.82rem !important;
  color: #166534 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

@media (max-width: 768px) {
  .founder-spotlight-box {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .founder-quote-item {
    padding: 22px 18px !important;
    border-radius: 16px !important;
  }
  .founder-quote-text {
    font-size: 0.90rem !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }
}

/* Specificity override for founder quote text to be upright (non-italic) */
.founder-quote-item .founder-quote-text,
.founder-quote-box .founder-quote-text,
.founder-spotlight-box .founder-quote-text,
.founder-quote-text {
  font-style: normal !important;
}

/* ========================================================
   BATCH 5: KALKULATOR ZISWAF & FIDYAH POLISH & MOBILE ENHANCEMENTS
   ======================================================== */
.calc-hero {
  padding: 75px 20px 28px 20px !important;
}

.calc-tab-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  background: #f1f5f9 !important;
  padding: 6px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  margin-bottom: 24px !important;
}

.calc-tab-btn {
  flex: 1 1 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 8px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: transparent !important;
  color: #475569 !important;
}

.calc-tab-btn:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #0f172a !important;
}

.calc-tab-btn.active {
  background: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(4, 120, 87, 0.25) !important;
}

.calc-mobile-selector-wrap {
  display: none !important;
}

@media (max-width: 820px) {
  .calc-hero {
    padding: 70px 16px 20px !important;
  }
  .calc-hero .page-hero-title {
    font-size: 1.65rem !important;
    margin: 8px 0 10px !important;
  }
  .calc-hero .page-hero-desc {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }
  .calc-main-card {
    padding: 20px 16px !important;
  }
  .calc-tab-nav {
    display: none !important;
  }
  .calc-mobile-selector-wrap {
    display: block !important;
  }
  .calc-payment-subgrid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .calc-pay-section .kb-pay-grid {
    gap: 8px !important;
  }
  .calc-pay-section .kb-pay-card {
    padding: 10px 8px !important;
    gap: 8px !important;
  }
  .calc-pay-section .kb-pay-info strong {
    font-size: 0.8rem !important;
  }
  .calc-pay-section .kb-pay-info small {
    font-size: 0.68rem !important;
  }
  .calc-pay-section .kb-pay-card i {
    font-size: 1.15rem !important;
  }
}

/* ========================================================
   MASTERCLASS FUNNEL: 2-STEP CHECKOUT, STRUK, QRIS & MINI CRM
   ======================================================== */
.mc-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.mc-tier-option {
  position: relative;
  cursor: pointer;
  display: block;
  margin: 0;
}
.mc-tier-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mc-tier-box {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mc-tier-option:hover .mc-tier-box {
  border-color: #047857;
  transform: translateY(-2px);
}
.mc-tier-option input[type="radio"]:checked + .mc-tier-box {
  background: #ecfdf5;
  border-color: #047857;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.15);
}
.mc-tier-box.mc-tier-featured {
  border-color: #f59e0b;
  background: #fffbeb;
}
.mc-tier-option input[type="radio"]:checked + .mc-tier-box.mc-tier-featured {
  border-color: #d97706;
  background: #fef3c7;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.2);
}
.mc-tier-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.5px;
  display: inline-block;
  margin-bottom: 6px;
}
.mc-tier-badge.featured {
  color: #b45309;
}
.mc-tier-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0f172a;
}
.mc-tier-price {
  font-size: 1.15rem;
  font-weight: 900;
  color: #047857;
  margin: 6px 0;
}
.mc-tier-box.mc-tier-featured .mc-tier-price {
  color: #b45309;
}
.mc-tier-desc {
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.35;
}

/* Summary Box */
.mc-summary-box {
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 20px;
}
.mc-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: #475569;
  margin-bottom: 8px;
}
.mc-sum-row:last-child {
  margin-bottom: 0;
}
.mc-sum-row.total {
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
  margin-top: 10px;
  font-weight: 800;
  color: #0f172a;
}
.mc-sum-total {
  font-size: 1.3rem;
  font-weight: 900;
  color: #047857;
}

/* STEP 2: Live Payment & Ticket Receipt */
.mc-step2-wrap {
  animation: fadeInStep 0.3s ease-in-out;
}
@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mc-ticket-receipt {
  background: #ffffff;
  border: 2px solid #047857;
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
}
.mc-receipt-header {
  background: linear-gradient(135deg, #061c11 0%, #103020 100%);
  color: #ffffff;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.mc-receipt-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mc-receipt-brand img {
  height: 38px;
  width: auto;
}
.mc-receipt-brand-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.mc-receipt-brand-text small {
  color: #94a3b8;
  font-size: 0.72rem;
}
.mc-receipt-status {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mc-receipt-status.lunas {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.mc-receipt-body {
  padding: 24px;
}
.mc-receipt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #cbd5e1;
}
.mc-r-item label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.mc-r-item span {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}
.mc-r-total-box {
  background: #ecfdf5;
  border: 1.5px solid #a7f3d0;
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.mc-r-total-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #065f46;
}
.mc-r-total-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: #047857;
  font-family: monospace;
  letter-spacing: 0.5px;
}

/* Pay Options Tabs */
.mc-pay-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.mc-pay-tab-btn {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}
.mc-pay-tab-btn.active {
  border-color: #047857;
  background: #ecfdf5;
  color: #047857;
  box-shadow: 0 4px 10px rgba(4, 120, 87, 0.12);
}

.mc-pay-card {
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  background: #ffffff;
  margin-bottom: 20px;
}
.mc-bsi-pill {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.mc-bsi-acc-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: #0f766e;
  font-family: monospace;
  letter-spacing: 2px;
}

/* Grup WhatsApp CTA Banner */
.mc-group-banner {
  background: linear-gradient(135deg, #128c7e 0%, #075e54 100%);
  color: #ffffff;
  border-radius: 16px;
  padding: 22px 24px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(18, 140, 126, 0.25);
  margin-bottom: 24px;
}
.mc-group-banner h4 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: #ffffff;
}
.mc-group-banner p {
  font-size: 0.85rem;
  color: #d1fae5;
  margin: 0 0 16px 0;
}
.btn-join-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  color: #075e54;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}
.btn-join-group:hover {
  background: #25d366;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

/* Action Buttons Grid */
.mc-receipt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}
.btn-mc-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: all 0.2s;
}
.btn-mc-wa {
  background: #047857;
  color: #ffffff;
}
.btn-mc-wa:hover {
  background: #065f46;
  color: #ffffff;
}
.btn-mc-print {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}
.btn-mc-print:hover {
  background: #e2e8f0;
}

/* Mini CRM Modal */
.mc-crm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mc-crm-dialog {
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}
.mc-crm-header {
  background: #0f172a;
  color: #ffffff;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mc-crm-body {
  padding: 24px;
  overflow-y: auto;
}
.mc-crm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.mc-crm-table th {
  background: #f1f5f9;
  color: #334155;
  font-weight: 800;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 2px solid #cbd5e1;
}
.mc-crm-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
}

@media (max-width: 768px) {
  .mc-tier-grid {
    grid-template-columns: 1fr;
  }
  .mc-receipt-grid {
    grid-template-columns: 1fr;
  }
  .mc-pay-tabs {
    flex-direction: column;
  }
  .mc-receipt-actions {
    grid-template-columns: 1fr;
  }
}

@media print {
  body * {
    visibility: hidden;
  }
  #mcTicketReceipt, #mcTicketReceipt * {
    visibility: visible;
  }
  #mcTicketReceipt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: none;
    box-shadow: none;
  }
  .mc-no-print {
    display: none !important;
  }
}



/* Media Card Enhanced Styles */
.media-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important;
  border-color: #10b981 !important;
}
.media-card:hover .media-card-thumb-wrap img {
  transform: scale(1.05) !important;
}

/* Reader Modal & Article Content Comfortable Spacing */
.reader-container {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  box-sizing: border-box !important;
}
.reader-top-container {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .reader-container {
    padding: 0 22px !important;
  }
  .reader-top-container {
    padding: 0 16px !important;
  }
  .reader-headline-title {
    font-size: 1.55rem !important;
    line-height: 1.35 !important;
    margin-bottom: 16px !important;
  }
  .reader-article-canvas {
    padding: 20px 0 60px 0 !important;
  }
}

@media (max-width: 480px) {
  .reader-container {
    padding: 0 20px !important;
  }
  .btn-reader-back {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
  }
  .btn-share-wa-top {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
  }
  .badge-reader-cat {
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


.single-reader-card {
  max-width: 860px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 48px 44px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .single-reader-card {
    padding: 32px 22px !important;
    border-radius: 16px !important;
  }
}
@media (max-width: 480px) {
  .single-reader-card {
    padding: 24px 18px !important;
    border-radius: 12px !important;
  }
}

/* ==========================================================================
   DONASI PAGE SURGICAL ENHANCEMENTS (HARGA MATI MAS ANWAR PROTOCOL)
   1. Organizer Row: Pristine Badge & Anti-Awkward Wrapping
   2. Mobile Select: 52px Box-Sizing & Zero Letter-Clipping
   3. FAQ Section: 100% Centered Symmetry & Elegance
   ========================================================================== */

/* 1. Organizer Row */
.kb-organizer-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  margin-bottom: 22px !important;
  box-sizing: border-box !important;
}

.kb-org-avatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  border: 2px solid #10b981 !important;
  object-fit: contain !important;
  background: #ffffff !important;
  padding: 2px !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15) !important;
  flex-shrink: 0 !important;
}

.kb-org-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.kb-org-title-line {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}

.kb-org-name {
  font-family: var(--font-heading) !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  color: #065f46 !important;
  line-height: 1.35 !important;
}

.kb-verified-badge {
  color: #0284c7 !important;
  font-size: 0.92rem !important;
}

.kb-org-meta-line {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  font-size: 0.77rem !important;
  color: #64748b !important;
  line-height: 1.4 !important;
}

.kb-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.kb-meta-divider {
  color: #cbd5e1 !important;
  font-weight: 700 !important;
}

/* 2. Program Selector Mobile Dropdown */
.kb-program-mobile-wrap {
  max-width: 520px !important;
  margin: 0 auto 24px auto !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
}

.kb-program-select-inner {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.kb-program-mobile-select {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  line-height: 50px !important;
  padding: 0 44px 0 16px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #065f46 !important;
  background-color: #ffffff !important;
  border: 2px solid #16a34a !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.12) !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  display: block !important;
}

.kb-program-select-inner::after {
  content: "\f078" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #16a34a !important;
  pointer-events: none !important;
  font-size: 0.88rem !important;
}

/* 3. FAQ Donasi: Centered Symmetry */
#donasi-faq .section-header {
  text-align: center !important;
  margin-bottom: 36px !important;
}

#donasi-faq .section-subtitle {
  max-width: 680px !important;
  margin: 12px auto 0 auto !important;
  text-align: center !important;
  line-height: 1.6 !important;
  color: #64748b !important;
}

#donasi-faq .faq-container {
  max-width: 820px !important;
  margin: 0 auto !important;
}

#donasi-faq .faq-question {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  padding: 16px 50px !important;
  width: 100% !important;
  border: none !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  cursor: pointer !important;
}

#donasi-faq .faq-question span {
  text-align: center !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 0.96rem !important;
  line-height: 1.45 !important;
  width: 100% !important;
}

#donasi-faq .faq-question i {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}

#donasi-faq .faq-item.active .faq-question span {
  color: #047857 !important;
  font-weight: 800 !important;
}

#donasi-faq .faq-item.active .faq-question i {
  transform: translateY(-50%) rotate(180deg) !important;
  color: #047857 !important;
}

#donasi-faq .faq-answer {
  text-align: center !important;
  padding: 0 24px 20px 24px !important;
}

#donasi-faq .faq-answer p {
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  color: #334155 !important;
}


/* ==========================================================================
   ENHANCED POLISH FOR KITABISA-STYLE CROWDFUNDING (STANDAR HARGA MATI MAS ANWAR)
   1. Organizer Row: 100% RATA TENGAH (CENTERED) & Anti-Awkward Wrapping
   2. Mobile Select: 50px line-height normal & Zero Letter-Clipping
   3. FAQ Section: 100% Centered Symmetry & TIDAK BOLD (Medium Halus)
   ========================================================================== */

/* 1. Organizer Row: Centered Layout */
.kb-organizer-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
  padding: 18px 20px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  margin-bottom: 24px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.kb-org-avatar {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 50% !important;
  border: 2.5px solid #10b981 !important;
  object-fit: contain !important;
  background: #ffffff !important;
  padding: 3px !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.2) !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}

.kb-org-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  gap: 4px !important;
}

.kb-org-title-line {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  flex-wrap: wrap !important;
}

.kb-org-name {
  font-family: var(--font-heading) !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: #065f46 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.kb-verified-badge {
  color: #0284c7 !important;
  font-size: 0.96rem !important;
}

.kb-org-meta-line {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px 14px !important;
  font-size: 0.8rem !important;
  color: #64748b !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

.kb-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.kb-meta-divider {
  color: #cbd5e1 !important;
  font-weight: 700 !important;
}

/* 2. Program Selector Mobile Dropdown */
.kb-program-mobile-wrap {
  max-width: 520px !important;
  margin: 0 auto 24px auto !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
}

.kb-program-select-inner {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.kb-program-mobile-select {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  line-height: normal !important;
  padding: 10px 44px 10px 16px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: #065f46 !important;
  background-color: #ffffff !important;
  border: 2px solid #16a34a !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.12) !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  display: block !important;
  vertical-align: middle !important;
}

.kb-program-select-inner::after {
  content: "\f078" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #16a34a !important;
  pointer-events: none !important;
  font-size: 0.88rem !important;
}

/* 3. FAQ Donasi: Centered & TIDAK BOLD (Medium 500) */
#donasi-faq .section-header {
  text-align: center !important;
  margin-bottom: 32px !important;
}

#donasi-faq .section-subtitle {
  max-width: 680px !important;
  margin: 12px auto 0 auto !important;
  text-align: center !important;
  line-height: 1.6 !important;
  color: #64748b !important;
}

#donasi-faq .faq-container {
  max-width: 820px !important;
  margin: 0 auto !important;
}

#donasi-faq .faq-question {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  padding: 16px 52px !important;
  width: 100% !important;
  border: none !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  cursor: pointer !important;
}

#donasi-faq .faq-question span,
#donasi-faq .faq-question h3,
#donasi-faq .faq-question h4,
#donasi-faq .faq-question strong,
#donasi-faq .faq-question b {
  text-align: center !important;
  font-family: var(--font-body, inherit) !important;
  font-weight: 500 !important; /* TIDAK BOLD SESUAI PERMINTAAN MAS ANWAR */
  color: #334155 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  width: 100% !important;
}

#donasi-faq .faq-question i {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}

#donasi-faq .faq-item.active .faq-question span,
#donasi-faq .faq-item.active .faq-question h3,
#donasi-faq .faq-item.active .faq-question h4,
#donasi-faq .faq-item.active .faq-question strong,
#donasi-faq .faq-item.active .faq-question b {
  color: #047857 !important;
  font-weight: 500 !important; /* TETAP TIDAK BOLD SAAT AKTIF */
}

#donasi-faq .faq-item.active .faq-question i {
  transform: translateY(-50%) rotate(180deg) !important;
  color: #047857 !important;
}

#donasi-faq .faq-answer {
  text-align: center !important;
  padding: 0 24px 20px 24px !important;
}

#donasi-faq .faq-answer p {
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #475569 !important;
}


/* ==========================================================================
   KITABISA EDITORIAL & MASTERCLASS ENFORCER (HARGA MATI MAS ANWAR)
   - Balanced Subpage Hero Whitespace (Top & Bottom Equal)
   - Speaker Bio Guaranteed Crisp White Text
   - Kitabisa-Style Paper Receipt Modal (SS 5 Fidelity)
   - Single Post Kitabisa Story Editorial Layout
   - Homepage 4-Column Pathways Grid Desktop
   ========================================================================== */

/* 1. SUBPAGE HERO WHITESPACE & BACKGROUND BALANCING */
.subpage-hero {
  position: relative !important;
  background: linear-gradient(135deg, rgba(6, 44, 28, 0.94) 0%, rgba(12, 68, 44, 0.92) 50%, rgba(6, 36, 22, 0.95) 100%),
              url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/kegiatan_ketahanan_pangan.jpg') center/cover no-repeat !important;
  color: #ffffff !important;
  padding: 60px 20px 60px 20px !important;
  text-align: center !important;
}
.subpage-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.subpage-desc {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
@media (max-width: 768px) {
  .subpage-hero {
    padding: 42px 16px 42px 16px !important;
  }
  .subpage-title {
    font-size: 1.85rem !important;
  }
}

/* 2. KANG TAUFIK ARY SPEAKER BIO GUARANTEED WHITE TEXT */
.mc-speaker-card {
  background: linear-gradient(135deg, #092617 0%, #103824 100%) !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(251, 191, 36, 0.4) !important;
  padding: 48px 40px !important;
  color: #ffffff !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
}
.mc-speaker-bio {
  color: #ffffff !important;
}
.mc-bio-role {
  color: #fbbf24 !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
}
.mc-bio-name {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
}
.mc-bio-lead,
.mc-bio-lead strong {
  color: #fde047 !important;
  -webkit-text-fill-color: #fde047 !important;
  font-size: 1.05rem !important;
}
.mc-bio-paragraphs p,
.mc-speaker-bio p {
  color: #ffffff !important;
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 0.98rem !important;
  line-height: 1.75 !important;
}
.mc-bio-paragraphs strong {
  color: #fef08a !important;
  -webkit-text-fill-color: #fef08a !important;
}
.mc-s-stat {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
}
.mc-s-stat strong {
  color: #fbbf24 !important;
  -webkit-text-fill-color: #fbbf24 !important;
}
.mc-s-stat span {
  color: rgba(255, 255, 255, 0.85) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

/* 3. KITABISA-STYLE INVOICE & RECEIPT MODAL (SS 5) */
.mc-ticket-receipt {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.07) !important;
  overflow: hidden !important;
}
.mc-receipt-header {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #14532d !important;
}
.mc-receipt-status {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
}
.mc-r-total-box {
  background: #f0fdf4 !important;
  border: 1.5px solid #bbf7d0 !important;
  border-radius: 12px !important;
}
.mc-r-total-val {
  color: #15803d !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
}

/* 4. HOMEPAGE 4 CARA MUDAH 4-COLUMN DESKTOP GRID */
@media (min-width: 1024px) {
  .join-pathways-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
}

/* 5. HOMEPAGE HERO & CTA TEXT GUARANTEED WHITE */
.hero-desc {
  color: #ffffff !important;
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
.pejuang-cta-section p,
.join-movement-wrapper p {
  color: #ffffff !important;
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 6. KITABISA STORY SINGLE POST EDITORIAL LAYOUT */
.single-post-editorial-wrapper {
  background: #f8fafc !important;
  min-height: 100vh !important;
  padding: 40px 16px 80px 16px !important;
}
.reader-container {
  max-width: 780px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 44px 40px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #e2e8f0 !important;
}
@media (max-width: 768px) {
  .reader-container {
    padding: 24px 18px !important;
    border-radius: 14px !important;
  }
}
.reader-breadcrumbs {
  font-size: 0.82rem !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.reader-breadcrumbs a {
  color: #047857 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.reader-headline-title {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(1.85rem, 3.5vw, 2.45rem) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  margin: 16px 0 20px 0 !important;
}
.reader-content {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.08rem !important;
  line-height: 1.85 !important;
  color: #1e293b !important;
}
.reader-content p {
  font-size: 1.08rem !important;
  line-height: 1.85 !important;
  color: #1e293b !important;
  margin-bottom: 22px !important;
}
.reader-content blockquote,
.entry-content blockquote {
  background: #f0fdf4 !important;
  border-left: 4px solid #16a34a !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 22px 26px !important;
  margin: 28px 0 !important;
  color: #14532d !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
}


/* ==========================================================================
   MAS ANWAR PROTOCOL: ZERO BLACK TEXT & UNIVERSAL ACCORDION ENGINE
   - /mitra/ Bottom CTA Guaranteed Pure White Text
   - Masterclass FAQ 100% Reliable Expand/Collapse
   - Subpage Badges Gold & Centered (SS 4 & SS 5 Harmonization)
   ========================================================================== */

/* 1. UNIVERSAL FAQ ACCORDION ENGINE (FIX FOR SS 2) */
.faq-item {
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.faq-item.active {
  border-color: #10b981 !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.08) !important;
}
.faq-question {
  width: 100% !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  padding: 18px 22px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #0f172a !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  outline: none !important;
}
.faq-question span {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.45 !important;
}
.faq-question i,
.faq-question .fa-chevron-down {
  color: #10b981 !important;
  transition: transform 0.3s ease !important;
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
}
.faq-item.active .faq-question i,
.faq-item.active .faq-question .fa-chevron-down {
  transform: rotate(180deg) !important;
}
.faq-answer {
  overflow: hidden !important;
  transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease !important;
}
.faq-item.active .faq-answer {
  max-height: 1200px !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  padding: 0 22px 20px 22px !important;
}
.faq-item:not(.active) .faq-answer {
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}
.faq-answer p {
  font-size: 0.95rem !important;
  line-height: 1.75 !important;
  color: #334155 !important;
  margin: 0 !important;
}

/* 2. SUBPAGE CTA BOTTOM GUARANTEED WHITE (FIX FOR SS 5) */
.subpage-cta-section {
  color: #ffffff !important;
}
.subpage-cta-section h2,
.subpage-cta-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}
.subpage-cta-section p,
.subpage-cta-desc {
  color: #ffffff !important;
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
}

/* 3. SUBPAGE HERO BADGES (FIX FOR SS 4 & KABAR KEGIATAN) */
.subpage-hero .badge,
.subpage-hero .badge-sub {
  background: rgba(254, 240, 138, 0.18) !important;
  color: #fef08a !important;
  -webkit-text-fill-color: #fef08a !important;
  border: 1px solid rgba(254, 240, 138, 0.45) !important;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 14px !important;
}

/* Badge Sub for Standard Sections on Light/White Background (High Contrast) */
.badge-sub,
.section .badge-sub,
.section-header .badge-sub {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 14px !important;
}


/* =========================================================================
   MASTER SYNERGY FIXES (HARGA MATI MAS ANWAR):
   1. REMOVE MOBILE TOP-BAR (Ciracas, WA, Beda Bahasa) on all mobile devices
   2. ANTI AUTO-TRANSLATE & IMMUNITY FOR PROPER NOUNS
   3. MODERN LUXURY CARDS FOR 4 CARA MUDAH MENJADI BAGIAN DARI GERAKAN
   ========================================================================= */

@media (max-width: 768px) {
  .top-bar,
  #topBar,
  div.top-bar {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* 4 CARA MUDAH MENJADI BAGIAN DARI GERAKAN - LUXURY CARD STYLING */
.join-pathway-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  padding: 28px 24px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.join-pathway-card:hover {
  transform: translateY(-4px) !important;
  border-color: #22c55e !important;
  box-shadow: 0 12px 28px rgba(34, 197, 94, 0.12) !important;
}
.pathway-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.45rem !important;
  margin-bottom: 18px !important;
  background: #ecfdf5 !important;
  color: #16a34a !important;
}
.join-pathway-card:nth-child(2) .pathway-icon {
  background: #eff6ff !important;
  color: #2563eb !important;
}
.join-pathway-card:nth-child(3) .pathway-icon {
  background: #fffbeb !important;
  color: #d97706 !important;
}
.join-pathway-card:nth-child(4) .pathway-icon {
  background: #faf5ff !important;
  color: #9333ea !important;
}
.pathway-card-title {
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
}
.pathway-target-tag {
  display: inline-block !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #0f766e !important;
  background: #ccfbf1 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  margin-bottom: 16px !important;
}
.pathway-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
}
.pathway-features li {
  font-size: 0.92rem !important;
  color: #475569 !important;
  line-height: 1.55 !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
.pathway-features li i {
  color: #16a34a !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}
.join-pathway-card .btn {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 11px 18px !important;
}

/* GUARANTEED WHITE TEXT FOR ALL DARK GREEN BANNERS IN MITRA & PROGRAM */
.legalitas-csr-banner,
.legalitas-csr-banner *,
.legalitas-csr-text,
.legalitas-csr-text p,
.legalitas-csr-text h4 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.legalitas-csr-text p {
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
.legalitas-csr-badge {
  color: #fde047 !important;
  -webkit-text-fill-color: #fde047 !important;
}


/* ==========================================================================
   MAS ANWAR MASTER POLISH: ZERO-DEFECT HIGH CONTRAST & OVERLAY ENGINE
   - Ciracas Stat Items 100% Dark Emerald on White Card
   - Supervision Grid Items 100% Readable Slate on White Card
   - Luxury Dark Green Banners with Subtle Photo Overlay
   - Elegant 880px Article Reader Layout
   - Mobile Footer Spacious & Uncrowded
   ========================================================================== */

/* 1. CIRACAS STATS & SUPERVISION (SS 1, SS 2 & SS 3 FIX) */
.c-stat-item,
.ciracas-stats-mini .c-stat-item {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 14px !important;
  padding: 16px 12px !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

.c-stat-item strong,
.ciracas-stats-mini .c-stat-item strong,
.ciracas-stats-mini strong {
  display: block !important;
  font-size: 1.65rem !important;
  font-family: var(--font-heading) !important;
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}

.c-stat-item span,
.ciracas-stats-mini .c-stat-item span,
.ciracas-stats-mini span {
  display: block !important;
  font-size: 0.8rem !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}

.supervision-item {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px 20px !important;
  text-align: center !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
}

.supervision-item h4 {
  font-size: 1.1rem !important;
  color: #064e3b !important;
  -webkit-text-fill-color: #064e3b !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.supervision-item p {
  font-size: 0.88rem !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  text-shadow: none !important;
}

/* 2. ELEGANT 880PX ARTICLE READER CONTAINER (SS 3 FIX) */
.reader-container {
  max-width: 880px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 48px 44px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e2e8f0 !important;
}

@media (max-width: 768px) {
  .reader-container {
    padding: 24px 18px !important;
    border-radius: 14px !important;
  }
}

/* 3. LUXURY DARK GREEN BANNERS WITH SUBTLE PHOTO OVERLAY (SS 4 & SS 5 FIX) */
.legalitas-csr-banner,
.subpage-cta-section {
  background: linear-gradient(135deg, rgba(6, 44, 28, 0.93) 0%, rgba(12, 68, 44, 0.90) 50%, rgba(6, 36, 22, 0.95) 100%),
              url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/sarapan_pagi.jpg') center/cover no-repeat !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
}

.legalitas-csr-text h4,
.subpage-cta-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

.legalitas-csr-text p,
.subpage-cta-desc {
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important;
  line-height: 1.65 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.reader-program-info,
.reader-program-info *,
.reader-program-info h4,
.reader-program-info p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.reader-program-info p {
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important;
}

/* 4. MOBILE FOOTER AIRY & UNCLUTTERED (SS 1 DI HP FIX) */
@media (max-width: 768px) {
  .site-footer {
    padding: 40px 16px 30px 16px !important;
  }
  .footer-col {
    margin-bottom: 28px !important;
  }
  .footer-col:last-child {
    margin-bottom: 0 !important;
  }
  .footer-links li {
    margin-bottom: 6px !important;
  }
  .footer-links li a {
    padding: 8px 0 !important;
    display: inline-block !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
}

/* ==========================================================================
   MASTER FINAL POLISH: MOBILE DRAWER, OVERLAY WATERMARK, HIGH-CONTRAST (MAS ANWAR)
   ========================================================================== */
@media (max-width: 1024px) {
  .main-header #navMenu.open,
  .main-header #navMenu.active,
  .nav-menu.open,
  .nav-menu.active {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 60px) !important;
    max-height: calc(100dvh - 60px) !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    padding: 16px 18px 40px 18px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2) !important;
    z-index: 999999 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .main-header #navMenu.open .nav-list,
  .main-header #navMenu.active .nav-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 4px !important;
  }
  .main-header #navMenu.open .mobile-drawer-cta-wrap,
  .main-header #navMenu.active .mobile-drawer-cta-wrap,
  .nav-menu.open .mobile-drawer-cta-wrap,
  .nav-menu.active .mobile-drawer-cta-wrap {
    display: block !important;
    padding: 12px 0 6px 0 !important;
    border-top: 1px dashed #e2e8f0 !important;
    margin-top: 10px !important;
  }
  .main-header #navMenu.open .drawer-donate-btn-primary,
  .main-header #navMenu.active .drawer-donate-btn-primary,
  .nav-menu.open .drawer-donate-btn-primary,
  .nav-menu.active .drawer-donate-btn-primary {
    display: flex !important;
  }
  .main-header #navMenu.open .nav-drawer-footer,
  .main-header #navMenu.active .nav-drawer-footer {
    display: block !important;
    height: auto !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px dashed #e2e8f0 !important;
    overflow: visible !important;
  }
}

/* High Contrast Guarantee for Article Reader Modal & Connected Program Box */
.reader-program-box {
  background: linear-gradient(135deg, rgba(6, 44, 28, 0.95) 0%, rgba(12, 68, 44, 0.92) 100%), url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/kegiatan_fksi_forum.jpg') center/cover no-repeat !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
  border-radius: 16px !important;
  padding: 24px !important;
}
.reader-program-box h4 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.reader-program-box p,
.reader-program-info p {
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* ==========================================================================
   MASTER FIX SS 1 - SS 5 & LANGUAGE SWITCHER (HARGA MATI MAS ANWAR)
   ========================================================================== */

/* 1. SS 1 -> SS 2: CIRACAS 2-KOLOM SEJAJAR DI DESKTOP */
@media (min-width: 769px) {
  .ciracas-grid,
  #percontohan-ciracas .ciracas-grid,
  #flagship-ciracas .ciracas-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    align-items: center !important;
  }
  .ciracas-media,
  #percontohan-ciracas .ciracas-media {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    order: unset !important;
  }
}

/* 2. SS 3: TENTANG HERO VERTICAL & HORIZONTAL PERFECT CENTERING */
.page-hero,
.subpage-hero,
#tentang-hero {
  min-height: 380px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 65px 20px 65px 20px !important;
}

.page-hero .container,
.subpage-hero .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

/* 3. SS 4: PURE WHITE TEXT FOR CIRACAS DARK STAT CARDS ONLY */
.ciracas-grid [style*="rgba(255,255,255,0.08)"] {
  color: #ffffff !important;
}

.ciracas-grid [style*="rgba(255,255,255,0.08)"] h4 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.ciracas-grid [style*="rgba(255,255,255,0.08)"] p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 0.96 !important;
}

/* HIGH-CONTRAST READABLE CARDS FOR LEGALITAS & MITRA (ARAHAN HARGA MATI MAS ANWAR) */
.legalitas-exec-card,
.legalitas-card {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
}

.legalitas-exec-card h4,
.legalitas-card h4,
.legal-card-top h4 {
  color: #103020 !important;
  -webkit-text-fill-color: #103020 !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  line-height: 1.35 !important;
}

.legalitas-exec-card p,
.legalitas-card p,
.legal-card-top p {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 0.94rem !important;
  line-height: 1.65 !important;
  opacity: 1 !important;
}

.legalitas-card-icon {
  background: #f0fdf4 !important;
  color: #047857 !important;
  border: 1px solid #bbf7d0 !important;
}

.legal-trust-pill {
  background: #f0fdf4 !important;
  color: #047857 !important;
  border: 1px solid #bbf7d0 !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.legal-loc-box {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* 4. SS 5: CTA HEADINGS GUARANTEED BRIGHT WHITE (ANTI-BLACK OVERRIDE) */
.cta-title,
.subpage-cta-title,
.cta-final-section h2,
.cta-final-section .cta-title,
.subpage-cta-section h2,
.subpage-cta-section .cta-title,
.subpage-cta-section .subpage-cta-title,
#cta h2,
#cta .section-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.cta-title .highlight-gold,
.subpage-cta-title .highlight-gold,
.cta-final-section h2 .highlight-gold,
.subpage-cta-section h2 .highlight-gold {
  color: #fde047 !important;
  -webkit-text-fill-color: #fde047 !important;
}

/* 5. SS 1 -> SS 2: CIRACAS 2-COLUMN SIDE-BY-SIDE GRID */
.ciracas-highlight-box .ciracas-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 36px !important;
  align-items: center !important;
}

@media (max-width: 900px) {
  .ciracas-highlight-box .ciracas-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

.ciracas-highlight-box .ciracas-media {
  display: block !important;
  width: 100% !important;
}

.ciracas-highlight-box .ciracas-media img {
  display: block !important;
  width: 100% !important;
  height: 380px !important;
  max-height: 380px !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

/* 6. SS 1 -> SS 2: CIRACAS STAT CARDS (3 WHITE BOXES WITH CRISP HIGH CONTRAST) */
.ciracas-highlight-box .ciracas-stats-mini {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin-top: 24px !important;
}

.ciracas-highlight-box .c-stat-item,
.ciracas-highlight-box .stat-card,
.ciracas-highlight-box .ciracas-stat-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 14px !important;
  padding: 16px 12px !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

.ciracas-highlight-box .c-stat-item strong,
.ciracas-highlight-box .c-stat-item span.stat-number,
.ciracas-highlight-box .stat-card strong,
.ciracas-highlight-box .ciracas-stat-card strong {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  display: block !important;
  line-height: 1.2 !important;
}

.ciracas-highlight-box .c-stat-item span,
.ciracas-highlight-box .c-stat-item label,
.ciracas-highlight-box .c-stat-item p,
.ciracas-highlight-box .stat-card span,
.ciracas-highlight-box .stat-card p,
.ciracas-highlight-box .ciracas-stat-card span,
.ciracas-highlight-box .ciracas-stat-card p {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  display: block !important;
  margin-top: 4px !important;
  line-height: 1.35 !important;
}

/* 7. CIRACAS BOTTOM STUDI KASUS WHITE CARD (ANTI-WHITE-TEXT OVERRIDE) */
.ciracas-highlight-box div[style*="background: #ffffff"],
.ciracas-highlight-box div[style*="background:#ffffff"],
.ciracas-highlight-box div[style*="background: rgb(255, 255, 255)"],
.ciracas-highlight-box .ciracas-case-study,
.ciracas-highlight-box .ciracas-footer-box {
  background: #ffffff !important;
  border-radius: 14px !important;
  color: #334155 !important;
}

.ciracas-highlight-box div[style*="background: #ffffff"] h4,
.ciracas-highlight-box div[style*="background:#ffffff"] h4,
.ciracas-highlight-box div[style*="background: rgb(255, 255, 255)"] h4 {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  font-weight: 800 !important;
}

.ciracas-highlight-box div[style*="background: #ffffff"] p,
.ciracas-highlight-box div[style*="background:#ffffff"] p,
.ciracas-highlight-box div[style*="background: rgb(255, 255, 255)"] p {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  opacity: 1 !important;
}

.ciracas-highlight-box div[style*="background: #ffffff"] strong,
.ciracas-highlight-box div[style*="background:#ffffff"] strong,
.ciracas-highlight-box div[style*="background: rgb(255, 255, 255)"] strong {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 700 !important;
}


/* ==========================================================================
   MASTER HARMONY & REFINEMENT PATCH (HARGA MATI MAS ANWAR)
   ========================================================================== */

/* 1. SS 1: KALKULATOR ZAKAT STICKY SIDEBAR (ZERO VOID ON DESKTOP) */
@media (min-width: 901px) {
  .calc-page-grid {
    align-items: start !important;
  }
  .calc-page-grid > div:last-child,
  .calc-sidebar-sticky {
    position: sticky !important;
    top: 90px !important;
  }
}

/* 2. SS 2: PROGRAM DOKUMENTASI TITLE - 1 BARIS RAPI DI DESKTOP */
@media (min-width: 800px) {
  .subpage-zebra-soft .section-header {
    max-width: 1050px !important;
  }
  .program-doc-title {
    white-space: nowrap !important;
    font-size: clamp(1.35rem, 2.2vw, 2.1rem) !important;
  }
}
@media (max-width: 799px) {
  .program-doc-title {
    white-space: normal !important;
  }
}

/* 3. SS 3: KOTAK HIJAU GOTONG ROYONG WARGA CIRACAS 100% CENTERED DI SEMUA ARTIKEL */
.reader-program-cta-card,
.article-reader-container .reader-program-cta-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 36px 28px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.reader-program-cta-card .badge,
.reader-program-cta-card h3,
.reader-program-cta-card p,
.reader-program-cta-card div {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.reader-program-cta-card h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.reader-program-cta-card p {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  max-width: 620px !important;
}

/* 4. SS 4 & SS 5: CTA HEADINGS 100% WHITE & HIGH CONTRAST (ANTI-BLACK OVERRIDE) */
.cta-title,
.subpage-cta-title,
.cta-final-section h2,
.cta-final-section .cta-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.cta-title span.highlight-gold,
.subpage-cta-title span.highlight-gold,
.cta-final-section h2 span.highlight-gold {
  color: #fde047 !important;
  -webkit-text-fill-color: #fde047 !important;
}

/* 5. CIRACAS 2-COLUMN SIDE-BY-SIDE ON DESKTOP & TABLET */
@media (min-width: 769px) {
  .ciracas-highlight-box .ciracas-grid,
  .ciracas-grid,
  #percontohan-ciracas .ciracas-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
    align-items: center !important;
  }
}


/* ==========================================================================
   WARGA KEGIATAN & ARTIKEL READER EXPANSION (1040PX EDITORIAL HARMONY)
   Berlaku untuk SEMUA artikel / single post (Harga Mati Mas Anwar)
   ========================================================================== */
.reader-top-control-bar,
.reader-top-container,
body.single-post .reader-top-control-bar {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
}

.reader-container,
.single-reader-card,
.article-reader-container,
body.single-post .reader-container,
body.single-post .single-reader-card {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  background: #ffffff !important;
  border-radius: 22px !important;
  padding: 50px 54px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 1100px) {
  .reader-top-control-bar,
  .reader-top-container,
  .reader-container,
  .single-reader-card {
    max-width: 95% !important;
    padding: 38px 30px !important;
  }
}

@media (max-width: 768px) {
  .reader-top-control-bar,
  .reader-top-container,
  .reader-container,
  .single-reader-card {
    max-width: 100% !important;
    padding: 26px 18px !important;
    border-radius: 16px !important;
  }
}

.reader-headline-title,
body.single-post h1.reader-headline-title {
  font-size: clamp(1.85rem, 2.7vw, 2.45rem) !important;
  font-weight: 800 !important;
  line-height: 1.32 !important;
  color: #0f172a !important;
  margin-bottom: 22px !important;
}

.reader-featured-img-wrap,
body.single-post .reader-featured-img-wrap {
  border-radius: 16px !important;
  overflow: hidden !important;
  max-height: 500px !important;
}

.reader-editorial-body,
.entry-content,
body.single-post .reader-editorial-body {
  font-size: 1.08rem !important;
  line-height: 1.85 !important;
  color: #334155 !important;
}

.reader-editorial-body p,
.entry-content p,
body.single-post .reader-editorial-body p {
  margin-bottom: 22px !important;
}

.reader-related-section,
body.single-post .reader-related-section {
  margin-top: 55px !important;
  padding-top: 35px !important;
  border-top: 1.5px solid #e2e8f0 !important;
}

@media (min-width: 820px) {
  .reader-related-section div[style*="display: grid"],
  body.single-post .reader-related-section div[style*="display: grid"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px !important;
  }
}


/* ==========================================================================
   USER REFINEMENTS (SS 1: CENTERED KEMITRAAN CSR & SS 2: 1-ROW DONATION TABS)
   ========================================================================== */

/* SS 1: KEMITRAAN CSR & AUDIT INSTITUSI 100% CENTERED */
.legalitas-csr-banner,
.page-template-page-mitra .legalitas-csr-banner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 46px 36px !important;
  gap: 20px !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.legalitas-csr-banner .legalitas-csr-text,
.legalitas-csr-banner .legalitas-csr-badge,
.legalitas-csr-banner h4,
.legalitas-csr-banner p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.legalitas-csr-banner .legalitas-csr-badge {
  display: inline-flex !important;
  justify-content: center !important;
}

.legalitas-csr-banner > div:last-child {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* SS 2: DONASI TABS 1 BARIS SEJAJAR (CERITA, KABAR, DOA ORANG BAIK) */
.kb-inner-tabs,
#kbInnerTabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.kb-tab-btn {
  white-space: nowrap !important;
  padding: 9px 6px !important;
  font-size: 0.82rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .kb-inner-tabs,
  #kbInnerTabs {
    display: flex !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .kb-inner-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .kb-tab-btn {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
  }
}


/* ==========================================================================
   FINAL COMPREHENSIVE POLISH (HARGA MATI MAS ANWAR - 31 OKTOBER 2026)
   ========================================================================== */

/* 1. CIRACAS 2-COLUMN SIDE-BY-SIDE GUARANTEE (EVEN IF NESTED) */
@media (min-width: 769px) {
  .ciracas-highlight-box .ciracas-info:has(.ciracas-media),
  .ciracas-grid > .ciracas-info:has(.ciracas-media) {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 36px !important;
    align-items: center !important;
    width: 100% !important;
  }
  .ciracas-highlight-box .ciracas-info:has(.ciracas-media) > .badge,
  .ciracas-highlight-box .ciracas-info:has(.ciracas-media) > h3,
  .ciracas-highlight-box .ciracas-info:has(.ciracas-media) > p,
  .ciracas-highlight-box .ciracas-info:has(.ciracas-media) > .ciracas-stats-mini {
    grid-column: 1 / 2 !important;
  }
  .ciracas-highlight-box .ciracas-info:has(.ciracas-media) > .ciracas-media {
    grid-column: 2 / 3 !important;
    grid-row: 1 / span 5 !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .ciracas-highlight-box .ciracas-info:has(.ciracas-media) > .ciracas-media img {
    width: 100% !important;
    height: auto !important;
    max-height: 380px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25) !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
  }
}

/* 2. DONASI TABS 1-ROW GUARANTEE */
.kb-inner-tabs,
#kbInnerTabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 20px !important;
}

.kb-tab-btn {
  white-space: nowrap !important;
  padding: 10px 8px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
}

/* 3. KALKULATOR ZAKAT STICKY SIDEBAR & QRIS PROPORTION */
@media (min-width: 900px) {
  .calc-page-grid {
    display: grid !important;
    grid-template-columns: 1.25fr 0.75fr !important;
    gap: 32px !important;
    align-items: start !important;
  }
  .calc-page-grid > div:last-child {
    position: sticky !important;
    top: 90px !important;
    align-self: start !important;
  }
}

.kb-qris-card-frame {
  max-width: 300px !important;
  margin: 0 auto 14px auto !important;
  padding: 18px 16px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important;
}

.kb-qris-card-frame img,
.kb-qris-img {
  max-width: 240px !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 10px auto !important;
  border-radius: 8px !important;
}

/* 4. PROGRAM PAGE TITLE 1-LINE */
.section-doc-title,
.doc-title {
  white-space: nowrap !important;
  font-size: clamp(1.35rem, 2.2vw, 2.1rem) !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

/* 5. MITRA CSR BANNER PERFECT CENTER */
.mitra-csr-box,
.csr-callout-box {
  text-align: center !important;
}
.mitra-csr-box .badge,
.csr-callout-box .badge {
  margin: 0 auto 12px auto !important;
}
.mitra-csr-box h4,
.csr-callout-box h4 {
  text-align: center !important;
  margin: 0 auto 12px auto !important;
  max-width: 800px !important;
}
.mitra-csr-box p,
.csr-callout-box p {
  text-align: center !important;
  margin: 0 auto 20px auto !important;
  max-width: 720px !important;
}
.mitra-csr-box .btn,
.csr-callout-box .btn {
  margin: 0 auto !important;
}

/* 6. SINGLE ARTICLE WIDENED CANVAS (1040px) */
.single-post-main,
.article-reader-container,
.single-article-content {
  max-width: 1040px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   KITABISA REGISTRATION FORM FOR MASTERCLASS (NUANSA KAMPUNG SEDEKAH)
   ========================================================================== */
.kb-masterclass-card {
  box-shadow: 0 16px 45px rgba(4, 120, 87, 0.08) !important;
  transition: all 0.3s ease !important;
}

.kb-session-card {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}

.kb-session-card:hover {
  border-color: #047857 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(4, 120, 87, 0.08) !important;
}

.kb-session-card.active {
  border: 2px solid #047857 !important;
  background: #f0fdf4 !important;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12) !important;
}

@media (max-width: 680px) {
  .kb-masterclass-card {
    padding: 26px 18px !important;
    border-radius: 16px !important;
  }
  .mc-session-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   MASTER POLISH: TOP BAR FLUSH RIGHT, MASTERCLASS CONTRAST, DRAWER CLEAN,
   CIRACAS MEDIA RESPONSIVE, COMPACT INDONESIA MAP & SDGS RATA KIRI
   ========================================================================== */

/* 1. TOP BAR & HEADER FLUSH RIGHT ALIGNMENT */
.top-bar-container {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.top-bar-right {
  margin-right: 0 !important;
  padding-right: 0 !important;
}
.top-bar-lang {
  margin-right: 0 !important;
}
.main-header .header-container {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.header-actions {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* 2. MASTERCLASS KANG ARY: PORTRAIT PHOTO & HIGH-CONTRAST STAT CARDS */
.mc-speaker-img {
  width: 100% !important;
  max-width: 310px !important;
  height: 410px !important;
  object-fit: cover !important;
  object-position: top center !important;
}
.mc-s-stat {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 14px !important;
  padding: 14px 10px !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
}
.mc-s-stat strong {
  display: block !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  line-height: 1.2 !important;
}
.mc-s-stat span {
  display: block !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  margin-top: 5px !important;
  line-height: 1.35 !important;
}

/* 3. MOBILE DRAWER COMPACT & CLEAN (NO EXCESS VOID, NO REDUNDANT TEXT) */
@media (max-width: 768px) {
  .nav-menu.open,
  #navMenu.open,
  .main-header #navMenu.open,
  .nav-menu.active,
  #navMenu.active,
  .main-header #navMenu.active {
    height: auto !important;
    bottom: auto !important;
    max-height: calc(100dvh - 75px) !important;
    border-radius: 0 0 24px 24px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22) !important;
    padding-bottom: 24px !important;
  }
  .drawer-loc-text {
    display: none !important;
  }
}

/* 4. CIRACAS MEDIA: RESPONSIVE FIT (NO WEIRD ZOOM / CROPPING) */
.ciracas-photo-frame {
  max-height: none !important;
  width: 100% !important;
}
.ciracas-photo-frame img {
  width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  object-fit: cover !important;
  display: block !important;
}
@media (max-width: 768px) {
  .ciracas-media {
    margin-top: 20px !important;
    width: 100% !important;
  }
  .ciracas-photo-frame img {
    max-height: 250px !important;
    object-fit: contain !important;
    background: #022c22 !important;
  }
}

/* 5. PETA SEBARAN NASIONAL: COMPACT & PROPORTIONAL ON MOBILE */
@media (max-width: 768px) {
  .real-map-stage {
    height: 220px !important;
    min-height: 220px !important;
    border-radius: 14px !important;
  }
}

/* 6. 4 PILAR CSR / SDGS: RATA KIRI ELEGAN & PROFESIONAL */
.csr-pillar-card {
  text-align: left !important;
  align-items: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.csr-pillar-icon {
  margin: 0 0 16px 0 !important;
}
.csr-pillar-badge {
  align-self: flex-start !important;
  margin: 0 0 12px 0 !important;
  display: inline-block !important;
}
.csr-pillar-title {
  text-align: left !important;
  margin: 0 0 10px 0 !important;
}
.csr-pillar-desc {
  text-align: left !important;
  margin: 0 0 18px 0 !important;
}
.csr-pillar-points,
.csr-pillar-card ul,
.csr-features-list {
  text-align: left !important;
  width: 100% !important;
  padding-left: 0 !important;
  margin-top: auto !important;
}
.csr-pillar-point {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* ==========================================================================
   MAS ANWAR DIRECTIVE: 3 ELEGAN POLISH RULES (SS 1, SS 2, SS 3)
   1. SS 1: FORM PENDAFTARAN & RELAWAN RINGKAS (ZERO EXCESS WHITESPACE)
   2. SS 2: FOOTER MOBILE 2-KOLOM (NAVIGASI UTAMA KIRI & PROGRAM PRIORITAS KANAN)
   3. SS 3: SEKRETARIAT PUSAT ELEGAN, KARTU BSI RESMI & ANTI-OVERLAP TOMBOL WA
   ========================================================================== */

/* 1. SS 1: FORM PENDAFTARAN & RELAWAN RINGKAS */
#relawan,
section.section.bg-sage-soft {
  padding: 55px 0 !important;
}
.volunteer-card-wrap {
  align-items: center !important;
}
.volunteer-form-col {
  align-self: center !important;
  height: fit-content !important;
  padding: 24px 22px 20px 22px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
  border-radius: 18px !important;
}
.volunteer-form-col .form-group {
  margin-bottom: 12px !important;
}
.volunteer-form-col .form-control {
  padding: 9px 12px !important;
  font-size: 0.88rem !important;
}
.volunteer-form-col .btn-primary {
  padding: 11px 18px !important;
  margin-top: 10px !important;
}

@media (max-width: 768px) {
  #relawan,
  section.section.bg-sage-soft {
    padding: 34px 0 38px 0 !important;
  }
  .volunteer-card-wrap {
    padding: 22px 16px !important;
    gap: 22px !important;
  }
}

/* 2. SS 2: FOOTER MOBILE 2-KOLOM (NAVIGASI UTAMA DI KIRI & PROGRAM PRIORITAS DI KANAN) */
@media (max-width: 768px) {
  .main-footer .footer-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 16px !important;
    padding: 0 16px !important;
  }
  .main-footer .footer-col.footer-about {
    grid-column: 1 / -1 !important;
    margin-bottom: 4px !important;
  }
  .main-footer .footer-col:nth-child(2) {
    grid-column: 1 / 2 !important;
  }
  .main-footer .footer-col:nth-child(3) {
    grid-column: 2 / 3 !important;
  }
  .main-footer .footer-col.footer-contact-col {
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
  }
  .main-footer .footer-links {
    margin: 0 !important;
    padding: 0 !important;
  }
  .main-footer .footer-links li {
    margin-bottom: 7px !important;
    line-height: 1.35 !important;
  }
  .main-footer .footer-links li a {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    color: #e2e8f0 !important;
  }
}

/* 3. SS 3: SEKRETARIAT PUSAT ELEGAN, KARTU BSI RESMI & ANTI-OVERLAP TOMBOL WA */
.f-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.f-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.f-icon-pill {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.f-text-addr {
  font-size: 0.86rem;
  color: #e2e8f0;
  line-height: 1.5;
}
.f-link-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  transition: color 0.2s ease;
}
.f-link-val:hover {
  color: #6ee7b7;
}
.f-hotline-tag {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.2);
  color: #6ee7b7;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

/* KARTU RESMI REKENING GIRO BSI ELEGAN */
.f-rek-card {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.85) 0%, rgba(4, 120, 87, 0.65) 100%);
  border: 1.5px solid rgba(110, 231, 183, 0.4);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
}
.f-rek-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.f-rek-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.f-rek-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: #fef08a;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.f-rek-pill {
  font-size: 0.68rem;
  font-weight: 800;
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.2);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(110, 231, 183, 0.3);
}
.f-rek-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.f-rek-number {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.08em;
  font-family: monospace;
}
.f-copy-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.f-copy-btn:hover {
  background: #ffffff;
  color: #047857;
}
.f-rek-owner {
  font-size: 0.76rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.f-rek-owner strong {
  color: #ffffff;
}

/* ANTI-OVERLAP TOMBOL WHATSAPP PADA COPYRIGHT / SLOGAN DI MOBILE */
@media (max-width: 768px) {
  .main-footer .footer-bottom {
    padding-bottom: 85px !important;
  }
  .main-footer .footer-bottom-content {
    text-align: center !important;
  }
  .main-footer .designer-credit {
    margin-top: 6px !important;
    font-size: 0.8rem !important;
    color: #e2e8f0 !important;
    line-height: 1.5 !important;
  }
}


/* ==========================================================================
   ANTI-ORPHAN & BALANCED TYPOGRAPHY PROTOCOL (ARAHAN HARGA MATI MAS ANWAR)
   Menjamin judul & banner tidak nanggung / menggantung kata pendek sendirian
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.section-title,
.subpage-title,
.hero-title,
.legalitas-csr-headline,
.subpage-cta-title {
  text-wrap: balance;
}

@media (min-width: 992px) {
  .legalitas-csr-headline {
    white-space: nowrap !important;
  }
}


/* ==========================================================================
   FOOTER BANK CARD EXECUTIVE PERFECTION (ARAHAN HARGA MATI MAS ANWAR)
   BSI tidak nanggung, 0% potongan dihapus, a.n. YKSI 1 baris utuh elegan
   ========================================================================== */
@media (min-width: 992px) {
  .footer-container {
    grid-template-columns: 1.35fr 1fr 1fr 1.55fr !important;
    gap: 36px !important;
  }
}

.f-rek-card {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.92) 0%, rgba(4, 120, 87, 0.78) 100%) !important;
  border: 1.5px solid rgba(110, 231, 183, 0.45) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
}

.f-rek-head {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.f-rek-title {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: #fef08a !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.f-rek-body {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}

.f-rek-number {
  font-size: 1.38rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.08em !important;
  font-family: monospace !important;
  white-space: nowrap !important;
}

.f-copy-btn {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  padding: 5px 14px !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.f-copy-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: #ffffff !important;
}

.f-rek-owner {
  font-size: 0.74rem !important;
  color: #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.f-rek-owner span {
  white-space: nowrap !important;
}

.f-rek-owner strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

@media (max-width: 480px) {
  .f-rek-owner {
    font-size: 0.70rem !important;
  }
}


/* ==========================================================================
   E-LEARNING MASTERCLASS FORMAT CARDS (ONLINE vs OFFLINE - ARAHAN MAS ANWAR)
   ========================================================================== */
.mc-track-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mc-track-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12) !important;
}
#ks-mc-batch-select:focus {
  border-color: #047857 !important;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.15) !important;
  background: #ffffff !important;
}


/* ==========================================================================
   TOP BAR BILINGUAL SWITCHER ALIGNED DIRECTLY ABOVE TITIP SEDEKAH
   (ARAHAN HARGA MATI MAS ANWAR - PRESISI PROPORSI & BERJARAK LEGA)
   ========================================================================== */
.top-bar-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-left: auto !important;
}
.top-bar-hotline {
  margin-right: 6px !important;
  transition: all 0.2s ease !important;
}
.top-bar-social {
  margin-right: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.top-bar-lang {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  order: 99 !important;
}
.top-bar-lang-btn {
  background: transparent !important;
  border: none !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  line-height: 1 !important;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
}
.top-bar-lang-btn .flag-icon {
  font-size: 0.85rem !important;
  line-height: 1 !important;
}
.top-bar-lang-btn .lang-text {
  letter-spacing: 0.02em !important;
}
.top-bar-lang-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.18) !important;
}
.top-bar-lang-btn.active {
  background: #22c55e !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.45) !important;
}
.top-bar-lang-sep {
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  user-select: none !important;
  padding: 0 1px !important;
}


/* ==========================================================================
   HILANGKAN TOMBOL SALIN & KIRIM BUKTI DI HERO TRUST BADGE (ARAHAN MAS ANWAR)
   ========================================================================== */
.hero-trust .ks-copy-btn,
.hero-trust .ks-wa-btn,
.hero-trust button.ks-copy-btn,
.hero-trust a.ks-wa-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.hero-trust .trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  font-size: 0.88rem !important;
  color: #ffffff !important;
}

/* ==========================================================================
   FIRST IMPRESSION "APA ITU KAMPUNG SEDEKAH" (DESAIN BENTO KREATIF & HUMANIS)
   ========================================================================== */
.first-impression-section {
  background: linear-gradient(180deg, #f8fafc 0%, #f0fdf4 35%, #ffffff 100%) !important;
  padding: 85px 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  position: relative !important;
}

.fi-header-badge {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1.5px solid #a7f3d0 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.08) !important;
}

.highlight-gold-gradient {
  background: linear-gradient(135deg, #047857 0%, #059669 40%, #d97706 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
}

/* Bento Grid Beranda - 2 Kolom Luas & Elegan (Arahan Mas Anwar) */
.fi-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px !important;
  margin-bottom: 56px !important;
}
@media (max-width: 820px) {
  .fi-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

/* Base Bento Card */
.fi-card {
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 32px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
}
.fi-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
}
.fi-card-srikandi::before { background: linear-gradient(90deg, #10b981, #059669) !important; }
.fi-card-rentenir::before { background: linear-gradient(90deg, #f43f5e, #e11d48) !important; }
.fi-card-warung::before { background: linear-gradient(90deg, #f59e0b, #d97706) !important; }
.fi-card-ciracas::before { background: linear-gradient(90deg, #3b82f6, #2563eb) !important; }

.fi-card-srikandi { border: 1.5px solid #d1fae5 !important; }
.fi-card-rentenir { border: 1.5px solid #ffe4e6 !important; }
.fi-card-warung { border: 1.5px solid #fef3c7 !important; }
.fi-card-ciracas { border: 1.5px solid #dbeafe !important; }

.fi-card:hover {
  transform: translateY(-7px) !important;
}
.fi-card-srikandi:hover {
  border-color: #34d399 !important;
  box-shadow: 0 20px 40px -10px rgba(5, 150, 105, 0.18) !important;
}
.fi-card-rentenir:hover {
  border-color: #fb7185 !important;
  box-shadow: 0 20px 40px -10px rgba(225, 29, 72, 0.18) !important;
}
.fi-card-warung:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 20px 40px -10px rgba(217, 119, 6, 0.18) !important;
}
.fi-card-ciracas:hover {
  border-color: #60a5fa !important;
  box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.18) !important;
}

/* Card Header Top */
.fi-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  gap: 12px !important;
}

/* Distinct Icon Wraps */
.fi-icon-wrap {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
  margin-bottom: 0 !important;
}
.fi-card:hover .fi-icon-wrap {
  transform: scale(1.08) rotate(3deg) !important;
}
.fi-icon-emerald {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
  color: #047857 !important;
  box-shadow: 0 4px 12px rgba(4, 120, 87, 0.12) !important;
}
.fi-icon-rose {
  background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%) !important;
  color: #be123c !important;
  box-shadow: 0 4px 12px rgba(190, 18, 60, 0.12) !important;
}
.fi-icon-amber {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #b45309 !important;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.12) !important;
}
.fi-icon-blue {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  color: #1d4ed8 !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.12) !important;
}

/* Distinct Pill Tags */
.fi-pill-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
.tag-emerald {
  background: #ecfdf5 !important;
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}
.tag-rose {
  background: #fff1f2 !important;
  color: #be123c !important;
  -webkit-text-fill-color: #be123c !important;
  border: 1px solid #fecdd3 !important;
}
.tag-amber {
  background: #fffbeb !important;
  color: #b45309 !important;
  -webkit-text-fill-color: #b45309 !important;
  border: 1px solid #fde68a !important;
}
.tag-blue {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}

/* Card Typography */
.fi-card-title {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: -0.01em !important;
}
.fi-card-desc {
  font-size: 1rem !important;
  line-height: 1.72 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  margin: 0 0 20px 0 !important;
  flex-grow: 1 !important;
}

/* Card Footer & Micro Metric */
.fi-card-footer {
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px dashed #e2e8f0 !important;
}
.fi-stat-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.fi-card-srikandi .fi-stat-badge {
  background: #f0fdf4 !important;
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}
.fi-card-rentenir .fi-stat-badge {
  background: #fff1f2 !important;
  color: #be123c !important;
  -webkit-text-fill-color: #be123c !important;
  border: 1px solid #fecdd3 !important;
}
.fi-card-warung .fi-stat-badge {
  background: #fffbeb !important;
  color: #b45309 !important;
  -webkit-text-fill-color: #b45309 !important;
  border: 1px solid #fde68a !important;
}
.fi-card-ciracas .fi-stat-badge {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}

/* ==========================================================================
   COMPARISON BOX: POLA KEMANDIRIAN VS POLA BANSOS
   ========================================================================== */
.fi-comparison-box {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 24px !important;
  padding: 42px 36px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}
@media (max-width: 768px) {
  .fi-comparison-box {
    padding: 24px 18px !important;
  }
}

.fi-compare-card {
  border-radius: 18px !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.3s ease !important;
}
.compare-passive {
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
}
.compare-passive:hover {
  border-color: #94a3b8 !important;
}
.compare-active {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%) !important;
  border: 1.5px solid #86efac !important;
  box-shadow: 0 8px 24px rgba(4, 120, 87, 0.08) !important;
}
.compare-active:hover {
  border-color: #22c55e !important;
  box-shadow: 0 14px 32px rgba(4, 120, 87, 0.14) !important;
}

.compare-icon-circle {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  flex-shrink: 0 !important;
}
.icon-cross {
  background: #fee2e2 !important;
  color: #ef4444 !important;
}
.icon-check {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

.compare-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.compare-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: #334155 !important;
}
.list-bullet-cross {
  color: #f43f5e !important;
  font-size: 1rem !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}
.list-bullet-check {
  color: #10b981 !important;
  font-size: 1rem !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}
.list-passive strong {
  color: #334155 !important;
}
.list-active strong {
  color: #0f172a !important;
}

/* ==========================================================================
   HIGH-CONTRAST TEXT OVERRIDE FOR FIRST IMPRESSION (SCOPED - ZERO CONFLICT)
   ========================================================================== */
#apa-itu-ks .section-subtitle,
#apa-itu-ks p.section-subtitle {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#apa-itu-ks h2.section-title {
  color: #0f172a !important;
}

/* ==========================================================================
   HIGH-CONTRAST TEXT OVERRIDE FOR MASTERCLASS SECTIONS (ZERO WHITE-ON-WHITE)
   ========================================================================== */
#format-belajar p,
#format-belajar .section-desc,
#format-belajar li,
#modul-elearning p,
#modul-elearning .section-desc,
#kuis-kesiapan p,
#kuis-kesiapan .section-desc,
.quiz-question-block span,
#ksQuizProgress span {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#format-belajar h2,
#modul-elearning h2,
#modul-elearning h3,
#kuis-kesiapan h2,
#kuis-kesiapan h4 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

#ks-quiz-result-box {
  background: #f0fdf4 !important;
}

#ks-quiz-result-box h3,
#ksQuizTitle {
  color: #064e3b !important;
  -webkit-text-fill-color: #064e3b !important;
  font-weight: 800 !important;
}

#ks-quiz-result-box p,
#ksQuizDesc {
  color: #14532d !important;
  -webkit-text-fill-color: #14532d !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   VOLUNTEER FORM HIGH-CONTRAST & ZERO GHOST WHITESPACE (ARAHAN MAS ANWAR)
   ========================================================================== */
.volunteer-form-col p,
.volunteer-form-col p.small,
.volunteer-form-col .text-muted,
.volunteer-form-col .small {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 0.86rem !important;
  line-height: 1.45 !important;
  margin: 4px 0 16px 0 !important;
}

.volunteer-form-col h4 {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.volunteer-form-col .badge {
  background: #ecfdf5 !important;
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  padding: 3px 8px !important;
  border: 1px solid #a7f3d0 !important;
}

.volunteer-form-col label {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  margin-bottom: 5px !important;
}

.volunteer-form-col .form-control {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 0.88rem !important;
  padding: 10px 12px !important;
  transition: all 0.2s ease !important;
}

.volunteer-form-col .form-control:focus {
  border-color: #047857 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12) !important;
}

/* --- CTA FINAL ANTI-ORPHAN & BALANCED TYPOGRAPHY --- */
.cta-desc,
.subpage-cta-desc,
.cta-final-section .cta-desc,
.cta-final-section p {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.65 !important;
  text-wrap: balance !important;
}

/* ==========================================================================
   MASTERCLASS KAMPUNG SEDEKAH — UPGRADE 2026 (Bagian 2)
   Menambahkan: nomor FAQ otomatis, kartu kisah, sticky CTA mobile,
   tombol WhatsApp mengambang, serta penyempurnaan responsif.
   ========================================================================== */

/* ---------- Nomor FAQ Otomatis (agar teks FAQ identik dengan schema) ---------- */
#mcFaqAccordion {
  counter-reset: ksMcFaq;
}

#mcFaqAccordion .faq-item {
  counter-increment: ksMcFaq;
}

#mcFaqAccordion .faq-question > span:first-child::before {
  content: counter(ksMcFaq) ". ";
  color: #047857;
  font-weight: 800;
  margin-right: 4px;
}

/* ---------- Kartu Kisah Nyata ---------- */
.mc-story-card {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mc-story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(4, 120, 87, 0.12);
}

/* ---------- Sticky CTA Mobile ---------- */
.mc-sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.12);
}

.mc-sticky-cta-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-sticky-cta-btn:active {
  transform: scale(0.98);
}

.mc-sticky-cta-primary {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.32);
}

.mc-sticky-cta-wa {
  background: #ecfdf5;
  color: #047857;
  border: 1.5px solid #a7f3d0;
  flex: 0 0 40%;
}

/* ---------- Tombol WhatsApp Mengambang ---------- */
.mc-floating-wa {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 9997;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-floating-wa:hover {
  transform: scale(1.07);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6);
}

/* ---------- Mobile & Tablet ---------- */
@media (max-width: 768px) {
  .mc-sticky-cta {
    display: flex;
  }

  .mc-floating-wa {
    display: inline-flex;
  }

  /* Jangan sampai tombol mengambang menutupi tombol utama */
  .masterclass-page-wrapper .mc-hero-cta-group,
  .masterclass-page-wrapper .mc-cta-group {
    padding-bottom: 8px;
  }

  .mc-impact-band {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 26px 20px !important;
  }

  .mc-impact-band strong {
    font-size: 1.6rem !important;
  }

  /* Statistik pemater: 4 kolom jadi 2 kolom agar tidak sempit */
  .mc-speaker-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Formulir pendaftaran: ruang lebih lega di layar kecil */
  #form-daftar .kb-masterclass-card {
    padding: 26px 18px !important;
  }

  /* Modal tiket: tombol aksi tetap nyaman ditekan */
  .receipt-btn-group .btn-whatsapp {
    font-size: 0.9rem !important;
    padding: 13px 14px !important;
  }
}

@media (max-width: 480px) {
  .mc-sticky-cta-btn {
    font-size: 0.82rem;
    padding: 12px 8px;
  }

  .mc-floating-wa {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    right: 16px;
    bottom: 88px;
  }

  #mcFaqAccordion .faq-question {
    font-size: 0.92rem;
    padding: 14px 16px;
  }
}

/* ---------- Aksesibilitas: fokus yang jelas ---------- */
.mc-sticky-cta-btn:focus-visible,
.mc-floating-wa:focus-visible,
#mcFaqAccordion .faq-question:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 3px;
}

/* ---------- Cetak Tiket ---------- */
@media print {
  .mc-sticky-cta,
  .mc-floating-wa,
  .mc-quiz-section,
  .mc-story-section {
    display: none !important;
  }
}

/* ---------- SUBPAGE HERO SPACIOUS & PERFECTLY BALANCED (SS4 & SS5 FIX) ---------- */
.page-hero,
.subpage-hero {
  min-height: auto !important;
  padding: 55px 20px 45px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.page-hero .container,
.subpage-hero .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-hero .badge,
.subpage-hero .badge {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-hero-title,
.subpage-title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 18px !important;
  text-wrap: balance !important;
}

.page-hero-desc,
.subpage-desc {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: balance !important;
}

@media (max-width: 768px) {
  .page-hero,
  .subpage-hero {
    min-height: auto !important;
    padding: 38px 16px 30px 16px !important;
  }
}

/* ---------- 7 INDIKATOR KEMANDIRIAN (IKW) 4+3 CENTERED ---------- */
.ikw-indicators-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-top: 32px !important;
}

.flagship-banner-box h2 {
  color: #ffffff !important;
}
.flagship-banner-box p {
  color: #d1fae5 !important;
}

.ikw-card {
  flex: 0 1 calc(25% - 16px) !important;
  max-width: calc(25% - 16px) !important;
  min-width: 245px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 22px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease !important;
  cursor: pointer;
}

.ikw-card h4 {
  color: #0f172a !important;
  transition: color 0.2s ease !important;
}

.ikw-card p {
  color: #475569 !important;
  transition: color 0.2s ease !important;
}

.ikw-card:hover {
  transform: translateY(-4px) !important;
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  box-shadow: 0 12px 24px -8px rgba(16, 185, 129, 0.2) !important;
}

.ikw-card:hover h4 {
  color: #065f46 !important;
}

.ikw-card:hover p {
  color: #047857 !important;
}

@media (max-width: 1140px) and (min-width: 860px) {
  .ikw-card {
    flex: 0 1 calc(33.333% - 14px) !important;
    max-width: calc(33.333% - 14px) !important;
  }
}

@media (max-width: 859px) and (min-width: 560px) {
  .ikw-card {
    flex: 0 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}

@media (max-width: 559px) {
  .ikw-card {
    flex: 0 1 100% !important;
    max-width: 100% !important;
  }
}





    /* ==========================================================================
       MOBILE HEADER FIT & UNMISSIBLE DONATE BUTTON (HARGA MATI MAS ANWAR)
       ========================================================================== */
    @media (max-width: 768px) {
      .main-header .header-container {
        padding: 0 10px !important;
        height: 58px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
      }

      /* Compact Logo Lockup on Mobile */
      .main-header .brand-logo {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
      }
      .main-header .logo-icon {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
      }
      .main-header .brand-text {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
      }
      .main-header .brand-title {
        font-size: 0.88rem !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }
      .main-header .brand-sub {
        display: none !important;
      }

      /* Header Actions on Mobile (Search + Sedekah + Hamburger) */
      .main-header .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
      }
      .header-actions .btn-donate-pill,
      .main-header .btn-donate-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
        color: #ffffff !important;
        padding: 6px 10px !important;
        border-radius: 20px !important;
        font-weight: 800 !important;
        font-size: 0.74rem !important;
        text-decoration: none !important;
        box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3) !important;
        white-space: nowrap !important;
        border: none !important;
      }
      .main-header .header-search-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
      }
      .main-header .hamburger-btn {
        width: 32px !important;
        height: 32px !important;
        padding: 6px !important;
      }

      /* Drawer Nav Item & Dropdown Accordion Horizontal Align */
      .main-header .nav-item.has-dropdown,
      .nav-menu .nav-item.has-dropdown {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
      }
      .main-header .nav-item.has-dropdown > .nav-link,
      .nav-menu .nav-item.has-dropdown > .nav-link {
        flex: 1 1 auto !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 10px 12px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
      }
      .nav-dropdown-toggle-btn {
        background: transparent !important;
        border: none !important;
        padding: 10px 14px !important;
        cursor: pointer !important;
        color: #64748b !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
      }
      .nav-dropdown-toggle-btn:hover,
      .nav-dropdown-toggle-btn:active,
      .nav-item.is-open > .nav-dropdown-toggle-btn,
      .nav-item.open-mobile > .nav-dropdown-toggle-btn {
        color: #047857 !important;
        background: rgba(4, 120, 87, 0.08) !important;
      }
      .nav-dropdown-toggle-btn .dropdown-caret {
        transition: transform 0.25s ease !important;
      }
      .nav-item.is-open > .nav-dropdown-toggle-btn .dropdown-caret,
      .nav-item.open-mobile > .nav-dropdown-toggle-btn .dropdown-caret {
        transform: rotate(180deg) !important;
        color: #047857 !important;
      }
      .main-header .nav-item.has-dropdown > .nav-dropdown-menu,
      .nav-menu .nav-item.has-dropdown > .nav-dropdown-menu {
        width: 100% !important;
        flex: 0 0 100% !important;
      }
      .nav-item.is-open > .nav-dropdown-menu,
      .nav-item.open-mobile > .nav-dropdown-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 8px 10px !important;
        margin: 4px 0 8px 0 !important;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.03) !important;
      }

      /* Drawer Primary Donate Button */
      .drawer-donate-btn-primary {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
        color: #ffffff !important;
        padding: 13px 20px !important;
        border-radius: 14px !important;
        font-weight: 800 !important;
        font-size: 0.96rem !important;
        text-decoration: none !important;
        box-shadow: 0 4px 16px rgba(234, 88, 12, 0.3) !important;
        text-align: center !important;
        margin: 10px 0 !important;
        transition: transform 0.2s ease !important;
      }
      .drawer-donate-btn-primary:active {
        transform: scale(0.98) !important;
      }
    }



      /* Hide Floating WhatsApp button when mobile drawer is open to prevent overlap */
      body.menu-open .yksi-floating-wa,
      .nav-menu.open ~ .yksi-floating-wa,
      body:has(#navMenu.open) .yksi-floating-wa {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: scale(0.6) !important;
      }

/* Enhanced Cover Badge on Campaign Photo */
#donasi-section #kbCoverBadge,
#donasi-section .kb-cover-badge,
#kbCoverBadge,
.kb-cover-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: rgba(15, 23, 42, 0.88) !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(6px) !important;
  z-index: 10 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

#donasi-section #kbCoverBadge i,
#donasi-section .kb-cover-badge i,
#kbCoverBadge i,
.kb-cover-badge i {
  color: #fbbf24 !important; /* Vibrant gold flame */
  margin-right: 4px !important;
}

/* ==========================================================================
   DONASI SECTION SURGICAL STYLING (Eliminates Wildcard Conflicts)
   ========================================================================== */
/* 1. Cover Badge on Campaign Photo (Bright White on Dark Frosted Glass) */
#donasi-section #kbCoverBadge,
#donasi-section .kb-cover-badge,
#kbCoverBadge,
.kb-cover-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: rgba(15, 23, 42, 0.88) !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(6px) !important;
  z-index: 10 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

#donasi-section #kbCoverBadge i,
#donasi-section .kb-cover-badge i,
#kbCoverBadge i,
.kb-cover-badge i {
  color: #fbbf24 !important;
  margin-right: 4px !important;
}

/* 2. Sticky Action Card (Crisp High-Contrast Dark Text on White Card) */
.kb-card-action {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 24px 26px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

.kb-card-action .kb-title {
  color: #0f172a !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin-bottom: 16px !important;
}

.kb-amount-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}

.kb-amount-box .kb-amount-label {
  color: #64748b !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.kb-amount-box .kb-amount-num {
  color: #0f172a !important;
  font-size: 1.95rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.kb-amount-box .kb-amount-target {
  color: #64748b !important;
  font-size: 0.85rem !important;
}

.kb-amount-box .kb-amount-target strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.kb-stats-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 18px 0 20px 0 !important;
  text-align: center !important;
}

.kb-stats-row .kb-stat-col {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 4px !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  border: 1px solid #f1f5f9 !important;
}

.kb-stats-row .kb-stat-val {
  color: #0f172a !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.kb-stats-row .kb-stat-name {
  color: #64748b !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}

/* ==========================================================================
   PROGRAM PILLS STRICT 1 SINGLE ROW ON DESKTOP (ARAHAN MAS ANWAR)
   ========================================================================== */
@media (min-width: 769px) {
  #donasi-section .kb-program-tabs,
  .kb-program-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 28px !important;
    padding-bottom: 4px !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  #donasi-section .kb-program-tabs::-webkit-scrollbar,
  .kb-program-tabs::-webkit-scrollbar {
    display: none !important;
  }
  #donasi-section .kb-prog-tab,
  .kb-prog-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 9px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
  }
}
@media (min-width: 769px) and (max-width: 1050px) {
  #donasi-section .kb-program-tabs,
  .kb-program-tabs {
    gap: 6px !important;
  }
  #donasi-section .kb-prog-tab,
  .kb-prog-tab {
    padding: 8px 12px !important;
    font-size: 0.80rem !important;
  }
}

/* ==================== PROGRAM HERO QUICK NAV PILLS (1 BARIS HARMONIS - ARAHAN MAS ANWAR) ==================== */
.program-quick-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 4px 10px 4px !important;
}
.program-quick-nav::-webkit-scrollbar {
  display: none !important;
}
.program-quick-nav .btn-glass,
.program-quick-nav .prog-quick-pill,
.program-quick-nav a {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 15px !important;
  font-size: 0.82rem !important;
  transition: all 0.2s ease !important;
}
.program-quick-nav a:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-2px) !important;
}
@media (min-width: 769px) and (max-width: 1050px) {
  .program-quick-nav {
    gap: 6px !important;
  }
  .program-quick-nav .btn-glass,
  .program-quick-nav .prog-quick-pill,
  .program-quick-nav a {
    padding: 7px 12px !important;
    font-size: 0.80rem !important;
  }
}
@media (max-width: 768px) {
  .program-quick-nav {
    justify-content: flex-start !important;
    padding: 6px 14px 12px 14px !important;
    gap: 8px !important;
  }
}

/* ==========================================================================
   DESKTOP VIEWPORT GUARD (min-width: 1025px): ZERO LEAK OF MOBILE ELEMENTS
   ========================================================================== */
@media (min-width: 1025px) {
  .mobile-drawer-cta-wrap,
  .drawer-donate-btn-primary,
  .nav-drawer-footer,
  .mobile-nav-search {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
}



/* ==========================================================================
   MASTERCLASS CTA BUTTONS ENFORCED CONTRAST (ARAHAN HARGA MATI MAS ANWAR)
   ========================================================================== */
.mc-btn-online,
a.mc-btn-online,
a.mc-btn-online:link,
a.mc-btn-online:visited,
a.mc-btn-online:hover,
a.mc-btn-online:active,
a.mc-btn-online:focus,
.mc-btn-online span,
.mc-track-card a.mc-btn-online {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #047857 !important;
  text-decoration: none !important;
}

.mc-btn-offline,
a.mc-btn-offline,
a.mc-btn-offline:link,
a.mc-btn-offline:visited,
a.mc-btn-offline:hover,
a.mc-btn-offline:active,
a.mc-btn-offline:focus,
.mc-btn-offline span,
.mc-track-card a.mc-btn-offline {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #ea580c !important;
  text-decoration: none !important;
}


/* ==========================================================================
   UNIVERSAL HIGH-CONTRAST & CRISP READABILITY LOCK (ARAHAN HARGA MATI MAS ANWAR)
   ========================================================================== */
/* Masterclass Quiz Buttons */
button[onclick*="ksQuizCalc"],
.btn-quiz-calc,
button.btn-quiz-calc {
  background: #047857 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.3) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
button[onclick*="ksQuizCalc"] *,
.btn-quiz-calc *,
button.btn-quiz-calc * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
button[onclick*="ksQuizCalc"]:hover,
.btn-quiz-calc:hover {
  background: #065f46 !important;
}

#btnQuizToForm,
a#btnQuizToForm,
a#btnQuizToForm:link,
a#btnQuizToForm:visited,
a#btnQuizToForm:hover,
a#btnQuizToForm:focus {
  background: #047857 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}
#btnQuizToForm *,
a#btnQuizToForm * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#btnQuizToWa,
a#btnQuizToWa,
a#btnQuizToWa:link,
a#btnQuizToWa:visited,
a#btnQuizToWa:hover,
a#btnQuizToWa:focus {
  background: #15803d !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}
#btnQuizToWa *,
a#btnQuizToWa * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Modul E-Learning & Masterclass Primary CTAs */
.btn-mc-primary,
a.btn-mc-primary,
a.btn-mc-primary:link,
a.btn-mc-primary:visited,
a.btn-mc-primary:hover,
a.btn-mc-primary:focus {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}
.btn-mc-primary *,
a.btn-mc-primary * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Masterclass Form Submit Button */
.btn-kb-submit-final,
button.btn-kb-submit-final {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(22, 163, 74, 0.35) !important;
}
.btn-kb-submit-final *,
button.btn-kb-submit-final * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Quiz Option Interactive Selection State */
.quiz-options label:has(input:checked) {
  border-color: #047857 !important;
  background: #f0fdf4 !important;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.08) !important;
}

/* ---------- SS1 & SS3 WHITESPACE & SECTION TRANSITION MASTER RULES ---------- */
.elementor-element-secNaN,
section.elementor-element-secNaN {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: #EDF3EE !important;
}

#ks-paham {
  padding: 40px 0 35px 0 !important;
}

.ks-xwrap {
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) !important;
}

.ks-xhead {
  margin: 0 auto clamp(1.8rem, 3.5vw, 2.5rem) !important;
}

.elementor-element-ks_fi_sec,
.ks-fi-sec {
  padding-top: 40px !important;
}

/* ---------- ARTIKEL SUBPAGE HERO RICH BACKGROUND FIX ---------- */
.subpage-hero,
.elementor-element-4bd1319,
section.elementor-element-4bd1319 {
  background: linear-gradient(135deg, rgba(6, 44, 28, 0.94) 0%, rgba(12, 68, 44, 0.92) 50%, rgba(6, 36, 22, 0.95) 100%), url('https://kampungsedekah.or.id/wp-content/uploads/2026/10/kegiatan_ketahanan_pangan.jpg') center/cover no-repeat !important;
  color: #ffffff !important;
  padding: 55px 20px 45px 20px !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.subpage-hero .subpage-title,
.elementor-element-4bd1319 .subpage-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(2rem, 4vw, 2.6rem) !important;
  font-weight: 800 !important;
  margin: 12px auto 14px auto !important;
  text-align: center !important;
  text-wrap: balance !important;
}

.subpage-hero .subpage-desc,
.elementor-element-4bd1319 .subpage-desc {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  font-size: 1.05rem !important;
  line-height: 1.68 !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  text-align: center !important;
  text-wrap: balance !important;
}

.subpage-hero .badge-sub,
.elementor-element-4bd1319 .badge-sub {
  background: rgba(254, 240, 138, 0.20) !important;
  color: #fef08a !important;
  border: 1.5px solid rgba(254, 240, 138, 0.5) !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 auto 14px auto !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.18) !important;
}