/* رتِّل — التخطيط: الشريط العلوي، الأقسام، الشبكات، التذييل */
.view{position:relative;z-index:1;min-height:60vh;padding-bottom:3rem}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:1.25rem}
.section{padding:3.25rem 0}
.section-head{display:grid;gap:.6rem;max-width:70ch;margin-bottom:1.75rem}
.grid{display:grid;gap:1.1rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.page-head{padding:2.5rem 0 1rem;display:grid;gap:.7rem}

/* الشريط العلوي */
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(251,249,244,.82);backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
.topbar.stuck{border-color:var(--border);box-shadow:0 6px 22px rgba(6,35,28,.06)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:68px}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(150deg,var(--green-500),var(--green-800));display:grid;place-items:center;color:var(--gold-200);box-shadow:0 6px 16px rgba(11,107,79,.3)}
.brand-name{font-family:var(--font-quran);font-size:1.4rem;font-weight:700;line-height:1}
.brand-sub{font-size:.68rem;letter-spacing:.14em;color:var(--text-muted)}
.nav{display:flex;align-items:center;gap:.2rem}
.nav a{
  padding:.5rem .85rem;border-radius:var(--radius-pill);text-decoration:none;
  color:var(--text-muted);font-weight:600;font-size:.92rem;transition:all .18s var(--ease);
}
.nav a:hover{background:var(--green-50);color:var(--green-800)}
.nav a.active{background:var(--green-100);color:var(--green-800)}
.nav-actions{display:flex;align-items:center;gap:.5rem}
.burger{display:none}

/* التذييل */
.sitefooter{position:relative;z-index:1;margin-top:2rem;background:var(--ink);color:#CFE4DC;padding:3rem 0 1.5rem}
.sitefooter a{color:#CFE4DC;text-decoration:none;transition:color .18s}
.sitefooter a:hover{color:var(--gold-400)}
.footer-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.footer-title{color:#fff;font-weight:700;margin-bottom:.75rem;font-size:.95rem}
.footer-list{display:grid;gap:.5rem;font-size:.9rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.25rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:#9CBBAF}
.ayah-strip{font-family:var(--font-quran);font-size:1.15rem;color:var(--gold-200);line-height:2.2}