/* ---------------------- */
/* Top banner             */
/* ---------------------- */
.top-banner {
    background: linear-gradient(90deg, #00ff99, #25d366);
    color: #000;
    text-align: center;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    z-index: 1000;
  }
  
  .top-banner a {
    color: #000;
    font-weight: bold;
    margin-left: 8px;
    text-decoration: underline;
  }
  
  /* ---------------------- */
  /* Single post            */
  /* ---------------------- */
  .post-article {
    max-width: 860px;
    margin: 0 auto;
    color: #e9ecef;
  }
  
  .post-head {
    margin-bottom: 14px;
    text-align: center;
  }
  
  .post-title {
    font-size: clamp(24px, 3.6vw, 40px);
    margin: 0 0 8px;
  }
  
  .post-meta-line {
    display: flex;
    gap: 16px;
    justify-content: center;
    color: #9aa4ad;
    font-size: .93rem;
  }
  
  .post-meta-line i {
    margin-right: 6px;
  }
  
  /* ---------------------- */
  /* Cover image            */
  /* ---------------------- */
  .post-cover {
    margin: 18px 0 10px;
    border-radius: 18px;
    overflow: hidden;
    background: #0e0e0e;
  }
  
  .post-cover img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset; /* natural aspect ratio */
  }
  
  /* ---------------------- */
  /* Share buttons          */
  /* ---------------------- */
  .post-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 22px;
  }
  
  .post-share span {
    color: #9aa4ad;
    font-size: .9rem;
  }
  
  .post-share .share-link {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #111;
    border: 1px solid #232323;
    color: #dbe2e9;
    text-decoration: none;
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
  }
  
  .post-share .share-link:hover {
    transform: translateY(-2px);
    background: #151515;
    border-color: #2c2c2c;
  }
  
  .post-share .x:hover        { color: #fff; }
  .post-share .linkedin:hover { color: #0a66c2; }
  .post-share .facebook:hover { color: #1b74e4; }
  .post-share .whatsapp:hover { color: #25d366; }
  
  /* ---------------------- */
  /* Post body (content)    */
  /* ---------------------- */
  .post-body {
    line-height: 1.85;
    font-size: 1.02rem;
    direction: rtl;
    text-align: right;
  }
  
  .post-body h2 {
    font-size: 1.4rem;
    margin: 22px 0 10px;
  }
  
  .post-body p {
    margin: 10px 0;
    color: #d5dde5;
  }
  
  /* ---------------------- */
  /* Inner images           */
  /* ---------------------- */
  .inner-image {
    margin: 18px 0;
    border-radius: 14px;
    overflow: hidden;
    background: #0e0e0e;
  }
  
  .inner-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
  }
  
  .inner-image figcaption {
    color: #9aa4ad;
    font-size: .85rem;
    padding: 8px 10px;
  }
  
  /* ---------------------- */
  /* Footer of post         */
  /* ---------------------- */
  .post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  
  .post-tags {
    display: flex;
    gap: 8px;
  }
  
  .post-tags a {
    text-decoration: none;
    color: #B6FFD3;
    background: #0e1a14;
    border: 1px solid #163d2a;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .85rem;
  }
  
  /* ---------------------- */
  /* Sidebar banner (طولي) */
  /* ---------------------- */
  .sidebar-banner {
    display: block;
    margin-top: 14px;
    border-radius: 14px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 120% at 10% 10%, #0aff84 0%, rgba(10,255,132,0.15) 35%, rgba(0,0,0,0) 60%),
                linear-gradient(180deg, #151515 0%, #0f0f0f 100%);
    box-shadow: 0 8px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
    transition: transform .2s ease, box-shadow .2s ease;
    width: 100%;
    min-height: 350px; /* رول-اب طولي */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .sidebar-banner .sb-inner {
    padding: 20px 14px;
    color: #e9fef3;
  }
  
  .sidebar-banner .sb-eyebrow {
    display: inline-block;
    font-size: .78rem;
    color: #b7ffd8;
    opacity: .9;
    margin-bottom: 6px;
  }
  
  .sidebar-banner .sb-title {
    margin: 12px 0 6px;
    font-size: 1.15rem;
    color: #fff;
  }
  
  .sidebar-banner .sb-text {
    margin: 0 0 12px;
    color: #cfe8da;
    font-size: .92rem;
    line-height: 1.5;
  }
  
  .sidebar-banner .sb-btn {
    display: inline-block;
    padding: 10px 16px;
    border: none;
    background: #0aff84;
    color: #071b10;
    font-weight: 700;
    border-radius: 10px;
    font-size: .95rem;
    cursor: pointer;
    transition: background .2s, transform .2s;
  }
  
  .sidebar-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06);
  }
  
  .sidebar-banner .sb-btn:hover {
    background: #09d873;
    transform: translateY(-2px);
  }
  
  /* ---------------------- */
  /* Blog heading           */
  /* ---------------------- */
  .blog-heading {
    font-size: 2rem; 
    font-weight: 800;

    margin: 30px 0 20px;
    text-align: center;
    color: #fff;
  }