/* ==========================================================================
   arama-ekrani.css — uyguno ARAMA EKRANI (UYG-1100 · 18.10.2026 Sunai). Eşi: includes/arama_ekrani.php, js/arama-ekrani.js.
   Görünüm: iç sayfaların eski #search-modal'ının (Tailwind sınıfları) BİREBİR karşılığı — patron bu ekranı beğendi; ana sayfa Tailwind
   yüklemediği için sınıflar burada düz CSS. Tam ekran, üst şerit yapışık (kap position:fixed; içerik kendi içinde kayar),
   açıkken sayfa kaydırması kilitli (html.uy-ae-acik). Mobil klavye: yükseklik 100dvh (klavye açılınca görünür alan kadar).
   Light tema. Dokunma hedefleri 44 px. Kontrast: metin #334155 / beyaz 10,4:1 · yer tutucu #64748b 4,8:1.
   ========================================================================== */
.uy-ae[hidden] { display: none !important; }
.uy-ae {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  background: #fff; color: #334155;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
.uy-ae *, .uy-ae *::before, .uy-ae *::after { box-sizing: border-box; }
html.uy-ae-acik, html.uy-ae-acik body { overflow: hidden; }

/* Üst şerit: kutu EN ÜSTTE, yapışık (kap sabit, sonuçlar altında kayar) */
.uy-ae-ust {
  flex: none; position: sticky; top: 0; z-index: 1;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: rgb(248 250 252 / .8); border-bottom: 1px solid #e2e8f0;
  -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
}
.uy-ae-ic { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; }
.uy-ae-kapat {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: #475569; cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.uy-ae-kapat:hover { background: #e2e8f0; }
.uy-ae-kapat:active { transform: scale(.9); }
.uy-ae-form { flex: 1; display: flex; gap: 8px; min-width: 0; margin: 0; }
.uy-ae-girdi {
  flex: 1; min-width: 0; height: 44px; margin: 0; padding: 10px 16px;
  background: #fff; color: #334155; font: inherit; font-size: 1rem;   /* 16 px: iOS odakta yakınlaştırmasın (eskisi 14 px idi) */
  border: 1px solid #e2e8f0; border-radius: 12px; outline: 0;
  text-overflow: ellipsis; -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.uy-ae-girdi::placeholder { color: #64748b; opacity: 1; font-size: .9375rem; }   /* yer tutucu 15 px (girdi yazısı 16 px kalır → iOS yakınlaştırmaz) */
.uy-ae-girdi::-webkit-search-cancel-button { -webkit-appearance: none; }
.uy-ae-girdi:focus { border-color: #f97316; box-shadow: 0 0 0 3px #ffedd5; }
.uy-ae-ara {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 12px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #f97316, #ea580c);
  transition: transform .1s ease, filter .15s ease;
}
.uy-ae-ara:hover { filter: brightness(.95); }
.uy-ae-ara:active { transform: scale(.95); }
.uy-ae-kapat:focus-visible, .uy-ae-ara:focus-visible { outline: 3px solid #c2410c; outline-offset: 2px; }
.uy-ae-ara .uy-buyutec { width: 20px; height: 20px; }

/* Sonuç alanı: kendi içinde kayar; arama-odak.js paneli kutunun altından tam genişlik buraya biner */
.uy-ae-sonuc { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.uy-ae-sonuc:empty { padding: 0; }
/* Odak paneli (js/arama-odak.js .ao--yerinde, tam genişlik): içerik üst şeritle AYNI 760 px sütunda (geniş ekranda sola yapışmasın) */
.uy-ae .ao--yerinde { padding-inline: max(16px, calc((100% - 760px) / 2)); }

/* ---------- UYG-1103 · yazınca öneriler (js/arama-oneri.js — tek ortak çizici, her sayfada aynı biçim) ----------
   Sütun üst şeritle aynı 760 px. Satırlar 44 px (dokunma hedefi). Kontrast: metin #334155 10,4:1 · ikincil #64748b 4,8:1 ·
   fiyat #c2410c 5,2:1 · grup başlığı #64748b. Görseller 44×44 sabit kutu (yüklenmese de satır yüksekliği değişmez). */
.uy-ao-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.uy-ae-sonuc[data-oneri] { padding-inline: max(16px, calc((100% - 760px) / 2)); }
.uy-ao-g { margin: 0 0 8px; }
.uy-ao-g + .uy-ao-g { padding-top: 8px; border-top: 1px solid #f1f5f9; }
.uy-ao-bas { margin: 4px 0; padding: 0 8px; font-size: .6875rem; line-height: 1.6; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.uy-ao-l { list-style: none; margin: 0; padding: 0; }
.uy-ao-o {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: 10px;
  color: #334155; text-decoration: none; font-size: .9375rem; line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}
.uy-ao-o:hover { background: #fff7ed; }
.uy-ao-o:focus-visible { outline: 3px solid #c2410c; outline-offset: -3px; background: #fff7ed; }
.uy-ao-o > svg { width: 16px; height: 16px; flex: none; color: #94a3b8; }
.uy-ao-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uy-ao-ek { flex: none; font-size: .75rem; color: #64748b; }
.uy-ao-rozet { flex: none; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: .6875rem; font-weight: 600; }
.uy-ao-urun { gap: 12px; }
.uy-ao-gorsel { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: #f8fafc; color: #cbd5e1; overflow: hidden; }
.uy-ao-gorsel > svg { width: 20px; height: 20px; }
.uy-ao-gorsel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.uy-ao-urun-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uy-ao-market { font-size: .75rem; color: #64748b; }
.uy-ao-fiyat { flex: none; font-weight: 700; color: #c2410c; font-variant-numeric: tabular-nums; }
.uy-ao-tumu { margin-top: 4px; border-top: 1px solid #f1f5f9; border-radius: 0 0 10px 10px; padding-block: 10px; }
.uy-ao-tumu > svg { color: #ea580c; }
.uy-ao-tumu strong { color: #0f172a; }
.uy-ao-git { flex: none; font-size: .8125rem; font-weight: 700; color: #c2410c; }
.uy-ao-yok { margin: 24px 8px; text-align: center; color: #64748b; font-size: .9375rem; }
.uy-ao-yok a { color: #c2410c; font-weight: 600; }

/* Dar ekran (Fedai 18.10: yer tutucu "isters…" diye kesiliyordu): aralıklar 4 px daralır, yer tutucu sığar */
@media (max-width: 420px) {
  .uy-ae-ust { padding-inline: 12px; }
  .uy-ae-ic { gap: 8px; }
  .uy-ae-girdi { padding-inline: 12px; }
}

/* Kimlik büyüteci: kutu 20 px, sap kutudan taşar (eskisi gibi) */
.uy-buyutec { display: block; overflow: visible; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .uy-ae-kapat, .uy-ae-ara, .uy-ae-girdi { transition: none; }
  .uy-ae-kapat:active, .uy-ae-ara:active { transform: none; }
  .uy-ae .logo-magnifier { animation: none; }
}