/**
 * Atom: Pagination Dots
 *
 * Carousel/slider navigasyon noktaları.
 *
 * Figma değerleri:
 *   Dot: 4×4px, border-radius 30px
 *   Hit area: 18×14px
 *   Active: #242424 (text-primary)
 *   Inactive: #869791 → opacity 0.35 ile çözüm
 *
 * @package Saha
 */

.saha-pagination-dots {
    display: flex;
    align-items: center;
}

.saha-pagination-dots__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 14px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.saha-pagination-dots__dot:focus-visible {
    outline: 2px solid var(--saha-color-text-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.saha-pagination-dots__indicator {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50px;
    background-color: #242424;
    opacity: 0.2;
    transition: opacity 0.2s ease;
}

/* Active state */
.saha-pagination-dots__dot.is-active .saha-pagination-dots__indicator {
    opacity: 1;
}

/* Hover — inactive dot'lar */
.saha-pagination-dots__dot:not(.is-active):hover .saha-pagination-dots__indicator {
    opacity: 0.6;
}