.wr-slider {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  max-width: 100%;
  aspect-ratio: var(--wr-aspect, 16/9);
  background: #f2f5f7;
}
.wr-slide { display:none; width:100%; height:100%; }
.wr-slide.active { display:block; animation: wrFade .5s ease; }
@keyframes wrFade { from {opacity:.6} to {opacity:1} }
.wr-slide img { width:100%; height:100%; object-fit:cover; display:block; }

/* Oklar */
.wr-prev, .wr-next {
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(0,46,65,.75); color:#fff; border:none;
  font-size:17px; padding:10px 14px; border-radius:50%; cursor:pointer; z-index: 5;
}
.wr-prev:hover, .wr-next:hover { background: rgba(0,46,65,.95); }
.wr-prev { left: 10px; } .wr-next { right: -5px; }

/* Dots */
.wr-dots { position:absolute; bottom:10px; left:0; right:0; text-align:center; z-index: 4; }
.wr-dot { display:inline-block; width:10px; height:10px; background:#cfd8dc; border-radius:50%; margin:0 5px; cursor:pointer; }
.wr-dot.active { background:#27a6c9; }

/* Thumbnails bar */
.wr-thumbs {
  display:flex; gap:8px; margin-top:10px; overflow:auto; padding-bottom:6px;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
}
.wr-thumbs::-webkit-scrollbar { height:8px; }
.wr-thumbs::-webkit-scrollbar-thumb { background:#cfd8dc; border-radius:999px; }
.wr-thumb {
  width:120px; height:75px; object-fit:cover; border-radius:8px; flex:0 0 auto;
  scroll-snap-align: center; opacity:.7; border:2px solid transparent; cursor:pointer;
}
.wr-thumb.active { opacity:1; border-color:#27a6c9; }

/* Lightbox */
.wr-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; z-index: 9999; }
.wr-lightbox img { max-width: 92vw; max-height: 92vh; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.wr-close { position:absolute; top:20px; right:30px; font-size:36px; color:#fff; cursor:pointer; }

@media (max-width: 640px){
  .wr-prev, .wr-next { font-size:15px; padding:8px 12px; }
  .wr-dot { width:8px; height:8px; }
  .wr-thumb { width:96px; height:62px; }
}

.wr-slider,
.wr-slide img {
    user-select: none;
    -webkit-user-drag: none;
}

.wr--dragging {
    cursor: grabbing !important;
}