/* =====================================================================
   Kurniawan Activity Hub (KAH) — Public theme
   Palette: Kemenag green, white, grey. Modern, app-like, responsive.
   ===================================================================== */
:root{
  --kah-green:#2e7d32;
  --kah-green-dark:#1b5e20;
  --kah-green-light:#e8f5e9;
  --kah-grey:#6b7280;
  --kah-bg:#f4f6f8;
  --kah-card:#ffffff;
  --kah-text:#1f2937;
  --kah-muted:#6b7280;
  --kah-border:#e5e7eb;
  --kah-radius:18px;
  --kah-shadow:0 8px 30px rgba(27,94,32,.08);
  --kah-shadow-hover:0 14px 40px rgba(27,94,32,.16);
}
[data-bs-theme="dark"]{
  --kah-bg:#0f172a;
  --kah-card:#1e293b;
  --kah-text:#e2e8f0;
  --kah-muted:#94a3b8;
  --kah-border:#334155;
  --kah-green-light:#14361b;
  --kah-shadow:0 8px 30px rgba(0,0,0,.4);
}

*{scroll-behavior:smooth}
body{
  background:var(--kah-bg);
  color:var(--kah-text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  transition:background .3s,color .3s;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---- Navbar ---- */
.kah-navbar{
  background:var(--kah-card);
  box-shadow:0 2px 14px rgba(0,0,0,.06);
  position:sticky;top:0;z-index:1030;
  backdrop-filter:saturate(180%) blur(8px);
}
.kah-brand{font-weight:800;color:var(--kah-green)!important;letter-spacing:-.5px;display:flex;gap:.5rem;align-items:center}
.kah-brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--kah-green),var(--kah-green-dark));color:#fff;display:grid;place-items:center;font-size:1.1rem}
.kah-navbar .nav-link{color:var(--kah-text);font-weight:500;border-radius:10px;padding:.5rem .85rem!important;transition:.2s}
.kah-navbar .nav-link:hover,.kah-navbar .nav-link.active{background:var(--kah-green-light);color:var(--kah-green)}

/* ---- Buttons / chips ---- */
.btn-kah{background:var(--kah-green);border:none;color:#fff;font-weight:600;border-radius:12px}
.btn-kah:hover{background:var(--kah-green-dark);color:#fff;transform:translateY(-1px)}
.btn-outline-kah{border:1.5px solid var(--kah-green);color:var(--kah-green);font-weight:600;border-radius:12px}
.btn-outline-kah:hover{background:var(--kah-green);color:#fff}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--kah-green-light);color:var(--kah-green)}

/* ---- Cards ---- */
.kah-card{
  background:var(--kah-card);
  border:1px solid var(--kah-border);
  border-radius:var(--kah-radius);
  box-shadow:var(--kah-shadow);
  overflow:hidden;
  transition:transform .25s,box-shadow .25s;
}
.kah-card:hover{transform:translateY(-4px);box-shadow:var(--kah-shadow-hover)}
.kah-card .card-img-top{height:200px;object-fit:cover;background:var(--kah-green-light)}
.section-title{font-weight:800;letter-spacing:-.5px;position:relative;display:inline-block;margin-bottom:.25rem}
.section-title::after{content:"";position:absolute;left:0;bottom:-6px;width:46px;height:4px;border-radius:4px;background:var(--kah-green)}

/* ---- Hero ---- */
.kah-hero{
  position:relative;border-radius:0 0 36px 36px;overflow:hidden;
  background:linear-gradient(135deg,var(--kah-green),var(--kah-green-dark));
  color:#fff;padding:64px 0 84px;
}
.kah-hero::after{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><circle cx="30" cy="30" r="1.5" fill="white" opacity="0.15"/></svg>');opacity:.5}
.kah-hero .container{position:relative;z-index:2}
.hero-photo{width:160px;height:160px;border-radius:28px;object-fit:cover;border:5px solid rgba(255,255,255,.35);box-shadow:0 16px 40px rgba(0,0,0,.25)}

/* ---- Stats ---- */
.stat-box{background:var(--kah-card);border:1px solid var(--kah-border);border-radius:16px;padding:18px;text-align:center;box-shadow:var(--kah-shadow)}
.stat-box .num{font-size:1.7rem;font-weight:800;color:var(--kah-green)}
.stat-box .ico{font-size:1.4rem;color:var(--kah-green);background:var(--kah-green-light);width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin:0 auto 8px}

/* ---- Timeline ---- */
.timeline{position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:3px;background:linear-gradient(var(--kah-green),transparent)}
.timeline-item{position:relative;margin-bottom:24px}
.timeline-item::before{content:"";position:absolute;left:-26px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--kah-green);border:3px solid var(--kah-card);box-shadow:0 0 0 3px var(--kah-green-light)}
.timeline-date{font-size:.78rem;font-weight:700;color:var(--kah-green)}

/* ---- Gallery ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.gallery-item{border-radius:14px;overflow:hidden;position:relative;aspect-ratio:1;cursor:pointer;box-shadow:var(--kah-shadow)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.35);color:#fff;font-size:2rem}

/* ---- Float buttons (app-like) ---- */
.fab-wa{position:fixed;right:18px;bottom:84px;z-index:1040;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.6rem;box-shadow:0 8px 24px rgba(37,211,102,.5);animation:pulse 2.5s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.fab-top{position:fixed;right:18px;bottom:18px;z-index:1040;width:46px;height:46px;border-radius:50%;background:var(--kah-green);color:#fff;display:none;place-items:center;border:none;box-shadow:var(--kah-shadow)}

/* ---- Bottom nav (mobile, Android-like) ---- */
.bottom-nav{display:none}
@media(max-width:768px){
  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1035;
    background:var(--kah-card);border-top:1px solid var(--kah-border);
    padding:6px 4px;justify-content:space-around;box-shadow:0 -4px 20px rgba(0,0,0,.08);
  }
  .bottom-nav a{flex:1;text-align:center;color:var(--kah-muted);font-size:.66rem;text-decoration:none;padding:4px 0}
  .bottom-nav a i{display:block;font-size:1.2rem;margin-bottom:2px}
  .bottom-nav a.active{color:var(--kah-green)}
  body{padding-bottom:64px}
  .fab-wa{bottom:78px}
}

/* ---- Misc ---- */
.lazy{opacity:0;transition:opacity .5s}
.lazy.loaded{opacity:1}
a{color:var(--kah-green);text-decoration:none}
a:hover{color:var(--kah-green-dark)}
.text-kah{color:var(--kah-green)!important}
.bg-kah-light{background:var(--kah-green-light)!important}
.fade-up{opacity:0;transform:translateY(20px);transition:.6s}
.fade-up.show{opacity:1;transform:none}
.footer{background:var(--kah-card);border-top:1px solid var(--kah-border);margin-top:48px}
.social-btn{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--kah-green-light);color:var(--kah-green);font-size:1.1rem;transition:.2s}
.social-btn:hover{background:var(--kah-green);color:#fff;transform:translateY(-2px)}
.prose img{max-width:100%;border-radius:12px}
.search-box .form-control{border-radius:12px;border:1px solid var(--kah-border);background:var(--kah-bg)}
.badge-cat{font-weight:600;border-radius:8px}

/* ---- Affiliate products ---- */
.prod-card{display:flex;flex-direction:column}
.prod-thumb{position:relative;aspect-ratio:1;overflow:hidden;background:var(--kah-green-light)}
.prod-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.prod-card:hover .prod-thumb img{transform:scale(1.06)}
.prod-mp{position:absolute;left:8px;bottom:8px;color:#fff;font-size:.7rem;font-weight:600;padding:.2rem .55rem;border-radius:8px;display:inline-flex;gap:.3rem;align-items:center}
.prod-badge{position:absolute;right:8px;top:8px;background:#ef4444;color:#fff;font-size:.68rem;font-weight:700;padding:.2rem .55rem;border-radius:8px;z-index:2;box-shadow:0 4px 12px rgba(239,68,68,.4)}
.prod-price{font-size:1.15rem;font-weight:800;color:var(--kah-green)}
.prod-old{font-size:.85rem;color:var(--kah-muted);text-decoration:line-through;margin-left:.35rem}
.prod-inline-btn{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;color:#fff!important;text-decoration:none;padding:.7rem 1rem;border-radius:12px;font-weight:600;margin:.75rem 0;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.prod-inline-btn:hover{color:#fff;filter:brightness(1.06);transform:translateY(-1px)}
.prod-inline-cta{margin-left:auto;background:rgba(255,255,255,.2);padding:.15rem .6rem;border-radius:8px;font-size:.8rem;white-space:nowrap}
.prod-affiliate-note{font-size:.72rem;color:var(--kah-muted);background:var(--kah-green-light);border-radius:10px;padding:.5rem .8rem}
/* product sidebar widget */
.prod-widget{position:sticky;top:84px}
.prod-mini{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--kah-border)}
.prod-mini:last-of-type{border-bottom:none}
.prod-mini-thumb{width:62px;height:62px;border-radius:12px;overflow:hidden;flex:none;background:var(--kah-green-light)}
.prod-mini-thumb img{width:100%;height:100%;object-fit:cover}
.prod-mini-body{flex:1;min-width:0;display:flex;flex-direction:column}
.prod-mini-title{font-size:.82rem;font-weight:600;color:var(--kah-text);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-mini-price{font-size:.85rem;font-weight:800;color:var(--kah-green);margin:2px 0 4px}
.prod-mini-price .prod-old{font-size:.7rem}
.prod-mini-btn{align-self:flex-start;color:#fff!important;text-decoration:none;font-size:.72rem;font-weight:600;padding:.25rem .7rem;border-radius:8px;display:inline-flex;gap:.3rem;align-items:center}
.prod-mini-btn:hover{color:#fff;filter:brightness(1.07)}
@media(max-width:991px){.prod-widget{position:static;margin-top:8px}}
/* hero/promo banner carousel */
.promo-banner{border-radius:var(--kah-radius);overflow:hidden;box-shadow:var(--kah-shadow)}
.promo-banner .carousel-item img{height:230px;object-fit:cover;width:100%}
.promo-cap{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;padding:24px 20px 16px;text-align:left}