/* ==========================================================================
   YNKI UNIVERSAL DESIGN SYSTEM & PALET WARNA RESMI
   --------------------------------------------------------------------------
   Komponen / Aksi             | Kode Warna | Peran & Penggunaan
   --------------------------------------------------------------------------
   Pondasi Brand               | #117710    | Header, Footer, BG Section Utama, Judul
   Aksen / Badge               | #FF8000    | Label sorotan (Target 80%, Populer), ikon penting
   Aksen Sekunder              | #8000FF    | Tag kategori, garis fokus form, efek interaktif
   CTA Utama (Uang/Komitmen)   | #B22231    | Tombol Donasi, Bayar, Checkout (Teks Putih)
   CTA Kedua (Informasi/Pilihan)| #A0D2F5    | Tombol Rincian Dana, Pilih Nominal, Simpan (Teks Gelap)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800&display=swap');

:root {
  /* 1. Pondasi Brand: Hijau #117710 */
  --ynki-brand: #117710;
  --ynki-brand-hover: #0d5c0c;
  --ynki-brand-dark: #0c500b;
  --ynki-brand-deep: #073506;
  --ynki-brand-light: #eaf6ea;
  --ynki-brand-tint: #d2f0d1;
  --ynki-brand-border: #b5ddb5;

  /* 2. Aksen / Badge: Oranye #FF8000 */
  --ynki-accent-orange: #FF8000;
  --ynki-accent-orange-hover: #e67300;
  --ynki-accent-orange-light: #fff3e6;
  --ynki-accent-orange-tint: #ffe6cc;
  --ynki-accent-orange-border: rgba(255, 128, 0, 0.35);

  /* 3. Aksen Sekunder: Ungu #8000FF */
  --ynki-accent-purple: #8000FF;
  --ynki-accent-purple-hover: #6a00d4;
  --ynki-accent-purple-light: #f3e8ff;
  --ynki-accent-purple-tint: #e9d5ff;
  --ynki-accent-purple-border: rgba(128, 0, 255, 0.3);

  /* 4. CTA Utama (Uang/Komitmen): Merah #B22231 (Teks Putih) */
  --ynki-cta-main: #B22231;
  --ynki-cta-main-hover: #941724;
  --ynki-cta-main-text: #ffffff;
  --ynki-cta-main-shadow: 0 4px 14px rgba(178, 34, 49, 0.28);

  /* 5. CTA Kedua (Informasi/Pilihan): Biru #A0D2F5 (Teks Gelap) */
  --ynki-cta-second: #A0D2F5;
  --ynki-cta-second-hover: #82c4f1;
  --ynki-cta-second-text: #0e241b;
  --ynki-cta-second-shadow: 0 4px 14px rgba(160, 210, 245, 0.35);

  /* Neutrals */
  --ynki-dark: #0e241b;
  --ynki-text-main: #1e2d24;
  --ynki-text-muted: #536b5f;
  --ynki-bg-subtle: #f8faf8;
  --ynki-border-subtle: #e2efe2;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & BASE
   ========================================================================== */
html {
  scroll-behavior: smooth !important;
}

body, #main, .fusion-body,
.post-content, .entry-content,
p, small, .small,
span.date, span.author, span.time, span.loc,
.post-meta, .post-meta *,
.date-badge, .category-badge,
.badge, .section-badge,
.tag-highlight, .badge-highlight, .badge-orange, .badge-purple,
.tag, .tag-purple, .tag-category, .badge-sorotan,
.hero-crumb, .hero-crumb *,
.hero-breadcrumb, .hero-breadcrumb *,
.hero-eyebrow, .hero-eyebrow *,
.hero-sub, .hero-desc, .hero-desc-sejarah, .hero-desc-trans,
.pptx-hero-desc, .pptx-hero-crumb,
.mengapa-desc, .stat-desc, .stat-label,
.pilar-card p, .pilar-card .pilar-num, .pilar-link,
.gerakan-item-text,
.g-body p, .g-loc,
.v-body p, .v-dur,
.cta-section p,
.fusion-tb-footer p, .fusion-tb-footer ul li, .fusion-tb-footer ul li a,
.ynki-email-text,
figcaption, .caption, label,
input, textarea, select,
ul li, ol li, table td, table th,
.team-role, .team-bio,
.domain-card p, .value-card p,
.story-card p, .news-card p,
.card-desc, .card-meta, .card-excerpt,
.btn-cta-main, .btn-cta-second,
.btn-cta-main-home, .btn-cta-second-home, .btn-ghost-home {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Judul (H1 - H4) Menggunakan Montserrat / Inter */
h1, h2, h3, h4, .fusion-title h1, .fusion-title h2, .fusion-title h3,
.section-title, .mengapa-label, .mitra-logos strong {
  font-family: 'Montserrat', 'Inter', Arial, Helvetica, sans-serif;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   HERO SECTION TYPOGRAPHY (SLIM, ELEGANT, 300 WEIGHT MATCHING BERANDA)
   ========================================================================== */
.hero-section h1,
.hero-h1,
#hero-sejarah h1,
#hero-home h1,
#hero-tim h1,
#hero-lgos h1,
#hero-port h1,
#hero-porto h1,
#hero-trans h1,
#hero-budaya h1,
#hero-lg h1,
#hero-nc h1,
#hero-sus h1,
#hero-int h1,
#hero-inst h1,
.hero-content h1,
.hero-content-sejarah h1,
.hero-content-trans h1,
.hero-inner h1,
.pptx-hero h1 {
  font-family: 'Montserrat', 'Inter', Arial, Helvetica, sans-serif !important;
  font-size: clamp(26px, 3.8vw, 44px) !important;
  font-weight: 300 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 0 20px !important;
  letter-spacing: -0.01em !important;
}

.hero-section h1 *,
.hero-h1 *,
#hero-sejarah h1 *,
#hero-home h1 *,
#hero-tim h1 *,
#hero-lgos h1 *,
#hero-port h1 *,
#hero-trans h1 *,
#hero-budaya h1 *,
#hero-lg h1 *,
#hero-nc h1 *,
#hero-sus h1 *,
#hero-int h1 *,
#hero-inst h1 *,
.hero-content h1 *,
.hero-content-sejarah h1 *,
.hero-content-trans h1 *,
.hero-inner h1 *,
.pptx-hero h1 * {
  font-family: 'Montserrat', 'Inter', Arial, Helvetica, sans-serif !important;
  font-weight: 300 !important;
}

.hero-section h1 span.hl,
.hero-section h1 span.highlight,
.hero-h1 .hl,
.hero-h1 .highlight,
.hero-h1 span.hl,
.hero-h1 span.highlight,
.hero-content h1 span.highlight,
.hero-content h1 span.hl,
.hero-content-sejarah h1 span.highlight,
.hero-content-sejarah h1 span.hl,
.hero-content-trans h1 span.hl,
.pptx-hero h1 span.highlight,
.pptx-hero h1 span.hl,
#hero-home h1 span.highlight,
#hero-home h1 span.hl,
#hero-sejarah h1 span.highlight,
#hero-tim h1 span.highlight,
#hero-lgos h1 span.hl,
#hero-port h1 span.hl,
#hero-trans h1 span.hl,
#hero-lg h1 span.hl,
#hero-nc h1 span.hl,
#hero-sus h1 span.hl,
#hero-int h1 span.hl,
#hero-inst h1 span.hl,
.hero-inner h1 span.hl,
.hero-inner h1 span.highlight,
h1 span.highlight,
h1 span.hl {
  font-family: 'Montserrat', 'Inter', Arial, Helvetica, sans-serif !important;
  color: #a3e0a2 !important;
  font-size: 0.88em !important;
  display: inline-block;
  font-weight: 300 !important;
}

.hero-sub,
.hero-desc-sejarah,
.hero-desc-tim,
.hero-desc-trans,
.hero-desc,
.pptx-hero-desc,
.hero-section p.hero-sub,
.hero-section p.hero-desc,
#hero-sejarah p.hero-desc-sejarah,
#hero-tim p.hero-desc-tim,
#hero-trans p.hero-desc-trans,
#hero-home p.hero-desc,
#hero-lg p.hero-sub,
#hero-nc p.hero-sub,
#hero-sus p.hero-sub,
#hero-int p.hero-sub,
#hero-inst p.hero-sub,
.hero-inner p.hero-sub,
.hero-inner p.hero-desc {
  font-family: 'Montserrat', 'Inter', Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  line-height: 1.8 !important;
  color: #d2f0d1 !important;
  max-width: 860px !important;
  margin: 0 auto 34px !important;
}

/* ==========================================================================
   SUB-JUDUL / SECTION HEADINGS (MONTSERRAT REGULAR - 400 MATCHING HERO)
   ========================================================================== */
h2,
h3,
h4,
.sejarah-overview h2,
.tujuan-box h3,
.masalah-card h4,
.int-card h4,
.cta-section h2,
.pstat-card h4,
.collab-card h4,
.tim-card h4,
.kaitan-body h4,
.fusion-title h2,
.fusion-title h3,
.fusion-title h4,
.fusion-title-heading,
.post-content h2,
.post-content h3,
.post-content h4,
section h2,
section h3,
section h4 {
  font-family: 'Montserrat', 'Inter', Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

/* ==========================================================================
   HEADER & NAVBAR (TRANSPARAN TANPA BACKGROUND PADAT & INSTANT DROPDOWN HOVER)
   ========================================================================== */
#boxed-wrapper,
#wrapper,
.fusion-wrapper {
  overflow: visible !important;
  position: relative !important;
}

header,
#fusion-header,
.fusion-header,
.fusion-tb-header,
.fusion-header-wrapper,
.fusion-fullwidth.fusion-builder-row-1,
.fusion-builder-row-1 {
  position: relative !important;
  z-index: 999999999 !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.fusion-builder-row,
.fusion-layout-column,
.fusion-column-wrapper,
nav.awb-menu,
.awb-menu,
.awb-menu__main-ul,
.awb-menu__main-li {
  overflow: visible !important;
  pointer-events: auto !important;
}

#sliders-container,
.fusion-slider-visibility,
main,
#main,
#hero-home,
.fusion-page-title-bar,
.fusion-fullwidth:not(.fusion-builder-row-1) {
  position: relative !important;
  z-index: 1 !important;
}

@media (min-width: 993px) {
  button.awb-menu__m-toggle,
  .awb-menu__m-toggle,
  .awb-menu__m-toggle-inner,
  button[class*="awb-menu__m-toggle"],
  .fusion-mobile-menu-icons,
  .fusion-mobile-nav-holder,
  .collapsed-nav-text,
  .awb-menu__open-nav-submenu_mobile,
  .ynki-mobile-nav-drawer,
  .ynki-mobile-nav-backdrop,
  #ynki-mobile-drawer,
  #ynki-mobile-backdrop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
  }

  .fusion-tb-header .fusion-builder-row-1 .fusion-row,
  .fusion-header .fusion-row,
  .fusion-builder-row-1 > .fusion-row {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .fusion-builder-row-1 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .fusion-builder-column-0 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 320px !important;
  }

  .fusion-builder-column-1 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  .fusion-builder-column-1 .fusion-column-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  nav.awb-menu,
  .awb-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .awb-menu__main-ul,
  .awb-menu__main-ul.awb-menu__main-ul_row,
  .fusion-menu.awb-menu__main-ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    list-style: none !important;
    padding: 0 !important;
    gap: 14px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .awb-menu__main-li {
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    overflow: visible !important;
  }

  .awb-menu__main-li > a,
  .awb-menu__main-a {
    color: #12291e !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 8px !important;
    background: transparent !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
  }

  .awb-menu__main-li:hover > a,
  .awb-menu__main-li:hover > .awb-menu__main-a,
  .awb-menu__main-li.current-menu-item > a,
  .awb-menu__main-li.current-menu-ancestor > a {
    color: #117710 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .awb-menu__main-li::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 12px !important;
    display: block !important;
    z-index: 999999998 !important;
    pointer-events: auto !important;
  }

  .awb-menu__sub-ul {
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
  }

  .awb-menu__main-li:not(:hover):not(.is-open):not(:focus-within) > .awb-menu__sub-ul {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .awb-menu__main-li:hover > .awb-menu__sub-ul,
  .awb-menu__main-li.is-open > .awb-menu__sub-ul,
  .awb-menu__main-li:focus-within > .awb-menu__sub-ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 260px !important;
    width: max-content !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid #d2e8d1 !important;
    border-top: 3px solid #117710 !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 999999999 !important;
  }

  .awb-menu__sub-li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #edf2ed !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
  }

  .awb-menu__sub-li:last-child {
    border-bottom: none !important;
  }

  .awb-menu__sub-a {
    display: block !important;
    padding: 12px 18px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e2d24 !important;
    text-decoration: none !important;
    background: #ffffff !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
  }

  .awb-menu__sub-a:hover,
  .awb-menu__sub-li:hover > .awb-menu__sub-a {
    background: #f0fdf4 !important;
    color: #117710 !important;
  }
}

/* ==========================================================================
   TOMBOL CTA UTAMA (Uang/Komitmen): Merah #B22231 (Teks Putih)
   ========================================================================== */
.btn-cta-main,
a.btn-cta-main,
.btn-cta-main-home,
a.btn-cta-main-home,
.btn-donate,
.btn-bayar,
.btn-checkout {
  background: #B22231 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding: 13px 28px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(178, 34, 49, 0.28) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.btn-cta-main:hover,
a.btn-cta-main:hover,
.btn-cta-main-home:hover,
a.btn-cta-main-home:hover,
.btn-donate:hover {
  background: #941724 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(178, 34, 49, 0.42) !important;
}

/* ==========================================================================
   TOMBOL CTA KEDUA (Informasi/Pilihan): Biru #A0D2F5 (Teks Gelap)
   ========================================================================== */
.btn-cta-second,
a.btn-cta-second,
.btn-cta-second-home,
a.btn-cta-second-home,
.btn-hero-secondary,
a.btn-hero-secondary,
.btn-info,
.btn-rincian-dana,
.btn-pilih-nominal {
  background: #A0D2F5 !important;
  color: #0e241b !important;
  border: 1px solid rgba(14, 36, 27, 0.12) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding: 13px 26px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(160, 210, 245, 0.32) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.btn-cta-second:hover,
a.btn-cta-second:hover,
.btn-cta-second-home:hover,
a.btn-cta-second-home:hover {
  background: #82c4f1 !important;
  color: #05140d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(130, 196, 241, 0.45) !important;
}

/* ==========================================================================
   AKSEN / BADGE: Oranye #FF8000
   ========================================================================== */
.badge-highlight,
.badge-orange,
.section-badge,
.tag-highlight,
.badge-sorotan {
  background: #fff3e6 !important;
  color: #FF8000 !important;
  border: 1px solid rgba(255, 128, 0, 0.35) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 4px 14px !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Ikon penting & stat highlight */
.icon-highlight,
.stat-num span.plus {
  color: #FF8000 !important;
}

/* ==========================================================================
   AKSEN SEKUNDER: Ungu #8000FF
   ========================================================================== */
.badge-purple,
.category-tag-purple,
.tag-category,
.category-badge,
.tag-purple {
  background: #f3e8ff !important;
  color: #8000FF !important;
  border: 1px solid rgba(128, 0, 255, 0.3) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 4px 14px !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Garis fokus form input */
input:focus,
textarea:focus,
select:focus {
  border-color: #8000FF !important;
  box-shadow: 0 0 0 3px rgba(128, 0, 255, 0.18) !important;
  outline: none !important;
}

/* ==========================================================================
   FOOTER ENHANCED — Warna Hijau Brand Website Solid (#117710 & #0d5c0c)
   ========================================================================== */
.fusion-footer,
.fusion-tb-footer,
.fusion-tb-footer .fusion-footer-widget-area,
.fusion-tb-footer .fusion-fullwidth,
.fusion-tb-footer .fullwidth-box,
.fusion-tb-footer .fusion-builder-row,
.fusion-tb-footer .fusion-layout-column,
.fusion-tb-footer .fusion_builder_column,
.fusion-tb-footer .footer-mockup {
  background: #117710 !important;
  background-color: #117710 !important;
  --awb-background-color: #117710 !important;
  --awb-bg-color: #117710 !important;
  --awb-bg-color-hover: #117710 !important;
  color: #ffffff !important;
}

.fusion-tb-footer {
  position: relative !important;
  background: #117710 !important;
  background-color: #117710 !important;
  border-top: 4px solid #094708 !important;
  padding: 48px 0 38px !important;
  clear: both !important;
  width: 100% !important;
}
.fusion-tb-footer::before {
  display: none !important;
}
.fusion-tb-footer .fusion-fullwidth {
  background: transparent !important;
  background-color: transparent !important;
}
.fusion-tb-footer .fusion-layout-column,
.fusion-tb-footer .fusion_builder_column {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.fusion-tb-footer .fusion-column-wrapper {
  background: #0d5c0c !important;
  background-color: #0d5c0c !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  padding: 28px 26px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.3s ease;
  box-sizing: border-box !important;
}
.fusion-tb-footer .fusion-column-wrapper:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: #0a4709 !important;
  background-color: #0a4709 !important;
}
.fusion-tb-footer strong {
  color: #ffffff !important;
  letter-spacing: 0.5px;
  font-size: 18px;
  font-weight: 800;
  display: inline-block;
  margin-bottom: 8px;
}
.fusion-tb-footer .fusion-text p {
  color: #eaf6ea !important;
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.fusion-tb-footer .fusion-text a,
.fusion-tb-footer .ynki-email-link,
.fusion-tb-footer a[href*="mailto:"] {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: all 0.2s ease;
}
.fusion-tb-footer .fusion-text a:hover,
.fusion-tb-footer .ynki-email-link:hover,
.fusion-tb-footer a[href*="mailto:"]:hover {
  color: #FF8000 !important;
}
.fusion-tb-footer ul {
  list-style: none !important;
  margin: 14px 0 18px !important;
  padding: 0 !important;
}
.fusion-tb-footer ul li {
  margin: 0 0 11px !important;
  padding-left: 24px;
  position: relative;
}
.fusion-tb-footer ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: #FF8000;
  font-weight: bold;
  transition: transform 0.2s ease;
}
.fusion-tb-footer ul li:hover::before {
  transform: translateX(4px);
  color: #ffffff;
}
.fusion-tb-footer ul li a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14.5px;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-block;
}
.fusion-tb-footer ul li a:hover {
  color: #FF8000 !important;
  transform: translateX(3px);
}

/* Social Media Contact Buttons */
.ynki-footer-social {
  display: flex !important;
  gap: 12px !important;
  margin-top: 22px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.ynki-social-btn,
.ynki-footer-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer !important;
}
.ynki-social-btn svg,
.ynki-footer-social a svg {
  width: 22px !important;
  height: 22px !important;
  transition: transform 0.3s ease !important;
}

/* Individual Brand Hover Styles */
.ynki-social-youtube:hover,
.ynki-footer-social a[title*="YouTube"]:hover {
  background: #FF0000 !important;
  border-color: #FF0000 !important;
  color: #ffffff !important;
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 8px 20px rgba(255, 0, 0, 0.45) !important;
}
.ynki-social-facebook:hover,
.ynki-footer-social a[title*="Facebook"]:hover {
  background: #1877F2 !important;
  border-color: #1877F2 !important;
  color: #ffffff !important;
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.45) !important;
}
.ynki-social-instagram:hover,
.ynki-footer-social a[title*="Instagram"]:hover {
  background: #E4405F !important;
  border-color: #E4405F !important;
  color: #ffffff !important;
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 8px 20px rgba(228, 64, 95, 0.45) !important;
}
.ynki-social-xtwitter:hover,
.ynki-social-x:hover,
.ynki-footer-social a[title*="X"]:hover,
.ynki-footer-social a[title*="Twitter"]:hover {
  background: #000000 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3) !important;
}
.ynki-social-linkedin:hover,
.ynki-footer-social a[title*="LinkedIn"]:hover {
  background: #0A66C2 !important;
  border-color: #0A66C2 !important;
  color: #ffffff !important;
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 8px 20px rgba(10, 102, 194, 0.45) !important;
}


/* ==========================================================================
   RESPONSIVE LAYOUT & MOBILE OPTIMIZATION SYSTEM (<= 992px, <= 768px, <= 480px)
   ========================================================================== */

/* 1. Viewport & Universal Box Sizing */
html, body, #wrapper, #main, .fusion-tb-footer {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* TOTAL REMOVAL OF SCROLL / STICKY ON NAVBAR */
header,
#fusion-header,
.fusion-header,
.fusion-tb-header,
.fusion-header-wrapper,
.fusion-fullwidth.fusion-builder-row-1,
.fusion-builder-row-1,
.fusion-is-sticky,
.fusion-sticky-header,
.fusion-sticky-menu,
.fusion-header-sticky,
.awb-sticky,
.element-is-sticky {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 999999999 !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

img {
  max-width: 100% !important;
  height: auto !important;
}

/* 2. Tablet & Mobile Global Styles (<= 992px) */
@media (max-width: 992px) {
  /* Container & Rows */
  .ynki-container,
  .fusion-row,
  .fusion-builder-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Header Bar */
  .fusion-tb-header .fusion-fullwidth {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Hide burger toggle button when mobile drawer is open so it NEVER bleeds through or overlaps */
  body.ynki-mobile-nav-open button.awb-menu__m-toggle,
  body.ynki-mobile-nav-open .awb-menu__m-toggle,
  body.ynki-mobile-nav-open .fusion-mobile-menu-icons {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* =======================================================
     YNKI DEDICATED MOBILE DRAWER NAVIGATION & ACCORDION
     ======================================================= */
  .ynki-mobile-nav-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(14, 36, 27, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2147483640;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .ynki-mobile-nav-backdrop.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .ynki-mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 330px;
    max-width: 86vw;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    z-index: 2147483647;
    box-shadow: -8px 0 35px rgba(0, 0, 0, 0.28);
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-sizing: border-box;
    font-family: 'Inter', Arial, sans-serif;
  }
  .ynki-mobile-nav-drawer.active {
    right: 0;
  }

  .ynki-mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1.5px solid #edf4ee;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .ynki-mobile-nav-logo img {
    height: 36px;
    max-height: 36px;
    width: auto;
    display: block;
  }
  .ynki-mobile-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff3e6;
    border: 1.5px solid #ff8000;
    border-radius: 8px;
    color: #ff8000;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2147483647 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
  }
  .ynki-mobile-nav-close:hover,
  .ynki-mobile-nav-close:active {
    background: #ffe6cc;
  }

  .ynki-mobile-nav-menu {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .ynki-mobile-nav-item {
    border-bottom: 1px solid #f0f4f1;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ynki-mobile-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px;
  }
  .ynki-mobile-nav-link {
    display: block;
    padding: 12px 4px;
    font-size: 15px;
    font-weight: 700;
    color: #12291e;
    text-decoration: none;
    flex-grow: 1;
    transition: color 0.15s ease;
  }
  .ynki-mobile-nav-link:hover,
  .ynki-mobile-nav-link.active {
    color: #117710;
  }
  .ynki-mobile-nav-toggle-btn {
    background: #eaf6ea;
    border: 1px solid #cce8cd;
    color: #117710;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .ynki-mobile-nav-toggle-btn:hover {
    background: #d5ecd6;
  }
  .ynki-mobile-nav-toggle-btn.open {
    background: #ff8000;
    border-color: #ff8000;
    color: #ffffff;
  }

  .ynki-mobile-submenu {
    display: none;
    list-style: none;
    padding: 4px 0 8px 0;
    margin: 0;
    background: #f7faf8;
    border-left: 3px solid #117710;
  }
  .ynki-mobile-submenu.open {
    display: block;
  }
  .ynki-mobile-submenu li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ynki-mobile-submenu li a {
    display: block;
    padding: 10px 18px 10px 24px;
    font-size: 13.5px;
    font-weight: 600;
    color: #284134;
    text-decoration: none;
    transition: all 0.15s ease;
  }
  .ynki-mobile-submenu li a:hover,
  .ynki-mobile-submenu li a:active {
    color: #117710;
    background: #edf7ee;
    padding-left: 28px;
  }

  .ynki-mobile-nav-footer {
    padding: 16px 18px 24px;
    background: #fbfdfb;
    border-top: 1.5px solid #edf4ee;
  }
  .btn-mobile-nav-donate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #B22231;
    color: #ffffff !important;
    text-align: center;
    padding: 13px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(178, 34, 49, 0.28);
    transition: all 0.2s ease;
  }
  .btn-mobile-nav-donate:hover {
    background: #941724;
    box-shadow: 0 4px 12px rgba(178, 34, 49, 0.4);
  }

  .fusion-tb-header .fusion-builder-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
  }
  .fusion-tb-header .fusion_builder_column_1_3,
  .fusion-tb-header .fusion-builder-column-0 {
    width: auto !important;
    max-width: 75% !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
  }
  .fusion-tb-header .fusion_builder_column_2_3,
  .fusion-tb-header .fusion-builder-column-1 {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .fusion-tb-header .fusion-imageframe,
  .fusion-tb-header .fusion-image-element {
    overflow: visible !important;
  }
  .fusion-tb-header a[aria-label*="logo-ynki"],
  .fusion-tb-header .fusion-imageframe img,
  .fusion-tb-header img.wp-image-183 {
    max-width: 260px !important;
    height: 48px !important;
    max-height: 52px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Mobile Navigation Button */
  .awb-menu__m-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f0fdf4 !important;
    border: 1.5px solid #117710 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    width: 42px !important;
    height: 42px !important;
    cursor: pointer !important;
    color: #117710 !important;
    box-shadow: 0 2px 6px rgba(17, 119, 16, 0.12) !important;
  }

  .awb-menu__m-toggle .awb-menu__m-collapse-icon {
    display: block !important;
    width: 20px !important;
    height: 14px !important;
    position: relative !important;
    margin: 0 auto !important;
  }

  .awb-menu__m-toggle .awb-menu__m-collapse-icon::before,
  .awb-menu__m-toggle .awb-menu__m-collapse-icon::after,
  .awb-menu__m-toggle .awb-menu__m-collapse-icon-open {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 2.5px !important;
    background-color: #117710 !important;
    border-radius: 2px !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .awb-menu__m-toggle .awb-menu__m-collapse-icon::before {
    top: 0 !important;
  }

  .awb-menu__m-toggle .awb-menu__m-collapse-icon-open {
    top: 5.5px !important;
  }

  .awb-menu__m-toggle .awb-menu__m-collapse-icon::after {
    bottom: 0 !important;
  }

  .awb-menu__m-toggle .awb-menu__m-collapse-icon-close {
    display: none !important;
  }

  /* Hero Section Mobile/Tablet */
  #hero-home,
  .hero-section,
  .ynki-hero-wrap,
  .ynki-hero-compact,
  .article-hero-banner {
    width: 100% !important;
    min-height: auto !important;
    padding: 65px 20px 55px !important;
    box-sizing: border-box !important;
    display: block !important;
  }
  #hero-home .hero-content,
  .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  #hero-home h1,
  .hero-h1,
  .article-hero-title {
    font-size: clamp(22px, 6vw, 36px) !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
  }
  .hero-desc,
  .hero-sub,
  .hero-desc-sejarah,
  .hero-desc-tim,
  .hero-desc-trans,
  .ynki-hero-sub {
    font-size: clamp(16px, 4vw, 20px) !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
  }

  /* Footer on Mobile/Tablet */
  .fusion-tb-footer {
    padding: 40px 0 30px !important;
  }
  .fusion-tb-footer .fusion-builder-row,
  .fusion-tb-footer .fusion-row,
  .fusion-tb-footer .fusion-builder-row-3,
  .fusion-tb-footer [class*="fusion-builder-row"] {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
  .fusion-tb-footer .fusion-builder-column-18,
  .fusion-tb-footer .fusion-builder-column-19,
  .fusion-tb-footer .fusion_builder_column,
  .fusion-tb-footer .fusion-layout-column,
  .fusion-tb-footer .footer-mockup,
  .fusion-tb-footer [class*="fusion_builder_column"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
  }
}

/* =======================================================
   DESKTOP & GLOBAL OVERRIDES (>= 993px)
   ======================================================= */
@media (min-width: 993px) {
  /* Enlarge YNKI Logo in Header */
  .fusion-builder-column-0,
  .fusion_builder_column_1_3 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 420px !important;
  }
  .fusion-tb-header .fusion-image-element,
  .fusion-tb-header .fusion-imageframe {
    overflow: visible !important;
    width: auto !important;
  }
  .fusion-tb-header a[aria-label*="logo-ynki"],
  .fusion-tb-header .fusion-imageframe img,
  .fusion-tb-header img.wp-image-183 {
    max-width: 380px !important;
    width: auto !important;
    height: 60px !important;
    max-height: 70px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Hero CTA Buttons on Desktop: Horizontal Inline Row */
  .hero-actions,
  .hero-btns {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    width: auto !important;
    flex-wrap: wrap !important;
  }
  .hero-actions a,
  .hero-btns a,
  .btn-cta-main-home,
  .btn-cta-second-home,
  .btn-ghost-home {
    display: inline-flex !important;
    width: auto !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 28px !important;
  }

  /* Footer on Desktop: Spacious 2-Column Row */
  .fusion-tb-footer {
    background: #117710 !important;
    color: #ffffff !important;
    padding: 55px 0 45px !important;
    width: 100% !important;
  }
  .fusion-tb-footer .fusion-builder-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 48px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
  }
  .fusion-tb-footer .fusion-builder-column-18,
  .fusion-tb-footer .fusion_builder_column_1_2:first-child {
    flex: 1 1 55% !important;
    width: auto !important;
    max-width: 600px !important;
    margin: 0 !important;
  }
  .fusion-tb-footer .fusion-builder-column-19,
  .fusion-tb-footer .fusion_builder_column_1_2:last-child {
    flex: 1 1 45% !important;
    width: auto !important;
    max-width: 480px !important;
    margin: 0 !important;
  }
}

/* Footer Universal Global Typography & Colors */
.fusion-tb-footer p,
.fusion-tb-footer span,
.fusion-tb-footer strong,
.fusion-tb-footer div,
.fusion-tb-footer ul,
.fusion-tb-footer li,
.fusion-tb-footer a {
  color: #ffffff !important;
}
.fusion-tb-footer ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 12px 0 0 !important;
}
.fusion-tb-footer ul li {
  list-style: none !important;
  position: relative !important;
  padding: 5px 0 !important;
  margin: 0 !important;
}
/* Strip default pseudo-elements */
.fusion-tb-footer ul li::before,
.fusion-tb-footer ul li::after,
.fusion-tb-footer .fusion-text ul li::before,
.fusion-tb-footer .fusion-text ul li::after {
  display: none !important;
  content: "" !important;
}
.fusion-tb-footer ul li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}
.fusion-tb-footer ul li a::before {
  content: "›" !important;
  color: #ff8000 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  display: inline-block !important;
  transition: transform 0.2s ease !important;
}
.fusion-tb-footer ul li a:hover {
  color: #ff8000 !important;
  text-decoration: none !important;
  transform: translateX(4px) !important;
}
.ynki-footer-social {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 18px !important;
  flex-wrap: wrap !important;
}
.ynki-footer-social .ynki-social-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
}
.ynki-footer-social .ynki-social-btn:hover {
  background: #ff8000 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* 3. Smartphone Specific (<= 640px) */
@media (max-width: 640px) {
  /* Cards & Sections */
  .ynki-section,
  .cta-section,
  .landasan-section,
  .impact-banner,
  .form-involvement-section {
    padding: 45px 14px !important;
  }

  .ynki-grid-donation,
  .contact-grid-main,
  .programs-grid,
  .impact-grid,
  .stats-grid,
  .docs-grid,
  .roles-grid,
  .article-main-wrap,
  .landasan-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 24px !important;
    margin-bottom: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  .ynki-card-box,
  .contact-card-box,
  .program-card,
  .form-involvement-box,
  .impact-card,
  .article-sidebar {
    padding: 20px 16px !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* CTAs & Buttons */
  .btn-cta-main,
  .btn-cta-second,
  .btn-cta-main-home,
  .btn-cta-second-home,
  .btn-ghost-home,
  .btn-submit-donation {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
  }

  /* Table Responsive */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Footer Cards */
  .fusion-tb-footer {
    padding: 40px 14px 20px !important;
  }
  .footer-inner-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .footer-card {
    padding: 20px 16px !important;
  }
}

/* ==========================================================================
   DESKTOP NAVBAR DROPDOWN STYLING & HOVER FIX (>= 993px)
   ========================================================================== */
@media (min-width: 993px) {
  /* Hide ONLY burger buttons & mobile drawer on desktop */
  button.awb-menu__m-toggle,
  .awb-menu__m-toggle,
  .awb-menu__m-toggle-inner,
  button[class*="awb-menu__m-toggle"],
  .fusion-mobile-menu-icons,
  .fusion-mobile-nav-holder,
  .collapsed-nav-text,
  .awb-menu__open-nav-submenu_mobile,
  .ynki-mobile-nav-drawer,
  .ynki-mobile-nav-backdrop,
  #ynki-mobile-drawer,
  #ynki-mobile-backdrop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* Ensure header stacks over hero and all page content */
  #boxed-wrapper,
  #wrapper,
  .fusion-wrapper {
    overflow: visible !important;
    position: relative !important;
  }

  header,
  #fusion-header,
  .fusion-header,
  .fusion-tb-header,
  .fusion-header-wrapper,
  .fusion-fullwidth.fusion-builder-row-1 {
    position: relative !important;
    z-index: 999999999 !important;
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
  }

  .fusion-builder-row,
  .fusion-builder-row-1,
  .fusion-layout-column,
  .fusion-column-wrapper,
  nav.awb-menu,
  .awb-menu,
  .awb-menu__main-ul,
  .awb-menu__main-li {
    overflow: visible !important;
  }

  #sliders-container,
  .fusion-slider-visibility,
  main,
  #main,
  #hero-home,
  .fusion-fullwidth:not(.fusion-builder-row-1) {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Show Desktop Nav Container */
  nav.awb-menu,
  .awb-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Desktop Menu container */
  .awb-menu__main-ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 14px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .awb-menu__main-li {
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    overflow: visible !important;
  }

  .awb-menu__main-a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    font-family: 'Inter', 'Candara', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #12291e !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
    position: relative !important;
    cursor: pointer !important;
  }

  .awb-menu__main-li:hover > .awb-menu__main-a,
  .awb-menu__main-li.current-menu-item > .awb-menu__main-a,
  .awb-menu__main-li.current-menu-ancestor > .awb-menu__main-a {
    color: #117710 !important;
  }

  /* Submenu Dropdown Box - MATCHING IMAGE 1 DESIGN */
  .awb-menu__main-li .awb-menu__sub-ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 260px !important;
    background: #ffffff !important;
    border: 1px solid #d2e8d1 !important;
    border-top: 3px solid #117710 !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 999999999 !important;
  }

  /* Trigger hover and active states */
  .awb-menu__main-li:hover > .awb-menu__sub-ul,
  .awb-menu__main-li:focus-within > .awb-menu__sub-ul,
  .awb-menu__main-li.is-open > .awb-menu__sub-ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .awb-menu__sub-li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    border-bottom: 1px solid #edf2ed !important;
  }

  .awb-menu__sub-li:last-child {
    border-bottom: none !important;
  }

  .awb-menu__sub-a {
    display: block !important;
    padding: 12px 18px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e2d24 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    border-left: 3px solid transparent !important;
    background: #ffffff !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
  }

  /* Dropdown Submenu: Default bersih putih (tidak langsung aktif hijau) */
  .awb-menu__sub-a:not(:hover),
  .awb-menu__sub-li > .awb-menu__sub-a:not(:hover),
  .awb-menu__sub-li.current-menu-item > .awb-menu__sub-a:not(:hover),
  .awb-menu__sub-li.current_page_item > .awb-menu__sub-a:not(:hover),
  .awb-menu__sub-li.menu-item-home > .awb-menu__sub-a:not(:hover) {
    background: #ffffff !important;
    color: #1e2d24 !important;
    border-left: 3px solid transparent !important;
    padding-left: 18px !important;
  }

  /* Animasi hover dropdown */
  .awb-menu__sub-a:hover,
  .awb-menu__sub-li:hover > .awb-menu__sub-a {
    background: #f0fdf4 !important;
    color: #117710 !important;
    border-left: 3px solid #117710 !important;
    padding-left: 22px !important;
  }
}



/* ==========================================================================
   MOBILE DRAWER & ACCORDION NAVIGATION STYLES
   ========================================================================== */
.ynki-mobile-nav-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 2147483640 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.ynki-mobile-nav-backdrop.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.ynki-mobile-nav-drawer {
  position: fixed !important;
  top: 0 !important;
  right: -100% !important;
  width: 320px !important;
  max-width: 88vw !important;
  height: 100vh !important;
  background: #ffffff !important;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.2) !important;
  z-index: 2147483645 !important;
  display: flex !important;
  flex-direction: column !important;
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.ynki-mobile-nav-drawer.active {
  right: 0 !important;
}

/* Drawer Header */
.ynki-mobile-nav-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #eef4f0 !important;
  background: #fdfdfd !important;
}

.ynki-mobile-nav-logo img {
  height: 38px !important;
  width: auto !important;
  display: block !important;
}

.ynki-mobile-nav-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #fff3e6 !important;
  border: 1px solid rgba(255, 128, 0, 0.4) !important;
  color: #ff8000 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2147483647 !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}

.ynki-mobile-nav-close:hover,
.ynki-mobile-nav-close:active {
  background: #ff8000 !important;
  color: #ffffff !important;
}

/* Drawer Menu List */
.ynki-mobile-nav-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  flex: 1 !important;
}

.ynki-mobile-nav-item {
  list-style: none !important;
  border-bottom: 1px solid #f2f6f3 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ynki-mobile-nav-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
}

.ynki-mobile-nav-link {
  display: block !important;
  flex: 1 !important;
  padding: 13px 4px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #12291e !important;
  text-decoration: none !important;
}

.ynki-mobile-nav-link:hover,
.ynki-mobile-nav-link.active {
  color: #117710 !important;
}

.ynki-mobile-nav-toggle-btn {
  background: #eaf6ea !important;
  border: 1px solid #c8e6c7 !important;
  color: #117710 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ynki-mobile-nav-toggle-btn.open {
  background: #ff8000 !important;
  border-color: #ff8000 !important;
  color: #ffffff !important;
}

/* Accordion Submenu */
.ynki-mobile-submenu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 8px 0 !important;
  background: #f8faf8 !important;
  display: none !important;
}

.ynki-mobile-submenu.open {
  display: block !important;
}

.ynki-mobile-submenu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ynki-mobile-submenu li a {
  display: block !important;
  padding: 10px 24px 10px 32px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #3b5045 !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
  transition: all 0.2s ease !important;
}

.ynki-mobile-submenu li a:hover {
  background: #eef6ee !important;
  color: #117710 !important;
  border-left-color: #117710 !important;
  padding-left: 36px !important;
}

/* Drawer Footer */
.ynki-mobile-nav-footer {
  padding: 18px 20px 24px !important;
  border-top: 1px solid #eef4f0 !important;
  background: #fafcfa !important;
}

.btn-mobile-nav-donate {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #B22231 !important;
  color: #ffffff !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(178, 34, 49, 0.25) !important;
}

.btn-mobile-nav-donate:hover {
  background: #941724 !important;
}

/* =====================================================
   UNIVERSAL CTA BANNER & WATERMARK SYSTEM (NATURE FOR LIVINGS)
   Matching Gambar 1 (Home), Gambar 2 (Sejarah), Gambar 3 (Tim), Gambar 4 (LGOS)
   ===================================================== */
.gerakan-box,
.positioning-cta-box,
.join-banner-box,
.unduh-card,
.ynki-watermark-banner {
  background: linear-gradient(135deg, #0c500b 0%, #082e07 100%) !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(8, 46, 7, 0.28) !important;
  z-index: 1 !important;
}

.gerakan-box,
.positioning-cta-box,
.join-banner-box,
.ynki-watermark-banner {
  padding: 60px 48px !important;
  text-align: center !important;
}

/* Background Watermark Text "NATURE FOR LIVINGS" */
.gerakan-box::before,
.positioning-cta-box::before,
.join-banner-box::before,
.unduh-card::before,
.ynki-watermark-banner::before {
  content: "NATURE FOR LIVINGS" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: clamp(38px, 6.5vw, 88px) !important;
  font-weight: 900 !important;
  color: rgba(255, 255, 255, 0.055) !important;
  white-space: nowrap !important;
  letter-spacing: 8px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  font-family: 'Outfit', 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-transform: uppercase !important;
  user-select: none !important;
  line-height: 1 !important;
}

/* Ensure all content inside floats cleanly above the watermark */
.gerakan-box > *,
.positioning-cta-box > *,
.join-banner-box > *,
.unduh-card > *,
.ynki-watermark-banner > * {
  position: relative !important;
  z-index: 1 !important;
}

/* =====================================================
   PROGRAM CTA FULL-WIDTH SECTIONS WITH NATURE FOR LIVINGS WATERMARK
   ===================================================== */
/* =====================================================
   PROGRAM & GENERAL CTA FULL-WIDTH SECTIONS WITH NATURE FOR LIVINGS WATERMARK
   ===================================================== */
#lg-cta,
#nc-cta,
#sus-cta,
#int-cta,
#inst-cta,
#porto-cta,
#dampak-mel,
.program-cta-section,
.cta-section {
  background: linear-gradient(135deg, #0c500b 0%, #082e07 100%) !important;
  padding: 90px 24px !important;
  text-align: center !important;
  margin-top: 48px !important;
  position: relative !important;
  overflow: hidden !important;
}

#lg-cta::before,
#nc-cta::before,
#sus-cta::before,
#int-cta::before,
#inst-cta::before,
#porto-cta::before,
#dampak-mel::before,
.program-cta-section::before,
.cta-section::before {
  content: "NATURE FOR LIVINGS" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: clamp(38px, 6.5vw, 88px) !important;
  font-weight: 900 !important;
  color: rgba(255, 255, 255, 0.055) !important;
  white-space: nowrap !important;
  letter-spacing: 8px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  font-family: 'Outfit', 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-transform: uppercase !important;
  user-select: none !important;
  line-height: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

#lg-cta > *,
#nc-cta > *,
#sus-cta > *,
#int-cta > *,
#inst-cta > *,
#porto-cta > *,
#dampak-mel > *,
.program-cta-section > *,
.cta-section > * {
  position: relative !important;
  z-index: 1 !important;
}

/* =====================================================
   SEKSI DENGAN GELEMBUNG POJOK KANAN ATAS (STATS & HASIL STRATEGIS)
   ===================================================== */
#stats-home,
#lg-hasil,
#nc-hasil,
#sus-hasil,
#int-hasil,
#inst-hasil,
#dampak-angka,
#liputan-stats,
.stats-strip,
.hasil-strategis-section {
  background: #117710 !important;
  position: relative !important;
  overflow: hidden !important;
}

#stats-home,
#lg-hasil,
#nc-hasil,
#sus-hasil,
#int-hasil,
#inst-hasil,
.hasil-strategis-section {
  padding: 70px 24px !important;
}

#dampak-angka,
#liputan-stats {
  padding: 64px 24px !important;
  margin-top: 48px !important;
}

#stats-home::before,
#lg-hasil::before,
#nc-hasil::before,
#sus-hasil::before,
#int-hasil::before,
#inst-hasil::before,
#dampak-angka::before,
#liputan-stats::before,
.stats-strip::before,
.hasil-strategis-section::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  right: -10% !important;
  width: 500px !important;
  height: 500px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
}

#stats-home > *,
#lg-hasil > *,
#nc-hasil > *,
#sus-hasil > *,
#int-hasil > *,
#inst-hasil > *,
#dampak-angka > *,
#liputan-stats > *,
.stats-strip > *,
.hasil-strategis-section > * {
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================================
   UNIVERSAL NAVBAR SUBMENU & HOVER ANIMATION SYSTEM
   Semua item dropdown navbar (Sejarah Visi Misi, Tim & Pengurus, LGOS, Portofolio,
   Landscape Governance, Natural Capital, Sustainable Commodity, Landscape Intelligence,
   Institutional Partnership, Dampak, Kisah Perubahan, Liputan Media, News & Features,
   Penelitian & Laporan, Analisis & Kebijakan, Perspektif Budaya, Data Spasial GIS, Story Foto Video)
   memiliki animasi hover konsisten: background hijau lembut, garis indikator hijau kiri,
   teks hijau brand, dan pergeseran halus padding-left.
   ========================================================================== */
.awb-menu__sub-ul {
  background: #ffffff !important;
  border: 1px solid #d2e8d1 !important;
  border-top: 3px solid #117710 !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.awb-menu__sub-li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
  border-bottom: 1px solid #edf2ed !important;
}

.awb-menu__sub-li:last-child {
  border-bottom: none !important;
}

.awb-menu__sub-a,
.sub-menu li a,
.awb-menu__sub-ul li a {
  display: block !important;
  padding: 12px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1e2d24 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-left: 3px solid transparent !important;
  background: #ffffff !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.awb-menu__sub-li > .awb-menu__sub-a:not(:hover),
.awb-menu__sub-li.current-menu-item > .awb-menu__sub-a:not(:hover),
.awb-menu__sub-li.current_page_item > .awb-menu__sub-a:not(:hover),
.awb-menu__sub-li.menu-item-home > .awb-menu__sub-a:not(:hover) {
  background: #ffffff !important;
  color: #1e2d24 !important;
  border-left: 3px solid transparent !important;
  padding-left: 18px !important;
}

.awb-menu__sub-a:hover,
.sub-menu li a:hover,
.awb-menu__sub-ul li a:hover,
.awb-menu__sub-li:hover > .awb-menu__sub-a {
  background: #f0fdf4 !important;
  color: #117710 !important;
  border-left: 3px solid #117710 !important;
  padding-left: 24px !important;
}

/* ==========================================================================
   UNIVERSAL SECTION BADGE & SECTION DIVIDER (ORANGE & ALTERNATING)
   ========================================================================== */
.section-badge,
.section-badge.green,
.section-badge.purple,
.section-badge-orange,
.section-badge-green {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #FF8000 !important;
  background: #fff3e6 !important;
  border: 1px solid rgba(255, 128, 0, 0.35) !important;
  padding: 5px 16px !important;
  border-radius: 50px !important;
  margin-bottom: 14px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}

/* For dark background hero or CTA sections where .white is explicitly needed */
.section-badge.white {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Base divider-line & section-divider */
.section-divider,
.divider-line {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.section-divider .line,
.divider-line .line {
  flex: 1 !important;
  height: 1px !important;
  background: #d2e8d1 !important;
}

/* Alternating Alignment States (Left and Right) */
.divider-line.align-left,
.section-divider.align-left {
  justify-content: flex-start !important;
  text-align: left !important;
}
.divider-line.align-left .section-badge,
.section-divider.align-left .section-badge {
  order: 1 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.divider-line.align-left .line,
.section-divider.align-left .line {
  order: 2 !important;
  display: block !important;
}

.divider-line.align-right,
.section-divider.align-right {
  justify-content: flex-end !important;
  text-align: right !important;
}
.divider-line.align-right .line,
.section-divider.align-right .line {
  order: 1 !important;
  display: block !important;
}
.divider-line.align-right .section-badge,
.section-divider.align-right .section-badge {
  order: 2 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.divider-line.align-center,
.section-divider.align-center {
  justify-content: center !important;
  text-align: center !important;
}
.divider-line.align-center .line,
.section-divider.align-center .line {
  display: block !important;
}
.divider-line.align-center .section-badge,
.section-divider.align-center .section-badge {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Liputan Media Interactive Filter Styling */
.filter-tag {
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.25s ease !important;
}
.filter-tag:hover {
  background: #117710 !important;
  color: #ffffff !important;
  border-color: #117710 !important;
  transform: translateY(-2px);
}
.filter-tag.active {
  background: #117710 !important;
  color: #ffffff !important;
  border-color: #117710 !important;
  box-shadow: 0 4px 12px rgba(17, 119, 16, 0.25) !important;
}
.liputan-card,
.doc-card {
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

/* Footer Phone Link */
.ynki-footer-phone-p a.ynki-phone-link {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}
.ynki-footer-phone-p a.ynki-phone-link:hover {
  opacity: 0.85 !important;
  color: #a3e0a2 !important;
}

/* Mobile Specific Refinements (Screens <= 768px) */
@media (max-width: 768px) {
  /* Mengapa Visual & Badge: Keep badge compact so image is clearly visible */
  .mengapa-visual img {
    height: 240px !important;
    min-height: 220px !important;
    object-fit: cover !important;
  }
  .mengapa-visual-badge {
    bottom: 12px !important;
    left: 12px !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    max-width: 78% !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  }
  .mengapa-visual-badge strong {
    font-size: 18px !important;
    margin-bottom: 2px !important;
    line-height: 1.1 !important;
  }

  /* Pilar Program Strategis: Compact spacing on mobile */
  #program-pilar,
  #tiga-pilar {
    padding: 42px 16px !important;
  }
  .pilar-grid {
    gap: 14px !important;
    margin-top: 24px !important;
  }
  .pilar-card {
    padding: 20px 18px !important;
    border-radius: 14px !important;
  }
  .pilar-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }
  .pilar-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  .pilar-num {
    font-size: 10.5px !important;
    margin-bottom: 6px !important;
    letter-spacing: 1.2px !important;
  }
  .pilar-card h3 {
    font-size: 16.5px !important;
    margin-bottom: 8px !important;
    line-height: 1.35 !important;
  }
  .pilar-card p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin: 0 0 16px !important;
  }
  .pilar-link {
    font-size: 12.5px !important;
  }
}

/* ==========================================================================
   PAGE LOAD FADE-IN & SCROLL REVEAL ANIMATIONS (ALL PAGES)
   ========================================================================== */
@keyframes ynkiPageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

body {
  animation: ynkiPageFadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* Hero Section Fade-in on Page Load (All Pages) */
.hero-section,
[id^="hero-"],
.hero-inner,
.hero-content,
.hero-content-sejarah,
.hero-content-tim,
.hero-content-trans,
.hero-content-port,
.hero-h1,
.hero-section h1,
[id^="hero-"] h1,
.hero-sub,
.hero-desc,
.hero-desc-sejarah,
.hero-desc-tim,
.hero-desc-trans,
.hero-btns,
.hero-actions,
.hero-actions-sejarah,
#sliders-container {
  animation: ynkiHeroReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* Scroll Fade In Elements */
.ynki-fade-in,
.ynki-section.ynki-fade-in {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

.ynki-fade-in.ynki-visible,
.ynki-section.ynki-fade-in.ynki-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger delay classes if elements are in a grid */
.ynki-fade-delay-1 { transition-delay: 0.1s !important; }
.ynki-fade-delay-2 { transition-delay: 0.2s !important; }
.ynki-fade-delay-3 { transition-delay: 0.3s !important; }

/* Respect user's accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  body,
  .hero-section,
  [id^="hero-"],
  .hero-inner {
    animation: none !important;
  }
  .ynki-fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   CIRCULAR GALLERY - MITRA & PENDUKUNG KAMI
   ========================================================================== */
#ynki-circular-gallery-wrap {
  position: relative;
  width: 100%;
  margin: 30px auto 10px;
  overflow: hidden;
}

#ynki-circular-gallery-canvas,
.circular-gallery {
  width: 100%;
  height: 560px;
  position: relative;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

#ynki-circular-gallery-canvas:active,
.circular-gallery:active {
  cursor: grabbing;
}

#ynki-circular-gallery-canvas:focus-visible,
.circular-gallery:focus-visible {
  outline: 2px solid #117710;
  outline-offset: 4px;
}

#ynki-circular-gallery-canvas canvas,
.circular-gallery canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.ynki-gallery-hint {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #536b5f;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ynki-gallery-hint svg {
  width: 16px;
  height: 16px;
  stroke: #117710;
}

@media (max-width: 768px) {
  #ynki-circular-gallery-canvas {
    height: 420px;
  }
}

/* ==========================================================================
   HERO FULL-WIDTH EDGE-TO-EDGE SYSTEM
   Menghapus padding samping dan margin default Avada/kontainer pada #main
   sehingga background image hero membentang penuh (100% full width) ke tepi kiri & kanan.
   Halaman kontak-kami dan ikut-terlibat/ikut-serta tetap sesuai layout aslinya.
   ========================================================================== */
#main {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

#main > .fusion-row,
#main > div > .fusion-row,
#main .fusion-row:has(.hero-section),
#main .fusion-row:has([id^="hero-"]) {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#content.full-width,
#main #content,
#main .post-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Pastikan seluruh hero section pada seluruh halaman membentang 100% full-width */
#hero-home,
#hero-sejarah,
#hero-tim,
#hero-lgos,
#hero-trans,
#hero-lg,
#hero-nc,
#hero-sus,
#hero-int,
#hero-inst,
#hero-porto,
.hero-section,
[id^="hero-"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 992px) {
  #main > .fusion-row,
  #main > div > .fusion-row,
  #main .fusion-row:has(.hero-section),
  #main .fusion-row:has([id^="hero-"]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ==========================================================================
   GLOBAL FIX: HEADER DROPDOWN ARROWS, FOOTER CONTACT ICONS & SCROLL TO TOP
   ========================================================================== */

/* 1. Header Dropdown Indicator (Segitiga Bawah Menu Header) */
.awb-menu__open-nav-submenu-hover,
.awb-menu__open-nav-submenu_mobile {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.awb-menu__open-nav-submenu-hover:before,
.awb-menu__open-nav-submenu_mobile:before {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) translateY(-2px) !important;
  margin-left: 6px !important;
  font-family: inherit !important;
  vertical-align: middle !important;
  transition: transform 0.2s ease !important;
}

.awb-menu__main-li:hover .awb-menu__open-nav-submenu-hover:before,
.awb-menu__main-li.is-open .awb-menu__open-nav-submenu-hover:before {
  transform: rotate(225deg) translateY(-2px) !important;
}

/* 2. Scroll-to-Top Button (#toTop Segitiga Atas) */
#toTop,
a#toTop,
.fusion-top-top-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #333333 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

#toTop:hover,
a#toTop:hover,
.fusion-top-top-link:hover {
  background-color: #117710 !important;
}

#toTop:before,
a#toTop:before,
.fusion-top-top-link:before {
  content: '' !important;
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  border-left: 2.5px solid #ffffff !important;
  border-top: 2.5px solid #ffffff !important;
  transform: rotate(45deg) !important;
  margin-top: 4px !important;
  font-family: inherit !important;
  line-height: normal !important;
}

/* 3. Footer Email & Phone Icons */
.ynki-footer-contact-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.ynki-footer-contact-icon:hover {
  background: #117710 !important;
  border-color: #117710 !important;
  transform: scale(1.08) !important;
}

.ynki-footer-contact-icon svg {
  width: 14px !important;
  height: 14px !important;
  fill: #ffffff !important;
}

.fusion-tb-footer p {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}

.fusion-tb-footer p a,
.fusion-tb-footer a.ynki-email-link,
.fusion-tb-footer .ynki-email-text {
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}

@media (max-width: 480px) {
  .fusion-tb-footer a.ynki-email-link,
  .fusion-tb-footer .ynki-email-text {
    font-size: 13px !important;
  }
}

/* ==========================================================================
   HERO DESCRIPTION UNIVERSAL 20PX ENFORCEMENT
   ========================================================================== */
.hero-desc,
.hero-sub,
.hero-desc-sejarah,
.hero-desc-tim,
.hero-desc-trans,
.pptx-hero-desc,
.ynki-hero-sub,
.hero-section p.hero-sub,
.hero-section p.hero-desc,
#hero-sejarah p.hero-desc-sejarah,
#hero-tim p.hero-desc-tim,
#hero-trans p.hero-desc-trans,
#hero-home p.hero-desc,
#hero-lg p.hero-sub,
#hero-nc p.hero-sub,
#hero-sus p.hero-sub,
#hero-int p.hero-sub,
#hero-inst p.hero-sub,
.hero-inner p.hero-sub,
.hero-inner p.hero-desc {
  font-size: 20px !important;
  line-height: 1.8 !important;
}