/* أسلوب بسيط وخفيف ومتجاوب */
:root{
  --primary:#0a7cff;--dark:#0f172a;--muted:#475569;--bg:#ffffff;--light:#f8fafc;--radius:12px
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:system-ui, -apple-system, Segoe UI, Roboto, "Noto Kufi Arabic", Tahoma, Arial, sans-serif;background:var(--bg);color:var(--dark);line-height:1.8}
.container{max-width:1100px;margin-inline:auto;padding:0 16px}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e2e8f0;z-index:10}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo a{color:var(--dark);text-decoration:none;font-weight:800}
.main-nav a{margin-inline:10px;color:var(--muted);text-decoration:none}
.main-nav a:hover{color:var(--dark)}
.main-nav .cta{background:var(--primary);color:#fff;padding:8px 14px;border-radius:8px}
.hero{background:var(--light);padding:24px;border-radius:var(--radius);margin:24px 0}
.posts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.posts-grid article{border:1px solid #e2e8f0;padding:16px;border-radius:10px;background:#fff}
.posts-grid h4{margin:0 0 8px 0}
.more{margin-top:12px}
.site-footer{border-top:1px solid #e2e8f0;margin-top:40px;padding:24px 0;color:var(--muted)}
.breadcrumbs{font-size:.9rem;color:var(--muted);margin:8px 0}
.post{margin:24px 0}
.post h1{margin-top:0}
.post .meta{color:var(--muted);font-size:.9rem;margin-bottom:10px}
.post .content a{color:#0a7cff}

@media (max-width:768px){
  .posts-grid{grid-template-columns:1fr}
  .site-header .container{height:auto;flex-wrap:wrap;gap:8px;padding:8px 16px}
}