html{
  scroll-behavior: smooth;
}

#causes,
#what-we-do,
#blog,
#contact{
  scroll-margin-top: 30px;
}

:root{
    --bg:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --line:#e5e7eb;
  
    --primary:#f04e45;     /* vibe charity theme */
    --primary2:#ff6b5f;
    --dark:#0b1220;

    --green:#0b5f58;

  
    --radius:18px;
    --shadow: 0 10px 30px rgba(16,24,40,.10);
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
  }
  
  h1,h2,h3{
    font-family:Poppins, Inter, system-ui, sans-serif;
    margin:0 0 12px;
    letter-spacing:-.02em;
  }
  p{margin:0 0 14px; color:var(--muted); line-height:1.7}
  
  a{color:inherit; text-decoration:none}
  .container{width:min(1140px, 92%); margin-inline:auto}
  
  .sep{opacity:.5; margin:0 8px}
  .muted{color:rgba(255,255,255,.75)}
  
  .pill{
    background:rgba(255,255,255,.16);
    padding:4px 10px;
    border-radius:999px;
    font-weight:600;
    font-size:12px;
  }
  
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 16px;
    border-radius:9px;
    border:1px solid transparent;
    font-weight:700;
    font-size:14px;
    transition:.2s ease;
    cursor:pointer;
    user-select:none;
  }
  .btn--primary{
    background:linear-gradient(135deg, var(--primary), var(--primary2));
    color:#fff;
    box-shadow:0 12px 30px rgba(240,78,69,.25);
  }
  .btn--primary:hover{transform:translateY(-1px)}
  .btn--ghost{
    border-color:rgba(255,255,255,.25);
    color:#fff;
    background:rgba(255,255,255,.08);
  }
  .header .btn--ghost{
    border-color:var(--line);
    color:var(--text);
    background:#fff;
  }
  .btn--ghost:hover{filter:brightness(.98)}
  .btn--small{padding:10px 14px; font-size:13px}
  .btn--block{width:100%}
  
  .input{
    width:100%;
    padding:14px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    outline:none;
    font-size:14px;
  }
  .input:focus{border-color:rgba(240,78,69,.55); box-shadow:0 0 0 4px rgba(240,78,69,.12)}
  
  /* Topbar */
  .topbar{
    background:var(--green);
    color:#fff;
    font-size:13px;
  }
  .topbar__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 0;
    gap:12px;
    flex-wrap:wrap;
  }
  .topbar__left{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .topbar__right{display:flex; align-items:center; gap:12px}
  .topbar__link{opacity:.92}
  .topbar__link:hover{opacity:1}
  
  /* Header */
  .header{
    position:sticky;
    top:0;
    background:#fff;
    border-bottom:1px solid rgba(229,231,235,.7);
    z-index:50;
  }
  .header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
    gap:14px;
  }
  .brand{display:flex; align-items:center; gap:12px}
  .brand__logo{
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:#fff;
    overflow:hidden;
    flex-shrink:0;
  }
  .brand__logoImg{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }
  .brand__name{font-weight:800}
  .brand__tag{font-size:12px;color:var(--muted); margin-top:2px}
  
  .nav{display:flex; align-items:center; gap:18px}
  .nav__link{font-weight:700; color:#111827; font-size:14px; opacity:.85}
  .nav__link:hover{opacity:1}
  
  .header__actions{display:flex; align-items:center; gap:10px}
  .burger{
    display:none;
    width:44px;height:44px;
    border-radius:14px;
    border:1px solid var(--line);
    background:#fff;
    padding:10px;
  }
  .burger span{display:block; height:2px; background:#111827; margin:5px 0; border-radius:2px}
  
  /* Hero */
  .hero{
    background:
      radial-gradient(1000px 400px at 10% 10%, rgba(240,78,69,.20), transparent 60%),
      radial-gradient(1000px 400px at 90% 10%, rgba(255,107,95,.18), transparent 60%),
      linear-gradient(180deg, #fff, #fff);
    padding:54px 0 28px;
  }
  .hero__inner{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap:28px;
    align-items:stretch;
  }
  .hero__kicker{
    display:inline-flex;
    gap:8px;
    align-items:center;
    font-weight:800;
    color:var(--primary);
    margin-bottom:10px;
  }
  .hero h1{font-size:44px; line-height:1.08}
  .hero__cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
  .hero__media{
    position:relative;
    min-height:360px;
  }
  .hero__image{
    position:absolute;
    inset:0;
    border-radius:var(--radius);
    background:
      linear-gradient(135deg, rgba(17,24,39,.06), rgba(240,78,69,.10)),
      url("./assets/gallery/27.jpeg");
    background-size:cover;
    background-position:center;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .hero__card{
    position:absolute;
    right:16px;
    bottom:16px;
    width:min(300px, 92%);
    background:rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    border:1px solid rgba(229,231,235,.7);
    border-radius:20px;
    padding:14px;
    box-shadow:0 18px 40px rgba(16,24,40,.14);
  }
  .hero__cardTitle{font-weight:900; font-family:Poppins; margin-bottom:6px}
  .hero__cardText{color:var(--muted); font-size:13px; margin-bottom:12px}
  
  .hero__badges{
    display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;
  }
  .badge{
    border:1px solid rgba(229,231,235,.9);
    border-radius:16px;
    padding:12px 14px;
    min-width:140px;
    background:#fff;
    box-shadow: 0 10px 24px rgba(16,24,40,.06);
  }
  .badge__num{font-family:Poppins; font-size:18px; font-weight:900}
  .badge__text{color:var(--muted); font-size:13px}
  
  /* Sections */
  .section{padding:70px 0}
  .section--alt{background: #fafafa}
  .section__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px;
  }
  .section__head--tight{margin-bottom:18px}
  .section__kicker{
    color:var(--primary);
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:12px;
    margin-bottom:8px;
  }
  .section h2{font-size:32px}
  
  .grid{display:grid; gap:18px}
  .grid--3{grid-template-columns: repeat(3, 1fr)}
  .grid--6{grid-template-columns: repeat(6, 1fr)}
  
  /* Cards */
  .card{
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid rgba(229,231,235,.9);
    background:#fff;
    box-shadow: 0 14px 34px rgba(16,24,40,.07);

    display:flex;
    flex-direction:column;
  }
  .card__thumb{
    height:180px;
    background:
      linear-gradient(135deg, rgba(240,78,69,.20), rgba(255,107,95,.12)),
      url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=1200&q=60");
    background-size:cover;
    background-position:center;
  }
  .card__body{
    padding:16px;
    display:flex;
    flex-direction:column;
    flex:1;
  }

  /* Tombol otomatis turun ke bawah */
.card__body form{
  margin-top:auto;
}

  .card__title{font-size:18px; margin-bottom:10px}
  .card__meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    color:var(--muted);
    margin-bottom:12px;
  }
  .progress{
    height:10px;
    background:#f3f4f6;
    border-radius:999px;
    overflow:hidden;
    border:1px solid rgba(229,231,235,.8);
  }
  .progress__bar{
    height:100%;
    background:linear-gradient(135deg, var(--primary), var(--primary2));
  }
  .progress__label{
    font-size:12px;
    margin-top:8px;
    color:var(--muted);
  }
  .card__text{font-size:14px; margin:10px 0 14px}
  
  /* Split section */
  .split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:26px;
    align-items:center;
  }
  .videoMock{
    border-radius:var(--radius);
    min-height:360px;
    background:
      linear-gradient(135deg, rgba(17,24,39,.20), rgba(240,78,69,.18)),
      url("https://images.unsplash.com/photo-1526256262350-7da7584cf5eb?auto=format&fit=crop&w=1200&q=60");
    background-size:cover;
    background-position:center;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
  }
  .videoMock__btn{
    position:absolute;
    left:18px; bottom:18px;
    width:58px;height:58px;
    border-radius:999px;
    display:grid;place-items:center;
    background:rgba(255,255,255,.92);
    font-weight:900;
  }
  .videoMock__text{
    position:absolute;
    left:90px; bottom:32px;
    color:#fff;
    font-weight:900;
    text-shadow:0 8px 22px rgba(0,0,0,.35);
  }
  
  .iconGrid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:12px;
    margin:18px 0;
  }
  .iconCard{
    display:flex;
    gap:12px;
    padding:12px;
    border-radius:16px;
    border:1px solid rgba(229,231,235,.9);
    background:#fff;
  }
  .iconCard__ic{
    width:44px;height:44px;
    border-radius:14px;
    display:grid;place-items:center;
    background:#159e93;
    font-size:18px;
  }
  
  /* Counters */
  .counters{
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    gap:16px;
  }

  .counter{
    border-radius:18px;
    padding:18px;
    border:1px solid rgba(229,231,235,.9);
    background:#fff;
    text-align: center;
    box-shadow: 0 12px 28px rgba(16,24,40,.06);
  }
  .counter__num{
    font-family:Poppins;
    font-weight:900;
    font-size:26px;
  }
  .counter__label{color:var(--muted); margin-top:6px}
  
  /* Newsletter + Gallery */
  .newsletter{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    padding:22px;
    border-radius:22px;
    border:1px solid rgba(229,231,235,.9);
    background:#fff;
    box-shadow: 0 16px 38px rgba(16,24,40,.08);
  }
  .newsletter__form{
    display:flex;
    gap:10px;
    min-width:min(460px, 100%);
  }
  .gallery{margin-top:22px}
  .gallery__item{
    aspect-ratio: 1 / 1;
    border-radius:16px;
    border:1px solid rgba(229,231,235,.9);
    background:
      linear-gradient(135deg, rgba(240,78,69,.14), rgba(17,24,39,.06)),
      url("https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?auto=format&fit=crop&w=900&q=60");
    background-size:cover;
    background-position:center;
    box-shadow: 0 12px 24px rgba(16,24,40,.06);
  }
  
  /* Footer */
  .footer{
    background:var(--green);
    color:#fff;
    padding:56px 0 24px;
  }

  .footer__logo{
    width:42px;
    height:42px;
    object-fit:contain;
    display:block;
    border-radius:12px;
    background:#fff;
    padding:4px;
  }
  .footer__aboutHead{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
  }

  .footer__grid{
    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap:22px;
  }
  .footer__title{
    font-family:Poppins;
    font-weight:900;
    margin:0 0 12px;
  }
  .footer__text{color:rgba(255,255,255,.72)}
  .footer__meta{margin-top:14px; color:rgba(255,255,255,.80); font-size:14px; line-height:1.8}
  .footer__list{list-style:none; padding:0; margin:0; color:rgba(255,255,255,.76); line-height:2}
  .footer__list a{color:rgba(255,255,255,.86)}
  .footer__list a:hover{color:#fff}
  .footer__bottom{
    margin-top:28px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    color:rgba(255,255,255,.72);
  }
  .footer__social{display:flex; gap:10px}
  .footer__social a{
    width:36px;height:36px;
    display:grid;place-items:center;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);
  }
  
  /* mini urgent causes */
  .mini-causes{display:grid; gap:12px}
  .mini-causes__item{
    display:flex; gap:10px;
    padding:10px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
  }
  .mini-causes__thumb{
    width:46px;height:46px;
    border-radius:14px;
    background:linear-gradient(135deg, rgba(240,78,69,.35), rgba(255,107,95,.18));
  }
  .mini-causes__name{font-weight:900}
  .mini-causes__sub{color:rgba(255,255,255,.68); font-size:13px; margin-top:2px}
  
  /* Responsive */
  @media (max-width: 980px){
    .hero__inner{grid-template-columns:1fr}
    .hero h1{font-size:38px}
    .grid--3{grid-template-columns:1fr}
    .grid--6{grid-template-columns:repeat(3,1fr)}
    .split{grid-template-columns:1fr}
    .counters{grid-template-columns:repeat(3,1fr)}
    .iconGrid{
      grid-template-columns: repeat(1, 1fr);
    }
    .footer__grid{grid-template-columns:1fr 1fr}
    .newsletter{flex-direction:column; align-items:stretch}
    .newsletter__form{min-width:100%}
    
    .nav{
      /* jangan display:none */
      position:absolute;
      left:0; right:0;
      top:calc(100% + 1px);
      background:#fff;
      border-bottom:1px solid var(--line);
      padding:0 4%;              /* padding vertikal kita animasi di inner space */
      flex-direction:column;
      gap:12px;
  
      display:flex;
  
      /* animasii */
      max-height:0;
      opacity:0;
      transform:translateY(-8px);
      overflow:hidden;
      pointer-events:none;
      transition: max-height .28s ease, opacity .2s ease, transform .28s ease;
    }
  
    .nav.is-open{
      max-height:340px;          /* sesuaikan kalau linknya banyak */
      opacity:1;
      transform:translateY(0);
      pointer-events:auto;
  
      padding-top:14px;
      padding-bottom:14px;
    }
  
    .burger{display:inline-block}
  }
  @media (max-width: 520px){
    .grid--6{grid-template-columns:repeat(3,1fr)}
    .hero h1{font-size:32px}
  }

  /* clause  */

  .card__thumb--poster{
    position:relative;
    height:180px;
    background-size:cover;
    background-position:center;
  }
  .playBtn{
    position:absolute;
    left:14px;
    bottom:14px;
    width:54px;
    height:54px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.92);
    font-weight:900;
    cursor:pointer;
    box-shadow:0 14px 30px rgba(0,0,0,.18);
  }
  .playBtn:hover{transform:translateY(-1px)}
  
  .modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
    padding:18px;
  }
  .modal.is-open{display:flex}
  .modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.6);
  }
  .modal__content{
    position:relative;
    width:min(920px, 100%);
    background:#000;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 30px 70px rgba(0,0,0,.35);
  }
  .modal__close{
    position:absolute;
    top:10px;
    right:10px;
    width:42px;height:42px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.12);
    color:#fff;
    cursor:pointer;
    z-index:2;
  }
  #modalVideo{
    width:100%;
    height:auto;
    display:block;
    max-height:75vh;
  }

  /* Thumbnail video section */
.videoThumb{
  border-radius: var(--radius);
  min-height: 360px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(229,231,235,.9);
}
.videoThumb::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(17,24,39,.35), rgba(240,78,69,.22));
  pointer-events: none;
}
.videoThumb__label{
  position:absolute;
  left:20px;
  bottom:20px;
  z-index:2;
  color:#fff;
  font-weight:900;
  font-family:Poppins, Inter, system-ui, sans-serif;
  text-shadow:0 10px 24px rgba(0,0,0,.35);
}

/* GALLERY */

/* gallery item jadi button */
.gallery__item{
  aspect-ratio: 1 / 1;
  border-radius:16px;
  border:1px solid rgba(229,231,235,.9);
  background:
    linear-gradient(135deg, rgba(240,78,69,.14), rgba(17,24,39,.06));
  background-size:cover;
  background-position:center;
  box-shadow: 0 12px 24px rgba(16,24,40,.06);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.gallery__item:hover{transform:translateY(-1px)}
.gallery__item{transition:.2s ease}

/* icon play di thumbnail video */
.gallery__play{
  position:absolute;
  left:12px;
  bottom:12px;
  width:44px;height:44px;
  border-radius:999px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  font-weight:900;
}

/* Gallery modal */
.gmodal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:18px;
}
.gmodal.is-open{display:flex}
.gmodal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}
.gmodal__content{
  position:relative;
  width:min(980px, 100%);
  background:#000;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.gmodal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  z-index:3;
}
.gmodal__stage{
  width:100%;
  height: min(78vh, 680px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}
.gmodal__stage img,
.gmodal__stage video{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
}
.gmodal__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  z-index:3;
  font-size:28px;
  display:grid;place-items:center;
}
.gmodal__nav--left{left:10px}
.gmodal__nav--right{right:10px}

.gmodal__counter{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:3;
  color:rgba(255,255,255,.85);
  font-weight:800;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  padding:8px 10px;
  border-radius:14px;
}


/* FOCUS SECTION */

/* Focus section (mirip gambar) */
:root{
  --focus-bg: #0f766e; /* maroon gelap */
  --focus-bg2:#0b5f58;
}


.focus{
  padding: 70px 0;
  background: radial-gradient(900px 480px at 50% 0%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(180deg, var(--focus-bg), var(--focus-bg2));
  color: #fff;
}

.focus__wrap{
  display: grid;
  gap: 22px;
}

.focus__item{
  text-align: center;
  border-radius: 26px;
  padding: 34px 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.focus__icon{
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
}

.focus__icon svg{
  width: 38px;
  height: 38px;
}

.focus__title{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: 30px;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.focus__text{
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255,255,255,.78);
  line-height: 1.75;
  font-size: 15px;
}

/* Desktop: boleh jadi 3 kolom biar lebih "modern" */
@media (min-width: 980px){
  .focus__wrap{
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
  .focus__item{
    text-align: center;
    padding: 36px 22px;
  }
  .focus__title{font-size: 26px;}
  .focus__text{font-size: 14px;}
}

/* ================= CAMPAIGN SECTION (FULL IMAGE SLIDER) ================= */

.campaign{
  position:relative;
  height:520px;          /* full section = gambar */
  padding:0;             /* hilangkan area bawah hijau */
  overflow:hidden;
  color:#fff;
  background:#000;       /* fallback */
}

.campaign__slider{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.campaign__track{
  height:100%;
  display:flex;
  transition: transform .45s ease;
  will-change: transform;
}

.campaign__slide{
  min-width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  position:relative;
}

.campaign__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.25),
    rgba(0,0,0,.65)
  );
}

/* Badge tetap di atas gambar */
.campaign__badge{
  position:absolute;
  top:20px;
  left:20px;
  text-align:center;
  background:#14b8a6;
  color:#fff;
  font-weight:700;
  padding:8px 16px;
  border-radius:999px;
  z-index:5;
  font-size:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}

/* Konten di atas gambar (center) */
.campaign__content{
  position:absolute;
  left:50%;
  top:55%;
  transform:translate(-50%, -50%);
  z-index:6;
  text-align:center;
  width:min(1140px, 92%);
}

.campaign__title{
  font-size:42px;
  font-weight:900;
  line-height:1.15;
  margin-bottom:14px;
  font-family:Poppins, Inter, system-ui, sans-serif;
  color:#fff;
}

.campaign__subtitle{
  font-size:18px;
  color: rgba(255,255,255,.92);
  margin-bottom:16px;
}

.campaign__meta{
  color: rgba(255,255,255,.90);
  margin-bottom:24px;
  font-size:15px;
}

.campaign__btn{
  font-size:16px;
  padding:14px 26px;
}

/* Tombol kiri/kanan */
.campaign__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  z-index:7;
  font-size:30px;
  display:grid;
  place-items:center;
  backdrop-filter: blur(6px);
}

.campaign__nav--left{ left:14px; }
.campaign__nav--right{ right:14px; }

.campaign__nav:hover{
  background:rgba(0,0,0,.5);
}

/* Responsive */
@media (max-width:768px){
  .campaign{ height:420px; }
  .campaign__title{ font-size:28px; }
  
  .campaign__nav--left{ left:7px; top:45%; }
  .campaign__nav--right{ right:7px; top:45%; }
}

.campaign__content,
.campaign__badge { pointer-events:auto; }
.campaign__slider { pointer-events:none; }
.campaign__nav { pointer-events:auto; }

.campaign__slide--video{
  background:#000;
}

.campaign__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;   /* bikin video nge-cover */
  display:block;
}


/* FOOTER */

.footer__socialLink{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  transition:.2s ease;
}





.footer__socialLink:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
}

.footer__socialIcon{
  width:18px;
  height:18px;
  display:block;
  filter: brightness(0) invert(1); /* bikin icon PNG jadi putih */
  opacity:.9;
}

/* ========= DONATE ========= */

.donateGrid{
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
}

.donateInfo{
  margin-bottom:18px;
}

@media (max-width: 980px){
  .donateGrid{
    grid-template-columns: 1fr; /* jadi atas-bawah */
  }
}

/* ========== GALLERY FOLDER =========== */

/* Folder tiles */
.galleryFolders{
  /* boleh tetap grid--6, tapi di desktop enak 4 folder: */
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px){
  .galleryFolders{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .galleryFolders{ grid-template-columns: repeat(2, 1fr); }
}

.galleryFolder{
  aspect-ratio: 1 / 1;
  border-radius:16px;
  border:1px solid rgba(229,231,235,.9);
  background-size:cover;
  background-position:center;
  box-shadow: 0 12px 24px rgba(16,24,40,.06);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  padding:14px;
  text-align:left;
  transition:.2s ease;
}

.galleryFolder:hover{ transform:translateY(-1px); }

.galleryFolder__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(17,24,39,.25), rgba(240,78,69,.20));
}

.galleryFolder__title{
  position:relative;
  z-index:2;
  display:inline-block;
  font-weight:900;
  color:#fff;
  text-shadow:0 10px 24px rgba(0,0,0,.35);
  max-width: 90%;
}

.galleryFolder__cta{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:2;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-weight:800;
  font-size:13px;
  opacity:0;
  transform:translateY(6px);
  transition:.2s ease;
}

.galleryFolder:hover .galleryFolder__cta,
.galleryFolder:focus-visible .galleryFolder__cta{
  opacity:1;
  transform:translateY(0);
}

/* toolbar */
.galleryToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 10px 0 14px;
}

.galleryTitle{
  font-weight:900;
  color: var(--text);
}

/* folder tiles */
.galleryFolder{
  aspect-ratio: 1 / 1;
  border-radius:16px;
  border:1px solid rgba(229,231,235,.9);
  background-size:cover;
  background-position:center;
  box-shadow: 0 12px 24px rgba(16,24,40,.06);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  padding:14px;
  text-align:left;
  transition:.2s ease;
}
.galleryFolder:hover{ transform:translateY(-1px); }

.galleryFolder__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(17,24,39,.25), rgba(240,78,69,.20));
}
.galleryFolder__title{
  position:relative;
  z-index:2;
  display:inline-block;
  font-weight:900;
  color:#fff;
  text-shadow:0 10px 24px rgba(0,0,0,.35);
}
.galleryFolder__cta{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:2;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-weight:800;
  font-size:13px;
  opacity:0;
  transform:translateY(6px);
  transition:.2s ease;
}
.galleryFolder:hover .galleryFolder__cta,
.galleryFolder:focus-visible .galleryFolder__cta{
  opacity:1;
  transform:translateY(0);
}

/* ========= MEDIA GRID MODAL ========= */
.mgrid{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1100;
  padding:18px;
}
.mgrid.is-open{display:flex}

.mgrid__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}

.mgrid__content{
  position:relative;
  width:min(980px, 100%);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(229,231,235,.9);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  padding:16px;
}

.mgrid__close{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid rgba(229,231,235,.9);
  background:#fff;
  cursor:pointer;
  z-index:2;
}

.mgrid__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.mgrid__title{
  font-weight:900;
  font-family:Poppins, Inter, system-ui, sans-serif;
}

.mgrid__hint{
  color:var(--muted);
  font-size:13px;
}

.mgrid__grid{
  gap:14px;
}

/* responsive grid dalam modal */
@media (max-width: 980px){
  .mgrid__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px){
  .mgrid__grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ======= DONATE - AMOUNT ======== */

.amountField{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}

.amountField:focus-within{
  border-color:rgba(240,78,69,.55);
  box-shadow:0 0 0 4px rgba(240,78,69,.12);
}

.amountField__input{
  border:none;
  border-radius:0;
  box-shadow:none;
}

.amountField__input:focus{
  border:none;
  box-shadow:none;
}

.amountField__select{
  border:none;
  border-left:1px solid var(--line);
  background:#fff;
  padding:0 16px;
  font-size:14px;
  font-weight:600;
  outline:none;
  cursor:pointer;
}

.amountField__hint{
  color:var(--muted);
  font-size:12px;
}




/* ========= TANAH SURAU ========= */

.tanahsurauCard{
  border-radius:24px;
  padding:24px;
  background:linear-gradient(180deg, #0b5f58, #0f766e);
  color:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.tanahsurauCard__badge{
  display:inline-block;
  margin-bottom:12px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  font-size:12px;
  font-weight:800;
}

.tanahsurauCard__title{
  font-size:28px;
  color:#fff;
  margin-bottom:10px;
}

.tanahsurauCard__text{
  color:rgba(255,255,255,.82);
  margin-bottom:18px;
}

.tanahsurauCard__meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:18px;
}

.tanahsurauCard__meta small{
  display:block;
  color:rgba(255,255,255,.7);
  margin-bottom:4px;
}

.tanahsurauCard__meta strong{
  color:#fff;
  font-size:16px;
}

.tanahsurauHero{
  overflow:hidden;
}

.tanahsurauHero__media{
  min-height:320px;
  background-size:cover;
  background-position:center;
}

.tanahsurauHero__body{
  padding:24px;
}

.tanahsurauHero__tag{
  display:inline-block;
  margin-bottom:12px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(240,78,69,.1);
  color:var(--primary);
  font-weight:800;
  font-size:12px;
}

.tanahsurauStats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin:18px 0 22px;
}

.tanahsurauStats__item{
  border:1px solid rgba(229,231,235,.9);
  border-radius:18px;
  padding:14px;
  background:#fff;
}

.tanahsurauStats__label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

.tanahsurauInfo{
  border-radius:24px;
}

.tanahsurauContent{
  max-width:840px;
}

.tanahsurauCta{
  margin-top:20px;
}

@media (max-width: 980px){
  .tanahsurauStats{
    grid-template-columns:1fr;
  }

  .tanahsurauCard__meta{
    grid-template-columns:1fr;
  }
}

/* ========= GALLERY CATEGORY TABS ========= */
.galleryTabs{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  margin: 14px 0 24px;
  overflow-x:auto;
  overflow-y:hidden;
  flex-wrap:nowrap;
  white-space:nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.galleryTabs::-webkit-scrollbar{
  display:none;
}

.galleryTab{
  flex:0 0 auto;
  border:none;
  background:transparent;
  color:var(--text);
  font-weight:800;
  font-size:15px;
  letter-spacing:.02em;
  text-transform:uppercase;
  cursor:pointer;
  padding:8px 10px;
  position:relative;
  transition:.2s ease;
  white-space:nowrap;
}

.galleryTab::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:0;
  height:2px;
  background:transparent;
  transition:.2s ease;
}

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

.galleryTab.is-active{
  color:var(--primary);
}

.galleryTab.is-active::after{
  background:var(--primary);
}

.galleryEmpty{
  grid-column: 1 / -1;
  text-align:center;
  padding:30px 16px;
  border:1px dashed var(--line);
  border-radius:16px;
  background:#fff;
}

/* ======== LANGUAGE ========== */

.lang-switcher{
  display:flex;
  align-items:center;
  gap:6px;
}

.lang-switcher .topbar__link.is-active{
  font-weight:800;
  text-decoration:underline;
}

@media (max-width: 980px){
  .topbar__inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .topbar__right.lang-switcher{
    width:100%;
    justify-content:flex-start;
  }
}

.langDropdown{
  display:flex;
  align-items:center;
}

.langDropdown__select{
  height:44px;
  min-width:90px;
  padding:0 40px 0 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font-size:14px;
  font-weight:700;
  outline:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  box-shadow:0 8px 20px rgba(16,24,40,.06);

  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.langDropdown__select:focus{
  border-color:rgba(240,78,69,.55);
  box-shadow:0 0 0 4px rgba(240,78,69,.12);
}

.header__actions{
  display:flex;
  align-items:center;
  gap:10px;
}

@media (max-width: 980px){
  .langDropdown__select{
    min-width:45px;
    font-size:13px;
    padding:0 34px 0 12px;
  }
}

.langDropdown{
  display:flex;
  align-items:center;
}

.langDropdown__select{
  height:44px;
  min-width:90px;
  padding:0 40px 0 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font-size:14px;
  font-weight:700;
  outline:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  box-shadow:0 8px 20px rgba(16,24,40,.06);

  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.langDropdown__select:focus{
  border-color:rgba(240,78,69,.55);
  box-shadow:0 0 0 4px rgba(240,78,69,.12);
}

/* mobile language block di menu */
.nav__mobileLang{
  display:none;
  width:100%;
  padding-top:8px;
  border-top:1px solid var(--line);
  margin-top:4px;
}

.nav__mobileLangLabel{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}

/* default desktop */
.langDropdown--desktop{
  display:flex;
}

@media (max-width: 980px){
  .langDropdown--desktop{
    display:none;
  }

  .nav__mobileLang{
    display:block;
  }

  .nav__mobileLang .langDropdown__select{
    width:100%;
    min-width:100%;
    height:46px;
  }

  .nav .btn,
  .nav__mobileLang,
  .nav__link{
    width:100%;
  }
}