/* ══════════════════════════════
   HERO
══════════════════════════════ */
.hero {
  background:linear-gradient(145deg, #0a2e1f 0%, #0c3526 40%, #155c38 75%, #1a7a46 100%);
  padding:90px 28px 100px;
  position:relative; overflow:hidden;
}
/* Bubble pattern */
.hero::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}
.bubble { position:absolute; border-radius:50%; pointer-events:none; }
.b1 { width:320px; height:320px; background:rgba(255,255,255,0.04); top:-80px; right:-60px; }
.b2 { width:180px; height:180px; background:rgba(245,168,48,0.08); bottom:-40px; left:-30px; }
.b3 { width:100px; height:100px; background:rgba(232,98,26,0.1); top:40px; left:15%; }
.b4 { width:60px; height:60px; background:rgba(255,255,255,0.07); bottom:80px; right:18%; }
.b5 { width:220px; height:220px; background:rgba(26,122,70,0.15); bottom:-70px; right:10%; border:1px solid rgba(255,255,255,0.05); }
.b6 { width:50px; height:50px; background:rgba(245,168,48,0.12); top:120px; right:22%; }

.hero-inner {
  max-width:1100px; margin:0 auto; position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 340px; gap:52px; align-items:center;
}
.hero-left { text-align:left; }
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(232,98,26,0.2); border:1px solid rgba(232,98,26,0.5);
  color:#f5a830; font-size:11px; font-weight:800;
  padding:5px 14px; border-radius:20px; letter-spacing:1px;
  text-transform:uppercase; margin-bottom:22px;
}
.hero-badge span { width:6px; height:6px; background:#e8621a; border-radius:50%; display:inline-block; }
.hero-title { font-size:44px; font-weight:900; color:#fff; line-height:1.12; margin-bottom:18px; }
.hero-title em { color:#f5a830; font-style:normal; }
.hero-desc { font-size:15px; color:rgba(255,255,255,0.78); line-height:1.85; max-width:500px; margin:0 0 36px; }

.hero-rek {
  display:inline-flex; align-items:center; gap:18px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18);
  border-radius:14px; padding:16px 24px; margin-bottom:32px;
  backdrop-filter:blur(8px);
}
.hero-bank {
  background:#fff; color:#0c3526;
  font-size:18px; font-weight:900; letter-spacing:3px;
  padding:8px 14px; border-radius:7px;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.hero-rek-info { text-align:left; }
.hero-norek { font-size:24px; font-weight:900; color:#fff; letter-spacing:1px; line-height:1; }
.hero-an { font-size:10px; color:rgba(255,255,255,0.6); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-top:4px; }

.hero-actions { display:flex; justify-content:flex-start; gap:12px; flex-wrap:wrap; }

/* ── Jadwal sholat card di hero ────────────────────────────────────── */
.hsc {
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  border-radius:20px; padding:20px; backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
}
.hsc-head { margin-bottom:14px; }
.hsc-title { font-size:13px; font-weight:900; color:#fff; margin-bottom:3px; }
.hsc-date  { font-size:11px; color:rgba(255,255,255,0.65); font-weight:700; }
.hsc-loc   { font-size:10.5px; color:rgba(255,255,255,0.4); font-weight:600; margin-top:2px; }
.hsc-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:12px; }
.hsc-item  {
  background:rgba(255,255,255,0.06); border-radius:10px; padding:9px 6px;
  text-align:center; border:1px solid transparent; transition:all .15s;
}
.hsc-item.aktif { background:rgba(245,168,48,0.18); border-color:rgba(245,168,48,0.45); }
.hsc-nama  { font-size:9.5px; font-weight:800; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:.5px; }
.hsc-item.aktif .hsc-nama { color:#f5a830; }
.hsc-waktu { font-size:15px; font-weight:900; color:#fff; margin-top:3px; line-height:1; }
.hsc-item.aktif .hsc-waktu { color:#f5a830; }
.hsc-skel  {
  height:15px; width:58%; margin:4px auto 0; border-radius:4px;
  background:linear-gradient(90deg,rgba(255,255,255,0.08) 25%,rgba(255,255,255,0.18) 50%,rgba(255,255,255,0.08) 75%);
  background-size:200% 100%; animation:hscShimmer 1.4s infinite;
}
@keyframes hscShimmer {
  0%   { background-position:-200% 0; }
  100% { background-position: 200% 0; }
}
.hsc-next { font-size:11px; color:rgba(255,255,255,0.45); text-align:center; margin-bottom:13px; min-height:16px; }
.hsc-next strong { color:#a8d8b8; font-weight:800; }
.hsc-btn {
  width:100%; padding:9px 12px; border-radius:10px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.85); font-size:11.5px; font-weight:800;
  cursor:pointer; font-family:'Nunito',sans-serif; transition:background .2s;
  display:flex; align-items:center; justify-content:center; gap:7px; letter-spacing:.2px;
}
.hsc-btn:hover { background:rgba(255,255,255,0.18); }
.hsc-btn.loading { opacity:.6; cursor:wait; }

/* Overlay loading user lokasi */
.hsc-overlay {
  display:none; position:absolute; inset:0; border-radius:20px;
  background:rgba(10,46,31,0.88); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; flex-direction:column; gap:10px;
  z-index:2;
}
.hsc-overlay.show { display:flex; }
.hsc-spinner {
  width:32px; height:32px; border:3px solid rgba(255,255,255,0.2);
  border-top-color:#f5a830; border-radius:50%;
  animation:hscSpin .8s linear infinite;
}
@keyframes hscSpin { to { transform:rotate(360deg); } }
.hsc-overlay p { font-size:12px; color:rgba(255,255,255,0.7); font-weight:700; margin:0; }
.btn-primary { background:#e8621a; color:#fff; font-size:13px; font-weight:800; padding:13px 28px; border-radius:7px; text-decoration:none; letter-spacing:.3px; transition:all .2s; box-shadow:0 4px 14px rgba(232,98,26,0.4); }
.btn-primary:hover { background:#c54e0e; transform:translateY(-1px); }
.btn-outline { background:transparent; color:#fff; font-size:13px; font-weight:800; padding:13px 28px; border-radius:7px; text-decoration:none; letter-spacing:.3px; border:1.5px solid rgba(255,255,255,0.35); transition:all .2s; }
.btn-outline:hover { background:rgba(255,255,255,0.1); }

/* ══════════════════════════════
   STATS
══════════════════════════════ */
.stats { background:#fff; border-bottom:1px solid #eee; }
.stats-inner { max-width:900px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:repeat(3,1fr); }
.stat { padding:28px 20px; text-align:center; border-right:1px solid #f0f0f0; }
.stat:last-child { border-right:none; }
.stat-val { font-size:28px; font-weight:900; color:#0c3526; letter-spacing:-.5px; }
.stat-val span { font-size:14px; font-weight:700; color:#1a7a46; }
.stat-label { font-size:11px; color:#888; font-weight:700; text-transform:uppercase; letter-spacing:.8px; margin-top:4px; }

/* ══════════════════════════════
   TENTANG
══════════════════════════════ */
.section { padding:76px 28px; }
.section-inner { max-width:960px; margin:0 auto; }
.section-eyebrow { font-size:11px; font-weight:800; color:#e8621a; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }
.section-title { font-size:30px; font-weight:900; color:#0c3526; line-height:1.2; margin-bottom:14px; }
.section-desc { font-size:14px; color:#666; line-height:1.85; max-width:580px; }

.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about-text .section-desc { max-width:100%; }
.about-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.tag { background:#f0f7f3; color:#1a7a46; font-size:11px; font-weight:800; padding:5px 12px; border-radius:20px; border:1px solid #c8e6d4; }
.about-img-box {
  border-radius:16px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,0.14);
  position:relative;
}
.about-img-box img { width:100%; height:260px; object-fit:cover; display:block; }
.about-img-badge {
  position:absolute; bottom:16px; left:16px;
  background:rgba(12,53,38,0.92); backdrop-filter:blur(8px);
  color:#fff; font-size:11px; font-weight:800;
  padding:7px 13px; border-radius:8px; letter-spacing:.3px;
}

/* ══════════════════════════════
   CARA DONASI
══════════════════════════════ */
.steps { background:linear-gradient(135deg,#f8f7f2 0%,#eef7f1 100%); }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.step-card {
  background:#fff; border-radius:14px; padding:28px 24px;
  box-shadow:0 4px 20px rgba(0,0,0,0.05); border:1px solid #eee;
  position:relative; text-align:center;
}
.step-num {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,#0c3526,#1a7a46);
  color:#fff; font-size:18px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.step-icon { font-size:28px; margin-bottom:10px; }
.step-title { font-size:14px; font-weight:900; color:#0c3526; margin-bottom:8px; }
.step-desc { font-size:12px; color:#777; line-height:1.7; }
.step-desc strong { color:inherit; }
.step-connector {
  position:absolute; top:50px; right:-13px; z-index:1;
  width:26px; height:2px; background:linear-gradient(90deg,#1a7a46,#f5a830);
}

/* ══════════════════════════════
   REKENING
══════════════════════════════ */
.rek-section { background:#0c3526; padding:76px 28px; position:relative; overflow:hidden; }
.rek-section::before {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:28px 28px;
}
.rb1 { position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,0.03); top:-100px; left:-80px; pointer-events:none; }
.rb2 { position:absolute; width:200px; height:200px; border-radius:50%; background:rgba(245,168,48,0.06); bottom:-60px; right:-40px; pointer-events:none; }
.rek-inner { max-width:700px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.rek-eyebrow { font-size:11px; font-weight:800; color:#f5a830; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }
.rek-title { font-size:30px; font-weight:900; color:#fff; margin-bottom:10px; }
.rek-sub { font-size:13px; color:rgba(255,255,255,0.65); margin-bottom:40px; line-height:1.7; }
.rek-card {
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  border-radius:16px; padding:32px; backdrop-filter:blur(10px);
  display:inline-flex; align-items:center; gap:24px; text-align:left;
}
.rek-bank-badge {
  background:#fff; color:#0c3526;
  font-size:22px; font-weight:900; letter-spacing:4px;
  padding:12px 18px; border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,0.2); flex-shrink:0;
}
.rek-divider { width:1px; height:50px; background:rgba(255,255,255,0.2); flex-shrink:0; }
.rek-norek { font-size:30px; font-weight:900; color:#fff; letter-spacing:2px; line-height:1; }
.rek-an-label { font-size:10px; color:rgba(255,255,255,0.55); font-weight:700; text-transform:uppercase; letter-spacing:.8px; margin-top:6px; }
.rek-an-name { font-size:13px; color:rgba(255,255,255,0.9); font-weight:700; margin-top:2px; }
.rek-confirm { margin-top:28px; font-size:12px; color:rgba(255,255,255,0.6); font-weight:600; }
.rek-confirm strong { color:#f5a830; }

/* ══════════════════════════════
   POSTER DOWNLOAD
══════════════════════════════ */
.poster-section { padding:76px 28px; background:#fff; }
.poster-section-inner { max-width:900px; margin:0 auto; text-align:center; }
.poster-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px; }
.poster-card-link { text-decoration:none; display:block; }
.poster-card {
  display:flex; align-items:center; gap:18px;
  background:#f8f7f2; border:1.5px solid #e8e8e2;
  border-radius:14px; padding:22px 22px;
  transition:all .2s; text-align:left;
}
.poster-card:hover { border-color:#1a7a46; box-shadow:0 6px 24px rgba(12,53,38,0.1); transform:translateY(-2px); }
.poster-card.highlight { background:linear-gradient(135deg,#f0f7f3,#e8f5ee); border-color:#b8dfc8; }
.poster-card.highlight:hover { border-color:#0c3526; }
.pci { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; }
.pci.green { background:linear-gradient(135deg,#0c3526,#1a7a46); }
.pci.orange { background:linear-gradient(135deg,#e8621a,#f5a830); }
.pct { flex:1; }
.pct-title { font-size:14px; font-weight:900; color:#0c3526; margin-bottom:3px; }
.pct-sub { font-size:11.5px; color:#888; font-weight:600; line-height:1.5; }
.pca { font-size:20px; color:#1a7a46; font-weight:900; flex-shrink:0; }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width:960px) {
  .hero-inner { grid-template-columns:1fr; gap:32px; }
  .hero-left  { text-align:center; }
  .hero-desc  { margin:0 auto 36px; }
  .hero-actions { justify-content:center; }
}
@media (max-width:768px) {
  .nav-links .nav-link { display:none; }
  .hero { padding:60px 20px 70px; }
  .hero-title { font-size:30px; }
  .hero-desc { font-size:13.5px; }
  .hero-rek { flex-direction:column; gap:12px; padding:18px 20px; text-align:center; }
  .hero-rek-info { text-align:center; }
  .hero-norek { font-size:20px; }
  .stats-inner { grid-template-columns:1fr; }
  .stat { border-right:none; border-bottom:1px solid #f0f0f0; padding:20px; }
  .stat:last-child { border-bottom:none; }
  .about-grid { grid-template-columns:1fr; gap:32px; }
  .about-img-box { order:-1; }
  .steps-grid { grid-template-columns:1fr; gap:16px; }
  .step-connector { display:none; }
  .rek-card { flex-direction:column; text-align:center; gap:16px; padding:24px 20px; }
  .rek-divider { width:60px; height:1px; }
  .rek-norek { font-size:24px; }
  .poster-cards { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center; }
}

@media (max-width:480px) {
  .nav-inner { padding:0 16px; height:54px; }
  .nav-cta { font-size:11px; padding:7px 13px; }
  .hero-title { font-size:26px; }
  .section { padding:52px 20px; }
  .section-title { font-size:24px; }
  .rek-section { padding:52px 20px; }
  .rek-title { font-size:24px; }
  .poster-section { padding:52px 20px; }
}
/* ══════════════════════════════
   MAPS
══════════════════════════════ */
.maps-wrap {
  position:relative;
  width:100%;
  padding-bottom:75%;
}
.maps-wrap iframe {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
}

/* ══════════════════════════════
   KONTAK
══════════════════════════════ */
.kontak-section { background:linear-gradient(135deg,#f0f7f3 0%,#e8f5ee 100%); }
.kontak-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:700px; margin:0 auto; }
.kontak-card {
  display:flex; align-items:center; gap:18px;
  background:#fff; border-radius:14px; padding:24px 22px;
  text-decoration:none; border:1.5px solid #e0ede6;
  box-shadow:0 4px 16px rgba(12,53,38,0.07);
  transition:all .2s;
}
.kontak-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(12,53,38,0.13); border-color:#1a7a46; }
.kontak-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kontak-icon.wa { background:linear-gradient(135deg,#25d366,#128c7e); }
.kontak-icon.email { background:linear-gradient(135deg,#0c3526,#1a7a46); }
.kontak-info { flex:1; }
.kontak-label { font-size:10px; font-weight:800; color:#aaa; text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; }
.kontak-val { font-size:15px; font-weight:900; color:#0c3526; line-height:1.2; }
.kontak-sub { font-size:11px; color:#888; font-weight:600; margin-top:2px; }
.kontak-arrow { font-size:20px; color:#1a7a46; font-weight:900; flex-shrink:0; }

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

/* Galeri preview di landing page */
.galeri-preview { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:28px; }
.galeri-preview-item { position:relative; overflow:hidden; border-radius:10px; background:#e8e8e4; display:block; }
.galeri-preview-item::before { content:''; display:block; padding-top:100%; }
.galeri-preview-item img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.galeri-preview-item:hover img { transform:scale(1.06); }
.galeri-preview-title {
  position:absolute; bottom:0; left:0; right:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
  color:#fff; font-size:11px; font-weight:800;
  padding:22px 10px 8px; line-height:1.3; letter-spacing:.2px;
}
.btn-galeri-more {
  display:inline-block; background:#0c3526; color:#fff;
  font-size:13px; font-weight:800; padding:12px 32px;
  border-radius:8px; text-decoration:none; letter-spacing:.4px;
  transition:background .2s;
}
.btn-galeri-more:hover { background:#1a7a46; }

@media (max-width:600px) {
  .galeri-preview { grid-template-columns:repeat(2,1fr); }
}