/* ---------- home slider (09.10.2026) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hslider { display: block; width: 100%; margin-top: 18px; border-radius: var(--r-l); overflow: hidden; position: relative; background: #1f1d1b; aspect-ratio: 3 / 1; }
.hslider .slides, .hslider .slide { position: absolute; inset: 0; }
.hslider .slide { opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.hslider .slide.on { opacity: 1; pointer-events: auto; }
.hslider .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hslider .arr {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(31, 29, 27, .55); color: #fff; font-size: 30px; line-height: 40px; cursor: pointer; opacity: 0; transition: opacity .2s;
}
.hslider:hover .arr { opacity: 1; }
.hslider .arr:hover { background: var(--accent); }
.hslider .prev { left: 14px; }
.hslider .next { right: 14px; }
.hslider .dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.hslider .dots button { width: 10px; height: 10px; border-radius: 5px; border: 0; padding: 0; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .3s, background .3s; }
.hslider .dots button.on { width: 28px; background: var(--accent); }
@media (max-width: 760px) {
  .hslider { margin-top: 10px; border-radius: var(--r-s); }
  .hslider .arr { display: none; }
  .hslider .dots { bottom: 8px; }
}