/* ============================================================
   YBS Kategori Hub Şablonu — sıfırdan özgün, Tailwind'den BAĞIMSIZ
   Marka: lacivert #0f2a4f + altın #c9a227 + sıcak bej #f6f3ec
   Responsive: ≥1024 iki sütun (70/30), <1024 tek sütun (sidebar altta)
   Türkçe karakterler zorunlu (proje kuralı).
   ============================================================ */

:root {
    --ybs-cat-primary:    #0f2a4f;
    --ybs-cat-primary-2:  #1a3a6a;
    --ybs-cat-gold:       #c9a227;
    --ybs-cat-gold-dark:  #a8881e;
    --ybs-cat-gold-soft:  rgba(201, 162, 39, .12);
    --ybs-cat-ink:        #0b1626;
    --ybs-cat-ink-2:      #2c3e50;
    --ybs-cat-muted:      #6b7a8a;
    --ybs-cat-bg:         #ffffff;
    --ybs-cat-bg-soft:    #f6f3ec;
    --ybs-cat-bg-warm:    #faf7f1;
    --ybs-cat-border:     #e8e4db;
    --ybs-cat-shadow-sm:  0 1px 2px rgba(15, 42, 79, .06), 0 2px 6px rgba(15, 42, 79, .04);
    --ybs-cat-shadow-md:  0 4px 14px rgba(15, 42, 79, .08), 0 10px 24px rgba(15, 42, 79, .06);
    --ybs-cat-shadow-lg:  0 12px 32px rgba(15, 42, 79, .12), 0 24px 60px rgba(15, 42, 79, .08);
    --ybs-cat-radius:     14px;
    --ybs-cat-radius-lg:  20px;
}

.ybs-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ============================================================
   YERLEŞİM — İki sütunlu grid
   ============================================================ */
.ybs-category-hub {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.ybs-category-hub__heading {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 700;
    color: var(--ybs-cat-primary);
    margin: 0 0 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--ybs-cat-gold);
    line-height: 1.3;
}

.ybs-category-hub__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .ybs-category-hub {
        padding: 2rem 1.5rem 5rem;
    }
    .ybs-category-hub__grid {
        grid-template-columns: minmax(0, 70fr) minmax(280px, 30fr);
        gap: 2.5rem;
    }
}

.ybs-category-hub__main { min-width: 0; }

.ybs-category-hub__sidebar { min-width: 0; }

@media (min-width: 1024px) {
    /* Sticky sidebar — UZUN olabilir, kendi içinde scroll YOK.
       Sayfa aşağı kaydıkça sidebar `top: 96px` referansıyla takip eder;
       sidebar içerik bittiğinde normal flow'a düşer. Sol içerik uzunsa sorun yok. */
    .ybs-category-hub__sidebar {
        position: sticky;
        top: 96px;
        align-self: start;
    }
}

.ybs-empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ybs-cat-muted);
}

/* ============================================================
   İÇERİK GRİDİ — 3x3 (desktop), 2 (tablet), 1 (mobile)
   align-items: start → her satır kart bağımsız yükseklik alabilir
   (Devamını Oku açıldığında diğer kartlar etkilenmez)
   ============================================================ */
.ybs-cat-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 640px) {
    .ybs-cat-cards { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (min-width: 1024px) {
    .ybs-cat-cards { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

/* ============================================================
   İÇERİK KARTI — grid varyantı
   Görsel sağlamlaştırma: sabit aspect-ratio + object-fit cover
   + object-position center 35% (yüz seviyesi vurgu, alt-üst kaçış minimum)
   ============================================================ */
.ybs-content-card {
    display: flex;
    flex-direction: column;
    background: var(--ybs-cat-bg);
    border: 1px solid var(--ybs-cat-border);
    border-radius: var(--ybs-cat-radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    box-shadow: var(--ybs-cat-shadow-sm);
    height: 100%;
}

.ybs-content-card:hover,
.ybs-content-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--ybs-cat-shadow-md);
    border-color: rgba(201, 162, 39, .35);
}

/* GÖRSEL ALANI — sabit oran, ortalı, fallback gradient */
.ybs-content-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--ybs-cat-bg-soft), var(--ybs-cat-border));
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.ybs-content-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 -40px 60px -30px rgba(15, 42, 79, .12);
    pointer-events: none;
    z-index: 2;
}

/* KESİN OVERLAP — position absolute ile img container'ı tamamen doldurur.
   WordPress featured image'lerde üst kısımda watermark/wash bandı sık görülür.
   Görsel doğal 16:9 ise object-fit:cover hiç kırpmaz — bu yüzden transform: scale
   ile ZORLA zoom yaparak üst banding alanını container dışına ittir. */
.ybs-content-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    /* 2026-05-25 patron fix: önceki translateY(3%) görseli 3% AŞAĞI itiyordu →
       üst kenarda 3% boş alan açılıyordu. Object-position center 35% görsel üst
       portresine vurgu (yüz seviyesi). Transform sadece scale, translate YOK. */
    object-position: center 35%;
    transform: scale(1.08);
    transform-origin: center center;
    transition: transform .45s ease;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    z-index: 1;
}

.ybs-content-card:hover .ybs-content-card__media img { transform: scale(1.14); }

.ybs-content-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.125rem 1.25rem 1.25rem;
    gap: .75rem;
    min-width: 0;
}

.ybs-content-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ybs-cat-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ybs-content-card__title a { color: inherit; text-decoration: none; }
.ybs-content-card__title a:hover { color: var(--ybs-cat-primary); }

/* DESC + Devamını Oku Akordeon */
.ybs-content-card__desc { margin: 0; }
.ybs-content-card__desc-short,
.ybs-content-card__desc-full p {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ybs-cat-ink-2);
    margin: 0;
}
.ybs-content-card__desc-full {
    animation: ybsFadeIn .25s ease-out;
}
@keyframes ybsFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ybs-content-card__desc-toggle {
    margin-top: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ybs-cat-gold-dark);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color .2s ease;
}
.ybs-content-card__desc-toggle:hover { color: var(--ybs-cat-primary); }
.ybs-content-card__desc-toggle svg { transition: transform .25s ease; }
.ybs-content-card__desc.is-expanded .ybs-content-card__desc-toggle svg { transform: rotate(180deg); }

/* META */
.ybs-content-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    font-size: .8125rem;
    color: var(--ybs-cat-muted);
    margin-top: auto;
    padding-top: .25rem;
}

.ybs-content-card__author {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--ybs-cat-ink-2);
    font-weight: 500;
}

.ybs-content-card__author-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    /* Portre görsellerinde yüz üst kısımda — center top yerine 18% (yüz seviyesi) */
    object-position: center 18%;
    border: 2px solid var(--ybs-cat-gold);
    background: var(--ybs-cat-bg-soft);
    flex-shrink: 0;
    box-shadow: 0 2px 6px -2px rgba(15, 42, 79, .25);
}

.ybs-content-card__author-initial {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ybs-cat-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.ybs-content-card__author-name { font-size: .8125rem; }

.ybs-content-card__read-time,
.ybs-content-card__date {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
}

/* CTA Butonları */
.ybs-content-card__actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .25rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ybs-cat-border);
}

.ybs-content-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .875rem;
    font-size: .8125rem;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
    flex: 1 1 auto;
    justify-content: center;
    min-height: 36px;
}

/* 2026-05-25 PATRON: "Makaleyi Oku" / "Devamını Oku" zenginleştirilmiş gradient + ikon
   parlama efekti — makale slide kartlarında premium hissi (hub paritesi). */
.ybs-content-card__cta--primary {
    background: linear-gradient(135deg, var(--ybs-cat-primary, #0d1b3d) 0%, #1e3a8a 100%);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 4px 12px -4px rgba(13, 27, 61, 0.35);
    letter-spacing: 0.015em;
}
.ybs-content-card__cta--primary svg { transition: transform .25s ease; }
.ybs-content-card__cta--primary:hover {
    background: linear-gradient(135deg, #1e3a8a 0%, var(--ybs-cat-gold-dark, #b8893d) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(184, 137, 61, 0.45);
}
.ybs-content-card__cta--primary:hover svg { transform: translateX(3px); }

.ybs-content-card__cta--secondary {
    background: #ffffff;
    color: var(--ybs-cat-gold-dark, #b8893d);
    border: 1.5px solid var(--ybs-cat-gold, #d5a85e);
    box-shadow: 0 2px 6px -2px rgba(184, 137, 61, 0.18);
}
.ybs-content-card__cta--secondary:hover {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff;
    border-color: #128c7e;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(18, 140, 126, 0.50);
}

/* SIDEBAR MINI VARYANT */
.ybs-content-card--sidebar-mini {
    border: 1px solid var(--ybs-cat-border);
    box-shadow: none;
    height: auto;
}
.ybs-content-card__mini-link {
    display: flex;
    align-items: stretch;
    gap: .75rem;
    padding: .625rem;
    text-decoration: none;
    color: inherit;
}
.ybs-content-card__mini-media {
    flex: 0 0 64px;
    width: 64px; height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ybs-cat-bg-soft);
}
.ybs-content-card__mini-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
.ybs-content-card__mini-title {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ybs-cat-ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   KART İÇİ TOC AKORDEONU
   ============================================================ */
.ybs-card-toc {
    margin: .25rem 0;
    border: 1px solid var(--ybs-cat-border);
    border-radius: 10px;
    background: var(--ybs-cat-bg-warm);
    overflow: hidden;
}

.ybs-card-toc__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ybs-cat-primary);
    transition: background-color .2s ease;
}
.ybs-card-toc__summary::-webkit-details-marker { display: none; }
.ybs-card-toc__summary:hover { background: var(--ybs-cat-gold-soft); }

.ybs-card-toc__icon { display: inline-flex; color: var(--ybs-cat-gold-dark); }
.ybs-card-toc__label { flex: 1; }
.ybs-card-toc__count {
    color: var(--ybs-cat-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.ybs-card-toc__chevron { display: inline-flex; transition: transform .25s ease; color: var(--ybs-cat-primary); }
.ybs-card-toc[open] .ybs-card-toc__chevron { transform: rotate(180deg); }

.ybs-card-toc__body {
    padding: .25rem .875rem .875rem;
    border-top: 1px dashed var(--ybs-cat-border);
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ybs-cat-gold) transparent;
}
.ybs-card-toc__body::-webkit-scrollbar { width: 4px; }
.ybs-card-toc__body::-webkit-scrollbar-thumb { background: var(--ybs-cat-gold); border-radius: 2px; }

/* TOC numaralı liste */
.ybs-card-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: ybs-toc; }
.ybs-card-toc__item { margin: .125rem 0; }
.ybs-card-toc__item--h3 { padding-left: 1.25rem; }
.ybs-card-toc__item--faq { padding-left: .5rem; }

.ybs-card-toc__link {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem;
    align-items: baseline;
    padding: .3rem .5rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--ybs-cat-ink-2);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 4px;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.ybs-card-toc__link:hover {
    color: var(--ybs-cat-primary);
    border-color: var(--ybs-cat-gold);
    background: var(--ybs-cat-gold-soft);
}
.ybs-card-toc__num {
    color: #fff;
    background: var(--ybs-cat-primary);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: .75rem;
    min-width: 1.875rem;
    height: 1.375rem;
    flex-shrink: 0;
    text-align: center;
    border-radius: 6px;
    padding: 0 .375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
}
.ybs-card-toc__item--h3 .ybs-card-toc__num {
    background: var(--ybs-cat-gold);
    color: var(--ybs-cat-primary);
    font-weight: 700;
    font-size: .6875rem;
}
.ybs-card-toc__item--faq .ybs-card-toc__num {
    background: var(--ybs-cat-gold-dark);
    color: #fff;
}
.ybs-card-toc__text { display: block; min-width: 0; }

.ybs-card-toc__faq {
    margin-top: .625rem;
    padding-top: .625rem;
    border-top: 1px dashed var(--ybs-cat-border);
}
.ybs-card-toc__faq-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ybs-cat-gold-dark);
    margin: 0 0 .375rem;
}

/* ============================================================
   SIDEBAR MODÜLLERİ
   ============================================================ */
.ybs-cat-sidebar { padding: 0; }
.ybs-cat-sidebar__inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ybs-cat-sidebar__module {
    background: var(--ybs-cat-bg);
    border: 1px solid var(--ybs-cat-border);
    border-radius: var(--ybs-cat-radius);
    padding: 1.125rem 1.125rem 1.25rem;
    box-shadow: var(--ybs-cat-shadow-sm);
}

.ybs-cat-sidebar__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ybs-cat-primary);
    margin: 0 0 .875rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--ybs-cat-gold);
    display: flex;
    flex-direction: column;
    gap: .125rem;
}
.ybs-cat-sidebar__title-sub {
    font-size: .75rem;
    font-weight: 500;
    color: var(--ybs-cat-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* ARAMA */
.ybs-cat-search__field {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--ybs-cat-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--ybs-cat-bg-warm);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ybs-cat-search__field:focus-within {
    border-color: var(--ybs-cat-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .2);
}
.ybs-cat-search__field input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: .625rem .875rem;
    font-size: .875rem;
    color: var(--ybs-cat-ink);
    outline: none;
    min-width: 0;
    font-family: inherit;
}
.ybs-cat-search__field input::placeholder { color: var(--ybs-cat-muted); }

.ybs-cat-search__submit {
    background: var(--ybs-cat-primary);
    color: #fff;
    border: 0;
    padding: 0 .875rem;
    cursor: pointer;
    transition: background-color .2s ease;
    display: inline-flex;
    align-items: center;
}
.ybs-cat-search__submit:hover { background: var(--ybs-cat-primary-2); }

.ybs-cat-search__chip {
    margin-top: .625rem;
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .625rem;
    font-size: .75rem;
    line-height: 1.35;
    color: var(--ybs-cat-ink-2);
    background: linear-gradient(135deg, rgba(15, 42, 79, .04), rgba(201, 162, 39, .08));
    border-radius: 8px;
    border: 1px solid rgba(201, 162, 39, .25);
    transition: opacity .25s ease, transform .25s ease;
}
.ybs-cat-search__chip.is-removed {
    opacity: 0;
    transform: scale(.95);
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.ybs-cat-search__chip-icon { color: var(--ybs-cat-gold-dark); flex-shrink: 0; display: inline-flex; }
.ybs-cat-search__chip-text { flex: 1; }
.ybs-cat-search__chip-text strong { color: var(--ybs-cat-primary); font-weight: 700; }
.ybs-cat-search__chip-remove {
    background: transparent;
    border: 0;
    padding: 2px;
    color: var(--ybs-cat-muted);
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    flex-shrink: 0;
}
.ybs-cat-search__chip-remove:hover { color: var(--ybs-cat-ink); background: rgba(0, 0, 0, .05); }

/* KONUYLA İLGİLİ (cross-link) */
.ybs-cat-related__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ybs-cat-related__link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem .75rem;
    text-decoration: none;
    color: inherit;
    background: var(--ybs-cat-bg-warm);
    border: 1px solid var(--ybs-cat-border);
    border-radius: 10px;
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.ybs-cat-related__link:hover {
    background: var(--ybs-cat-gold-soft);
    border-color: var(--ybs-cat-gold);
    transform: translateX(2px);
}
.ybs-cat-related__icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ybs-cat-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ybs-cat-related__body {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
    flex: 1;
}
.ybs-cat-related__label {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ybs-cat-gold-dark);
}
.ybs-cat-related__title {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ybs-cat-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ybs-cat-related__arrow {
    color: var(--ybs-cat-primary);
    flex-shrink: 0;
    opacity: .6;
    transition: opacity .2s ease, transform .2s ease;
}
.ybs-cat-related__link:hover .ybs-cat-related__arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* EN ÇOK OKUNAN */
.ybs-cat-popular__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ybs-cat-popular__link {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .5rem .25rem;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    transition: background-color .2s ease;
}
.ybs-cat-popular__link:hover { background: var(--ybs-cat-bg-warm); }
.ybs-cat-popular__rank {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ybs-cat-gold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    flex-shrink: 0;
    padding-top: 2px;
    min-width: 28px;
}
.ybs-cat-popular__body { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.ybs-cat-popular__title {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ybs-cat-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ybs-cat-popular__meta { font-size: .6875rem; color: var(--ybs-cat-muted); }

/* DİĞER KATEGORİLER */
.ybs-cat-other__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.ybs-cat-other__chip {
    display: inline-flex;
    align-items: center;
    padding: .375rem .75rem;
    background: var(--ybs-cat-bg-soft);
    color: var(--ybs-cat-ink-2);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ybs-cat-other__chip:hover {
    background: var(--ybs-cat-primary);
    color: #fff;
    border-color: var(--ybs-cat-primary);
}

/* EDİTÖR SEÇİMLERİ */
.ybs-cat-editor__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.ybs-cat-editor__link {
    display: flex;
    gap: .625rem;
    text-decoration: none;
    color: inherit;
    padding: .375rem;
    border-radius: 8px;
    transition: background-color .2s ease;
}
.ybs-cat-editor__link:hover { background: var(--ybs-cat-bg-warm); }
.ybs-cat-editor__media {
    flex: 0 0 64px;
    width: 64px; height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ybs-cat-bg-soft);
}
.ybs-cat-editor__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.ybs-cat-editor__title {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ybs-cat-ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   SORU SOR — CANLANDIRILMIŞ TASARIM
   pulse halo + altın gradient + shine sweep
   ============================================================ */
.ybs-cat-sidebar__module--ask {
    background: linear-gradient(155deg, #ffffff 0%, var(--ybs-cat-bg-warm) 100%);
    border: 1.5px solid var(--ybs-cat-gold);
    box-shadow: var(--ybs-cat-shadow-md);
    position: relative;
    overflow: hidden;
}
.ybs-cat-sidebar__module--ask::before {
    /* Üst köşe altın glow */
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(201, 162, 39, .25) 0%, transparent 70%);
    pointer-events: none;
}

.ybs-cat-ask { display: block; }

.ybs-cat-ask__summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .25rem 0;
    position: relative;
}
.ybs-cat-ask__summary::-webkit-details-marker { display: none; }

.ybs-cat-ask__halo {
    position: absolute;
    inset: -8px;
    border-radius: 12px;
    background: radial-gradient(circle at center, rgba(201, 162, 39, .15) 0%, transparent 60%);
    animation: ybsCatAskPulse 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes ybsCatAskPulse {
    0%, 100% { opacity: .5; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.08); }
}

.ybs-cat-ask__icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ybs-cat-primary) 0%, var(--ybs-cat-primary-2) 100%);
    color: var(--ybs-cat-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px -4px rgba(15, 42, 79, .35);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.ybs-cat-ask__heading { display: flex; flex-direction: column; gap: .125rem; min-width: 0; position: relative; z-index: 1; }
.ybs-cat-ask__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ybs-cat-primary);
    line-height: 1.2;
}
.ybs-cat-ask__sub {
    font-size: .75rem;
    color: var(--ybs-cat-muted);
    line-height: 1.3;
}

.ybs-cat-ask__chevron {
    display: inline-flex;
    color: var(--ybs-cat-gold-dark);
    transition: transform .3s ease;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.ybs-cat-ask[open] .ybs-cat-ask__chevron { transform: rotate(180deg); }
.ybs-cat-ask[open] .ybs-cat-ask__halo { animation: none; opacity: 0; }

.ybs-cat-ask__form {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    position: relative;
    z-index: 1;
    animation: ybsFadeIn .35s ease-out;
}
.ybs-cat-ask__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
}
.ybs-cat-ask__field { display: flex; flex-direction: column; gap: .25rem; }
.ybs-cat-ask__label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ybs-cat-ink-2);
}
.ybs-cat-ask__field input,
.ybs-cat-ask__field textarea {
    border: 1.5px solid var(--ybs-cat-border);
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .875rem;
    font-family: inherit;
    color: var(--ybs-cat-ink);
    background: #fff;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ybs-cat-ask__field input:focus,
.ybs-cat-ask__field textarea:focus {
    border-color: var(--ybs-cat-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .25);
}
.ybs-cat-ask__field textarea { resize: vertical; min-height: 80px; }

.ybs-cat-ask__consent {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--ybs-cat-muted);
}
.ybs-cat-ask__consent a { color: var(--ybs-cat-primary); text-decoration: underline; font-weight: 600; }

.ybs-cat-ask__submit {
    position: relative;
    background: linear-gradient(135deg, var(--ybs-cat-gold) 0%, var(--ybs-cat-gold-dark) 100%);
    color: #fff;
    border: 0;
    padding: .75rem 1.25rem;
    font-size: .9375rem;
    font-weight: 700;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    margin-top: .25rem;
    overflow: hidden;
    box-shadow: 0 4px 12px -2px rgba(201, 162, 39, .4);
    font-family: inherit;
}
.ybs-cat-ask__submit:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -4px rgba(201, 162, 39, .55); }
.ybs-cat-ask__submit-text { position: relative; z-index: 2; }
.ybs-cat-ask__submit-shine {
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
    animation: ybsShineSweep 2.8s ease-in-out infinite;
    z-index: 1;
}
@keyframes ybsShineSweep {
    0%   { left: -100%; }
    60%, 100% { left: 110%; }
}
.ybs-cat-ask__note {
    font-size: .6875rem;
    color: var(--ybs-cat-muted);
    margin: 0;
    text-align: center;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.ybs-pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}
.ybs-pagination__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    align-items: center;
}
.ybs-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-width: 40px;
    height: 40px;
    padding: 0 .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ybs-cat-ink-2);
    background: var(--ybs-cat-bg);
    border: 1.5px solid var(--ybs-cat-border);
    border-radius: 10px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ybs-pagination__link:hover {
    background: var(--ybs-cat-primary);
    color: #fff;
    border-color: var(--ybs-cat-primary);
}
.ybs-pagination__link--current {
    background: var(--ybs-cat-primary);
    color: #fff;
    border-color: var(--ybs-cat-primary);
    cursor: default;
}
.ybs-pagination__item--ellipsis span {
    display: inline-flex;
    align-items: center;
    padding: 0 .25rem;
    color: var(--ybs-cat-muted);
    font-weight: 700;
}

/* INFINITE SCROLL STATUS */
.ybs-infinite-status {
    text-align: center;
    padding: 1rem;
    color: var(--ybs-cat-muted);
    font-size: .875rem;
    display: none;
}
.ybs-infinite-status.is-visible { display: block; }
.ybs-infinite-sentinel { height: 1px; width: 100%; }

/* ============================================================
   FRAGMENT URL HEDEF VURGUSU (:target highlight)
   ToC'tan #Fragment_Id ile gelindiğinde hedef heading sarı vurgu alır.
   Site geneli — hem narrative içinde hem yazı detay sayfasında geçerli.
   ============================================================ */
/* Fragment hedef başlık ekranın ortasına yakın gelmeli — viewport ~33%
   (üst boşluk vurgu için, sticky header + nefes) */
:target {
    scroll-margin-top: 30vh;
}
h1:target, h2:target, h3:target, h4:target, h5:target, h6:target,
.faq-question:target, [data-faq-item]:target {
    /* SARI ÇERÇEVE KALICI — animation tükenince fade-out OLMAZ */
    background: linear-gradient(135deg, rgba(201, 162, 39, .28), rgba(201, 162, 39, .14));
    border-left: 5px solid var(--ybs-cat-gold);
    padding: .625rem 1rem;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 2px 6px -2px rgba(201, 162, 39, .35);
    /* Vurgu animasyonu sadece ilk gelişte — sonrasında kalıcı renkler */
    animation: ybsTargetEntry 1.2s ease-out;
}
@keyframes ybsTargetEntry {
    0%   { box-shadow: 0 0 0 8px rgba(201, 162, 39, .45); transform: translateX(-4px); }
    60%  { box-shadow: 0 0 0 3px rgba(201, 162, 39, .25); transform: translateX(0); }
    100% { box-shadow: 0 2px 6px -2px rgba(201, 162, 39, .35); transform: translateX(0); }
}

/* ============================================================
   NARRATIVE (KATEGORİ AÇIKLAMA METNİ)
   ============================================================ */
.ybs-category-hub__narrative {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--ybs-cat-gold);
}
.ybs-category-hub__featured {
    max-width: 880px;
    margin: 0 auto 2rem;
    padding: 0;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.ybs-category-hub__featured img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 828 / 500;
    object-fit: cover;
}
.ybs-category-hub__featured-caption {
    padding: .75rem 1rem;
    background: rgb(var(--color-primary) / .04);
    color: var(--ybs-cat-muted, #4b5563);
    font-size: .875rem;
    font-style: italic;
    text-align: center;
    border-top: 1px solid rgb(var(--color-primary) / .08);
}
.ybs-category-hub__narrative-inner {
    max-width: 880px;
    margin: 0 auto;
    color: var(--ybs-cat-ink);
    font-size: 1rem;
    line-height: 1.75;
}
.ybs-category-hub__narrative-inner h2,
.ybs-category-hub__narrative-inner h3,
.ybs-category-hub__narrative-inner h4 {
    color: var(--ybs-cat-primary);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.75rem 0 .75rem;
}
.ybs-category-hub__narrative-inner h2 { font-size: 1.5rem; }
.ybs-category-hub__narrative-inner h3 { font-size: 1.25rem; }
.ybs-category-hub__narrative-inner h4 { font-size: 1.0625rem; }
.ybs-category-hub__narrative-inner p { margin: 0 0 1rem; text-align: justify; hyphens: auto; }
.ybs-category-hub__narrative-inner ul,
.ybs-category-hub__narrative-inner ol { margin: 0 0 1rem 1.25rem; padding: 0; }
.ybs-category-hub__narrative-inner li { margin-bottom: .375rem; }
.ybs-category-hub__narrative-inner a {
    color: var(--ybs-cat-gold-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.ybs-category-hub__narrative-inner a:hover { color: var(--ybs-cat-primary); }
.ybs-category-hub__narrative-inner table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: .9375rem;
}
.ybs-category-hub__narrative-inner th,
.ybs-category-hub__narrative-inner td {
    border: 1px solid var(--ybs-cat-border);
    padding: .625rem .875rem;
    text-align: left;
    vertical-align: top;
}
.ybs-category-hub__narrative-inner th {
    background: var(--ybs-cat-bg-soft);
    font-weight: 700;
    color: var(--ybs-cat-primary);
}

/* ============================================================
   MOBİL UYUMLULUK
   ============================================================ */
@media (max-width: 639px) {
    .ybs-content-card__title { font-size: 1rem; }
    .ybs-content-card__actions { flex-direction: column; }
    .ybs-content-card__cta { width: 100%; }
    .ybs-pagination__link { min-width: 36px; height: 36px; padding: 0 .5rem; }
    .ybs-category-hub__narrative-inner p { text-align: left; }
}

/* ============================================================
   ERİŞİLEBİLİRLİK
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ybs-content-card,
    .ybs-content-card__media img,
    .ybs-content-card__cta,
    .ybs-card-toc__chevron,
    .ybs-cat-ask__chevron,
    .ybs-cat-ask__halo,
    .ybs-cat-ask__submit-shine,
    .ybs-cat-related__link {
        transition: none !important;
        animation: none !important;
    }
    .ybs-content-card:hover { transform: none; }
    .ybs-content-card:hover .ybs-content-card__media img { transform: none; }
}

.ybs-content-card:focus-within {
    outline: 2px solid var(--ybs-cat-gold);
    outline-offset: 2px;
}

/* ============================================================
   SIDEBAR ORTAK — link list + chip list + paylaş bar
   ============================================================ */
.ybs-cat-sidebar__title-main {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.ybs-cat-sidebar__title-main svg {
    color: var(--ybs-cat-gold);
    flex-shrink: 0;
}

/* Linked list (calculators, petitions, decisions) */
.ybs-cat-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ybs-cat-sidebar__list--linked .ybs-cat-sidebar__list-item {
    border-bottom: 1px dashed var(--ybs-cat-border);
}
.ybs-cat-sidebar__list--linked .ybs-cat-sidebar__list-item:last-child { border-bottom: none; }

.ybs-cat-sidebar__link {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .625rem 0;
    text-decoration: none;
    color: var(--ybs-cat-ink);
    transition: color .2s ease, padding-left .2s ease;
}
.ybs-cat-sidebar__link:hover,
.ybs-cat-sidebar__link:focus-visible {
    color: var(--ybs-cat-primary);
    padding-left: .25rem;
}
.ybs-cat-sidebar__link-title {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
}
.ybs-cat-sidebar__link-meta {
    font-size: .75rem;
    color: var(--ybs-cat-muted);
    font-weight: 500;
    line-height: 1.3;
}

/* Module renk varyantları — hangi panel olduğunu görsel olarak ayırt et */
.ybs-cat-sidebar__module--calculators .ybs-cat-sidebar__title-main svg { color: #0ea5e9; }
.ybs-cat-sidebar__module--petitions   .ybs-cat-sidebar__title-main svg { color: #16a34a; }
.ybs-cat-sidebar__module--decisions   .ybs-cat-sidebar__title-main svg { color: #b45309; }
.ybs-cat-sidebar__module--tags        .ybs-cat-sidebar__title-main svg { color: #7c3aed; }

/* Chip list (tags) */
.ybs-cat-sidebar__chip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}
.ybs-cat-sidebar__chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .625rem;
    background: var(--ybs-cat-bg-soft);
    color: var(--ybs-cat-ink-2);
    border: 1px solid var(--ybs-cat-border);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ybs-cat-sidebar__chip:hover,
.ybs-cat-sidebar__chip:focus-visible {
    background: var(--ybs-cat-primary);
    color: #fff;
    border-color: var(--ybs-cat-primary);
}
/* D35 (2026-05-25): Uzun etiketler (örn "Soguk Cuzdandaki Cold Wallet Paraya El Konulabilir")
   sidebar genişliğini aşmasın — wrap aktif, ama tek kelime taşarsa anywhere kırma. */
.ybs-cat-sidebar__chip-text { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.ybs-cat-sidebar__chip { max-width: 100%; }
.ybs-cat-sidebar__chip-count {
    background: rgba(0, 0, 0, .08);
    border-radius: 999px;
    padding: 0 .375rem;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.5;
}
.ybs-cat-sidebar__chip:hover .ybs-cat-sidebar__chip-count {
    background: rgba(255, 255, 255, .25);
}

/* SAYFA PAYLAŞ — sidebar EN ÜST (CTA üstü) */
.ybs-cat-sidebar__module--share {
    padding: 1rem 1rem;
}
.ybs-cat-share__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px dashed var(--ybs-cat-border);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--ybs-cat-primary);
}
.ybs-cat-share__head svg { color: var(--ybs-cat-gold); flex-shrink: 0; }

.ybs-cat-share__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    justify-content: space-between;
}
.ybs-cat-share__btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--ybs-cat-primary);
    border: 1.5px solid var(--ybs-cat-border);
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(15, 42, 79, .06);
}
.ybs-cat-share__btn:hover,
.ybs-cat-share__btn:focus-visible { transform: translateY(-2px); }
.ybs-cat-share__btn--copy:hover    { background: var(--ybs-cat-gold);  color: var(--ybs-cat-primary); border-color: var(--ybs-cat-gold); }
.ybs-cat-share__btn--copy.is-copied{ background: #16a34a; color: #fff; border-color: #16a34a; }
.ybs-cat-share__btn--wa:hover      { background: #25d366; color: #fff; border-color: #25d366; }
.ybs-cat-share__btn--fb:hover      { background: #1877f2; color: #fff; border-color: #1877f2; }
.ybs-cat-share__btn--tw:hover      { background: #0f1419; color: #fff; border-color: #0f1419; }
.ybs-cat-share__btn--ig:hover      {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff; border-color: #dc2743;
}
.ybs-cat-share__btn--mail:hover    { background: #d97706; color: #fff; border-color: #d97706; }

@media (prefers-reduced-motion: reduce) {
    .ybs-cat-share__btn { transition: none !important; }
    .ybs-cat-share__btn:hover { transform: none !important; }
    .ybs-cat-sidebar__link { transition: none !important; }
    .ybs-cat-sidebar__link:hover { padding-left: 0; }
}

/* ============================================================
   SİDEBAR CTA — Ara | WhatsApp | İletişim Sayfası
   Site geneli marka token'larından (primary lacivert, gold altın) beslenir.
   WhatsApp brand color (#25D366) inline tanım — site geneli ortak.
   ============================================================ */
.ybs-cat-cta {
    background: linear-gradient(160deg, var(--ybs-cat-primary) 0%, var(--ybs-cat-primary-2) 100%);
    border-radius: 14px;
    padding: 1.125rem 1rem 1rem;
    box-shadow: var(--ybs-cat-shadow-md);
    border: 1px solid rgba(201, 162, 39, .35);
    margin-bottom: 1.25rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.ybs-cat-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px 220px at 100% 0%, rgba(201, 162, 39, .22), transparent 60%);
    pointer-events: none;
}

.ybs-cat-cta__head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin-bottom: .875rem;
    padding-bottom: .75rem;
    border-bottom: 1px dashed rgba(201, 162, 39, .35);
}
.ybs-cat-cta__head-title {
    font-size: .9375rem;
    font-weight: 800;
    color: var(--ybs-cat-gold);
    letter-spacing: .2px;
    text-transform: uppercase;
}
.ybs-cat-cta__head-sub {
    font-size: .75rem;
    color: rgba(255, 255, 255, .78);
    font-weight: 500;
}

.ybs-cat-cta__btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .75rem .875rem;
    margin-bottom: .5rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.ybs-cat-cta__btn:last-child { margin-bottom: 0; }
.ybs-cat-cta__btn:hover,
.ybs-cat-cta__btn:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(201, 162, 39, .55);
    transform: translateY(-1px);
}

.ybs-cat-cta__btn-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(201, 162, 39, .18);
    color: var(--ybs-cat-gold);
    border: 1px solid rgba(201, 162, 39, .35);
}
.ybs-cat-cta__btn-text {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
    flex: 1;
}
.ybs-cat-cta__btn-label {
    font-size: .875rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.ybs-cat-cta__btn-meta {
    font-size: .6875rem;
    color: rgba(255, 255, 255, .68);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* WhatsApp marka — yeşil vurgu */
.ybs-cat-cta__btn--wa .ybs-cat-cta__btn-icon {
    background: rgba(37, 211, 102, .22);
    color: #25d366;
    border-color: rgba(37, 211, 102, .55);
}
.ybs-cat-cta__btn--wa:hover .ybs-cat-cta__btn-icon {
    background: #25d366;
    color: #fff;
}

/* Ara — altın vurgu (zaten varsayılan, hover'da pekiştir) */
.ybs-cat-cta__btn--call:hover .ybs-cat-cta__btn-icon {
    background: var(--ybs-cat-gold);
    color: var(--ybs-cat-primary);
}

/* İletişim sayfası — açık altın vurgu */
.ybs-cat-cta__btn--contact:hover .ybs-cat-cta__btn-icon {
    background: var(--ybs-cat-gold);
    color: var(--ybs-cat-primary);
}

@media (max-width: 1024px) {
    /* Sidebar tek-kolon mobile düzende — CTA üstte kalır */
    .ybs-cat-cta { margin-bottom: 1rem; }
}
@media (max-width: 480px) {
    .ybs-cat-cta__btn-meta { font-size: .625rem; }
    .ybs-cat-cta__btn-icon { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .ybs-cat-cta__btn { transition: none !important; }
    .ybs-cat-cta__btn:hover { transform: none !important; }
}

/* ============================================================
   SSS SIDEBAR — İlgili Hizmet Sayfası Kartı (örümcek ağı düğümü)
   2026-05-23 patron istegi: SSS detay sayfasında "konuyla ilgili
   hizmet sayfası" prominent kart olarak ust kisimda yer alir.
   ============================================================ */
.ybs-cat-sidebar__module--service {
    background: linear-gradient(135deg, var(--ybs-cat-primary) 0%, #1a2840 100%);
    border-color: var(--ybs-cat-gold);
    color: #fff;
}
.ybs-cat-sidebar__module--service .ybs-cat-sidebar__title {
    color: var(--ybs-cat-gold);
}
.ybs-cat-sidebar__service-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .875rem 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
    color: #fff;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.ybs-cat-sidebar__service-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--ybs-cat-gold);
    transform: translateX(2px);
}
.ybs-cat-sidebar__service-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    color: #fff;
}
.ybs-cat-sidebar__service-desc {
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ybs-cat-sidebar__service-cta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .25rem;
    color: var(--ybs-cat-gold);
    font-weight: 600;
    font-size: .8125rem;
}

/* ============================================================
   CALCULATOR DETAY SIDEBAR — Hizmet kartı + Makale hub linki
   (2026-05-23 patron talimat: sidebar cross-link enjeksiyonu)
   ============================================================ */
.ybs-cat-sidebar__module--service .ybs-cat-sidebar__service-card {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .875rem 1rem;
    border: 1px solid var(--ybs-cat-border, #E0D5C5);
    border-left: 4px solid var(--ybs-cat-gold, #C9A227);
    border-radius: 8px;
    background: linear-gradient(135deg, #FAFAF8 0%, #F8F5F0 100%);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.ybs-cat-sidebar__module--service .ybs-cat-sidebar__service-card:hover {
    border-left-color: #1B2A4A;
    box-shadow: 0 4px 14px -6px rgba(74, 55, 40, .25);
    transform: translateY(-1px);
}
.ybs-cat-sidebar__module--service .ybs-cat-sidebar__service-name {
    font-size: .95rem;
    font-weight: 700;
    color: #1B2A4A;
    line-height: 1.35;
}
.ybs-cat-sidebar__module--service .ybs-cat-sidebar__service-desc {
    font-size: .8125rem;
    color: #4A3728;
    line-height: 1.5;
    opacity: .88;
}
.ybs-cat-sidebar__module--service .ybs-cat-sidebar__service-cta {
    margin-top: .25rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ybs-cat-gold, #C9A227);
}

.ybs-cat-sidebar__module--cat-hub .ybs-cat-sidebar__cat-hub-link {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem .9rem;
    border: 1px dashed var(--ybs-cat-border, #E0D5C5);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-style .2s, border-color .2s, background .2s;
}
.ybs-cat-sidebar__module--cat-hub .ybs-cat-sidebar__cat-hub-link:hover {
    border-style: solid;
    border-color: var(--ybs-cat-gold, #C9A227);
    background: #FFF8F0;
}
.ybs-cat-sidebar__module--cat-hub .ybs-cat-sidebar__link-title {
    font-size: .9rem;
    font-weight: 700;
    color: #1B2A4A;
}
.ybs-cat-sidebar__module--cat-hub .ybs-cat-sidebar__link-meta {
    font-size: .78rem;
    color: var(--ybs-cat-gold, #C9A227);
    font-weight: 600;
}

/* ============================================================
 * SON KATMAN — ybs-content-card defensive !important override 2026-05-25
 * ybs-cards.css ile aynı defensive pattern — patron raporlu üst boşluk için.
 * ============================================================ */
.ybs-content-card__media{
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    position: relative !important;
}
.ybs-content-card__media > img,
.ybs-content-card .ybs-content-card__media img{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center 35% !important;
    vertical-align: top !important;
    display: block !important;
    max-width: none !important;
    max-height: none !important;
}
article.ybs-content-card{
    margin: 0 !important;
}