/* Tür ansiklopedisi — liste ve tür sayfası.
   Renkler mevcut CSS değişkenlerinden alınır; yeni palet tanımlanmaz.
   Köşeler --site-box-radius (4px) ile sitenin kutu diline bağlı. */

/* Kart boşluğu YOK. Sekme ve filtre şeritleri kartın tam genişliğini
   kaplamalı; boşluk kartta olsaydı negatif kenar boşluğuyla iptal etmek
   gerekirdi ve home-page.css içindeki
   `.home-page .recent-topics.card:not(.recent-topics--with-tabs) >
   .topics-sort-tabs-wrap { margin: 0 }` kuralı (özgüllük 0,5,0) onu
   eziyordu. Bunun yerine boşluk yalnızca ihtiyacı olan çocuklara
   veriliyor. */
.species-list-card {
    padding: 0;
    /* Tam genişlikteki şeritler yuvarlatılmış köşeleri taşırmasın. */
    overflow: hidden;
}

.species-toolbar {
    padding-left: 1rem;
    padding-right: 1rem;
}

.species-empty {
    padding-left: 1rem;
    padding-right: 1rem;
}

.species-pagination {
    padding: 0 1rem 1rem;
}

/* Kompakt filtre çubuğu — uzun şerit satırları yerine etiketli select */
.species-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .45rem .55rem;
    padding: .65rem 1rem .75rem;
    border-top: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
    background: color-mix(in srgb, var(--text-color) 3.5%, var(--background-color));
}

[data-bs-theme="dark"] .species-filters-bar {
    border-top-color: color-mix(in srgb, var(--primary-color) 32%, transparent);
    background: color-mix(in srgb, #fff 3.2%, transparent);
}

.species-filter-field {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: .12rem;
    min-width: 0;
    flex: 1 1 7.5rem;
    max-width: 11.5rem;
    margin: 0;
    padding: .28rem .55rem .32rem;
    border-radius: var(--site-box-radius, 4px);
    border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 88%, transparent);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.species-filter-field:hover,
.species-filter-field:focus-within {
    border-color: color-mix(in srgb, var(--primary-color) 48%, transparent);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bs-body-bg, #fff));
}

.species-filter-field.is-active {
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
    background: color-mix(in srgb, var(--primary-color) 12%, var(--bs-body-bg, #fff));
}

[data-bs-theme="dark"] .species-filter-field {
    background: color-mix(in srgb, #fff 4%, transparent);
    border-color: color-mix(in srgb, #fff 14%, transparent);
}

[data-bs-theme="dark"] .species-filter-field:hover,
[data-bs-theme="dark"] .species-filter-field:focus-within,
[data-bs-theme="dark"] .species-filter-field.is-active {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.species-filter-field__label {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.1;
    color: color-mix(in srgb, var(--text-color) 48%, transparent);
}

.species-filter-field.is-active .species-filter-field__label {
    color: var(--primary-color);
}

.species-filter-field__select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    padding: .05rem 1.1rem .05rem 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .05rem center;
    background-size: .55rem;
    color: var(--text-color);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
}

.species-filter-field__select:focus {
    outline: none;
}

.species-filters-clear {
    align-self: center;
    margin-left: auto;
    padding: .35rem .55rem;
    border-radius: var(--site-box-radius, 4px);
    font-size: .72rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--text-color) 70%, transparent);
    text-decoration: none;
    white-space: nowrap;
}

.species-filters-clear:hover,
.species-filters-clear:focus-visible {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    outline: none;
}

@media (max-width: 575.98px) {
    .species-filter-field {
        flex: 1 1 calc(50% - .55rem);
        max-width: none;
    }

    .species-filters-clear {
        flex: 1 1 100%;
        margin-left: 0;
        text-align: center;
    }
}

/* NOT: eski .species-filter-row şeritleri kaldırıldı; boşluk
   ızgaranın kendi üst dolgusundan veriliyor. */

.species-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .85rem;
    /* Üst boşluk araç çubuğunun pt-2/pb-2 ritmiyle (.5rem) aynı. */
    padding: .5rem 1rem 1rem;
}

.species-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--site-box-radius, 4px);
    overflow: hidden;
    background: var(--bs-card-bg, rgba(255, 255, 255, .03));
    border: 1px solid rgba(var(--primary-color-rgb), .22);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.species-card:hover {
    border-color: rgba(var(--primary-color-rgb), .42);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    color: inherit;
}

[data-bs-theme="light"] .species-card {
    background: var(--lm-card-bg, #fff);
}

[data-bs-theme="light"] .species-card:hover {
    box-shadow: 0 6px 18px rgba(var(--primary-color-rgb), .14);
}

.species-card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: rgba(0, 0, 0, .2);
}

.species-card__media img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.species-card:hover .species-card__media img {
    transform: scale(1.04);
}

.species-card__group {
    position: absolute;
    left: .4rem;
    bottom: .4rem;
    padding: .12rem .45rem;
    border-radius: var(--site-box-radius, 4px);
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Zorluk rozeti gövdede değil görselin köşesinde: gövdede olduğunda
   künye satırı sarınca rozet aşağı kayıyor ve yan yana kartların alt
   hizası bozuluyordu. Köşede her kartta aynı yerde duruyor. */
.species-card__difficulty {
    position: absolute;
    right: .4rem;
    top: .4rem;
    padding: .12rem .45rem;
    border-radius: var(--site-box-radius, 4px);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: rgba(0, 0, 0, .62);
    color: #fff;
}

.species-card__difficulty--easy { color: #7ee2a8; }
.species-card__difficulty--medium { color: #ffd479; }
.species-card__difficulty--hard { color: #ff9b91; }

.species-card__body {
    padding: .55rem .7rem .65rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    /* Künye satırı sarsa bile kartlar aynı yükseklikte kalsın. */
    flex: 1 1 auto;
}

.species-card__title {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.species-card__sci {
    font-size: .74rem;
    font-style: italic;
    opacity: .65;
    line-height: 1.25;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Künye satırı kimlik bloğundan ince bir çizgiyle ayrılıyor; değerler
   arasında da dikey ayıraç var. Her değer bölünmez kutu, yoksa
   "24-30" ile "°C" ayrı satırlara düşebiliyor. */
.species-card__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem .35rem;
    font-size: .72rem;
    opacity: .85;
    line-height: 1.4;
    margin: 0;
    margin-top: auto;
    padding-top: .45rem;
    border-top: 1px solid rgba(var(--text-color-rgb), .12);
}

.species-card__fact {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.species-card__fact + .species-card__fact::before {
    content: "";
    width: 1px;
    height: .8em;
    margin-right: .35rem;
    background: rgba(var(--text-color-rgb), .25);
}

/* --- Tür sayfası --- */

.species-detail {
    display: flex;
    gap: 1.25rem;
    padding: 1rem;
    flex-wrap: wrap;
}

.species-detail__figure {
    flex: 0 0 340px;
    max-width: 100%;
    margin: 0;
}

.species-detail__figure img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--site-box-radius, 4px);
}

.species-detail__credit {
    margin-top: .3rem;
    font-size: .72rem;
    opacity: .65;
    line-height: 1.35;
}

.species-detail__body {
    flex: 1 1 320px;
    min-width: 0;
}

.species-detail__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.species-detail__sci {
    font-style: italic;
    opacity: .75;
    margin: .1rem 0 0;
}

.species-detail__group {
    font-size: .8rem;
    opacity: .7;
    margin: .15rem 0 .75rem;
}

.species-specs {
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .3rem .85rem;
}

.species-specs__row {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .28rem .5rem;
    border-radius: var(--site-box-radius, 4px);
    background: rgba(var(--text-color-rgb), .05);
}

.species-specs__key {
    font-size: .8rem;
    opacity: .75;
    margin: 0;
    font-weight: 500;
}

.species-specs__val {
    font-size: .82rem;
    font-weight: 700;
    margin: 0;
    text-align: right;
}

.species-detail__summary {
    line-height: 1.65;
}

.species-detail__summary p {
    margin: 0 0 .8rem;
}

.species-detail__summary p:last-child {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .species-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: .6rem;
    }

    .species-detail {
        padding: .75rem;
        gap: .85rem;
    }

    .species-detail__figure {
        flex: 1 1 auto;
    }
}

/* --- Tür sayfası: ilgili konular --- */

.species-topics {
    padding: 0 1rem 1rem;
}

.species-topics__title {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.species-topics__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.species-topics__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem .5rem;
    border-radius: var(--site-box-radius, 4px);
    background: rgba(var(--text-color-rgb), .04);
}

.species-topics__item + .species-topics__item {
    margin-top: .25rem;
}

.species-topics__item a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.species-topics__item a:hover {
    color: var(--primary-color);
}

.species-topics__meta {
    font-size: .75rem;
    opacity: .65;
    flex-shrink: 0;
}

/* —— Besliyorum paneli (görsel altı) —— */
.species-keep-panel {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .65rem;
    padding-top: .55rem;
    border-top: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
}

.species-keep-toggle,
.species-keepers-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    margin: 0;
    padding: .45rem .65rem;
    border-radius: var(--site-box-radius, 4px);
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--text-color);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.species-keep-toggle:hover,
.species-keepers-open:hover:not(:disabled),
.species-keep-toggle:focus-visible,
.species-keepers-open:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
    color: inherit;
    outline: none;
}

.species-keep-toggle.is-active {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 65%, transparent);
    color: var(--primary-color);
}

.species-keepers-open:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.species-keepers-modal__list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    min-height: 2.5rem;
}

.species-keepers-modal__item {
    max-width: 100%;
}

.species-keepers-modal__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
}

.species-keepers-modal__page {
    font-size: .8rem;
    font-weight: 600;
    min-width: 3.5rem;
    text-align: center;
}

/* Profil: beslediği türler ızgarası */
.profile-kept-species-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .85rem;
    padding: .85rem 1rem 1rem;
}