/* واجهة الكرت اللايت + الحركة (سريعة + سكرين كامل العرض) */
:root { --ops-accent:#111827; --ops-radius:24px; --ops-speed:12s; }
.ops-grid{display:grid;gap:18px}
.ops-cols-1{grid-template-columns:1fr}
.ops-cols-2{grid-template-columns:repeat(2,1fr)}
.ops-cols-3{grid-template-columns:repeat(3,1fr)}
.ops-cols-4{grid-template-columns:repeat(4,1fr)}

.ops-card{position:relative;border-radius:var(--ops-radius);background:#fff;box-shadow:0 12px 35px rgba(0,0,0,.08);overflow:hidden;border:1px solid #eef0f4;transition:transform .25s ease, box-shadow .25s ease}
.ops-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(0,0,0,.12)}

/* شريط الفلاتر الأيقونية */
.ops-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.ops-filter-btn{
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  background:#fff;border:1px solid #e8ebf1;border-radius:16px;padding:10px 12px;
  cursor:pointer;transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ops-filter-btn:hover{transform:translateY(-1px);border-color:#d7dbe4;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.ops-filter-btn.is-active{border-color:var(--ops-accent);box-shadow:0 8px 26px rgba(0,0,0,.08)}
.ops-filter-icon{width:36px;height:36px;border-radius:12px;object-fit:contain;background:#fff;display:block}
.ops-filter-icon.badge{display:flex;align-items:center;justify-content:center;font-weight:700}
.ops-filter-icon.all{width:36px;height:36px;border-radius:12px;background:#f2f4f8;display:block}
.ops-filter-label{font-size:12px;opacity:.85;white-space:nowrap}

/* منطقة الميديا */
.ops-media{position:relative;height:260px;background:#fff; border-bottom:1px solid #eef0f4;overflow:hidden}
.ops-media::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--ops-bg);
  background-size:100% auto;           /* تُظهر السكرين كامل العرض */
  background-position:50% 0%;          /* البداية من أعلى الصورة */
  background-repeat:no-repeat;
  filter:contrast(1.02) saturate(1.02);
}

/* حركة تمرير كاملة من أعلى لأسفل */
.ops-card .ops-media::before{animation:ops-pan var(--ops-speed) linear infinite}
@keyframes ops-pan{
  0%   { background-position-y: 0%;   }
  100% { background-position-y: 100%; }
}

/* تظهر اللوجو عند الإشارة */
.ops-logo{
  position:absolute;inset:0;margin:auto;max-width:60%;max-height:60%;
  opacity:0;transform:scale(.98);
  transition:opacity .25s ease, transform .25s ease;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.35))
}
.ops-card:hover .ops-logo, .ops-card.touch-show .ops-logo{opacity:1;transform:scale(1)}

/* عند الإشارة نقلل ظهور السكرين لترك الخلفية البيضاء للوجو */
.ops-card:hover .ops-media::before, .ops-card.touch-show .ops-media::before{
  opacity:.10;
  filter:grayscale(.2) brightness(.85);
}

/* ميتا */
.ops-meta{padding:16px}
.ops-title{margin:0 0 6px;font-size:18px;line-height:1.3;color:#0b0f1a}
.ops-company{font-size:13px;opacity:.75;margin-bottom:10px}

/* زر زيارة المشروع – أيقونة زاوية إطار 80 */
.ops-visit{
  display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:80px;
  border:1px solid #e5e7eb;text-decoration:none;color:var(--ops-accent);font-weight:600;
  transition:background .2s ease,border-color .2s ease,transform .2s ease
}
.ops-visit:hover{background:#f6f7fb;border-color:#d6dae3;transform:translateY(-1px)}
.ops-icon{width:18px;height:18px;display:block}

/* داكن */
body.ops-dark .ops-card{background:#0b0f1a;border-color:#162030}
body.ops-dark .ops-title{color:#e5e7eb}
body.ops-dark .ops-visit{border-color:#243247;color:#e5e7eb}
body.ops-dark .ops-visit:hover{background:#0f1522;border-color:#2f425f}

/* ... كود CSS الموجود مسبقًا ... */

/* قسم روابط التطبيقات الجديدة */
.ops-app-links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px; /* لتوفير مساحة بين العنوان والأيقونات */
}

.ops-app-links a {
  display: block;
  border-radius: 50%;
  padding: 8px;
  background-color: #f1f3f7;
  transition: transform 0.2s ease, background-color 0.2s ease;
  line-height: 0; /* لمنع ظهور مسافة إضافية أسفل الأيقونة */
}

.ops-app-links a:hover {
  transform: translateY(-2px);
  background-color: #e5e7eb;
}

.ops-app-links img {
  width: 24px;
  height: 24px;
}

/* تنسيق الوضع الداكن لروابط التطبيقات */
body.ops-dark .ops-app-links a {
  background-color: #1a2233;
}
body.ops-dark .ops-app-links a:hover {
  background-color: #243247;
}

/* ... كود CSS الموجود مسبقًا ... */