/* Tahap 6.3 — finishing visual halaman utama Jejak Sunnah */

/* Ritme umum */
.hero{padding:32px 0 22px}
.hero h1{margin:10px 0 14px}
.hero p{max-width:650px;line-height:1.6;margin:0 0 13px}
.status{margin-bottom:14px}
.hero-grid{gap:16px}

/* Samakan karakter kartu utama */
.prayer-card,
.progress-panel,
.today,
.side-card{border-radius:22px}
.prayer-card{margin-bottom:14px!important}
.progress-panel{margin:0 0 14px}
.today{padding:24px}
.side-card{padding:22px}

/* Bayangan dibuat konsisten agar halaman terasa satu sistem desain */
.prayer-card,
.progress-panel,
.today,
.side-card{box-shadow:0 10px 28px rgba(15,61,46,.10)}

/* Jarak antar blok utama lebih konsisten */
#prayerScheduleCard + #progressPanel{margin-top:0}
#progressPanel + .hero-grid{margin-top:0}

@media(max-width:560px){
  .nav{height:58px}
  .brand strong{font-size:1.14rem}
  .brand span{font-size:.69rem}
  header .nav>a:last-child{font-size:.88rem}

  .hero{padding:22px 0 17px}
  .eyebrow{font-size:.61rem;letter-spacing:.13em}
  .hero h1{font-size:clamp(2.15rem,10.5vw,2.85rem);line-height:.98;margin:8px 0 10px}
  .hero> .wrap > p,
  .hero .wrap>p{font-size:.88rem;line-height:1.48;margin:0 0 11px;max-width:100%}
  .status{padding:5px 9px;font-size:.68rem;margin-bottom:11px}
  .dot{width:7px;height:7px}

  .prayer-card,
  .progress-panel,
  .today,
  .side-card{border-radius:20px}

  .prayer-card{margin-bottom:12px!important}
  .progress-panel{padding:13px 14px;margin-bottom:12px}
  .progress-copy{gap:1px}
  .progress-copy strong{font-size:.91rem}
  .progress-percent{font-size:.98rem}
  .progress-track{height:8px;margin:9px 0}
  .progress-remaining{font-size:.81rem}
  .progress-bottom{gap:9px}
  .progress-actions{gap:6px}
  .progress-action{padding:7px 8px;font-size:.76rem;border-radius:9px}

  .hero-grid{gap:12px}
  .today{padding:20px 18px}
  .today h2{font-size:1.68rem;margin-top:14px}
  .arabic{font-size:1.42rem;line-height:1.88;margin:14px 0}
  .translation{font-size:.98rem;line-height:1.66}
  .meta{margin-top:15px;padding-top:13px;font-size:.8rem}
  .side-card{padding:19px}

  .section{padding:26px 0 46px}
  .section-head h2{font-size:1.66rem}
}

@media(max-width:380px){
  .wrap{padding-left:12px;padding-right:12px}
  .hero{padding-top:19px}
  .hero h1{font-size:2.25rem}
  .hero .wrap>p{font-size:.84rem;line-height:1.44}
  .progress-action{font-size:.71rem;padding:7px 6px}
}