/* Penyesuaian Bahagia Group di atas template (warna merek: biru, oranye, navy) */
:root{--clr-primary:#2563eb;--clr-primary-dark:#1d4ed8;--clr-secondary:#ee6a24;--clr-secondary-light:#ffe6d8;--shadow-lift:0 20px 45px -12px rgba(37, 99, 235,.35)}
.unit-item[hidden],.proj-item[hidden]{display:none!important}
.hero-avatars img{width:44px;height:44px;border-radius:50%}
/* Pelacak status booking */
.trk{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.trk li{display:flex;align-items:center;gap:12px;color:var(--clr-muted,#64748b);font-weight:500}
.trk li span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e5e7eb;color:#475569;font-weight:700;font-size:.85rem;flex:none}
.trk li.done{color:var(--clr-primary-dark)}.trk li.done span{background:var(--clr-primary);color:#fff}
.trk li.now{color:#111827;font-weight:700}.trk li.now span{background:var(--clr-secondary);color:#fff;box-shadow:0 0 0 5px rgba(238,106,36,.18)}

/* ==========================================================
   Responsif & halus (v3)
   ========================================================== */
html{overflow-x:hidden;scroll-padding-top:92px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{max-width:100%}
/* Hiasan (glow/blob) tidak boleh melebarkan halaman di HP */
.hero,.policy-hero,.footer-hw,.testi-section,.cta-banner{overflow-x:clip}
.policy-hero,.footer-hw{position:relative}
.hero-glow,.footer-glow,.footer-glow-2,.blob{pointer-events:none;will-change:transform}

/* Transisi spesifik (bukan "all") agar ringan di HP */
.navbar-hw{transition:background-color .35s var(--ease),padding .35s var(--ease),box-shadow .35s var(--ease);-webkit-backdrop-filter:none}
.navbar-hw.scrolled{-webkit-backdrop-filter:blur(14px)}
.btn-hw-outline{transition:transform .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.btn-hw-primary,.btn-hw-outline,.cause-card,.why-card,.footer-link{-webkit-tap-highlight-color:transparent}
.btn-hw-primary:active,.btn-hw-outline:active{transform:scale(.97)}
.cause-img img{transition:transform .6s var(--ease)}
.form-control-hw,.form-select{transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}

/* Gerak AOS lebih pendek dan vertikal saja: tidak ada geser samping 100px */
[data-aos=fade-up],[data-aos=fade-down]{transform:translate3d(0,26px,0)}
[data-aos=fade-down]{transform:translate3d(0,-26px,0)}
[data-aos=zoom-in]{transform:scale(.96)}
@media (max-width:991.98px){
  [data-aos=fade-left],[data-aos=fade-right]{transform:translate3d(0,26px,0)}
}
@media (min-width:992px){
  [data-aos=fade-left]{transform:translate3d(40px,0,0)}
  [data-aos=fade-right]{transform:translate3d(-40px,0,0)}
}

/* Preloader hanya pada kunjungan pertama per sesi */
.no-pl #preloader{display:none}

/* Transisi antarhalaman yang halus (Chrome/Edge/Safari baru) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}

/* Perangkat sentuh: tanpa efek hover yang "menempel" */
@media (hover:none){
  .btn-hw-primary:hover,.btn-hw-outline:hover,.cause-card:hover,.why-card:hover{transform:none}
  .cause-card:hover .cause-img img{transform:none}
}

/* ---------- Tablet & di bawahnya ---------- */
@media (max-width:991.98px){
  .hero{padding:128px 0 72px}
  .navbar-hw{padding:14px 0}
  .navbar-hw .navbar-collapse{background:#fff;border-radius:18px;box-shadow:0 18px 40px -14px rgba(15,23,42,.22);padding:10px 14px 16px;margin-top:12px;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav-hw .nav-link{padding:12px 14px!important;border-radius:12px}
  .nav-hw .nav-link:active,.nav-hw .nav-link.active{background:var(--clr-primary-light);color:var(--clr-primary-dark)}
  .nav-hw .nav-link::after{display:none}
  .navbar-toggler{padding:6px 8px;min-width:44px;min-height:44px;border-radius:12px;background:rgba(255,255,255,.85)}
  .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(37, 99, 235,.25)}
  .hero-media{max-width:520px;margin-inline:auto}
}

/* ---------- Layar kecil (HP) ---------- */
@media (max-width:767.98px){
  .section-pad{padding:56px 0}
  .hero{padding:108px 0 56px}
  .hero-lead{font-size:1rem}
  .hero .btn-hw-primary,.hero .btn-hw-outline{flex:1 1 100%;justify-content:center}
  .stat-item{padding:28px 10px}
  .stats-band,.testi-section,.cta-banner{border-radius:24px}
  .contact-card{padding:22px 18px}
  .container{padding-inline:16px}
  .float-card{padding:10px 14px;gap:10px}
  .float-card .fc-val{font-size:.85rem}
  .float-card-1{left:10px}.float-card-2{right:10px}
  .about-badge{left:0;top:-4%;padding:12px 14px}
  .about-collage .img-b{right:0}
  .footer-hw{padding-bottom:72px}
  .footer-bottom{text-align:center}
  /* Cegah iOS memperbesar layar saat mengisi form */
  .form-control,.form-select,.form-control-hw,input,select,textarea{font-size:16px!important}
  .form-control-hw,.form-select,.form-control{min-height:48px}
  /* Tombol mengambang tidak menimpa bar Booking */
  #scrollTop{bottom:88px;right:14px;width:46px;height:46px}
  .mobile-donate-bar{padding:10px 16px calc(10px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:rgba(255,255,255,.92)}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .carousel-item .testi-card{margin-bottom:10px}
}
@media (max-width:389.98px){
  .hero-title{font-size:2.05rem}
  .btn-hw-primary,.btn-hw-outline{padding:12px 20px}
}

/* ---------- Slider foto latar hero Beranda (otomatis + manual) ---------- */
.hero-has-slider{position:relative;min-height:100svh;display:flex;align-items:center;background:#0b1220;padding:130px 0 90px}
.hero-has-slider .hero-glow,.hero-has-slider .blob{display:none}
.hero-bg-slider,.hero-bg-slider .carousel-inner,.hero-bg-slider .carousel-item{position:absolute;inset:0;height:100%;width:100%}
.hero-bg-slider{z-index:0}
.hero-bg-slider .carousel-item img{width:100%;height:100%;object-fit:cover;display:block}
.hero-bg-overlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,18,32,.82) 0%,rgba(11,18,32,.6) 55%,rgba(11,18,32,.35) 100%)}
.hero-has-slider .hero-content{z-index:2;width:100%}
.hero-has-slider .hero-title{color:#fff}
.hero-has-slider .hero-title .accent-underline{color:#93c5fd}
.hero-has-slider .hero-lead{color:rgba(255,255,255,.88)}
.hero-has-slider .text-muted{color:rgba(255,255,255,.78)!important}
.hero-has-slider .fw-bold.font-display{color:#fff}
.hero-ctrl{width:44px;height:44px;top:50%;bottom:auto;transform:translateY(-50%);margin:0 14px;border-radius:50%;background:rgba(255,255,255,.88);color:var(--clr-primary-dark);opacity:.9;display:grid;place-items:center;border:0;z-index:3;transition:background-color .25s,opacity .25s}
.carousel-control-prev.hero-ctrl{left:0}.carousel-control-next.hero-ctrl{right:0}
.hero-ctrl:hover{background:#fff;opacity:1}
.hero-dots{bottom:22px;margin-bottom:0;z-index:3}
.hero-dots [data-bs-target]{width:9px;height:9px;border-radius:50%;border:0;margin:0 4px;background:#fff;opacity:.6;transition:width .3s,opacity .3s}
.hero-dots .active{width:28px;border-radius:8px;opacity:1;background:var(--clr-secondary)}
/* Navbar transparan di atas foto: teks putih (menu HP tetap putih/gelap seperti semula) */
body:has(.hero-has-slider) .navbar-hw:not(.scrolled) .hw-logo{color:#fff}
body:has(.hero-has-slider) .navbar-hw:not(.scrolled) .hw-logo .dot{color:#93c5fd}
@media (min-width:992px){body:has(.hero-has-slider) .navbar-hw:not(.scrolled) .nav-hw .nav-link{color:#fff}}
@media (max-width:767.98px){
  .hero-has-slider{min-height:92svh;padding:104px 0 96px;align-items:flex-end}
  .hero-bg-overlay{background:linear-gradient(180deg,rgba(11,18,32,.55) 0%,rgba(11,18,32,.78) 100%)}
  .hero-ctrl{width:38px;height:38px;margin:0 8px;top:30%}
  .hero-dots{bottom:80px}
}

/* ---------- Keterbacaan teks di atas foto terang (v6) ---------- */
.hero-bg-slider .carousel-item img{filter:brightness(.78) saturate(1.05)}
.hero-bg-overlay{background:
  linear-gradient(180deg,rgba(8,20,48,.62) 0,rgba(8,20,48,0) 22%),
  linear-gradient(0deg,rgba(8,20,48,.7) 0,rgba(8,20,48,0) 32%),
  linear-gradient(90deg,rgba(8,20,48,.94) 0%,rgba(10,28,66,.8) 42%,rgba(10,28,66,.45) 75%,rgba(10,28,66,.3) 100%)}
.hero-has-slider .hero-title{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-has-slider .hero-lead{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero-has-slider .hero-title .accent-underline{color:#bfdbfe}
.hero-has-slider .text-muted{color:rgba(255,255,255,.85)!important;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hero-has-slider .eyebrow{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-has-slider .btn-hw-outline{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-has-slider .btn-hw-outline:hover{background:#fff;color:var(--clr-primary-dark)}
.hero-has-slider .hero-avatars img{border:2px solid rgba(255,255,255,.9)}
body:has(.hero-has-slider) .navbar-hw:not(.scrolled) .hw-logo{text-shadow:0 1px 10px rgba(0,0,0,.4)}
@media (max-width:767.98px){
  .hero-bg-overlay{background:
    linear-gradient(180deg,rgba(8,20,48,.7) 0,rgba(8,20,48,.5) 30%,rgba(8,20,48,.82) 62%,rgba(8,20,48,.92) 100%)}
}