/* ==========================================================================
   KeyDesignArt — Arama
   Üstte tek ve büyük arama alanı, altında duruma göre üç yüz: henüz aranmadı
   (öneriler), sonuç var (kart listesi), sonuç yok (ne denenebilir).
   Sonuç kartı sitenin kart dilini kullanır: çerçeve + 6px + hover'da büyüyen
   sarı çubuk + köşe ok rozeti.
   ========================================================================== */

@layer sections {

    .kda-search {
        display: grid;
        gap: var(--kda-space-8);
    }

    /* Arama alanı — sayfanın tek kahramanı
       ---------------------------------------------------------------------- */
    .kda-search__form {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: var(--kda-space-3);
        width: min(100%, 46rem);
        margin: 0;
    }

    .kda-search__field {
        position: relative;
        flex: 1 1 16rem;
        min-width: 0;
    }

    .kda-search__field::before {
        content: "";
        position: absolute;
        left: var(--kda-space-4);
        top: 50%;
        z-index: 1;
        width: 1.15rem;
        height: 1.15rem;
        transform: translateY(-50%);
        background: var(--kda-ink-faint);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.4 15.4 4.1 4.1'/%3E%3C/svg%3E") center / contain no-repeat;
        pointer-events: none;
        transition: background-color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-search__field:focus-within::before {
        background: var(--kda-accent);
    }

    .kda-search__input {
        width: 100%;
        height: 3.25rem;
        padding: 0 var(--kda-space-4) 0 3.1rem;
        border: 1px solid var(--kda-line-strong);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        color: var(--kda-ink);
        font-family: inherit;
        font-size: var(--kda-text-base);
    }

    .kda-search__input::placeholder {
        color: var(--kda-ink-faint);
    }

    /* Kenarlık odakta değişmez; iş odak halkasında. İkisi birden vurgu rengine
       çevrilirse çift çerçeve görünüyor (form alanlarındaki kural). */
    .kda-search__input:focus-visible {
        outline: 2px solid var(--kda-accent-bright);
        outline-offset: 0;
    }

    .kda-search__form .kda-btn {
        height: 3.25rem;
        padding-inline: var(--kda-space-6);
    }

    /* Durum satırı
       ---------------------------------------------------------------------- */
    .kda-search__status {
        max-width: none;
        margin: 0;
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
    }

    .kda-search__status strong {
        color: var(--kda-ink);
        font-weight: var(--kda-weight-semibold);
    }

    /* Sonuç listesi
       ---------------------------------------------------------------------- */
    .kda-search__results {
        display: grid;
        gap: var(--kda-space-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kda-search__hit {
        position: relative;
        isolation: isolate;
        max-width: none;
        overflow: hidden;
        padding: var(--kda-space-5) var(--kda-space-6);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        transition: border-color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-search__hit:hover {
        border-color: var(--kda-line-strong);
    }

    .kda-search__hit:has(a:focus-visible) {
        border-color: var(--kda-accent);
    }

    .kda-search__hit::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 2.25rem;
        height: 2px;
        background: var(--kda-accent);
        box-shadow: 0 0 14px var(--kda-accent-glow);
        pointer-events: none;
        transition: width var(--kda-dur-slow) var(--kda-ease);
    }

    .kda-search__hit:hover::before,
    .kda-search__hit:has(a:focus-visible)::before {
        width: 100%;
    }

    .kda-search__kind {
        display: inline-flex;
        align-items: center;
        margin: 0 0 var(--kda-space-3);
        padding: 0.22rem 0.5rem;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-glass);
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-2xs);
        font-weight: var(--kda-weight-bold);
        letter-spacing: var(--kda-tracking-wider);
        text-transform: uppercase;
    }

    .kda-search__title {
        max-width: none;
        margin: 0;
        color: var(--kda-ink);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-xl);
        font-weight: var(--kda-weight-medium);
        line-height: var(--kda-leading-snug);
        letter-spacing: 0.012em;
        text-transform: uppercase;
    }

    .kda-search__title a {
        color: inherit;
        text-decoration: none;
    }

    /* Satırın konumlandırılmış tek atası kartın kendisi; bağlantı başlıkta
       durur ve karta yayılır, başlık hiyerarşisi bozulmaz. */
    .kda-search__title a::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .kda-search__hit:hover .kda-search__title {
        color: var(--kda-accent);
    }

    .kda-search__summary {
        max-width: var(--kda-measure);
        margin: var(--kda-space-3) 0 0;
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-md);
        font-weight: var(--kda-weight-light);
        line-height: var(--kda-leading-normal);
    }

    /* Eşleşen terim — vurgu rengiyle boyanmaz, sarı zemin metni okunmaz yapardı.
       Altı çizili ve bir tık parlak: göz yakalar, satır akıcı kalır. */
    .kda-search mark {
        padding: 0 0.1em;
        border-radius: 2px;
        background: var(--kda-accent-ghost);
        box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--kda-accent) 55%, transparent);
        color: var(--kda-ink);
        font-weight: var(--kda-weight-medium);
    }

    /* Öneri çipleri — henüz aranmadığında ve sonuç bulunamadığında
       ---------------------------------------------------------------------- */
    .kda-search__panel {
        display: grid;
        gap: var(--kda-space-4);
        justify-items: start;
        padding: var(--kda-space-6);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
    }

    .kda-search__panel-title {
        margin: 0;
        color: var(--kda-ink);
        font-size: var(--kda-text-lg);
    }

    .kda-search__chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--kda-space-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kda-search__chips li {
        max-width: none;
    }

    .kda-search__chips a {
        display: inline-flex;
        align-items: center;
        padding: 0.4rem 0.8rem;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-glass);
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-md);
        text-decoration: none;
        transition: border-color var(--kda-dur-base) var(--kda-ease),
                    color var(--kda-dur-base) var(--kda-ease),
                    background-color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-search__chips a:hover {
        border-color: var(--kda-accent);
        background: var(--kda-accent-ghost);
        color: var(--kda-ink);
    }

    .kda-search__tips {
        display: grid;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kda-search__tips li {
        display: flex;
        align-items: baseline;
        gap: var(--kda-space-3);
        max-width: var(--kda-measure);
        padding-block: var(--kda-space-3);
        box-shadow: 0 -1px 0 var(--kda-line);
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-md);
        font-weight: var(--kda-weight-light);
        line-height: var(--kda-leading-normal);
    }

    .kda-search__tips li::before {
        content: "";
        flex: 0 0 auto;
        width: 0.75rem;
        height: 1px;
        background: var(--kda-accent);
    }

    .kda-search .kda-pagination {
        margin-top: var(--kda-space-6);
    }

    @media (min-width: 64rem) {
        .kda-search__hit {
            padding: var(--kda-space-6) var(--kda-space-7);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .kda-search__hit,
        .kda-search__hit::before,
        .kda-search__chips a,
        .kda-search__field::before {
            transition: none;
        }
    }

}