09123667263 - فراغیب

<html lang="fa" dir="rtl">

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">

<style>

/* =========================================================
   ROOT
========================================================= */

.wiki-store{
    --ws-primary:#0b3157;
    --ws-primary-dark:#071f38;
    --ws-secondary:#238b68;
    --ws-secondary-dark:#176b50;
    --ws-gold:#c99a2e;
    --ws-gold-light:#f7edcf;
    --ws-bg:#f5f7fa;
    --ws-card:#fff;
    --ws-text:#17202a;
    --ws-muted:#697586;
    --ws-border:#e7ebef;
    --ws-radius:18px;
    --ws-shadow:0 8px 28px rgba(0,0,0,.07);

    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0 10px 30px;

    direction:rtl;
    text-align:right;
    box-sizing:border-box;

    font-family:
        IRANSans,
        Vazirmatn,
        Tahoma,
        Arial,
        sans-serif;
}

.wiki-store *,
.wiki-store *::before,
.wiki-store *::after{
    box-sizing:border-box;
}

.wiki-store a{
    color:inherit;
    text-decoration:none;
}

.wiki-store img{
    max-width:100%;
}


/* =========================================================
   TOP BAR
========================================================= */

.ws-topbar{
    background:var(--ws-primary-dark);
    color:#fff;
    border-radius:0 0 14px 14px;
    padding:8px 12px;
    margin-bottom:10px;
}

.ws-topbar-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:12px 18px;
    font-size:12px;
}

.ws-top-item{
    display:flex;
    align-items:center;
    gap:6px;
}

.ws-top-item i{
    color:var(--ws-gold);
}


/* =========================================================
   HEADER
========================================================= */

.ws-header{
    background:#fff;
    border:1px solid var(--ws-border);
    border-radius:var(--ws-radius);
    padding:12px;
    box-shadow:var(--ws-shadow);
    margin-bottom:12px;
}

.ws-header-main{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    align-items:center;
}

.ws-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:var(--ws-primary);
    font-weight:900;
    font-size:23px;
    white-space:nowrap;
}

.ws-logo-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--ws-primary);
    color:#fff;
}

.ws-logo small{
    display:block;
    font-size:10px;
    color:var(--ws-secondary);
    margin-top:2px;
}


/* =========================================================
   SEARCH
========================================================= */

.ws-search{
    width:100%;
    position:relative;
}

.ws-search input{
    width:100%;
    min-height:48px;
    border:2px solid #edf0f3;
    background:#f8fafc;
    border-radius:14px;
    outline:none;
    padding:0 48px 0 16px;
    font-family:inherit;
    font-size:14px;
    color:var(--ws-text);
}

.ws-search input:focus{
    border-color:var(--ws-secondary);
    background:#fff;
}

.ws-search button{
    position:absolute;
    right:6px;
    top:6px;
    width:36px;
    height:36px;
    border:0;
    border-radius:10px;
    background:var(--ws-secondary);
    color:#fff;
}


/* =========================================================
   ACTIONS
========================================================= */

.ws-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
}

.ws-action{
    min-height:48px;
    border:1px solid var(--ws-border);
    border-radius:12px;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;

    gap:3px;
    color:var(--ws-primary);
    font-size:11px;
}

.ws-action i{
    font-size:17px;
    color:var(--ws-secondary);
}


/* =========================================================
   NAV
========================================================= */

.ws-nav{
    background:var(--ws-primary);
    border-radius:14px;
    overflow-x:auto;
    scrollbar-width:none;
    margin-top:12px;
}

.ws-nav::-webkit-scrollbar{
    display:none;
}

.ws-nav-list{
    list-style:none;
    margin:0;
    padding:0;
    min-width:max-content;

    display:flex;
    align-items:center;
}

.ws-nav-list a{
    display:flex;
    align-items:center;
    gap:7px;
    padding:13px 15px;

    color:#fff;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.ws-nav-list a:hover{
    background:rgba(255,255,255,.1);
}

.ws-nav-list .ws-special{
    color:#ffe6a1;
}


/* =========================================================
   SECTION
========================================================= */

.ws-section{
    margin-top:22px;
}

.ws-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.ws-section-title{
    margin:0;
    color:var(--ws-primary);
    font-size:19px;
    font-weight:900;
}

.ws-section-title::before{
    content:"";
    display:inline-block;

    width:5px;
    height:21px;

    border-radius:5px;
    background:var(--ws-gold);

    margin-left:8px;
    vertical-align:-4px;
}

.ws-more{
    color:var(--ws-secondary);
    font-size:12px;
    font-weight:700;
}


/* =========================================================
   QUICK CATEGORIES
========================================================= */

.ws-category-scroll{
    display:flex;
    gap:10px;

    overflow-x:auto;

    padding:3px 2px 8px;

    scrollbar-width:none;
}

.ws-category-scroll::-webkit-scrollbar{
    display: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);
}

.ws-category:hover{
    transform:translateY(-3px);
    border-color:var(--ws-secondary);
}

.ws-category-icon{
    width:55px;
    height:55px;

    margin:0 auto 8px;

    border-radius:50%;

    background:#eef7f3;

    display:grid;
    place-items:center;

    color:var(--ws-secondary);
    font-size:23px;
}

.ws-category strong{
    display:block;
    color:var(--ws-text);
    font-size:13px;
}


/* =========================================================
   HERO SLIDER
   تصاویر بدون Crop
========================================================= */

.ws-hero{
    position:relative;
    width:100%;
    max-width:100%;

    overflow:hidden;

    border-radius:20px;

    background:#edf0f3;

    box-shadow:var(--ws-shadow);

    /*
       جلوگیری از تغییر عرض یا بیرون‌زدگی
    */
    contain:layout paint;
}

.ws-hero-track{
    display:flex;

    direction:ltr;

    width:100%;

    transition:
        transform .65s ease;
}

.ws-hero-slide{

    flex:0 0 100%;

    width:100%;
    min-width:100%;

    /*
       ارتفاع توسط 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:auto;

    /*
       هیچ Crop اتفاق نمی‌افتد.
    */
    object-fit:contain;

    object-position:center;

    /*
       جلوگیری از فضای اضافه ناشی از inline image
    */
    vertical-align:middle;
}


/*
   اگر تصویر خیلی بلند باشد، روی نمایشگرهای
   کوچک بیش از حد ارتفاع نگیرد.
*/

@media (max-width:599px){

    .ws-hero-slide img{
        width:100%;
        height:auto;
        max-height:65vw;
        object-fit:contain;
    }

}

@media (min-width:600px){

    .ws-hero-slide img{
        width:100%;
        height:auto;
        max-height:55vw;
        object-fit:contain;
    }

}


/* =========================================================
   HERO DOTS
========================================================= */

.ws-hero-dots{
    position:absolute;

    bottom:10px;
    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:6px;

    direction:ltr;

    z-index:5;
}

.ws-hero-dot{
    width:8px;
    height:8px;

    border:0;
    padding:0;

    border-radius:50%;

    background:rgba(255,255,255,.8);

    cursor:pointer;
}

.ws-hero-dot.active{
    width:22px;

    border-radius:10px;

    background:var(--ws-gold);
}


/* =========================================================
   PRODUCT SLIDER
   کاملاً Responsive
========================================================= */

.ws-product-slider{

    position:relative;

    width:100%;
    max-width:100%;

    overflow:hidden;

    padding:3px 0 8px;
}


.ws-product-track{

    display:flex;

    flex-direction:column;

    gap:12px;

    direction:ltr;

    width:100%;

    transition:
        transform .65s ease;

    will-change:transform;
}


/*
   هر ردیف تمام عرض واقعی کانتینر را می‌گیرد
*/

.ws-product-row{

    display:grid;

    width:100%;
    max-width:100%;

    direction:rtl;

    gap:10px;

    /*
       موبایل:
       2 کارت کامل
    */
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.ws-product-card{

    width:100%;
    min-width:0;
    max-width:100%;

    background:#fff;

    border:1px solid var(--ws-border);

    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 4px 16px rgba(0,0,0,.045);

    direction:rtl;

    display:flex;
    flex-direction:column;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.ws-product-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.09);
}


/* =========================================================
   PRODUCT IMAGE
   هر تصویری انتخاب شود کامل دیده می‌شود
========================================================= */

.ws-product-image{

    width:100%;

    /*
       مربع استاندارد و مستقل از نسبت تصویر اصلی
    */
    aspect-ratio:1 / 1;

    min-height:0;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#fff;

    padding:10px;

    overflow:hidden;
}

.ws-product-image img{

    display:block;

    width:100%;
    height:100%;

    max-width:100%;
    max-height:100%;

    /*
       مهم‌ترین ویژگی:
       تصویر هرگز Crop نمی‌شود.
    */
    object-fit:contain;

    object-position:center;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.ws-product-info{

    width:100%;

    padding:10px;

    display:flex;
    flex-direction:column;

    flex:1;
}

.ws-product-title{

    margin:0 0 7px;

    min-height:40px;

    color:var(--ws-text);

    font-size:12px;

    line-height:1.8;

    font-weight:700;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;
}

.ws-brand{

    color:var(--ws-muted);

    font-size:10px;

    margin-bottom:7px;
}

.ws-price{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:5px;

    margin-top:auto;
}

.ws-new-price{

    color:var(--ws-primary);

    font-size:13px;

    font-weight:900;
}

.ws-discount{

    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;

    background:var(--ws-secondary);

    color:#fff;

    font-family:inherit;

    font-size:10px;

    cursor:pointer;
}

.ws-favorite{

    width:34px;
    flex:0 0 34px;

    border:1px solid var(--ws-border);

    border-radius:8px;

    background:#fff;

    color:var(--ws-primary);
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width:600px){

    .wiki-store{
        padding-left:18px;
        padding-right:18px;
    }

    .ws-header-main{
        grid-template-columns:180px 1fr;
    }

    .ws-actions{
        grid-column:1/-1;
    }

    /*
       سه کارت کامل
    */
    .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-brands{
        grid-template-columns:repeat(4,1fr);
    }

    .ws-articles{
        grid-template-columns:repeat(2,1fr);
    }

    .ws-benefits{
        grid-template-columns:repeat(4,1fr);
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width:900px){

    .wiki-store{
        padding-left:25px;
        padding-right:25px;
    }

    .ws-header-main{
        grid-template-columns:
            190px minmax(300px,1fr) 245px;
    }

    .ws-actions{
        grid-column:auto;
    }

    /*
       چهار کارت کامل
    */
    .ws-product-row{
        grid-template-columns:
            repeat(4,minmax(0,1fr));

        gap:12px;
    }

    .ws-product-image{
        padding:13px;
    }

    .ws-category-grid{
        grid-template-columns:repeat(5,1fr);
    }

    .ws-brands{
        grid-template-columns:repeat(6,1fr);
    }

    .ws-articles{
        grid-template-columns:repeat(3,1fr);
    }

    .ws-footer-grid{
        grid-template-columns:2fr 1fr 1fr 1fr;
    }

    .ws-section{
        margin-top:30px;
    }

    .ws-section-title{
        font-size:21px;
    }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1200px){

    .wiki-store{
        padding-left:30px;
        padding-right:30px;
    }

    .ws-product-row{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }

    .ws-category-grid{
        grid-template-columns:repeat(5,1fr);
    }
}


/* =========================================================
   SECURITY CATEGORIES
========================================================= */

.ws-category-grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:10px;
}

.ws-category-box{

    background:#fff;

    border:1px solid var(--ws-border);

    border-radius:17px;

    padding:12px;

    display:flex;

    align-items:center;

    gap:10px;

    min-height:88px;

    transition:.2s;
}

.ws-category-box:hover{

    border-color:var(--ws-secondary);

    transform:translateY(-3px);
}

.ws-category-box-icon{

    flex:0 0 52px;

    width:52px;
    height:52px;

    border-radius:13px;

    display:grid;
    place-items:center;

    background:#edf7f3;

    color:var(--ws-secondary);

    font-size:22px;
}

.ws-category-box strong{

    display:block;

    color:var(--ws-primary);

    font-size:12px;
}

.ws-category-box span{

    display:block;

    color:var(--ws-muted);

    font-size:10px;

    line-height:1.8;

    margin-top:4px;
}

@media (min-width:600px){

    .ws-category-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .ws-category-box{
        min-height:110px;
    }
}

@media (min-width:900px){

    .ws-category-grid{
        grid-template-columns:
            repeat(5,minmax(0,1fr));

        gap:13px;
    }

    .ws-category-box{
        min-height:125px;

        padding:16px;

        flex-direction:column;

        justify-content:center;

        text-align:center;
    }

    .ws-category-box-icon{

        width:64px;
        height:64px;

        flex-basis:64px;

        font-size:27px;
    }

    .ws-category-box strong{
        font-size:14px;
    }

    .ws-category-box span{
        font-size:11px;
    }
}


/* =========================================================
   BRANDS
========================================================= */

.ws-brands{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:9px;
}

.ws-brand-card{

    height:75px;

    border:1px solid var(--ws-border);

    border-radius:14px;

    background:#fff;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:10px;

    overflow:hidden;
}

.ws-brand-card img{

    width:100%;
    height:100%;

    object-fit:contain;

    object-position:center;
}


/* =========================================================
   ARTICLES
========================================================= */

.ws-articles{

    display:grid;

    grid-template-columns:1fr;

    gap:11px;
}

.ws-article{

    background:#fff;

    border:1px solid var(--ws-border);

    border-radius:16px;

    overflow:hidden;
}

.ws-article-image{

    width:100%;

    aspect-ratio:16/9;

    background:#edf0f3;

    overflow:hidden;
}

.ws-article-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    object-position:center;
}

.ws-article-content{
    padding:12px;
}

.ws-article h3{

    margin:0;

    color:var(--ws-primary);

    font-size:14px;

    line-height:1.8;
}

.ws-article p{

    color:var(--ws-muted);

    font-size:11px;

    line-height:1.9;

    margin:6px 0 9px;
}

.ws-read{

    color:var(--ws-secondary);

    font-size:11px;

    font-weight:800;
}


/* =========================================================
   BENEFITS
========================================================= */

.ws-benefits{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:9px;
}

.ws-benefit{

    min-height:105px;

    background:#fff;

    border:1px solid var(--ws-border);

    border-radius:16px;

    padding:13px 8px;

    text-align:center;
}

.ws-benefit-icon{

    width:42px;
    height:42px;

    margin:0 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{

    display:block;

    margin-top:4px;

    font-size:10px;

    color:var(--ws-muted);
}

@media (min-width:600px){

    .ws-benefits{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }

    .ws-brands{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }

    .ws-articles{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media (min-width:900px){

    .ws-brands{
        grid-template-columns:
            repeat(6,minmax(0,1fr));
    }

    .ws-articles{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}


/* =========================================================
   CTA
========================================================= */

.ws-cta{

    margin-top:25px;

    padding:22px 15px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            var(--ws-primary-dark),
            var(--ws-primary)
        );

    color:#fff;

    text-align:center;
}

.ws-cta h2{

    margin:0 0 8px;

    font-size:20px;
}

.ws-cta p{

    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;
}


/* =========================================================
   FOOTER
========================================================= */

.ws-footer{

    margin-top:25px;

    background:var(--ws-primary-dark);

    color:#fff;

    border-radius:20px 20px 0 0;

    padding:24px 15px 15px;
}

.ws-footer-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;
}

.ws-footer h3{

    margin:0 0 10px;

    font-size:14px;
}

.ws-footer p,
.ws-footer li,
.ws-footer a{

    color:#cbd5df;

    font-size:11px;

    line-height:2;
}

.ws-footer ul{

    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;
}

@media (min-width:900px){

    .ws-footer-grid{
        grid-template-columns:
            2fr 1fr 1fr 1fr;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion:reduce){

    .ws-hero-track,
    .ws-product-track,
    .ws-category,
    .ws-product-card,
    .ws-category-box,
    .ws-article{

        transition:none !important;
    }
}

</style>


<div class="wiki-store">


<!-- ======================================================
     TOP BAR
====================================================== -->

<header class="ws-topbar">

<div class="ws-topbar-inner">

<div class="ws-top-item">
<i class="fa-solid fa-headset"></i>
مشاوره تخصصی سیستم‌های امنیتی
</div>

<div class="ws-top-item">
<i class="fa-solid fa-clock"></i>
شنبه تا پنجشنبه ۹ تا ۲۰
</div>

<div class="ws-top-item">
<i class="fa-solid fa-phone"></i>
تماس با ARS
</div>

<div class="ws-top-item">
<i class="fa-solid fa-shield-halved"></i>
راهکارهای هوشمند حفاظتی
</div>

</div>

</header>


<!-- ======================================================
     HEADER
====================================================== -->

<header class="ws-header">

<div class="ws-header-main">

<a href="#" class="ws-logo"
aria-label="صفحه اصلی دوربین مداربسته ARS">

<span class="ws-logo-icon">
<i class="fa-solid fa-camera"></i>
</span>

<span>
ARS
<small>
دوربین مداربسته و سیستم‌های امنیتی
</small>
</span>

</a>


<form class="ws-search" role="search">

<input
type="search"
placeholder="جستجوی دوربین مداربسته، DVR، NVR یا تجهیزات امنیتی..."
aria-label="جستجوی محصولات دوربین مداربسته">

<button type="submit" aria-label="جستجو">

<i class="fa-solid fa-magnifying-glass"></i>

</button>

</form>


<div class="ws-actions">

<a href="#" class="ws-action">

<i class="fa-regular fa-user"></i>

<span>
حساب کاربری
</span>

</a>

<a href="#" class="ws-action">

<i class="fa-regular fa-heart"></i>

<span>
علاقه‌مندی
</span>

</a>

<a href="#" class="ws-action">

<i class="fa-solid fa-cart-shopping"></i>

<span>
سبد خرید
</span>

</a>

</div>

</div>


<nav class="ws-nav"
aria-label="منوی اصلی دوربین مداربسته ARS">

<ul class="ws-nav-list">

<li>
<a href="#">
<i class="fa-solid fa-bars"></i>
دسته‌بندی تجهیزات امنیتی
</a>
</li>

<li>
<a href="#">
دوربین مداربسته
</a>
</li>

<li>
<a href="#">
DVR و NVR
</a>
</li>

<li>
<a href="#">
دزدگیر اماکن
</a>
</li>

<li>
<a href="#">
تجهیزات انتقال تصویر
</a>
</li>

<li>
<a href="#">
لوازم جانبی دوربین
</a>
</li>

<li>
<a href="#" class="ws-special">
<i class="fa-solid fa-percent"></i>
پیشنهادهای ویژه
</a>
</li>

</ul>

</nav>

</header>


<!-- ======================================================
     QUICK CATEGORIES
====================================================== -->

<section class="ws-section">

<div class="ws-section-head">

<h1 class="ws-section-title">
خرید دوربین مداربسته و تجهیزات امنیتی ARS
</h1>

<a href="#" class="ws-more">
مشاهده همه
</a>

</div>


<div class="ws-category-scroll">

<a href="#" class="ws-category">

<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">
<i class="fa-solid fa-hard-drive"></i>
</div>

<strong>
DVR و NVR
</strong>

</a>


<a href="#" class="ws-category">

<div class="ws-category-icon">
<i class="fa-solid fa-bell"></i>
</div>

<strong>
دزدگیر اماکن
</strong>

</a>


<a href="#" class="ws-category">

<div class="ws-category-icon">
<i class="fa-solid fa-wifi"></i>
</div>

<strong>
انتقال تصویر
</strong>

</a>


<a href="#" class="ws-category">

<div class="ws-category-icon">
<i class="fa-solid fa-plug"></i>
</div>

<strong>
لوازم جانبی
</strong>

</a>

<a href="#" class="ws-category">

<div class="ws-category-icon">
<i class="fa-solid fa-folder"></i>
</div>

<strong>
بایگانی حرفه ای
</strong>

</a>

</div>

</section>


<!-- ======================================================
     HERO
     فقط آدرس src تصاویر را عوض کنید
====================================================== -->

<section class="ws-section">

<div class="ws-hero"
data-hero-slider>

<div class="ws-hero-track">


<a href="#" class="ws-hero-slide">

<img
src="https://dl.faraghaib.ir/m/260018-01/baner-01-02.png"
alt="دوربین مداربسته ARS و سیستم‌های امنیتی"
loading="eager">

</a>


<a href="#" class="ws-hero-slide">

<img
src="https://dl.faraghaib.ir/m/260018-01/baner-01-01.png"
alt="فروش و نصب دوربین مداربسته ARS"
loading="lazy">

</a>


<a href="#" class="ws-hero-slide">

<img
src="https://dl.faraghaib.ir/m/260018-01/baner-01-03.png"
alt="خرید دوربین مداربسته و تجهیزات حفاظتی"
loading="lazy">

</a>


</div>

<div class="ws-hero-dots"></div>

</div>

</section>



<!-- ======================================================
     Hexagonal container
====================================================== -->

<section class="ws-section">

<div class="ws-section-head">

</html>
{{کانتبنر 6 ضلعی/کاووسی}}

<html>


</div>
</section>




<!-- ======================================================
     SPECIAL PRODUCTS
     2 ROW
====================================================== -->

<section class="ws-section">

<div class="ws-section-head">

<h2 class="ws-section-title">
محصولات ویژه دوربین مداربسته ARS
</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-29.jpg"
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>

<span class="ws-discount">
ویژه
</span>

</div>

<div class="ws-product-actions">

<button class="ws-cart">
دریافت مشاوره
</button>

<button
class="ws-favorite"
aria-label="افزودن به علاقه‌مندی">

<i class="fa-regular fa-heart"></i>

</button>

</div>

</div>

</article>


<article class="ws-product-card">

<div class="ws-product-image">

<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-25.jpg"
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>

<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>

</div>

</div>

</article>


<article class="ws-product-card">

<div class="ws-product-image">

<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-49.jpg"
alt="دوربین مداربسته تحت شبکه IP"
loading="lazy">

</div>

<div class="ws-product-info">

<div class="ws-brand">
ARS
</div>

<h3 class="ws-product-title">
دوربین مداربسته تحت شبکه IP با کیفیت بالا
</h3>

<div class="ws-price">

<span class="ws-new-price">
استعلام قیمت
</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>

</div>

</div>

</article>


<article class="ws-product-card">

<div class="ws-product-image">

<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-50.jpg"
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>

<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>

</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-51.jpg"
alt="دستگاه DVR دوربین مداربسته"
loading="lazy">

</div>

<div class="ws-product-info">

<div class="ws-brand">
ARS
</div>

<h3 class="ws-product-title">
دستگاه DVR حرفه‌ای برای سیستم مداربسته
</h3>

<div class="ws-price">

<span class="ws-new-price">
استعلام قیمت
</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>

</div>

</div>

</article>


<article class="ws-product-card">

<div class="ws-product-image">

<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-52.png"
alt="دستگاه NVR دوربین مداربسته"
loading="lazy">

</div>

<div class="ws-product-info">

<div class="ws-brand">
ARS
</div>

<h3 class="ws-product-title">
دستگاه NVR ضبط تصاویر دوربین تحت شبکه
</h3>

<div class="ws-price">

<span class="ws-new-price">
استعلام قیمت
</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>

</div>

</div>

</article>


<article class="ws-product-card">

<div class="ws-product-image">

<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-53.jpg"
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>

<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>

</div>

</div>

</article>


<article class="ws-product-card">

<div class="ws-product-image">

<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-54.png"
alt="هارد مخصوص دوربین مداربسته"
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>

<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>

</div>

</div>

</article>

</div>

</div>

</div>

</section>


<!-- ======================================================
     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-62.png"
alt="برند ARS دوربین مداربسته"
loading="lazy">

</a>


<a href="#" class="ws-brand-card">

<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-64.png"
alt="برند دوربین مداربسته"
loading="lazy">

</a>


<a href="#" class="ws-brand-card">

<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-62.png"
alt="برند تجهیزات نظارتی"
loading="lazy">

</a>


<a href="#" class="ws-brand-card">

<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-70.png"
alt="برند تجهیزات امنیتی"
loading="lazy">

</a>


<a href="#" class="ws-brand-card">

<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-65.png"
alt="برند دوربین تحت شبکه"
loading="lazy">

</a>


<a href="#" class="ws-brand-card">

<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-66.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-25.jpg"
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-55.jpg"
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-51.jpg"
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-57.jpg"
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-58.jpg"
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-54.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-59.jpg"
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-60.jpg"
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-68.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-67.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-69.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>


</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,
            3000
        );

    }


    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(){

            return Math.max(
                0,
                track.scrollWidth -
                slider.clientWidth
            );

        }


        /* -----------------------------------------
           اندازه حرکت
        ----------------------------------------- */

        function getStep(){

            const card =
            track.querySelector(
                ".ws-product-card"
            );

            if(!card) return 0;


            const style =
            window.getComputedStyle(
                card.parentElement
            );

            const gap =
            parseFloat(
                style.columnGap ||
                style.gap ||
                10
            );


            return (
                card.getBoundingClientRect().width
                + gap
            );

        }


        /* -----------------------------------------
           حرکت
        ----------------------------------------- */

        function moveNext(){

            const maxScroll =
            getMaxScroll();


            if(maxScroll<=0){

                position=0;

                track.style.transform=
                    "translateX(0)";

                return;

            }


            const step =
            getStep();


            position += step;


            /*
               اگر به انتها رسید:
               دوباره از ابتدا
            */

            if(position>=maxScroll){

                position=0;

            }


            track.style.transform =
                "translateX(-"+
                position+
                "px)";

        }


        /* -----------------------------------------
           شروع
        ----------------------------------------- */

        function start(){

            stop();


            autoTimer =
            setInterval(
                moveNext,
                3500
            );

        }


        /* -----------------------------------------
           توقف
        ----------------------------------------- */

        function stop(){

            if(autoTimer){

                clearInterval(
                    autoTimer
                );

                autoTimer=null;

            }

        }


        slider.addEventListener(
            "mouseenter",
            stop
        );


        slider.addEventListener(
            "mouseleave",
            start
        );


        /*
           با تغییر اندازه صفحه،
           موقعیت نامعتبر حذف می‌شود.
        */

        window.addEventListener(
            "resize",
            function(){

                const maxScroll =
                getMaxScroll();


                if(position>maxScroll){

                    position=0;

                }


                track.style.transform =
                    "translateX(-"+
                    position+
                    "px)";

            }
        );


        start();

    }
);

});

</script>

</html>