/* ============================================================================ Arama kutusu önerileri (otomatik tamamlama) Kutu 'ye eklenir ve konumu JS ile hesaplanır (temadaki arama formlarından ikisi `overflow:hidden` kapsayıcıların içinde, forma konsa kırpılırdı). Bu yüzden burada `position: absolute` ve yüksek z-index var. Renkler static/css/marka.css'teki değişkenlere bağlı. Davranış: static/js/arama-oneri.js ============================================================================ */ .arama-oneri { position: absolute; z-index: 10050; /* tema perdeleri ve yapışkan başlığın üstünde */ max-height: 420px; overflow-y: auto; background: #fff; border: 1px solid var(--kenar, #e3e3e3); border-radius: 6px; box-shadow: 0 8px 24px rgba(var(--golge-rgb, 33, 33, 33), .16); padding: 4px 0; } .arama-oneri[hidden] { display: none; } .arama-oneri-satir { display: flex; align-items: center; gap: 12px; padding: 8px 14px; text-decoration: none; color: var(--ink, #212121); border: none; } .arama-oneri-satir:hover, .arama-oneri-satir:focus, .arama-oneri-satir.secili { background: var(--yuzey, #f4f4f4); text-decoration: none; color: var(--ink, #212121); } .arama-oneri-kapak { flex: 0 0 34px; width: 34px; height: 48px; object-fit: cover; border-radius: 2px; background: var(--yuzey, #f4f4f4); } /* Kapağı olmayan kitap: görsel indirmek yerine basit bir simge çizilir. */ .arama-oneri-kapak-yok { display: flex; align-items: center; justify-content: center; border: 1px solid var(--kenar, #e3e3e3); color: var(--ink-2, #6b6b6b); } .arama-oneri-metin { display: flex; flex-direction: column; min-width: 0; /* uzun başlık satırı taşırmasın */ gap: 2px; } .arama-oneri-ad { font-size: 14px; line-height: 1.35; /* Başlık iki satırı geçmesin; katalogda 100 karakterlik adlar var. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .arama-oneri-yazar { font-size: 12px; color: var(--ink-2, #6b6b6b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arama-oneri-tumu { display: block; padding: 11px 14px; margin-top: 4px; border-top: 1px solid var(--kenar, #e3e3e3); font-size: 13px; font-weight: 600; color: var(--marka, #c90000); text-decoration: none; } .arama-oneri-tumu:hover, .arama-oneri-tumu:focus, .arama-oneri-tumu.secili { background: var(--yuzey, #f4f4f4); color: var(--marka-koyu, #a00000); text-decoration: none; } .arama-oneri-bos { padding: 18px 14px; font-size: 13px; color: var(--ink-2, #6b6b6b); text-align: center; } @media (max-width: 767px) { .arama-oneri { max-height: 60vh; } .arama-oneri-kapak { flex-basis: 30px; width: 30px; height: 42px; } }