/* ==================== TROPE'LAR ====================
   Çipler (detay, filtre çubuğu), kitap formundaki seçici, /trope/{slug} sayfası
   ve /profilim/tropeler yönetimi. Renkler marka değişkenlerinden — koyu/açık
   temaya kendiliğinden uyar. */

/* ---------- Breadcrumb ---------- */
/* Bootstrap'in aktif öğe grisi (#6c757d) koyu zeminde okunmuyor; temanın soluk metin rengi. */
.trope-breadcrumb .breadcrumb-item.active,
.trope-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--brand-muted);
}

/* ---------- Çip (bağlantı) ---------- */
.trope-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--brand-border);
    background: var(--surface-glass, rgba(255,255,255,.05));
    color: var(--brand-text);
    font-size: .875rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

a.trope-chip:hover,
a.trope-chip:focus-visible {
    border-color: var(--brand-primary);
    color: var(--brand-text);
    background: rgba(var(--brand-primary-rgb), .15);
}

.trope-chip.is-active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.trope-chip .trope-count {
    font-size: .75rem;
    opacity: .75;
}

.trope-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ---------- Trope sayfası filtre çubuğu ---------- */
.trope-filter {
    margin-bottom: 1.5rem;
}

.trope-filter-title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand-muted);
    margin-bottom: .5rem;
}

/* ---------- Kitap formundaki seçici ---------- */
.trope-picker {
    border: 1px solid var(--brand-border);
    border-radius: 14px;
    padding: 1rem;
    background: var(--surface-glass, rgba(255,255,255,.03));
}

.trope-picker legend {
    float: none;
    width: auto;
    font-size: 1rem;
    font-weight: 600;
    padding: 0 .35rem;
    margin-bottom: 0;
}

.trope-picker-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

.trope-picker-toolbar .form-control {
    flex: 1 1 220px;
    max-width: 360px;
}

.trope-picker-count {
    font-size: .875rem;
    color: var(--brand-muted);
}

.trope-picker-count.is-full {
    color: var(--brand-primary);
    font-weight: 600;
}

.trope-group + .trope-group {
    margin-top: .9rem;
}

.trope-group-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand-muted);
    margin-bottom: .4rem;
}

.trope-options {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Onay kutusu + etiket: kutu görünmez ama erişilebilir (klavye/okuyucu),
   etiket çip görünümünde. */
.trope-option {
    position: relative;
}

.trope-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.trope-option label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    font-size: .875rem;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.trope-option label::before {
    content: "+";
    font-weight: 700;
    opacity: .6;
}

.trope-option input:checked + label {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.trope-option input:checked + label::before {
    content: "✓";
    opacity: 1;
}

.trope-option input:focus-visible + label {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.trope-option input:disabled + label {
    opacity: .45;
    cursor: not-allowed;
}

.trope-option .trope-inactive-note {
    font-size: .75rem;
    opacity: .8;
}

.trope-option[hidden],
.trope-group[hidden] {
    display: none !important;
}

/* ---------- /trope/{slug} kitap ızgarası ---------- */
.trope-books {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
}

.trope-book {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--brand-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--brand-card);
    color: var(--brand-text);
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease;
}

.trope-book:hover,
.trope-book:focus-visible {
    border-color: var(--brand-primary);
    color: var(--brand-text);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

/* Klavye odağı: görünür çerçeve (marka renginin metin tonu, iki temada AA). */
.trope-book:focus-visible {
    outline: 3px solid var(--gw-primary-text, #F0A3A3);
    outline-offset: 2px;
}

.trope-book img {
    width: 100%;
    height: auto; /* height özniteliği aspect-ratio'yu ezmesin */
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: var(--surface-glass, rgba(255,255,255,.05));
}

.trope-book-body {
    padding: .65rem .75rem .8rem;
}

.trope-book-title {
    font-weight: 600;
    font-size: .95rem;
    margin: 0 0 .35rem;
    overflow-wrap: anywhere;
}

.trope-book-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    font-size: .8rem;
    color: var(--brand-muted);
}

/* ---------- /profilim/tropeler ---------- */
.trope-admin-card {
    background: var(--brand-card);
    border: 1px solid var(--brand-border);
    border-radius: 16px;
    padding: 1.25rem;
}

.trope-admin-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--brand-border);
    scroll-margin-top: 90px;
}

.trope-admin-row:last-child {
    border-bottom: 0;
}

.trope-admin-row:target {
    background: rgba(var(--brand-primary-rgb), .08);
}

.trope-admin-name {
    flex: 1 1 200px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.trope-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.trope-admin-actions form {
    display: inline;
}

.trope-admin-row.is-inactive .trope-admin-name {
    opacity: .6;
}

.trope-admin-edit {
    flex: 1 1 100%;
}

/* Yönetim sayfasındaki inputlar (profil sayfasındaki koyu-sabit stil yerine tema rengi) */
.trope-admin-card .form-control {
    background-color: var(--brand-card);
    color: var(--brand-text);
    border-color: var(--brand-border);
}

/* ---------- Mobil / dokunmatik: 44px dokunma hedefi ---------- */
@media (max-width: 767.98px), (max-width: 991.98px) and (pointer: coarse) {
    .trope-chip,
    .trope-option label {
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .trope-picker-toolbar .form-control {
        max-width: none;
        flex-basis: 100%;
    }

    .trope-books {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    .trope-admin-actions {
        flex: 1 1 100%;
    }

    .trope-admin-actions .btn {
        min-height: 44px;
    }

    .trope-admin-name a,
    .trope-admin-edit summary,
    .trope-breadcrumb a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}