@@ خط ۲۷: / خط ۲۷: @@
      width:100%;
      max-width:1400px;
-     margin:auto;
+     margin:0 auto;
      padding:0 10px 30px;
      direction:rtl;
      text-align:right;
      box-sizing:border-box;
-     font-family:IRANSans,Vazirmatn,Tahoma,Arial,sans-serif;
+     font-family:
+        IRANSans,
+        Vazirmatn,
+        Tahoma,
+        Arial,
+        sans-serif;
 }
@@ خط ۱۸۷: / خط ۱۹۴: @@
      border-radius:12px;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:3px;
      color:var(--ws-primary);
@@ خط ۲۲۳: / خط ۲۳۲: @@
      padding:0;
      min-width:max-content;
      display:flex;
      align-items:center;
@@ خط ۲۳۲: / خط ۲۴۲: @@
      gap:7px;
      padding:13px 15px;
      color:#fff;
      font-size:13px;
@@ خط ۲۷۳: / خط ۲۸۴: @@
      content:"";
      display:inline-block;
      width:5px;
      height:21px;
      border-radius:5px;
      background:var(--ws-gold);
      margin-left:8px;
      vertical-align:-4px;
@@ خط ۲۹۵: / خط ۳۰۹: @@
      display:flex;
      gap:10px;
      overflow-x:auto;
      padding:3px 2px 8px;
      scrollbar-width:none;
 }
@@ خط ۳۰۶: / خط ۳۲۳: @@
 .ws-category{
      flex:0 0 112px;
      background:#fff;
      border:1px solid var(--ws-border);
      border-radius:16px;
      padding:13px 8px;
      text-align:center;
      box-shadow:0 4px 15px rgba(0,0,0,.04);
 }
@@ خط ۳۲۲: / خط ۳۴۴: @@
      width:55px;
      height:55px;
-     margin:auto auto 8px;
+     margin:0 auto 8px;
      border-radius:50%;
      background:#eef7f3;
      display:grid;
      place-items:center;
      color:var(--ws-secondary);
      font-size:23px;
@@ خط ۳۳۹: / خط ۳۶۶: @@
 /* =========================================================
-    HERO
+    HERO SLIDER
+   تصاویر بدون Crop
 ========================================================= */
 .ws-hero{
      position:relative;
+    width:100%;
+    max-width:100%;
      overflow:hidden;
      border-radius:20px;
-     background:#e9edf2;
+     background:#edf0f3;
      box-shadow:var(--ws-shadow);
+    /*
+       جلوگیری از تغییر عرض یا بیرون‌زدگی
+    */
+    contain:layout paint;
 }
 .ws-hero-track{
      display:flex;
-    transition:transform .65s ease;
      direction:ltr;
-}
+    width:100%;
+    transition:
+        transform .65s ease;
+}
 .ws-hero-slide{
      flex:0 0 100%;
+    width:100%;
      min-width:100%;
-     aspect-ratio:16/6;
+     /*
+       ارتفاع توسط JS از نسبت واقعی عکس
+       تعیین می‌شود.
+    */
+    height:auto;
+    position:relative;
+    display:flex;
+    align-items:center;
+    justify-content:center;
      overflow:hidden;
      background:#edf0f3;
 }
 .ws-hero-slide img{
+    display:block;
+    /*
+       عرض همیشه برابر عرض اسلاید
+    */
      width:100%;
-     height:100%;
-     display:block;
+    /*
+       ارتفاع خودکار
+       تا نسبت اصلی تصویر حفظ شود.
+    */
+     height:auto;
+    /*
+       هیچ Crop اتفاق نمی‌افتد.
+     */
      object-fit:contain;
      object-position:center;
+    /*
+       جلوگیری از فضای اضافه ناشی از inline image
+    */
+    vertical-align:middle;
 }
-.ws-hero-dots{
-    position:absolute;
-    bottom:10px;
-    left:50%;
-    transform:translateX(-50%);
-    display:flex;
-    gap:6px;
-    direction:ltr;
-}
-.ws-hero-dot{
+/*
-    width:8px;
+   اگر تصویر خیلی بلند باشد، روی نمایشگرهای
-    height:8px;
+   کوچک بیش از حد ارتفاع نگیرد.
-    border:0;
+*/
-    padding:0;
-     border-radius:50%;
+@media (max-width:599px){
-    background:rgba(255,255,255,.7);
+    .ws-hero-slide img{
+        width:100%;
+        height:auto;
+        max-height:65vw;
+        object-fit:contain;
+     }
 }
-.ws-hero-dot.active{
+@media (min-width:600px){
-    width:22px;
-    border-radius:10px;
+    .ws-hero-slide img{
-    background:var(--ws-gold);
+        width:100%;
+        height:auto;
+        max-height:55vw;
+        object-fit:contain;
+    }
 }
 /* =========================================================
-    TWO ROW PRODUCT SLIDER
+    HERO DOTS
-   هر ردیف = 4 کارت
 ========================================================= */
-.ws-product-slider{
+.ws-hero-dots{
-     position:relative;
+     position:absolute;
-     overflow:hidden;
-     padding:2px 0 7px;
+     bottom:10px;
-}
+     left:50%;
+    transform:translateX(-50%);
-.ws-product-track{
      display:flex;
-    width:max-content;
-     flex-direction:column;
+     gap:6px;
-    gap:12px;
      direction:ltr;
-     transition:transform .65s ease;
+     z-index:5;
 }
-.ws-product-row{
+.ws-hero-dot{
-     display:flex;
+     width:8px;
-     gap:10px;
+     height:8px;
-     direction:rtl;
+    border:0;
+    padding:0;
+    border-radius:50%;
+    background:rgba(255,255,255,.8);
+     cursor:pointer;
 }
-.ws-product-card{
+.ws-hero-dot.active{
-    flex:0 0 180px;
+     width:22px;
-     width:180px;
-    background:#fff;
+     border-radius:10px;
-    border:1px solid var(--ws-border);
-     border-radius:16px;
-    overflow:hidden;
-    box-shadow:0 4px 16px rgba(0,0,0,.045);
-    direction:rtl;
-    transition:.2s;
-}
-.ws-product-card:hover{
+     background:var(--ws-gold);
-     transform:translateY(-4px);
-    box-shadow:0 10px 25px rgba(0,0,0,.09);
 }
-.ws-product-image{
+/* =========================================================
+   PRODUCT SLIDER
+   کاملاً Responsive
+========================================================= */
+.ws-product-slider{
+    position:relative;
      width:100%;
-     height:145px;
+     max-width:100%;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    background:#fff;
-    padding:12px;
-}
-.ws-product-image img{
+     overflow:hidden;
-     width:100%;
-    height:100%;
-    object-fit:contain;
-    display:block;
-}
-.ws-product-info{
+     padding:3px 0 8px;
-     padding:10px;
 }
-.ws-product-title{
-    min-height:38px;
-    margin:0 0 7px;
-    color:var(--ws-text);
-    font-size:12px;
-    line-height:1.8;
-    font-weight:700;
-}
-.ws-brand{
+.ws-product-track{
-    color:var(--ws-muted);
-    font-size:10px;
-    margin-bottom:7px;
-}
-.ws-price{
      display:flex;
-    align-items:center;
-    justify-content:space-between;
-    gap:5px;
-}
-.ws-new-price{
+    flex-direction:column;
-     color:var(--ws-primary);
-     font-size:13px;
+     gap:12px;
-     font-weight:900;
-}
+     direction:ltr;
+     width:100%;
+    transition:
+        transform .65s ease;
-.ws-discount{
+     will-change:transform;
-    background:#fff1f1;
-    color:#d64545;
-    border-radius:6px;
-    padding:3px 5px;
-    font-size:9px;
-     font-weight:800;
 }
-.ws-product-actions{
-    display:flex;
-    gap:6px;
-    margin-top:9px;
-}
-.ws-cart{
+/*
-     flex:1;
+   هر ردیف تمام عرض واقعی کانتینر را می‌گیرد
-     border:0;
+*/
-     border-radius:8px;
-    padding:8px;
+.ws-product-row{
-    background:var(--ws-secondary);
-     color:#fff;
+     display:grid;
-    font-family:inherit;
-     font-size:10px;
+     width:100%;
-}
+     max-width:100%;
+     direction:rtl;
+     gap:10px;
-.ws-favorite{
+    /*
-    width:34px;
+       موبایل:
-     border:1px solid var(--ws-border);
+کارت کامل
-     border-radius:8px;
+     */
-    background:#fff;
+     grid-template-columns:
-    color:var(--ws-primary);
+        repeat(2,minmax(0,1fr));
 }
 /* =========================================================
-    SLIDER BUTTONS
+    PRODUCT CARD
 ========================================================= */
-.ws-slider-btn{
+.ws-product-card{
-    position:absolute;
-     top:50%;
+     width:100%;
-     transform:translateY(-50%);
+     min-width:0;
-     z-index:5;
+     max-width:100%;
-     width:36px;
-    height:36px;
+     background:#fff;
      border:1px solid var(--ws-border);
-     border-radius:50%;
-     background:#fff;
+     border-radius:16px;
-    color:var(--ws-primary);
-     box-shadow:0 5px 15px rgba(0,0,0,.1);
+     overflow:hidden;
+     box-shadow:
+4px 16px rgba(0,0,0,.045);
+    direction:rtl;
+    display:flex;
+    flex-direction:column;
+    transition:
+        transform .2s ease,
+        box-shadow .2s ease;
 }
-.ws-slider-prev{
+.ws-product-card:hover{
-     right:5px;
-}
+     transform:translateY(-4px);
-.ws-slider-next{
+    box-shadow:
-    left:5px;
+10px 25px rgba(0,0,0,.09);
 }
 /* =========================================================
-    BENEFITS
+    PRODUCT IMAGE
+   هر تصویری انتخاب شود کامل دیده می‌شود
 ========================================================= */
-.ws-benefits{
+.ws-product-image{
-     display:grid;
-     grid-template-columns:repeat(2,1fr);
+     width:100%;
-     gap:9px;
-}
+     /*
+       مربع استاندارد و مستقل از نسبت تصویر اصلی
+    */
+    aspect-ratio:1 / 1;
+    min-height:0;
+     display:flex;
+    align-items:center;
+    justify-content:center;
-.ws-benefit{
-    min-height:105px;
      background:#fff;
-    border:1px solid var(--ws-border);
-     border-radius:16px;
+     padding:10px;
-    padding:13px 8px;
-     text-align:center;
+     overflow:hidden;
 }
-.ws-benefit-icon{
+.ws-product-image img{
-    width:42px;
-    height:42px;
-    margin:auto auto 7px;
-    border-radius:50%;
-    background:var(--ws-gold-light);
-    color:var(--ws-gold);
-    display:grid;
-    place-items:center;
-    font-size:19px;
-}
-.ws-benefit strong{
      display:block;
-    font-size:12px;
-    color:var(--ws-primary);
-}
-.ws-benefit span{
+    width:100%;
-     display:block;
+     height:100%;
-     margin-top:4px;
-     font-size:10px;
+     max-width:100%;
-     color:var(--ws-muted);
+     max-height:100%;
+     /*
+       مهم‌ترین ویژگی:
+       تصویر هرگز Crop نمی‌شود.
+    */
+    object-fit:contain;
+    object-position:center;
 }
 /* =========================================================
-    SECURITY CATEGORIES
+    PRODUCT INFO
-کارت - بزرگتر و ریسپانسیو
 ========================================================= */
-.ws-category-grid{
+.ws-product-info{
-     display:grid;
-    grid-template-columns:repeat(2,1fr);
+     width:100%;
-     gap:12px;
-}
+     padding:10px;
-.ws-category-box{
-    background:#fff;
-    border:1px solid var(--ws-border);
-    border-radius:17px;
-    padding:15px;
      display:flex;
-     align-items:center;
+     flex-direction:column;
-    gap:12px;
-    min-height:105px;
-}
-.ws-category-box:hover{
+     flex:1;
-    border-color:var(--ws-secondary);
-     transform:translateY(-3px);
 }
-.ws-category-box-icon{
+.ws-product-title{
-     flex:0 0 58px;
-    width:58px;
+     margin:0 0 7px;
-     height:58px;
-    border-radius:14px;
+     min-height:40px;
-    display:grid;
-    place-items:center;
+     color:var(--ws-text);
-    background:#edf7f3;
-     color:var(--ws-secondary);
-    font-size:25px;
-}
-.ws-category-box strong{
+     font-size:12px;
-    display:block;
-    color:var(--ws-primary);
-     font-size:13px;
-}
-.ws-category-box span{
-    display:block;
-    color:var(--ws-muted);
-    font-size:11px;
      line-height:1.8;
-    margin-top:5px;
-}
+    font-weight:700;
+    display:-webkit-box;
+    -webkit-line-clamp:2;
-/* =========================================================
+    -webkit-box-orient:vertical;
-   BRANDS
-========================================================= */
-.ws-brands{
+     overflow:hidden;
-     display:grid;
-    grid-template-columns:repeat(2,1fr);
-    gap:9px;
 }
-.ws-brand-card{
+.ws-brand{
-    height:75px;
-     border:1px solid var(--ws-border);
+     color:var(--ws-muted);
-     border-radius:14px;
-     background:#fff;
+     font-size:10px;
+     margin-bottom:7px;
+}
+.ws-price{
      display:flex;
      align-items:center;
-    justify-content:center;
-    padding:10px;
-}
-.ws-brand-card img{
+    justify-content:space-between;
-     width:100%;
-    height:100%;
+     gap:5px;
-     object-fit:contain;
+     margin-top:auto;
 }
+.ws-new-price{
-/* =========================================================
+    color:var(--ws-primary);
-   ARTICLES
-========================================================= */
-.ws-articles{
+    font-size:13px;
-    display:grid;
-     grid-template-columns:1fr;
+     font-weight:900;
-    gap:11px;
 }
-.ws-article{
+.ws-discount{
-     background:#fff;
-     border:1px solid var(--ws-border);
+     background:#fff1f1;
-     border-radius:16px;
-    overflow:hidden;
+     color:#d64545;
-}
+     border-radius:6px;
-.ws-article-image{
+     padding:3px 5px;
-     height:150px;
-    background:#edf0f3;
-}
-.ws-article-image img{
+     font-size:9px;
-    width:100%;
-    height:100%;
-    display:block;
-     object-fit:cover;
-}
-.ws-article-content{
+    font-weight:800;
-    padding:12px;
 }
-.ws-article h3{
+.ws-product-actions{
-    margin:0;
-     color:var(--ws-primary);
+     display:flex;
-    font-size:14px;
-     line-height:1.8;
+     gap:6px;
-}
-.ws-article p{
+     margin-top:9px;
-     color:var(--ws-muted);
-    font-size:11px;
-    line-height:1.9;
-    margin:6px 0 9px;
 }
-.ws-read{
+.ws-cart{
-    color:var(--ws-secondary);
-    font-size:11px;
-    font-weight:800;
-}
+    flex:1;
-/* =========================================================
+    border:0;
-   CTA
-========================================================= */
-.ws-cta{
+     border-radius:8px;
-    margin-top:25px;
-    padding:22px 15px;
-     border-radius:20px;
-    background:linear-gradient(
-deg,
-        var(--ws-primary-dark),
-        var(--ws-primary)
-    );
-    color:#fff;
-    text-align:center;
-}
-.ws-cta h2{
+     padding:8px;
-     margin:0 0 8px;
-    font-size:20px;
-}
-.ws-cta p{
+     background:var(--ws-secondary);
-     margin:0 auto 15px;
-    max-width:650px;
-    color:#e5ebf0;
-    font-size:12px;
-    line-height:2;
-}
-.ws-cta-btn{
-    display:inline-flex;
-    align-items:center;
-    justify-content:center;
-    gap:8px;
-    background:var(--ws-gold);
      color:#fff;
-    padding:11px 22px;
-    border-radius:10px;
-    font-size:12px;
-    font-weight:800;
-}
+    font-family:inherit;
-/* =========================================================
+    font-size:10px;
-   FOOTER
-========================================================= */
-.ws-footer{
+     cursor:pointer;
-     margin-top:25px;
-    background:var(--ws-primary-dark);
-    color:#fff;
-    border-radius:20px 20px 0 0;
-    padding:24px 15px 15px;
 }
-.ws-footer-grid{
+.ws-favorite{
-     display:grid;
-     grid-template-columns:1fr;
+     width:34px;
-     gap:20px;
+     flex:0 0 34px;
-}
+     border:1px solid var(--ws-border);
-.ws-footer h3{
+     border-radius:8px;
-    margin:0 0 10px;
-     font-size:14px;
-}
-.ws-footer p,
+     background:#fff;
-.ws-footer li,
-.ws-footer a{
-     color:#cbd5df;
-    font-size:11px;
-    line-height:2;
-}
-.ws-footer ul{
+     color:var(--ws-primary);
-     margin:0;
-    padding:0;
-    list-style:none;
 }
-.ws-footer i{
-    color:var(--ws-gold);
-    width:20px;
-}
-.ws-footer-bottom{
+/* =========================================================
-    border-top:1px solid rgba(255,255,255,.1);
-    margin-top:18px;
-    padding-top:12px;
-    text-align:center;
-    color:#9eabb7;
-    font-size:10px;
-}
-/* =========================================================
     TABLET
 ========================================================= */
@@ خط ۸۴۸: / خط ۸۲۳: @@
      }
-     .ws-benefits{
+    /*
-         grid-template-columns:repeat(4,1fr);
+       سه کارت کامل
+    */
+     .ws-product-row{
+         grid-template-columns:
+            repeat(3,minmax(0,1fr));
+    }
+    .ws-product-image{
+        padding:12px;
      }
      .ws-category-grid{
          grid-template-columns:repeat(3,1fr);
-    }
-    .ws-category-box{
-        min-height:115px;
-        padding:17px;
-    }
-    .ws-category-box-icon{
-        width:62px;
-        height:62px;
-        flex-basis:62px;
-    }
-    .ws-category-box strong{
-        font-size:14px;
-    }
-    .ws-category-box span{
-        font-size:11px;
      }
@@ خط ۸۸۳: / خط ۸۴۷: @@
      }
-     .ws-product-card{
+     .ws-benefits{
-         flex-basis:205px;
+         grid-template-columns:repeat(4,1fr);
-        width:205px;
-    }
-    .ws-product-image{
-        height:160px;
      }
 }
@@ خط ۹۰۵: / خط ۸۶۴: @@
      }
-    .ws-header{
+     .ws-header-main{
-        padding:15px;
+         grid-template-columns:
-    }
+px minmax(300px,1fr) 245px;
-     .ws-header-main{
-         grid-template-columns:190px minmax(300px,1fr) 245px;
      }
@@ خط ۹۱۷: / خط ۸۷۳: @@
      }
-     .ws-logo{
+    /*
-         justify-content:flex-start;
+       چهار کارت کامل
+    */
+     .ws-product-row{
+         grid-template-columns:
+            repeat(4,minmax(0,1fr));
+        gap:12px;
      }
-     .ws-category{
+     .ws-product-image{
-         flex-basis:140px;
+         padding:13px;
      }
-    /* 5 کارت دسته‌بندی */
      .ws-category-grid{
          grid-template-columns:repeat(5,1fr);
-        gap:14px;
-    }
-    .ws-category-box{
-        min-height:125px;
-        padding:18px;
-        flex-direction:column;
-        justify-content:center;
-        text-align:center;
-    }
-    .ws-category-box-icon{
-        width:66px;
-        height:66px;
-        flex-basis:66px;
-        font-size:28px;
-    }
-    .ws-category-box strong{
-        font-size:14px;
-    }
-    .ws-category-box span{
-        font-size:11px;
      }
@@ خط ۹۶۰: / خط ۸۹۷: @@
      .ws-articles{
          grid-template-columns:repeat(3,1fr);
-    }
-    .ws-product-card{
-        flex-basis:225px;
-        width:225px;
-    }
-    .ws-product-image{
-        height:175px;
      }
@@ خط ۹۹۶: / خط ۹۲۴: @@
      }
-     .ws-product-card{
+     .ws-product-row{
-         flex-basis:240px;
+         grid-template-columns:
-        width:240px;
+            repeat(4,minmax(0,1fr));
-    }
-    .ws-product-image{
-        height:190px;
      }
@@ خط ۱٬۰۰۸: / خط ۹۳۲: @@
          grid-template-columns:repeat(5,1fr);
      }
+}
-    .ws-category-box{
-        min-height:140px;
-    }
-    .ws-category-box-icon{
-        width:70px;
-        height:70px;
-        flex-basis:70px;
-    }
-}
 /* =========================================================
-    MOBILE - PRODUCT CARD
+    SECURITY CATEGORIES
 ========================================================= */
-@media (max-width:599px){
+.ws-category-grid{
-     .ws-product-slider{
+     display:grid;
-        margin-left:-2px;
-        margin-right:-2px;
-    }
-     .ws-product-card{
+     grid-template-columns:
-         flex-basis:calc(
+         repeat(2,minmax(0,1fr));
-            (100vw - 54px) / 2
-        );
-        width:calc(
-            (100vw - 54px) / 2
-        );
-        min-width:145px;
-    }
-     .ws-product-image{
+     gap:10px;
-        height:135px;
+}
-    }
-    .ws-product-title{
+.ws-category-box{
-        font-size:11px;
-    }
-     .ws-category-grid{
+     background:#fff;
-        grid-template-columns:repeat(2,1fr);
-    }
-     .ws-category-box{
+     border:1px solid var(--ws-border);
-        min-height:110px;
-        padding:13px 9px;
-    }
-     .ws-category-box-icon{
+     border-radius:17px;
-        width:52px;
-        height:52px;
-        flex-basis:52px;
-        font-size:22px;
-    }
-     .ws-category-box strong{
+     padding:12px;
-        font-size:12px;
-    }
-     .ws-category-box span{
+     display:flex;
-        font-size:10px;
-    }
-}
+    align-items:center;
-/* =========================================================
+    gap:10px;
-   ACCESSIBILITY
-========================================================= */
-@media (prefers-reduced-motion:reduce){
+    min-height:88px;
-     .ws-hero-track,
+     transition:.2s;
-    .ws-product-track,
-    .ws-category,
-    .ws-product-card,
-    .ws-category-box,
-    .ws-article{
-        transition:none!important;
-    }
 }
-</style>
+.ws-category-box:hover{
+    border-color:var(--ws-secondary);
-<div class="wiki-store">
+    transform:translateY(-3px);
+}
+.ws-category-box-icon{
-<!-- ======================================================
+    flex:0 0 52px;
-     TOP BAR
-====================================================== -->
-<header class="ws-topbar">
+    width:52px;
+    height:52px;
-<div class="ws-topbar-inner">
+    border-radius:13px;
-<div class="ws-top-item">
+    display:grid;
-<i class="fa-solid fa-headset"></i>
+    place-items:center;
-مشاوره تخصصی سیستم‌های امنیتی
-</div>
-<div class="ws-top-item">
+    background:#edf7f3;
-<i class="fa-solid fa-clock"></i>
-شنبه تا پنجشنبه ۹ تا ۲۰
-</div>
-<div class="ws-top-item">
+    color:var(--ws-secondary);
-<i class="fa-solid fa-phone"></i>
-تماس با ARS
-</div>
-<div class="ws-top-item">
+    font-size:22px;
-<i class="fa-solid fa-shield-halved"></i>
+}
-راهکارهای هوشمند حفاظتی
-</div>
-</div>
+.ws-category-box strong{
-</header>
+    display:block;
+    color:var(--ws-primary);
-<!-- ======================================================
+    font-size:12px;
-     HEADER
+}
-====================================================== -->
-<header class="ws-header">
+.ws-category-box span{
-<div class="ws-header-main">
+    display:block;
-<a href="#" class="ws-logo">
+    color:var(--ws-muted);
-<span class="ws-logo-icon">
+    font-size:10px;
-<i class="fa-solid fa-camera"></i>
-</span>
+    line-height:1.8;
-<span>
+    margin-top:4px;
-ARS
+}
-<small>
-دوربین مداربسته و سیستم‌های امنیتی
-</small>
-</span>
-</a>
+@media (min-width:600px){
+    .ws-category-grid{
+        grid-template-columns:
+            repeat(3,minmax(0,1fr));
+    }
-<form class="ws-search" role="search">
+    .ws-category-box{
+        min-height:110px;
+    }
+}
-<input
+@media (min-width:900px){
-type="search"
-placeholder="جستجوی دوربین مداربسته، DVR، NVR یا تجهیزات امنیتی..."
-aria-label="جستجوی محصولات دوربین مداربسته">
-<button type="submit">
+    .ws-category-grid{
-<i class="fa-solid fa-magnifying-glass"></i>
+        grid-template-columns:
-</button>
+            repeat(5,minmax(0,1fr));
-</form>
+        gap:13px;
+    }
+    .ws-category-box{
+        min-height:125px;
-<div class="ws-actions">
+        padding:16px;
-<a href="#" class="ws-action">
+        flex-direction:column;
-<i class="fa-regular fa-user"></i>
-<span>حساب کاربری</span>
-</a>
-<a href="#" class="ws-action">
+        justify-content:center;
-<i class="fa-regular fa-heart"></i>
-<span>علاقه‌مندی</span>
-</a>
-<a href="#" class="ws-action">
+        text-align:center;
-<i class="fa-solid fa-cart-shopping"></i>
+    }
-<span>سبد خرید</span>
-</a>
-</div>
+    .ws-category-box-icon{
-</div>
+        width:64px;
+        height:64px;
+        flex-basis:64px;
-<nav class="ws-nav">
+        font-size:27px;
+    }
-<ul class="ws-nav-list">
+    .ws-category-box strong{
+        font-size:14px;
+    }
-<li>
+    .ws-category-box span{
-<a href="#">
+        font-size:11px;
-<i class="fa-solid fa-bars"></i>
+    }
-دسته‌بندی تجهیزات امنیتی
+}
-</a>
-</li>
-<li><a href="#">دوربین مداربسته</a></li>
-<li><a href="#">DVR و NVR</a></li>
+/* =========================================================
+   BRANDS
+========================================================= */
-<li><a href="#">دزدگیر اماکن</a></li>
+.ws-brands{
-<li><a href="#">تجهیزات انتقال تصویر</a></li>
+    display:grid;
-<li><a href="#">لوازم جانبی دوربین</a></li>
+    grid-template-columns:
+        repeat(2,minmax(0,1fr));
-<li>
+    gap:9px;
-<a href="#" class="ws-special">
+}
-<i class="fa-solid fa-percent"></i>
-پیشنهادهای ویژه
-</a>
-</li>
-</ul>
+.ws-brand-card{
-</nav>
+    height:75px;
-</header>
+    border:1px solid var(--ws-border);
+    border-radius:14px;
-<!-- ======================================================
+    background:#fff;
-     QUICK CATEGORIES
-====================================================== -->
-<section class="ws-section">
+    display:flex;
-<div class="ws-section-head">
+    align-items:center;
+    justify-content:center;
-<h1 class="ws-section-title">
+    padding:10px;
-خرید دوربین مداربسته و تجهیزات امنیتی ARS
-</h1>
-<a href="#" class="ws-more">
+    overflow:hidden;
-مشاهده همه
+}
-</a>
-</div>
+.ws-brand-card img{
+    width:100%;
+    height:100%;
-<div class="ws-category-scroll">
+    object-fit:contain;
-<a href="#" class="ws-category">
+    object-position:center;
-<div class="ws-category-icon">
+}
-<i class="fa-solid fa-camera"></i>
-</div>
-<strong>دوربین مداربسته</strong>
-</a>
-<a href="#" class="ws-category">
-<div class="ws-category-icon">
-<i class="fa-solid fa-video"></i>
-</div>
-<strong>دوربین تحت شبکه</strong>
-</a>
-<a href="#" class="ws-category">
+/* =========================================================
-<div class="ws-category-icon">
+   ARTICLES
-<i class="fa-solid fa-hard-drive"></i>
+========================================================= */
-</div>
-<strong>DVR و NVR</strong>
-</a>
-<a href="#" class="ws-category">
+.ws-articles{
-<div class="ws-category-icon">
-<i class="fa-solid fa-bell"></i>
-</div>
-<strong>دزدگیر اماکن</strong>
-</a>
-<a href="#" class="ws-category">
+    display:grid;
-<div class="ws-category-icon">
-<i class="fa-solid fa-wifi"></i>
-</div>
-<strong>انتقال تصویر</strong>
-</a>
-<a href="#" class="ws-category">
+    grid-template-columns:1fr;
-<div class="ws-category-icon">
-<i class="fa-solid fa-plug"></i>
-</div>
-<strong>لوازم جانبی</strong>
-</a>
-</div>
+    gap:11px;
+}
-</section>
+.ws-article{
+    background:#fff;
-<!-- ======================================================
+    border:1px solid var(--ws-border);
-     HERO SLIDER
-     هر 3 ثانیه
-====================================================== -->
-<section class="ws-section">
+    border-radius:16px;
-<div class="ws-hero" data-hero-slider>
+    overflow:hidden;
+}
-<div class="ws-hero-track">
+.ws-article-image{
-<a href="#" class="ws-hero-slide">
+    width:100%;
-<img
-src="https://dl.faraghaib.ir/m/260018-01/baner-01-01.png"
-alt="دوربین مداربسته ARS و سیستم‌های امنیتی">
-</a>
-<a href="#" class="ws-hero-slide">
+    aspect-ratio:16/9;
-<img
-src="https://dl.faraghaib.ir/m/260018-01/baner-01-02.png"
-alt="فروش و نصب دوربین مداربسته ARS">
-</a>
-<a href="#" class="ws-hero-slide">
+    background:#edf0f3;
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="خرید دوربین مداربسته و تجهیزات حفاظتی">
-</a>
-</div>
+    overflow:hidden;
+}
-<div class="ws-hero-dots"></div>
+.ws-article-image img{
-</div>
+    width:100%;
+    height:100%;
-</section>
+    display:block;
+    object-fit:contain;
-<!-- ======================================================
+    object-position:center;
-     SPECIAL PRODUCTS
+}
-کارت در هر ردیف
-====================================================== -->
-<section class="ws-section">
+.ws-article-content{
+    padding:12px;
+}
-<div class="ws-section-head">
+.ws-article h3{
-<h2 class="ws-section-title">
+    margin:0;
-محصولات ویژه دوربین مداربسته ARS
-</h2>
-<a href="#" class="ws-more">
+    color:var(--ws-primary);
-مشاهده همه محصولات
-</a>
-</div>
+    font-size:14px;
+    line-height:1.8;
+}
-<div class="ws-product-slider" data-product-slider>
+.ws-article p{
-<div class="ws-product-track">
+    color:var(--ws-muted);
+    font-size:11px;
-<!-- ROW 1 - 4 CARDS -->
+    line-height:1.9;
-<div class="ws-product-row">
+    margin:6px 0 9px;
+}
+.ws-read{
-<article class="ws-product-card">
+    color:var(--ws-secondary);
-<div class="ws-product-image">
+    font-size:11px;
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دوربین مداربسته بولت ARS">
-</div>
-<div class="ws-product-info">
+    font-weight:800;
+}
-<div class="ws-brand">ARS</div>
-<h3 class="ws-product-title">
+/* =========================================================
-دوربین مداربسته بولت با دید در شب
+   BENEFITS
-</h3>
+========================================================= */
-<div class="ws-price">
+.ws-benefits{
-<span class="ws-new-price">قیمت تماس</span>
-<span class="ws-discount">ویژه</span>
-</div>
-<div class="ws-product-actions">
+    display:grid;
-<button class="ws-cart">دریافت مشاوره</button>
-<button class="ws-favorite">
-<i class="fa-regular fa-heart"></i>
-</button>
-</div>
-</div>
+    grid-template-columns:
+        repeat(2,minmax(0,1fr));
-</article>
+    gap:9px;
+}
+.ws-benefit{
-<article class="ws-product-card">
+    min-height:105px;
-<div class="ws-product-image">
+    background:#fff;
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دوربین مداربسته دام ARS">
-</div>
-<div class="ws-product-info">
+    border:1px solid var(--ws-border);
-<div class="ws-brand">ARS</div>
+    border-radius:16px;
-<h3 class="ws-product-title">
+    padding:13px 8px;
-دوربین مداربسته دام مناسب محیط داخلی
-</h3>
-<div class="ws-price">
+    text-align:center;
-<span class="ws-new-price">قیمت تماس</span>
+}
-<span class="ws-discount">ویژه</span>
-</div>
-<div class="ws-product-actions">
+.ws-benefit-icon{
-<button class="ws-cart">دریافت مشاوره</button>
-<button class="ws-favorite">
-<i class="fa-regular fa-heart"></i>
-</button>
-</div>
-</div>
+    width:42px;
+    height:42px;
-</article>
+    margin:0 auto 7px;
+    border-radius:50%;
-<article class="ws-product-card">
+    background:var(--ws-gold-light);
-<div class="ws-product-image">
+    color:var(--ws-gold);
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دوربین مداربسته تحت شبکه IP">
-</div>
-<div class="ws-product-info">
+    display:grid;
-<div class="ws-brand">ARS</div>
+    place-items:center;
-<h3 class="ws-product-title">
+    font-size:19px;
-دوربین مداربسته تحت شبکه IP
+}
-</h3>
-<div class="ws-price">
+.ws-benefit strong{
-<span class="ws-new-price">قیمت تماس</span>
-<span class="ws-discount">ویژه</span>
-</div>
-<div class="ws-product-actions">
+    display:block;
-<button class="ws-cart">دریافت مشاوره</button>
-<button class="ws-favorite">
-<i class="fa-regular fa-heart"></i>
-</button>
-</div>
-</div>
+    font-size:12px;
-</article>
+    color:var(--ws-primary);
+}
+.ws-benefit span{
-<!-- کارت چهارم -->
+    display:block;
-<article class="ws-product-card">
+    margin-top:4px;
-<div class="ws-product-image">
+    font-size:10px;
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دوربین مداربسته دید در شب ARS">
-</div>
-<div class="ws-product-info">
+    color:var(--ws-muted);
+}
-<div class="ws-brand">ARS</div>
+@media (min-width:600px){
-<h3 class="ws-product-title">
+    .ws-benefits{
-دوربین مداربسته دید در شب حرفه‌ای
+        grid-template-columns:
-</h3>
+            repeat(4,minmax(0,1fr));
+    }
-<div class="ws-price">
+    .ws-brands{
-<span class="ws-new-price">قیمت تماس</span>
+        grid-template-columns:
-<span class="ws-discount">ویژه</span>
+            repeat(4,minmax(0,1fr));
-</div>
+    }
-<div class="ws-product-actions">
+    .ws-articles{
-<button class="ws-cart">دریافت مشاوره</button>
+        grid-template-columns:
-<button class="ws-favorite">
+            repeat(2,minmax(0,1fr));
-<i class="fa-regular fa-heart"></i>
+    }
-</button>
+}
-</div>
-</div>
+@media (min-width:900px){
-</article>
+    .ws-brands{
+        grid-template-columns:
+            repeat(6,minmax(0,1fr));
+    }
-</div>
+    .ws-articles{
+        grid-template-columns:
+            repeat(3,minmax(0,1fr));
+    }
+}
-<!-- ROW 2 - 4 CARDS -->
+/* =========================================================
+   CTA
+========================================================= */
-<div class="ws-product-row">
+.ws-cta{
+    margin-top:25px;
-<article class="ws-product-card">
+    padding:22px 15px;
-<div class="ws-product-image">
+    border-radius:20px;
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دستگاه DVR دوربین مداربسته">
-</div>
-<div class="ws-product-info">
+    background:
+        linear-gradient(
+deg,
+            var(--ws-primary-dark),
+            var(--ws-primary)
+        );
-<div class="ws-brand">ARS</div>
+    color:#fff;
-<h3 class="ws-product-title">
+    text-align:center;
-دستگاه DVR حرفه‌ای برای سیستم مداربسته
+}
-</h3>
-<div class="ws-price">
+.ws-cta h2{
-<span class="ws-new-price">قیمت تماس</span>
-<span class="ws-discount">ویژه</span>
-</div>
-<div class="ws-product-actions">
+    margin:0 0 8px;
-<button class="ws-cart">دریافت مشاوره</button>
-<button class="ws-favorite">
-<i class="fa-regular fa-heart"></i>
-</button>
-</div>
-</div>
+    font-size:20px;
+}
-</article>
+.ws-cta p{
+    margin:0 auto 15px;
-<article class="ws-product-card">
+    max-width:650px;
-<div class="ws-product-image">
+    color:#e5ebf0;
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دستگاه NVR دوربین مداربسته">
-</div>
-<div class="ws-product-info">
+    font-size:12px;
-<div class="ws-brand">ARS</div>
+    line-height:2;
+}
-<h3 class="ws-product-title">
+.ws-cta-btn{
-دستگاه NVR ضبط تصاویر دوربین تحت شبکه
-</h3>
-<div class="ws-price">
+    display:inline-flex;
-<span class="ws-new-price">قیمت تماس</span>
-<span class="ws-discount">ویژه</span>
-</div>
-<div class="ws-product-actions">
+    align-items:center;
-<button class="ws-cart">دریافت مشاوره</button>
+    justify-content:center;
-<button class="ws-favorite">
-<i class="fa-regular fa-heart"></i>
-</button>
-</div>
-</div>
+    gap:8px;
-</article>
+    background:var(--ws-gold);
+    color:#fff;
-<article class="ws-product-card">
+    padding:11px 22px;
-<div class="ws-product-image">
+    border-radius:10px;
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دزدگیر اماکن ARS">
-</div>
-<div class="ws-product-info">
+    font-size:12px;
-<div class="ws-brand">ARS</div>
+    font-weight:800;
+}
-<h3 class="ws-product-title">
-دزدگیر اماکن و سیستم اعلام سرقت
-</h3>
-<div class="ws-price">
+/* =========================================================
-<span class="ws-new-price">قیمت تماس</span>
+   FOOTER
-<span class="ws-discount">ویژه</span>
+========================================================= */
-</div>
-<div class="ws-product-actions">
+.ws-footer{
-<button class="ws-cart">دریافت مشاوره</button>
-<button class="ws-favorite">
-<i class="fa-regular fa-heart"></i>
-</button>
-</div>
-</div>
+    margin-top:25px;
-</article>
+    background:var(--ws-primary-dark);
+    color:#fff;
-<!-- کارت چهارم -->
+    border-radius:20px 20px 0 0;
-<article class="ws-product-card">
+    padding:24px 15px 15px;
+}
-<div class="ws-product-image">
+.ws-footer-grid{
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="هارد مخصوص دوربین مداربسته">
-</div>
-<div class="ws-product-info">
+    display:grid;
-<div class="ws-brand">ARS</div>
+    grid-template-columns:1fr;
-<h3 class="ws-product-title">
+    gap:20px;
-هارد مخصوص ضبط تصاویر دوربین مداربسته
+}
-</h3>
-<div class="ws-price">
+.ws-footer h3{
-<span class="ws-new-price">قیمت تماس</span>
-<span class="ws-discount">ویژه</span>
-</div>
-<div class="ws-product-actions">
+    margin:0 0 10px;
-<button class="ws-cart">دریافت مشاوره</button>
-<button class="ws-favorite">
-<i class="fa-regular fa-heart"></i>
-</button>
-</div>
-</div>
+    font-size:14px;
+}
-</article>
+.ws-footer p,
+.ws-footer li,
+.ws-footer a{
-</div>
+    color:#cbd5df;
-</div>
+    font-size:11px;
-</div>
+    line-height:2;
+}
+.ws-footer ul{
-</section>
+    margin:0;
+    padding:0;
-<!-- ======================================================
+    list-style:none;
-     BENEFITS
+}
-====================================================== -->
-<section class="ws-section">
+.ws-footer i{
-<div class="ws-section-head">
+    color:var(--ws-gold);
-<h2 class="ws-section-title">
+    width:20px;
-چرا سیستم امنیتی ARS؟
+}
-</h2>
-</div>
+.ws-footer-bottom{
-<div class="ws-benefits">
+    border-top:
+px solid rgba(255,255,255,.1);
-<div class="ws-benefit">
+    margin-top:18px;
-<div class="ws-benefit-icon">
-<i class="fa-solid fa-camera"></i>
-</div>
-<strong>تجهیزات باکیفیت</strong>
-<span>انتخاب تجهیزات مناسب برای هر پروژه</span>
-</div>
-<div class="ws-benefit">
+    padding-top:12px;
-<div class="ws-benefit-icon">
-<i class="fa-solid fa-headset"></i>
-</div>
-<strong>مشاوره تخصصی</strong>
-<span>راهنمایی برای انتخاب دوربین مناسب</span>
-</div>
-<div class="ws-benefit">
+    text-align:center;
-<div class="ws-benefit-icon">
-<i class="fa-solid fa-shield-halved"></i>
-</div>
-<strong>امنیت مطمئن</strong>
-<span>راهکارهای نظارتی متناسب با نیاز شما</span>
-</div>
-<div class="ws-benefit">
+    color:#9eabb7;
-<div class="ws-benefit-icon">
-<i class="fa-solid fa-screwdriver-wrench"></i>
-</div>
-<strong>نصب و راه‌اندازی</strong>
-<span>اجرای اصولی سیستم‌های نظارتی</span>
-</div>
-</div>
+    font-size:10px;
+}
-</section>
+@media (min-width:900px){
+    .ws-footer-grid{
+        grid-template-columns:
+fr 1fr 1fr 1fr;
+    }
+}
-<!-- ======================================================
-     SECURITY CATEGORIES
-CARDS
-====================================================== -->
-<section class="ws-section">
+/* =========================================================
+   ACCESSIBILITY
+========================================================= */
-<div class="ws-section-head">
+@media (prefers-reduced-motion:reduce){
-<h2 class="ws-section-title">
+    .ws-hero-track,
-دسته‌بندی تجهیزات امنیتی
+    .ws-product-track,
-</h2>
+    .ws-category,
+    .ws-product-card,
+    .ws-category-box,
+    .ws-article{
+        transition:none !important;
+    }
+}
+</style>
-<a href="#" class="ws-more">
-مشاهده همه دسته‌بندی‌ها
-</a>
-</div>
+<div class="wiki-store">
-<div class="ws-category-grid">
+<!-- ======================================================
+     TOP BAR
+====================================================== -->
+<header class="ws-topbar">
-<a href="#" class="ws-category-box">
+<div class="ws-topbar-inner">
-<div class="ws-category-box-icon">
+<div class="ws-top-item">
-<i class="fa-solid fa-camera"></i>
+<i class="fa-solid fa-headset"></i>
+مشاوره تخصصی سیستم‌های امنیتی
 </div>
-<div>
+<div class="ws-top-item">
-<strong>دوربین مداربسته</strong>
+<i class="fa-solid fa-clock"></i>
-<span>انواع دوربین برای فضای داخلی و خارجی</span>
+شنبه تا پنجشنبه ۹ تا ۲۰
 </div>
-</a>
+<div class="ws-top-item">
+<i class="fa-solid fa-phone"></i>
+تماس با ARS
+</div>
+<div class="ws-top-item">
-<a href="#" class="ws-category-box">
+<i class="fa-solid fa-shield-halved"></i>
+راهکارهای هوشمند حفاظتی
-<div class="ws-category-box-icon">
-<i class="fa-solid fa-video"></i>
 </div>
-<div>
-<strong>دوربین تحت شبکه</strong>
-<span>دوربین IP و تجهیزات نظارت تصویری</span>
 </div>
-</a>
+</header>
-<a href="#" class="ws-category-box">
+<!-- ======================================================
+     HEADER
+====================================================== -->
-<div class="ws-category-box-icon">
+<header class="ws-header">
-<i class="fa-solid fa-hard-drive"></i>
-</div>
-<div>
+<div class="ws-header-main">
-<strong>DVR و NVR</strong>
-<span>دستگاه‌های ضبط و مدیریت تصاویر</span>
-</div>
-</a>
+<a href="#" class="ws-logo"
+aria-label="صفحه اصلی دوربین مداربسته ARS">
+<span class="ws-logo-icon">
+<i class="fa-solid fa-camera"></i>
+</span>
-<a href="#" class="ws-category-box">
+<span>
+ARS
-<div class="ws-category-box-icon">
+<small>
-<i class="fa-solid fa-bell"></i>
+دوربین مداربسته و سیستم‌های امنیتی
-</div>
+</small>
+</span>
-<div>
-<strong>دزدگیر اماکن</strong>
-<span>سیستم اعلام سرقت و حفاظت از اماکن</span>
-</div>
 </a>
-<a href="#" class="ws-category-box">
+<form class="ws-search" role="search">
-<div class="ws-category-box-icon">
+<input
-<i class="fa-solid fa-mobile-screen-button"></i>
+type="search"
-</div>
+placeholder="جستجوی دوربین مداربسته، DVR، NVR یا تجهیزات امنیتی..."
+aria-label="جستجوی محصولات دوربین مداربسته">
-<div>
+<button type="submit" aria-label="جستجو">
-<strong>انتقال تصویر</strong>
-<span>مشاهده تصاویر دوربین از راه دور</span>
-</div>
-</a>
+<i class="fa-solid fa-magnifying-glass"></i>
+</button>
-</div>
+</form>
-</section>
+<div class="ws-actions">
-<!-- ======================================================
+<a href="#" class="ws-action">
-     BRANDS
-====================================================== -->
-<section class="ws-section">
+<i class="fa-regular fa-user"></i>
-<div class="ws-section-head">
+<span>
+حساب کاربری
+</span>
+</a>
-<h2 class="ws-section-title">
+<a href="#" class="ws-action">
-برندهای تجهیزات امنیتی
-</h2>
-</div>
+<i class="fa-regular fa-heart"></i>
-<div class="ws-brands">
+<span>
+علاقه‌مندی
+</span>
-<a href="#" class="ws-brand-card">
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="برند ARS دوربین مداربسته">
 </a>
-<a href="#" class="ws-brand-card">
+<a href="#" class="ws-action">
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+<i class="fa-solid fa-cart-shopping"></i>
-alt="برند دوربین مداربسته">
-</a>
-<a href="#" class="ws-brand-card">
+<span>
-<img
+سبد خرید
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+</span>
-alt="برند تجهیزات نظارتی">
-</a>
-<a href="#" class="ws-brand-card">
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="برند تجهیزات امنیتی">
 </a>
-<a href="#" class="ws-brand-card">
+</div>
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="برند دوربین تحت شبکه">
-</a>
-<a href="#" class="ws-brand-card">
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="برند سیستم حفاظتی">
-</a>
 </div>
-</section>
+<nav class="ws-nav"
+aria-label="منوی اصلی دوربین مداربسته ARS">
-<!-- ======================================================
+<ul class="ws-nav-list">
-     BEST SELLERS
-CARDS IN EACH ROW
-====================================================== -->
-<section class="ws-section">
+<li>
+<a href="#">
+<i class="fa-solid fa-bars"></i>
+دسته‌بندی تجهیزات امنیتی
+</a>
+</li>
-<div class="ws-section-head">
+<li>
+<a href="#">
+دوربین مداربسته
+</a>
+</li>
-<h2 class="ws-section-title">
+<li>
-پرفروش‌ترین دوربین‌ها و تجهیزات امنیتی
+<a href="#">
-</h2>
+DVR و NVR
-<a href="#" class="ws-more">
-مشاهده همه
 </a>
+</li>
-</div>
+<li>
+<a href="#">
+دزدگیر اماکن
+</a>
+</li>
+<li>
+<a href="#">
+تجهیزات انتقال تصویر
+</a>
+</li>
+<li>
+<a href="#">
+لوازم جانبی دوربین
+</a>
+</li>
-<div class="ws-product-slider" data-product-slider>
+<li>
+<a href="#" class="ws-special">
+<i class="fa-solid fa-percent"></i>
+پیشنهادهای ویژه
+</a>
+</li>
-<div class="ws-product-track">
+</ul>
+</nav>
-<!-- ROW 1 -->
+</header>
-<div class="ws-product-row">
+<!-- ======================================================
+     QUICK CATEGORIES
+====================================================== -->
-<article class="ws-product-card">
+<section class="ws-section">
-<div class="ws-product-image">
+<div class="ws-section-head">
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دوربین مداربسته پرفروش ARS">
-</div>
-<div class="ws-product-info">
+<h1 class="ws-section-title">
+خرید دوربین مداربسته و تجهیزات امنیتی ARS
+</h1>
-<h3 class="ws-product-title">
+<a href="#" class="ws-more">
-دوربین مداربسته پرفروش ARS
+مشاهده همه
-</h3>
+</a>
-<div class="ws-price">
-<span class="ws-new-price">قیمت تماس</span>
 </div>
-</div>
-</article>
+<div class="ws-category-scroll">
+<a href="#" class="ws-category">
-<article class="ws-product-card">
+<div class="ws-category-icon">
+<i class="fa-solid fa-camera"></i>
-<div class="ws-product-image">
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دوربین IP پرفروش">
 </div>
-<div class="ws-product-info">
+<strong>
+دوربین مداربسته
+</strong>
-<h3 class="ws-product-title">
+</a>
-دوربین تحت شبکه IP
-</h3>
-<div class="ws-price">
-<span class="ws-new-price">قیمت تماس</span>
-</div>
-</div>
+<a href="#" class="ws-category">
-</article>
+<div class="ws-category-icon">
+<i class="fa-solid fa-video"></i>
+</div>
+<strong>
+دوربین تحت شبکه
+</strong>
+</a>
-<article class="ws-product-card">
+<a href="#" class="ws-category">
-<div class="ws-product-image">
+<div class="ws-category-icon">
-<img
+<i class="fa-solid fa-hard-drive"></i>
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دستگاه DVR پرفروش">
 </div>
-<div class="ws-product-info">
+<strong>
+DVR و NVR
+</strong>
+</a>
-<h3 class="ws-product-title">
-دستگاه DVR ضبط تصاویر
-</h3>
-<div class="ws-price">
+<a href="#" class="ws-category">
-<span class="ws-new-price">قیمت تماس</span>
-</div>
+<div class="ws-category-icon">
+<i class="fa-solid fa-bell"></i>
 </div>
-</article>
+<strong>
+دزدگیر اماکن
+</strong>
+</a>
-<!-- کارت چهارم -->
-<article class="ws-product-card">
+<a href="#" class="ws-category">
-<div class="ws-product-image">
+<div class="ws-category-icon">
-<img
+<i class="fa-solid fa-wifi"></i>
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دوربین مداربسته دید در شب پرفروش">
 </div>
-<div class="ws-product-info">
+<strong>
+انتقال تصویر
+</strong>
+</a>
-<h3 class="ws-product-title">
+<a href="#" class="ws-category">
-دوربین مداربسته دید در شب
-</h3>
-<div class="ws-price">
+<div class="ws-category-icon">
-<span class="ws-new-price">قیمت تماس</span>
+<i class="fa-solid fa-plug"></i>
 </div>
+<strong>
+لوازم جانبی
+</strong>
+</a>
 </div>
-</article>
+</section>
-</div>
+<!-- ======================================================
+     HERO
+     فقط آدرس src تصاویر را عوض کنید
+====================================================== -->
+<section class="ws-section">
-<!-- ROW 2 -->
+<div class="ws-hero"
+data-hero-slider>
-<div class="ws-product-row">
+<div class="ws-hero-track">
-<article class="ws-product-card">
+<a href="#" class="ws-hero-slide">
-<div class="ws-product-image">
 <img
 src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دستگاه NVR پرفروش">
+alt="دوربین مداربسته ARS و سیستم‌های امنیتی"
-</div>
+loading="eager">
-<div class="ws-product-info">
+</a>
-<h3 class="ws-product-title">
-دستگاه NVR حرفه‌ای
-</h3>
-<div class="ws-price">
+<a href="#" class="ws-hero-slide">
-<span class="ws-new-price">قیمت تماس</span>
-</div>
-</div>
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="فروش و نصب دوربین مداربسته ARS"
+loading="lazy">
-</article>
+</a>
-<article class="ws-product-card">
+<a href="#" class="ws-hero-slide">
-<div class="ws-product-image">
 <img
 src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="هارد مخصوص دوربین مداربسته">
+alt="خرید دوربین مداربسته و تجهیزات حفاظتی"
-</div>
+loading="lazy">
-<div class="ws-product-info">
+</a>
-<h3 class="ws-product-title">
-هارد مخصوص سیستم مداربسته
-</h3>
-<div class="ws-price">
-<span class="ws-new-price">قیمت تماس</span>
 </div>
+<div class="ws-hero-dots"></div>
 </div>
-</article>
+</section>
-<article class="ws-product-card">
+<!-- ======================================================
+     SPECIAL PRODUCTS
+ROW
+====================================================== -->
-<div class="ws-product-image">
+<section class="ws-section">
-<img
-src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="دزدگیر اماکن پرفروش">
-</div>
-<div class="ws-product-info">
+<div class="ws-section-head">
-<h3 class="ws-product-title">
+<h2 class="ws-section-title">
-دزدگیر اماکن هوشمند
+محصولات ویژه دوربین مداربسته ARS
-</h3>
+</h2>
+<a href="#" class="ws-more">
+مشاهده همه محصولات
+</a>
-<div class="ws-price">
-<span class="ws-new-price">قیمت تماس</span>
 </div>
-</div>
-</article>
+<div class="ws-product-slider"
+data-product-slider>
+<div class="ws-product-track">
+<!-- ROW 1 -->
+<div class="ws-product-row">
-<!-- کارت چهارم -->
 <article class="ws-product-card">
 <div class="ws-product-image">
 <img
 src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="تجهیزات انتقال تصویر دوربین">
+alt="دوربین مداربسته بولت ARS"
+loading="lazy">
 </div>
 <div class="ws-product-info">
+<div class="ws-brand">
+ARS
+</div>
 <h3 class="ws-product-title">
-تجهیزات انتقال تصویر دوربین
+دوربین مداربسته بولت با دید در شب
 </h3>
 <div class="ws-price">
-<span class="ws-new-price">قیمت تماس</span>
-</div>
-</div>
+<span class="ws-new-price">
+قیمت تماس
+</span>
-</article>
+<span class="ws-discount">
+ویژه
+</span>
 </div>
-</div>
+<div class="ws-product-actions">
-</div>
+<button class="ws-cart">
+دریافت مشاوره
+</button>
-</section>
+<button
+class="ws-favorite"
+aria-label="افزودن به علاقه‌مندی">
+<i class="fa-regular fa-heart"></i>
-<!-- ======================================================
+</button>
-     ARTICLES
-====================================================== -->
-<section class="ws-section">
+</div>
-<div class="ws-section-head">
-<h2 class="ws-section-title">
-مجله تخصصی دوربین مداربسته و سیستم‌های امنیتی
-</h2>
-<a href="#" class="ws-more">
-مشاهده مقالات
-</a>
 </div>
+</article>
-<div class="ws-articles">
+<article class="ws-product-card">
-<article class="ws-article">
+<div class="ws-product-image">
-<div class="ws-article-image">
 <img
 src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="راهنمای خرید دوربین مداربسته">
+alt="دوربین مداربسته دام ARS"
+loading="lazy">
 </div>
-<div class="ws-article-content">
+<div class="ws-product-info">
+<div class="ws-brand">
+ARS
+</div>
-<h3>
+<h3 class="ws-product-title">
-راهنمای خرید دوربین مداربسته برای منزل و محل کار
+دوربین مداربسته دام مناسب محیط داخلی
 </h3>
-<p>
+<div class="ws-price">
-با مهم‌ترین نکات انتخاب دوربین مداربسته،
-کیفیت تصویر، دید در شب و نوع مناسب دوربین آشنا شوید.
+<span class="ws-new-price">
-</p>
+قیمت تماس
+</span>
+<span class="ws-discount">
+ویژه
+</span>
+</div>
+<div class="ws-product-actions">
+<button class="ws-cart">
+دریافت مشاوره
+</button>
+<button class="ws-favorite">
+<i class="fa-regular fa-heart"></i>
+</button>
-<a href="#" class="ws-read">
+</div>
-مطالعه مقاله ←
-</a>
 </div>
@@ خط ۲٬۱۳۶: / خط ۱٬۹۳۲: @@
-<article class="ws-article">
+<article class="ws-product-card">
+<div class="ws-product-image">
-<div class="ws-article-image">
 <img
 src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="تفاوت دوربین مداربسته آنالوگ و تحت شبکه">
+alt="دوربین مداربسته تحت شبکه IP"
+loading="lazy">
 </div>
-<div class="ws-article-content">
+<div class="ws-product-info">
-<h3>
+<div class="ws-brand">
-تفاوت دوربین مداربسته آنالوگ و تحت شبکه چیست؟
+ARS
+</div>
+<h3 class="ws-product-title">
+دوربین مداربسته تحت شبکه IP با کیفیت بالا
 </h3>
-<p>
+<div class="ws-price">
-مقایسه دوربین‌های آنالوگ و IP و بررسی مزایا،
-کاربردها و نکات انتخاب هر سیستم.
+<span class="ws-new-price">
-</p>
+قیمت تماس
+</span>
+<span class="ws-discount">
+ویژه
+</span>
+</div>
+<div class="ws-product-actions">
+<button class="ws-cart">
+دریافت مشاوره
+</button>
+<button class="ws-favorite">
+<i class="fa-regular fa-heart"></i>
+</button>
-<a href="#" class="ws-read">
+</div>
-مطالعه مقاله ←
-</a>
 </div>
@@ خط ۲٬۱۶۴: / خط ۱٬۹۸۲: @@
-<article class="ws-article">
+<article class="ws-product-card">
+<div class="ws-product-image">
-<div class="ws-article-image">
 <img
 src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
-alt="بهترین مکان نصب دوربین مداربسته">
+alt="دوربین مداربسته دید در شب ARS"
+loading="lazy">
 </div>
-<div class="ws-article-content">
+<div class="ws-product-info">
-<h3>
+<div class="ws-brand">
-بهترین مکان برای نصب دوربین مداربسته کجاست؟
+ARS
+</div>
+<h3 class="ws-product-title">
+دوربین مداربسته دید در شب حرفه‌ای
 </h3>
-<p>
+<div class="ws-price">
-نکات مهم انتخاب محل نصب دوربین برای افزایش
-امنیت منزل، فروشگاه، دفتر و محیط‌های صنعتی.
+<span class="ws-new-price">
-</p>
+قیمت تماس
+</span>
-<a href="#" class="ws-read">
+<span class="ws-discount">
-مطالعه مقاله ←
+ویژه
-</a>
+</span>
 </div>
-</article>
+<div class="ws-product-actions">
+<button class="ws-cart">
+دریافت مشاوره
+</button>
+<button class="ws-favorite">
+<i class="fa-regular fa-heart"></i>
+</button>
 </div>
-</section>
+</div>
+</article>
-<!-- ======================================================
+</div>
-     CTA
-====================================================== -->
-<section class="ws-cta">
-<h2>
+<!-- ROW 2 -->
-برای انتخاب دوربین مداربسته مناسب نیاز به مشاوره دارید؟
-</h2>
-<p>
+<div class="ws-product-row">
-کارشناسان ARS آماده‌اند با بررسی محیط، میزان امنیت موردنیاز
-و بودجه شما، مناسب‌ترین دوربین مداربسته و تجهیزات حفاظتی
-را پیشنهاد دهند.
-</p>
-<a href="#" class="ws-cta-btn">
-<i class="fa-solid fa-phone"></i>
+<article class="ws-product-card">
-دریافت مشاوره تخصصی
+<div class="ws-product-image">
-</a>
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="دستگاه DVR دوربین مداربسته"
+loading="lazy">
-</section>
+</div>
+<div class="ws-product-info">
-<!-- ======================================================
+<div class="ws-brand">
-     FOOTER
+ARS
-====================================================== -->
+</div>
-<footer class="ws-footer">
+<h3 class="ws-product-title">
+دستگاه DVR حرفه‌ای برای سیستم مداربسته
+</h3>
-<div class="ws-footer-grid">
+<div class="ws-price">
+<span class="ws-new-price">
+قیمت تماس
+</span>
-<div>
+<span class="ws-discount">
+ویژه
+</span>
-<h3>درباره ARS</h3>
+</div>
-<p>
+<div class="ws-product-actions">
-ARS در زمینه دوربین مداربسته،
-سیستم‌های نظارت تصویری، دزدگیر اماکن
-و تجهیزات امنیتی فعالیت می‌کند و
-راهکارهای حفاظتی متناسب با نیاز مشتریان ارائه می‌دهد.
-</p>
-<p>
+<button class="ws-cart">
-<i class="fa-solid fa-location-dot"></i>
+دریافت مشاوره
-آدرس مجموعه ARS
+</button>
-</p>
-<p>
+<button class="ws-favorite">
-<i class="fa-solid fa-phone"></i>
+<i class="fa-regular fa-heart"></i>
-شماره تماس ARS
+</button>
-</p>
 </div>
+</div>
-<div>
+</article>
-<h3>دسترسی سریع</h3>
-<ul>
+<article class="ws-product-card">
-<li><a href="#">صفحه اصلی</a></li>
+<div class="ws-product-image">
-<li><a href="#">دوربین مداربسته</a></li>
-<li><a href="#">تجهیزات امنیتی</a></li>
-<li><a href="#">محصولات ویژه</a></li>
-</ul>
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="دستگاه NVR دوربین مداربسته"
+loading="lazy">
 </div>
+<div class="ws-product-info">
-<div>
+<div class="ws-brand">
+ARS
+</div>
-<h3>خدمات ARS</h3>
+<h3 class="ws-product-title">
+دستگاه NVR ضبط تصاویر دوربین تحت شبکه
+</h3>
-<ul>
+<div class="ws-price">
-<li><a href="#">مشاوره خرید دوربین</a></li>
+<span class="ws-new-price">
-<li><a href="#">نصب دوربین مداربسته</a></li>
+قیمت تماس
-<li><a href="#">راه‌اندازی سیستم امنیتی</a></li>
+</span>
-<li><a href="#">پشتیبانی و خدمات</a></li>
-</ul>
+<span class="ws-discount">
+ویژه
+</span>
 </div>
+<div class="ws-product-actions">
-<div>
+<button class="ws-cart">
+دریافت مشاوره
+</button>
+<button class="ws-favorite">
+<i class="fa-regular fa-heart"></i>
+</button>
+</div>
-<h3>ارتباط با ما</h3>
+</div>
-<ul>
+</article>
-<li>
-<a href="#">
-<i class="fa-brands fa-instagram"></i>
-اینستاگرام ARS
-</a>
-</li>
-<li>
+<article class="ws-product-card">
-<a href="#">
-<i class="fa-brands fa-telegram"></i>
-تلگرام ARS
-</a>
-</li>
-<li>
+<div class="ws-product-image">
-<a href="#">
-<i class="fa-brands fa-whatsapp"></i>
-واتساپ ARS
-</a>
-</li>
-</ul>
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="دزدگیر اماکن ARS"
+loading="lazy">
 </div>
+<div class="ws-product-info">
+<div class="ws-brand">
+ARS
 </div>
+<h3 class="ws-product-title">
+دزدگیر اماکن و سیستم اعلام سرقت
+</h3>
+<div class="ws-price">
-<div class="ws-footer-bottom">
+<span class="ws-new-price">
-© ۱۴۰۵ تمامی حقوق وب‌سایت دوربین مداربسته ARS محفوظ است.
+قیمت تماس
-</div>
+</span>
-</footer>
+<span class="ws-discount">
+ویژه
+</span>
 </div>
+<div class="ws-product-actions">
-<script>
+<button class="ws-cart">
+دریافت مشاوره
+</button>
-document.addEventListener("DOMContentLoaded",function(){
+<button class="ws-favorite">
+<i class="fa-regular fa-heart"></i>
+</button>
+</div>
-/* =========================================================
+</div>
-   HERO SLIDER
-   هر 3 ثانیه
-========================================================= */
-const hero=document.querySelector("[data-hero-slider]");
+</article>
-if(hero){
-const track=hero.querySelector(".ws-hero-track");
+<article class="ws-product-card">
-const slides=hero.querySelectorAll(".ws-hero-slide");
-const dotsBox=hero.querySelector(".ws-hero-dots");
-let current=0;
+<div class="ws-product-image">
-let timer;
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="هارد مخصوص دوربین مداربسته"
+loading="lazy">
-slides.forEach(function(slide,index){
+</div>
-const dot=document.createElement("button");
+<div class="ws-product-info">
-dot.type="button";
+<div class="ws-brand">
-dot.className="ws-hero-dot";
+ARS
+</div>
-if(index===0){
+<h3 class="ws-product-title">
-dot.classList.add("active");
+هارد مخصوص ضبط تصاویر دوربین مداربسته
-}
+</h3>
-dot.setAttribute(
+<div class="ws-price">
-"aria-label",
-"نمایش اسلاید "+(index+1)
-);
-dot.addEventListener("click",function(){
+<span class="ws-new-price">
+قیمت تماس
+</span>
-goToSlide(index);
+<span class="ws-discount">
-restart();
+ویژه
+</span>
-});
+</div>
-dotsBox.appendChild(dot);
+<div class="ws-product-actions">
-});
+<button class="ws-cart">
+دریافت مشاوره
+</button>
+<button class="ws-favorite">
+<i class="fa-regular fa-heart"></i>
+</button>
-const dots=dotsBox.querySelectorAll(".ws-hero-dot");
+</div>
+</div>
-function goToSlide(index){
+</article>
-current=index;
+</div>
-track.style.transform=
+</div>
-"translateX(-"+(current*100)+"%)";
-dots.forEach(function(dot,i){
+</div>
-dot.classList.toggle(
+</section>
-"active",
-i===current
-);
-});
-}
+<!-- ======================================================
+     BENEFITS
+====================================================== -->
+<section class="ws-section">
+<div class="ws-section-head">
+<h2 class="ws-section-title">
+چرا سیستم امنیتی ARS؟
+</h2>
+</div>
+<div class="ws-benefits">
+<div class="ws-benefit">
+<div class="ws-benefit-icon">
+<i class="fa-solid fa-camera"></i>
+</div>
+<strong>
+تجهیزات باکیفیت
+</strong>
+<span>
+انتخاب تجهیزات مناسب برای هر پروژه
+</span>
+</div>
+<div class="ws-benefit">
+<div class="ws-benefit-icon">
+<i class="fa-solid fa-headset"></i>
+</div>
+<strong>
+مشاوره تخصصی
+</strong>
+<span>
+راهنمایی برای انتخاب دوربین مناسب
+</span>
+</div>
+<div class="ws-benefit">
+<div class="ws-benefit-icon">
+<i class="fa-solid fa-shield-halved"></i>
+</div>
+<strong>
+امنیت مطمئن
+</strong>
+<span>
+راهکارهای نظارتی متناسب با نیاز شما
+</span>
+</div>
+<div class="ws-benefit">
+<div class="ws-benefit-icon">
+<i class="fa-solid fa-screwdriver-wrench"></i>
+</div>
+<strong>
+نصب و راه‌اندازی
+</strong>
+<span>
+اجرای اصولی سیستم‌های نظارتی
+</span>
+</div>
+</div>
+</section>
+<!-- ======================================================
+     SECURITY CATEGORIES
+====================================================== -->
+<section class="ws-section">
+<div class="ws-section-head">
+<h2 class="ws-section-title">
+دسته‌بندی تجهیزات امنیتی
+</h2>
+<a href="#" class="ws-more">
+مشاهده همه دسته‌بندی‌ها
+</a>
+</div>
+<div class="ws-category-grid">
+<a href="#" class="ws-category-box">
+<div class="ws-category-box-icon">
+<i class="fa-solid fa-camera"></i>
+</div>
+<div>
+<strong>
+دوربین مداربسته
+</strong>
+<span>
+انواع دوربین برای فضای داخلی و خارجی
+</span>
+</div>
+</a>
+<a href="#" class="ws-category-box">
+<div class="ws-category-box-icon">
+<i class="fa-solid fa-video"></i>
+</div>
+<div>
+<strong>
+دوربین تحت شبکه
+</strong>
+<span>
+دوربین IP و تجهیزات نظارت تصویری
+</span>
+</div>
+</a>
+<a href="#" class="ws-category-box">
+<div class="ws-category-box-icon">
+<i class="fa-solid fa-hard-drive"></i>
+</div>
+<div>
+<strong>
+DVR و NVR
+</strong>
+<span>
+دستگاه‌های ضبط و مدیریت تصاویر
+</span>
+</div>
+</a>
+<a href="#" class="ws-category-box">
+<div class="ws-category-box-icon">
+<i class="fa-solid fa-bell"></i>
+</div>
+<div>
+<strong>
+دزدگیر اماکن
+</strong>
+<span>
+سیستم اعلام سرقت و حفاظت از اماکن
+</span>
+</div>
+</a>
+<a href="#" class="ws-category-box">
+<div class="ws-category-box-icon">
+<i class="fa-solid fa-mobile-screen-button"></i>
+</div>
+<div>
+<strong>
+انتقال تصویر
+</strong>
+<span>
+مشاهده تصاویر دوربین از راه دور
+</span>
+</div>
+</a>
+</div>
+</section>
+<!-- ======================================================
+     BRANDS
+====================================================== -->
+<section class="ws-section">
+<div class="ws-section-head">
+<h2 class="ws-section-title">
+برندهای تجهیزات امنیتی
+</h2>
+</div>
+<div class="ws-brands">
+<a href="#" class="ws-brand-card">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="برند ARS دوربین مداربسته"
+loading="lazy">
+</a>
+<a href="#" class="ws-brand-card">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="برند دوربین مداربسته"
+loading="lazy">
+</a>
+<a href="#" class="ws-brand-card">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="برند تجهیزات نظارتی"
+loading="lazy">
+</a>
+<a href="#" class="ws-brand-card">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="برند تجهیزات امنیتی"
+loading="lazy">
+</a>
+<a href="#" class="ws-brand-card">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="برند دوربین تحت شبکه"
+loading="lazy">
+</a>
+<a href="#" class="ws-brand-card">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="برند سیستم حفاظتی"
+loading="lazy">
+</a>
+</div>
+</section>
+<!-- ======================================================
+     BEST SELLERS
+====================================================== -->
+<section class="ws-section">
+<div class="ws-section-head">
+<h2 class="ws-section-title">
+پرفروش‌ترین دوربین‌ها و تجهیزات امنیتی
+</h2>
+<a href="#" class="ws-more">
+مشاهده همه
+</a>
+</div>
+<div class="ws-product-slider"
+data-product-slider>
+<div class="ws-product-track">
+<!-- ROW 1 -->
+<div class="ws-product-row">
+<article class="ws-product-card">
+<div class="ws-product-image">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="دوربین مداربسته پرفروش ARS"
+loading="lazy">
+</div>
+<div class="ws-product-info">
+<h3 class="ws-product-title">
+دوربین مداربسته پرفروش ARS
+</h3>
+<div class="ws-price">
+<span class="ws-new-price">
+قیمت تماس
+</span>
+</div>
+</div>
+</article>
+<article class="ws-product-card">
+<div class="ws-product-image">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="دوربین IP پرفروش"
+loading="lazy">
+</div>
+<div class="ws-product-info">
+<h3 class="ws-product-title">
+دوربین تحت شبکه IP
+</h3>
+<div class="ws-price">
+<span class="ws-new-price">
+قیمت تماس
+</span>
+</div>
+</div>
+</article>
+<article class="ws-product-card">
+<div class="ws-product-image">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="دستگاه DVR پرفروش"
+loading="lazy">
+</div>
+<div class="ws-product-info">
+<h3 class="ws-product-title">
+دستگاه DVR ضبط تصاویر
+</h3>
+<div class="ws-price">
+<span class="ws-new-price">
+قیمت تماس
+</span>
+</div>
+</div>
+</article>
+<article class="ws-product-card">
+<div class="ws-product-image">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="دوربین مداربسته دید در شب"
+loading="lazy">
+</div>
+<div class="ws-product-info">
+<h3 class="ws-product-title">
+دوربین مداربسته دید در شب
+</h3>
+<div class="ws-price">
+<span class="ws-new-price">
+قیمت تماس
+</span>
+</div>
+</div>
+</article>
+</div>
+<!-- ROW 2 -->
+<div class="ws-product-row">
+<article class="ws-product-card">
+<div class="ws-product-image">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="دستگاه NVR پرفروش"
+loading="lazy">
+</div>
+<div class="ws-product-info">
+<h3 class="ws-product-title">
+دستگاه NVR حرفه‌ای
+</h3>
+<div class="ws-price">
+<span class="ws-new-price">
+قیمت تماس
+</span>
+</div>
+</div>
+</article>
+<article class="ws-product-card">
+<div class="ws-product-image">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="هارد مخصوص دوربین مداربسته"
+loading="lazy">
+</div>
+<div class="ws-product-info">
+<h3 class="ws-product-title">
+هارد مخصوص سیستم مداربسته
+</h3>
+<div class="ws-price">
+<span class="ws-new-price">
+قیمت تماس
+</span>
+</div>
+</div>
+</article>
+<article class="ws-product-card">
+<div class="ws-product-image">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="دزدگیر اماکن پرفروش"
+loading="lazy">
+</div>
+<div class="ws-product-info">
+<h3 class="ws-product-title">
+دزدگیر اماکن هوشمند
+</h3>
+<div class="ws-price">
+<span class="ws-new-price">
+قیمت تماس
+</span>
+</div>
+</div>
+</article>
+<article class="ws-product-card">
+<div class="ws-product-image">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="تجهیزات انتقال تصویر"
+loading="lazy">
+</div>
+<div class="ws-product-info">
+<h3 class="ws-product-title">
+تجهیزات انتقال تصویر دوربین
+</h3>
+<div class="ws-price">
+<span class="ws-new-price">
+قیمت تماس
+</span>
+</div>
+</div>
+</article>
+</div>
+</div>
+</div>
+</section>
+<!-- ======================================================
+     ARTICLES
+====================================================== -->
+<section class="ws-section">
+<div class="ws-section-head">
+<h2 class="ws-section-title">
+مجله تخصصی دوربین مداربسته و سیستم‌های امنیتی
+</h2>
+<a href="#" class="ws-more">
+مشاهده مقالات
+</a>
+</div>
+<div class="ws-articles">
+<article class="ws-article">
+<div class="ws-article-image">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="راهنمای خرید دوربین مداربسته"
+loading="lazy">
+</div>
+<div class="ws-article-content">
+<h3>
+راهنمای خرید دوربین مداربسته برای منزل و محل کار
+</h3>
+<p>
+با مهم‌ترین نکات انتخاب دوربین مداربسته،
+کیفیت تصویر، دید در شب و نوع مناسب دوربین آشنا شوید.
+</p>
+<a href="#" class="ws-read">
+مطالعه مقاله ←
+</a>
+</div>
+</article>
+<article class="ws-article">
+<div class="ws-article-image">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="تفاوت دوربین مداربسته آنالوگ و تحت شبکه"
+loading="lazy">
+</div>
+<div class="ws-article-content">
+<h3>
+تفاوت دوربین مداربسته آنالوگ و تحت شبکه چیست؟
+</h3>
+<p>
+مقایسه دوربین‌های آنالوگ و IP و بررسی مزایا،
+کاربردها و نکات انتخاب هر سیستم.
+</p>
+<a href="#" class="ws-read">
+مطالعه مقاله ←
+</a>
+</div>
+</article>
+<article class="ws-article">
+<div class="ws-article-image">
+<img
+src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
+alt="بهترین مکان نصب دوربین مداربسته"
+loading="lazy">
+</div>
+<div class="ws-article-content">
+<h3>
+بهترین مکان برای نصب دوربین مداربسته کجاست؟
+</h3>
+<p>
+نکات مهم انتخاب محل نصب دوربین برای افزایش
+امنیت منزل، فروشگاه، دفتر و محیط‌های صنعتی.
+</p>
+<a href="#" class="ws-read">
+مطالعه مقاله ←
+</a>
+</div>
+</article>
+</div>
+</section>
+<!-- ======================================================
+     CTA
+====================================================== -->
+<section class="ws-cta">
+<h2>
+برای انتخاب دوربین مداربسته مناسب نیاز به مشاوره دارید؟
+</h2>
+<p>
+کارشناسان ARS آماده‌اند با بررسی محیط، میزان امنیت موردنیاز
+و بودجه شما، مناسب‌ترین دوربین مداربسته و تجهیزات حفاظتی
+را پیشنهاد دهند.
+</p>
+<a href="#" class="ws-cta-btn">
+<i class="fa-solid fa-phone"></i>
+دریافت مشاوره تخصصی
+</a>
+</section>
+<!-- ======================================================
+     FOOTER
+====================================================== -->
+<footer class="ws-footer">
+<div class="ws-footer-grid">
+<div>
+<h3>
+درباره ARS
+</h3>
+<p>
+ARS در زمینه دوربین مداربسته،
+سیستم‌های نظارت تصویری، دزدگیر اماکن
+و تجهیزات امنیتی فعالیت می‌کند و
+راهکارهای حفاظتی متناسب با نیاز مشتریان ارائه می‌دهد.
+</p>
+<p>
+<i class="fa-solid fa-location-dot"></i>
+آدرس مجموعه ARS
+</p>
+<p>
+<i class="fa-solid fa-phone"></i>
+شماره تماس ARS
+</p>
+</div>
+<div>
+<h3>
+دسترسی سریع
+</h3>
+<ul>
+<li>
+<a href="#">
+صفحه اصلی
+</a>
+</li>
+<li>
+<a href="#">
+دوربین مداربسته
+</a>
+</li>
+<li>
+<a href="#">
+تجهیزات امنیتی
+</a>
+</li>
+<li>
+<a href="#">
+محصولات ویژه
+</a>
+</li>
+</ul>
+</div>
+<div>
+<h3>
+خدمات ARS
+</h3>
+<ul>
+<li>
+<a href="#">
+مشاوره خرید دوربین
+</a>
+</li>
+<li>
+<a href="#">
+نصب دوربین مداربسته
+</a>
+</li>
+<li>
+<a href="#">
+راه‌اندازی سیستم امنیتی
+</a>
+</li>
+<li>
+<a href="#">
+پشتیبانی و خدمات
+</a>
+</li>
+</ul>
+</div>
+<div>
+<h3>
+ارتباط با ما
+</h3>
+<ul>
+<li>
+<a href="#">
+<i class="fa-brands fa-instagram"></i>
+اینستاگرام ARS
+</a>
+</li>
+<li>
+<a href="#">
+<i class="fa-brands fa-telegram"></i>
+تلگرام ARS
+</a>
+</li>
+<li>
+<a href="#">
+<i class="fa-brands fa-whatsapp"></i>
+واتساپ ARS
+</a>
+</li>
+</ul>
+</div>
+</div>
+<div class="ws-footer-bottom">
+© ۱۴۰۵ تمامی حقوق وب‌سایت دوربین مداربسته ARS محفوظ است.
+</div>
+</footer>
+</div>
+<script>
+document.addEventListener(
+"DOMContentLoaded",
+function(){
+/* =========================================================
+   HERO SLIDER
+   چرخش هر 3 ثانیه
+========================================================= */
+const hero =
+document.querySelector(
+"[data-hero-slider]"
+);
+if(hero){
+    const track =
+    hero.querySelector(
+        ".ws-hero-track"
+    );
+    const slides =
+    hero.querySelectorAll(
+        ".ws-hero-slide"
+    );
+    const dotsBox =
+    hero.querySelector(
+        ".ws-hero-dots"
+    );
+    let current=0;
+    let timer=null;
+    /* -----------------------------------------
+       تنظیم ارتفاع واقعی هر اسلاید
+       بدون Crop
+    ----------------------------------------- */
+    function setHeroHeight(){
+        const activeSlide =
+        slides[current];
+        if(!activeSlide) return;
+        const image =
+        activeSlide.querySelector("img");
+        if(!image) return;
+        function applyHeight(){
+            const containerWidth =
+            hero.clientWidth;
+            const naturalWidth =
+            image.naturalWidth;
+            const naturalHeight =
+            image.naturalHeight;
+            if(
+                naturalWidth &&
+                naturalHeight &&
+                containerWidth
+            ){
+                const ratio =
+                naturalHeight /
+                naturalWidth;
+                let height =
+                containerWidth *
+                ratio;
+                /*
+                   محدودیت منطقی برای تصاویر خیلی بلند
+                   فقط در موبایل
+                */
+                if(
+                    window.innerWidth < 600 &&
+                    height > window.innerHeight * .65
+                ){
+                    height =
+                    window.innerHeight * .65;
+                }
+                activeSlide.style.height =
+                height + "px";
+            }
+        }
+        if(image.complete){
+            applyHeight();
+        }else{
+            image.addEventListener(
+                "load",
+                applyHeight,
+                {once:true}
+            );
+        }
+    }
+    /* -----------------------------------------
+       ساخت Dot
+    ----------------------------------------- */
+    slides.forEach(
+        function(slide,index){
+            const dot =
+            document.createElement(
+                "button"
+            );
+            dot.type="button";
+            dot.className=
+                "ws-hero-dot";
+            if(index===0){
+                dot.classList.add(
+                    "active"
+                );
+            }
+            dot.setAttribute(
+                "aria-label",
+                "نمایش اسلاید "+
+                (index+1)
+            );
+            dot.addEventListener(
+                "click",
+                function(){
+                    goToSlide(index);
+                    restart();
+                }
+            );
+            dotsBox.appendChild(dot);
+        }
+    );
+    const dots =
+    dotsBox.querySelectorAll(
+        ".ws-hero-dot"
+    );
+    /* -----------------------------------------
+       تغییر اسلاید
+    ----------------------------------------- */
+    function goToSlide(index){
+        current=index;
+        track.style.transform =
+            "translateX(-"+
+            (current*100)+
+            "%)";
+        dots.forEach(
+            function(dot,i){
+                dot.classList.toggle(
+                    "active",
+                    i===current
+                );
+            }
+        );
+        /*
+           بعد از تغییر اسلاید
+           ارتفاع واقعی عکس جدید
+           محاسبه می‌شود.
+        */
+        setHeroHeight();
+    }
+    function next(){
+        current =
+        (current+1) %
+        slides.length;
+        goToSlide(current);
+    }
+    function start(){
+        timer =
+        setInterval(
+            next,
+        );
+    }
+    function stop(){
+        if(timer){
+            clearInterval(timer);
+            timer=null;
+        }
+    }
+    function restart(){
+        stop();
+        start();
+    }
+    hero.addEventListener(
+        "mouseenter",
+        stop
+    );
+    hero.addEventListener(
+        "mouseleave",
+        start
+    );
+    /*
+       وقتی اندازه صفحه تغییر کرد،
+       ارتفاع بنر دوباره محاسبه می‌شود.
+    */
+    window.addEventListener(
+        "resize",
+        setHeroHeight
+    );
+    /*
+       اولین بار
+    */
+    setHeroHeight();
+    start();
+}
+/* =========================================================
+   PRODUCT SLIDERS
+   بدون کارت نصفه
+========================================================= */
+document.querySelectorAll(
+    "[data-product-slider]"
+).forEach(
+    function(slider){
+        const track =
+        slider.querySelector(
+            ".ws-product-track"
+        );
+        if(!track) return;
+        let position=0;
+        let autoTimer=null;
+        /* -----------------------------------------
+           حداکثر میزان حرکت
+        ----------------------------------------- */
+        function getMaxScroll(){
-function next(){
+            return Math.max(
+,
+                track.scrollWidth -
+                slider.clientWidth
+            );
-current=(current+1)%slides.length;
+        }
-goToSlide(current);
-}
+        /* -----------------------------------------
+           اندازه حرکت
+        ----------------------------------------- */
+        function getStep(){
-/* دقیقا 3 ثانیه */
+            const card =
+            track.querySelector(
+                ".ws-product-card"
+            );
-function start(){
+            if(!card) return 0;
-timer=setInterval(next,3000);
-}
+            const style =
+            window.getComputedStyle(
+                card.parentElement
+            );
+            const gap =
+            parseFloat(
+                style.columnGap ||
+                style.gap ||
+            );
-function restart(){
-clearInterval(timer);
+            return (
+                card.getBoundingClientRect().width
+                + gap
+            );
-start();
+        }
-}
+        /* -----------------------------------------
+           حرکت
+        ----------------------------------------- */
-hero.addEventListener("mouseenter",function(){
+        function moveNext(){
-clearInterval(timer);
+            const maxScroll =
+            getMaxScroll();
-});
+            if(maxScroll<=0){
-hero.addEventListener("mouseleave",function(){
+                position=0;
-restart();
+                track.style.transform=
+                    "translateX(0)";
-});
+                return;
+            }
-start();
-}
+            const step =
+            getStep();
-/* =========================================================
+            position += step;
-   TWO ROW PRODUCT SLIDERS
-========================================================= */
-document.querySelectorAll(
-"[data-product-slider]"
-).forEach(function(slider){
-const track=
+            /*
-slider.querySelector(".ws-product-track");
+               اگر به انتها رسید:
+               دوباره از ابتدا
+            */
-if(!track) return;
+            if(position>=maxScroll){
-let position=0;
+                position=0;
-let autoTimer;
+            }
-function getStep(){
-const card=
+            track.style.transform =
-track.querySelector(".ws-product-card");
+                "translateX(-"+
+                position+
+                "px)";
-if(!card) return 250;
+        }
-return card.getBoundingClientRect().width+10;
-}
+        /* -----------------------------------------
+           شروع
+        ----------------------------------------- */
+        function start(){
-function move(direction){
+            stop();
-const step=getStep();
-position+=direction*step;
+            autoTimer =
+            setInterval(
+                moveNext,
+            );
-if(position>0){
+        }
-position=0;
-}
-const maxScroll=Math.max(
+        /* -----------------------------------------
-,
+           توقف
-track.scrollWidth-slider.clientWidth
+        ----------------------------------------- */
-);
+        function stop(){
-if(Math.abs(position)>maxScroll){
+            if(autoTimer){
-position=-maxScroll;
+                clearInterval(
+                    autoTimer
+                );
-}
+                autoTimer=null;
+            }
-track.style.transform=
+        }
-"translateX("+position+"px)";
-}
+        slider.addEventListener(
+            "mouseenter",
+            stop
+        );
-/*
-   حرکت خودکار اسلایدر محصولات
-*/
-function start(){
+        slider.addEventListener(
+            "mouseleave",
+            start
+        );
-autoTimer=setInterval(function(){
-move(-1);
+        /*
+           با تغییر اندازه صفحه،
+           موقعیت نامعتبر حذف می‌شود.
+        */
-const maxScroll=Math.max(
+        window.addEventListener(
-,
+            "resize",
-track.scrollWidth-slider.clientWidth
+            function(){
-);
+                const maxScroll =
+                getMaxScroll();
-if(maxScroll<=0){
-position=0;
+                if(position>maxScroll){
-track.style.transform=
+                    position=0;
-"translateX(0)";
-return;
+                }
-}
+                track.style.transform =
+                    "translateX(-"+
+                    position+
+                    "px)";
-if(Math.abs(position)>=maxScroll){
+            }
+        );
-position=0;
-track.style.transform=
+        start();
-"translateX(0)";
-}
+    }
+);
-},3500);
-}
-function restart(){
-clearInterval(autoTimer);
-start();
-}
-slider.addEventListener(
-"mouseenter",
-function(){
-clearInterval(autoTimer);
-});
-slider.addEventListener(
-"mouseleave",
-function(){
-restart();
-});
-start();
-});
 });

تست۶: تفاوت میان نسخه‌ها