/* slider.css — gedeelde basis voor alle sliders (homepage, Projects): horizontaal scrollbare lijst met
   scroll-snap, vorige/volgende-knoppen en optionele stipjes. Werking: src/assets/js/slider.js */
.slider { position: relative; }
.slider__lijst {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; margin: 0; padding: 0;
}
.slider__lijst::-webkit-scrollbar { display: none; }
.slider__knop {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 64px; padding: 4px 10px; border: 0; background: transparent; cursor: pointer;
  color: var(--kleur-wit); filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
}
.slider__knop svg { width: 100%; height: 100%; }
.slider__knop--vorige { left: 8px; }
.slider__knop--volgende { right: 8px; }
.slider__knop:hover { color: var(--kleur-geel); }
.slider__stippen { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 4px; }
.slider__stip {
  width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative;
}
.slider__stip::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--kleur-wit);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
.slider__stip[aria-current="true"]::before { inset: 6px; background: transparent; border: 2px solid var(--kleur-wit); }