/* --------------------------------------------------------------
   SYSTEMS FILTER — Category Navigation
   Modern, wrap-based (no horizontal scroll), fully accessible
   -------------------------------------------------------------- */

.systems-filter {
    margin-top: 2rem;
    margin-bottom: 2.25rem;
}

.systems-filter__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.systems-filter__item {
    display: inline-flex;
}

.systems-filter__link {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.05rem;
    font-family: var(--font-display, system-ui, sans-serif);
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.2;
    color: var(--c-900, #000); /* siyah / koyu lacivert metin */
    background-color: var(--c-surface, #fff);
    border: 1px solid var(--c-border, #e4eaea);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    outline: none;
}

    /* Hover & Focus */
    .systems-filter__link:hover,
    .systems-filter__link:focus-visible {
        color: var(--c-900, #000);
        background-color: #eef3f3;
        border-color: var(--c-400, #5c92a1);
        box-shadow: 0 6px 16px -10px rgba(3, 35, 40, 0.25);
        transform: translateY(-1px);
    }

    .systems-filter__link:focus-visible {
        outline: 2px solid var(--c-500, #1c7a8c);
        outline-offset: 2px;
    }

    /* Active (current page) */
    .systems-filter__link.is-active {
        color: #fff;
        background-color: var(--c-800, #003e52);
        border-color: var(--c-800, #003e52);
        box-shadow: 0 10px 22px -12px rgba(3, 35, 40, 0.45);
    }

        .systems-filter__link.is-active:hover,
        .systems-filter__link.is-active:focus-visible {
            color: #fff;
            background-color: var(--c-700, #02566c);
            border-color: var(--c-700, #02566c);
        }

/* --------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------- */

/* Mobile (≤ 480px): biraz daha küçük tipografi ve padding */
@media (max-width: 480px) {
    .systems-filter {
        margin-top: 1.5rem;
        margin-bottom: 1.75rem;
    }

    .systems-filter__link {
        font-size: 0.8rem;
        padding: 0.5rem 0.85rem;
    }

    .systems-filter__list {
        gap: 0.4rem 0.45rem;
    }
}

/* Tablet (481px – 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .systems-filter__link {
        font-size: 0.84rem;
        padding: 0.52rem 0.95rem;
    }
}

/* Large screens (≥ 1400px) */
@media (min-width: 1400px) {
    .systems-filter__link {
        font-size: 0.92rem;
        padding: 0.6rem 1.15rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .systems-filter__link {
        transition: none;
        transform: none;
    }
}