/* ============================================================
   site-search.css — navbar anında arama + arama sonuç sayfası (P027)

   🔴 RTL KURALI (rtl-direction-integrity, BLOCKING):
   Bu dosyada FİZİKSEL yön özelliği KULLANILMAZ.
   Yasak: left / right / margin-left / margin-right / padding-left /
          padding-right / text-align: left|right / border-left|right
   Kullanılan: inset-inline-start/end, margin-inline-*, padding-inline-*,
               text-align: start|end, border-inline-*
   Gerekçe: 2026-08-24'te `body { text-align: left }` kalıtımla tüm AR
   ağacına inmiş ve 41 yazı aylarca sola dayalı yayınlanmıştı.
   ============================================================ */

/* ── navbar bileşeni ──────────────────────────────────────── */

.site-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.site-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;   /* dokunma hedefi ≥44px */
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.site-search__toggle:hover,
.site-search__toggle:focus-visible {
    background-color: rgba(127, 127, 127, .18);
}

.site-search__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.site-search__panel {
    position: absolute;
    inset-block-start: calc(100% + .5rem);
    /* Panel, tetikleyicinin bulunduğu kenardan hizalanır; RTL'de kendiliğinden döner. */
    inset-inline-end: 0;
    z-index: 1200;
    inline-size: min(420px, calc(100vw - 2rem));
    padding: .75rem;
    border-radius: 14px;
    background: var(--search-panel-bg, #fff);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
    border: 1px solid rgba(127, 127, 127, .22);
}

/* 🔴 RTL'de panel ekrandan TAŞIYORDU (2026-08-30, canlı DOM'da ölçüldü: 1785px'te
   131px sağa taşma). Kök neden ölçülerek bulundu, tahminle değil:

   `glass-layout.css`: `[dir=rtl] .aurora-navbar-inner { flex-direction: row-reverse }`
   → RTL'in eksen çevirmesiyle `row-reverse` BİRBİRİNİ GÖTÜRÜYOR, yani ≥1440px'te
   navbar görsel sırası iki yönde de AYNI: logo solda, kontroller (arama düğmesi
   dahil) sağda. Ama `inset-inline-end: 0` RTL'de `left`e çözülüyor ve panel
   düğmenin SOL kenarından başlayıp 420px sağa büyüyor.

   Ayrıca `.aurora-nav-links` YALNIZ ≥1440px'te görünür (`max-width:1439.98px`
   hamburger moduna geçiriyor) ve o modda RTL'de kontroller SOLA kayıyor.
   Yani tek bir ankraj kuralı iki rejimi birden doğru çözemiyor. Rejim başına: */

/* Rejim 1 — masaüstü navbar (≥1440px): düğme iki yönde de sağ uçta.
   Paneli düğmenin sağ kenarına yapıştır. */
@media (min-width: 1440px) {
    [dir="rtl"] .site-search__panel {
        inset-inline-end: auto;
        inset-inline-start: 0;
    }
}

.site-search__input {
    inline-size: 100%;
    padding-block: .6rem;
    padding-inline: .85rem;
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    text-align: start;
}

.site-search__input:focus-visible {
    outline: 2px solid var(--search-accent, #3b82f6);
    outline-offset: 1px;
}

.site-search__suggestions {
    margin-block: .6rem 0;
    margin-inline: 0;
    padding: 0;
    list-style: none;
    max-block-size: 60vh;
    overflow-y: auto;
}

.site-search__suggestion {
    border-radius: 8px;
}

.site-search__suggestion.is-active,
.site-search__suggestion:hover {
    background-color: rgba(127, 127, 127, .14);
}

.site-search__suggestion-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-block: .55rem;
    padding-inline: .6rem;
    color: inherit;
    text-decoration: none;
    text-align: start;
}

.site-search__suggestion-badge {
    flex: 0 0 auto;
    padding-block: .12rem;
    padding-inline: .45rem;
    border-radius: 999px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    background-color: rgba(127, 127, 127, .2);
}

/* Arapça'da letter-spacing harfleri koparır — RTL'de sıfırla.
   (feedback_arabic_no_letter_spacing) */
[dir="rtl"] .site-search__suggestion-badge {
    letter-spacing: normal;
    text-transform: none;
}

.site-search__suggestion-title {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-search__suggestion mark,
.site-search-result mark {
    background: transparent;
    color: var(--search-accent, #2563eb);
    font-weight: 700;
    padding: 0;
}

.site-search__suggestion--all .site-search__suggestion-link {
    justify-content: center;
    font-size: .88rem;
    opacity: .85;
}

/* ── arama sonuç sayfası ──────────────────────────────────── */

.site-search-page {
    padding-block: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.site-search-page__heading {
    margin-block-end: 1.25rem;
    text-align: start;
}

.site-search-page__form {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-block-end: 1.25rem;
}

.site-search-page__input {
    flex: 1 1 260px;
    padding-block: .7rem;
    padding-inline: 1rem;
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 1.05rem;
    text-align: start;
}

.site-search-page__hint {
    opacity: .8;
    text-align: start;
}

.site-search-page__notice {
    padding: 1rem 1.15rem;
    border-radius: 12px;
    border-inline-start: 4px solid #f59e0b;
    background: rgba(245, 158, 11, .12);
    text-align: start;
}

.site-search-page__empty {
    padding-block: 2rem;
    text-align: start;
}

.site-search-page__empty-hint {
    opacity: .75;
    margin-block-end: 1rem;
}

.site-search-page__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-block: 1rem;
}

.site-search-page__tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-block: .4rem;
    padding-inline: .55rem .4rem;
    border-radius: 999px;
    border: 1px solid rgba(127, 127, 127, .35);
    color: inherit;
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.2;
    transition: border-color .18s ease, background-color .18s ease;
}

.site-search-page__tab:hover,
.site-search-page__tab:focus-visible {
    border-color: var(--search-accent, #2563eb);
}

.site-search-page__tab.is-active {
    background-color: var(--search-accent, #2563eb);
    border-color: transparent;
    color: #fff;
}

/* Sayı, etiketten AYRI bir jeton olarak okunur: kendi zemini, sabit genişlikli
   rakamlar ve etiketten küçük punto. Böylece "Blog 7" iki ayrı bilgi gibi
   görünür, tek bir metin gibi değil. */
.site-search-page__tab-count {
    display: inline-block;
    min-inline-size: 1.6em;
    padding-block: .05rem;
    padding-inline: .45rem;
    border-radius: 999px;
    background-color: rgba(127, 127, 127, .16);
    font-size: .78em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.site-search-page__tab.is-active .site-search-page__tab-count {
    background-color: rgba(255, 255, 255, .24);
    color: #fff;
}

/* ── sonuç sayısı satırı ──────────────────────────────────── */

.site-search-page__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .45rem;
    font-size: 1.02rem;
    text-align: start;
}

.site-search-page__meta-count {
    font-size: 1.35em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--search-accent, #2563eb);
}

.site-search-page__meta-query {
    font-weight: 600;
}

.site-search-page__results {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-search-result {
    padding-block: 1.1rem;
    border-block-end: 1px solid rgba(127, 127, 127, .22);
    text-align: start;
}

.site-search-result__badge {
    display: inline-block;
    margin-block-end: .35rem;
    padding-block: .12rem;
    padding-inline: .5rem;
    border-radius: 999px;
    font-size: .7rem;
    background-color: rgba(127, 127, 127, .18);
}

.site-search-result__title {
    margin-block: .1rem .4rem;
    font-size: 1.15rem;
}

.site-search-result__title a {
    color: inherit;
    text-decoration: none;
}

.site-search-result__title a:hover {
    text-decoration: underline;
}

.site-search-result__snippet {
    margin-block-end: .45rem;
    opacity: .88;
}

.site-search-result__footer {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .82rem;
    opacity: .65;
}

.site-search-page__paging {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-block-start: 1.75rem;
}

.site-search-page__paging-status {
    font-variant-numeric: tabular-nums;
}

/* ── panel yerleşimi: hamburger modu ──────────────────────── */

/* Rejim 2 — hamburger modu (<1440px), YALNIZ RTL: bu modda kontroller sola
   kayıyor (768px'te düğme 375→419, 1280px'te 447→491). Ankraj panelin sağa
   büyümesine sebep oluyor ve dar ekranlarda taşıyordu (768px'te ölçülen: 27px).
   LTR'de aynı modda düğme sağ uçta kalıyor ve panel sola büyüdüğü için sorun
   YOK — bu yüzden LTR'ye dokunulmuyor (aksi hâlde 1280-1439 arasında panel
   düğmeden kopardı).
   Çözüm: RTL'de paneli viewport'a sabitleyip düğmenin bulunduğu fiziksel kenara
   (RTL'de inline-end = sol) yapıştır ve genişliği viewport'a göre kıs. */
@media (max-width: 1439.98px) {
    [dir="rtl"] .site-search__panel {
        position: fixed;
        inset-block-start: 64px;
        inset-inline-start: auto;
        inset-inline-end: .75rem;
        inline-size: min(420px, calc(100vw - 1.5rem));
    }
}

/* Telefon (LTR): panel iki uçtan .75rem boşlukla tam genişliğe yayılır.
   RTL zaten yukarıdaki daha özgül kuralla kapsanıyor. */
@media (max-width: 575.98px) {
    .site-search__panel {
        position: fixed;
        inset-block-start: 64px;
        inset-inline: .75rem;
        inline-size: auto;
    }
}

/* Hareket azaltma tercihi. */
@media (prefers-reduced-motion: reduce) {
    .site-search__toggle {
        transition: none;
    }
}