/* knowledge-base.css — Bilgi Merkezi bağlantı bloğu (.kb)
 *
 * Yalnızca anasayfadaki "Pompa Seçim Rehberleri" bölümünde kullanılır; bu yüzden
 * components.css'te değil, kendi dosyasında ve KOŞULLU yüklenir (inc/enqueue.php
 * → is_front_page). Blok gövdesi inc/template-tags.php → atlas_kb_links().
 *
 * Kendi zemini, çerçevesi ya da rengi YOKTUR: butonlar sitenin imza tasarımı
 * btn-hero--light ve btn-link'tir, hover davranışı tamamen onlardan gelir.
 * Buradaki kurallar sadece yerleşim + .prose'un bağlantı stilini geri alma.
 */

.kb { margin-top: var(--space-8); }

.kb__grid {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Alt aksiyonlar: iki btn-link, sola yaslı */
.kb__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-5);
}

/* Uzun rehber başlıkları için: .btn'in nowrap'i kırılır, buton hücreyi doldurur.
   btn-hero'nun kendi renk/hover kuralları DEĞİŞTİRİLMEZ. */
.kb__btn {
    display: flex;
    width: 100%;
    height: 100%;
    white-space: normal;
    text-align: left;
    justify-content: flex-start;
    padding-block: var(--space-1);
    line-height: 1.35;
}

/* .prose a paragraf bağlantılarını mavi + altı çizili yapıyor; bu butonlar
   paragraf bağlantısı değil. btn-hero--light'ın KENDİ rengine geri döndürülür,
   hover rengi yine btn-hero'nun --btn-fill-ink değişkeninden gelir. */
.prose .kb__btn { color: var(--color-navy); text-decoration: none; }
.prose .kb__btn:hover,
.prose .kb__btn:focus-visible { color: var(--btn-fill-ink); }

/* Alt aksiyonlardaki btn-link'ler de paragraf bağlantısı değil */
.prose .kb__actions .btn-link { text-decoration: none; color: var(--color-navy); }
.prose .kb__actions .btn-link:hover,
.prose .kb__actions .btn-link:focus-visible { color: var(--color-primary); }

@media (max-width: 720px) {
    .kb__grid { grid-template-columns: 1fr; }
}