/* Liste sayfaları ortak filtre (.c-filter) ve harf seçici (.c-alpha) bileşenleri
   Kullanan sayfalar: Views/Articles/Index.cshtml (Sağlık Rehberi + kategoriler),
                      Views/Doctors/Index.cshtml (Doktorlar / Uzmanlar),
                      Views/MedicalFields/Index.cshtml (Tıbbi Birimler)
   Davranış: wwwroot/assets/scripts/filter.js */

.c-filter-page,
.c-filter {
    --cf-ink: #17202b;
    --cf-muted: #6b7785;
    --cf-line: #e6eaef;
    --cf-soft: #f4f7fa;
    --cf-tint: #eaf2f9;
    --cf-brand: #005596;
    --cf-brand-dark: #003c6b;
}

/* ---------------------------------------------------------------
   1) Kayma düzeltmesi (.c-filter-page, .o-page'e verilir)
   main.js yukarı scroll'da başlığa .js-sticky (position: fixed) ekleyip
   konteynere inline padding-top: 210px veriyor, aşağıda geri alıyor.
   Bu sayfalarda başlık akışta kalır, inline padding etkisizleşir.
   --------------------------------------------------------------- */
.c-filter-page > .o-container {
    padding-top: 0 !important;
}

.c-filter-page .c-subpage-head,
.c-filter-page .c-subpage-head.js-sticky {
    position: relative;
    top: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
}

.c-filter-page .c-subpage-head.js-sticky .c-subpage-head__top {
    padding: 0;
}

/* ---------------------------------------------------------------
   2) Üst sekmeler: segmented control (masaüstü)
   --------------------------------------------------------------- */
@media (min-width: 768px) {
    .c-filter-page .c-subpage-head__links {
        gap: 4px;
        padding: 5px;
        background: #e9eef3;
        border-radius: 14px;
    }

    .c-filter-page .c-subpage-head__links a {
        padding: 10px 20px;
        border: 0;
        border-radius: 10px;
        color: var(--cf-muted);
        font-weight: 500;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .c-filter-page .c-subpage-head__links a:hover {
        opacity: 1;
        color: var(--cf-ink);
    }

    .c-filter-page .c-subpage-head__links a.active {
        background: #fff;
        color: var(--cf-brand);
        box-shadow: 0 1px 2px rgba(23, 32, 43, 0.06), 0 4px 12px -4px rgba(23, 32, 43, 0.12);
    }
}

/* ---------------------------------------------------------------
   3) Arama çubuğu
   --------------------------------------------------------------- */
.c-filter {
    margin-top: 8px;
}

/* Mobil aç/kapa butonu: masaüstünde gizli */
.c-filter__toggle {
    display: none;
}

.c-filter__bar {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.15fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--cf-line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(23, 32, 43, 0.04), 0 18px 40px -24px rgba(0, 60, 107, 0.35);
}

.c-filter__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    height: 64px;
    margin: 0;
    padding: 0 16px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

/* Alanlar arası ince ayraç */
.c-filter__field + .c-filter__field::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: var(--cf-line);
    transition: opacity 0.2s;
}

.c-filter__field:hover {
    background: var(--cf-soft);
}

.c-filter__field:focus-within,
.c-filter__field.is-open {
    background: #fff;
    box-shadow: 0 0 0 2px var(--cf-brand) inset;
}

.c-filter__field:hover::before,
.c-filter__field:hover + .c-filter__field::before,
.c-filter__field:focus-within::before,
.c-filter__field:focus-within + .c-filter__field::before {
    opacity: 0;
}

.c-filter__icon {
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--cf-tint);
    color: var(--cf-brand);
}

.c-filter__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.c-filter__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.02em;
    color: var(--cf-muted);
    white-space: nowrap;
}

/* Arama input'u */
.c-filter__field--search input {
    width: 100%;
    height: 24px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--cf-ink);
    -webkit-appearance: none;
    appearance: none;
}

.c-filter__field--search input::placeholder {
    color: #a3adb8;
    font-weight: 400;
}

.c-filter__field--search input::-webkit-search-cancel-button {
    cursor: pointer;
}

/* select2 yüklenmeden önceki native select (ilk açılışta kayma olmasın) */
.c-filter__field--select select {
    width: 100%;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--cf-ink);
    -webkit-appearance: none;
    appearance: none;
}

/* select2: kutusuz, alanın içine gömülü görünüm */
.c-filter .select2-container {
    width: 100% !important;
    min-width: 0;
    height: 24px !important;
    font-size: inherit;
}

.c-filter .select2-container .selection {
    height: 24px !important;
}

.c-filter .select2-selection {
    height: 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    outline: none;
}

.c-filter .select2-selection__rendered {
    padding: 0 28px 0 0 !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px !important;
    color: var(--cf-ink) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-filter .select2-selection__arrow {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    transform: translateY(-50%);
}

.c-filter .select2-container--open .select2-selection__arrow b {
    transform: rotate(180deg);
}

/* Ara butonu */
.c-filter__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 64px;
    padding: 0 30px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--cf-brand-dark) 0%, var(--cf-brand) 100%);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 20px -10px rgba(0, 85, 150, 0.7);
    transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}

.c-filter__submit:hover {
    filter: brightness(1.08);
    box-shadow: 0 14px 24px -12px rgba(0, 85, 150, 0.8);
}

.c-filter__submit:active {
    transform: translateY(1px);
}

.c-filter__submit:focus-visible,
.c-filter__toggle:focus-visible {
    outline: 3px solid rgba(0, 85, 150, 0.35);
    outline-offset: 2px;
}

/* İki alanlı varyant (arama + tek select), ör. Tıbbi Birimler */
.c-filter__bar--2 {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr) auto;
}

/* ---------------------------------------------------------------
   4) Aktif filtre etiketleri
   --------------------------------------------------------------- */
.c-filter__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0 4px;
}

.c-filter__chips-title {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cf-muted);
}

.c-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    height: 34px;
    padding: 0 8px 0 14px;
    border: 1px solid #d5e4f1;
    border-radius: 999px;
    background: var(--cf-tint);
    color: var(--cf-brand-dark);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.c-filter-chip:hover {
    background: #dcebf7;
    border-color: #bcd6ec;
    color: var(--cf-brand-dark);
}

.c-filter-chip__x {
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 60, 107, 0.1);
    font-size: 15px;
    line-height: 1;
}

.c-filter__clear {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cf-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.c-filter__clear:hover {
    color: var(--cf-ink);
}

/* ---------------------------------------------------------------
   5) select2 açılır liste (body'ye eklenir, filter.js .c-filter-dropdown verir)
   --------------------------------------------------------------- */
.select2-dropdown.c-filter-dropdown {
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #e6eaef !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 40px -16px rgba(23, 32, 43, 0.28);
}

.select2-container--above .select2-dropdown.c-filter-dropdown {
    margin-top: -10px;
}

.c-filter-dropdown .select2-search--dropdown {
    padding: 10px;
}

.c-filter-dropdown .select2-search__field {
    height: 40px;
    padding: 0 12px !important;
    border: 1px solid #e6eaef !important;
    border-radius: 10px;
    font-size: 14px;
}

.c-filter-dropdown .select2-search__field:focus {
    border-color: #005596 !important;
}

.c-filter-dropdown .select2-results__options {
    padding: 6px;
}

.c-filter-dropdown .select2-results__option {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #17202b;
}

.c-filter-dropdown .select2-results__option--highlighted[aria-selected],
.c-filter-dropdown .select2-results__option--highlighted {
    background: #eaf2f9 !important;
    color: #003c6b !important;
}

.c-filter-dropdown .select2-results__option[aria-selected="true"] {
    background: transparent;
    color: #005596;
    font-weight: 600;
}

/* ---------------------------------------------------------------
   6) Tablet: arama üstte tam satır, iki select yan yana, buton altta
   --------------------------------------------------------------- */
@media (max-width: 1199px) {
    .c-filter__bar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .c-filter__field--search,
    .c-filter__submit {
        grid-column: 1 / -1;
    }

    .c-filter__field {
        background: var(--cf-soft);
    }

    .c-filter__field + .c-filter__field::before {
        display: none;
    }

    .c-filter__submit {
        height: 56px;
    }

    .c-filter__bar--2 .c-filter__field--select {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------
   7) Mobil: panel kapalı başlar, "Ara ve filtrele" butonuyla açılır
   --------------------------------------------------------------- */
@media (max-width: 767px) {
    .c-filter {
        margin-top: 16px;
    }

    .c-filter__toggle {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        height: 56px;
        padding: 0 14px 0 8px;
        border: 1px solid var(--cf-line);
        border-radius: 16px;
        background: #fff;
        color: var(--cf-ink);
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        box-shadow: 0 10px 24px -18px rgba(0, 60, 107, 0.45);
        transition: border-color 0.2s, border-radius 0.2s;
    }

    .c-filter__toggle .c-filter__icon {
        flex-basis: 40px;
    }

    .c-filter__toggle-text {
        flex: 1 1 auto;
    }

    .c-filter__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--cf-brand);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
    }

    .c-filter__chevron {
        flex: 0 0 20px;
        color: var(--cf-muted);
        transition: transform 0.25s;
    }

    .c-filter.is-expanded .c-filter__toggle {
        border-color: #cfdfee;
    }

    .c-filter.is-expanded .c-filter__chevron {
        transform: rotate(180deg);
    }

    .c-filter__panel {
        display: none;
    }

    .c-filter.is-expanded .c-filter__panel {
        display: block;
        margin-top: 8px;
        animation: c-filter-in 0.22s ease-out;
    }

    .c-filter__bar {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 16px;
    }

    .c-filter__field {
        height: 60px;
        padding: 0 12px;
        gap: 12px;
    }

    .c-filter__icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .c-filter__submit {
        height: 52px;
    }

    /* Etiketler tek satırda yatay kaydırılır, dikey yer kaplamaz */
    .c-filter__chips {
        flex-wrap: nowrap;
        margin: 10px -16px 0;
        padding: 0 16px 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .c-filter__chips::-webkit-scrollbar {
        display: none;
    }

    .c-filter__chips-title {
        display: none;
    }

    .c-filter-chip,
    .c-filter__clear {
        flex: 0 0 auto;
    }
}

/* ---------------------------------------------------------------
   8) Harf seçici (.c-alpha)
   Doktorlar: harfler link (sunucu filtresi)
   Vital Dergi: .c-alpha--years, yıllar link
   Tıbbi Birimler: harfler buton (.js-alpha-local, sayfa içi filtre)
   --------------------------------------------------------------- */
.c-alpha {
    --cf-ink: #17202b;
    --cf-muted: #6b7785;
    --cf-line: #e6eaef;
    --cf-soft: #f4f7fa;
    --cf-tint: #eaf2f9;
    --cf-brand: #005596;
    --cf-brand-dark: #003c6b;

    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--cf-line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(23, 32, 43, 0.04), 0 12px 28px -22px rgba(0, 60, 107, 0.35);
}

.c-alpha__all,
.c-alpha__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--cf-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.c-alpha__all {
    flex: 0 0 auto;
    padding: 0 18px;
    background: var(--cf-soft);
}

.c-alpha__divider {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 8px 2px;
    background: var(--cf-line);
}

.c-alpha__letters {
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 2px;
    min-width: 0;
}

.c-alpha__letter {
    flex: 1 1 0;
    min-width: 30px;
    max-width: 40px;
    padding: 0;
}

.c-alpha__all:hover,
.c-alpha__letter:hover {
    background: var(--cf-tint);
    color: var(--cf-brand);
}

.c-alpha__all.is-active,
.c-alpha__letter.is-active {
    background: linear-gradient(135deg, var(--cf-brand-dark) 0%, var(--cf-brand) 100%);
    color: #fff;
    box-shadow: 0 8px 16px -8px rgba(0, 85, 150, 0.7);
}

.c-alpha__all:focus-visible,
.c-alpha__letter:focus-visible {
    outline: 3px solid rgba(0, 85, 150, 0.35);
    outline-offset: 1px;
}

/* İçeriği olmayan harf (Tıbbi Birimler) */
.c-alpha__letter:disabled {
    background: transparent;
    color: #c5ccd4;
    box-shadow: none;
    cursor: default;
}

/* Kaydırma okları: filter.js satırı .c-alpha__scroller'a sarar ve okları ekler.
   Oklar yalnızca satır taşıyorsa (pratikte mobilde) ve o yöne kaydırılabiliyorsa görünür. */
.c-alpha__scroller {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.c-alpha__scroller > .c-alpha__letters {
    flex: 1 1 auto;
}

.c-alpha__nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--cf-line);
    border-radius: 50%;
    background: #fff;
    color: var(--cf-brand);
    cursor: pointer;
    box-shadow: 0 4px 12px -4px rgba(23, 32, 43, 0.3);
    transform: translateY(-50%);
}

.c-alpha__nav--prev {
    left: 0;
}

.c-alpha__nav--prev svg {
    transform: rotate(180deg);
}

.c-alpha__nav--next {
    right: 0;
}

.c-alpha__scroller.can-prev .c-alpha__nav--prev,
.c-alpha__scroller.can-next .c-alpha__nav--next {
    display: inline-flex;
}

.c-alpha__nav:active {
    background: var(--cf-tint);
}

/* İlk açılışta sağ ok iki kez hafifçe sağa itilir */
.c-alpha__scroller.is-hinting .c-alpha__nav--next {
    animation: c-alpha-nudge 0.9s ease-in-out 0.4s 2;
}

@keyframes c-alpha-nudge {
    0%, 100% {
        transform: translateY(-50%) translateX(0);
    }
    50% {
        transform: translateY(-50%) translateX(4px);
    }
}

/* Yıl varyantı (Vital Dergi): öğeler içerik genişliğinde, soldan dizilir */
.c-alpha--years {
    margin: 8px 0 0;
}

.c-alpha--years .c-alpha__letters {
    justify-content: flex-start;
    gap: 4px;
}

.c-alpha--years .c-alpha__letter {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    padding: 0 16px;
}

/* Tablet: harfler iki satıra sarılır */
@media (max-width: 1199px) {
    .c-alpha__letters {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px;
    }

    .c-alpha__letter {
        flex: 0 0 40px;
        max-width: none;
    }
}

/* Mobil: "Tümü" sabit, harfler tek satırda yatay kayar */
@media (max-width: 767px) {
    .c-alpha {
        margin: 16px 0 20px;
        padding: 6px;
        border-radius: 16px;
    }

    .c-alpha__divider {
        margin: 8px 0;
    }

    .c-alpha__letters {
        flex-wrap: nowrap;
        gap: 2px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    /* Kenar solması, kaydırılabilecek yön(ler)e göre (filter.js can-prev / can-next verir) */
    .c-alpha__scroller.can-next .c-alpha__letters {
        -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 96%);
        mask-image: linear-gradient(90deg, #000 70%, transparent 96%);
    }

    .c-alpha__scroller.can-prev .c-alpha__letters {
        -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 30%);
        mask-image: linear-gradient(90deg, transparent 4%, #000 30%);
    }

    .c-alpha__scroller.can-prev.can-next .c-alpha__letters {
        -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%);
        mask-image: linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%);
    }

    .c-alpha__letters::-webkit-scrollbar {
        display: none;
    }

    .c-alpha__letter {
        flex: 0 0 38px;
        height: 38px;
        scroll-snap-align: start;
    }

    .c-alpha__all {
        height: 38px;
        padding: 0 14px;
    }

    .c-alpha--years {
        margin-top: 16px;
    }

    .c-alpha--years .c-alpha__letter {
        padding: 0 14px;
    }
}

@keyframes c-filter-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-filter *,
    .c-filter-dropdown *,
    .c-alpha * {
        transition: none !important;
        animation: none !important;
    }
}