/* Kalanazdik Link Gallery - رنگ اصلی را با --klg-accent عوض کنید */
.klg{--klg-ratio:1/1;--klg-accent:#ef394e;position:relative;max-width:100%}
.klg,.klg *,.klg *::before,.klg *::after{box-sizing:border-box}

/* ---------- تک‌رسانه ---------- */
.klg-single{margin:0 0 1em}
.klg-single .klg-slide{display:block}
.klg-single .klg-slide[data-kind="image"] img{display:block;max-width:100%;height:auto;cursor:zoom-in}
.klg-single .klg-slide[data-kind="video"] video{display:block;max-width:100%;height:auto}
.klg-single .klg-embed{width:100%;aspect-ratio:16/9}

.klg-embed{position:relative}
.klg-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* ---------- اسلایدر ---------- */
.klg .klg-stage{position:relative;overflow:hidden;border:1px solid #eceef0;border-radius:12px;background:#fff}
.klg .klg-track{display:flex;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.klg .klg-track::-webkit-scrollbar{display:none}
.klg .klg-track>.klg-slide{position:relative;flex:0 0 100%;max-width:100%;scroll-snap-align:center;scroll-snap-stop:always}
.klg .klg-stage .klg-track>.klg-slide{aspect-ratio:var(--klg-ratio);background:#fff}
.klg .klg-stage .klg-track>.klg-slide[data-kind="video"]{background:#000}
.klg .klg-stage .klg-slide>img,
.klg .klg-stage .klg-slide>video{position:absolute;top:0;left:0;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;object-fit:contain;border:0;border-radius:0;box-shadow:none;-webkit-user-drag:none;user-select:none}
.klg .klg-stage .klg-slide[data-kind="image"]>img{cursor:zoom-in}
.klg .klg-stage .klg-slide>.klg-embed{position:absolute;top:0;left:0;width:100%;height:100%}

/* ---------- دکمه‌ها (با ویژگی بالا تا استایل قالب خرابشان نکند) ---------- */
.klg .klg-arrow,.klg-lb .klg-arrow{position:absolute;top:50%;z-index:3;display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:0;margin:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.96);color:#3f4064;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:pointer;transform:translateY(-50%);transition:opacity .2s;-webkit-appearance:none;appearance:none}
.klg .klg-arrow:hover,.klg .klg-arrow:focus,.klg-lb .klg-arrow:hover,.klg-lb .klg-arrow:focus{background:#fff;color:var(--klg-accent,#ef394e);outline:0}
.klg .klg-arrow--l,.klg-lb .klg-arrow--l{left:10px}
.klg .klg-arrow--r,.klg-lb .klg-arrow--r{right:10px}
.klg .klg-arrow{opacity:0}
.klg .klg-stage:hover .klg-arrow,.klg .klg-arrow:focus{opacity:1}
.klg .klg-arrow[disabled]{opacity:0!important;pointer-events:none}

.klg .klg-zoom{position:absolute;top:10px;right:10px;z-index:3;display:flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:0;margin:0;padding:0;border:0;border-radius:8px;background:rgba(255,255,255,.92);color:#3f4064;box-shadow:0 1px 5px rgba(0,0,0,.2);cursor:pointer;-webkit-appearance:none;appearance:none}
.klg .klg-zoom:hover,.klg .klg-zoom:focus{background:#fff;color:var(--klg-accent,#ef394e);outline:0}

.klg .klg-counter,.klg-lb .klg-counter{position:absolute;z-index:3;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:1;direction:ltr;pointer-events:none}
.klg .klg-counter{bottom:10px;left:10px}

/* ---------- تصاویر کوچک ---------- */
.klg .klg-thumbs{display:flex;gap:8px;margin-top:10px;padding:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.klg .klg-thumbs::-webkit-scrollbar{display:none}
.klg .klg-thumb{position:relative;flex:0 0 auto;width:64px;height:64px;min-width:0;margin:0;padding:0;overflow:hidden;border:2px solid #e0e0e6;border-radius:8px;background:#f3f4f6;cursor:pointer;-webkit-appearance:none;appearance:none}
.klg .klg-thumb:hover,.klg .klg-thumb:focus{background:#f3f4f6;outline:0}
.klg .klg-thumb.is-active{border-color:var(--klg-accent,#ef394e)}
.klg .klg-thumb img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.klg .klg-thumb--video:not(:has(img)){background:#222}
.klg .klg-play{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;text-shadow:0 0 4px rgba(0,0,0,.7);background:rgba(0,0,0,.22)}

/* ---------- نمایش بزرگ (لایت‌باکس) ---------- */
html.klg-lock{overflow:hidden!important}
.klg-lb{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999999;background:rgba(10,10,12,.94)}
.klg-lb[hidden]{display:none}
.klg-lb,.klg-lb *,.klg-lb *::before,.klg-lb *::after{box-sizing:border-box}
.klg-lb .klg-track{display:flex;width:100%;height:100%;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.klg-lb .klg-track::-webkit-scrollbar{display:none}
.klg-lb .klg-track>.klg-slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;padding:56px 12px 24px;scroll-snap-align:center;scroll-snap-stop:always}
.klg-lb .klg-slide>img,.klg-lb .klg-slide>video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;margin:0;object-fit:contain;-webkit-user-drag:none;user-select:none}
.klg-lb .klg-slide>.klg-embed{width:min(100%,calc((100vh - 110px)*16/9));aspect-ratio:16/9}
.klg-lb .klg-arrow{width:46px;height:46px;opacity:1}
.klg-lb .klg-arrow[disabled]{opacity:.25;pointer-events:none}
.klg-lb .klg-counter{top:18px;left:50%;transform:translateX(-50%)}
.klg-lb .klg-lb__close{position:absolute;top:12px;left:12px;z-index:4;display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:0;margin:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}
.klg-lb .klg-lb__close:hover,.klg-lb .klg-lb__close:focus{background:rgba(255,255,255,.3);color:#fff;outline:0}
.klg-lb--single .klg-arrow,.klg-lb--single .klg-counter{display:none}

/* روی موبایل و تبلت (لمسی) فلش‌ها پنهان است و با کشیدن انگشت اسلاید عوض می‌شود */
@media (hover:none){
  .klg .klg-arrow,.klg-lb .klg-arrow{display:none}
}
@media (max-width:480px){
  .klg .klg-thumb{width:54px;height:54px}
}