/* 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}
}

/* Mulai dari Sini — pintu Jalur Dasar */
.start-here{max-width:650px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;margin:0 0 13px;padding:13px 15px;border:1px solid var(--line);border-radius:17px;background:var(--surface);box-shadow:0 8px 22px rgba(15,61,46,.07);transition:.18s ease}
.start-here:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,61,46,.11)}
.start-here-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#edf5ef;font-size:1.15rem}
.start-here-copy{display:grid;gap:2px;min-width:0}
.start-here-copy strong{color:var(--green);font-size:.98rem}
.start-here-copy small{color:var(--muted);font-size:.78rem;line-height:1.35}
.start-here-arrow{color:var(--gold);font-size:1.25rem;font-weight:900}
@media(max-width:560px){.start-here{grid-template-columns:38px 1fr auto;gap:9px;padding:11px 12px;border-radius:15px;margin-bottom:11px}.start-here-icon{width:34px;height:34px;border-radius:10px;font-size:1rem}.start-here-copy strong{font-size:.91rem}.start-here-copy small{font-size:.71rem;line-height:1.3}.start-here-arrow{font-size:1.1rem}}