*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:'Tajawal',system-ui,-apple-system,sans-serif;
  background:#0a0f1e;
  color:#f8fafc;
  line-height:1.7;
  min-height:100vh;
}
a { color:#d4af37; text-decoration:none; transition:color .2s; }
a:hover { color:#f1c75c; }
::selection { background:rgba(212,175,55,0.38); color:#fff; }
:focus-visible { outline:2px solid #6366f1; outline-offset:3px; }

.skip-link {
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}
.skip-link:focus {
  position:fixed; inset-block-start:8px; inset-inline-start:8px; z-index:200;
  width:auto; height:auto; clip:auto; overflow:visible;
  padding:.55rem 1rem; background:#d4af37; color:#0f172a;
  font-weight:800; border-radius:10px;
}

.gold-text { color:#d4af37; font-weight:800; }

.blog-header {
  background:#0f172a;
  color:#fff; padding:1.1rem 0; position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,0.06);
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
}
.blog-header-inner {
  max-width:1100px; margin:0 auto; padding:0 1.4rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  position:relative;
}
.blog-brand { display:flex; align-items:center; gap:.7rem; font-weight:800; font-size:1.18rem; }
.blog-brand img { width:34px; height:34px; border-radius:8px; }
.blog-brand-name { color:#d4af37; }
.blog-nav { display:flex; gap:.8rem; align-items:center; position:relative; }
.blog-nav-toggle {
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid rgba(255,255,255,0.12);
  background:transparent; color:#fff; border-radius:10px; cursor:pointer; font-size:1.4rem;
  flex-shrink:0;
}
.blog-nav-panel { display:flex; gap:1.2rem; align-items:center; }
.blog-nav-panel a { color:rgba(255,255,255,0.82); font-weight:600; font-size:.95rem; transition:color .2s; }
.blog-nav-panel a:hover { color:#d4af37; }
.blog-nav .cta {
  background:#c5a059; color:#0f172a !important;
  padding:.55rem 1.1rem; border-radius:10px; font-weight:700; min-height:40px;
  display:inline-flex; align-items:center; white-space:nowrap;
  transition:background .2s;
}
.blog-nav .cta:hover { background:#d4af37; color:#0f172a !important; }
.blog-langs { display:flex; gap:.3rem; font-size:.82rem; font-weight:700; }
.blog-langs a {
  padding:.4rem .55rem; min-height:36px; display:inline-flex; align-items:center;
  border-radius:8px; border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.82); white-space:nowrap;
}
.blog-langs a:hover { color:#d4af37; border-color:rgba(212,175,55,0.4); }
.blog-langs a.active { background:#c5a059; color:#0f172a; border-color:transparent; }

.blog-hero {
  background:#0f172a;
  padding:3.6rem 1.4rem 2.8rem; text-align:center;
  border-bottom:1px solid rgba(212,175,55,0.15);
  position:relative; overflow:hidden;
}
.blog-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 15% 90%,rgba(197,160,89,0.08),transparent 45%);
  pointer-events:none;
}
.blog-hero h1 {
  font-size:clamp(1.6rem, 4vw, 2.2rem); font-weight:800; margin:0 0 .7rem;
  color:#fff; position:relative; letter-spacing:-0.02em; text-wrap:balance;
}
.blog-hero p { font-size:1.05rem; color:#cbd5e1; max-width:65ch; margin:0 auto; position:relative; }

.container { max-width:1100px; margin:0 auto; padding:0 1.4rem; }

.posts-grid {
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  padding:2.6rem 0;
}
.post-card {
  background:#13131a; border-radius:16px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.08);
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s;
  display:flex; flex-direction:column;
}
.post-card:hover {
  transform:translateY(-4px);
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
}
.post-card-img {
  height:170px; background:#c5a059;
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:3.5rem; position:relative; overflow:hidden;
}
.post-card-img i { position:relative; z-index:1; }
.post-card-body { padding:1.4rem; flex:1; display:flex; flex-direction:column; }
.post-card-cat {
  display:inline-block;
  background:rgba(197,160,89,0.16);
  color:#fbbf24;
  padding:.3rem .7rem; border-radius:6px; font-size:.72rem; font-weight:700;
  margin-bottom:.7rem; align-self:flex-start;
}
.post-card h2 { font-size:1.18rem; font-weight:800; margin:0 0 .55rem; color:#f8fafc; line-height:1.4; text-wrap:balance; }
.post-card p { color:#cbd5e1; font-size:.92rem; margin:0 0 1rem; flex:1; }
.post-card-meta {
  display:flex; justify-content:space-between; align-items:center;
  font-size:.8rem; color:#94a3b8;
  padding-top:.9rem; border-top:1px solid rgba(255,255,255,0.06);
}
.post-card-meta .read-more { font-weight:700; color:#d4af37; }
.post-card-meta .read-more i { transition:transform .2s; display:inline-block; }
html[dir="rtl"] .post-card-meta .read-more i { transform:rotate(180deg); }
.post-card:hover .read-more i { transform:translateX(-4px); }
html[dir="rtl"] .post-card:hover .read-more i { transform:rotate(180deg) translateX(-4px); }

.blog-cta {
  background:#13131a;
  color:#fff; border-radius:16px; padding:2.4rem 1.8rem;
  margin:2rem 0 3.5rem; text-align:center;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
}
.blog-cta h2 { font-size:1.8rem; font-weight:800; margin:0 0 .6rem; text-wrap:balance; }
.blog-cta p { color:#cbd5e1; margin:0 0 1.4rem; }
.blog-cta .btn {
  display:inline-block; background:#c5a059; color:#0f172a;
  padding:.85rem 1.8rem; border-radius:12px; font-weight:800; font-size:1rem;
  transition:background .2s;
}
.blog-cta .btn:hover { background:#d4af37; color:#0f172a; }

.blog-footer {
  background:#0a0f1e; color:#94a3b8;
  padding:1.6rem 1.4rem;
  text-align:center; font-size:.85rem;
  border-top:1px solid rgba(255,255,255,0.06);
}
.blog-footer a { color:#d4af37; font-weight:700; }

.scroll-progress {
  position:fixed; top:0; inset-inline-start:0; height:3px; width:0%;
  background:#d4af37;
  z-index:100;
}

.blog-toolbar { display:flex; flex-direction:column; gap:.9rem; padding:1.6rem 0 .2rem; }
.blog-filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.blog-filters .pill {
  font-family:inherit;
  background:rgba(255,255,255,0.04); color:#cbd5e1;
  border:1px solid rgba(255,255,255,0.1);
  padding:.5rem .95rem; min-height:40px; border-radius:99px; font-size:.85rem; font-weight:700;
  cursor:pointer; transition:color .2s, border-color .2s, background .2s;
}
.blog-filters .pill:hover { color:#d4af37; border-color:rgba(212,175,55,0.4); }
.blog-filters .pill.active {
  background:#c5a059; color:#0f172a;
  border-color:transparent;
}
.blog-search { position:relative; max-width:420px; }
.blog-search input {
  width:100%; padding-block:.7rem; padding-inline-start:2.5rem; padding-inline-end:1rem; min-height:44px;
  background:#18181b; border:1px solid rgba(255,255,255,0.12);
  border-radius:10px; color:#f8fafc; font-family:inherit; font-size:.95rem;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.blog-search input::placeholder { color:#94a3b8; }
.blog-search input:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,0.25); }
.blog-search i {
  position:absolute; top:50%; transform:translateY(-50%);
  inset-inline-start:1rem; color:#94a3b8; font-size:1.1rem; pointer-events:none;
}

.post-card.card-hide { display:none !important; }
.blog-empty { display:none; text-align:center; padding:2.6rem 0; color:#94a3b8; }
.blog-empty.show { display:block; }
.blog-dynamic-title {
  color:#d4af37; font-size:1.4rem; font-weight:800; margin:0 0 1.2rem;
}

.back-to-top {
  position:fixed; bottom:1.4rem; inset-inline-start:1.4rem; z-index:90;
  width:46px; height:46px; border-radius:14px; border:none; cursor:pointer;
  background:#c5a059; color:#0f172a;
  font-size:1.25rem; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .2s, transform .2s, visibility .2s, background .2s;
}
.back-to-top.show { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { background:#d4af37; }

.blog-hero .orb {
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.28;
  pointer-events:none; animation:orbFloat 12s ease-out infinite;
}
.blog-hero .orb-1 { width:220px; height:220px; background:rgba(212,175,55,0.5); top:-60px; inset-inline-end:8%; }
.blog-hero .orb-2 { width:260px; height:260px; background:rgba(197,160,89,0.35); bottom:-80px; inset-inline-start:6%; animation-delay:-6s; }
@keyframes orbFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-18px); }
}

.aos-failed [data-aos],
[data-aos] {
  opacity:1 !important; transform:none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity:1 !important; transform:none !important; transition:none !important; }
  .blog-hero .orb { animation:none; }
  .post-card, .back-to-top, .blog-cta .btn { transition:none; }
}

@media (max-width:640px) {
  .post-card-img { height:140px; font-size:2.8rem; }
  .blog-hero { padding:2.4rem 1.2rem 2rem; }
  .blog-hero p { font-size:.95rem; }
  .blog-cta { padding:1.6rem 1.2rem; }
  .blog-cta h2 { font-size:1.4rem; }
  .blog-nav-toggle { display:inline-flex; }
  .blog-nav-panel {
    display:none; position:absolute; top:calc(100% + .65rem);
    inset-inline-end:0; inset-inline-start:auto; min-width:min(18rem, calc(100vw - 2rem));
    z-index:60; background:#13131a;
    border:1px solid rgba(255,255,255,0.12); border-radius:12px;
    padding:.5rem; flex-direction:column; align-items:stretch;
    box-shadow:0 8px 32px rgba(0,0,0,0.6);
  }
  .blog-nav.is-open .blog-nav-panel { display:flex; }
  .blog-nav-panel a { padding:.75rem 1rem; }
  .blog-nav-panel .blog-langs {
    justify-content:center; padding:.5rem .5rem .15rem;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .blog-nav-panel .blog-langs a { padding:.4rem .55rem; }
  .blog-nav-panel .cta { justify-content:center; width:100%; }
  .posts-grid { grid-template-columns:1fr; }
}